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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
JS中==、===你分清楚了吗
Mar 04 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
在项目中寻找代码的坏命名
2012/07/14 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
javascript 实现map集合
2015/04/03 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详解Python3中yield生成器的用法
2015/08/20 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python 实现登录网页的操作方法
2018/05/11 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
基于python实现百度翻译功能
2019/05/09 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
python 的topk算法实例
2020/04/02 Python
python 负数取模运算实例
2020/06/03 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
.NET现在共支持多少种语言
2014/02/26 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
大学生求职自我评价
2014/01/16 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
银行先进个人总结
2015/02/15 职场文书