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对表单元素的取值和赋值操作代码
May 19 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
微信小程序如何访问公众号文章
Jul 08 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
详解实现vue的数据响应式原理
Jan 20 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
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
浅谈php提交form表单
2015/07/01 PHP
调试php程序的简单步骤
2019/10/04 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
React组件的三种写法总结
2017/01/12 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
Python制作词云图代码实例
2019/09/09 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Flask处理Web表单的实现方法
2021/01/31 Python
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
违反学校规定检讨书
2014/01/18 职场文书
小学英语教学反思案例
2014/02/04 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
奖励通知
2015/04/22 职场文书
物业公司管理制度
2015/08/05 职场文书
九年级数学教学反思
2016/02/17 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers