當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。