首頁 >web前端 >js教程 >jquery中find()與children()的差別是什麼?

jquery中find()與children()的差別是什麼?

青灯夜游
青灯夜游原創
2020-11-10 13:43:562610瀏覽

區別:children(selector)方法是傳回符合元素集合中每個元素的所有子元素(僅兒子輩),參數是可選的;find(selector)方法是傳回符合元素集合中每個元素的後代(只要符合,不管是兒子輩,孫子輩都可以),參數是必選的。

jquery中find()與children()的差別是什麼?

相關推薦:《jQuery影片教學

.children(selector) 方法是傳回符合元素集合中每個元素的所有子元素僅是兒子輩)。參數可選,新增參數表示透過選擇器進行過濾,對元素進行篩選。

.find(selector)方法是傳回符合元素集合中每個元素的後代參數是必選的,可以為選擇器、jquery物件可元素來篩選元素。

.find() 與 .children() 方法類似,不同的是後者僅沿著 DOM 樹向下遍歷單一層級。這裡的children,我理解為兒子,只在兒子這一級遍歷。 看下範例:

<ul class="level-1">
	<li class="item-i">I</li>
	<li class="item-ii">II
		<ul class="level-2">不包括自己
			<li class="item-a">A</li>
			<li class="item-b">B
				<ul class="level-3">
					<li class="item-1">1</li>
					<li class="item-2">2</li>
					<li class="item-3">3</li>
				</ul>
			</li>
			<li class="item-c">C</li>
		</ul>
	</li>
	<li class="item-iii">III</li>
</ul>
$(&#39;ul.level-2&#39;).children().css(&#39;background-color&#39;, &#39;red&#39;);

這行程式碼的結果是,專案 A, B, C 得到紅色背景。由於我們沒有應用選擇器表達式,傳回的 jQuery 物件包含了所有子元素。如果應用一個選擇器的話,那麼只會包括匹配的項目。

在看範例:

<script>
$(document).ready(function(){
    $("#abc").children(".selected").css("color", "blue");
});
</script>
<p id="abc">
	<span>Hello</span>
	<p class="selected">Hello Again</p>
	<p><--换成<p>
		<p class="selected">And Again</p>
		<span class="selected">aaAnd Again</span>
	</p><--换成</p>
	<p>And One Last Time</p>
</p>

得到的結果如下:

這個是預期的結果,但是如果將上面的e388a4556c0f65e1904146cc1a846bee換成e388a4556c0f65e1904146cc1a846bee,見上面程式碼註釋,得到的結果卻是:

.find()方法要注意的知識點:

1、find是遍歷目前元素集合中每個元素的後代。只要符合,不管是兒子輩,孫子輩都可以。

2、與其他的樹遍歷方法不同,選擇器表達式對於 .find() 是必要的參數。如果我們需要實現所有後代元素的取回,可以傳遞通配選擇器 '*'。

3、find只在後代中遍歷,不包括自己。

4、選擇器context 是由.find() 方法實現的;因此,$('li.item-ii').find('li') 等價於$('li', ' li.item-ii')。

選擇器的語法是:jQuery(selector, [context])

一般情況對jquery的選擇器的用法,都是做為第一個參數的用法。其實jquery()函數的這種用法還可以傳遞第二個參數。傳遞這個參數的目的是將前面選擇器限定在context這個環境中。在預設情況下,即不傳第二個參數,選擇器從文檔根部對DOM 進行搜尋($()將在目前的HTML document中尋找DOM元素);如果指定了第二個參數,如一個DOM元素集或jquery對象,那就會在這個context中查找。
 
下面看個例子

$("p.foo").click(function() {
    $("span", this).addClass("bar");
});

由於我們已經將 span 選擇器限定到 this 這個環境中,只有被點擊元素中的 span 會得到附加的class。

在內部,選擇器context是透過.find() 方法實現的,因此$("span", this) 等價於$(this).find( "span"),$('li.item-ii').find('li') 等價於$('li', 'li.item-ii')

find()更多內容請見:https://www.php.cn/dic/jquery/find.html

children()更多內容請造訪:https: //www.php.cn/dic/jquery/children.html

更多程式相關知識,請造訪:程式設計影片課程! !

以上是jquery中find()與children()的差別是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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