　　　　　　　　　　　　類名的添加，修改及刪除

　　attr()及addClass()

　　　　addClass(class | fn) :為每個匹配的元素添加指定的類名。若要添加多個類名，請使用空格分開。為測試這兩個方法添加類名的區別，我先寫好了三個樣式。

.one {
    color: red;
}
.two {
    font-size: 200%;    
}
.three {
    text-transform: uppercase;
}

　　　　首先測試addClass()方法，代碼：

1 $('p').addClass('one two');
2 $('button:contains("addClass")').click(function() {
3     $('p').addClass('three');
4 });

　　測試前: 點擊按鈕后:

　　　　由代碼和測試結果我們可得出結論： ①addClass()確實可以為元素添加類名，當需添加多個類名時，使用空格分開（圖1）。②當class屬性已經存在類名時，使用addClass()並不會刪除修改原來存在的類名，會在原來的基礎上添加類名，組成新的詞列表。（圖2）

　　　　attr(name | properties | key,value | fn) : 設置或返回被選元素的屬性值。

　　　　測試attr()方法，代碼:

1 $('div').attr('class', 'one');
2 $('button:contains("attr")').click(function() {
3     $('div').attr('class', 'two three');
4 });

　　測試前：點擊按鈕后:

　　　　由代碼和測試結果我們可得出結論: ①attr()方法可以為元素添加類名。（圖1）。 ②當class屬性已經存在類名時，使用attr()並不會保留原來存在類名，而將class值直接設置為新的詞列表"two three"。同時我們發現attr()也支持同時添加多個類名（詞列表）(圖2)。因此若要保留"one"類名，只能$('div').attr('class', 'one two three')。

　　　　另外提下css()方法，當初做項目的時候使用過css()給元素添加類名：$('section').css('class', 'two'); 結果可想而是，一點用也沒有。因此在這區分下attt()和css()的區別。attr()是獲取/修改元素的屬性(和html標簽有關).而css()方法是獲取/修改樣式屬性(和style有關)的。何為屬性呢？通常我們將id,src,alt,class稱為屬性，也即元素屬性(想想attr不就是attribute的縮寫嗎)。樣式如width，color等，可以使用.style.xxx表示(確實沒有obj.style.class的寫法，而是obj.className這種)。貼下別人的問答：地址

　　HTML DOM 　setAttribute()

　　　　setAttribute()這個方法接受兩個參數: 要設置的特性名和值，如果特性已經存在，setAttribute()會以指定的值替換現有的值；如果特性不存在，setAttribure()則創建該屬性並設置相應的值。測試setAttribute()代碼：

1 var oSection = document.querySelector('section');
2 var oBtn = document.querySelector('.btn');
3 oSection.setAttribute('class', 'one');
4 oBtn.onclick = function() {
5     oSection.setAttribute('class', 'two three');    
6 }

　　測試前：　點擊按鈕后:

　　　　由代碼和測試結果我們可得出結論: ①setAttribute()方法可以添加類名（圖1）。②當類名存在時，會以制定的值替換現有的值。(圖2)。如要保留類名"one"，則也許這么寫: oSection.setAttribute('class', 'one two three');

　　removeClass()

　　　　既然可以在原來基礎上追加類名，那么有在原來基礎上刪除類名的方法嗎？答案是有的。

　　　　removeClass([class | fn]) :從所有匹配的元素中刪除全部或者指定的類。

1 $('button:contains("removeClass")').click(function() {
2     //刪除指定的類名“two”
3     $('p').removeClass('two');
4     // 無參數  默認刪除所有的類名
5     $('div').removeClass();
6 });