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 相关文章推荐
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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实现的双向队列类实例
2014/09/24 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
调试php程序的简单步骤
2019/10/04 PHP
拖拉表格的JS函数
2008/11/20 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
python抽象基类用法实例分析
2015/06/04 Python
Python读大数据txt
2016/03/28 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python 同时运行多个程序的实例
2019/01/07 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
团代会主持词
2014/04/02 职场文书
校庆团日活动总结
2014/08/28 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
团拜会主持词
2015/07/04 职场文书
迎新年主持词
2015/07/06 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
高中生物教学反思
2016/02/20 职场文书
Python3 类型标注支持操作
2021/06/02 Python
Python序列化模块JSON与Pickle
2022/06/05 Python
redis lua限流算法实现示例
2022/07/15 Redis