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 相关文章推荐
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
详解webpack 入门与解析
Apr 09 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
vue input标签通用指令校验的实现
Nov 05 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
Python中一行和多行import模块问题
2018/04/01 Python
windows下python安装小白入门教程
2018/09/18 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
python实现图片识别汽车功能
2018/11/30 Python
python 多线程串行和并行的实例
2019/02/22 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers