关于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 ui(接口)介绍
Sep 17 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
js倒计时显示实例
Dec 11 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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 文件上传功能实现代码
2009/06/24 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
js判断密码强度的方法
2020/03/18 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python是什么 Python的用处
2020/05/26 Python
Keras 使用 Lambda层详解
2020/06/10 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
Java工程师面试集锦之Spring框架
2013/06/16 面试题
静态成员和非静态成员的区别
2012/05/12 面试题
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
《燕子》教学反思
2014/02/18 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
测控技术自荐信
2014/06/05 职场文书
员工工作自我评价
2014/09/26 职场文书
运动会广播稿20字
2015/08/19 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript