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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
Vuex提升学习篇
Jan 11 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
提取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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
2021年最新CPU天梯图
2021/03/04 数码科技
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
进一步理解Python中的函数编程
2015/04/13 Python
Python psutil模块简单使用实例
2015/04/28 Python
python3.4中清屏的处理方法
2020/07/06 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
Python之字典添加元素的几种方法
2020/09/30 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
优秀少先队员主要事迹材料
2014/05/28 职场文书
爱牙日活动总结
2014/08/29 职场文书
财务审计整改报告
2014/11/06 职场文书
先进工作者申报材料
2014/12/23 职场文书
公司租车协议书
2015/01/29 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
交流会主持词
2015/07/02 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python