Jquery 简明教程

jQuery - CSS Classes

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

jQuery provides three methods addClass(), removeClass() and toggleClass() to manipulate CSS classes of the elements.

我们已将 CSS 操作讨论分成两部分。本章将讨论操作 CSS 类，下章将讨论操作 CSS 属性。

We have divided our CSS manipulation discussion into two parts. This chapter will discuss about manipulating CSS classes and the next chapter will discuss about manipulating CSS properties.

jQuery - Adding CSS Classes

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

jQuery provides addClass() method to add a CSS class to the matched HTML element(s). Following is the syntax of the addClass() method:

$(selector).addClass(className);

此方法获取一个参数，它是一个或多个空格分隔的类，这些类将添加到每个匹配元素的 class 属性中。它一次可以向匹配的元素集添加多个类，采用空格分隔，如下所示：

This method takes a parameter which is one or more space-separated classes to be added to the class attribute of each matched element. More than one class may be added at a time, separated by a space, to the set of matched elements, like so:

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

Synopsis

考虑带有已定义 CSS 类的以下 HTML 内容：

Consider the following HTML content with CSS classes defined:

<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() 方法：

Now if we use the addClass() method as follows:

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

将会产生以下结果：

It will produce following result:

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

请注意，addClass() 方法不会替换现有的类，而是简单地添加该类，将它附加到已分配给元素的任何类之后。

Please note that addClass() method does not replace an existing class, rather it simply adds the class, appending it to any which may already be assigned to the elements.

Example

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

Let’s try the following example and verify the result:

<!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 - Removing CSS Classes

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

jQuery provides removeClass() method to remove an existing CSS class from the matched HTML element(s). Following is the syntax of the removeClass() method:

$(selector).removeClass(className);

此方法获取一个参数，它是一个或多个空格分隔的类，这些类将从每个匹配元素的 class 属性中移除。它一次可以从匹配的元素集中移除多个类，采用空格分隔，如下所示：

This method takes a parameter which is one or more space-separated classes to be removed from the class attribute of each matched element. More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:

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

Synopsis

考虑带有已定义 CSS 类的以下 HTML 内容：

Consider the following HTML content with CSS classes defined:

<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() 方法：

Now if we use the removeClass() method as follows:

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

将会产生以下结果：

It will produce following result:

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

Example

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

Let’s try the following example and verify the result:

<!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 - Toggle CSS Classes

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

jQuery provides toggleClass() method to toggle an CSS class on the matched HTML element(s). Following is the syntax of the toggleClass() method:

$(selector).toggleClass(className);

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

This method takes a parameter which is one or more space-separated classes to be toggled. If an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.

Example

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

Let’s try the following example and verify the result:

<!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 Reference

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

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.