首页 > 代码库 > 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
目录
[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>
<iframe style="width: 100%; height: 80px;" src="http://sandbox.runjs.cn/show/f4czzwjr" frameborder="0" width="320" height="240"></iframe>
当然$(‘: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>
<iframe style="width: 100%; height: 60px;" src="http://sandbox.runjs.cn/show/yx9rykqy" frameborder="0" width="320" height="240"></iframe>
反向形式
: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>
<iframe style="width: 100%; height: 60px;" src="http://sandbox.runjs.cn/show/cndcne4f" frameborder="0" width="320" height="240"></iframe>
首尾元素
$(‘: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.2btn1.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.1btn3.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>
<iframe style="width: 100%; height: 130px;" src="http://sandbox.runjs.cn/show/pdizhuls" frameborder="0" width="320" height="240"></iframe>
首尾伪子元素选择器分别对应于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.1btn1.onclick = function(){$(‘div span:only-of-type‘).css(‘color‘,‘green‘);}</script>
<iframe style="width: 100%; height: 80px;" src="http://sandbox.runjs.cn/show/jgsaiak5" frameborder="0" width="320" height="240"></iframe>
最后
终于把jQuery选择器系列完结了，与原生javascript选择器相比，内容多了不少。jQuery选择器主要基于CSS选择器，并有所拓展。但实际上，选择器太过丰富也增加了选择的代价，同时也提出了各种选择器选用的性能问题
如果只有一条路，这条路再难，也得咬牙走下去。如果有10条路，如果时间充足，则可以把10条路都走一遍，找出最轻松的路，也就是性能最好的路；如果时间不足，只能挑一条熟悉的路，但总感觉没选到最轻松的路
就像索引选择器:eq()、子元素选择器:nth-child()和伪子元素选择器:nth-of-type()。方法多了，容易混淆，使用时有多种选择，但要注意区分
丰富是好事，也是坏事
库是好事，也是坏事
以上
<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script>深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器