jquery 子元素过滤器 Child Filters

名称	说明	举例
:nth-child(index/even/odd/equation)	匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！ 可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)	在每个 ul 查找第 2 个li: $("ul li:nth-child(2)")
:first-child	匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素	在每个 ul 中查找第一个 li: $("ul li:first-child")
:last-child	匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素	在每个 ul 中查找最后一个 li: $("ul li:last-child")
:only-child	如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。	在 ul 中查找是唯一子元素的 li: $("ul li:only-child")

注：

1、:nth-child(index)从1开始的，而eq(index)是从0开始的，就是说  $("ul li:nth-child(0)").css("color","red")是获取不到相匹配的元素，只能从1开始，即  $("ul li:nth-child(1)").css("color","red")，而eq(0)可以获得，同样都是获得第一个子元素

    :nth-child(even)是获得偶数子元素，即第二个，第四个，第六个...,而:even则是从索引0开始，匹配第二个索引，第四个索引...,也就是第一个，第三个，第五个...,看上去貌似都是获得奇数项，同样:nth-child(odd)和:odd同样也是如此 

2、   :first-child匹配每个父类的子元素，而:first则是匹配一个子元素， :last-child和last也是这样

3、only-child:匹配某个元素是父元素中唯一的子元素，就是说当前子元素是类中唯一的元素，则匹配！

 

 
   
   <! 
   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
   > 
   
 
   
 
   < 
   html  
   xmlns 
   ="http://www.w3.org/1999/xhtml" 
   > 
   
 
   < 
   head  
   runat 
   ="server" 
   > 
   
     
   < 
   title 
   >无标题页 
   </ 
   title 
   > 
   
     
   < 
   script  
   src 
   ="../js/jquery-1.6.min.js" 
    type 
   ="text/javascript" 
   ></ 
   script 
   > 
   
     
   < 
   script  
   type 
   ="text/javascript" 
   > 
   
      jQuery( 
   function 
   ($){
      
   // 
     $("ul li:first-child").css("color","red"); 
   
 
          $( 
   " 
   ul li:first 
   " 
   ).css( 
   " 
   color 
   " 
   , 
   " 
   red 
   " 
   );
      
   // 
    $("ul li:last-child").css("color","red"); 
   
 
            
   // 
    $("ul li:nth-child(even)").css("color","red"); 
   
 
            
         
   // 
    $("ul li:odd").css("color","red"); 
   
 
         })
     
   </ 
   script 
   > 
   
 
   </ 
   head 
   > 
   
 
   < 
   body 
   > 
   
     
   < 
   form  
   id 
   ="form1" 
    runat 
   ="server" 
   > 
   
     
   < 
   div 
   > 
   
     
   < 
   ul 
   > 
   
     
   < 
   li 
   >第一个元素 
   </ 
   li 
   > 
   
     
   < 
   li 
   >第二个元素 
   </ 
   li 
   > 
   
     
   < 
   li 
   >第三个元素 
   </ 
   li 
   > 
   
     
   < 
   li 
   >第四个元素 
   </ 
   li 
   > 
   
     
   < 
   li 
   >第五个元素 
   </ 
   li 
   > 
   
     
   < 
   li 
   >第六个元素 
   </ 
   li 
   > 
   
     
   </ 
   ul 
   > 
   
      
   < 
   ul 
   > 
   
     
   < 
   li 
   >第一个元素 
   </ 
   li 
   > 
   
     
   < 
   li 
   >第二个元素 
   </ 
   li 
   > 
   
     
   < 
   li 
   >第三个元素 
   </ 
   li 
   > 
   
     
   < 
   li 
   >第四个元素 
   </ 
   li 
   > 
   
     
   < 
   li 
   >第五个元素 
   </ 
   li 
   > 
   
     
   < 
   li 
   >第六个元素 
   </ 
   li 
   > 
   
     
   </ 
   ul 
   > 
   
     
   </ 
   div 
   > 
   
     
   </ 
   form 
   > 
   
 
   </ 
   body 
   > 
   
 
   </ 
   html 
   >