关于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 19 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
vue+iview写个弹框的示例代码
Dec 05 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
vue路由跳转传参数的方法
May 06 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
15个值得收藏的JavaScript函数
Sep 15 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中看实例学正则表达式
2006/12/25 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
Joules美国官网:出色的英国风格
2017/10/30 全球购物
Java如何格式化日期
2012/08/07 面试题
计算机相关的自我评价
2014/01/15 职场文书
给校长的建议书200字
2014/05/16 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
工会经费申请报告
2015/05/15 职场文书
一般纳税人申请报告
2015/05/18 职场文书
车间安全生产管理制度
2015/08/06 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js