這篇文章主要介紹jquery中find()與children()有什么區(qū)別，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

做網(wǎng)站、網(wǎng)站建設(shè)的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒有做好網(wǎng)站，給創(chuàng)新互聯(lián)一個展示的機(jī)會來證明自己，這并不會花費(fèi)您太多時間，或許會給您帶來新的靈感和驚喜。面向用戶友好，注重用戶體驗，一切以用戶為中心。

區(qū)別：children(selector)方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩），參數(shù)是可選的；find(selector)方法是返回匹配元素集合中每個元素的后代（只要符合，不管是兒子輩，孫子輩都可以），參數(shù)是必選的。

.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩）。參數(shù)可選，添加參數(shù)表示通過選擇器進(jìn)行過濾，對元素進(jìn)行篩選。

.find(selector)方法是返回匹配元素集合中每個元素的后代。參數(shù)是必選的，可以為選擇器、jquery對象可元素來對元素進(jìn)行篩選。

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

$('ul.level-2').children().css('background-color', 'red');

這行代碼的結(jié)果是，項目 A, B, C 得到紅色背景。由于我們沒有應(yīng)用選擇器表達(dá)式，返回的 jQuery 對象包含了所有子元素。如果應(yīng)用一個選擇器的話，那么只會包括匹配的項目。

在看個例子：

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

得到的結(jié)果如下：

這個是預(yù)期的結(jié)果，但是如果將上面的<p>換成<p>，見上面代碼注釋，得到的結(jié)果卻是：

.find()方法要注意的知識點(diǎn)：

1、find是遍歷當(dāng)前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。

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

3、find只在后代中遍歷，不包括自己。

4、選擇器 context 是由 .find() 方法實現(xiàn)的；因此，$('li.item-ii').find('li') 等價于 $('li', 'li.item-ii')。

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

一般情況對jquery的選擇器的用法，都是做為第一個參數(shù)的用法。其實jquery()函數(shù)的這種用法還可以傳遞第二個參數(shù)。傳遞這個參數(shù)的目的是將前面選擇器限定在context這個環(huán)境中。在默認(rèn)情況下，即不傳第二個參數(shù)，選擇器從文檔根部對 DOM 進(jìn)行搜索（$()將在當(dāng)前的HTML document中查找DOM元素）；如果指定了第二個參數(shù)，如一個DOM元素集或jquery對象，那就會在這個context中查找。
 
下面看個例子

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

由于我們已經(jīng)將 span 選擇器限定到 this 這個環(huán)境中，只有被點(diǎn)擊元素中的 span 會得到附加的class。

在內(nèi)部，選擇器 context是通過 .find() 方法實現(xiàn)的，因此 $("span", this) 等價于 $(this).find("span")，$('li.item-ii').find('li') 等價于 $('li', 'li.item-ii')

以上是jquery中find()與children()有什么區(qū)別的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：jquery中find()與children()有什么區(qū)別-創(chuàng)新互聯(lián)
文章地址：http://www.rwnh.cn/article12/isodc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、建站公司、App開發(fā)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司

廣告

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