jQuery addClass() 方法

jQuery 中的 addClass() 方法用於向選定的元素新增一個或多個類名。

此方法不會刪除任何現有的類屬性；它只是將一個或多個類名附加到類屬性。

注意：如果要向元素新增多個類，則需要用空格分隔類名。

語法

以下是 jQuery 中 addClass() 方法的語法：

$(selector).addClass(classname,function(index,currentclass))

引數

此方法接受以下引數：

classname: 指定要新增到所選元素的類名。
function(index, currentclass): 這是一個可選的回撥函式，允許您單獨操作每個選定的元素。

示例 1

在下面的示例中，我們使用 addClass() 方法向所有 <p> 元素新增類名“highlight”：

<html>
<head>
  <style>
      .highlight {
        background-color: yellow;
      }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
      $(document).ready(function(){
          $("button").click(function(){
              $("p").addClass("highlight");
          })
      });
  </script>
</head>
<body>
    <p>This paragraph will be highlighted.</p>
    <p>This paragraph will also be highlighted.</p>
    <button>Click</button>
</body>
</html>

單擊按鈕後，類“highlight”將新增到所有段落元素。

示例 2

在此示例中，我們將多個類“highlight”和“bold”新增到選定的元素 (<p>)：

<html>
<head>
  <style>
      .highlight {
          background-color: yellow;
      }
      .bold {
          font-weight: bold;
      }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
      $(document).ready(function(){
        $("button").click(function(){
            $("p").addClass("highlight bold");
        })
      });
  </script>
</head>
<body>
  <p>This paragraph will be highlighted and bold.</p>
  <p>This paragraph will also be highlighted and bold.</p>
  <button>Click</button>
</body>
</html>

單擊按鈕後，類“highlight”和“bold”將新增到所有段落元素。

示例 3

在此示例中，我們使用帶回調函式的 addClass() 方法，根據每個元素的索引新增不同的類：

元素：

<html>
<head>
    <style>
        .even {
            background-color: lightblue;
        }
        .odd {
            background-color: lightgreen;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").addClass(function(index) {
                return index % 2 === 0 ? "even" : "odd";
            });
          })
        });
    </script>
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <button>Click</button>
</body>
</html>

單擊按鈕後，偶數索引的 <p> 元素將以“lightblue”背景色突出顯示。奇數索引的 <p> 元素將以“lightgreen”背景色突出顯示。

jquery_ref_html.htm

列印頁面