jQuery CSS 添加/刪除類名

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';
  }
});

分類: JQuery