jQuery each函數(shù)源碼分析
更新時間:2016年05月25日 14:10:40 作者:且行且思
jquery each函數(shù)的使用頻率非常高,下面給大家介紹jQuery each函數(shù)源碼分析,一起看看吧
jQuery.each方法用于遍歷一個數(shù)組或?qū)ο?并對當(dāng)前遍歷的元素進行處理,在jQuery使用的頻率非常大,下面就這個函數(shù)做了詳細講解:
代碼
/*! * jQuery源碼分析-each函數(shù) * jQuery版本:1.4.2 * * ---------------------------------------------------------- * 函數(shù)介紹 * * each函數(shù)通過jQuery.extend函數(shù)附加到j(luò)Query對象中: * jQuery.extend({ * each: function() {} * }); * 如果對jQuery.extend函數(shù)源碼還不了解,可以參考《jQuery源碼分析-extend函數(shù)》一文 * * jQuery.each方法用于遍歷一個數(shù)組或?qū)ο?并對當(dāng)前遍歷的元素進行處理 * jQuery.each方法可以為處理函數(shù)增加附帶的參數(shù)(帶參數(shù)與不帶參數(shù)的回調(diào)使用方法不完全一致) * * ---------------------------------------------------------- * 使用說明 * each函數(shù)根據(jù)參數(shù)的類型實現(xiàn)的效果不完全一致: * 1、遍歷對象(有附加參數(shù)) * $.each(Object, function(p1, p2) { * this; //這里的this指向每次遍歷中Object的當(dāng)前屬性值 * p1; p2; //訪問附加參數(shù) * }, ['參數(shù)1', '參數(shù)2']); * * 2、遍歷數(shù)組(有附件參數(shù)) * $.each(Array, function(p1, p2){ * this; //這里的this指向每次遍歷中Array的當(dāng)前元素 * p1; p2; //訪問附加參數(shù) * }, ['參數(shù)1', '參數(shù)2']); * * 3、遍歷對象(沒有附加參數(shù)) * $.each(Object, function(name, value) { * this; //this指向當(dāng)前屬性的值 * name; //name表示Object當(dāng)前屬性的名稱 * value; //value表示Object當(dāng)前屬性的值 * }); * * 4、遍歷數(shù)組(沒有附加參數(shù)) * $.each(Array, function(i, value) { * this; //this指向當(dāng)前元素 * i; //i表示Array當(dāng)前下標(biāo) * value; //value表示Array當(dāng)前元素 * }); * ---------------------------------------------------------- * */ //jQuery.each(), $.each() //@param {Object}|{Array} object 需要遍歷處理的對象或數(shù)組 //@param {Function} callback 遍歷處理回調(diào)函數(shù) //@param {Array} args callback回調(diào)函數(shù)的附加參數(shù) each: function(object, callback, args){ //當(dāng)需要遍歷的是一個對象時,name變量用于記錄對象的屬性名 var name, //當(dāng)需要遍歷的是一個數(shù)組時,i變量用于記錄循環(huán)的數(shù)組下標(biāo) i = 0, //遍歷數(shù)組長度,當(dāng)需要遍歷的對象是一個數(shù)組時存儲數(shù)組長度 //如果需要遍歷的是一個對象,則length === undefined length = object.length, //檢查第1個參數(shù)object是否是一個對象 //根據(jù)object.length排除數(shù)組類型,根據(jù)isFunction排除函數(shù)類型(因為函數(shù)也是對象) isObj = length === undefined || jQuery.isFunction(object); //回調(diào)函數(shù)具有附加參數(shù)時,執(zhí)行第一個分支 //if(!!args) { if (args) { //需要遍歷的是一個對象 if (isObj) { //遍歷對象屬性,name是對象的屬性名,再函數(shù)頂部已聲明 //許多人不太習(xí)慣for(var name in object)方式,如果不進行聲明,則name就會被定義為全局變量 for (name in object) { //調(diào)用callback回調(diào)函數(shù),且回調(diào)函數(shù)的作用域表示為當(dāng)前屬性的值 //如:callback() { this; //函數(shù)中的this指向當(dāng)前屬性值 //將each的第3個參數(shù)args作為回調(diào)函數(shù)的附加參數(shù) if (callback.apply(object[name], args) === false) { //如果在callback回調(diào)函數(shù)中使用return false;則不執(zhí)行下一次循環(huán) break; } } } //需要遍歷的是一個數(shù)組 else { //循環(huán)長度,循環(huán)變量i在函數(shù)頂部已定義 //循環(huán)變量的自增在循環(huán)內(nèi)部執(zhí)行 for (; i < length;) { //調(diào)用callback函數(shù),與上面注釋的callback調(diào)用一致 //此處callback函數(shù)中的this指向當(dāng)前數(shù)組元素 if (callback.apply(object[i++], args) === false) { break; } } } } //回調(diào)函數(shù)沒有附加參數(shù)時,執(zhí)行第二個分支 else { //需要遍歷的是一個對象 if (isObj) { //循環(huán)對象的屬性名,name在函數(shù)頂部已定義 for (name in object) { //調(diào)用callback回調(diào)函數(shù) //在不帶參數(shù)的對象遍歷中,作用域表示為當(dāng)前屬性的值 //且回調(diào)函數(shù)包含兩個參數(shù),第一個數(shù)當(dāng)前屬性名,第二個是當(dāng)前屬性值 //我覺得這句代碼修改一下會更好用:if(callback.call(object, name, object[name]) === false) { if (callback.call(object[name], name, object[name]) === false) { //如果在callback回調(diào)函數(shù)中使用return false;則不執(zhí)行下一次循環(huán) break; } } } //需要遍歷的是一個數(shù)組 else { //這里的for寫法有點BT,解釋為: //var value = object[0]; //for(; i < length;) { // if(false === callback.call(value, i, value)) { // break; // } // value = object[++i]; //} //同樣,我覺得這里的代碼稍加修改會更好用: //for (; i < length && false !== callback.call(object, i, object[i++]);) { //} for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) { } } } //這里返回遍歷的對象或數(shù)組,但object沒有被更改,因此一般不給$.each()賦值 //但是如果按照我在注釋中所修改的寫法來使用,且在callback回調(diào)函數(shù)中對this(即對object的引用)進行了修改 //則這里返回的object是被修改后的對象或數(shù)組 return object; }
相關(guān)文章
JQuery勾選指定name的復(fù)選框集合并顯示的方法
這篇文章主要介紹了JQuery勾選指定name的復(fù)選框集合并顯示的方法,涉及jQuery表單元素操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-053Z版基于jquery的圖片復(fù)選框(asp.net+jquery)
最近在做一個彩票縮水工具,找了幾個圖片復(fù)選框插件始終感覺不太滿意,自己動手山寨了一下imageTick插件.2010-04-04jQuery實現(xiàn)checkbox列表的全選、反選功能
本文給大家分享的是一個jQuery實現(xiàn)checkbox列表的全選、反選功能的封裝代碼,非常的實用,有需要的小伙伴可以參考下2016-11-11獲取select的value、text值的簡單示例(jquery與javascript)
本篇文章主要分享了獲取select的value、text值的簡單示例代碼,代碼簡潔明了,有需要的朋友可以參考下2016-12-12