當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

JQuery .addClass()用法及代碼示例

用法 
.addClass( className ) => jQuery

說明：將指定的類添加到匹配元素集中的每個元素。

  • 添加的版本：1.0.addClass( className )

    • className
      類型：String
      將一個或多個空格分隔的類添加到每個匹配元素的類屬性中。

  • 添加的版本：3.3.addClass( classNames )

    • classNames
      類型：Array
      要添加到每個匹配元素的類屬性的類數組。

  • 添加的版本：1.4.addClass( function )

    • function
      類型：Function(Integer 索引，String currentClassName)=> String
      返回一個或多個以空格分隔的類名的函數，該類名將添加到現有的類名中。接收集合中元素的索引位置和現有類名作為參數。在函數中，this 指的是集合中的當前元素。

  • 添加的版本：3.3.addClass( function )

    • function
      類型：函數(整數 index ， String 當前類名) => String |大批
      返回一個或多個以空格分隔的類名或要添加到現有類名的類名數組的函數。接收集合中元素的索引位置和現有類名作為參數。在函數中，this 指的是集合中的當前元素。

請務必注意，此方法不會替換類。它隻是添加類，將其附加到任何可能已經分配給元素的類。

在 jQuery 版本 1.12/2.2 之前，.addClass() 方法操縱所選元素的 className property，而不是 class attribute 。一旦屬性被更改，瀏覽器就會相應地更新屬性。此行為的一個含義是此方法僅適用於具有 HTML DOM 語義的文檔(例如，不是純 XML 文檔)。

從 jQuery 1.12/2.2 開始，此行為已更改以改進對 XML 文檔(包括 SVG)的支持。從此版本開始，改為使用class attribute。因此，.addClass() 可用於 XML 或 SVG 文檔。

一次可以將多個類添加到匹配元素的集合中，用空格分隔，如下所示：

$( "p" ).addClass( "myClass yourClass" );

此方法通常與.removeClass() 一起使用，以將元素的類從一個切換到另一個，如下所示：

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

在這裏，myClass 和 noClass 類已從所有段落中刪除，而 yourClass 已添加。

從 jQuery 1.4 開始，.addClass() 方法的參數可以接收一個函數。

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

給定一個包含兩個 <li> 元素的無序列表，此示例將類 "item-0" 添加到第一個 <li> 和 "item-1" 到第二個。

例子：

將類"selected" 添加到匹配的元素中。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected" );
</script>
 
</body>
</html>

演示：

將類"selected" 和"highlight" 添加到匹配的元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: red;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected highlight" );
</script>
 
</body>
</html>

演示：

將類 "selected" 和 "highlight" 添加到匹配的元素(3.3+ 語法)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: red;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( [ "selected", "highlight" ] );
</script>
 
</body>
</html>

演示：

將函數傳遞給.addClass() 以將"green" 類添加到已經具有"red" 類的 div。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  div {
    background: white;
  }
  .red {
    background: red;
  }
  .red.green {
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>
 
<script>
$( "div" ).addClass(function( index, currentClass ) {
  var addedClass;
 
  if ( currentClass === "red" ) {
    addedClass = "green";
    $( "p" ).text( "There is one green div" );
  }
 
  return addedClass;
});
</script>
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .addClass()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。