首頁  >  文章  >  web前端  >  jQuery源碼分析之jQuery.fn.each與jQuery.each用法_jquery

jQuery源碼分析之jQuery.fn.each與jQuery.each用法_jquery

WBOY
WBOY原創
2016-05-16 16:18:111155瀏覽

本文實例講述了jQuery源碼分析之jQuery.fn.each與jQuery.each用法。分享給大家供大家參考。具體分析如下:

先上例子,下面程式碼的作用是:每個選取的div元素,都會為它們加上一個red類別

複製程式碼 程式碼如下:
$('div').each(function(index, elem){
$('div').each(function(index, elem){
 
    $(this).addClass('red');
}
});


上面用的的.each,即jQuery.fn.each,其內部是透過jQuery.each實現的

程式碼如下:
jQuery.fn.each

先貼一下類別官方API說明,非常簡單,只有兩點要注意
上文範例裡的$(this).addClass('red'),其中,this指的是目前操作的dom元素
each中傳入的方法,可以傳回任意值,當傳回的值為false時,跳出目前循環操作 程式碼如下:

/**
 
 * @description 對jQuery物件中,相符的的每個dom元素執行一個方法
 
 * @param {Number} index 目前處理元素在集合中的位置
 
 * @param {DOMElement} Element 目前處理的dom元素
 
*/
.
.each( function(index, Element) )
下面舉兩個簡單的例子

例子一:


為頁面所有的div元素新增red類別

程式碼如下:

$('div').each(function(index, elem){
$('div').each(function(index, elem){
 
    $(this).addClass('red');
}
});

例二

為頁面前5個div元素新增red類別 複製程式碼
程式碼如下:

$('div').each(function(index, elem){
$('div').each(function(index, elem){
 
    if(index>=5) return false;  // 跳出迴圈
    $(this).addClass('red');
} });


如上,用法蠻簡單,不贅述,詳細可查看 http://api.jquery.com/each/

源碼內部是透過jQuery.each實現的,下面就講下jQuery.each的源碼,講完jQuery.each的源碼,jQuery.fn.each的源碼就很簡單了

 
jQuery.each:

也是先上一個簡單的例子 複製程式碼

程式碼如下:

$.each([52, 97], function(index, value) {
  alert(index ': ' value ':' this);
} });


輸出內容如下:

0: 52-52

1

1: 97-97

類別官方API說明


同樣有兩個注意點

上面例子中的this,是集合中的元素,即下面的 valueOfElement 在callback中回傳false,可以跳出循環 複製程式碼

程式碼如下:

/**
 
 * @description 對集合(陣列或物件)中的每個元素,執行某個運算
 
 * @param {Number|String} indexInArray 元素在集合中對應的位置(如集合為數組,則為數字;如集合為對象,則為鍵值)
 
 * @param {AnyValue} valueOfElement 集合中的元素
 
*/
j
jQuery.each( collection, callback(indexInArray, valueOfElement) )
  例子一 複製程式碼

程式碼如下:

$.each( ['one,'two','three', 'four '], function(index, value){
 
    if(index >= 2) return false;
 
    alert( "Index:" index ", value: " value ); } });
例二

從官網直接copy來的例子,湊合著看

複製程式碼 程式碼如下:
$.each( { name: "John", lang: "JS" }, function(k, v){
 
    alert( "Key: " k ", Value: " v );
}
});

原始碼:
複製程式碼 程式碼如下:
// args is for internal usage only
e
each: function( obj, callback, args ) {
 
    var value,
 
        i = 0,
 
        length = obj.length,
 
isArray = isArraylike( obj );   // obj是不是類似數組的對象,例如{'0':'hello', '1':'world', 'length':2},其實就是為jQuery對象服務啦
 
    if ( args ) {   // args,其實沒發現這個參數有什麼實際作用~~直接跳過看else裡面的內容即可,除了callback傳的參數不同外無其他區別
        if ( isArray ) {
            for ( ; 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 ) {    // 處理陣列
            for ( ; 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 ) {    // 注意這裡,當value===false的時候,直接跳出循環了
                    break;
                }
            }
        }
    }
    return obj;
}
},

 
 
遲到的jQuery.fn.each源碼:

的確很簡單,只要理解了jQuery.each應該就沒問題了,沒什麼好講的~

複製程式碼 程式碼如下:
each: function( callback, args ) {
 
    return jQuery.each( this, callback, args );
}
},

 
結束語

與jQuery.extend、jQuery.fn.extend一樣,雖然jQuery.each、jQuery.fn.each程式碼很簡單,但也扮演了相當重要的作用,jQuery裡大量用到了這兩個方法,舉例:

複製程式碼 程式碼如下:
jQuery.each("Boolean Number String Function Array Date RegExp sp( " "), function(i, name) {
 
    class2type[ "[object " name "]" ] = name.toLowerCase();
}
});

所以,好好掌握each!

希望本文所述對大家的jQuery程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn