前的言语

  本文是子元素选择器的续篇,主要介绍有关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';
    }
}

<button id='btn1' style="color:red">$('div span:nth-of-type(2)')</button>
<button id='btn2' style="color:blue">$('div span:nth-child(2)')</button>
<button id='btn3' style="color:green">$('div span:eq(1)')</button>
<button id="reset">还原</button>
<div>
    <i>1.1</i>
    1.2
    1.3    
</div>
<div>
    <i>2.1</i>
    2.2
    2.3
</div>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){
    //选择所有父元素为div元素的第2个出现的span元素,所以结果为1.3、2.3
    $('div span:nth-of-type(2)').css('color','red');
}
btn2.onclick = function(){
    //选择所有父元素为div元素的第2个子元素,且该子元素是span元素,所以结果是1.2、2.2
    $('div span:nth-child(2)').css('color','blue');
}
btn3.onclick = function(){
    //选择首次出现的父元素为div元素的第1个出现的span元素(索引从0开始),所以结果是1.3
    $('div span:eq(1)').css('color','green');
}
</script>

  当然$(‘:nth-of-type(index)’)选择器作为通用形式,可以出多参数选择

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

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

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

<button id="btn1" style="color: red;">$(':nth-of-type(even)')</button>
<button id="btn2" style="color: blue;">$(':nth-of-type(odd)')</button>
<button id="btn3" style="color: green;">$(':nth-of-type(3n+1)')</button>
<button id="reset">还原</button>
<div>
    <i>1</i>
    2
    3    
    <i>4</i>
    5
    6
</div>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
//匹配每个父元素为div的索引为偶数的元素,结果是3(第2个span)、6(第4个span)、4(第2个i)
btn1.onclick = function(){$('div :nth-of-type(even)').css('color','red');}

//匹配每个父元素为div的索引为奇数的元素,结果是1(第1个i)、2(第1个span)、5(第3个span)
btn2.onclick = function(){$('div :nth-of-type(odd)').css('color','blue');}

//匹配每个父元素为div的索引为(3n+1)的元素,索引可以是1、4。所以结果是1(第1个i)、2(第1个span)、6(第4个span)
btn3.onclick = function(){$('div :nth-of-type(3n+1)').css('color','green');}
</script>

反向形式

: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 = '';
        }
    }
}

<button id="btn1" style="color: red;">$(':nth-last-of-type(even)')</button>
<button id="btn2" style="color: blue;">$(':nth-last-of-type(odd)')</button>
<button id="btn3" style="color: green;">$(':nth-last-of-type(3n+1)')</button>
<button id="reset">还原</button>
<div>
    <i>1</i>
    2
    3    
    <i>4</i>
    5
    6
</div>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
//匹配每个父元素为div的索引为偶数的元素(从后往前数),结果是5(倒数第2个span)、2(倒数第4个span)、1(倒数第2个i)
btn1.onclick = function(){$('div :nth-last-of-type(even)').css('color','red');}

//匹配每个父元素为div的索引为奇数的元素(从后往前数),结果是4(倒数第1个i)、6(倒数第1个span)、3(倒数第3个span)
btn2.onclick = function(){$('div :nth-last-of-type(odd)').css('color','blue');}

//匹配每个父元素为div的索引为(3n+1)的元素(从后往前数),索引可以是1、4(从后往前数)。所以结果是4(倒数第1个i)、6(倒数第1个span)、2(倒数第4个span)
btn3.onclick = function(){$('div :nth-last-of-type(3n+1)').css('color','green');}
</script>

事由元素

$(‘:first-of-type’)

  :first-of-type选择器是:nth-of-type(1)选择器的简写形式,选取所有同一元素被的首单因素

$(‘:last-of-type’)

  类似地,$(‘:last-of-type’)选择器选取所有同一元素中之尾声一个素

<button id="btn1" style="color: red;">$('div :first-of-type')</button>
<button id="btn2" style="color: blue;">$('div :last-of-type')</button>
<button id="btn3" style="color: green;">$('div span:first-of-type')</button>
<button id="btn4" style="color: pink;">$('div span:last-of-type')</button>
<button id="reset">还原</button>
<div id="t1">
    <i>1.1</i>
    1.2
</div>
<p  id="t2">
    2.1
    <i>2.2</i>
</p>
<div id="t3">
    3.1
    <i>3.2</i>
</div>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
//匹配每个div元素为父元素的索引为1的元素,结果是1.1、1.2、3.1、3.2
btn1.onclick = function(){$('div :first-of-type').css('color','red');}

//匹配每个div元素为父元素的索引为1的元素(从后向前数),结果同上
btn2.onclick = function(){$('div :last-of-type').css('color','blue');}

//匹配每个div元素为父元素的索引为1的span元素,结果是1.2、3.1
btn3.onclick = function(){$('div span:first-of-type').css('color','green');}

//匹配每个div元素为父元素的索引为1的span元素(从后向前数),结果是同上
btn4.onclick = function(){$('div span:last-of-type').css('color','pink');}
</script>

  首尾伪子元素选择器分别对应于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';
    }
}

<button id="btn1" style="color: green;">$('div span:only-of-type')</button>
<button id="reset">还原</button>
<div>
    1.1
    1.2
    <i>1.3</i>
</div>
<div>
    2.1
    <i>2.2</i>
</div>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
//第2个div中只存在一个元素,所以结果是2.1
btn1.onclick = function(){$('div span:only-of-type').css('color','green');}
</script>

最后

  终于把jQuery选择器系列完结了,与原生javascript选择器相比之下,内容大多了很多。jQuery选择器主要基于CSS选择器,并有所进展。但实质上,选择器太过长呢加进了挑的代价,同时为提出了各种选择器选用的性问题

  如果就生一致长长的路,这条路更难,也得坚持走下。如果出10长路,如果时间充裕,则可拿10漫长总长还挪相同普,找有极自在的路途,也就是是性质最好的路;如果日相差,只能挑一样久熟悉的路程,但总感到没有选择到绝自在的行程

  就像目录选择器:eq()、子元素选择器:nth-child()和伪子元素选择器:nth-of-type()。方法大多了,容易混淆视听,使用时有多种取舍,但若是注意区分

  丰富是好事,也是帮倒忙

  库是善,也是坏事

  以上

相关文章

网站地图xml地图