本文部分截取自且行且思

jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解:

复制代码代码
/*!   * jQuery源码分析-each函数  * jQuery版本:1.4.2  *  * ----------------------------------------------------------  * 函数介绍  *  * each函数通过jQuery.extend函数附加到jQuery对象中:  * jQuery.extend({  *     each: function() {}  * });  * 如果对jQuery.extend函数源码还不了解,可以参考《jQuery源码分析-extend函数》一文  *  * jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理  * jQuery.each方法可以为处理函数增加附带的参数(带参数与不带参数的回调使用方法不完全一致)  *  * ----------------------------------------------------------  * 使用说明  * each函数根据参数的类型实现的效果不完全一致:  * 1、遍历对象(有附加参数)  * $.each(Object, function(p1, p2) {  *     this;      //这里的this指向每次遍历中Object的当前属性值  *     p1; p2;    //访问附加参数  * }, ['参数1', '参数2']);  *  * 2、遍历数组(有附件参数)  * $.each(Array, function(p1, p2){  *     this;      //这里的this指向每次遍历中Array的当前元素  *     p1; p2;    //访问附加参数  * }, ['参数1', '参数2']);  *  * 3、遍历对象(没有附加参数)  * $.each(Object, function(name, value) {  *     this;     //this指向当前属性的值  *     name;     //name表示Object当前属性的名称  *     value;    //value表示Object当前属性的值  * });  *  * 4、遍历数组(没有附加参数)  * $.each(Array, function(i, value) {  *     this;     //this指向当前元素  *     i;        //i表示Array当前下标  *     value;    //value表示Array当前元素  * });  * ----------------------------------------------------------  *  */
//jQuery.each(), $.each()
//@param {Object}|{Array} object 需要遍历处理的对象或数组
//@param {Function} callback 遍历处理回调函数
//@param {Array} args callback回调函数的附加参数
each: function(object, callback, args){   //当需要遍历的是一个对象时,name变量用于记录对象的属性名   var name,       //当需要遍历的是一个数组时,i变量用于记录循环的数组下标   i = 0,       //遍历数组长度,当需要遍历的对象是一个数组时存储数组长度   //如果需要遍历的是一个对象,则length === undefined   length = object.length,       //检查第1个参数object是否是一个对象   //根据object.length排除数组类型,根据isFunction排除函数类型(因为函数也是对象)   isObj = length === undefined || jQuery.isFunction(object);   //回调函数具有附加参数时,执行第一个分支   //if(!!args) {   if (args) {   //需要遍历的是一个对象   if (isObj) {   //遍历对象属性,name是对象的属性名,再函数顶部已声明   //许多人不太习惯for(var name in object)方式,如果不进行声明,则name就会被定义为全局变量   for (name in object) {   //调用callback回调函数,且回调函数的作用域表示为当前属性的值   //如:callback() {  this; //函数中的this指向当前属性值   //将each的第3个参数args作为回调函数的附加参数   if (callback.apply(object[name], args) === false) {   //如果在callback回调函数中使用return false;则不执行下一次循环   break;   }   }   }   //需要遍历的是一个数组   else {   //循环长度,循环变量i在函数顶部已定义   //循环变量的自增在循环内部执行   for (; i < length;) {   //调用callback函数,与上面注释的callback调用一致   //此处callback函数中的this指向当前数组元素   if (callback.apply(object[i++], args) === false) {   break;   }   }   }   }   //回调函数没有附加参数时,执行第二个分支   else {   //需要遍历的是一个对象   if (isObj) {   //循环对象的属性名,name在函数顶部已定义   for (name in object) {   //调用callback回调函数   //在不带参数的对象遍历中,作用域表示为当前属性的值   //且回调函数包含两个参数,第一个数当前属性名,第二个是当前属性值   //我觉得这句代码修改一下会更好用:if(callback.call(object, name, object[name]) === false) {   if (callback.call(object[name], name, object[name]) === false) {   //如果在callback回调函数中使用return false;则不执行下一次循环   break;   }   }   }   //需要遍历的是一个数组   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]) {   }   }   }   //这里返回遍历的对象或数组,但object没有被更改,因此一般不给$.each()赋值   //但是如果按照我在注释中所修改的写法来使用,且在callback回调函数中对this(即对object的引用)进行了修改   //则这里返回的object是被修改后的对象或数组   return object;
}  

jQuery源码分析-each函数相关推荐

  1. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

  2. [转]jQuery源码分析系列

    文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...

  3. [转] jQuery源码分析-如何做jQuery源码分析

    jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...

  4. jQuery源码分析之$.inArray()函数

    测试代码1: //indexOf原生方法:indexOf(特定的元素,开始下标); //同时indexOf的第二个参数可以是负数,表示从倒数第几个开始,记住,此时不是看下标,而是看倒数第几个! var ...

  5. jQuery 源码分析第一篇之入口源码

    目前阅读的是jQuery 1.11.3的源码,有参考nuysoft的资料.原来比较喜欢在自己的Evernote上做学习基类,并没有在网上写技术博客的习惯,现在开始学习JS的开源代码,想跟大家多交流,希 ...

  6. jQuery源码分析系列:.domManip() .buildFragment() .clean()

      .domManip(args,table,callback):是jQuery DOM操作的核心函数,可以扩展出如下方法: append/appendTo: prepend/prependTo: b ...

  7. jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/unde

    10.4    .bind() .one() 10.4.1  如何使用 .bind( eventType, [eventData], handler(eventObject) )   在匹配的元素上绑 ...

  8. JQuery源码分析 - 闭包机制在jQuery中的使用及冲突解决

    jQuery中的闭包机制 本系列中我们将基于jquery3.5.1版本对jQuery源码进行分析,分析以源码加注释的方式展示. 本节中将分析jQuery源码中的 14 ~ 40行:自执行函数定义.环境 ...

  9. jQuery源码分析之$.ajax方法

    请阅读我其它的关于inspectPrefiltersOrTransport以及ajaxTransport等相关博文,请了解readyState状态码 针对获取到location.href的兼容代码: ...

最新文章

  1. 设计模式16——Memento设计模式
  2. 如何防止同一账号多次登录
  3. 迈向数据科学的第一步:在Python中支持向量回归
  4. struts2+ajax+json使用实例
  5. go https client
  6. 看完这一篇,解决Mac电脑90%的软件烦恼
  7. 新手学电脑入门教程_怎么学动漫插画手绘?动漫插画手绘入门教程分享
  8. 分享一波恋爱社交APP源码,真好~
  9. 神经体液调节网络,神经网络能干嘛
  10. matlab做多元统计分析,matlab多元统计分析
  11. 无线通信中的IQ调制,BPSK调制,QPSK调制,16QAM调制的理解
  12. win10打开计算机出现马赛克,主编处理win10系统播放视频影片出现锯齿、马赛克、模糊的办法?...
  13. PostGIS 报错libcrypto
  14. 技术问答-1 跨平台
  15. 基于XMPP协议的Android即时通信系(http://blog.csdn.net/lnb333666/article/details/7471292)...
  16. Model和ModelMap的区别,以及背后那个男人~
  17. 清楚浮动四种常用方法
  18. 蜗牛爬墙墙高10米C语言,蜗牛爬墙——打破小朋友的数学思维模式
  19. jquery.validate.min.js使用介绍
  20. 一位实习生对软件测试的看法

热门文章

  1. 阻止默认行为是配合passive使用
  2. 如何在IE/Edge浏览器中巧妙地传输HTA文件?
  3. Merge、Rebase
  4. HADOOP2单机版
  5. [转载]WPF窗口跳转及window和page区别
  6. python能和c语音交互吗_Python与C交互概述
  7. JS格式化JSON串显示在表格中
  8. CS229 6.6 Neurons Networks PCA主成分分析
  9. 基于C#局域网语音聊天
  10. re_path 的 ?P