jQuery属性篇-class

.addClass()

添加相关的class到匹配的元素。

.addClass(className)

.addClass(function(index,currentClass))

className

类型是字符串。

一个或多个有空格隔开的class会被添加到每一个匹配元素的class属性上。

function(index,currentClass)

类型是函数。

一个函数返回的一个或多个有空格隔开class的名字会被添加到存在的class名字上。接收在集合中的元素的索引的位置和存在的class名字作为参数。在这个函数中，this被指向集合中当前的元素。

这个很重要需要注意，这个方法不是替换class。它只简单的添加class，追加到或许已经添加了该class的元素上。
这个方法被使用和.removeClass()一起使用来替换原来的class，如：

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

这里myClass和noClass被从段落中移除，yourClass被添加。

<script>
  $("p:last").addClass("selected");//给元素添加一个class
 </script>

<script>
  $("p:last").addClass("selected highlight");//给元素添加多个class
</script>

<script>
  $("div").addClass(function(index, currentClass) { //通过函数返回class
    var addedClass;
    if ( currentClass === "red" ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }
    return addedClass;
  });
</script>

.hashClass()

判断匹配的元素是否被指定了给定的class

.hasClass(className)

类型是字符串。

用于查找的class的名字。

元素也许会有多个class.在HTMl中，这个是通过空格将class的名字隔开的:

<div id="mydiv" class="foo bar"></div>

<script>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>

.toggleClass()

从匹配的元素中添加或者移除一个或多个class，并且依赖于class是否存在或转换的条件来交替使用添加和移除。

.toggleClass(className)

.toggleClass(className,switch)

.toggleClass([switch])

.toggleClass(function(index,class,switch)[,switch])

className

类型是字符串。

一个或多个被空格隔开的class名字来为每一个匹配的元素做切换。

switch

类型是布尔值。

一个布尔值（不仅仅是true和false）来决定class是否应该被添加或移除。

function(index,class,switch)

类型是函数。

一个函数返回在匹配元素中的class属性中做切换的class的名字。接收在集合中的元素索引的位置，原来的class的值和switch做为参数。

<script>
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });
</script>

<script>
var count = 0;
$("p").each(function() {
  var $thisParagraph = $(this);
  var count = 0;
  $thisParagraph.click(function() {
    count++;
    $thisParagraph.find("span").text('clicks: ' + count);
    $thisParagraph.toggleClass("highlight", count % 3 == 0);//使用count%3作为交替的判断条件
  });
});
</script>

<script>
var cls = ['', 'a', 'a b', 'a b c'];
var divs = $('div.wrap').children();
var appendClass = function() {
  divs.append(function() {
    return '<div>' + (this.className || 'none') + '</div>';
  });
};
appendClass();
$('button').bind('click', function() {
  var tc = this.className || undefined;
  divs.toggleClass(tc);
  appendClass();
});
$('a').bind('click', function(event) {
  event.preventDefault();
  divs.empty().each(function(i) {
    this.className = cls[i];
  });
  appendClass();
});
</script>

.removeClass()

从匹配的元素中移除一个，多个或者所有的class。

.removeClass([className])

.removeClass(function(index,class))

className

类型是字符串。

一个或多个被空格隔开的class名字来为每一个匹配的元素做切换。

function(index,class)

类型是函数。

一个函数返回一个或多个有空格隔开的class的名字会被移除。接收在集合中元素的索引位置和原来的class值做为参数。

我们可以使用.attr('class', 'newClass')方法来用另一个class替换现在存在的所有class（也就是设置class的属性）

<script>$("p:even").removeClass("blue");</script>//移除class blue

<script>$("p:odd").removeClass("blue under");</script>//移除class blue under

<script>$("p:eq(1)").removeClass();</script>//移除所有class