关于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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
localStorage实现便签小程序
Nov 28 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
详解Vue.js 响应接口
Jul 04 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 基本语法格式
2009/12/15 PHP
深入解析php之sphinx
2013/05/15 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
PHP反射基础知识回顾
2020/09/10 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
5 cool javascript apps
2007/03/24 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
python二元表达式用法
2019/12/04 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
Python基于template实现字符串替换
2020/11/27 Python
python中time、datetime模块的使用
2020/12/14 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
财务主管的岗位职责
2013/12/30 职场文书
股东协议书
2014/04/14 职场文书
股指期货心得体会
2014/09/10 职场文书
刘胡兰观后感
2015/06/16 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS