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 基础问答三
Dec 03 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
返回上一个url并刷新界面的js代码
Sep 12 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循环语句笔记(foreach,list)
2011/11/29 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
TypeScript入门-接口
2017/03/30 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
详解Vue之计算属性
2020/06/20 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
用Python编写一个国际象棋AI程序
2014/11/28 Python
列举Python中吸引人的一些特性
2015/04/09 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
几道Web/Ajax的面试题
2016/11/05 面试题
经管应届生求职信
2013/11/17 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
医院合作协议书
2014/08/19 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers