`
lancijk
  • 浏览: 388334 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery 迭代对象

阅读更多

jQuery.each( object, callback,arg)

each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。

 

jQueryjQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQueryeach方法。换句话说: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所采用的一种实现方式。

 

var arr = ["one", "two", "three", "four", "five"];

var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };

 

    jQuery.each(arr, function() {

        alert(this);

    });

    /*

    one,two,three,four,five

    */

   

    jQuery.each(obj, function(i, val) {

        alert(i+":"+val);

    });

    /*

    one:1 two:2 three:3 four:4  five:5

    */

   

    jQuery.each(arr, function(i, val) {

        alert(i);

    });

    /*

    0,1,2,3,4

    */

   

    jQuery.each(arr, function(i, val) {

        alert(arr[i]);

    });

    /*

    one tow three four five

    */

 

 

引自blog 大道至简 http://www.cnblogs.com/jams742003/archive/2009/12/25/1632218.html

分享到:
评论
1 楼 liuweihug 2014-08-15  
jquery调用函数时传递对象参数 
http://www.suchso.com/UIweb/jquery-function-args-object.html

相关推荐

    jQuery第5天知识点:隐式迭代、链式编程、jQuery插件.7z

    现在,我们将详细讲解“隐式迭代”、“链式编程”以及“jQuery插件”。 1. **隐式迭代**: jQuery的一个显著特性是它的选择器功能,它允许开发者通过CSS选择器轻松地选取DOM元素。当一个jQuery对象被创建后,所有...

    jQuery对后台json的解析

    jQuery会自动将JSON字符串转换为JavaScript对象,因此我们可以直接通过键来访问数据: ```javascript success: function(data) { console.log(data.name); // 输出 "John" console.log(data.age); // 输出 30 ...

    jQuery应用技巧大全modified

    jQuery的集合处理功能非常强大,它内置了`each()`方法,使得对一组元素的迭代操作变得简单。例如,`$("p").each(function(i){...})`可以方便地遍历所有`&lt;p&gt;`元素并执行特定操作,如改变字体颜色。类似的,`$("tr")....

    jQuery_的原型关系图

    例如,`call()`和`apply()`可以让`$.each()`遍历任何可迭代对象,不仅仅是jQuery对象。 总的来说,jQuery的原型关系图揭示了jQuery如何通过原型链和继承来实现其强大的功能和灵活性。通过深入理解和研究这个图,...

    jquery各版本,jquery1.3-1.7,jquery文件

    jQuery1.5着重于Ajax功能的增强,引入了Promise对象,这是异步编程的一个重要概念,它使处理多个并发请求变得更加简单和有序。此外,jQuery1.5还加强了对JSONP的支持,便于跨域数据交互。 jQuery1.6的主要改进是...

    jquery-3.3.1Windows

    6. **链式操作**:jQuery对象返回的是jQuery实例,允许连续调用多个方法,如`$("div").addClass("highlight").css("color", "red");`。 7. **版本迭代**:jQuery 3.x系列主要关注性能优化和现代浏览器的兼容性,...

    jquery插件编写指南

    - **特点**:将独立的函数添加到 jQuery 的命名空间中,可以直接通过 `$` 或 `jQuery` 对象来调用。 - **应用场景**:适合实现一些通用的功能,例如 AJAX 请求或数据处理等。 - **示例**:例如,你可以添加一个 `...

    jQuery 1.1 中文文档

    jQuery 1.1 版本是该库的一个重要迭代,它提供了许多功能增强和性能优化。在这个离线版的jQuery 1.1中文文档中,用户可以深入理解其API和功能。 1. **基本概念** - **选择器**:jQuery 的核心在于强大的选择器功能...

    jquery手册(jquery.cuishifeng.cn网页版)2

    6. **链式操作**: jQuery对象是链式操作的基础,一个方法调用后可以立即调用另一个方法,如`$("#element").addClass("highlight").fadeIn(500)`。 7. **插件生态**: jQuery拥有庞大的插件生态系统,如jQuery UI提供...

    jquery-3.6.0.min.zip

    10. **$.each()**:这是一个迭代函数,可用于遍历数组或对象,处理每个元素或属性。 总的来说,"jquery-3.6.0.min.zip"包含的jQuery库是现代Web开发中的重要工具,它提供了高效的DOM操作、优雅的API和强大的功能,...

    JQuery1.4.1

    - `.each()`: 遍历集合并执行回调函数,常用于数组和对象的迭代。 - `.ready()`: 当DOM准备就绪时执行指定的函数,确保在操作DOM之前页面已完全加载。 - `.ajax()`: 实现异步HTTP请求,支持GET和POST等多种HTTP...

    jquery 教程 详细解释了jquery的使用方法

    7. 隐式迭代:jQuery会自动遍历获取到的对象集合,无需手动编写循环代码。 8. 丰富的插件:jQuery生态中拥有众多稳定且实用的插件,极大地提高了开发效率。 9. 开源:jQuery是开源的,允许自由使用,并且得益于全球...

    jquery库文件(jquery.min.rar)

    随着技术的发展,jQuery也在不断迭代更新,以适应新的前端需求。 总的来说,jQuery作为一款强大的JavaScript库,极大地提高了开发效率,降低了开发难度,是Web开发者的得力助手。这个压缩包中的“jquery.min.js”是...

    jQuery1.41中文API文档

    `jQuery.each()` 用于迭代对象或数组,而 `$(document).ready()` 用于确保页面加载完成后再执行代码。 10. **版本差异** - jQuery 1.4.1 相比于之前的版本,可能会有性能提升、bug 修复和新的 API 添加。例如,...

    jquery-1.8.3

    7. **版本更新**:jQuery 1.8.3之后,jQuery持续进行版本迭代,引入更多新特性并修复已知问题,但1.8.3因其稳定性和兼容性,至今仍被许多项目所采用。 总的来说,jQuery 1.8.3以其易用性和强大的功能,为前端开发者...

    Professional Jquery

    合理的选择器使用、事件委托、缓存jQuery对象、减少DOM操作等都是提高性能的最佳实践。此外,随着前端技术的迭代,了解jQuery与现代JavaScript框架(如React, Angular, Vue)的集成和使用方式同样重要。 知识点十:...

    jquery1.8.2在线-离线手册

    jQuery提供了多种遍历和过滤方法,如`.each()`用于迭代集合中的每个元素,`.first()`和`.last()`选取第一个或最后一个元素,`.filter()`和`.not()`用于筛选满足条件的元素。 四、DOM操作 jQuery允许开发者轻松地...

    jquery 1.12.4版本.zip

    10. **$.each()**:这是一个遍历对象或数组的迭代器,可以用来执行自定义操作。 在升级到jQuery 1.12.4时,可能遇到的问题主要是代码不兼容性。由于新版本可能移除了某些过时的方法或者改变了某些行为,因此在升级...

    jquery-array.rar_jquery_jquery array_jquery array_jquery array

    1. `$.each()`:这是jQuery提供的一种迭代函数,可以用于遍历任何可迭代对象,包括数组。它接受两个参数,第一个是目标对象,第二个是一个回调函数,回调函数的两个参数分别是当前元素的索引和值。例如: ```...

    基于jQuery和面向对象的redjs前端框架设计源码

    该项目是一款基于jQuery和面向对象的redjs前端框架设计源码,包含1148个文件,涵盖了506个...redjs历经1.0至3.0版本的迭代,不断优化易用性和性能,集成jQuery交互处理能力,致力于提升Web项目的开发效率和布局复用性。

Global site tag (gtag.js) - Google Analytics