深入學習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>