JQuery中each方法实现
each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。
jQuery和jQuery对象都实现了该方法,对于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方法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; } // 测试用例var arr = ['001','002','003','004','005'];var obj = {name : "finder"};var obj2 = {name : "liubei"};var isMe = function (numone, numtwo, numthree, numfour, numfive) {console.log("I'm " + numone +","+ numtwo +"," + numthree +","+ numfour +"," + numfive);};var lookMe = function (index, ob) {console.log(index + ":" + ob[index]);};each(arr, isMe, arr);each(arr, isMe);each(obj, lookMe);each(obj2, lookMe);
需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式,这意味着,在你自己的fn的实现中,可以直接采用this指针引用数组或是对象的子元素。这种方式是绝大多数jQuery所采用的一种实现方式。
详细图示:
参考文章:http://www.cnblogs.com/silence516/articles/1397209.html
转载于:https://www.cnblogs.com/liubei/p/eachOfJQuery.html
JQuery中each方法实现相关推荐
- jquery中not方法失效的解决方案
jquery中not方法失效的解决方案 参考文章: (1)jquery中not方法失效的解决方案 (2)https://www.cnblogs.com/xxqxxq/p/9269669.html 备忘 ...
- jQuery中slice()方法用法实例
本文实例讲述了jQuery中slice()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以选取匹配元素集的子集. 语法结构: 复制代码 代码如下: $(selector).slice(sta ...
- 关于Jquery中ajax方法data参数用法的总结
关于Jquery中ajax方法data参数用法的总结 jquery手册描述: 示例: $.ajax({type: "POST",url: "some.php", ...
- jquery中Live方法不可用,Jquery中Live方法失效
jquery中Live方法不可用,Jquery中Live方法失效 >>>>>>>>>>>>>>>>> ...
- jquery中AddClass()方法问题
jquery中AddClass()方法要求对应的元素中不能不能有style属性设置,否则无法设置新css显示类,例如> $("img").hover(function () ...
- jq获取页面高度_使用jquery中height()方法获取各种高度
$(window).height(); //浏览器当前窗口可视区域高度 $(document).height(); //浏览器当前窗口文档的高度 $(document.body).height();/ ...
- jquery中remove()方法移除被选元素,包括所有的文本和子节点
jquery中remove方法移除被选元素,包括所有的文本和子节点 定义和用法 移除所有的 元素 移除html中指定id的元素内容 定义和用法 remove() 方法移除被选元素,包括所有的文本和子节 ...
- 使用jQuery中trigger()方法自动触发事件
一.常用事件 在页面加载完成时 自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...
- Jquery中css()方法获取边框长度
1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...
最新文章
- Visual C#弹出窗口杀手
- POJ2594 Treasure Exploration[DAG的最小可相交路径覆盖]
- linux信号处理编程实验报告,Linux编程之信号处理
- One Day-XML:XSLT
- c#调用带有自定义表结构的存储过程
- 【百家稷学】深度学习在计算摄影中的方法与应用(vivo技术分享)
- [html] 网页上的验证码是为了解决什么问题?说说你了解的验证码种类有哪些
- 从Maven远程存储库下载
- vfp报表纸张设置_Excel表格美化十四招,让你的报表不再那么丑
- Ubuntu18环境下安装ROS
- Excel连接到MySQL,将Excel数据导入MySql,MySQL for Excel,,
- 学 Python 知识点其实特简单, “内置函数“ 思维导图来了
- Hexo博客向百度提交链接
- python查看矩阵大小
- 【C语言】 C 语言 关键字分析 ( 属性关键字 | 常量关键字 | 结构体关键字 | 联合体关键字 | 枚举关键字 | 命名关键字 | 杂项关键字)
- Python3与SQLServer、Oracle、MySql的连接方法
- [CEOI2011] Balloons
- 【FreeRTOS】队列的使用
- 转 javascip学习笔记
- 2D转换综合写法(13)
热门文章
- IDEA下项目打包成jar,并通过cmd命令调用
- 再不了解PostgreSQL,你就晚了之PostgreSQL主从流复制部署...
- C++雾中风景12:聊聊C++中的Mutex,以及拯救生产力的Boost
- 2017全球超算峰会召开 联想以智能超算赋能AI时代
- docker~aspnetcore2.0镜像缺少libgdiplus问题
- 《Using Docker》书评和与作者Adrian Mouat的问答
- ubuntu12.04下安装NVIDIA驱动
- Report_SRW在RDF中初始化的重要性(案例)
- 传说中的神器: shared_ptr/weak_ptr/scoped_ptr
- vfp:数据库中表间关系的参照完整性