一  基本选择器:            id选择器  $(" #d1")            class选择器 $(".d1")

---

二  层级选择器:

1            后代选择器

           $(" body   div")   选择body里所有div选择素   所有的后代

2            父子选择器

               $("body>div")  选择body的子元素           body是父    div是子,   不包括孙子辈的  div

3      改变id为one的下一个div

            $("#one+div").ccs("color","red")       divID为one  他的下一个兄弟div的css属性

4      改变id为one的下边所有div

             $("#one~div").ccs("color","red")       divID为one  他的下一个兄弟 所有div的css属性   只选择id为one下边的的兄弟元素

---

三      过滤选择器

1  基本过滤选择器   所有选择器前都有    :   符号  10种

:first   :last   :even    :odd       :gr     :lt       :  eq      :not       :header     :animated

---

:first

$("#btn1").click(function(){

//获取div元素中的第一个                       

$("div:first").css("background","red");

});

:last

$("#btn2").click(function(){

//获取div元素中的最后一个

$("div:last").css("background","red");

});

:even

$("#btn3").click(function(){

//获取索引值为偶数的div元素

//索引值从0开始，索引值可以理解为下标

$("div:even").css("background","red");

});

:odd

$("#btn4").click(function(){

//获取索引值为奇数的div元素

//索引值从0开始，索引值可以理解为下标

$("div:odd").css("background","red");

}); 

:gt

$("#btn5").click(function(){

//索引值大于1的div元素

//下标  0  1    2(包括2之后所有背景为红色)

$("div:gt(1)").css("background","red");

});

:lt

$("#btn5").click(function(){

//索引值小于2的div元素

//下标  0  1    2(下标  0  1 的div背景为红色)

$("div:gt(2)").css("background","red");

});

:eq

$("#btn5").click(function(){

//索引值等于1的div元素

//下标  0  1    2(下标 1 的div背景为红色)

$("div:eq(1)").css("background","red");

});

以上几种   同一个body中的兄弟div  可以按顺序理解为下标  0   1   2  3  4  用那个选择器对应下标颜色改变

---

:not

$("#btn6").click(function(){

//获取class不为mini的div元素(包含没有class属性的div元素)

$("div:not('.mini')").css("background","red");

});

:header        此方法不常用

$("#btn7").click(function(){

//获取所有标题元素(h1--h6)

//所有的标题  h1-h6改变颜色

$("div:header").css("background","red");

});

:animated

$("#btn8").click(function(){

//获取当前正在执行动画的元素

$("div:animated").css("background","red");

});

---

2子元素过滤选择器  四种 

:nth-child   :first-child      :last-child         :only-child

:nth-child

$("#btn9").click(function(){

//获取div元素的子元素  是第二个  的div元素

//下标从1开始数  注意！

//nth-child选择器  索引值是从1开始

$("div:nth-child(2)").css("background","red");

});

:first-child

$("#btn9").click(function(){

//获取div元素的第一个子元素

$("div:first-child").css("background","red");

});

:last-child

$("#btn9").click(function(){

//获取div元素的最后一个子元素

$("div:last-child").css("background","red");

});