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 AspxButton的客户端操作
Jun 26 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
vue组件间通信解析
Mar 01 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
JavaScript基于用户照片姓名生成海报
May 29 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP的几个常用加密函数
2016/02/03 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
python使用any判断一个对象是否为空的方法
2014/11/19 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
女子职高个人自荐书
2014/02/01 职场文书
小学数学课题方案
2014/06/15 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
贷款担保书范本
2015/09/22 职场文书
人民调解协议书
2016/03/21 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis
openstack云计算keystone组件工作介绍
2022/04/20 Servers
Nginx限流和黑名单配置
2022/05/20 Servers
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers