part5-2 基础DOM和CSS操作

$('div').css('color'); //获取元素行内 CSS 样式的颜色

$('div').css('color', 'red'); //设置元素行内 CSS 样式颜色为红色

在 CSS 获取上,我们也可以获取多个 CSS 样式,而获取到的是一个对象数组,如果用传统方式进行解析需要使用 for in 遍历。

var box = $('div').css(['color', 'height', 'width']);//得到多个 CSS 样式的数组对象

for (var i in box) { //逐个遍历出来

   alert(i + ':' + box[i]);

}

jQuery 提供了一个遍历工具专门来处理这种对象数组,$.each()方法,这个方法可以轻松的遍历对象数组。
 

$.each(box, function (attr, value) {//遍历 JavaScript 原生态的对象数组

  alert(attr + ':' + value);

});

使用$.each()可以遍历原生的 JavaScript 对象数组,如果是 jQuery 对象的数组怎么使用.each()方法呢?

$('div').each(function (index, element) { //index 为索引,element 为元素 DOM

alert(index + ':' + element);
});

在需要设置多个样式的时候,我们可以传递多个 CSS 样式的键值对即可。
$('div').css({
'background-color' : '#ccc',
'color' : 'red',

'font-size' : '20px'
});

如果想设置某个元素的 CSS 样式的值,但这个值需要计算我们可以传递一个匿名函数。

$('div').css('width', function (index, value) {
return (parseInt(value) - 500) + 'px';
});

除了行内 CSS 设置,我们也可以直接给元素添加 CSS 类,可以添加单个或多个,并且也可以删除它。

$('div').addClass('red');//添加一个 CSS 类
$('div').addClass('red bg'); //添加多个 CSS 类
$('div').removeClass('bg'); //删除一个 CSS 类
$('div').removeClass('red bg'); //删除多个 CSS 类

$('div').click(function () {//当点击后触发

$(this).toggleClass('red size'); //单个样式多个样式均可

});