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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 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
新52大事件
2020/03/03 欧美动漫
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
javascript的delete运算符知识点总结
2019/11/19 Javascript
JS实现轮播图效果
2020/01/11 Javascript
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python实现点对点聊天程序
2018/07/28 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
python实现图片中文字分割效果
2019/07/22 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
致全体运动员广播稿
2014/02/01 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书