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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 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 empty函数 使用说明
2009/08/10 PHP
PHP 错误处理机制
2015/07/06 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
python查看模块安装位置的方法
2018/10/16 Python
python3下载抖音视频的完整代码
2019/06/05 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
大学生写自荐信的技巧
2014/01/08 职场文书
学生实习介绍信
2014/01/15 职场文书
干部个人对照检查材料
2014/08/25 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
委托书格式要求
2015/01/28 职场文书
毕业生对母校寄语
2015/02/26 职场文书
党小组评议意见
2015/06/02 职场文书