关于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学习之闭包分析
Dec 02 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
JQuery实现图片轮播效果
May 08 jQuery
ES6入门教程之let和const命令详解
May 17 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
React中Ref 的使用方法详解
Apr 28 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php5与php7的区别点总结
2019/10/11 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
Vue实现验证码功能
2019/12/03 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python 对象中的数据类型
2017/05/13 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
python实现两个文件夹的同步
2019/08/29 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
sort命令的作用和用法
2012/11/04 面试题
学习十八大的心得体会
2014/09/01 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript