【原】jQuery子元素偽類選擇器

沙門空海 2018-02-22

展開全文

子元素偽類選擇器，就是選擇某一個(gè)元素下面的子元素的方式。選擇子元素，在jQuery中是很常用的操作。jQuery為我們提供了大量選擇子元素的方式，使得我們操作元素更加的方便快捷。

在jQuery中，子元素偽類選擇器分為2大類。

一、第1類子元素偽類選擇器

子元素偽類選擇器（1）
選擇器	說明
:first-child	選擇父元素的第1個(gè)子元素
:last-child	選擇父元素的最后1個(gè)子元素
:nth-child(n)	選擇父元素下的第n個(gè)元素或奇偶元素，n的值為“整數(shù)\|odd\|even”
:only-child	選擇父元素中唯一的子元素（該父元素只有一個(gè)子元素）

下面我們通過幾個(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>

<html xmlns="http://www./1999/xhtml">

<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>

</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)")。

沒有接觸子元素偽類選擇器的同學(xué)，如果要操作某一個(gè)元素的子元素，往往都是給該子元素添加一個(gè)id或者class。但是這樣會(huì)導(dǎo)致id或class泛濫成災(zāi)，影響HTML結(jié)構(gòu)，使得代碼難以維護(hù)。不過有了子元素偽類選擇器，我們可以輕松地進(jìn)行選擇操作。

學(xué)過CSS3的小伙伴就會(huì)問了，上面的效果用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>

<html xmlns="http://www./1999/xhtml">

<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>

</ul>

</body>

</html>

在瀏覽器預(yù)覽效果如下：

分析：

$("ul li:nth-child(odd)")表示選擇ul元素下奇數(shù)的li元素，$("ul li:nth-child(even)")表示選擇ul元素下偶數(shù)的li元素。

二、第2類子元素偽類選擇器

子元素偽類選擇器（2）
選擇器	說明
: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è)記憶小技巧。

下面我們通過具體實(shí)例，來(lái)幫助大家真正去理解這2類子元素偽類選擇器。

1、:first-child和:first-of-type

?

1

2

3

4

5

6

<div>

<h1></h1>

<p></p>

<span></span>

</div>

（1）:first-child

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è)子元素；

（2）:first-of-type

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ū)別。

2、:only-child和:only-of-child

在“:only-child選擇器”中，父元素是只有一個(gè)子元素的。但是在“:only-of-type選擇器”中，卻可以有多個(gè)子元素?！?only-of-type”相對(duì)“:only-child”來(lái)說，只是多了一個(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>

<html xmlns="http://www./1999/xhtml">

<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)說，其父元素下面只能有一個(gè)子元素。在這個(gè)例子中，第1個(gè)div元素內(nèi)部只有一個(gè)子元素，因此被選中。第2個(gè)div元素有2個(gè)子元素（p和span），因此沒有被選中。

當(dāng)我們把$("div p:only-child")改為$("div p:only-of-type")時(shí)，在瀏覽器預(yù)覽效果如下，大家仔細(xì)琢磨一下原因。

贊賞

共11人贊賞

电竞比分网-中国电竞赛事及体育赛事平台

【原】jQuery子元素偽類選擇器

一、第1類子元素偽類選擇器

二、第2類子元素偽類選擇器

1、:first-child和:first-of-type

（1）:first-child

（2）:first-of-type

2、:only-child和:only-of-child

一、第1類子元素偽類選擇器

1、:first-child和:first-of-type

2、:only-child和:only-of-child