jQuery源码解读之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程序设计有所帮助。

(0)

相关推荐

  • jquery 如何动态添加、删除class样式方法介绍

    取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 复制代码 代码如下: var p_class = $("p").attr("class"); //获取p元素的class [html] 使用attr()方法来设置p元素的class,JQuery代码如下: [code] 1 $("p").attr("'class", "

  • Jquery显示、隐藏元素以及添加删除样式

    复制代码 代码如下: <script type="text/javascript"> $(function () { //当input获取焦点后将其兄弟标签label隐藏 $("input").focus(function () { $(this).siblings("label").hide(); }); }); $(function () { //input元素失去焦点 $("input").blur(func

  • jQuery使用removeClass方法删除元素指定Class的方法

    本文实例讲述了jQuery使用removeClass方法删除元素指定Class的方法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function

  • jQuery中removeClass()方法用法实例

    本文实例讲述了jQuery中removeClass()方法用法.分享给大家供大家参考.具体分析如下: 此方法从匹配元素删除一个或多个类. 根据方法参数的不同,有以下几种语法结构. 语法结构一: 方法没有参数.把匹配元素所有的类都移除. 复制代码 代码如下: $(selector).removeClass() 实例代码: 代码可以将div的所有css类删除. 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-eq

  • 使用JS实现jQuery的addClass, removeClass, hasClass函数功能

    废话不多说,直接上代码 复制代码 代码如下: function addClass(obj, cls){     var obj_class = obj.className,//获取 class 内容.     blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.     added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.     obj

  • jQuery使用toggleClass方法动态添加删除Class样式的方法

    本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,运行下面的代码点击按钮可以看到文本段落字体在蓝色和黑色间切换 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"&

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

    本文较为详细的分析了jQuery源码解读之removeClass()方法.分享给大家供大家参考.具体分析如下: removeClass()方法和addClass()差别不大.这就来看看: 复制代码 代码如下: jQuery.fn.extend({     removeClass: function( value ) {         var classes, elem, cur, clazz, j, finalValue,             i = 0,             len

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

    本文较为详细的分析了jQuery源码解读之addClass()方法.分享给大家供大家参考.具体分析如下: 给jQuery原型对象扩展addClass功能,jQuery.fn就是jQuery.prototype 复制代码 代码如下: jQuery.fn.extend({ /* 可以看出这是一个函数名叫addClass的插件方法. */     addClass: function( value ) {         var classes, elem, cur, clazz, j, finalV

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

    本文较为详细的分析了jQuery源码解读之hasClass()方法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: jQuery.fn.extend({     hasClass: function( selector ) { //将要检查的类名selector赋值给className, l为选择器选择的当前要检查的jQuery对象数组的长度.         var className = " " + selector + " ",          

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

    本文较为详细的分析了jQuery源码解读之removeAttr()方法.分享给大家供大家参考.具体分析如下: 扩展jQuery原型对象的方法: 复制代码 代码如下: jQuery.fn.extend({ //name,传入要DOM元素要移除的属性名.     removeAttr: function( name ) { //使用jQuery.fn对象,即jQuery原型对象的each方法遍历当前选择器选择的jQuery对象数组,并返回该jQuery对象以便链式调用.         return

  • jQuery源码解读之extend()与工具方法、实例方法详解

    本文实例讲述了jQuery源码解读之extend()与工具方法.实例方法.分享给大家供大家参考,具体如下: 使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul').find('li'); 有些函数是这样使用的: $('li').each(callback); $.each(lis,callback); 这里涉及到两个概念:工具方法与实例方法.通常我们

  • jQuery 1.5 源码解读 面向中高阶JSER

    几乎很难从jQuery分离其中的一部分功能.所以在这里我分享下应该读 jQuery 源码的一些成果,以及读源码的方法.啃代码是必须的. 1. 代码折叠是必须的. 因此必须在支持语法折叠的编辑器里打开源码. 根据折叠层次,我们可以很快知道: 所有 jQuery 的代码都在一个函数中: (function( window, undefined ) {// jQuery 代码 })(window); 这样可以避免内部对象污染全局.传入的参数1是 window, 参数2是 undefined , 加快j

  • jQuery源码分析-03构造jQuery对象-工具函数

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪个模块感兴趣的,建议优先分析的,可以告诉我,一起学习. 3.4 其他静态工具函数

  • jQuery源码分析之jQuery.fn.each与jQuery.each用法

    本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法.分享给大家供大家参考.具体分析如下: 先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 复制代码 代码如下: $('div').each(function(index, elem){       $(this).addClass('red'); } }); 上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的 复制代码 代码如下: j

  • jQuery源码分析-01总体架构分析

    1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 复制代码 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名函数.什么东东呢?在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2. 为什么要创建这样一个"自调用匿名函数"呢? 通过定义一个匿名函数,创建了一个"

  • vue3 源码解读之 time slicing的使用方法

    今天给大家带来一篇源码解析的文章,emm 是关于 vue3 的,vue3 源码放出后,已经有很多文章来分析它的源码,我觉得很快又要烂大街了,哈哈 不过今天我要解析的部分是已经被废除的 time slicing 部分,这部分源码曾经出现在 vue conf 2018 的视频中,但是源码已经被移除掉了,之后可能也不会有人关注,所以应该不会烂大街 打包 阅读源码之前,需要先进行打包,打包出一份干净可调试的文件很重要 vue3 使用的 rollup 进行打包,我们需要先对它进行改造 import cle

随机推荐