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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
vue项目中用cdn优化的方法
Jan 03 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
浅析Vue 生命周期
Jun 21 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 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
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
Node.js学习入门
2017/01/03 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python os.access()用法实例
2019/02/18 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Python根据服务获取端口号的方法
2019/09/25 Python
flask 实现token机制的示例代码
2019/11/07 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
中科创达面试题
2016/12/28 面试题
主题婚礼策划方案
2014/02/10 职场文书
降消项目实施方案
2014/03/30 职场文书
开天辟地观后感
2015/06/09 职场文书
汉语拼音教学反思
2016/02/22 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
如何在Python中妥善使用进度条详解
2022/04/05 Python
详解如何使用Nginx解决跨域问题
2022/05/06 Servers