关于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 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
js 居中漂浮广告
Mar 21 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
vue小白入门教程
Apr 02 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
PHP错误提示的关闭方法详解
2013/06/23 PHP
php的常量和变量实例详解
2017/06/27 PHP
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
django 将model转换为字典的方法示例
2018/10/16 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
物流司机岗位职责
2013/12/28 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
大学生求职信
2014/06/17 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
美容院管理规章制度
2015/08/05 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书