jQuery DOM 操作(1) --->>> Class Attribute , 类属性操作
Class Attribute
我又回来了，最近因为在搞一个非常NB的东西。所以没有时间整理技术类的相关文档了。明天端午无心工作，所以抽空来写一些技术文档了。文档也没有什么特别的东西。但是作为技术来说，写出来总是好的有的时候能给需要的人一些启发就够了。
以前发过关于 jQuery 对于 event 的封装，但是那个时候之只是偶尔用到了一下子 jQuery 当中对于 js 原生 DOM 的一些 manipulation 。现在准备系统的介绍一下，所有的资料都是可以在官方网站获得。
Class attribute 的这些方法是用来让人更方便的来控制 CSS 相关 CLASSES 来控制元素的样式的。
Class attribute 里面总共有 4 个 method 。
.addClass()
给所有指定选择器的元素增加指定名称的class(es)
.hasClass()
判断指定元素是否至少有一个元素有给定名称的 class 的
.removeClass()
给所有指定选择器的元素移除指定名称的class(es)
.toggleClass()
给所有指定选择器的元素增加或者移除(也就是开关的意思)指定名称的 class(es)
.addClass(className)
说明：
给所有指定选择器的元素增加指定名称的class(es),即在指定元素的 class 属性中添加指定名称的 class(es)
使用代码：
// 增加一个 class
$(“p”).addClass(“myClass”);
// 增加多个 classes 中间使用 空格隔开 space-separated
$(“p”).addClass(“myClass yourClass”);
实例代码：
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$("p:last").addClass("selected highlight");
</script>
</body>
</html>
代码说明：
使用 addClass 给指定元素增加: 字体颜色为红色，背景色为黄色的 classes …
.hasClass()
说明：
判断指定元素是否至少有一个元素有给定名称的 class 。假如有的话则返回 true 假如没有的话则返回 false 。
使用代码：
Element 如下：
<div id="mydiv" class="foo bar"></div>
JS 代码如下：
// return false
$('#mydiv').hasClass('bar')
// return true
$('#mydiv').hasClass('quux')
实例代码：
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </div>
<script>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>
</body>
</html>
代码说明：
代码中给出了两段段落 P ，第一段没有使用 selected 样式，第二段使用了 selected 样式让 p 段落的颜色变成了红色。
然后有三段 div 用来判断 p 段落是否使用了 selected 样式。用 script 算出结果 append 到对应的 result div 后面。
Result1 = ‘false’
Result2 = ‘true’
Result3 = ‘true’
.hasClass()经常用来做判断使用。
.removeClass()
说明：
给所有指定选择器的元素移除指定名称的class(es),即在指定元素的 class 属性中移除指定名称的 class(es)，假如没有参数中指定的 class 的话，就什么也不发生。
使用代码：
// 移除一个 class
$(“p”).removeClass (“myClass”);
// 移除多个 classes 中间使用 空格隔开 space-separated
$(“p”). removeClass (“myClass yourClass”);
实例代码：
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
<script>$("p:even").removeClass("blue");</script>
</body>
</html>
代码说明：
$("p:even").removeClass("blue");
:even 隔行选择器，从第一个元素开始选择起，通常用于进行隔行着色的时候。上述代码就是把 p 段落隔行去除 blue class 。
.toggleClass( className )
说明：
给所有指定选择器的元素增加或者移除(也就是开关的意思)指定名称的 class(es)
使用代码：
Element 如下：
<div class="tumble">Some text.</div>
第一次我们使用如下 js 代码时会有如下结果
JS 代码如下：
$('div.tumble').toggleClass('bounce')
元素改变如下:
<div class="tumble bounce">Some text.</div>
第二次我们使用同样的 js 代码会有如下结果
JS 代码如下：
$('div.tumble').toggleClass('bounce')
元素改变如下:
<div class="tumble">Some text.</div>
实例代码：
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>
代码说明：
点击 highlight 或者 paragraphs 进行高亮切换显示。假如只是需要做成高亮切换的话只需要使用 toggleClass 即可。
稍后会给出相对应的应用。