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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
javascript天然的迭代器
Oct 29 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
jQuery表单验证之密码确认
May 22 jQuery
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 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
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
js操作二进制数据方法
2018/03/03 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python中enumerate函数用法实例分析
2015/05/20 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python字典key不能是可以是啥类型
2020/08/04 Python
python文件排序的方法总结
2020/09/13 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
大学生入党思想汇报
2014/01/14 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
关于青春的演讲稿
2014/05/05 职场文书
三方股东合作协议书
2014/10/28 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
Tomcat配置访问日志和线程数
2022/05/06 Servers
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电