首頁 > 文章 > web前端 > jquery find方法怎麼取得第一個子元素

jquery find方法怎麼取得第一個子元素

青灯夜游原創: 2022-08-15 17:16:136079瀏覽

兩種取得方法：1.先利用find()取得全部子元素，接著利用「:first-child」選擇器過濾結果集，傳回第一個子元素，語法「$(父元素).find(":first-child")」；2、先利用find()取得全部子元素，接著利用eq()過濾結果集，傳回第一個子元素，語法「「$(父元素). find("*").eq(0)」。

#本教學操作環境：windows7系統、jquery3.6.0版本、Dell G3電腦。

在jquery中，find()方法可以取得全部子元素。

find()方法：取得該元素下的所有（包含子集的子集）子集元素

find() 方法傳回被選元素的後代元素。（後代是子、孫、曾孫，依此類推。）
DOM 樹：該方法沿著DOM 元素的後代向下遍歷，直到最後一個後代的所有路徑（）。

那麼怎麼利用find方法取得第一個子元素，只需將find方法取得的元素進行過濾，傳回第一個元素即可。

jquery利用find()取得第一個子元素的兩種方法

方法1：find()配合:first-child選擇器使用

find()取得指定父節點下的全部子元素
利用:first-child選取子元素集合中第一個元素，即第一個子元素

範例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.0.min.js"></script>
		<script>
			$(function() {
				$("button").click(function() {
					$("ul").find(":first-child").css("color", "red");
				})
			})
		</script>
	</head>
	<body>
		<ul style="border: 1px solid red;">
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨子</li>
			<li>橘子</li>
		</ul>
		<button>父元素ul的第一个子元素</button>
	</body>
</html>

jquery find方法怎麼取得第一個子元素

方法2：find()配合eq()方法使用

## find()取得指定父節點下的全部子元素
使用eq(0)選取子元素集合中第一個元素，即第一個子元素

在上例的基礎上，修改：

$(function() {
	$("button").click(function() {
		$("ul").find("*").eq(0).css("color", "green");
	})
})

jquery find方法怎麼取得第一個子元素

說明：

find() 方法傳回被選元素的後代元素。

$(selector).find(filter)

##參數filter

描述
必要。過濾搜尋後代條件的選擇器表達式、元素或jQuery 物件。	注意：如需傳回多個後代，請使用逗號分隔每個表達式。

:first-child

選擇器選取屬於其父元素的第一個子元素。 <pre class="brush:php;toolbar:false">$(":first-child")</pre>

eq() 方法

傳回帶有被選元素的指定索引號的元素。索引號碼從 0 開頭，所以第一個元素的索引號碼是 0（不是 1）。

$(selector).eq(index)

參數#index【推薦學習：jQuery影片教學

描述
##必需。規定元素的索引。可以是整數或負數。	注意：使用負數將從被選取元素的結尾開始計算索引。

、

web前端影片】

以上是jquery find方法怎麼取得第一個子元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css語法由哪兩種構成下一篇：css語法由哪兩種構成

看更多