DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jquery中children()與find()的區別介紹
基於jquery中children()與find()的區別介紹
編輯:JQuery特效代碼     

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

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

.find() 與 .children() 方法類似,不同的是後者僅沿著 DOM 樹向下遍歷單一層級。這裡的children,我理解為兒子,只在兒子這一級遍歷。看下例子:
代碼 代碼如下:
.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素(僅兒子輩)。參數可選,添加參數表示通過選擇器進行過濾,對元素進行篩選。

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

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

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

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

在看個例子:
代碼 代碼如下:
<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>

得到的結果如下:


這個是預期的結果,但是如果將上面的<div>換成<p>,見上面代碼注釋,得到的結果卻是:


.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中查找。

下面看個例子
代碼 代碼如下:
$("div.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()更多內容請訪問:http://www.w3school.com.cn/jquery/traversing_find.asp

children()更多內容請訪問:http://www.w3school.com.cn/jquery/traversing_children.asp

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved