本文例項講述了Jquery中find與each方法用法。分享給大家供大家參考。具體如下：

一、find()方法

jquery選擇器非常強大，利用css的命名規約，可以更快更方便的找出想要的元素。

比如：

[javascript] view plain copy

1. $("#id")  
2. $("#"+"id")  
3. $(this)  
4. $(element)  

等等，只要靈活運用，就能爆發出強大的可造型。

但是在實際使用中，仍然覺得有些不足。

如果想要在某個元素下尋找特定的元素，僅僅依靠上面這個方法，就必須對 $("#id")獲取的元素進行遍歷，獲取其子元素。如此一來就顯得格外的繁瑣，程式碼量也非常龐大。

於是這就需要用到find()方法。

[javascript] view plain copy

1. $("#id").find("#child");  
2. $("#id").find(".child");  
3. $("#id").find("input[type='image']");  

非常方便好用。

除了上面的find()方法之外，還有一種查詢子元素的方法。

[javascript] view plain copy

1. $(".child",parent);  

這種方法與find()方法的結果是一樣的，也更加簡潔。

我們舉個例子：

[javascript] view plain copy

1. function(table){  
2. $("tr",table).css("background-color","red");  
3. }  

這種方法，方便程式碼的重用，更符合閉包的寫法。

二、each()方法

each()方法能使DOM迴圈結構簡潔，不容易出錯。each()函式封裝了十分強大的遍歷功能，使用也很方便，它可以遍歷一維陣列、多維陣列、DOM, JSON 等等
在javaScript開發過程中使用$each可以大大的減輕我們的工作量。

下面提一下each的幾種常用的用法 each處理一維陣列 [javascript] view plain copy

1. var arr1 = [ "aaa", "bbb", "ccc" ];        
2. $.each(arr1, function(i,val){        
3.     alert(i);     
4.     alert(val);  
5. });   

  
alert(i)將輸出0，1，2
alert(val)將輸出aaa，bbb，ccc each處理二維陣列   [javascript] view plain copy

1. var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]        
2. 　$.each(arr, function(i, item){        
3.      alert(i);     
4.      alert(item);        
5. 　});   

 
arr2為一個二維陣列，item相當於取這二維陣列中的每一個數組。
item[0]相對於取每一個一維數組裡的第一個值   
alert(i)將輸出為0，1，2，因為這二維陣列含有3個數組元素
alert(item)將輸出為  ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']

對此二位陣列的處理稍作變更之後

[javascript] view plain copy

1. var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]        
2.  　　$.each(arr, function(i, item){        
3.       　　$.each(item,function(j,val){  
4.        　　　　 alert(j);  
5.         　　　　alert(val);  
6.     　});   
7. });   

 alert(j)將輸出為0，1，2，0，1，2，0，1，2
 alert(val)將輸出為a，aa，aaa，b，bb，bbb，c，cc，ccc  each處理json資料，這個each就有更厲害了，能迴圈每一個屬性      [javascript] view plain copy

1. var obj = { one:1, two:2, three:3};        
2. 　each(obj, function(key, val) {        
3.     　　alert(key);     
4.     　　alert(val);        
5. 　});   

這裡alert(key)將輸出one two three
alert(val)將輸出one，1，two，2，three,3
這邊為何key不是數字而是屬性呢，因為json格式內是一組無序的屬性-值，既然無序，又何來數字呢。
而這個val等同於obj[key]

ecah處理dom元素，此處以一個input表單元素作為例子。

如果你dom中有一段這樣的程式碼

1. <inputname="aaa"type="hidden"value="111"/>
2. <inputname="bbb"type="hidden"value="222"/>
3. <inputname="ccc"type="hidden"value="333"/>
4. <inputname="ddd"type="hidden"value="444"/>

然後你使用each如下 [javascript] view plain copy

1. $.each($("input:hidden"), function(i,val){    
2.     alert(val);  
3.     alert(i);  
4.     alert(val.name);  
5.     alert(val.value);     
6. });    

那麼，alert(val)將輸出[object HTMLInputElement]，因為它是一個表單元素。   

alert(i)將輸出為0，1，2，3 

alert(val.name);將輸出aaa,bbb,ccc,ddd，如果使用this.name將輸出同樣的結果
alert(val.value);  將輸出111,222,333,444，如果使用this.value將輸出同樣的結果

如果將以上面一段程式碼改變成如下的形式  

[javascript] view plain copy

1. $("input:hidden").each(function(i,val){  
2.     alert(i);  
3.     alert(val.name);  
4.     alert(val.value);         
5. });  

 可以看到，輸出的結果是一樣的，至於兩種寫法究竟區別在哪，我也還不知。此改變運用到上面幾段陣列的操作也會輸出同樣的結果。

這樣，幾個例子的實際結果已經得到答案。接著再繼續往下研究，總不能知其然不知其所以然。 

從以上的例子中可知jQuery和jQuery物件都實現了該方法，對於jQuery物件，只是把each方法簡單的進行了委託：把jQuery物件作為第一個引數傳遞給jQuery的each方法。