.removeClass()学习笔记

介绍

.removeClass() 方法是 jQuery 中用于移除元素上指定 CSS 类的方法。该函数可以通过一行代码来移除一个或多个元素的 CSS 类。这个方法非常实用，因为它可以让你的 JavaScript 代码操作现有的 HTML 和 CSS。

语法

jsCopy Code
$(selector).removeClass(classname,function(index,currentclass))

selector：必需，jquery 对象，清除类名的元素。
classname：必需，被删除的一个或多个CSS类名，多个用空格分隔。
function(index, currentclass)：可选，是一个函数，对每个匹配的元素都要运行，函数的返回值将作为新的class。

实例

示例1

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <title>jQuery .removeClass() 方法示例</title>
  <style>
    .red {color: red;}
    .green {color: green;}
    .blue {color: blue;}
  </style>
  <script>
    $(document).ready(function(){
      $("#removeBtn").click(function(){
        $("p").removeClass("red green blue");
      });
    });
  </script>
</head>
<body>
  <h2>jQuery .removeClass() 方法示例</h2>
  <p class="red green blue">这是一段带有多个 class 的文本。</p>
  <button id="removeBtn">移除所有 class</button>
</body>
</html>

在这个示例中，我们创建了一个带有多个 class 的 p 元素，并且用 jQuery 的 .removeClass() 方法来移除它身上的所有 class。当我们点击“移除所有 class”按钮时，p 元素的 class 就被清空了。

示例2

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <title>jQuery .removeClass() 方法示例</title>
  <style>
    .red {color: red;}
    .green {color: green;}
    .blue {color: blue;}
  </style>
  <script>
    $(document).ready(function(){
      $("#removeBtn").click(function(){
        $("p").removeClass("green");
      });
    });
  </script>
</head>
<body>
  <h2>jQuery .removeClass() 方法示例</h2>
  <p class="red green blue">这是一段带有多个 class 的文本。</p>
  <button id="removeBtn">移除 green class</button>
</body>
</html>

在这个示例中，我们创建了一个带有多个 class 的 p 元素，并且用 jQuery 的 .removeClass() 方法来移除它身上的 green class。当我们点击“移除 green class”按钮时，p 元素上的 green class 被移除了。