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 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 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
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
js文字横向滚动特效
2015/11/11 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
详解node和ES6的模块导出与导入
2020/02/19 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python 控制语句
2011/11/03 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
软件测试题目
2013/02/27 面试题
2013年学期结束动员演讲稿
2014/01/07 职场文书
三个儿子教学反思
2014/02/03 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
学生检讨书范文
2015/01/27 职场文书
在校证明模板
2015/06/17 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA