当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。