jquery 修改 获取 类名 className

今天同事们因为jQuery.attr('class')与jQuery.attr('className')这二个操作起了谁对谁错问题，事实上这个的操作最后的结果都是一样的，他的作用是，取得或更新Html Element的Class，如下的范例:

你一次想把div1的所有class换成E、F、G、H，用jQuery.addClass与jQuery.removeClass，太累了，一次处理不是很好吗，所以可以下:

你会好奇为什么二个同样的操作，要写二种方式，这是有渊源的。

在HTML Dom中没有一​​个叫class的属性，反而叫className(我不知道为什么)

图1 来源W3C School

所以上面的范例改成DOM来写

为什么换成jQuery又会对呢?

因为jQuery有作转换。

在如jquery-1.4.1.js中的第967行开始，会设定在jQuery用的关键字，对应的实际关键字是什么?

而jQuery在呼叫时attr时，name会寻找对应。

所以输入class，事实上会返回className。

二者

• 用class: 比较直觉跟HTML Tag相同，而且用class比className少几个判断，可能可以快几奈秒吧。
• 用className: 与HTML Dom相同，不会因为没了jQuery就不会写Javascript。

不过硬要说二者谁对谁错，好像没有意义，因为二者都对，各有优缺，只要专案成员用一致的写法，我想就可以了吧。

 来自 http://www.dotblogs.com.tw/wadehuang36/archive/2010/08/25/jqueryattrclassname.aspx




<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<style>
.t1{background:red}
</style>
<script>
var cur;
window.onload=function(){
  $("li").click(function(){
         if(cur == $(this)[0]) return false;
         if(cur!=null) cur.className = "";
         $(this)[0].className = "t1";
         cur = $(this)[0];
  })

}
</script>
<ul>
<li>aaaaa </li>
<li>bbb </li>
<li>ccc </li>
</ul>



 

$(document).ready(function(){
	$('span').mouseover(function(){
		alert($(this).attr('class'));
	});
});