jQuery addClass()方法

下面我将详细讲解一下jQuery的addClass()方法，让你完全理解该方法的用法和作用：

一、什么是addClass()方法

在jQuery中，addClass()方法用来为HTML元素添加一个或多个类名。也就是说，它可以为一个元素添加CSS的类选择器，以实现CSS样式的变化。

二、addClass()方法的使用语法

在jQuery中，addClass()方法的基本语法如下：

$(selector).addClass(className);

上述语法中，selector指定需要添加类名的HTML元素的选择器，className是要添加的一个或多个类名，多个类名之间用空格隔开。

三、addClass()方法的示例

下面我们来看看addClass()方法的具体示例。

示例1：为单个元素添加类名

下面的示例演示了如何为一个HTML元素添加一个CSS类，即改变元素的CSS样式：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>
    .myClass {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>点击下面的按钮添加CSS类名</p>
  <button onclick="addMyClass()">添加CSS类名</button>
  <br><br>
  <div id="myDiv">这是一个DIV元素</div>
  <script>
    function addMyClass() {
      $("#myDiv").addClass("myClass");
    }
  </script>
</body>
</html>

该示例展示了如何为一个DIV元素添加一个CSS类，样式为改变背景颜色为黄色。

示例2：为多个元素添加类名

下面的示例演示了如何为多个HTML元素添加CSS类，即改变元素的CSS样式：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>
    .myClass {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>点击下面的按钮添加CSS类名</p>
  <button onclick="addMyClass()">添加CSS类名</button>
  <br><br>
  <div class="myClass">这是一个DIV元素</div>
  <p class="myClass">这是一个P元素</p>
  <script>
    function addMyClass() {
      $("div, p").addClass("myClass");
    }
  </script>
</body>
</html>

该示例演示了如何为多个元素添加CSS类，包括一个DIV元素和一个P元素，样式为改变字体颜色为红色和加粗。

四、总结

通过以上的讲解和示例，我们可以知道：

addClass()方法可以为一个或多个HTML元素添加CSS类名，以改变其CSS样式。
在使用addClass()方法时，可以为单个元素或者多个元素添加CSS类名，多个元素之间使用逗号隔开。
addClass()方法的语法非常简单，非常适合初学者使用，属于jQuery入门级别的知识。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery addClass()方法 - Python技术站