深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
前面的话
在上一篇中已经介绍过基础选择器和层级选择器，本文开始介绍过滤选择器。过滤选择器是jQuery选择器中最为庞大也是最为出彩的一部分。以CSS结构伪类选择器为基础，jQuery过滤选择器增加了很多扩展功能。本文先从与CSS选择器最相近的子元素过滤选择器开始说起
通用形式
$(':nth-child(index)')
$(':nth-child(index)')选择每个父元素的第index个子元素(index从1算起)，返回集合元素
$(':nth-child(1)') 每个父元素下第1个子元素
$('span:nth-child(1)') 每个父元素下第1个子元素，且该子元素为span元素
$('div span:nth-child(1)') 每个为div元素的父元素下第1个子元素，且该子元素为span元素
<button id="btn1" style="color: red;">$(':nth-child(1)')</button> <button id="btn2" style="color: blue;">$('span:nth-child(1)')</button> <button id="btn3" style="color: green;">$('div span:nth-child(1)')</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();} //匹配每个父元素的第1个子元素，结果是1.1、2.1和3.1 //[注意]实际上，<head>元素作为<html>元素的第1个子元素，也被设置为color:red btn1.onclick = function(){$(':nth-child(1)').css('color','red');} //匹配每个父元素的第1个子元素，且该子元素是span元素，结果是2.1和3.1 btn2.onclick = function(){$('span:nth-child(1)').css('color','blue');} //匹配每个div元素为父元素的第1个子元素，且该子元素是span元素，结果是3.1 btn3.onclick = function(){$('div span:nth-child(1)').css('color','green');} </script>
对应于CSS的结构伪类选择器nth-child(n)
nth-child(n)选择器用于选择每个父元素下的第n个子元素(n从1开始)
如果要完成同样的上面三个功能，选择器格式分别为：
:nth-child(1){color:red;} span:nth-child(1){color:blue;} div span:nth-child(1){color:green;}
如果上面的第三个功能要使用javascript实现，则表现如下：
var divs = document.getElementsByTagName('div'); for(var i = 0; i < divs.length; i++){ var firstChild = divs[i].firstElementChild; if(firstChild.nodeName == 'SPAN'){ firstChild.style.color = 'green'; } }
参数
当然$(':nth-child(index)')选择器作为通用的子元素过滤选择器，可以有多种参数选择
【1】$(':nth-child(even)') 选取每个父元素下的索引值为偶数的元素
【2】$(':nth-child(odd)') 选取每个父元素下的索引值为奇数的元素
【3】$(':nth-child(3n+1)') 选取每个父元素下的索引值为(3n+1)的元素
<button id="btn1" style="color: red;">$(':nth-child(even)')</button>
<button id="btn2" style="color: blue;">$(':nth-child(odd)')</button>
<button id="btn3" style="color: green;">$(':nth-child(3n+1)')</button>
<button id="reset">还原</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
//匹配每个父元素为ul的偶数个元素，结果是2、4
btn1.onclick = function(){$('ul :nth-child(even)').css('color','red');}
//匹配每个父元素为ul的奇数个元素，结果是1、3、5
btn2.onclick = function(){$('ul :nth-child(odd)').css('color','blue');}
//匹配每个父元素为ul的(3n+1)个元素，结果是1、4
btn3.onclick = function(){$('ul :nth-child(3n+1)').css('color','green');}
</script>
反向形式
$(':nth-last-child(index)')
$(':nth-last-child(index)')选择器选择每个父元素的反向第index个子元素(index从最后一个元素计数到第一个元素为止)，返回集合元素
<button id="btn1" style="color: red;">$(':nth-last-child(even)')</button> <button id="btn2" style="color: blue;">$(':nth-last-child(odd)')</button> <button id="btn3" style="color: green;">$(':nth-last-child(3n+1)')</button> <button id="reset">还原</button> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <script src="jquery-3.1.0.js"></script> <script> reset.onclick = function(){history.go();} //匹配每个父元素为ul的偶数个元素(从后往前数)，所以结果为5(倒数第2个)、3(倒数第4个)、1(倒数第6个) btn1.onclick = function(){$('ul :nth-last-child(even)').css('color','red');} //匹配每个父元素为ul的奇数个元素(从后往前数)，所以结果为6(倒数第1个)、4(倒数第3个)、2(倒数第5个) btn2.onclick = function(){$('ul :nth-last-child(odd)').css('color','blue');} //匹配每个父元素为ul的反向的(3n+1)个元素，即1、4，所以结果是6(倒数第1个)、3(倒数第4个) btn3.onclick = function(){$('ul :nth-last-child(3n+1)').css('color','green');} </script>
首尾子元素
为了方便，jQuery还定义了第一个子元素和最后一个子元素的获取方式
$(':first-child')
:first-child选择器是:nth-child(1)选择器的简写形式，选取每个父元素的第1个子元素
$(':last-child')
类似地，$(':last-child')选择器选取每个父元素的最后1个子元素
<button id="btn1" style="color: red;">$('div :first-child')</button>
<button id="btn2" style="color: blue;">$('div :last-child')</button>
<button id="btn3" style="color: green;">$('div span:first-child')</button>
<button id="btn4" style="color: pink;">$('div span:last-child')</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和3.1
btn1.onclick = function(){$('div :first-child').css('color','red');}
//匹配每个div元素为父元素的最后1个子元素，结果是1.2和3.2
btn2.onclick = function(){$('div :last-child').css('color','blue');}
//匹配每个div元素为父元素的第1个子元素，且该子元素是span元素，结果是3.1
btn3.onclick = function(){$('div span:first-child').css('color','green');}
//匹配每个div元素为父元素的最后1个子元素，且该子元素是span元素，结果是1.2
btn4.onclick = function(){$('div span:last-child').css('color','pink');}
</script>
首尾子元素选择器分别对应于CSS中的:first-child和:last-child
如果要完成同样的功能，选择器格式分别为：
div :first-child{color:red;} div :last-child{color:blue;} div span:first-child{color:green;} div span:last-child{color:pink;}
如果使用javascript选择器要完成上面的最后一个功能，则如下所示
var divs = document.getElementsByTagName('div'); for(var i = 0; i < divs.length; i++){ var lastChild = divs[i].lastElementChild; if(lastChild.nodeName == 'SPAN'){ lastChild.style.color = 'pink'; } }
唯一子元素
$(':only-child')
$(':only-child')选择器的匹配规则为：如果某个元素是它父元素中的唯一的子元素，才会被匹配
$('div span:only-child').css('color','green');
对应于CSS的:only-child选择器
div span:only-child{color:green;}
如果使用javascript实现，则如下所示
var divs = document.getElementsByTagName('div'); for(var i = 0; i < divs.length; i++){ var children = divs[i].children; if(children.length == 1 && children[0].nodeName == 'SPAN'){ children[0].style.color = 'green'; } }
<button id="btn1" style="color: green;">$('div span:only-child')</button>
<button id="reset">还原</button>
<div>
<span>1.1</span>
</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>元素，但由于它并不是唯一的子元素，所以无法被匹配
btn1.onclick = function(){$('div span:only-child').css('color','green');}
</script>
最后
在CSS结构伪类选择器中，nth-child(n)和nth-of-type(n)选择器经常容易混淆，需要小心区分才能避免出错。类似地，在jQuery过滤选择器中，子元素选择器和索引选择器也是非常相近，容易混淆。在选择器系列下一篇中，将类比于本文的子元素选择器，详细介绍索引选择器
欢迎交流
好的代码像粥一样，都是用时间熬出来的
