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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
一篇文章学会Vue中间件管道
Jun 20 Vue.js
提取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
WHOIS类的修改版
2006/10/09 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php安装swoole扩展的方法
2015/03/19 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP进程通信基础之信号
2017/02/19 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python写日志文件操作类与应用示例
2019/07/01 Python
python3实现飞机大战
2020/11/29 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
《忆江南》教学反思
2014/04/07 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书