关于jQuery中的each方法(jQuery到底干了什么)


Posted in Javascript onMarch 05, 2014

1. 估计很多人都会用到jQuery中的each方法。

那就来看一看jQuery都干了些什么。

找到jquery中的each源码:

each: function( object, callback, args ) { 
var name, i = 0, 
length = object.length, 
isObj = length === undefined || jQuery.isFunction( object ); if ( args ) { 
if ( isObj ) { 
for ( name in object ) { 
if ( callback.apply( object[ name ], args ) === false ) { 
break; 
} 
} 
} else { 
for ( ; i < length; ) { 
if ( callback.apply( object[ i++ ], args ) === false ) { 
break; 
} 
} 
} 
// A special, fast, case for the most common use of each 
} else { 
if ( isObj ) { 
for ( name in object ) { 
if ( callback.call( object[ name ], name, object[ name ] ) === false ) { 
break; 
} 
} 
} else { 
for ( ; i < length; ) { 
if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) { 
break; 
} 
} 
} 
} 
return object; 
},

这段代码还是比较简单的,应该没什么问题.

为了测试这个东西,我写了下面一段js;

$.each($(".demo"),function(){ 
console.log("show"); 
});

然后再加一段html:
<a href="" class="demo"></a> 
<a href="" class="demo"></a> 
<a href="" class="demo"></a>

然后拿着jQuery的源码来调试,以为能得到正确的结果。可是很遗憾。
关于jQuery中的each方法(jQuery到底干了什么) 
可以看到,这里的object竟然不是我所想要的那三个html对象,竟然是js内置的8种数据类型。

之后在jquery的源码中加了一段代码:

console.log(Object.prototype.toString(object)); 
console.log(length);

之后的输入如下:
关于jQuery中的each方法(jQuery到底干了什么) 
也就是说在文档加载的时候,jQuery会用each遍历dom对象,即使没有使用
$(function(){ 
});

当遍历指定对象之后,依旧会继续冒泡遍历父级元素。

2. 根据jQuery的源码使用回调函数参数

$.each($(".demo"),function(a,b){ 
console.log(a + "" + $(a).attr("class")); 
})

从源码可以看到:
callback.call( object[ i ], i, object[ i++ ] )

最后都将当前对象通过call方法传递给了回调函数,那么就可以像上面一样去使用当前对象中的属性。当然也可以直接用this来调用。

如果说复杂些的东西,比如,这里我是将$(".demo")作为object传递进去给$.each()

如里某些时候不是传递的jQuery或者html对象。而是一个Object或者array。

而在array中又存在很多其它的object或者方法。

这样就能弄出更多的效果。

3. 采用call或者apply实现回调模式.

从上面的代码可以看到:

callback.call(obj,args)

callback.apply([obj],args)

之类的代码,这里只需要传递callback函数,就能实现自己调用,这对于提高代码的复用程度用处不小。

但是也存在某些缺点,比如代码可读性降低,耦合程度增加等。

偶有所得,以记录之,以防忘记!

Javascript 相关文章推荐
读jQuery之四(优雅的迭代)
Jun 20 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
vuex与组件联合使用的方法
May 10 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 #Javascript
js时间比较示例分享(日期比较)
Mar 05 #Javascript
对于Form表单reset方法的新认识
Mar 05 #Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 #Javascript
7个JS基础知识总结
Mar 05 #Javascript
100个不能错过的实用JS自定义函数
Mar 05 #Javascript
jQuery DOM操作实例
Mar 05 #Javascript
You might like
求PHP数组最大值,最小值的代码
2011/10/31 PHP
提高php编程效率技巧
2015/08/13 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
激活 ActiveX 控件
2006/10/09 Javascript
jcrop基本参数一览
2013/07/16 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python正则表达式的使用范例详解
2014/08/08 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
python运行时间的几种方法
2016/06/17 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python探索之pLSA实现代码
2017/10/25 Python
python实现多层感知器
2019/01/18 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
高级销售员求职信
2013/10/25 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
说明书范文
2014/05/07 职场文书
成绩单评语
2015/01/04 职场文书
python字符串常规操作大全
2021/05/02 Python
PHP实现两种排课方式
2021/06/26 PHP