JQuery獲取元素類名

一般而言，JQuery可以利用attr來獲取元素的屬性值，

 1、$("元素").attr("屬性");                //獲取指定屬性的值

 2、$("元素").attr("屬性","屬性值");//設置屬性值

 3、$("元素").removeAttr("屬性");  //移除指定屬性

 不過在1.6中加入了prop，用法同attr相同。只是將上面中attr替換成prop即可,不過在獲取checked等屬性時，將會返回標准屬性true/false，不會和之前的attr一樣，返回checked或者“”。

而JQuery中獲取類名的屬性為class亦可以為className，因為在HTML DOM中沒有class屬性，而是className屬性。在JQuery中，有對className作出關鍵字的轉換

jQuery.props = {
    "for" : "htmlFor" ,
    "class" : "className" ,
    readonly: "readOnly" ,
    maxlength: "maxLength" ,
    cellspacing: "cellSpacing" ,
    rowspan: "rowSpan" ,
    colspan: "colSpan" ,
    tabindex: "tabIndex" ,
    usemap: "useMap" ,
    frameborder: "frameBorder"
};

二者的區別：

• 用class: 比較直覺，跟HTML Tag相同，而且用class比className少幾個判斷，可能可以快幾納秒吧。
• 用className: 與HTML Dom相同，不會因為沒了jQuery就不會寫Javascript。

這里需要注意的是，如果你獲取的元素沒有類名的話，它返回的是undefined，而不是空或null。有關基本數據類型，可參照此博客鏈接

下面給出一段代碼例子，作用是通過按下鍵盤的右方向鍵來切換頁面的body類。

var setBodyClass = function(className) {
        $('body').removeClass().addClass(className);  //刪除之前的類，再添加新的類名
      };
    $(document).keyup(function(event){  //監聽鍵盤按下的按鍵
        var key = event.which;  //獲取鍵碼
        if(key==39){   //右方向鍵的鍵碼為39
            var className = String($('body').attr("class"));//獲取body的類名
            if(className=="undefined"){//body沒有類名
                setBodyClass("narrow");
            }
            if(className=="default"){
                setBodyClass("narrow");
            }
            if(className=="narrow"){
                setBodyClass("large");
            }
            if(className=="large"){
                setBodyClass("default");
            }
        }
    });

body {
  font: 62.5% Verdana, Helvetica, Arial, sans-serif;
  color: #000;
  background: #fff;
}
body.large {
  font-size: 1.5em;
}

body.narrow  {
  width: 250px;
}