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基础整理1
Dec 06 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
javaScript语法总结
Nov 25 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
提取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
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
js实现密码强度检验
2017/01/15 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
工会工作先进事迹
2014/08/18 职场文书
2015年征兵工作总结
2015/07/23 职场文书
队名及霸气口号大全
2015/12/25 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python