addClass(class) — 为每个匹配的元素添加指定的类名。

参数 : class — 一个或多个要添加到元素中的CSS类名，请用空格分开(String)

示例 一 :

为匹配的元素加上 'selected' 类

HTML 代码:

<p>Hello</p>

jQuery 代码:

$("p").addClass("selected");

结果:

[ <p class="selected">Hello</p> ]

示例 二 :

为匹配的元素加上 selected highlight 类

HTML 代码:

<p>Hello</p>

jQuery 代码:

$("p").addClass("selected highlight");

结果:

[ <p class="selected highlight">Hello</p> ]

addClass(function(index, class)) — 为每个匹配的元素添加指定的类名。

参数 : function(index, class) — 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。(Function)

示例 : 给li加上不同的class

HTML 代码:

<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>

jQuery 代码:

$('ul li:last').addClass(function() {

  return 'item-' + $(this).index();

});

removeClass([class]) — 从所有匹配的元素中删除全部或者指定的类。

参数 : class (可选) — 一个或多个要删除的CSS类名，请用空格分开(String)

示例 : 

从匹配的元素中删除 'selected' 类

HTML 代码:

<p class="selected first">Hello</p>

jQuery 代码:

$("p").removeClass("selected");

结果:

[ <p class="first">Hello</p> ]

删除匹配元素的所有类

HTML 代码:

<p class="selected first">Hello</p>

jQuery 代码:

$("p").removeClass();

结果:

[ <p>Hello</p> ]

removeClass(function(index, class)) — 从所有匹配的元素中删除全部或者指定的类。

参数 : function(index, class) — 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。(Function)

示例:

删除最后一个元素上与前面重复的class

jQuery 代码:

$('li:last').removeClass(function() {

    return $(this).prev().attr('class');

});

toggleClass(class) — 如果存在（不存在）就删除（添加）一个类。

参数 : class — CSS类名(String)

示例 :

为匹配的元素切换 'selected' 类

HTML 代码:

<p>Hello</p><p class="selected">Hello Again</p>

jQuery 代码:

$("p").toggleClass("selected");

结果:

[ <p class="selected">Hello</p>, <p>Hello Again</p> ]

toggleClass(class, switch) — 如果开关switch参数为true则加上对应的class，否则就删除。

参数 :

class — 要切换的CSS类名(String)

switch — 用于决定元素是否包含class的布尔值(Boolean)

示例 :

每点击三下加上一次 'highlight' 类

HTML 代码:

<strong>jQuery 代码:</strong>

jQuery 代码:

  var count = 0;

  $("p").click(function(){

      $(this).toggleClass("highlight", count++ % 3 == 0);

  });

toggleClass(function(index, class), [switch])— 如果开关switch参数为true则加上对应的class，否则就删除。

参数 :

function(index, class)— 返回class名的一个函数，接受两个参数，index为元素在集合中的索引位置，class为原先元素的class值(Function)

switch — (可选)用于决定元素是否包含class的布尔值(Boolean)

示例 :

根据父元素来设置class属性

jQuery 代码:

$('div.foo').toggleClass(function() {

  if ($(this).parent().is('.bar') {

    return 'happy';

  } else {

    return 'sad';

  }

});