首页
话题
消息
手册
我的
返回介绍

.addClass()

发布于 2017-07-26 字数2638 浏览 863 评论 0

所属分类:DOM 属性 | DOM 操作 > Class 属性 | CSS

.addClass( className )

为每个匹配的元素添加指定的样式类名,返回一个 jQuery 对象。

  • .addClass( className ) 1.0+
    • className
      类型: String
      为每个匹配元素所要增加的一个或多个样式名。
  • .addClass( function(index, currentClass) ) 1.4+
    • function(index, currentClass)
      类型: Function()
      这个函数返回一个或更多用空格隔开的要增加的样式名。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合中的当前元素。

值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上。

对所有匹配的元素可以一次添加多个用空格隔开的样式类名, 像这样:

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

这个方法通常和 .removeClass() 一起使用,用来切换元素的样式, 像这样:

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

这里 myClassnoClass 样式名在所有段落上被移除, 然后 yourClass 被添加。

自 jQuery 1.4 开始, .addClass() 方法允许我们通过传递一个用来设置样式类名的函数。

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

给定一个有2个 <li> 元素的无序列表,这个例子将在最后一个 <li> 元素上加上 item-1 样式。

例子

在匹配的元素上加上’selected’样式。

<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$("p").last().addClass("selected");
</script>

在匹配的元素上加上 ‘selected’ 和 ‘highlight’ 样式。

<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$("p:last").addClass("selected highlight");
</script>

通过 .addClass() 回调函数,先判断是否包含 red 类,如果包含就更改里面的内容,并添加 green 类。

<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>

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!