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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
Javascript倒计时代码
Aug 12 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 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图片上传类带图片显示
2006/11/25 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP的自定义模板引擎
2017/03/24 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
详解node中创建服务进程
2017/05/09 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
8种常用的Python工具
2020/08/05 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
什么是serialVersionUID
2016/03/04 面试题
行政内勤岗位职责
2014/04/07 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python