jQuery源碼分析之jQuery.fn.each與jQuery.each用法
更新時間：2015年01月23日 10:20:25 投稿：shichen2014
這篇文章主要介紹了jQuery源碼分析之jQuery.fn.each與jQuery.each用法,較為詳細的分析了each的用法,非常具有實用價值,需要的朋友可以參考下
本文實例講述了jQuery源碼分析之jQuery.fn.each與jQuery.each用法。分享給大家供大家參考。具體分析如下：
先上例子，下面代碼的作用是：對每個選中的div元素，都給它們添加一個red類
復(fù)制代碼 代碼如下:
$('div').each(function(index, elem){
$(this).addClass('red');
}
});
$(this).addClass('red');
}
});
上面用的的.each，即jQuery.fn.each，其內(nèi)部是通過jQuery.each實現(xiàn)的
復(fù)制代碼 代碼如下:
jQuery.fn.each
先貼一下類官方API說明，非常簡單，只有兩點需要注意
上文例子里的$(this).addClass('red')，其中，this指的是當(dāng)前操作的dom元素
each中傳入的方法，可以返回任意值，當(dāng)返回的值為false時，跳出當(dāng)前循環(huán)操作
復(fù)制代碼 代碼如下:
/**
* @description 對jQuery對象中，匹配的的每個dom元素執(zhí)行一個方法
* @param {Number} index 當(dāng)前處理元素在集合中的位置
* @param {DOMElement} Element 當(dāng)前處理的dom元素
*/
.
.each( function(index, Element) )
* @description 對jQuery對象中，匹配的的每個dom元素執(zhí)行一個方法
* @param {Number} index 當(dāng)前處理元素在集合中的位置
* @param {DOMElement} Element 當(dāng)前處理的dom元素
*/
.
.each( function(index, Element) )
下面舉兩個簡單的例子
例子一：
給頁面所有的div元素添加red類
復(fù)制代碼 代碼如下:
$('div').each(function(index, elem){
$(this).addClass('red');
}
});
$(this).addClass('red');
}
});
例子二
給頁面前5個div元素添加red類
復(fù)制代碼 代碼如下:
$('div').each(function(index, elem){
if(index>=5) return false; // 跳出循環(huán)
$(this).addClass('red');
}
});
if(index>=5) return false; // 跳出循環(huán)
$(this).addClass('red');
}
});
如上，用法挺簡單，不贅述，詳細可查看 http://api.jquery.com/each/
源碼內(nèi)部是通過jQuery.each實現(xiàn)的，下面就講下jQuery.each的源碼，講完jQuery.each的源碼，jQuery.fn.each的源碼就很簡單了
jQuery.each：
同樣是先上一個簡單的例子
復(fù)制代碼 代碼如下:
$.each([52, 97], function(index, value) {
alert(index + ': ' + value + ':' + this);
}
});
alert(index + ': ' + value + ':' + this);
}
});
輸出內(nèi)容如下：
0: 52-52
1
1: 97-97
類官方API說明
同樣是有兩個注意點
上面例子中的this，是集合中的元素，即下面的 valueOfElement
在callback中返回false，可以跳出循環(huán)
復(fù)制代碼 代碼如下:
/**
* @description 對集合（數(shù)組或?qū)ο螅┲械拿總€元素，執(zhí)行某個操作
* @param {Number|String} indexInArray 元素在集合中對應(yīng)的位置（如集合為數(shù)組，則為數(shù)字；如集合為對象，則為鍵值）
* @param {AnyValue} valueOfElement 集合中的元素
*/
j
jQuery.each( collection, callback(indexInArray, valueOfElement) )
* @description 對集合（數(shù)組或?qū)ο螅┲械拿總€元素，執(zhí)行某個操作
* @param {Number|String} indexInArray 元素在集合中對應(yīng)的位置（如集合為數(shù)組，則為數(shù)字；如集合為對象，則為鍵值）
* @param {AnyValue} valueOfElement 集合中的元素
*/
j
jQuery.each( collection, callback(indexInArray, valueOfElement) )
例子一
復(fù)制代碼 代碼如下:
$.each( ['one,'two','three', 'four'], function(index, value){
if(index >= 2) return false;
alert( "Index:" + index + ", value: " + value );
}
});
if(index >= 2) return false;
alert( "Index:" + index + ", value: " + value );
}
});
例子二
從官網(wǎng)直接copy來的例子，湊合著看
復(fù)制代碼 代碼如下:
$.each( { name: "John", lang: "JS" }, function(k, v){
alert( "Key: " + k + ", Value: " + v );
}
});
alert( "Key: " + k + ", Value: " + v );
}
});
源碼：
復(fù)制代碼 代碼如下:
// args is for internal usage only
e
each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj ); // obj是不是類似數(shù)組的對象，比如 {'0':'hello', '1':'world', 'length':2}，其實就是為jQuery對象服務(wù)啦
if ( args ) { // args，其實沒發(fā)現(xiàn)這個參數(shù)有什么實際作用~~直接跳過看else里面的內(nèi)容即可，除了callback傳的參數(shù)不同外無其他區(qū)別
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isArray ) { // 處理數(shù)組
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
} else { // 處理對象
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] ); // value 為callback的返回值
if ( value === false ) { // 注意這里，當(dāng)value===false的時候，直接跳出循環(huán)了
break;
}
}
}
}
return obj;
}
},
e
each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj ); // obj是不是類似數(shù)組的對象，比如 {'0':'hello', '1':'world', 'length':2}，其實就是為jQuery對象服務(wù)啦
if ( args ) { // args，其實沒發(fā)現(xiàn)這個參數(shù)有什么實際作用~~直接跳過看else里面的內(nèi)容即可，除了callback傳的參數(shù)不同外無其他區(qū)別
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isArray ) { // 處理數(shù)組
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
} else { // 處理對象
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] ); // value 為callback的返回值
if ( value === false ) { // 注意這里，當(dāng)value===false的時候，直接跳出循環(huán)了
break;
}
}
}
}
return obj;
}
},
遲到的jQuery.fn.each源碼：
的確很簡單，只要理解了jQuery.each應(yīng)該就沒問題了，沒什么好講的~
復(fù)制代碼 代碼如下:
each: function( callback, args ) {
return jQuery.each( this, callback, args );
}
},
return jQuery.each( this, callback, args );
}
},
結(jié)束語
與jQuery.extend、jQuery.fn.extend一樣，雖然 jQuery.each、jQuery.fn.each代碼很簡單，但也扮演了相當(dāng)重要的作用，jQuery里大量用到了這兩個方法，舉例：
復(fù)制代碼 代碼如下:
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
class2type[ "[object " + name + "]" ] = name.toLowerCase();
}
});
class2type[ "[object " + name + "]" ] = name.toLowerCase();
}
});
所以，好好掌握each！
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jquery操作復(fù)選框checkbox的方法,實例匯總了jQuery針對checkbox進行判斷與賦值的各種常用操作技巧,需要的朋友可以參考下2015-02-02
下面小編就為大家?guī)硪黄猨Query獲取多種input值的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jQuery實現(xiàn)頁碼跳轉(zhuǎn)式動態(tài)數(shù)據(jù)分頁
本片文章教給大家用jQuery實現(xiàn)頁碼跳轉(zhuǎn)式動態(tài)數(shù)據(jù)分頁，效果非常好而且沒有頁面刷新，需要的朋友學(xué)習(xí)下吧。2017-12-12
基于jquery點擊自以外任意處，關(guān)閉自身的代碼
主要功能是點擊顯示，然后通過點擊頁面的任意位置都能關(guān)閉顯示效果，主要是$(document).click的作用2012-02-02
jQuery插件echarts實現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果,結(jié)合實例形式分析了echarts插件繪制表格圖及圖形相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
asp.net+jquery.form實現(xiàn)圖片異步上傳的方法(附j(luò)query.form.js下載)
這篇文章主要介紹了asp.net+jquery.form實現(xiàn)圖片異步上傳的方法,結(jié)合實例形式分析了jquery.form.js前臺異步提交圖片與asp.net后臺處理的相關(guān)技巧,需要的朋友可以參考下2016-05-05
jQuery實現(xiàn)的導(dǎo)航下拉菜單效果示例
這篇文章主要介紹了jQuery實現(xiàn)的導(dǎo)航下拉菜單效果,涉及jQuery事件響應(yīng)及元素動態(tài)操作相關(guān)技巧,非常簡便實用,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jQuery實現(xiàn)hover合成事件的方法,涉及jquery中hover事件及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
用 jQuery 的都知道，jQuery 的 get 和 post 方法有三個參數(shù)：地址，數(shù)據(jù) 和 回調(diào)函數(shù)，但我們知道地址也可以跟隨數(shù)據(jù)的（形如：get_data.php?v1=1&v2=2），而且第二個參數(shù)可以省略，即第二個參數(shù)可以直接寫回調(diào)函數(shù)，那么數(shù)據(jù)寫在地址后面和寫在 data 參數(shù)里有什么區(qū)別呢？2009-11-11
jquery(javascript)自動序列編號和屬性編號實現(xiàn)代碼
jquery(javascript)自動序列編號和屬性編號實現(xiàn)代碼，需要的朋友可以參考下2012-07-07