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 相关文章推荐
arguments对象
Nov 20 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
layui前端时间戳转化实例
Nov 15 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Django中Forms的使用代码解析
2018/02/10 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
django+mysql的使用示例
2018/11/23 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
python 穷举指定长度的密码例子
2020/04/02 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
大三自我鉴定范文
2013/10/05 职场文书
编辑硕士自荐信范文
2013/11/27 职场文书
yy结婚证婚词
2014/01/10 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
政风行风整改方案
2014/10/25 职场文书
顶岗实习计划书
2015/01/16 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书