jquery遍歷之children()與find()的區別

.children(selector) 方法是返回匹配元素集合中每一個元素的全部子元素（僅兒子輩）。參數可選，添加參數表示經過選擇器進行過濾，對元素進行篩選。

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

.find() 與 .children() 方法相似，不一樣的是後者僅沿着 DOM 樹向下遍歷單一層級。這裏的children，我理解爲兒子，只在兒子這一級遍歷。看下例子：

[html] view plain copy print ?

1. <ul class="level-1">  
2.     <li class="item-i">I</li>  
3.     <li class="item-ii">II  
4.         <ul class="level-2">不包括本身  
5.             <li class="item-a">A</li>  
6.             <li class="item-b">B  
7.                 <ul class="level-3">  
8.                     <li class="item-1">1</li>  
9.                     <li class="item-2">2</li>  
10.                     <li class="item-3">3</li>  
11.                 </ul>  
12.             </li>  
13.             <li class="item-c">C</li>  
14.         </ul>  
15.     </li>  
16.     <li class="item-iii">III</li>  
17. </ul>  

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

[javascript] view plain copy print ?

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

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

這行代碼的結果是，項目 A, B, C 獲得紅色背景。因爲咱們沒有應用選擇器表達式，返回的 jQuery 對象包含了全部子元素。若是應用一個選擇器的話，那麼只會包括匹配的項目。

在看個例子：

[html] view plain copy print ?

1. <script>  
2. $(document).ready(function(){  
3.     $("#abc").children(".selected").css("color", "blue");  
4. });  
5. </script>  
6. <div id="abc">  
7.     <span>Hello</span>  
8.     <p class="selected">Hello Again</p>  
9.     <div><--換成<p>  
10.         <div class="selected">And Again</div>  
11.         <span class="selected">aaAnd Again</span>  
12.     </div><--換成</p>  
13.     <p>And One Last Time</p>  
14. </div>  

<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()方法要注意的知識點：

一、find是遍歷當前元素集合中每一個元素的後代。只要符合，無論是兒子輩，孫子輩均可以。

二、與其餘的樹遍歷方法不一樣，選擇器表達式對於 .find() 是必需的參數。若是咱們須要實現對全部後代元素的取回，能夠傳遞通配選擇器 '*'。

三、find只在後代中遍歷，不包括本身。

四、選擇器 context 是由 .find() 方法實現的；所以，$('li.item-ii').find('li') 等價於 $('li', 'li.item-ii')。

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

通常狀況對jquery的選擇器的用法，都是作爲第一個參數的用法。其實jquery()函數的這種用法還能夠傳遞第二個參數。傳遞這個參數的目的是將前面選擇器限定在context這個環境中。在默認狀況下，即不傳第二個參數，選擇器從文檔根部對 DOM 進行搜索（$()將在當前的HTML document中查找DOM元素）；若是指定了第二個參數，如一個DOM元素集或jquery對象，那就會在這個context中查找。
 
下面看個例子

[javascript] view plain copy print ?

1. $("div.foo").click(function() {  
2.     $("span", this).addClass("bar");  
3. });  

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