关于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中的var_dump函数实现代码
Sep 07 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
js中的面向对象入门
Mar 06 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
解析vue中的$mount
Dec 21 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Django websocket原理及功能实现代码
2020/11/14 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
幼儿园教师工作感言
2014/02/15 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
决心书格式及范文
2019/06/24 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS