DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 讀jQuery之四(優雅的迭代)
讀jQuery之四(優雅的迭代)
編輯:JQuery特效代碼     
jQuery的操作往往是分兩步
1,獲取元素集合(選擇器)
2,操作元素集合
而第二步操作元素集合的主要方法就是jQuery.each。查看源碼,我們發現jQuery.each及this.each分別調用了27次和31次。可見它是多麼的重要。
這篇將分析下jQuery.each及this.each方法。看看他們如何與jQuery.extend一起擴展jQuery庫。最後我會給zChain.js加上each方法。
部分源碼如下
代碼如下:
jQuery.fn = jQuery.prototype = {
...
// Execute a callback for every element in the matched set.
// (You can seed the arguments with an array of args, but this is
// only used internally.)
each: function( callback, args ) {
return jQuery.each( this, callback, args );
},
...
}
jQuery.extend({
...
// args is for internal usage only
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;
},
...
});

以上可看出,
1,jQuery().each是直接掛在jQuery.prototype(jQuery.fn)上的,因此每個jQuery對象都包含each方法。
2,jQuery.each是通過jQuery.extend({})方式擴展的。前面已經說過,通過這種方式擴展的方法將掛在function jQuery上,即為jQuery類的靜態方法。
3,jQuery().each方法中只有一句:return jQuery.each( this, callback, args )。即jQuery對象的each方法實現上其實就是調用jQuery靜態的jQuery.each。因此jQuery.each才是關鍵所在。
下面詳細分析jQuery.each,它有三個參數object, callback, args。
1,object可以為數組(Array),對象(Object),甚至是函數類型(Functoin);
2,callback是回調函數,類型為function;
3,args為jQuery庫自身使用,使用者不會用到該參數,這裡暫不討論該參數情況。

函數中第一句定義必要的變量
代碼如下:
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction( object );

length=object.length很好理解,有三種情況length不為undefined
1, object為數組類型(Array)時,數組具有length屬性;
2, object為函數類型(Functoin)時,length為該函數定義的參數個數,如果該函數沒有定義參數,length為0;
3, 具有length屬性的object偽數組(如:arguments,HTMLCollection,NodeList等)。

變量isObj用來判斷是否是對象類型,有兩種情況為true:
1,變量length等於undefined,即所傳object沒有length屬性。
2,參數object為函數類型

這裡強調下object為jQuery對象。即當在$(xx).each時發生,這時會將this傳到$.each中。如:return jQuery.each( this, callback, args )。這裡第一個參數this即為jQuery對象,每個jQuery對象是具有length屬性的。

each中有以下兩個分支
1,如果isObj為true,則用for in語句去遍歷該對象,如果把每個迭代的對象看出鍵值對形式的話。callback中的this是值object[name],callback第一個參數是鍵name,第二個參數是值object[name]。
2,如果isObj為false,則用for循環去遍歷數組(類數組)。callback中的this是數組中單獨元素的值value,callback第一參數是數組的索引i,第二參數是數組單獨元素值value。
callback調用後返回值如果是false則停止迭代,跳出循環。這裡用嚴格"==="來判斷是否與false相等。順便提一下,函數如果沒有顯示的return,默認返回undefined。

總結下:
1,$(xx).each的each是jQuery對象的方法,它調用靜態的jQuery.each。它只用來迭代jQuery對象,jQuery對象可以看成一個偽數組(具有length屬性,用索引方式存取)。
2,$.each的each是function jQuery的靜態方法(即jQuery.each),可以迭代對象,數組,偽數組,函數。
zChain-04.rar
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved