`
lancijk
  • 浏览: 383922 次
  • 性别: 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综合练习2.docx

    1、jQuery 对象可以进行隐式迭代: 为选取的所有的 p 节点都添加了 onclick 响应函数。jQuery 对象本身就是一个 DOM 对象的数组。  2、在响应函数中,this 是一个 DOM 对象,若想使用 jQUery 对象的方法,需要把其...

    jQuery打印插件.js

    功能:一旦调用print函数就解析的jQuery.Deferred对象。可用于设置回调 - 请参阅wiki 超时 默认: 750 可接受的值:以毫秒为单位的时间 setTimeout 功能:在创建新窗口/ iframe之前更改等待内容等加载内容的最大时间...

    JQuery 操作Javascript对象和数组的工具函数小结

    如果是js对象,则迭代其每个属性;如果是数组,则迭代其每个元素。 callback 回调函数。为每个迭代的调用一次。第一个参数数组元素的下标或对象属性的名称,第二个参数是对应数组元素或对象属性

    jQuery详细教程

    jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() ...

    超详细的jQuery知识点

    文章目录jQueryjQuery的基本介绍jQuery的引入jQuery语法jQuery选择器jQuery的属性操作jQuery的样式操作标签对象的内容操作标签对象的class操作jQuery的样式操作jQuery可以直接使用的事件jQuery阻止冒泡事件jQuery...

    JQuery学习笔记

    JQuery学习中的笔记。包括内置函数、Dom对象和JQuery对象、选择器和过滤器、隐式迭代等

    浅谈jQuery操作类数组的工具方法

    在很多时候,JQuery的$()函数都返回一个类似数据的...each(fn(index)):该方法是是一个迭代器函数,它将使用fn函数迭代处理JQuery里包含的每个元素。 get():该方法返回由JQuery里包含的所有DOM元素组成的数组。 get

    jQuery完全实例.rar

    注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: &lt;img/&gt;&lt;img/&gt; jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果: [ , &lt;img src="test1.jpg" /&gt; ] ---...

    jquery 插件学习(三)

    要实现类似的连写行为,就应该在每个插件方法中,返回一个jquery对象,除非方法需要明确返回值。返回的jquery对象通常就是this所引用的对象。如果使用each()方法迭代this,则可以直接返回迭代的结果。针对上一节的...

    学习JavaScript设计模式之迭代器模式

    迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。 JavaScript中的Array.prototype.forEach 一、jQuery中的迭代器 $.each([1, 2, 3], function(i, n) { console....

    jquery.step:一个 jQuery 插件,用于循环元素数组或 jQuery 对象,并在每个步骤回调之间延迟超时

    它本质上类似于 jQuery 的原生$().each()函数,但添加了用于定义每次迭代之间的超时或延迟的选项。例子假设您有一堆li ,如下所示: &lt; ul&gt; &lt; li&gt; 1 &lt;/ li&gt; &lt; li&gt; 2 &lt;/ li&gt; &lt; li&gt; 3 &lt;/ li&gt; &lt; li&gt; 4 &lt;/ li&gt; &lt; li&gt; 5 ...

    jQuery选择器总结之常用元素查找方法

    2.隐式迭代 3.无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $(“#myELement”) 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以...

    JQuery学习总结【一】

    本文主要介绍了JQuery的基本知识,如:jquery内置函数,JQuery对象,Dom对象,jquery选择器,jquery的迭代,jquery的节点遍历等等,有助于对JQuery基本知识的学习与巩固。需要的朋友可以参考下

    jquery选择器大全 全面详解jquery选择器

    无须判断对象是否存在其中“$”是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$(“#foo”)和jQuery(“#foo”)是等价的,$.ajax和jQuery.ajax是等价的。如果没有特别说明,可以把程序中的$...

    jquery插件制作简单示例说明

    一、先从一个简单的实例,不需要带参数的一个方法开始 代码如下: //创建一个匿名函数 (function($){ //给jQuery附加一个新的方法(详细见备注1) $.fn.extend({ //插件的名字 MyFirstName: function() { //迭代当前...

    jQuery数组处理函数整理

    写在前面: jQuery的数组处理函数...如果是js对象,则迭代其每个属性;如果是数组,则迭代其每个元素。   3、$.extend(target, source1, source2, …, sourcen)  用source1…n 对象的属性来扩展target对象。返回值

    jquery属性,遍历,HTML操作方法详解

    Jquery属性遍历、HTML操作。 Jquery拥有可操作HTML元素和属性的强大方法。 下面是我整理的一些jquery遍历函数: .add() 将元素添加到匹配元素的集合中。 ...对 jQuery 对象进行迭代,为每

    Jquery $.map使用方法实例详解

    2. map()还会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。 3. 该函数返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中...

    $.each与$().each的区别示例介绍

    $.each() 与 $().each之间的区别,$.each是一个通用的迭代函数,可用于近似地迭代 对象和数组,这个函数与$().each是专用用于迭代和执行jquery对象函数。而这个函数可以用于迭代任何对象,这个函数的回调中包含两个...

    jquery基础知识第一讲之认识jquery

    jQuery是一个优秀的...9.隐式迭代 10.行为层与结构层分离 11.丰富的插件支持 12.完善的文档 13.开源 (1)编写简单的jQuery代码: 注:$ 就是jQuery的简写形式。 &lt;!-- 引入 jQuery --&gt; &lt;script src="../

Global site tag (gtag.js) - Google Analytics