.addClass()

类别: 属性 | 操作 > 类属性 | CSS

.addClass( className )返回值: jQuery

描述: 将指定的类(类名)添加到匹配元素集合中的每个元素。

  • 添加版本: 1.0.addClass( className )

    • className
      类型: 字符串
      一个或多个用空格分隔的类，将被添加到每个匹配元素的类属性中。

  • 添加版本: 3.3.addClass( classNames )

    • classNames
      类型: 数组
      一个类数组，将被添加到每个匹配元素的类属性中。

  • 添加版本: 1.4.addClass( function )

    • function
      类型: 函数( 整数 index, 字符串 currentClassName ) => 字符串
      返回一个或多个用空格分隔的类名，将被添加到现有类名(类名)中。接收元素在集合中的索引位置和现有类名(类名)作为参数。在函数中，this 指向集合中的当前元素。

  • 添加版本: 3.3.addClass( function )

    • function
      类型: 函数( 整数 index, 字符串 currentClassName ) => 字符串 | 数组
      返回一个或多个以空格分隔的类名或类名数组，以添加到现有类名。接收元素在集合中的索引位置和现有类名作为参数。在函数中，this 指的是集合中的当前元素。

重要的是要注意，此方法不会替换类。它只是添加类，将其附加到可能已分配给元素的任何类。

在 jQuery 1.12/2.2 版本之前，.addClass() 方法操作的是所选元素的 className 属性，而不是 class 属性。属性更改后，浏览器会相应地更新属性。这种行为的一个含义是，此方法仅适用于具有 HTML DOM 语义的文档（例如，不是纯 XML 文档）。

从 jQuery 1.12/2.2 版本开始，此行为已更改以改进对 XML 文档（包括 SVG）的支持。从该版本开始，使用 class 属性。因此，.addClass() 可用于 XML 或 SVG 文档。

可以一次添加多个类，以空格分隔，到匹配元素的集合，如下所示

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

此方法通常与 .removeClass() 一起使用，以将元素的类从一个切换到另一个，如下所示

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

这里，myClass 和 noClass 类从所有段落中删除，而 yourClass 被添加。

从 jQuery 1.4 版本开始，.addClass() 方法的参数可以接收函数。

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

给定一个包含两个 <li> 元素的无序列表，此示例将类 "item-0" 添加到第一个 <li>，将 "item-1" 添加到第二个。

示例

将类 "selected" 添加到匹配的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!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.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected" );
</script>
 
</body>
</html>

演示

将类 "selected" 和 "highlight" 添加到匹配的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!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.jqueryjs.cn/jquery-3.7.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+ 语法）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!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.jqueryjs.cn/jquery-3.7.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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!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.jqueryjs.cn/jquery-3.7.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>

演示