读jQuery之四(优雅的迭代)


Posted in Javascript onJune 20, 2011

jQuery的操作往往是分两步
1,获取元素集合(选择器)
2,操作元素集合
而第二步操作元素集合的主要方法就是jQuery.each。查看源码,我们发现jQuery.each及this.each分别调用了27次和31次。可见它是多么的重要。
这篇将分析下jQuery.each及this.each方法。看看他们如何与jQuery.extend一起扩展jQuery库。最后我会给zChain.js加上each方法。
部分源码如下

jQuery.fn = jQuery.prototype = { 
... 
// Execute a callback for every element in the matched set. 
// (You can seed the arguments with an array of args, but this is 
// only used internally.) 
each: function( callback, args ) { 
return jQuery.each( this, callback, args ); 
}, 
... 
} 
jQuery.extend({ 
... 
// args is for internal usage only 
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; 
}, 
... 
});

以上可看出,
1,jQuery().each是直接挂在jQuery.prototype(jQuery.fn)上的,因此每个jQuery对象都包含each方法。
2,jQuery.each是通过jQuery.extend({})方式扩展的。前面已经说过,通过这种方式扩展的方法将挂在function jQuery上,即为jQuery类的静态方法。
3,jQuery().each方法中只有一句:return jQuery.each( this, callback, args )。即jQuery对象的each方法实现上其实就是调用jQuery静态的jQuery.each。因此jQuery.each才是关键所在。
下面详细分析jQuery.each,它有三个参数object, callback, args。
1,object可以为数组(Array),对象(Object),甚至是函数类型(Functoin);
2,callback是回调函数,类型为function;
3,args为jQuery库自身使用,使用者不会用到该参数,这里暂不讨论该参数情况。

函数中第一句定义必要的变量

var name, i = 0, 
length = object.length, 
isObj = length === undefined || jQuery.isFunction( object );

length=object.length很好理解,有三种情况length不为undefined
1, object为数组类型(Array)时,数组具有length属性;
2, object为函数类型(Functoin)时,length为该函数定义的参数个数,如果该函数没有定义参数,length为0;
3, 具有length属性的object伪数组(如:arguments,HTMLCollection,NodeList等)。

变量isObj用来判断是否是对象类型,有两种情况为true:
1,变量length等于undefined,即所传object没有length属性。
2,参数object为函数类型

这里强调下object为jQuery对象。即当在$(xx).each时发生,这时会将this传到$.each中。如:return jQuery.each( this, callback, args )。这里第一个参数this即为jQuery对象,每个jQuery对象是具有length属性的。

each中有以下两个分支
1,如果isObj为true,则用for in语句去遍历该对象,如果把每个迭代的对象看出键值对形式的话。callback中的this是值object[name],callback第一个参数是键name,第二个参数是值object[name]。
2,如果isObj为false,则用for循环去遍历数组(类数组)。callback中的this是数组中单独元素的值value,callback第一参数是数组的索引i,第二参数是数组单独元素值value。
callback调用后返回值如果是false则停止迭代,跳出循环。这里用严格"==="来判断是否与false相等。顺便提一下,函数如果没有显示的return,默认返回undefined。

总结下:
1,$(xx).each的each是jQuery对象的方法,它调用静态的jQuery.each。它只用来迭代jQuery对象,jQuery对象可以看成一个伪数组(具有length属性,用索引方式存取)。
2,$.each的each是function jQuery的静态方法(即jQuery.each),可以迭代对象,数组,伪数组,函数。
zChain-04.rar

Javascript 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
详解Node全局变量global模块
Sep 28 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 #Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 #Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 #Javascript
jQuery数组处理方法汇总
Jun 20 #Javascript
jQuery UI AutoComplete 使用说明
Jun 20 #Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 #Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 #Javascript
You might like
自定义php类(查找/修改)xml文档
2013/03/26 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
numpy.where() 用法详解
2019/05/27 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python 通过exifread读取照片信息
2020/12/24 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
公务员年总结的自我评价
2013/10/25 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
最新党员思想汇报
2014/01/01 职场文书
小学四年级学生评语
2014/12/26 职场文书
《迟到》教学反思
2016/02/24 职场文书
个人道歉信大全
2019/04/11 职场文书