关于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将文本转化成JSON对象需要注意的问题
May 09 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
js实现网页抽奖实例
Aug 05 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
Python heapq使用详解及实例代码
2017/01/25 Python
Python探索之自定义实现线程池
2017/10/27 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
用python实现刷点击率的示例代码
2019/02/21 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python对Excel的读取的示例代码
2020/02/14 Python
python PIL模块的基本使用
2020/09/29 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
理发店策划方案
2014/06/05 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
合作与交流自我评价
2015/03/09 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
学校推普周活动总结
2015/05/07 职场文书
老人节主持词
2015/07/04 职场文书
感恩老师主题班会
2015/08/12 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis