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 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
JavaScript之自定义类型
May 04 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
解决vue项目运行npm run serve报错的问题
Oct 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
php获取数组中重复数据的两种方法
2013/06/28 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
JavaScript高级程序设计
2006/12/29 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
javascript中的this详解
2014/12/08 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
在python中安装basemap的教程
2018/09/20 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python多线程下信号处理程序示例
2019/05/31 Python
python命令 -u参数用法解析
2019/10/24 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Django REST 异常处理详解
2020/07/15 Python
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
高二化学教学反思
2014/01/30 职场文书
银行内勤岗位职责
2014/04/09 职场文书
医院标语大全
2014/06/23 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年政协工作总结
2014/12/09 职场文书
司机个人年终总结
2015/03/03 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
高中生物教学反思
2016/02/20 职场文书