子元素偽類選擇器，就是選擇某一個(gè)元素下面的子元素的方式。選擇子元素，在jQuery中是很常用的操作。jQuery為我們提供了大量選擇子元素的方式，使得我們操作元素更加的方便快捷。
在jQuery中，子元素偽類選擇器分為2大類。
| 選擇器 | 說(shuō)明 |
|---|---|
| :first-child | 選擇父元素的第1個(gè)子元素 |
| :last-child | 選擇父元素的最后1個(gè)子元素 |
| :nth-child(n) | 選擇父元素下的第n個(gè)元素或奇偶元素，n的值為“整數(shù)|odd|even” |
| :only-child | 選擇父元素中唯一的子元素（該父元素只有一個(gè)子元素） |
下面我們通過(guò)幾個(gè)實(shí)例，來(lái)讓大家深刻地理解這些選擇器。
舉例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html><head> <title></title> <style type="text/css"> *{padding:0;margin:0;} ul { display:inline-block; width:200px; list-style-type:none; } li{height:20px;} </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("ul li:first").css("background-color", "red"); $("ul li:nth-child(2)").css("background-color", "orange"); $("ul li:nth-child(3)").css("background-color", "yellow"); $("ul li:nth-child(4)").css("background-color", "green"); $("ul li:last").css("background-color", "blue"); }) </script></head><body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></body></html> |
在瀏覽器預(yù)覽效果如下：
分析：
$("ul li:first")表示選擇ul元素下的第1個(gè)li元素。其實(shí)$("ul li:first")也等價(jià)于$("ul li:nth-child(1)")。$("ul li:last")表示選擇ul元素下的最后一個(gè)元素，在這個(gè)例子中也等價(jià)于$("ul li:nth-child(5)")。
沒(méi)有接觸子元素偽類選擇器的同學(xué)，如果要操作某一個(gè)元素的子元素，往往都是給該子元素添加一個(gè)id或者class。但是這樣會(huì)導(dǎo)致id或class泛濫成災(zāi)，影響HTML結(jié)構(gòu)，使得代碼難以維護(hù)。不過(guò)有了子元素偽類選擇器，我們可以輕松地進(jìn)行選擇操作。
學(xué)過(guò)CSS3的小伙伴就會(huì)問(wèn)了，上面的效果用CSS操作豈不是來(lái)得更簡(jiǎn)單些？廢話，當(dāng)然是啦。大家在后面的學(xué)習(xí)中，特別是入門階段的實(shí)例，很多時(shí)候我們重在講解知識(shí)概念，而不會(huì)在乎哪個(gè)方法更好。如果實(shí)例能夠幫助大家理解該知識(shí)點(diǎn)，目的就達(dá)到了。對(duì)于知識(shí)的實(shí)踐部分，我們都會(huì)在進(jìn)階教程都會(huì)介紹，大家不用擔(dān)心。此外，關(guān)于CSS3的學(xué)習(xí)，大家可以關(guān)注我們的CSS3教程。
舉例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html><head> <title></title> <style type="text/css"> *{padding:0;margin:0;} ul { display:inline-block; width:200px; list-style-type:none; } li{height:20px;} </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { //設(shè)置奇數(shù)列的背景顏色 $("ul li:nth-child(odd)").css("background-color", "red"); //設(shè)置偶數(shù)列的背景顏色 $("ul li:nth-child(even)").css("background-color", "red"); }) </script></head><body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></body></html> |
在瀏覽器預(yù)覽效果如下：
分析：
$("ul li:nth-child(odd)")表示選擇ul元素下奇數(shù)的li元素，$("ul li:nth-child(even)")表示選擇ul元素下偶數(shù)的li元素。
| 選擇器 | 說(shuō)明 |
|---|---|
| :first-of-type | 選擇同元素類型的第1個(gè)同級(jí)兄弟元素 |
| :last-of-type | 選擇同元素類型的最后1個(gè)同級(jí)兄弟元素 |
| :nth-of-type | 選擇同元素類型的第n個(gè)同級(jí)兄弟元素，n的值可以是“整數(shù)|odd|even” |
| :only-of-type | 匹配父元素中特定類型的唯一子元素（但是父元素可以有多個(gè)子元素） |
對(duì)于這些選擇器，我們一定要結(jié)合實(shí)例來(lái)理解其定義。其實(shí)，這2類子元素偽類選擇器在形式上非常相似的，但是卻有著本質(zhì)上的區(qū)別。
“第1類選擇器不分元素類型，第2類選擇器區(qū)分元素類型。”大家一定要記住這句話，對(duì)于你區(qū)分和理解這2類選擇器極其重要。除此之外，我們仔細(xì)觀察會(huì)發(fā)現(xiàn)，第2類選擇器的命名上都有一個(gè)“type”（元素類型），這還給我們帶來(lái)了一個(gè)記憶小技巧。
下面我們通過(guò)具體實(shí)例，來(lái)幫助大家真正去理解這2類子元素偽類選擇器。
1 2 3 4 5 6 | <div> <h1></h1> <p></p> <span></span> <span></span></div> |
h1:first-child：選擇的是h1元素，因?yàn)閔1元素是div的第1個(gè)子元素。
p:first-child：選擇不到任何元素，因?yàn)閜并不是div的第1個(gè)子元素，而是div的第2個(gè)子元素。
span:first-child:選擇不到任何元素，因?yàn)閟pan并不是div的第1個(gè)子元素，而是div的第3個(gè)子元素；
h1: first-of-type:選擇的是h1元素，因?yàn)閔1元素是div中所有h1元素中的第1個(gè)h1元素，事實(shí)上也只有一個(gè)為h1的子元素。
p: first-of-type:選擇的是p元素，因?yàn)閜元素是div中所有p元素中的第1個(gè)p元素，事實(shí)上也只有一個(gè)為p的子元素。
span: first-of-type:選擇的是id="first"的span元素，因?yàn)樵赿iv元素中有2個(gè)span元素，這里我們選擇的是兩個(gè)span中的第1個(gè)。
總結(jié)：
①“:first-child”是選擇父元素下的第1個(gè)子元素（不區(qū)分元素類型），而“:first-of-type”是選擇父元素下某個(gè)元素類型的第1個(gè)子元素（區(qū)分元素類型）；
②“:last-child”和“:last-of-type”、“nth-child（n）”和“:nth-of-type（n）”的使用原理跟“:first-child”和“:first-of-type”是一樣的，大家試著想一下另外幾個(gè)用在這個(gè)例子上的區(qū)別。
在“:only-child選擇器”中，父元素是只有一個(gè)子元素的。但是在“:only-of-type選擇器”中，卻可以有多個(gè)子元素?！?only-of-type”相對(duì)“:only-child”來(lái)說(shuō)，只是多了一個(gè)type（元素類型）的限制。
舉例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html><head> <title></title> <style type="text/css"> /*去除所有元素默認(rèn)外邊距以及內(nèi)邊距*/ *{padding:0;margin:0;} </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("div p:only-child").css("background-color", "red"); }) </script></head><body> <div> <p>這是一個(gè)段落</p> </div> <div> <p>這是一個(gè)段落</p> <span>這是一個(gè)span</span> </div></body></html> |
在瀏覽器預(yù)覽效果如下：
分析：
對(duì)于“:only-child選擇器”來(lái)說(shuō)，其父元素下面只能有一個(gè)子元素。在這個(gè)例子中，第1個(gè)div元素內(nèi)部只有一個(gè)子元素，因此被選中。第2個(gè)div元素有2個(gè)子元素（p和span），因此沒(méi)有被選中。
當(dāng)我們把$("div p:only-child")改為$("div p:only-of-type")時(shí)，在瀏覽器預(yù)覽效果如下，大家仔細(xì)琢磨一下原因。
聯(lián)系客服
