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 表单下所有元素的隐藏
Jul 25 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
vue实现lodop打印功能的示例
Nov 11 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获取地址栏信息的代码
2008/10/08 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
隐性调用php程序的方法
2015/06/13 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
在django view中给form传入参数的例子
2019/07/19 Python
Python流程控制 if else实现解析
2019/09/02 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
文秘专业大学生求职信
2013/11/10 职场文书
法律进学校实施方案
2014/03/15 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
催款函怎么写
2015/06/24 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript