基於jquery中children()與find()的區別介紹_jquery

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

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

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

複製程式碼 程式碼如下：

.find(selector)方法是傳回符合元素集合中每個元素的後代。參數是必選的，可以為選擇器、jquery物件可元素來篩選元素。
.find() 與 .children() 方法類似，不同的是後者僅沿著 DOM 樹向下遍歷單一層級。這裡的children，我理解為兒子，只在兒子這一級遍歷。看下範例：   

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

看範例：

複製程式碼

程式碼如下: > 🎜>    $(document).ready(function(){          $("#abc").children(".selected").css("color", "blue"); 🎜>         

          Hello     

             

And Again

 

       

 

       

And One Last Time

 
   

 


得到的結果如下：

這個是預期的結果，但是如果將上面的

換成

，見上面程式碼註釋，得到的結果是：

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

下面看範例

複製程式碼 程式碼如下:

程式碼如下:

    $("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