基础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;  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",
    "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")方法是用来给指定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如果元素存在样式则去掉，如果不存在则加上样式）。