jQuery each()方法的使用方法


Posted in Javascript onMarch 18, 2010

jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。

jQuery.prototype.each=function( fn, args ) { 
return jQuery.each( this, fn, args ); 
}

让我们看一下jQuery提供的each方法的具体实现,
jQuery.each(obj,fn,arg)
该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args。
让我们根据ojb对象进行讨论:

1.obj对象是数组
each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false为止,也就是说,我们可以在提供的fn函数进行处理,使之满足一定条件后就退出each方法调用。当each方法提供了arg参数时,fn函数调用传入的参数为arg,否则为:子元素索引,子元素本身
2.obj 对象不是数组
该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。

jQuery.each=function( obj, fn, args ) { 
if ( args ) { 
if ( obj.length == undefined ){ 
for ( var i in obj ) 
fn.apply( obj, args ); 
}else{ 
for ( var i = 0, ol = obj.length; i < ol; i++ ) { 
if ( fn.apply( obj, args ) === false ) 
break; } 
} 
} else { 
if ( obj.length == undefined ) { 
for ( var i in obj ) 
fn.call( obj, i, obj ); 
}else{ 
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){} 
} 
} 
return obj; 
}

需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式,这意味着,在你自己的fn的实现中,可以直接采用this指针引用数组或是对象的子元素。这种方式是绝大多数jQuery所采用的一种实现方式。
在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。
下面简单介绍一下call方法。
call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
引用网上有一个很经典的例子
Js代码
function add(a,b) 
{ 
alert(a+b); 
} 
function sub(a,b) 
{ 
alert(a-b); 
} 
add.call(sub,3,1);

用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
具体call更深入的就不在这里提了。
下面提一下jQuery的each方法的几种常用的用法
Js代码
var arr = [ "one", "two", "three", "four"]; 
$.each(arr, function(){ 
alert(this); 
}); 
//上面这个each输出的结果分别为:one,two,three,four 
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]] 
$.each(arr1, function(i, item){ 
alert(item[0]); 
}); 
//其实arr1为一个二维数组,item相当于取每一个一维数组, 
//item[0]相对于取每一个一维数组里的第一个值 
//所以上面这个each输出分别为:1 4 7 
var obj = { one:1, two:2, three:3, four:4}; 
$.each(obj, function(key, val) { 
alert(obj[key]); 
}); 
//这个each就有更厉害了,能循环每一个属性 
//输出结果为:1 2 3 4
Javascript 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
js函数调用常用方法详解
Dec 03 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
在webstorm中配置less的方法详解
Sep 25 Javascript
jQuery each()小议
Mar 18 #Javascript
jquery ajax执行后台方法
Mar 18 #Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 #Javascript
javascript 验证日期的函数
Mar 18 #Javascript
12个非常有创意的JavaScript小游戏
Mar 18 #Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 #Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
php自定义的格式化时间示例代码
2013/12/05 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
python动态加载变量示例分享
2014/02/17 Python
jupyter安装小结
2016/03/13 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
行政助理岗位职责范文
2013/12/03 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
幼儿教师国培感言
2014/02/19 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2015年超市工作总结
2015/04/09 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书