基于jquery中children()與find()的區(qū)別介紹_jquery

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

.find() 與 .children() 方法類似，不同的是后者僅沿著 DOM 樹向下遍歷單一層級(jí)。這里的children，我理解為兒子，只在兒子這一級(jí)遍歷。看下例子：
代碼如下:
.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() 方法類似，不同的是后者僅沿著 DOM 樹向下遍歷單一層級(jí)。這里的children，我理解為兒子，只在兒子這一級(jí)遍歷?？聪吕樱?

代碼如下:
$('ul.level-2').children().css('background-color', 'red');

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

在看個(gè)例子：
代碼如下:

<--換成

And Again
aaAnd Again
<--換成

And One Last Time

這個(gè)是預(yù)期的結(jié)果，但是如果將上面的換成

，見上面代碼注釋，得到的結(jié)果卻是：

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

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

2、與其他的樹遍歷方法不同，選擇器表達(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問：http://www.w3school.com.cn/jquery/traversing_find.asp

children()更多內(nèi)容請(qǐng)?jiān)L問：http://www.w3school.com.cn/jquery/traversing_children.asp

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com