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时间函数基础介绍
Mar 28 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 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异常处理使用示例
2014/02/25 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
js 金额文本框实现代码
2012/02/14 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
python获得图片base64编码示例
2014/01/16 Python
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python关闭windows进程的方法
2015/04/18 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
对python字典过滤条件的实例详解
2019/01/22 Python
python将视频转换为全字符视频
2019/04/26 Python
详解Python中的测试工具
2019/06/09 Python
python取余运算符知识点详解
2019/06/27 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python动态文本进度条的实例代码
2020/01/22 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
董事长岗位职责
2013/11/30 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
员工保密协议书
2014/09/27 职场文书
上课说话检讨书
2015/01/27 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS