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 Select操作大集合
May 26 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 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下几种删除目录的方法总结
2007/08/19 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php Calender(日历)代码分享
2014/01/03 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
个人贷款授权委托书样本
2014/10/07 职场文书
预备党员半年考察意见
2015/06/01 职场文书
地球上的星星观后感
2015/06/02 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android