jquery基础选择器、层级选择器、过滤选择器

基础选择器

			$(function () {
                1.选择 id 为 one 的元素 "background-color","#bbffaa"
                $("#btn1").click(function () {
                    $("#one").css("background-color","#bbffaa");
                });

                2.选择 class 为 mini 的所有元素
                $("#btn2").click(function () {
                    $(".mini").css("background-color","#bbffaa");
                });

                3.选择 元素名是 div 的所有元素
                $("#btn3").click(function () {
                    $("div").css("background-color","#bbffaa");
                });

                4.选择所有的元素
                $("#btn4").click(function () {
                    $("*").css("background-color","#bbffaa");
                })

                5.选择所有的 span 元素和id为two的元素
                $("#btn5").click(function () {
                    $("span,#two").css("background-color","#bbffaa")
                })
            });

.
.

层级选择器

			$(document).ready(function(){
				1.选择 body 内的所有 div 元素
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				2.在 body 内, 选择div子元素  
				$("#btn2").click(function(){
					$("body > div").css("background", "#bbffaa");
				});
				只能选择子元素div,没办法选择子元素中的子元素

				3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function(){
					$("#one+div").css("background", "#bbffaa");
				});

				4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two~div").css("background", "#bbffaa");
				});
			});

.
.

过滤选择器

				1.选择第一个 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

				2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$("div:last").css("background", "#bbffaa");
				});

				3.选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});

				4.选择索引值为偶数的 div 元素
				$("#btn4").click(function(){
					$("div:even").css("background", "#bbffaa");
				});

				5.选择索引值为奇数的 div 元素
				$("#btn5").click(function(){
					$("div:odd").css("background", "#bbffaa");
				});

				6.选择索引值为大于 3 的 div 元素
				$("#btn6").click(function(){
					$("div:gt(3)").css("background", "#bbffaa");
				});

				7.选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

				8.选择索引值为小于 3 的 div 元素
				$("#btn8").click(function(){
					$("div:lt(3)").css("background", "#bbffaa");
				});

				9.选择所有的标题元素
				$("#btn9").click(function(){
					$(":header").css("background", "#bbffaa");
				});

				10.选择当前正在执行动画的所有元素
				$("#btn10").click(function(){
					$(":animated").css("background", "#bbffaa");
				});
				11.选择没有执行动画的最后一个div
				$("#btn11").click(function(){
					$("div:not(:animated):last").css("background", "#bbffaa");
				});