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 相关文章推荐
超级退弹代码
Jul 07 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
javascript中caller和callee详解
Aug 10 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
JavaScript实现商品评价五星好评
Nov 30 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
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
jQuery技巧总结
2011/01/01 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python中enumerate函数用法实例分析
2015/05/20 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
django解决跨域请求的问题详解
2019/01/20 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
调研汇报材料范文
2014/08/17 职场文书
租房协议书范文
2014/08/20 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js