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

📅  最后修改于: 2023-12-03 14:43:14.837000             🧑  作者: Mango

jQuery | addClass() 与示例

简介

addClass() 是 jQuery 中的一个方法，可以用来给指定的元素添加一个或多个类。一般用于动态地改变元素的样式，移除已有的 CSS 类或添加新的 CSS 类。

语法
$(selector).addClass(classname,function(index,currentclass){ })
  • selector：表示需要添加类的元素，支持所有 CSS 选择器。
  • classname：表示需要添加到元素中的一个或多个 CSS 类。
  • function(index,currentclass){ }（可选）：表示一个函数，在每个匹配的元素上执行（包括当前匹配的元素），index 表示当前元素在集合中的索引位置，而 currentclass 表示当前元素的 CSS 类名。
用法
  • 添加一个类：
$("p").addClass("highlight");

这段代码会将所有 <p> 标签的类改为 "highlight"。

  • 添加多个类：
$("p").addClass("highlight selected");

这段代码会将所有 <p> 标签的类改为 "highlight" 和 "selected"。

  • 动态添加类：
$("p").addClass(function(index,currentclass){
  var addedClass;
  if(currentclass === "highlight"){
    addedClass = "featured";
  }
  return addedClass;
});

这段代码会将所有 <p> 标签的类改为 "featured"。

示例
<!DOCTYPE html>
<html>
<head>
  <title>addClass() 示例</title>
  <style>
    .highlight {
      background-color: yellow;
    }
    .selected {
      font-weight: bold;
    }
    .featured {
      font-style: italic;
      color: red;
      text-decoration: underline;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // 给 "Click me" 按钮添加类 "selected"
      $("button").click(function(){
        $(this).addClass("selected");
      });
      // 给所有 <p> 标签添加类 "highlight"
      $("p").addClass("highlight");
      // 给表格中的第一列添加类 "featured"
      $("td:first-child").addClass("featured");
      // 动态添加类 "featured"
      $("p").addClass(function(index,currentclass){
        var addedClass;
        if(currentclass === "highlight"){
          addedClass = "featured";
        }
        return addedClass;
      });
    });
  </script>
</head>
<body>
  <h1>addClass() 示例</h1>
  <button>Click me</button>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
  <table>
    <tr>
      <td>First column</td>
      <td>Second column</td>
    </tr>
    <tr>
      <td>First column</td>
      <td>Second column</td>
    </tr>
  </table>
</body>
</html>

这个示例包括添加一个类、添加多个类、动态添加类三个示例，展示了如何使用 addClass() 方法来动态改变元素的类，并改变元素的样式。