关于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 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
jQuery 事件队列调整方法
Sep 18 Javascript
js的逻辑运算符 ||
May 31 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
PHP生成条形图的方法
2014/12/10 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
laravel请求参数校验方法
2019/10/10 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
Python计算一个文件里字数的方法
2015/06/15 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
flask应用部署到服务器的方法
2019/07/12 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
工商管理实习生自我鉴定范文
2013/12/18 职场文书
实习公司领导推荐函
2014/05/21 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
婚庆答谢词
2015/01/04 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python