jquery的each方法使用示例分享


Posted in Javascript onMarch 25, 2014

对于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所采用的一种实现方式。

Javascript 相关文章推荐
用javascript操作xml
Nov 04 Javascript
javascript引用对象的方法
Jan 11 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
玩转方法:call和apply
May 08 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 #Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 #Javascript
jquery解析xml字符串示例分享
Mar 25 #Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 #Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 #Javascript
Jquery插件编写简明教程
Mar 25 #Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 #Javascript
You might like
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
django的csrf实现过程详解
2019/07/26 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
python如何导入依赖包
2020/07/13 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
大学生村官典型材料
2014/01/12 职场文书
个人欠款担保书
2014/05/20 职场文书
汽车广告策划方案
2014/05/31 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
英语感谢信范文
2015/01/20 职场文书
团代会闭幕词
2015/01/28 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
创业计划书之便利店
2019/09/05 职场文书