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下将字符串当函数执行的方法
Jul 13 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
JS 基本概念详细介绍
Oct 16 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
Linux中为php配置伪静态
2014/12/17 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
jquery 上下滚动广告
2009/06/17 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
javascript如何实现create方法
2019/11/04 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python 40行代码实现人脸识别功能
2017/04/02 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
如何提高MySql的安全性
2014/06/19 面试题
2015年端午节国旗下演讲稿
2015/03/19 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB
MySQL数据库之存储过程 procedure
2022/06/16 MySQL