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