当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .removeClass()用法及代码示例


从匹配元素集中的每个元素中移除单个类、多个类或所有类。

用法一

.removeClass( className ) => jQuery

说明：从匹配元素集中的每个元素中删除单个类或多个类。

  • 添加的版本：1.0.removeClass( className )

    • className
      类型：String
      从每个匹配元素的类属性中删除一个或多个空格分隔的类。

  • 添加的版本：3.3.removeClass( classNames )

    • classNames
      类型：Array
      要从每个匹配元素的类属性中删除的类数组。

  • 添加的版本：1.4.removeClass( function )

    • function
      类型：Function(Integer 索引，String 类名)=> String
      返回一个或多个要删除的以空格分隔的类名的函数。接收集合中元素的索引位置和旧类值作为参数。

  • 添加的版本：3.3.removeClass( function )

    • function
      类型：函数(整数 index ， String 类名) => String |大批
      返回一个或多个以空格分隔的类名或要删除的类名数组的函数。接收集合中元素的索引位置和旧类值作为参数。

在 jQuery 版本 1.12/2.2 之前，.removeClass() 方法操纵所选元素的 className property，而不是 class attribute 。一旦属性被更改，浏览器就会相应地更新属性。这意味着当 class 属性被更新并删除最后一个类名时，浏览器可能已将该属性的值设置为空字符串，而不是完全删除该属性。此行为的一个含义是此方法仅适用于具有 HTML DOM 语义的文档(例如，不是纯 XML 文档)。

从 jQuery 1.12/2.2 开始，此行为已更改以改进对 XML 文档(包括 SVG)的支持。从此版本开始，改为使用class attribute。因此，.removeClass() 可用于 XML 或 SVG 文档。

一次可以从匹配的元素集中删除一个以上的类，用空格分隔，如下所示：

  $( "p" ).removeClass( "myClass yourClass" )

此方法通常与.addClass() 一起使用，以将元素的类从一个切换到另一个，如下所示：

  $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

在这里，myClass 和 noClass 类已从所有段落中删除，而 yourClass 已添加。

要将所有现有类替换为另一个类，我们可以改用.attr( "class", "newClass" )。

从 jQuery 1.4 开始，.removeClass() 方法允许我们通过传入一个函数来指示要删除的类。

  $( "li" ).last().removeClass(function() {
    return $( this ).prev().attr( "class" );
  });

此示例从最后一个 <li> 中删除倒数第二个 <li> 的类名。

例子：

从匹配的元素中删除类'blue'。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).even().removeClass( "blue" );
  </script>
 
</body>
</html>

演示：

从匹配的元素中删除类'blue' 和'under'。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).odd().removeClass( "blue under" );
  </script>
 
</body>
</html>

演示：

从匹配的元素中删除类 'blue' 和 'under'(3.3+ 语法)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).odd().removeClass( [ "blue", "under" ] );
  </script>
 
</body>
</html>

演示：

用法二

.removeClass() => jQuery

说明：从每个匹配的元素中删除所有类。

  • 添加的版本：1.0.removeClass()

    • 此方法不接受任何参数。

在 jQuery 版本 1.12/2.2 之前，.removeClass() 方法操纵所选元素的 className property，而不是 class attribute 。一旦属性被更改，浏览器就会相应地更新属性。这意味着当 class 属性被更新并删除最后一个类名时，浏览器可能已将该属性的值设置为空字符串，而不是完全删除该属性。此行为的一个含义是此方法仅适用于具有 HTML DOM 语义的文档(例如，不是纯 XML 文档)。

从 jQuery 1.12/2.2 开始，此行为已更改以改进对 XML 文档(包括 SVG)的支持。从此版本开始，改为使用class attribute。因此，.removeClass() 可用于 XML 或 SVG 文档。

例子：

从匹配的元素中删除所有类。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).eq( 1 ).removeClass();
  </script>
 
</body>
</html>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .removeClass()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。