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