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 相关文章推荐
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
基于jquery实现图片放大功能
May 07 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
vue+express+jwt持久化登录的方法
Jun 14 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之COOKIE支持详解
2010/09/20 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
php中socket通信机制实例详解
2015/01/03 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
Python实现的微信红包提醒功能示例
2019/08/22 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2014年人事科工作总结
2014/11/19 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
酒店员工管理制度
2015/08/05 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技