• jQuery 视频教程

jQuery - CSS 类

jQuery 提供了三种方法addClass()、removeClass()和toggleClass()来操作元素的 CSS 类。

我们将 CSS 操作讨论分为两部分。本章将讨论如何操作 CSS 类，下一章将讨论如何操作 CSS 属性。

jQuery - 添加 CSS 类

jQuery 提供addClass()方法来将 CSS 类添加到匹配的 HTML 元素。以下是addClass()方法的语法：

$(selector).addClass(className);

此方法采用一个参数，该参数是要添加到每个匹配元素的类属性中的一个或多个空格分隔的类。一次可以将多个类添加到一组匹配的元素中，并用空格分隔，如下所示：

$(selector).addClass("Class1 Class2");

概要

考虑以下定义了 CSS 类的 HTML 内容：

<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
<body>
<div class="container">
   <h2>jQuery addClass() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>
</body>

现在，如果我们使用addClass()方法，如下所示：

$( ".hello" ).addClass("big" );
$( ".goodbye" ).addClass("small" );

它将产生以下结果：

<body>
<div class="container">
   <h2>jQuery addClass() Method</h2>
   <div class="hello big">Hello</div>
   <div class="goodbye small">Goodbye</div>
</div>
</body>

请注意，addClass() 方法不会替换现有的类，而只是添加该类，将其附加到任何可能已分配给元素的类。

例子

让我们尝试以下示例并验证结果： 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).addClass("big" );
         $( ".goodbye" ).addClass("small" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
   <div class="container">
      <h2>jQuery addClass() Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>
   
   <button>Add Class</button>
</body>
</html>

jQuery - 删除 CSS 类

jQuery 提供了removeClass()方法来从匹配的HTML 元素中删除现有的CSS 类。以下是removeClass()方法的语法：

$(selector).removeClass(className);

此方法采用一个参数，该参数是要从每个匹配元素的类属性中删除的一个或多个空格分隔的类。一次可以从匹配元素集中删除多个类，并用空格分隔，如下所示：

$(selector).removeClass("Class1 Class2");

概要

考虑以下定义了 CSS 类的 HTML 内容：

<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
<body>
<div class="container">
   <h2>jQuery removeClass() Method</h2>
   <div class="hello big">Hello</div>
   <div class="goodbye small">Goodbye</div>
</div>
</body>

现在，如果我们使用removeClass()方法，如下所示：

$( ".hello" ).removeClass("big" );
$( ".goodbye" ).removeClass("small" );

它将产生以下结果：

<body>
<div class="container">
   <h2>jQuery removeClass() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>
</body>

例子

让我们尝试以下示例并验证结果： 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).removeClass("big" );
         $( ".goodbye" ).removeClass("small" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
   <div class="container">
      <h2>jQuery removeClass() Method</h2>
      <div class="hello big">Hello</div>
      <div class="goodbye small">Goodbye</div>
   </div>
   <br>
   
   <button>Remove Class</button>
</body>
</html>

jQuery - 切换 CSS 类

jQuery 提供了toggleClass()方法来在匹配的HTML 元素上切换CSS 类。以下是toggleClass()方法的语法：

$(selector).toggleClass(className);

此方法采用一个参数，该参数是一个或多个要切换的以空格分隔的类。如果匹配的元素集中的元素已经具有该类，则将其删除；如果某个元素没有该类，则会添加它。

例子

让我们尝试以下示例并验证结果： 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).toggleClass("big" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
</style>
</head>
<body>
   <div class="container">
      <h2>jQuery toggleClass() Method</h2>
      <div class="hello big">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>
   
   <button>Toggle Class</button>
</body>
</html>

jQuery HTML/CSS 参考

您可以在以下页面获取操作 CSS 和 HTML 内容的所有 jQuery 方法的完整参考：jQuery HTML/CSS 参考。