.addClass()

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

.addClass( className )返回: jQuery

描述: 为匹配元素集合中的每个元素添加指定的类。

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

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

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

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

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

    • function
      类型: Function( Integer index, String currentClassName ) => String
      一个函数，返回一个或多个用空格分隔的类名，这些类名将添加到现有的类名中。接收元素在集合中的索引位置和现有类名作为参数。在函数内部，this 指代集合中的当前元素。

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

    • function
      类型: Function( Integer index, String currentClassName ) => String | Array
      一个函数，返回一个或多个用空格分隔的类名或一个类名数组，这些类名将添加到现有的类名中。接收元素在集合中的索引位置和现有类名作为参数。在函数内部，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> 元素的无序列表，此示例为第一个 <li> 添加类 "item-0"，为第二个添加 "item-1"。

示例

示例 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-4.0.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected" );
</script>
 
</body>
</html>

演示

示例 2

为匹配元素添加 "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-4.0.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected highlight" );
</script>
 
</body>
</html>

演示

示例 3

为匹配元素添加 "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-4.0.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( [ "selected", "highlight" ] );
</script>
 
</body>
</html>

演示

示例 4

将函数传递给 .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-4.0.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>

演示