jquery中有什么層次選擇器

發(fā)布時(shí)間：2022-03-16 13:34:52 來(lái)源：億速云閱讀：233 作者：iii 欄目：web開(kāi)發(fā)

本文小編為大家詳細(xì)介紹“jquery中有什么層次選擇器”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery中有什么層次選擇器”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

jquery中的層次選擇器有：1、后代選擇器，語(yǔ)法“$("M N")”；2、子代選擇器，語(yǔ)法“$("M>N")”；3、兄弟選擇器，語(yǔ)法“$("M~N")”；4、相鄰選擇器，語(yǔ)法“$("M+N")”。

jquery中有什么層次選擇器

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

層次選擇器，就是通過(guò)元素之間的層次關(guān)系來(lái)選擇元素的一種基礎(chǔ)選擇器。層次選擇器在實(shí)際開(kāi)發(fā)中也是相當(dāng)重要的。常見(jiàn)的層次關(guān)系包括：父子、后代、兄弟、相鄰。

在 jQuery 中，層次選擇器共有 4 種，如下表所示。

jQuery 層次選擇器
選擇器	說(shuō)明
M N	后代選擇器，選擇 M 元素內(nèi)部的后代N元素（所有 N 元素）
M>N	子代選擇器，選擇 M 元素內(nèi)部的子代N元素（所有第 1 級(jí) N 元素）
M~N	兄弟選擇器，選擇 M 元素后面所有的同級(jí) N 元素
M + N	相鄰選擇器，選擇 M 元素相鄰的（下一個(gè)）元素（M、N 是同級(jí)元素）

此外，我們還需要注意以下 4 點(diǎn)：

$("M N") 可以使用 $(M).find(N) 代替；
$("M>N") 可以使用 $(M).children(N) 代替；
$("M~N") 可以使用 $(M).nextAll(N) 代替；
$("M+N") 可以使用 $(M).next(N) 代替。

對(duì)于 find( )、children( )、nextAll( )、next( ) 這 4 種方法，我們之后會(huì)詳細(xì)介紹，這里簡(jiǎn)單了解一下即可。

后代選擇器

后代選擇器，用于選擇元素內(nèi)部的所有某一種元素，包括子元素和其他后代元素。

語(yǔ)法：

$("M N")

“M元素”和“N元素”之間用空格隔開(kāi)，表示選中 M 元素內(nèi)部的后代 N 元素（即所有 N 元素）。

舉例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            $("#first p").css("color","red");
        })
    </script>
</head>
<body>
    <div id="first">
        <p>子元素</p>
        <p>子元素</p>
        <div id="second">
            <p>子元素的子元素</p>
            <p>子元素的子元素</p>
        </div>
        <p>子元素</p>
        <p>子元素</p>
    </div>
</body>
</html>

程序運(yùn)行效果如圖 1 所示：

jquery中有什么層次選擇器

$("#first p") 表示選取 id="first" 的元素內(nèi)部的所有 p 元素。因此，不管是子元素，還是其他后代元素，全部都會(huì)被選中。

子代選擇器

子代選擇器，用于選中元素內(nèi)部的某一種子元素。子代選擇器與后代選擇器雖然很相似，但是也有著明顯的區(qū)別。

后代選擇器，選取的是元素內(nèi)部所有的元素（包括子元素、孫元素等）；
子代選擇器，選取的是元素內(nèi)部的某一種子元素（只限子元素）。

語(yǔ)法：

$("M>N")

“M 元素”和“N 元素”之間使用>選擇符，表示選中 M 元素內(nèi)部的子元素 N。

舉例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            $("#first>p").css("color","red");
        })
    </script>
</head>
<body>
    <div id="first">
        <p>子元素</p>
        <p>子元素</p>
        <div id="second">
            <p>子元素的子元素</p>
            <p>子元素的子元素</p>
        </div>
        <p>子元素</p>
        <p>子元素</p>
    </div>
</body>
</html>

預(yù)覽效果如圖 2 所示：

jquery中有什么層次選擇器

$("#first>p") 表示選中 id="first" 的元素下的子元素 p。我們將這個(gè)例子與后代選擇器的例子對(duì)比一下，就可以很清楚地知道：子代選擇器只選取子元素，不包括其他后代元素。

兄弟選擇器

兄弟選擇器，用于選中元素后面（不包括前面）的某一類兄弟元素。

語(yǔ)法：

$("M~N")

“M 元素”和“N 元素”之間使用~選擇符，表示選中 M 元素后面所有的兄弟元素 N。

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function() {
				$("#second~p").css("color", "red");
			})
		</script>
	</head>
	<body>
		<div id="first">
			<p>子元素</p>
			<p>子元素</p>
			<div id="second">
				<p>子元素的子元素</p>
				<p>子元素的子元素</p>
			</div>
			<p>子元素</p>
			<p>子元素</p>
		</div>
	</body>
</html>

程序執(zhí)行結(jié)果如圖 3 所示：

jquery中有什么層次選擇器

$("#second~p") 表示選取 id="second" 的元素后面所有的兄弟元素 p。記住，兄弟選擇器只選取后面所有的兄弟元素，不包括前面的所有兄弟元素。

相鄰選擇器

相鄰選擇器，用于選中元素后面（不包括前面）的某一個(gè)“相鄰”的兄弟元素。相鄰選擇器與兄弟選擇器也非常相似，不過(guò)也有明顯的區(qū)別。

兄弟選擇器選取元素后面“所有”的某一類元素；
相鄰選擇器選取元素后面“相鄰”的某一個(gè)元素。

語(yǔ)法：

$("M+N")

“M 元素”和“N 元素”之間使用+選擇符，表示選中 M 元素后面的相鄰的兄弟元素 N。

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function() {
				$("#second+p").css("color", "red");
			})
		</script>
	</head>
	<body>
		<div id="first">
			<p>子元素</p>
			<p>子元素</p>
			<div id="second">
				<p>子元素的子元素</p>
				<p>子元素的子元素</p>
			</div>
			<p>子元素</p>
			<p>子元素</p>
		</div>
	</body>
</html>

程序運(yùn)行效果如圖 4 所示：

jquery中有什么層次選擇器

$("#second+p") 表示選取 id="second" 的元素后面的“相鄰”的兄弟元素 p。

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function() {
				$("li+li").css("border-top", "2px solid red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>第1個(gè)元素</li>
			<li>第2個(gè)元素</li>
			<li>第3個(gè)元素</li>
			<li>第4個(gè)元素</li>
			<li>第5個(gè)元素</li>
		</ul>
	</body>
</html>

程序執(zhí)行效果如圖 5 所示。

jquery中有什么層次選擇器

$("li+li") 使用的是相鄰選擇器，表示“選擇 li 元素后面相鄰的（下一個(gè)）li 元素”。由于最后一個(gè) li 元素沒(méi)有下一個(gè) li 元素，所以對(duì)于最后一個(gè) li 元素，它是沒(méi)有下一個(gè) li 元素可以選取的。$("li+li").css("border-top","2px solid red") 可以實(shí)現(xiàn)在兩兩li元素之間添加一個(gè)邊框的效果。

讀到這里，這篇“jquery中有什么層次選擇器”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

jquery中有什么層次選擇器

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽