基础DOM和CSS操作(二)
元素样式操作
元素样式操作包括了直接设置CSS样式、增加CSS类别、类别切换、删除类别这几种操作方法。而在整个jQuery使用频率上来看，CSS样式的操作也是极高的，所以需要重点
掌握。
CSS操作方法
| 方法名 | 描述 |
| css(name) | 获取某个元素行内的css样式 |
| css([name1,name2,name3]) | 获取某个元素行内多个css样式 |
| css(name,value) | 设置某个元素行内的css样式 |
| css(name,function(index,value) {}) | 设置某个元素行内的css样式 |
| css({name1:value1,name2:value2}) | 设置某个元素行内多个css样式 |
| addClass(class) | 给某个元素添加一个css类 |
| addClass(class1 class2 class3...) | 给某个元素添加多个css类 |
| removeClass(class) | 删除某个元素的一个css类 |
| removeClass(class1 class2 class3...) | 删除某个元素的多个css类 |
| toggleClass(class) | 来回切换默认样式和指定样式 |
| togggleClass(class1 class2 class3...) | 同上 |
| toggleClass(class,switch) | 来回切换样式的时候设置切换频率 |
| toggleClass(function() {}) | 通过匿名函数设置切换的规则 |
| toggleClass(function() {},switch) | 在匿名函数设置时也可以设置频率 |
| toggleClass(function(i,c,s) {},switch) | 在匿名函数设置时传递三个参数 |
有html代码(部分)如下：
<div style="color: red;"> <strong>www.ycku.com</strong> </div>
jQuery代码：
alert($("div").css("color")); //获取元素行内CSS样式的颜色 弹出rgb(255,0,0)
有html代码(部分)如下：
<div> <strong>www.ycku.com</strong> </div>
jQuery代码：
$("div").css("color", "red"); //设置元素行内CSS样式颜色为红色
有html代码(部分)如下：
<div style="color: red; width: 200px; height: 200px;"> <strong>www.ycku.com</strong> </div>
在CSS获取上，我们也可以获取多个CSS样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用for in遍历。
jQuery代码：
var box = $("div").css(["color","height","width"]); //返回原生的DOM对象数组
得到多个CSS样式的数组对象，我觉得应该是这种形式：
{ color:"red", width:"200px", height:"200px" }
所以：alert(box[0]);会返回undefined。alert(box["width"]);才会返回正确的值——200px。
所以才说如果用传统方式进行解析需要使用for in遍历。
for(var key in box) { alert(key+":"+box[key]); }
jQuery提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。
$.each(box, function(attr,value) { //遍历JavaScript原生态的对象数组 alert(attr+":"+value); });
使用$.each()可以遍历原生的JavaScript对象数组，如果是jQuery对象的数组怎么使用.each()方法呢？
html代码如下：
<div title="aaa"> <strong>www.ycku.com</strong> </div> <div title="bbb"> <strong>www.ycku.com</strong> </div>
jQuery代码：
alert($("div")[0]);// 原生的DOM对象
$("div"); //jQuery对象数组
jQuery对象的数组使用.each()方法如下：
$("div").each(function(index, element) { //element是原生的DOM对象
alert(index+":"+element);
});
在需要设置多个样式的时候，我们可以传递多个CSS样式的键值对即可。之前我们是这样写的：
$("div").css("color", "red").css("background", "#ccc");
此刻我们可以这样写了：
$("div").css({
"color":"blue",
"background":"#eee",
"width":"200px",
"height":"30px"
});
如果想设置某个元素的CSS样式的值，但这个值需要计算，我们可以传递一个匿名函数。之前的做法如下：
var w = xxx; w + x = 20; w = w + 20 * 20; //全局很难受 $("div").css("width", w + "px");
但此刻的做法如下：
$("div").css("width", function(index, value) {
//局部函数，很舒服
return parseInt(value) - 500 + "px";
});
除了行内CSS设置，我们也可以直接给元素添加CSS类，可以添加单个或多个，并且也可以删除它。
有html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础DOM和CSS操作</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div title="aaa"> <strong>www.ycku.com</strong> </div> </body> </html>
style.css：
.red { color: red; } .green { color: green; } .bg { background-color: #ccc; } .size { font-size: 20px; }
jQuery代码：
$("div").addClass("red"); //添加一个CSS类
$("div").addClass("red bg size"); //添加多个CSS类
$("div").removeClass("bg"); //删除一个CSS类
$("div").removeClass("red size"); //删除多个CSS类
我们还可以结合事件来实现CSS类的样式切换功能。
$("div").click(function() {
$(this).toggleClass("red size"); //两个样式之间的切换，并且是默认样式和指定样式之间的切换
});
.toggleClass()方法的第二个参数可以传入一个布尔值， true表示执行切换到class类， false表示执行回默认class类(默认的是空class)，运用这个特性，我们可以设置切换的频率。
上面的代码类似于：
var count = 0; $("div").click(function() { $(this).toggleClass("red size", count++ % 2 == 0); //产生频率问题 });
默认的CSS类切换只能是无样式和指定样式之间的切换，如果想实现样式1和样式2之间的切换还必须自己写一些逻辑。
html代码(部分)如下：
<div title="aaa" class="green"> <strong>www.ycku.com</strong> </div>
jQuery代码如下：
$("div").click(function() {
//这里只是click的局部，而又是toggleClass的全局
$(this).toggleClass("red"); //一开始切换到样式red
if($(this).hasClass("red")) { //判断样式red存在后
$(this).removeClass("green"); //删除样式green
} else {
$(this).toggleClass("green"); //删除样式red，addClass()也是一样的
}
});
上面的方法较为繁琐，.toggleClass()方法提供了传递匿名函数的方式，来设置你所需要切换的规则。
$("div").click(function() {
$(this).toggleClass(function() {
return $(this).hasClass("red") ? "green" : "red"; //有小缺陷
});
});
注意：上面虽然一句话实现了这个功能，但还是有一些小缺陷，因为原来的class类没有被删除，只不过被替代了而已，所以需要改写一下。
$("div").click(function() {
$(this).toggleClass(function() {
//toggleClass的局部
if($(this).hasClass("red")) {
$(this).removeClass("red");
return "green";
} else {
$(this).removeClass("green");
return "red";
}
});
});
我们也可以在传递匿名函数的模式下，增加第二个频率参数。
var count = 0; $("div").click(function() { $(this).toggleClass(function() { //toggleClass的局部 if($(this).hasClass("red")) { $(this).removeClass("red"); return "green"; } else { $(this).removeClass("green"); return "red"; } }, count++ % 2 == 0); //出现问题 });
对于.toggleClass()传入匿名函数的方法，还可以传递index索引、class类两个参数以及频率布尔值，可以得到当前的索引、class类名和频率布尔值。
var count = 0; $(document).click(function() { $("div").toggleClass(function(index, className, switchBool) { alert(index + ":" + className + ":" + switchBool); //toggleClass的局部 if($(this).hasClass("red")) { $(this).removeClass("red"); return "green"; } else { $(this).removeClass("green"); return "red"; } }, count++ % 2 == 0); });
最后总结一下：jQuery中有三种方法能元素的类进行操作，这三种方法分别是：.addClass(),.removeClass(),.toggleClass()。这三种方法共同点都是能对元素的类进行操作，那么他们不同之处是：
- .addClass("className")方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；
- .removeClass("className")方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；
- .toggleClass("className")方法是用来给指定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如果元素存在样式则去掉，如果不存在则加上样式）。
