Jquery中each()方法
阿新 • • 發佈:2019-02-12
本文例項講述了Jquery中find與each方法用法。分享給大家供大家參考。具體如下:
一、find()方法
jquery選擇器非常強大,利用css的命名規約,可以更快更方便的找出想要的元素。
比如:
[javascript] view plain copy- $("#id")
- $("#"+"id")
- $(this)
- $(element)
等等,只要靈活運用,就能爆發出強大的可造型。
但是在實際使用中,仍然覺得有些不足。
如果想要在某個元素下尋找特定的元素,僅僅依靠上面這個方法,就必須對 $("#id")獲取的元素進行遍歷,獲取其子元素。如此一來就顯得格外的繁瑣,程式碼量也非常龐大。
於是這就需要用到find()方法。
[javascript] view plain copy- $("#id").find("#child");
- $("#id").find(".child");
- $("#id").find("input[type='image']");
非常方便好用。
除了上面的find()方法之外,還有一種查詢子元素的方法。
[javascript] view plain copy- $(".child",parent);
這種方法與find()方法的結果是一樣的,也更加簡潔。
我們舉個例子:
[javascript] view plain copy- function(table){
- $("tr",table).css("background-color","red");
- }
這種方法,方便程式碼的重用,更符合閉包的寫法。
二、each()方法
在javaScript開發過程中使用$each可以大大的減輕我們的工作量。
下面提一下each的幾種常用的用法 each處理一維陣列 [javascript]
- var arr1 = [ "aaa", "bbb", "ccc" ];
- $.each(arr1, function(i,val){
- alert(i);
- alert(val);
- });
alert(i)將輸出0,1,2
alert(val)將輸出aaa,bbb,ccc each處理二維陣列 [javascript] view plain copy
- var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
- $.each(arr, function(i, item){
- alert(i);
- alert(item);
- });
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- var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
- $.each(arr, function(i, item){
- $.each(item,function(j,val){
- alert(j);
- alert(val);
- });
- });
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
- var obj = { one:1, two:2, three:3};
- each(obj, function(key, val) {
- alert(key);
- alert(val);
- });
這裡alert(key)將輸出one two three
alert(val)將輸出one,1,two,2,three,3
這邊為何key不是數字而是屬性呢,因為json格式內是一組無序的屬性-值,既然無序,又何來數字呢。
而這個val等同於obj[key]
ecah處理dom元素,此處以一個input表單元素作為例子。
- <inputname="aaa"type="hidden"value="111"/>
- <inputname="bbb"type="hidden"value="222"/>
- <inputname="ccc"type="hidden"value="333"/>
- <inputname="ddd"type="hidden"value="444"/>
然後你使用each如下 [javascript] view plain copy
- $.each($("input:hidden"), function(i,val){
- alert(val);
- alert(i);
- alert(val.name);
- alert(val.value);
- });
那麼,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- $("input:hidden").each(function(i,val){
- alert(i);
- alert(val.name);
- alert(val.value);
- });
可以看到,輸出的結果是一樣的,至於兩種寫法究竟區別在哪,我也還不知。此改變運用到上面幾段陣列的操作也會輸出同樣的結果。
這樣,幾個例子的實際結果已經得到答案。接著再繼續往下研究,總不能知其然不知其所以然。