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控件的相对独立性
Sep 06 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
js获取checkbox值的方法
Jan 28 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
Move.js入门
Feb 08 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 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
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
解决uWSGI的编码问题详解
2017/03/24 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python中time库的实例使用方法
2019/10/31 Python
Python如何输出整数
2020/06/07 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
教师自荐信范文
2013/12/09 职场文书
优秀小学生家长评语
2014/01/30 职场文书
小学假期安全广播稿
2014/09/28 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python