- 浏览: 1126550 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
上篇读到了jquery库如何通过其中的jQuery.extend及jQuery.fn.extend去扩展自身的。这篇将分析下jQuery.each及jQuery().each方法。看看他们如何与jQuery.extend一起扩展jquery库。查看源码,我们发现里面有10多处用到$.each及$().each。
jQuery1.4 已发布,后续将已1.4版本作为示例。部分源码如下:
jQuery.fn = jQuery.prototype = { ... each : function(callback, args){ return jQuery.each( this, callback, args ); } ... } jQuery.extend({ ... 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 ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ) {} } } return object; } ... });
以上可看出,
a,jQuery().each是直接挂在jQuery.prototype(jQuery.fn)上的,因此每个jquery对象都包含each方法。
b,jQuery.each是通过jQuery.extend({})方式扩展的。
上一篇已经说过,通过这种方式扩展的方法将挂在function jQuery上,即为jQuery类的静态方法。
c,jQuery().each方法中只有一句:return jQuery.each( this, callback, args )。
即jquery对象的each方法实现上其实就是调用jQuery静态的jQuery.each。因此jQuery.each才是关键所在。
下面详细分析jQuery.each。查看源码,jQuery.each方法有三个参数:object,callback,args
1:object可以为数组(Array),对象(Object),甚至是函数类型(Functoin);
2:callback是回调函数,类型为function;
3:args为jquery库自身使用,使用者不会用到该参数,这里暂不讨论该参数情况。
jQuery.each函数中第一句定义必要的变量:
var name, i = 0,length = object.length, isObj = length === undefined || jQuery.isFunction(object);
length=object.length很好理解,有三种情况length不为undefined。
a: object为数组类型(Array)时,数组具有length属性;
b: object为函数类型(Functoin)时,length为该函数定义的参数个数,如果该函数没有定义参数,length为0;
c: 具有length属性的object伪数组(如:arguments,HTMLCollection,NodeList等)。
这里特意强调下objcet为jquery对象。即当在$().each时发生,这时会将this传到$.each中。
如:return jQuery.each( this, callback, args )。这里第一个参数this即为jquery对象,每个jquery对象是具有length属性的。
变量isObj用来判断是否是对象类型,有两种情况为true:
1,变量length等于undefined,即所传object没有length属性。
2,参数object为函数类型
因为暂不考虑第三个参数args的情况(即这里只讨论不传args的情况),jQuery.each可简化为如下:
each : function(object, callback, args){ var name, i = 0, length = object.length, isObj = length === undefined || jQuery.isFunction(object); if ( isObj ) { for ( name in object ) { if ( callback.call(object[name], name, object[name]) === false ){ break; } } } else { for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ) {} } return object; };
如果isObj为true,则用for in语句去遍历该对象,如果把每个迭代的对象看出键值对形式的话。callback中的this是值object[name],callback第一个参数是键name,第二个参数是值object[name]。
如果isObj为false,则用for循环去遍历数组(类数组)。callback中的this是数组中单独元素的值value,callback第一参数是数组的索引i,第二参数是数组单独元素值value。
callback调用后返回值如果是false则停止迭代,跳出循环。这里用严格"==="来判断是否与false相等。顺便提一下,函数如果没有显示的return,默认返回undefined。
最后总结下:
$().each的each是jquery对象的方法,实现上它调用静态的$.each。它只用来迭代jquery对象,jquery对象可以看成一个伪数组(具有length属性,用索引方式存取)。
$.each的each是function jQuery的静态方法,可以迭代对象,数组,伪数组,函数。
- jq3.zip (795 Bytes)
- 下载次数: 18
评论
这个应该可以追加参数用,相当prototype的curry()
发表评论
-
如何定制你自己的jQuery
2015-01-12 08:38 2690jQuery随着版本的不断升级代码量也随之增加,从1.0. ... -
读jQuery之二十一(队列queue)
2013-11-21 14:13 2339queue模块在jQuery中分在Effects中,搜索整个 ... -
读jQuery之二十(Deferred对象)
2013-09-24 07:23 1064Deferred对象是由$.Deferred构造的,$.D ... -
读jQuery之十九(多用途回调函数列表对象)
2013-08-08 07:39 3027$.Callbacks是在版本1.7中 ... -
jQuery1.8的几个小变化
2013-05-18 07:57 1116一,.width() 和 .height()方法 1 ... -
读jQuery之十七(attribute/property/class)
2012-04-23 07:44 1523jQuery的属性模块提供了如下方法 attr/rem ... -
读jQuery之十六(事件代理)
2012-04-21 11:45 1679事件代理的实现原理很简单:利用浏览器中事件的冒泡(eve ... -
读jQuery之十五
2012-04-21 08:27 1111在之前的event-jq-0.2.js基础上继续提取jQuer ... -
读jQuery之十三(触发事件核心方法)
2012-04-20 07:40 1580触发事件,或称模拟用户动作。比如点击,我们可以用代码去模拟用户 ... -
读jQuery之十四
2012-04-20 22:12 1152最近看完了添加事件和删除事件的核心方法,忍不住想把jQu ... -
读jQuery之十八(元素位置)
2012-04-24 07:09 1592本篇所读源码版本为1.7.2 jQuer ... -
读jQuery之十二(删除事件核心方法)
2012-04-19 13:57 1410使用jQuery删除事件(或称解除事件绑定)有三个函数:unb ... -
读jQuery之十一(添加事件核心方法)
2012-04-19 07:07 1919上一篇提到jQuery中添加 ... -
读jQuery之十(事件模块概述)
2012-04-18 14:39 1700jQuery的事件模块是较 ... -
读jQuery之九(一些瑕疵)
2012-04-18 14:34 1193jQuery1.6.1 发布有一段时间了,发现一些冗余代 ... -
读jQuery之十八(元素位置)
2012-04-18 14:27 20本篇所读源码版本为1.7.2 jQuery中提供 ... -
读jq之八(原生事件对象的修复及扩充)
2010-12-04 09:13 2229由于各个浏览器中原生事件对象的 差异性 ,多数 JS库/框 ... -
读jq之七(判断点击了鼠标哪个键)
2010-12-03 18:31 2404jQuery丢弃了标准的 button 属性采用which ... -
jq中html()方法使用不当带来的陷阱
2010-05-29 10:54 5195.html方法当不传参数时用来获取元素的html内容,查看源码 ... -
jQuery1.4.2的一些瑕疵
2010-05-05 09:31 2089jQuery1.4.2 发布有一段时间了,发现一些多余的代 ...
相关推荐
jq省市区三级联动,简单实用 不需要查询数据库
jQuery判断导航下拉到一定高度后导航固定到头部特效,这种效果经常看到一些分享网站,其实这种效果也是很方面用户不需要返回导航可以点击自己想要去的栏目,其实原理很简单,先给浏览器绑定滚动条滚动事件,获取当前...
NULL 博文链接:https://onestopweb.iteye.com/blog/2291704
一款基于JQ的世界地区三级联动插件 有个内置网页demo 请下载自行研究一下
share分享,JQ第三方分享插件,可自定义链接、标题,移动端H5
每三秒滚一次代码JQ,每三秒滚一次代码JQ
jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件
jq 三级联动
JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果
jq安装包rpm.rar
JQ8400的说明书
jq6500语音芯片相关软件,驱动,以及51驱动程序C语言,驱动,以及51驱动程序C语言
完整的jq ajax提交表单,奖解压后jq文档加入页面中,调用就可惟了。 表单结构 <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Comment: <...
笔顺书写jq+html 直接打开使用仅供参考 笔顺书写jq+html 直接打开使用仅供参考 笔顺书写jq+html 直接打开使用仅供参考 笔顺书写jq+html 直接打开使用仅供参考
jq-mobile案例 jq-mobile案例 jq-mobile案例 jq-mobile案例 jq-mobile案例
JQ8900 语音模块资源列表:MP3格式转换器mp3文件测试音频串口测试程序语音合成软件config.txtJQ8900-16P语音模块使用说明书V1.3.docJQ8900-16P语音模块使用说明书V1.3.pdfJQ8900-16P语音模块原JQ8900-16P语音模块原...
89c52、STM32、Arduino调试程序,格式转换、语音合成小软件,JQ8900手册,
单图。多图查看,旋转,放大缩小 jq插件