JQuery中$.each 和$(selector).each()的區別詳解

標籤：jquer   工具   應該   方法調用   margin   首頁   傳遞參數   style   .com   

PS：晚上在寫頁面時，發現了一個問題，$.each 和$(selector).each()有哪些區別？百度搜尋關鍵詞，首頁顯示出來一些前人的經驗，總結一下，發上來。

 1、$(selector).each()

jQuery 遍曆 - each() 方法主要用於DOM遍曆，each() 方法規定為每個匹配元素規定啟動並執行函數。

文法：

$(selector).each(function(index,element))

W3School上顯示回呼函數是必須的，index - 選取器的 index 位置，element - 當前的元素（也可使用 "this" 選取器）.

$().each,對於這個方法，在dom處理上面用的較多。如果頁面有多個input標籤類型為checkbox，對於這時用$().each來處理多個checkbook，例如：

1 $(“input[name=’ch’]”).each(function(i){2 if($(this).attr(‘checked’)==true)3 {4 //一些作業碼5 6 }

回呼函數是可以傳遞參數，i就為遍曆的索引。

 

 

 2、jquery的each()詳細介紹

對於jQuery對象，只是把each方法簡單的進行了委託：把jQuery對象作為第一個參數傳遞給jQuery的each方法.換句話說：jQuery提供的each方法是對參數一提供的對象的中所有的子項目逐一進行方法調用。

each()函數是基本上所有的架構都提供了的一個工具類函數，通過它，你可以遍曆對象、數組的屬性值並進行處理。jQuery和jQuery對象都實 現了該方法，對於jQuery對象，只是把each方法簡單的進行了委託：把jQuery對象作為第一個參數傳遞給jQuery的each方法.換句話 說：jQuery提供的each方法是對參數一提供的對象的中所有的子項目逐一進行方法調用。而jQuery對象提供的each方法則是對jQuery內 部的子項目進行逐個調用。

each函數根據參數的類型實現的效果不完全一致：

1、遍曆對象(有附加參數)：

$.each(Object, function(p1, p2) {      this;       //這裡的this指向每次遍曆中Object的當前屬性值      p1; p2;     //訪問附加參數 }, [‘參數1‘, ‘參數2‘]); 

2、遍曆數組(有附件參數)：

$.each(Array, function(p1, p2){      this;       //這裡的this指向每次遍曆中Array的當前元素      p1; p2;     //訪問附加參數 }, [‘參數1‘, ‘參數2‘]); 

3、遍曆對象(沒有附加參數)

$.each(Object, function(name, value) {      this;      //this指向當前屬性的值      name;      //name表示Object當前屬性的名稱      value;     //value表示Object當前屬性的值 }); 

4、遍曆數組(沒有附加參數)

1 $.each(Array, function(i, value) {2       this;      //this指向當前元素3       i;         //i表示Array當前下標4       value;     //value表示Array當前元素5  });6  

 

下面提一下jQuery的each方法的幾種常用的用法

1 var arr = [ "one", "two", "three", "four"];   2 $.each(arr, function(){   alert(this);   });  //上面這個each輸出的結果分別為：one,two,three,four     3 var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]  4 $.each(arr1, function(i, item){   alert(item[0]);  });  //其實arr1為一個二維數組，item相當於取每一個一維數組，  //item[0]相對於取每一個一維數組裡的第一個值  //所以上面這個each輸出分別為：1 4 7     5  var obj = { one:1, two:2, three:3, four:4};  6 $.each(obj, function(key, val) {   alert(obj[key]);    });  //這個each就有更厲害了，能迴圈每一個屬性  //輸出結果為：1 2 3 4 

JQuery中的each函數在1.3.2的官方文檔中的描述如下：

each(callback)

以每一個匹配的元素作為上下文來執行一個函數。

意味著，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的匹配元素）。而且，在每次執行函數時，都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數（從零開始的整形）。返回 ‘false‘ 將停止迴圈 (就像在普通的迴圈中使用 ‘break‘)。返回 ‘true‘ 跳至下一個迴圈(就像在普通的迴圈中使用‘continue‘)。

而後面的callback 則是回呼函數，指示遍曆元素的時候應該賦予的操作。先看下面的一個簡單的例子：
迭代兩個映像，並設定它們的 src 屬性。注意:此處 this 指代的是 DOM 對象而非 jQuery 對象。

HTML 程式碼:

1 <img/><img/>jQuery 代碼: 2 $("img").each(function(i){ 3 this.src = "test" + i + ".jpg"; 4 }); 

結果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
當然，在遍曆元素的時候，jquery是允許自訂跳出的，請看範例程式碼：你可以使用 ‘return‘ 來提前跳出 each() 迴圈。
HTML 程式碼:

 1 <button>Change colors</button>  2 <span></span>  3 <div></div>  4 <div></div>  5 <div></div>  6 <div></div>  7 <div id="stop">Stop here</div>  8 <div></div>  9 <div></div> 10 <div></div> 

jQuery 代碼:

1 $("button").click(function(){ 2 $("div").each(function(index,domEle){ 3 $(domEle).css("backgroundColor","wheat"); 4 if($(this).is("#stop")){ 5 $("span").text("在div塊為#"+index+"的地方停止。"); 6 return false; 7 } 8 }); 

或者這麼寫：

1 $("button").click(function(){ 2 $("div").each(function(index){ 3 $(this).css("backgroundColor","wheat"); 4 if($(this).is("#stop")){ 5 $("span").text("在div塊為#"+index+"的地方停止。"); 6 return false; 7 } 8 }); 

圖解:

each() 方法規定為每個匹配元素規定啟動並執行函數。

提示：返回 false 可用於及早停止迴圈。
文法
$(selector).each(function(index,element))參數 描述
function(index,element) 必需。為每個匹配元素規定啟動並執行函數。
?index - 選取器的 index 位置
?element - 當前的元素（也可使用 "this" 選取器

執行個體
輸出每個 li 元素的文本：

$("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); 

執行個體

jQuery.each=function( obj, fn, args ) { if ( args ) { if ( obj.length == undefined ){ for ( var i in obj ) fn.apply( obj, args ); }else{ for ( var i = 0, ol = obj.length; i < ol; i++ ) { if ( fn.apply( obj, args ) === false ) break; } } } else { if ( obj.length == undefined ) { for ( var i in obj ) fn.call( obj, i, obj ); }else{ for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){} } } return obj; } 

需要特別注意的是each方法中fn的具體調用方法並不是採用簡單的fn(i,val)或fn(args),而是採用了fn.call(val,i,val)或fn.apply(obj.args)的形式，這意味著，在你自己的fn的實現中，可以直接採用this指標引用數組或是對象的子項目。

那怎麼跳出each呢
jquery再遍曆選定的對象時候用each比較方便。有種應用是找到裡面合格對象後，要跳出這個迴圈。
javascript的跳出迴圈一般用break.
同事遇到這個問題，下意識 的用了break，想跳出這個迴圈。結果報錯
SyntaxError: unlabeled break must be inside loop or switch
經查，應該用一個
在回呼函數裡return false即可，大多數jq的方法都是如此的

返回 ‘false‘ 將停止迴圈 (就像在普通的迴圈中使用 ‘break‘)。 返回 ‘true‘ 跳至下一個迴圈(就像在普通的迴圈中使用‘continue‘)。 

該方法同1的最大區別是：fn方法會被逐次不考慮傳回值的進行進行。換句話說，obj對象的所有屬性都會被fn方法進行調用，即使fn函數返回false。調用傳入的參數同1類似。

 

對於遍曆一個數組，用$.each()來處理，簡直爽到了極點。例如：

$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n){alert(“索引:”+i,”對應值為：”+n.name);});

參數i為遍曆索引值，n為當前的遍曆對象.

 

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];$.each(arr1, function(){alert(this);});輸出：one   two  three  four   fivevar arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]$.each(arr2, function(i, item){alert(item[0]);});輸出：1   4   7var obj = { one:1, two:2, three:3, four:4, five:5 };$.each(obj, function(key, val) {alert(obj[key]);});

輸出：1 2 3 4 5

 

在jQuery裡有一個each方法，用起來非常的爽，不用再像原來那樣寫for迴圈，jQuery源碼裡自己也有很多用到each方法。

其實jQuery裡的each方法是通過js裡的call方法來實現的。

下面簡單介紹一下call方法。
call這個方法很奇妙，其實官方的說明是：“調用一個對象的一個方法，以另一個對象替換當前對象。”網上更多的解釋是變換上下文環境，也有說是改變上下文this指標。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])

參數
thisObj
可選項。將被用作當前對象的對象。
arg1, arg2, , argN
可選項。將被傳遞方法參數序列。
說明
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的物件內容從初始的上下文改變為由 thisObj 指定的新對象。

引用網上有一個很經典的例子

Js代碼：

function add(a,b){alert(a+b);}function sub(a,b){alert(a-b);}add.call(sub,3,1);

用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以運行結果為：alert(4);
注意：js 中的函數其實是對象，函數名是對 Function 對象的引用。

具體call更深入的就不在這裡提了。

下面提一下jQuery的each方法的幾種常用的用法

Js代碼：

var arr = [ “one”, “two”, “three”, “four”];$.each(arr, function(){alert(this);});//上面這個each輸出的結果分別為：one,two,three,fourvar arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]$.each(arr1, function(i, item){alert(item[0]);});//其實arr1為一個二維數組，item相當於取每一個一維數組，//item[0]相對於取每一個一維數組裡的第一個值//所以上面這個each輸出分別為：1   4   7var obj = { one:1, two:2, three:3, four:4};$.each(obj, function(key, val) {alert(obj[key]);});//這個each就有更厲害了，能迴圈每一個屬性//輸出結果為：1   2  3  4

暫時更新到這裡

【END】

JQuery中$.each 和$(selector).each()的區別詳解