请选择 进入手机版 | 继续访问电脑版

10模板

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1346|回复: 4

jQuery的each迭代器

[复制链接]

1325

主题

1840

帖子

4781

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4781
发表于 2017-3-2 11:35:48 | 显示全部楼层 |阅读模式

jQuery的each方法从使用上就要分2种情况:

☑ $.each()函数
☑ $(selector).each()
$.each()函数和$(selector).each()是不一样的,后者是专门用来遍历一个jQuery对象的,是为jQuery内部服务的。

$.each()函数可用于迭代任何集合,无论是“名/值”对象(JavaScript对象)或数组。在迭代数组的情况下,回调函数每次传递一个数组索引和相应的数组值作为参数。(该值也可以通过访问this关键字得到,但是JavaScript始终将this值作为一个Object,即使它是一个简单的字符串或数字值。)该方法返回其第一个参数,这是迭代的对象。

jQuery的实例方法最终也是调用的静态方法,我们在之前就解释过jQuery的实例与原型方法共享的设计。

其中each的实例方法如下:

可见内部是直接调用的静态方法:

each: function(callback, args) {
    return jQuery.each(this, callback, args);
},
jQuery.each静态方法:

each: function(obj, callback, args) {
    var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike(obj);

    if (args) {
        if (isArray) {
            for (; i < length; i++) {
                value = callback.apply(obj, args);

                if (value === false) {
                    break;
                }
            }
        } else {
            for (i in obj) {
                value = callback.apply(obj, args);

                if (value === false) {
                    break;
                }
            }
        }
实现原理几乎一致,只是增加了对于参数的判断。对象用for in遍历,数组用for遍历。

jQuery可以是多个合集数组DOM,所以在处理的时候经常就针对每一个DOM都要单独处理,所以一般都需要调用this.each 方法,如下代码:

dequeue: function( type ) {
        return this.each(function() {
            jQuery.dequeue( this, type );
        });
    },
迭代器除了单纯的遍历,在jQuery内部的运用最多的就是接口的抽象合并,相同功能的代码功能合并处理:

例如一:

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
例如二:

jQuery.each({
    mouseenter: "mouseover",
    mouseleave: "mouseout",
    pointerenter: "pointerover",
    pointerleave: "pointerout"
}, function( orig, fix ) {
    //处理的代码
});
可以看出上面代码方法,针对相同的功能,节约了大量的代码空间。
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.    
  10. <script type="text/javascript">

  11. jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
  12.     $('body').append(name.toLowerCase()+'</br>')
  13. });

  14. </script>
  15. </body>
  16. </html>
复制代码
asdsadsa
回复

使用道具 举报

1325

主题

1840

帖子

4781

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4781
 楼主| 发表于 2017-3-3 21:07:36 来自手机 | 显示全部楼层
濂戒及璁′簡浜嗕簡馃榾馃榾馃榾
回复 支持 反对

使用道具 举报

1325

主题

1840

帖子

4781

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4781
 楼主| 发表于 2017-5-7 11:53:37 来自手机 | 显示全部楼层
1148030615 发表于 2017-3-3 21:07
濂戒及璁′簡浜嗕簡馃榾馃榾馃榾

什么鬼啊啊啊
回复 支持 反对

使用道具 举报

1325

主题

1840

帖子

4781

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4781
 楼主| 发表于 2017-7-30 09:19:53 来自手机 | 显示全部楼层
1148030615 发表于 2017-5-7 11:53
什么鬼啊啊啊

测试回复
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|10模板  

GMT+8, 2018-7-20 05:23 , Processed in 0.317030 second(s), 24 queries .

快速回复 返回顶部 返回列表