修改CSS

jQuery对象有“批量操作”的特点，这用于修改CSS实在是太方便了。考虑下面的HTML结构：

<!— HTML结构 —>

<ul id="test-css">

<li class="lang dy"><span>JavaScript</span></li>

<li class="lang"><span>Java</span></li>

<li class="lang dy"><span>Python</span></li>

<li class="lang"><span>Swift</span></li>

<li class="lang dy"><span>Scheme</span></li>

</ul>

要高亮显示动态语言，调用jQuery对象的 css('name', 'value') 方法，我们用一行语句实现：

'use strict';



$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

注意 ，jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。

jQuery对象的 css() 方法可以这么用：

var div = $('#test-div');

div.css('color'); // '#000033', 获取CSS属性

div.css('color', '#336699'); // 设置CSS属性

div.css('color', ''); // 清除CSS属性

为了和JavaScript保持一致，CSS属性可以用 'background-color' 和 'backgroundColor' 两种格式。

css() 方法将作用于DOM节点的 style 属性，具有最高优先级。如果要修改 class 属性，可以用jQuery提供的下列方法：

var div = $('#test-div');

div.hasClass('highlight'); // false， class是否包含highlight

div.addClass('highlight'); // 添加highlight这个class

div.removeClass('highlight'); // 删除highlight这个class

练习：分别用 css() 方法和 addClass() 方法高亮显示JavaScript：

<!— HTML结构 —>

<style>

.highlight {

color: #dd1144;

background-color: #ffd351;

}

</style>



<div id="test-highlight-css">

<ul>

<li class="py"><span>Python</span></li>

<li class="js"><span>JavaScript</span></li>

<li class="sw"><span>Swift</span></li>

<li class="hk"><span>Haskell</span></li>

</ul>

</div>

'use strict';



var div = $('#test-highlight-css');

// TODO: