jQuery_选择器超详细

一.基本选择器
1.   $(“#demo”) ： 选择 id为demo的第一个元素

  $("#demo").css('background','black");   //有多个只选择第一个 

2.  $(“.item”): 选择所有class为item的元素

 $(".item").css('background','black")

3.  $(‘div’) : 选择所有标签为div的元素

 $('div') .css('background','black")

4.  $(“*”) :选择所有的元素，配合其他选择器来使用

$("*").css('background','black")

5.  $(‘.item,div’) :选择多个指定的选择器，这里是指item和div元素

$('.item,div') .css('background','black")

6.  $(“li#aa”) : 交集选择器

 $("li#aa")  .css('background','black")

二.层级选择器
     层级选择器是选择了选择符后面的那个元素，比如，div > p ,是选择 > 后面的 p 元素

1.  空格: 后代选择器,选择所有的后代

 $("div span")

2.  > : 子代选择器，选择所有的子代元素

  $("div>span") 

3.  + :紧邻选择器，选择该元素的紧邻选择器

 $("div+span") 

4.  ~ :兄弟选择器，选择该元素后面的兄弟元素

 $("div~span") 

三.过滤选择器
过滤选择器主要是以冒号开头：
A.基本过滤选择器
1.   :eq(index)
index 是从0开始的一个数字 ，选择序号为index的元素

$("li:eq(2)").css('background',"red")    
//选中li 第三个元素设置背景颜色，选中第一个匹配元素

2.  :last
选择匹配最后一个元素

$("li:last").css('background',"red")    
// 选择li中最后一个元素

3.  :first
选择匹配第一个元素

$("li:first").css('background',"red")     
//   选择li中第一个元素

4.  :even / :odd
odd选择所有的序号为奇数的元素

$("li:odd").css('background',"red")     
//选中li奇数元素设置背景颜色      

5.  :It(index)/:gt(index)
index是从0开始的一个数字 ，选择序号大于index

 $("li:gt(2)").css('background',"red")      // 选中li 大于第三个元素设置背景颜色

B.内容过滤选择器

C.可见性过滤选择器

D.属性过滤选择器 $(“a”)
1.  $(“a[attribute]”) : 选出属性为attribute的a元素

   $('a[href]').css("color","red");  

2.  $(“a[attribute = value] “) : 选出属性attribute为value值的a元素

 $('a[href=“value”]').css("color","red");

3.  $(“a[attribute！=value]”) :选出所有属性值不为value的a元素，包括没有该属性的a元素

$('a[href!=“value”]').css("color","red"); 
// 注意： $('a').css("color","red")  没有href的a元素也会被选中

4.  $(“a[attribute^=value] “):选中以value开头的a元素

 $('a[href^=“http”]').css("color","red") 
 // 选中href值以http开头的a元素

5.  $(“a[attribute=value] “): 选中以value结尾的a元素。
（在attribute后面有美元符号，因为编辑原因无法显示 ）

 $('a[href$=“cn”]').css("color","red"); 
  //选中href值以cn结尾的a元素   

6.  $(“a[attribute*=value]”) ：选中包含value的a元素 ，value可以是中英文

$('a[href*=“i”]').css("color","red")  选中href值包含i的a元素

1.   $(“a[attribute][attribute] “) ：满足这两个属性的a元素被选出来

  $('a[href][title]).css("color","red")；
  //选中有href和title属性的a元素

E.子元素过滤选择器
F.表单对象属性选择器

四.筛选选择器（方法）
1.   .parent(expr)：选择父元素,可以筛选

       $("span").parent().css("font-size","40px")  
 筛选： $("span").parent(.selected).css("font-size","40px")    

2.  .children(): 选择子元素

$("span").children().css("font-size","40px")  

3.  .siblings(): 选择兄弟元素,除了它自己其余的兄弟元素

 $("span").siblings().css("font-size","40px")  

4.  .eq(index) :选择第index个
与：eq很相似，但.eq()是方法

  $("span").eq(1).css("font-size","40px")    // 选择第一个span元素 

5.  .find():查找元素

$("div").find("#one").css('color',"red")     //查找div下面的id为one的元素

6.  .first():选择第一个元素

$("span").first().css("font-size","40px")