关于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学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
vue-ajax小封装实例
Sep 18 Javascript
js实现简单页面全屏
Sep 17 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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验证码(支持中文)
2007/02/14 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Django密码存储策略分析
2020/01/09 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
Python datetime 如何处理时区信息
2020/09/02 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
2014年平安创建工作总结
2014/11/24 职场文书
预备党员半年考察意见
2015/06/01 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
5道关于python基础 while循环练习题
2021/11/27 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript