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 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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中json_decode()和json_encode()的使用方法
2012/06/04 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php截取中文字符串函数实例
2015/02/23 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python基础教程项目三之万能的XML
2018/04/02 Python
python删除不需要的python文件方法
2018/04/24 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
Django中ORM的基本使用教程
2020/12/22 Python
巴西购物网站:Onofre Agora
2020/06/08 全球购物
幼师自荐信
2013/10/26 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
体育课课后反思
2014/04/24 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
如何在Python中创建二叉树
2021/03/30 Python
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang