深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

Posted 2020-08-04 小火柴的蓝色理想

[1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素

前面的话

　　本文是子元素选择器的续篇，主要介绍关于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>
    <span>1.2</span>
    <span>1.3</span>    
</div>
<div>
    <i>2.1</i>
    <span>2.2</span>
    <span>2.3</span>
</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>
    <span>2</span>
    <span>3</span>    
    <i>4</i>
    <span>5</span>
    <span>6</span>
</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>
    <span>2</span>
    <span>3</span>    
    <i>4</i>
    <span>5</span>
    <span>6</span>
</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>
    <span>1.2</span>
</div>
<p  id="t2">
    <span>2.1</span>
    <i>2.2</i>
</p>
<div id="t3">
    <span>3.1</span>
    <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>
    <span>1.1</span>
    <span>1.2</span>
    <i>1.3</i>
</div>
<div>
    <span>2.1</span>
    <i>2.2</i>
</div>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
//第2个div中只存在一个<span>元素，所以结果是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()。方法多了，容易混淆，使用时有多种选择，但要注意区分

　　丰富是好事，也是坏事

　　库是好事，也是坏事

　　以上