jQuery源码解读之addClass()方法分析


Posted in Javascript onFebruary 20, 2015

本文较为详细的分析了jQuery源码解读之addClass()方法。分享给大家供大家参考。具体分析如下:

给jQuery原型对象扩展addClass功能,jQuery.fn就是jQuery.prototype

jQuery.fn.extend({

/*

可以看出这是一个函数名叫addClass的插件方法。

*/

    addClass: function( value ) {

        var classes, elem, cur, clazz, j, finalValue,

            i = 0,

/*

this表示选择器选择的准备添加class的jQuery对象,len是该jQuery对象数组的长度。

*/

            len = this.length,

//在有一个操作数不是布尔值的情况下,&&操作就不一定返回布尔值,此时,它遵循下列规则:

//1.如果第一个操作数不是布尔类型,则返回第二个操作数;

//2.如果第二个操作数不是布尔类型,则只有在第一个操作数的求值结果为true,的情况下才会返回该对象;

//3.如果两个操作数都不是布尔类型,则返回第二个操作数;

//4.如果有一个操作数是null,则返回null;

//5.如果有一个操作数是NaN,则返回NaN;

//6.如果有一个操作数是undefined,则返回undefined 。

//情况1:如果value是null,符合规则4,返回null,即proceed值为null;

//情况2:如果value是undefine,符合规则6,返回undefined,即proceed值为undefined;

//情况3:如果value是NaN,符合规则5,返回NaN,即proceed值为NaN;

//情况4:如果value是数字类型,返回false;

//情况5:如果value是布尔类型,返回false;

//情况7:如果value是Array,Object,Function类型,符合规则2,但typeof value === 'string'是false,所以返回该对象,返回false。

//情况8:如果value是字符串类型,符合规则2,返回value。

//因此,这句只能判断value是不是字符串类型,并且返回这个字符串赋值给proceed。其他任何类型最后都返回false,或是可被隐式转换为false的类型。

            proceed = typeof value === "string" && value;

//由于上面只能判断是否是字符串类型,下面这句是判断value是否为Function类型。使用了jQuery的全局函数isFunction判断,就是$.isFunction()。

        if ( jQuery.isFunction( value ) ) {

//如果value是Function类型,进到这里了。

//返回jQuery对象,为了链式调用。

//这里的this是你选择器选择的jQuery对象。

            return this.each(function( j ) {

//开始迭代,这里的this可不是jQuery对象了,是当前迭代的DOM对象,所以用jQuery(this)包装了一下,成为一个jQuery对象,这样就可以使用jQuery方法。j表示每次遍历的索引。传递一个用来设置类名的有返回值的value函数。value这个函数每次call当前DOM为其执行对象,并传入当前DOM索引值和类名,value函数返回的值,由jQuery(this).addClass(返回值)再次调用addClass()方法。如果返回的是字符串,就执行另外一个if的分支。如果返回的还是function,则继续调用返回的这个function。

                jQuery( this ).addClass( value.call( this, j, this.className ) );

            });

        }

//之前得到proceed是字符串,这里判断下是否为空字符串,非空字符串隐式转换为true。空字符串隐式转换为false哦,那么if语句块就不再执行了,程序跳到最后的return this,返回这个jQuery对象就执行完了。

        if ( proceed ) {

//proceed非空字符串,开始执行if语句块。假定value是"show bd1"。

//rnotwhite是正则表达式(/\S+/g),意思是全局匹配非空白字符一次或更多次。

//(value || "")返回"show bd1",很简单。

//"show bd1".match((/\S+/g)) || []返回["show", "bd1"],match不知道什么作用的同学快去查查吧。

            classes = ( value || "" ).match( rnotwhite ) || [];

//现在classes是['show', 'bd1']一个你要添加类名的数组。

//下面开始遍历,为每一个DOM对象添加类。

            for ( ; i < len; i++ ) {

//this是jQuery对象,elem是当前DOM对象。

                elem = this[ i ];

/*

===操作符比&&操作符优先级高,先判断DOM节点类型是否是元素节点。

rclass是正则表达式/[\t\r\n\f]/g;

括号内的三目运算符表示,当前DOM节点是否已经有class,有的话,则将class中可能存在的制表符,换行符,回车符等替换为带有一个空格的字符串" ",并且给当前class的前后各加一个空格;如果当前DOM节点还没有class,则也是给一个带一个空格的字符串" "。最后变成

cur = elem.nodeType === 1 && "show bd1",这个很熟悉啊,没错,根据最开始的那6个规则求值。

假定elem的节点类型是1,那么 cur = true && " ",最后cur = "show bd1"。

如果elem的节点类型不是1,那么 cur = false && " ",最后cur = false。

*/

                cur = elem.nodeType === 1 && ( elem.className ?

                    ( " " + elem.className + " " ).replace( rclass, " " ):" ");

//现在cur = " show bd1 ",进入if语句块执行。

                if ( cur ) {

                    j = 0;

/*

classes为["show bd1"]

循环检查要添加的类是否已经存在与当前DOM元素已经有的类里。

如果没有,则添加这个类。

*/

                    while ( (clazz = classes[j++]) ) {

                        if ( cur.indexOf( " " + clazz + " " ) < 0 ) {

                            cur += clazz + " ";

                        }

                    }

/*

最后用$.trim()将类" show bd1 "两头的空格字符去掉。

检查当前DOM元素的类是否和拼接好的类重复。避免不必要的重复添加相同类的渲染。

*/

                    finalValue = jQuery.trim( cur );

                    if ( elem.className !== finalValue ) {

                        elem.className = finalValue;

                    }

                }

            }

        }

//返回这个jQuery对象,为了以后的链式调用。
        return this;

    }

});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
js获取php变量的实现代码
Aug 10 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
jquery实现数字输入框
Feb 22 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
浅谈Express异步进化史
Sep 09 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
小程序实现筛子抽奖
May 26 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 #Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 #Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 #Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 #Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 #Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 #Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 #Javascript
You might like
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
php错误级别的设置方法
2013/06/17 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
共享自己写一个框架DreamScript
2007/01/20 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
python常用知识梳理(必看篇)
2017/03/23 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
Python绘制动态水球图过程详解
2020/06/03 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
工作迟到检讨书
2014/02/21 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
浅谈Redis的几个过期策略
2021/05/27 Redis
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL