jQuery源码分析之jQuery.fn.each与jQuery.each用法


Posted in Javascript onJanuary 23, 2015

本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法。分享给大家供大家参考。具体分析如下:

先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类

$('div').each(function(index, elem){

  

    $(this).addClass('red');

}

});

上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的

jQuery.fn.each

先贴一下类官方API说明,非常简单,只有两点需要注意
上文例子里的$(this).addClass('red'),其中,this指的是当前操作的dom元素
each中传入的方法,可以返回任意值,当返回的值为false时,跳出当前循环操作
/**

  

 * @description 对jQuery对象中,匹配的的每个dom元素执行一个方法

  

 * @param {Number} index 当前处理元素在集合中的位置

  

 * @param {DOMElement} Element 当前处理的dom元素

 

*/

.

.each( function(index, Element) )

下面举两个简单的例子

例子一:

给页面所有的div元素添加red类

$('div').each(function(index, elem){

  

    $(this).addClass('red');

}

});

例子二

给页面前5个div元素添加red类

$('div').each(function(index, elem){

  

    if(index>=5) return false;  // 跳出循环

    $(this).addClass('red');

}

});

如上,用法挺简单,不赘述,详细可查看 http://api.jquery.com/each/

源码内部是通过jQuery.each实现的,下面就讲下jQuery.each的源码,讲完jQuery.each的源码,jQuery.fn.each的源码就很简单了
 
jQuery.each:

同样是先上一个简单的例子

$.each([52, 97], function(index, value) {

  alert(index + ': ' + value + ':' + this);

}

});

输出内容如下:

0: 52-52
1
1: 97-97

类官方API说明

同样是有两个注意点

上面例子中的this,是集合中的元素,即下面的 valueOfElement
在callback中返回false,可以跳出循环

/**

  

 * @description 对集合(数组或对象)中的每个元素,执行某个操作

  

 * @param {Number|String} indexInArray 元素在集合中对应的位置(如集合为数组,则为数字;如集合为对象,则为键值)

  

 * @param {AnyValue} valueOfElement 集合中的元素

 

*/

j

jQuery.each( collection, callback(indexInArray, valueOfElement) )

 
例子一
$.each( ['one,'two','three', 'four'], function(index, value){

  

    if(index >= 2) return false;

  

    alert( "Index:" + index + ", value: " + value );

}

});

例子二

从官网直接copy来的例子,凑合着看

$.each( { name: "John", lang: "JS" }, function(k, v){

  

    alert( "Key: " + k + ", Value: " + v );

}

});

源码:
// args is for internal usage only

e

each: function( obj, callback, args ) {

  

    var value,

  

        i = 0,

  

        length = obj.length,

  

        isArray = isArraylike( obj );   // obj是不是类似数组的对象,比如 {'0':'hello', '1':'world', 'length':2},其实就是为jQuery对象服务啦

 

    if ( args ) {   // args,其实没发现这个参数有什么实际作用~~直接跳过看else里面的内容即可,除了callback传的参数不同外无其他区别

        if ( isArray ) {

            for ( ; i < length; i++ ) {

                value = callback.apply( obj[ i ], args );

                if ( value === false ) {

                    break;

                }

            }

        } else {

            for ( i in obj ) {

                value = callback.apply( obj[ i ], args );

                if ( value === false ) {

                    break;

                }

            }

        }

    // A special, fast, case for the most common use of each

    } else {

        if ( isArray ) {    // 处理数组

            for ( ; i < length; i++ ) {

                value = callback.call( obj[ i ], i, obj[ i ] );

                if ( value === false ) {

                    break;

                }

            }

        } else {    // 处理对象

            for ( i in obj ) {

                value = callback.call( obj[ i ], i, obj[ i ] ); // value 为callback的返回值

                if ( value === false ) {    // 注意这里,当value===false的时候,直接跳出循环了

                    break;

                }

            }

        }

    }

    return obj;

}

},

 
 
迟到的jQuery.fn.each源码:

的确很简单,只要理解了jQuery.each应该就没问题了,没什么好讲的~

each: function( callback, args ) {

  

    return jQuery.each( this, callback, args );

}

},

 
结束语

与jQuery.extend、jQuery.fn.extend一样,虽然 jQuery.each、jQuery.fn.each代码很简单,但也扮演了相当重要的作用,jQuery里大量用到了这两个方法,举例:

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {

  

    class2type[ "[object " + name + "]" ] = name.toLowerCase();

}

});

所以,好好掌握each!

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
AngularJS语法详解(续)
Jan 23 #Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 #Javascript
AngularJS语法详解
Jan 23 #Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 #Javascript
angular中使用路由和$location切换视图
Jan 23 #Javascript
JavaScript中的类与实例实现方法
Jan 23 #Javascript
PHP中CURL的几个经典应用实例
Jan 23 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
php依赖注入知识点详解
2019/09/23 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
Node 代理访问的实现
2019/09/19 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python中协程实现TCP连接的实例分析
2018/10/14 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
python求前n个阶乘的和实例
2020/04/02 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
关于Python错误重试方法总结
2021/01/03 Python
python实现简单文件读写函数
2021/02/25 Python
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
中文专业自荐书
2014/06/29 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python