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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
JavaScript编码小技巧分享
Sep 17 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python操作MongoDB详解及实例
2017/05/18 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
巴基斯坦购物网站:Goto
2019/03/11 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
写给妈妈的道歉信
2014/01/11 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
公司委托书格式范文
2014/10/09 职场文书
六查六看心得体会
2014/10/14 职场文书
小学家长通知书评语
2014/12/31 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
公司回复函格式
2015/07/14 职场文书
学生会工作感言
2015/08/07 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书