jquery 手册
Ajax
属性(Attributes)
回调对象(Callbacks ..
核心(Core)
CSS
数据(Data)
延迟对象(Deferred o ..
尺寸(Dimensions)
效果(Effects)
事件(Events)
表单(Forms)
文档操作(Manipulati ..
杂项(Miscellaneou ..
位置(Offset)
插件编写(Plugin Aut ..
属性(Properties)
选择器(Selectors)
遍历(Traversing)
工具(Utilities)

Returns: jQueryjQuery .addClass( Function function(index, currentClass) )

描述:为匹配的元素集中每一个元素添加指定的样式类。
  • version added: 1.0
  • .addClass( String className )
  • className 为匹配的元素添加一个或多个样式类的名称。
  • version added: 1.4
  • .addClass( Function function(index, currentClass) )
  • function(index, currentClass) 函数返回一个或多个空格分隔的类名。第一个参数代表当前元素的索引位置,第二个参数代表当前元素的类名。在函数内, this 指向当前元素。

需要注意的是该方法不会替换样式类,而只是简单地添加样式类,将类追加给任何元素包括已拥有该样式类的元素。

多个样式类可以同时添加给匹配的元素,类名之间空格分隔,就像下面这样:

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

这个方法通常同.removeClass()方法一起使用来达到替换元素样式类的目的,像这样:

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

上例中 ,myClassnoClass 类被从所有的p元素中移除 , 而 添加了yourClass

跟 jQuery 1.4一样, .addClass()方法的参数可以使一个函数。

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

假设ul中共有5个<li>元素,上例展示的是为最后一个<li>元素添加"item-4"类。

Examples:

Example:

为匹配的元素添加"selected" 类。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }</style>
</head>
<body>
  
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
  
  <script>$("p:last").addClass("selected");</script>
</body>
</html>

Demo:

Example:

为匹配的元素添加"selected" 和 "highlight" 类。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }</style>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
  <script>$("p:last").addClass("selected highlight");</script>
</body>
</html>

Demo:

Example:

传入一个函数给 .addClass() ,实现为有"red"类的div添加 "green" 类。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>div { background: white; }
  .red { background: red; }
  .red.green { background: green; }</style>
</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>

Demo: