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点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. 在IOS9中的Cordova应用程序使用JQuery / Javascript的window.history问题

    在两个测试用例中唯一改变的是Cordova.js.解决方法我看到这是几个星期前,但我会发布这个,以防其他人遇到它.听起来它可能与iOS9中的哈希更改生成的导航事件有关.如果是这样,可以将其添加到index.html以禁用哈希侦听:

  3. iOS 5上的jQuery事件

    解决方法在Apple开发论坛上由一个人回答:我需要在将元素添加到DOM之后才绑定(),如下所示:

  4. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  5. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  6. 设置焦点到输入框和显示Android键盘使用jquery手机在pageshow

    我正在设置焦点到输入框,并显示Android键盘使用jquery手机网页显示.我从Web上尝试过很多选项.但是没有一个在模拟器和移动设备中都能按预期工作.这是代码:查找屏幕截图以供参考请咨询…解决方法对我有用的解决方案

  7. android – 如何在焦点()上以编程方式隐藏jquery mobile中的键盘

    我想在Focus()上隐藏键盘,但是当$(“.ui-input-text”).focus();它会自动打开键盘.我只是想隐藏在特定的屏幕上,我用document.activeElement.blur()测试;但它也没有关注()输入.解决方法提交表单时,iOS键盘可能不会自动关闭.这是一个非常实用的问题,因为不应要求用户手动关闭键盘,否则他们不会期望需要这样做.可以通过调用document.acti

  8. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. jQuery实现简单的抽奖游戏

    这篇文章主要为大家详细介绍了jQuery实现简单的抽奖游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. jQuery使用each遍历循环的方法

    这篇文章主要介绍了jq 用each遍历循环的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部