2022年jquery的each函数用法 .pdf

《2022年jquery的each函数用法 .pdf》由会员分享，可在线阅读，更多相关《2022年jquery的each函数用法 .pdf（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、each() 方法能使 DOM循环结构简洁，不容易出错。 each() 函数封装了十分强大的遍 历功能，使用也很方便，它可以遍 历一维数组、多维数组、DOM, JSON 等等在 javaScript 开发过程中使用 $each 可以大大的减 轻我们的工作量。下面提一下 each 的几种常用的用法each 处理一维数组 var arr1 = aaa, bbb, ccc ; $.each(arr1, function(i,val) alert(i); alert(val); ); alert(i) 将输出 0， 1， 2 alert(val) 将输出 aaa， bbb， ccc each 处理二维

2、数组var arr2 = a, aa, aaa, b, bb, bbb, c, cc, ccc $.each(arr, function(i, item) alert(i); alert(item); ); arr2 为一个二 维数组， item 相当于取 这二维数组中的每一个数 组。item0 相对于取每一个一 维数组里的第一个 值名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 6 页 - - - - - - - - - alert(i) 将输出为 0， 1， 2，因为

3、这二维数组含有 3 个数组元素alert(item) 将输出为 a, aa, aaa， b, bb, bbb， c, cc, ccc 对此二位数 组的处理稍作 变更之后 var arr = a, aa, aaa, b, bb, bbb, c, cc, ccc $.each(arr, function(i, item) $.each(item,function(j,val) alert(j); alert(val); ); ); alert(j) 将输出为 0， 1， 2， 0， 1， 2，0， 1， 2 alert(val) 将输出为 a， aa， aaa， b， bb， bbb， c， cc

4、， ccc each 处理 json 数据，这个 each 就有更 厉害了，能循环每一个属性var obj = one:1, two:2, three:3; each(obj, function(key, val) alert(key); alert(val); ); 这里 alert(key) 将输出 one two three alert(val) 将输出 one， 1， two， 2， three,3 这边为何 key 不是数字而是属性呢，因 为 json 格式内是一 组无序的属性-值，既然无序，又何来数字呢。而这个 val 等同于 objkey 名师资料总结 - - -精品资料欢迎下载

5、 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 6 页 - - - - - - - - - ecah 处理 dom 元素，此处以一个 input 表单元素作 为例子。如果你 dom 中有一段 这样的代码 然后你使用 each 如下 $.each($(input:hidden), function(i,val) alert(val); alert(i); alert(val.name); alert(val.value); ); 那么， alert(val) 将输出object HTMLInputElement，

6、因为它是一个表单元素。alert(i) 将输出为 0， 1， 2， 3 alert(val.name); 将输出 aaa,bbb,ccc,ddd ，如果使用 this.name 将输出同样的结果alert(val.value); 将输出111,222,333,444 ，如果使用this.value 将输出同样的结果如果将以上面一段代 码改变成如下的形式$(input:hidden).each(function(i,val) alert(i); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - -

7、- 第 3 页，共 6 页 - - - - - - - - - alert(val.name); alert(val.value); ); 可以看到，输出的结果是一样的，至于两种写法究竟区 别在哪，我也还不知。此改变运用到上面几段数 组的操作也会 输出同样的结果。这样，几个例子的实际结果已经得到答案。接着再继续往下研究，总不能知其然不知其所以然。从以上的例子中可知jQuery 和 jQuery 对象都实现了该方法，对于 jQuery 对象，只是把each 方法简单的进行了委托：把jQuery 对象作为第一个参数 传递给 jQuery 的 each 方法。看下 jQuery 中的 each 实现

8、（网 络摘抄）function (object, callback, args) / 该方法有三个参数 :进行操作的 对象 obj， 进行操作的函数 fn，函数的参数 args var name, i = 0,length = object.length; if (args) if (length = undefined) for (name in object) if (callback.apply(objectname, args) = false) break; else for (; i length;) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - -

9、 - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 6 页 - - - - - - - - - if (callback.apply(objecti+, args) = false) break; else if (length = undefined) for (name in object) if (callback.call(objectname, name, objectname) = false) break; else for (var value = object0; i length & callback.call(value, i, v

10、alue) != false; value = object+i) /*object0 取得 jQuery 对象中的第一个 DOM元素，通过 for 循环，得到遍 历整个 jQuery 对象中对应的每个 DOM 元素，通过 callback.call( value,i,value); 将 callback 的 this 对象指向 value 对象，并且传递两个参数 ,i 表示索引值， value 表示 DOM 元素；其中 callback 是类似于 function(index, elem) . 的方法。所以就得到 $(.).each(function(index, elem) . ); */

11、 return object; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 6 页 - - - - - - - - - jquery 会自动根据传入的元素 进行判断，然后在根据判断 结果采取 apply 还是 call 方法的 处理。在fn 的实现中，可以直接采用 this 指针引用数组或是对象的子元素。1.obj 对象是数 组each 方法会 对数组中子元素的逐个 进行 fn 函数调用，直至调用某个子元素返回的 结果为 false 为止，也就是说，我们可以在提供的

12、fn 函数进行处理，使之满足一定条件后就退出each 方法调用。当each 方法提供了 arg 参数时， fn 函数调用传入的参数 为 arg，否 则为：子元素索引，子元素本身2.obj 对象不是数 组该方法同 1 的最大区 别是： fn 方法会被逐次不考 虑返回值的进行进行。换句话说， obj 对象的所有属性都会被fn 方法进行调用，即使fn 函数返回 false。 调用传入的参数同 1 类似。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 6 页 - - - - - - - - -