关于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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
Angular中$compile源码分析
Jan 28 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
javaScript语法总结
2016/11/25 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
解读ES6中class关键字
2017/11/20 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python创建线程示例
2014/05/06 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
浅谈Python的list中的选取范围
2018/11/12 Python
为什么说python适合写爬虫
2020/06/11 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
DataList 能否分页,请问如何实现?
2015/05/03 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
人力资源管理系自荐信
2014/05/31 职场文书
珍惜资源的建议书
2014/08/26 职场文书
初中差生评语
2014/12/29 职场文书
孔庙导游词
2015/02/04 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis