關(guān)于jQuery中的each方法(jQuery到底干了什么)
更新時間:2014年03月05日 16:54:39 作者:
這篇文章主要介紹了關(guān)于jQuery中的each方法,需要的朋友可以參考下
1. 估計很多人都會用到j(luò)Query中的each方法。
那就來看一看jQuery都干了些什么。
找到j(luò)query中的each源碼:
each: function( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction( object );
if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.apply( object[ i++ ], args ) === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isObj ) {
for ( name in object ) {
if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
break;
}
}
}
}
return object;
},
這段代碼還是比較簡單的,應(yīng)該沒什么問題.
為了測試這個東西,我寫了下面一段js;
$.each($(".demo"),function(){
console.log("show");
});
然后再加一段html:
<a href="" class="demo"></a>
<a href="" class="demo"></a>
<a href="" class="demo"></a>
然后拿著jQuery的源碼來調(diào)試,以為能得到正確的結(jié)果??墒呛苓z憾。
可以看到,這里的object竟然不是我所想要的那三個html對象,竟然是js內(nèi)置的8種數(shù)據(jù)類型。
之后在jquery的源碼中加了一段代碼:
console.log(Object.prototype.toString(object));
console.log(length);
之后的輸入如下:
也就是說在文檔加載的時候,jQuery會用each遍歷dom對象,即使沒有使用
$(function(){
});
當(dāng)遍歷指定對象之后,依舊會繼續(xù)冒泡遍歷父級元素。
2. 根據(jù)jQuery的源碼使用回調(diào)函數(shù)參數(shù)
$.each($(".demo"),function(a,b){
console.log(a + "" + $(a).attr("class"));
})
從源碼可以看到:
callback.call( object[ i ], i, object[ i++ ] )
最后都將當(dāng)前對象通過call方法傳遞給了回調(diào)函數(shù),那么就可以像上面一樣去使用當(dāng)前對象中的屬性。當(dāng)然也可以直接用this來調(diào)用。
如果說復(fù)雜些的東西,比如,這里我是將$(".demo")作為object傳遞進(jìn)去給$.each()
如里某些時候不是傳遞的jQuery或者h(yuǎn)tml對象。而是一個Object或者array。
而在array中又存在很多其它的object或者方法。
這樣就能弄出更多的效果。
3. 采用call或者apply實現(xiàn)回調(diào)模式.
從上面的代碼可以看到:
callback.call(obj,args)
callback.apply([obj],args)
之類的代碼,這里只需要傳遞callback函數(shù),就能實現(xiàn)自己調(diào)用,這對于提高代碼的復(fù)用程度用處不小。
但是也存在某些缺點,比如代碼可讀性降低,耦合程度增加等。
偶有所得,以記錄之,以防忘記!
那就來看一看jQuery都干了些什么。
找到j(luò)query中的each源碼:
復(fù)制代碼 代碼如下:
each: function( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction( object );
if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.apply( object[ i++ ], args ) === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isObj ) {
for ( name in object ) {
if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
break;
}
}
}
}
return object;
},
這段代碼還是比較簡單的,應(yīng)該沒什么問題.
為了測試這個東西,我寫了下面一段js;
復(fù)制代碼 代碼如下:
$.each($(".demo"),function(){
console.log("show");
});
然后再加一段html:
復(fù)制代碼 代碼如下:
<a href="" class="demo"></a>
<a href="" class="demo"></a>
<a href="" class="demo"></a>
然后拿著jQuery的源碼來調(diào)試,以為能得到正確的結(jié)果??墒呛苓z憾。

可以看到,這里的object竟然不是我所想要的那三個html對象,竟然是js內(nèi)置的8種數(shù)據(jù)類型。
之后在jquery的源碼中加了一段代碼:
復(fù)制代碼 代碼如下:
console.log(Object.prototype.toString(object));
console.log(length);
之后的輸入如下:

也就是說在文檔加載的時候,jQuery會用each遍歷dom對象,即使沒有使用
復(fù)制代碼 代碼如下:
$(function(){
});
當(dāng)遍歷指定對象之后,依舊會繼續(xù)冒泡遍歷父級元素。
2. 根據(jù)jQuery的源碼使用回調(diào)函數(shù)參數(shù)
復(fù)制代碼 代碼如下:
$.each($(".demo"),function(a,b){
console.log(a + "" + $(a).attr("class"));
})
從源碼可以看到:
復(fù)制代碼 代碼如下:
callback.call( object[ i ], i, object[ i++ ] )
最后都將當(dāng)前對象通過call方法傳遞給了回調(diào)函數(shù),那么就可以像上面一樣去使用當(dāng)前對象中的屬性。當(dāng)然也可以直接用this來調(diào)用。
如果說復(fù)雜些的東西,比如,這里我是將$(".demo")作為object傳遞進(jìn)去給$.each()
如里某些時候不是傳遞的jQuery或者h(yuǎn)tml對象。而是一個Object或者array。
而在array中又存在很多其它的object或者方法。
這樣就能弄出更多的效果。
3. 采用call或者apply實現(xiàn)回調(diào)模式.
從上面的代碼可以看到:
復(fù)制代碼 代碼如下:
callback.call(obj,args)
復(fù)制代碼 代碼如下:
callback.apply([obj],args)
之類的代碼,這里只需要傳遞callback函數(shù),就能實現(xiàn)自己調(diào)用,這對于提高代碼的復(fù)用程度用處不小。
但是也存在某些缺點,比如代碼可讀性降低,耦合程度增加等。
偶有所得,以記錄之,以防忘記!
相關(guān)文章
jQuery使用animate實現(xiàn)ul列表項相互飄動效果示例
這篇文章主要介紹了jQuery使用animate實現(xiàn)ul列表項相互飄動效果,結(jié)合實例形式分析了jQuery使用animate動畫切換的操作技巧,需要的朋友可以參考下2016-09-09jQuery實現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點效果
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點效果,涉及jquery鼠標(biāo)事件及頁面元素樣式的動態(tài)操作技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08Jquery和JS獲取ul中l(wèi)i標(biāo)簽的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫query和JS獲取ul中l(wèi)i標(biāo)簽的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06jquery層級選擇器的實現(xiàn)(匹配后代元素div)
下面小編就為大家?guī)硪黄猨query層級選擇器的實現(xiàn)(匹配后代元素div)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09DOM操作和jQuery實現(xiàn)選項移動操作的簡單實例
下面小編就為大家?guī)硪黄狣OM操作和jQuery實現(xiàn)選項移動操作的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個比較不錯的選擇。具體實現(xiàn)工程大家參考下本文2018-01-01