基础DOM和CSS操作(二)

元素样式操作

元素样式操作包括了直接设置CSS样式、增加CSS类别、类别切换、删除类别这几种操作方法。而在整个jQuery使用频率上来看，CSS样式的操作也是极高的，所以需要重点
掌握。

CSS操作方法

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