基于jquery中children()與find()的區(qū)別介紹
.children(selector) 方法是返回匹配元素集合中每個(gè)元素的所有子元素(僅兒子輩)。參數(shù)可選,添加參數(shù)表示通過(guò)選擇器進(jìn)行過(guò)濾,對(duì)元素進(jìn)行篩選。
.find(selector)方法是返回匹配元素集合中每個(gè)元素的后代。參數(shù)是必選的,可以為選擇器、jquery對(duì)象可元素來(lái)對(duì)元素進(jìn)行篩選。
.find() 與 .children() 方法類(lèi)似,不同的是后者僅沿著 DOM 樹(shù)向下遍歷單一層級(jí)。這里的children,我理解為兒子,只在兒子這一級(jí)遍歷。看下例子: .find(selector)方法是返回匹配元素集合中每個(gè)元素的后代。參數(shù)是必選的,可以為選擇器、jquery對(duì)象可元素來(lái)對(duì)元素進(jìn)行篩選。 .find() 與 .children() 方法類(lèi)似,不同的是后者僅沿著 DOM 樹(shù)向下遍歷單一層級(jí)。這里的children,我理解為兒子,只在兒子這一級(jí)遍歷??聪吕樱?nbsp;
.children(selector) 方法是返回匹配元素集合中每個(gè)元素的所有子元素(僅兒子輩)。參數(shù)可選,添加參數(shù)表示通過(guò)選擇器進(jìn)行過(guò)濾,對(duì)元素進(jìn)行篩選。
$('ul.level-2').children().css('background-color', 'red');
這行代碼的結(jié)果是,項(xiàng)目 A, B, C 得到紅色背景。由于我們沒(méi)有應(yīng)用選擇器表達(dá)式,返回的 jQuery 對(duì)象包含了所有子元素。如果應(yīng)用一個(gè)選擇器的話(huà),那么只會(huì)包括匹配的項(xiàng)目。
在看個(gè)例子:
<script>
$(document).ready(function(){
$("#abc").children(".selected").css("color", "blue");
});
</script>
<div id="abc">
<span>Hello</span>
<p class="selected">Hello Again</p>
<div><--換成<p>
<div class="selected">And Again</div>
<span class="selected">aaAnd Again</span>
</div><--換成</p>
<p>And One Last Time</p>
</div>
得到的結(jié)果如下:

這個(gè)是預(yù)期的結(jié)果,但是如果將上面的<div>換成<p>,見(jiàn)上面代碼注釋?zhuān)玫降慕Y(jié)果卻是:

.find()方法要注意的知識(shí)點(diǎn):
1、find是遍歷當(dāng)前元素集合中每個(gè)元素的后代。只要符合,不管是兒子輩,孫子輩都可以。
2、與其他的樹(shù)遍歷方法不同,選擇器表達(dá)式對(duì)于 .find() 是必需的參數(shù)。如果我們需要實(shí)現(xiàn)對(duì)所有后代元素的取回,可以傳遞通配選擇器 '*'。
3、find只在后代中遍歷,不包括自己。
4、選擇器 context 是由 .find() 方法實(shí)現(xiàn)的;因此,$('li.item-ii').find('li') 等價(jià)于 $('li', 'li.item-ii')。
選擇器的語(yǔ)法是:jQuery(selector, [context])
一般情況對(duì)jquery的選擇器的用法,都是做為第一個(gè)參數(shù)的用法。其實(shí)jquery()函數(shù)的這種用法還可以傳遞第二個(gè)參數(shù)。傳遞這個(gè)參數(shù)的目的是將前面選擇器限定在context這個(gè)環(huán)境中。在默認(rèn)情況下,即不傳第二個(gè)參數(shù),選擇器從文檔根部對(duì) DOM 進(jìn)行搜索($()將在當(dāng)前的HTML document中查找DOM元素);如果指定了第二個(gè)參數(shù),如一個(gè)DOM元素集或jquery對(duì)象,那就會(huì)在這個(gè)context中查找。
下面看個(gè)例子
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
由于我們已經(jīng)將 span 選擇器限定到 this 這個(gè)環(huán)境中,只有被點(diǎn)擊元素中的 span 會(huì)得到附加的class。
在內(nèi)部,選擇器 context是通過(guò) .find() 方法實(shí)現(xiàn)的,因此 $("span", this) 等價(jià)于 $(this).find("span"),$('li.item-ii').find('li') 等價(jià)于 $('li', 'li.item-ii')
find()更多內(nèi)容請(qǐng)?jiān)L問(wèn):http://www.w3school.com.cn/jquery/traversing_find.asp
children()更多內(nèi)容請(qǐng)?jiān)L問(wèn):http://www.w3school.com.cn/jquery/traversing_children.asp
相關(guān)文章
基于jQuery實(shí)現(xiàn)簡(jiǎn)單人工智能聊天室
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)簡(jiǎn)單人工智能聊天室的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
jquery創(chuàng)建并行對(duì)象或者合并對(duì)象的實(shí)現(xiàn)代碼
如果有對(duì)象A ,B 現(xiàn)在我想要合并成對(duì)象C 從C里面可以找到A , B 及其子對(duì)象 怎么做2012-10-10
使用jQuery制作遮罩層彈出效果的極簡(jiǎn)實(shí)例分享
這篇文章主要介紹了使用jQuery制作遮罩層彈出效果的極簡(jiǎn)實(shí)例分享,效果中背景為半透冥且不可操作,在制作頁(yè)面上傳功能等場(chǎng)景下十分實(shí)用,需要的朋友可以參考下2016-05-05
jQuery在ul中顯示某個(gè)li索引號(hào)的方法
這篇文章主要介紹了jQuery在ul中顯示某個(gè)li索引號(hào)的方法,涉及jQuery遍歷元素的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
基于jquery的Repeater實(shí)現(xiàn)代碼
本文和大家詳解如何使用javascript來(lái)實(shí)現(xiàn)一個(gè)asp.net 的Repeater控件,叫jQuery.Repeater插件。一起來(lái)看下吧。2010-07-07

