📌  相关文章
📜  jQuery | removeClass() 与示例(1)

📅  最后修改于: 2023-12-03 15:02:14.021000             🧑  作者: Mango

jQuery | removeClass() 与示例

removeClass()是jQuery中的一个方法，用于从选定元素中删除一个或多个类。该方法的语法如下:

$(selector).removeClass(class1, class2, ...);

其中，selector代表的是要操作的HTML元素，而class1, class2等则代表要删除的类名。

方法说明

removeClass()方法可以用来移除一个或多个指定类名的元素。如果没有指定要删除的类名，那么该方法就会移除所有的类名。

下面是removeClass()方法的一些常规用法：

  • 移除一个类名：
$("p").removeClass("main");

这将从所有p元素中删除类名为"main"的类。

  • 移除多个类名：
$("h1").removeClass("big-title small-title");

这将从所有h1元素中删除"big-title"和"small-title"这两个类名。

  • 移除所有类名：
$("p").removeClass();

这将从所有p元素中删除它们当前具有的所有类名。

  • 条件式移除：
$("div").removeClass(function(index, className) {
  return className.match(/(^|\s)my-/g) || [];
});

这将从所有div元素中移除类名以"my-"开头的所有类名。

示例

下面是一个使用removeClass()方法的实例。在这个例子中，用户可以点击按钮，在两个段落元素中来回切换类"highlight"。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("highlight");
  });
});
</script>
<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>
</head>
<body>

<button>Toggle Class</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

点击按钮后，两个段落元素会交替高亮显示：

removeClass-demo

结论

removeClass()是一个非常有用的方法，它可以用来移除一个或多个指定的类名，也可以移除所有的类名。该方法可以与其他jQuery方法配合使用，使网页开发更加简单。