jQuery 源码分析(四) each函数 $.each和$.fn.each方法 详解
$.each一般用来遍历一个数组或对象，$.fn.each()就是指jQuery实例可以执行的操作(因为$.fn是jQuery对象的原型)
$.each用来遍历一个数组或对象，并依次执行回掉函数，最后返回传递的数组或对象，以支持链式操作，可以传递三个参数，如下:
object 待遍历的对象或数组
callback 要执行的函数，该函数可以带两个参数,分别表示该元素的索引(如果遍历对象则为键名)和值
writer by:大沙漠 QQ:22969969
args 一个数组，如果设置了该值，则参数2对应的函数里的参数就是该值，一般可以忽略
$.fn.each就是调用调用$.each来实现的，它传入的参数1就是当前对象this
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<p>1</p>
<p>2</p>
<script>
var A = [11,12,13,14,15]
$.each(A,function(index,elem){console.log(index,elem);}) //输出五行信息，分别为:0 11、1 12、2 13、3 14、4 15
$.each(A,function(){console.log(arguments)},[1,2]) //输出五行同样的信息，是一个数组，都是[1,2]
$('p').each(function(i,elem){
console.log(elem.innerHTML); //输出1、2
})
</script>
</body>
</html>
输出如下:
源码分析
$.each是通过$.extend()加载进来的，它的实现如下:
// args is for internal usage only
each: function( object, callback, args ) { //通用的遍历迭代方法，用于无缝地遍历对象和数组。object是待遍历的对象或数组 args是传给回调函数callback的参数数组
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction( object ); if ( args ) { //如果传入了参数数组，调用函数的apply方法执行该函数
if ( isObj ) {
for ( name in object ) { //对于对象，通过for-in循环遍历属性
if ( callback.apply( object[ name ], args ) === false ) { //从这里看出当each()函数传入了参数3时，参数3会传递给参数2所表示的函数
break;
}
}
} else {
for ( ; i < length; ) { //对于数组或类数组对象，则通过for 循环遍历下标
if ( callback.apply( object[ i++ ], args ) === false ) {
break;
}
}
} // A special, fast, case for the most common use of each
} else { //如果未传入参数args，则调用函数的call方法执行该方法
if ( isObj ) {
for ( name in object ) { //对于对象，通过for-in循环遍历属性名
if ( callback.call( object[ name ], name, object[ name ] ) === false ) { //从这里看出当each()函数忽略了参数3时，参数2所表示的函数的两个参数分别是index位置和当前处理的元素。
break;
}
}
} else {
for ( ; i < length; ) { //对于数组或类数组对象，则通过for 循环遍历下标
if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
break;
}
}
}
} return object;
},
就是通过for遍历，依次执行每个函数，比较简单的
对于$.fn.each()来说，它的实现代码如下:
each: function( callback, args ) {
return jQuery.each( this, callback, args );
},
参数1传递的this，也就是当前jQuery对象，jQuery对象是个类数组，因此会遍历执行在入口模块里保存的所有Dom引用，并依次执行函数
jQuery 源码分析(四) each函数 $.each和$.fn.each方法 详解的更多相关文章
- jQuery 源码分析(五) map函数 $.map和$.fn.map函数 详解
$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回,该函数有三个参数,如下: elems Array/Object类型 指定的需要处理的数组或 ...
- jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...
- Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解
双大括号会将数据解释为普通文本,而非 HTML 代码.为了输出真正的 HTML,你需要使用 v-html 指令,例如: <!DOCTYPE html> <html lang=&quo ...
- Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解
先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...
- Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解
先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
- jquery源码分析(四)——回调对象 Callbacks
借用百度百科来说明下回调函数: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该 ...
- jquery源码解析：attr，prop，attrHooks，propHooks详解
我们先来看一下jQuery中有多少个方法是用来操作元素属性的. 首先,看一下实例方法: 然后,看下静态方法(工具方法): 静态方法是内部使用的,我们外面使用的很少,实例方法才是对外的. 接下来,我们来 ...
- jquery源码解析：proxy，access，swap，isArraylike详解
jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的. jQuery.extend({ ...... guid: 1, //唯一标识符 ...
- jquery源码解析：pushStack，end，ready，eq详解
上一篇主要讲解了jQuery原型中最重要的方法init.接下来再讲一些比较常用的原型方法和属性 core_slice = [].slice, jQuery.fn = jQuery.prototype ...
随机推荐
- keras RAdam优化器使用教程， keras加载模型包含自定义优化器报错 如何解决？
本文首发于个人博客https://kezunlin.me/post/c691f02b/,欢迎阅读最新内容! python keras RAdam tutorial and load custom op ...
- html的特殊符号对照表
HTML的特殊符号对照表. 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η ...
- Newtonsoft.Json 指定某个属性使用特定的时间格式
Newtonsoft.Json 指定某个属性使用特定的时间格式 Intro Newtonsoft.Json 是 .NET 下最受欢迎 JSON 操作库,原为 JSON.Net 后改名为 Newtons ...
- MongoDB 高级教程
MongoDB 关系 MongoDB 的关系表示多个文档之间在逻辑上的相互联系. 文档间可以通过嵌入和引用来建立联系. MongoDB 中的关系可以是: 1:1 (1对1) 1: N (1对多) N: ...
- java基础(31):网络通信协议、UDP、TCP
1. 网络通信协议 通过计算机网络可以使多台计算机实现连接,位于同一个网络中的计算机在进行连接和通信时需要遵守一定的规则,这就好比在道路中行驶的汽车一定要遵守交通规则一样.在计算机网络中,这些连接和通 ...
- 这篇文章带你彻底理解synchronized
本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...
- python爬虫三大解析库之XPath解析库通俗易懂详讲
目录 使用XPath解析库 @(这里写自定义目录标题) 使用XPath解析库 1.简介 XPath(全称XML Path Languang),即XML路径语言,是一种在XML文档中查找信息的语言. ...
- 基于token机制鉴权架构
常见的鉴权方式有两种,一种是基于session,另一种是基于token方式的鉴权,我们来浅谈一下两种 鉴权方式的区别. 两种鉴权方式对比 session 安全性:session是基于cookie进行用 ...
- CSS3 3D变形 transform---rotateX(), rotateY(), rotateZ(), 透视(perspective)
2d x y 3d x y z 左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 ...
- MSSQL添加外键
alter table 需要建立外键的表 with check/nocheck add constraint 外键名字 foreign key (需要建立外键的字段名) references 外键表( ...