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静态作用域的功能。
Dec 25 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
javascript实现时钟动画
Dec 03 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中获取主机名、协议及IP地址的方法
2014/11/18 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
Python 文件处理注意事项总结
2017/04/10 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
详解python和matlab的优势与区别
2019/06/28 Python
Python os模块常用方法和属性总结
2020/02/20 Python
高考考python编程是真的吗
2020/07/20 Python
python动态规划算法实例详解
2020/11/22 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
成语的广告词
2014/03/19 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电