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

 更新时间:2015年02月20日 11:38:14   作者:novaline  
这篇文章主要介绍了jQuery源码解读之removeClass()方法,以注释形式较为详细的分析了removeClass()方法的实现技巧与使用注意事项,需要的朋友可以参考下

本文较为详细的分析了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程序设计有所帮助。

相关文章

  • 使用jquery为table动态添加行的实现代码

    使用jquery为table动态添加行的实现代码

    最近,有需要做一个动态的给table,添加行,用了点时间,算是做成了。已测试过,但如果发现有什么bug,可以留言,欢迎拍砖。大家一起进步。
    2011-03-03
  • jQuery实现适用于移动端的跑马灯抽奖特效示例

    jQuery实现适用于移动端的跑马灯抽奖特效示例

    这篇文章主要介绍了jQuery实现适用于移动端的跑马灯抽奖特效,结合实例形式分析了jQuery结合时间函数动态操作页面元素实现的跑马灯抽奖功能相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 解决jquery版本冲突的有效方法

    解决jquery版本冲突的有效方法

    这篇文章主要介绍了解决jquery版本冲突的有效方法,对于web设计的兼容性调试很有借鉴价值,需要的朋友可以参考下
    2014-09-09
  • jQuery预加载图片常用方法

    jQuery预加载图片常用方法

    这篇文章主要介绍了jQuery预加载图片常用方法,以两个简单实例分析了jQuery预加载图片的实现技巧,需要的朋友可以参考下
    2015-06-06
  • 图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    这篇文章主要介绍了图片放大镜jquery.jqzoom.js的使用另附放大镜图标,需要的朋友可以参考下
    2014-06-06
  • jQuery同步提交示例代码

    jQuery同步提交示例代码

    这篇文章主要介绍了jQuery同步提交实现方法,实例分析了jQuery基于ajax实现同步提交的具体技巧,以及jQuery版本更新的使用注意事项,需要的朋友可以参考下
    2015-12-12
  • 基于jQuery实现Ajax验证用户名是否存在实例

    基于jQuery实现Ajax验证用户名是否存在实例

    这篇文章主要为大家详细介绍了基于jQuery实现Ajax验证用户名是否存在实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 基于jQuery实现的幻灯图片切换

    基于jQuery实现的幻灯图片切换

    本篇文章分享了基于jQuery实现的幻灯图片切换效果的部分代码。感兴趣的朋友可以下载实例运行,下面就跟小编一起来看看吧
    2016-12-12
  • jQuery实现图片简单轮播功能示例

    jQuery实现图片简单轮播功能示例

    这篇文章主要介绍了jQuery实现图片简单轮播功能,结合实例形式分析了jQuery基于定时器与事件响应的页面元素属性动态操作实现图片轮播功能相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • jQuery实现Select左右复制移动内容

    jQuery实现Select左右复制移动内容

    这篇文章主要介绍了基于jQuery实现Select左右复制移动内容的实现方法,代码非常简单,具有参考借鉴价值,需要的朋友参考下
    2016-08-08

最新评论