前面的话

　　本文是的续篇，主要介绍关于nth-of-type()选择器的内容。该部分内容并非没有出现在《锋利的jQuery》一书中，nth-of-type()选择器参照CSS中的nth-of-type选择器，于1.9版本新增，本文将详细介绍该内容

 

通用形式

:nth-of-type()

　　个人认为，:nth-of-type()选择器不应该归类于子元素选择器，也不完全等同，因为其索引是指特定元素的索引，但索引是从1开始的，而且返回的是集合元素。所以，我把其称之为伪子元素选择器

$('div span:nth-of-type(2)').css('color','red');

　　对应于CSS的:nth-of-type()选择器

div span:nth-of-type(2){
   color:red;}

　　如果使用javascript实现类似效果

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    var span2 = divs[i].getElementsByTagName('span')[1];    if(span2){        span2.style.color = 'red';    }}

$('div span:nth-of-type(2)')$('div span:nth-child(2)')$('div span:eq(1)')还原
     
    
      1.1    
      1.2    
      1.3    
     
     
    
      2.1    
      2.2    
      2.3
     

　　当然$(':nth-of-type(index)')选择器作为通用形式，可以有多种参数选择

　　【1】$(':nth-of-type(even)') 选取所有索引值为偶数的元素

　　【2】$(':nth-of-type(odd)') 选取所有索引值为奇数的元素

　　【3】$(':nth-of-type(3n+1)') 选取所有索引值为(3n+1)的元素

$(':nth-of-type(even)')$(':nth-of-type(odd)')$(':nth-of-type(3n+1)')还原
     
    
      1    
      2    
      3        
      4    
      5    
      6
     

反向形式

:nth-last-of-type()

　　:nth-last-of-type()选择器选择所有第n个元素，但计数从最后一个元素到第一个

$('div :nth-last-of-type(even)').css('color','red');

　　对应的CSS选择器是:nth-last-of-type()

div :nth-last-of-type(even){
   color:red;}

　　如果使用javascript实现类似效果

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    var children = divs[i].children;    var lastName = '';    //从后往前数    for(var j = children.length; j > -1; j--){        //标签第一次出现或奇数次出现        if(children[j].nodeName != lastName){            children[j].style.color = 'red';            lastName = children[j].nodeName;        //标签第二次出现或偶数次出现        }else{            lastName = '';        }    }}

$(':nth-last-of-type(even)')$(':nth-last-of-type(odd)')$(':nth-last-of-type(3n+1)')还原
     
    
      1    
      2    
      3        
      4    
      5    
      6
     

首尾元素

$(':first-of-type')

　　:first-of-type选择器是:nth-of-type(1)选择器的简写形式，选取所有相同元素中的首个元素

$(':last-of-type')

　　类似地，$(':last-of-type')选择器选取所有相同元素中的最后一个元素

$('div :first-of-type')$('div :last-of-type')$('div span:first-of-type')$('div span:last-of-type')还原
     
    
      1.1    
      1.2
     
    2.1    2.2
     
    
      3.1    
      3.2
     

　　首尾伪子元素选择器分别对应于CSS中的:first-of-type和:last-of-type

　　如果要完成同样的功能，选择器格式分别为： 

div :first-of-type{
   color:red;}div :last-of-type{
   color:blue;}div span:first-of-type{
   color:green;}div span:last-of-type{
   color:pink;}

　　如果使用javascript选择器要完成上面的最后一个功能，则如下所示

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    var spans = divs[i].getElementsByTagName('span');    spans[spans.length-1].style.color = 'pink';}

 

唯一元素

:only-of-type()

　　:only-of-type()选择器选择出所有没有具有相同名称的兄弟元素的元素

$('div span:only-of-type').css('color','green');

　　对应于CSS的:only-of-type选择器

div span:only-of-type{
   color:green;}

　　如果使用javascript实现，则如下所示

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    var spans = divs[i].getElementsByTagName('span');    if(spans.length == 1){        divs[i].spans[0].color = 'green';    }}

$('div span:only-of-type')还原
     
    
      1.1    
      1.2    
      1.3
     
     
    
      2.1    
      2.2
     

最后

　　终于把jQuery选择器系列完结了，与相比，内容多了不少。jQuery选择器主要基于，并有所拓展。但实际上，选择器太过丰富也增加了选择的代价，同时也提出了各种选择器选用的性能问题

　　如果只有一条路，这条路再难，也得咬牙走下去。如果有10条路，如果时间充足，则可以把10条路都走一遍，找出最轻松的路，也就是性能最好的路；如果时间不足，只能挑一条熟悉的路，但总感觉没选到最轻松的路

　　就像:eq()、:nth-child()和:nth-of-type()。方法多了，容易混淆，使用时有多种选择，但要注意区分

　　丰富是好事，也是坏事

　　库是好事，也是坏事

　　以上