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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
node错误处理与日志记录的实现
Dec 24 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
Vue中component标签解决项目组件化操作
Sep 04 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数据过滤的方法
2013/10/30 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python入门之井字棋小游戏
2020/03/05 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
行政助理求职自荐信
2013/10/26 职场文书
大四学年自我鉴定
2013/11/13 职场文书
采购助理岗位职责
2014/02/16 职场文书
道德之星事迹材料
2014/05/03 职场文书
主题实践活动总结
2014/05/08 职场文书
空气的环保标语
2014/06/12 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
村党组织公开承诺书
2015/04/30 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis