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


Posted in Javascript onFebruary 20, 2015

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

removeClass()方法和addClass()差别不大。这就来看看:

jQuery.fn.extend({

    removeClass: function( value ) {

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

            i = 0,

            len = this.length,

            proceed = arguments.length === 0 || typeof value === "string" && value;

        if ( jQuery.isFunction( value ) ) {

            return this.each(function( j ) {

//这里就是根据你传递的移除类名的函数返回的类名,再次调用removeClass自身了。

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

            });

        }

        if ( proceed ) {

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

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

                elem = this[ i ];

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

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

                    ""

                );

                if ( cur ) {

                    j = 0;

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

//区别在下面的while循环,当检索到当前DOM元素包含你要移除的类名,会用replace替换成" "

                        while ( cur.indexOf( " " + clazz + " " ) >= 0 ) {

                            cur = cur.replace( " " + clazz + " ", " " );

                        }

                    }

//下面也是关键区别之一,判断你是否传递了要移除的类名value。如果没有传递,则finalValue="",如果此时DOM元素有类名的话,也就是条件为true,移除DOM元素的所有类名;

//如果传递了,则移除匹配的类名,移除后,没有移除的类名拼接成了cur,去掉左右两端的空格字符串,将DOM元素的类名设置成cur。

                    finalValue = value ? jQuery.trim( cur ) : "";

                    if ( elem.className !== finalValue ) {

                        elem.className = finalValue;

                    }

                }

            }

        }

        return this;

    }

});

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

Javascript 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
javascript 中关于array的常用方法详解
May 05 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 #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
You might like
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python之wxPython应用实例
2014/09/28 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python jieba库用法及实例解析
2019/11/04 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
法学专业本科生自荐信范文
2013/12/17 职场文书
新农村建设典型材料
2014/05/31 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
金融管理专业求职信
2014/07/10 职场文书