关于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在光标位置插入内容的实现代码
Jun 18 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
原生js简单实现放大镜特效
May 16 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
vue权限问题的完美解决方案
May 08 Javascript
JavaScript闭包相关知识解析
Oct 19 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
php时间函数用法分析
2016/05/28 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
js的匿名函数使用介绍
2013/12/11 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Python实现高效求解素数代码实例
2015/06/30 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
python爬取音频下载的示例代码
2020/10/19 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
销售员自我评价怎么写
2013/09/19 职场文书
学习交流会主持词
2014/04/01 职场文书
司法所长先进事迹
2014/06/02 职场文书
股东授权委托书范文
2014/09/13 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
公司聚餐通知
2015/04/22 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
python如何读取.mtx文件
2021/04/22 Python