关于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实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
用JS实现选项卡
2020/03/23 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
python框架django基础指南
2016/09/08 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
写好自荐信的要点
2013/11/06 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
小学端午节活动总结
2015/02/11 职场文书
停课通知书
2015/04/24 职场文书
php引用传递
2021/04/01 PHP
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL