jquery中有什么層次選擇器

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

濟陽網(wǎng)站建設公司創(chuàng)新互聯(lián),濟陽網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為濟陽成百上千提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設要多少錢，請找那個售后服務好的濟陽做網(wǎng)站的公司定做！

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

jquery中有什么層次選擇器

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

層次選擇器，就是通過元素之間的層次關系來選擇元素的一種基礎選擇器。層次選擇器在實際開發(fā)中也是相當重要的。常見的層次關系包括：父子、后代、兄弟、相鄰。

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

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

此外，我們還需要注意以下 4 點：

  • $("M N") 可以使用 $(M).find(N) 代替；

  • $("M>N") 可以使用 $(M).children(N) 代替；

  • $("M~N") 可以使用 $(M).nextAll(N) 代替；

  • $("M+N") 可以使用 $(M).next(N) 代替。

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

后代選擇器

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

語法：

$("M N")

“M元素”和“N元素”之間用空格隔開，表示選中 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>

程序運行效果如圖 1 所示：

jquery中有什么層次選擇器

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

子代選擇器

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

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

  • 子代選擇器，選取的是元素內(nèi)部的某一種子元素（只限子元素）。

語法：

$("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>

預覽效果如圖 2 所示：

jquery中有什么層次選擇器

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

兄弟選擇器

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

語法：

$("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í)行結果如圖 3 所示：

jquery中有什么層次選擇器

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

相鄰選擇器

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

  • 兄弟選擇器選取元素后面“所有”的某一類元素；

  • 相鄰選擇器選取元素后面“相鄰”的某一個元素。

語法：

$("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>

程序運行效果如圖 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個元素</li>
			<li>第2個元素</li>
			<li>第3個元素</li>
			<li>第4個元素</li>
			<li>第5個元素</li>
		</ul>
	</body>
</html>

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

jquery中有什么層次選擇器

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

讀到這里，這篇“jquery中有什么層次選擇器”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：jquery中有什么層次選擇器
當前地址：http://bm7419.com/article18/psssdp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設、定制開發(fā)、網(wǎng)站內(nèi)鏈、全網(wǎng)營銷推廣、網(wǎng)站設計、網(wǎng)頁設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網(wǎng)站建設