jQuery 属性操作 - addClass() 和 removeClass() 方法

实例

向第一个 p 元素添加一个类:

$("button").click(function(){
  $("p:first").addClass("intro");
});

定义和用法

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。

提示:如需添加多个类,请使用空格分隔类名。

语法

$(selector).addClass(class)
参数描述
class 必需。规定一个或多个 class 名称。

 

 

使用函数来添加类

使用函数向被选元素添加类。

语法

$(selector).addClass(function(index,oldclass))

$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("intro note");
  });
});

removeClass() 方法 实例

移除所有 <p> 的 "intro" 类:

$("button").click(function(){
  $("p:first").removeClass("intro");
});
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
      $('ul li').removeClass(function() {
      return 'listitem_' + $(this).index();
    });
  });
});
</script>
<style type="text/css">
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li class="listitem_0">Apple</li>
<li class="listitem_1">IBM</li>
<li class="listitem_2">Microsoft</li>
<li class="listitem_3">Google</li>
</ul>
<button>删除列表项中的类</button>
</body>
</html>  
posted @ 2015-08-14 01:00  你好柴九  阅读(1742)  评论(0编辑  收藏  举报