4.8.3　一次改变多个CSS属性

如果我们想要在一个元素上设置多个CSS属性，不需要多次使用.css（）函数。例如，如果想要动态地突出显示＜div＞标签（可能是作为对访问者行为的一种响应），可以改变＜div＞标签的背景颜色并添加一个围绕它的边框，如下所示：

$（'#highlightedDiv'）.css（'background-color'，’#FF0000'）；

$（'#highlightedDiv'）.css（'border'，’2px solid#FE0037'）；

另一种方式是把所谓的一个对象直接量传递给.css（）函数。把对象直接量看做属性名/值对的一个列表。在每个属性名的后面插入一个冒号（：），后面跟着一个值。每个名/值对都用一个逗号隔开，并且整个列表用花括号{}括住。这样，上面的两个CSS属性值的一个对象直接量如下所示：

{'background-color'：’#FF0000’，'border'：’2px solid#FE0037’}

由于挤压到单独一行的对象直接量很难阅读，因此，很多程序员将其分散到多行。如下代码和前面一行代码的作用相同：

{

'background-color'：’#FF0000’，

'border'：’2px solid#FE0037’

}

对象直接量的基本结构如图4-5所示。

图　4-5　JavaScript对象直接量提供了创建属性和值的一个列表的一种方法。JavaScript把对象直接量当做一块单独的信息对待，就像数组一样也是值的一个列表。在为jQuery插件设置选项的时候，将经常使用这样的对象直接量

警告：在创建对象直接量的时候，确保通过在值的后面添加一个逗号来分隔开每个名/值对（例如，在这个例子中，逗号跟在值’#FF0000’的后面）。然而，最后一个属性/值对之后不应该再有逗号了，因为其后面不会再有属性/值对。如果确实在最后一个值的后面添加了一个逗号，一些Web浏览器（包括Internet Explorer）会产生一个错误。

要把对象直接量和css（）函数一起使用，只要像下面这样把对象传递给函数：

$（'#highlightedDiv'）.css（{

'background-color'：’#FF0000’，

'border'：’2px solid#FE0037’

}）；

仔细地研究这个例子，因为它看上去和我们目前为止已经见到的例子有所不同，并且我们将会在后面的各章中遇到很多这样的代码。首先要注意的是，这段代码只是一条JavaScript语句（实际上只是一行代码），我们可以分辨这一点，因为结束语句的分号直到最后一行才出现。这条语句划分为4行是为了使代码便于阅读。接下来，注意对象直接量是传递给css（）函数的一个参数（就像一段数据）。因此，在代码ss（{中，左圆括号是函数的一部分，而左{表示对象的开始。最后一行的3个字符可以这样分解：}是对象的结束，也是传递给函数的参数的结束；}表示函数的结束，是css（）中最后的圆括号；而；表示这条JavaScript语句的结束。

如果所有这些对象直接量的内容令你不知所措，可以把CSS属性改为每次一行，如下所示：

$（'#highlightedDiv'）.css（'background-color'，’#FF0000'）；

$（'#highlightedDiv'）.css（'border'，’2px solid#FE0037'）；

更好的方法是使用jQuery的内置串联功能（参见4.6.4节）。串联是通过把一个函数添加到另一个函数的末尾，从而把几个jQuery函数应用于元素的一个集合，如下所示：

$（'#highlightedDiv'）.css（'background-color'，’#FF0000'）

.css（'border'，’2px solid#FE0037'）；

这段代码可以解释为：找到ID为highlightedDiv的元素并修改其背景颜色，然后，修改其边框颜色。上面的代码进行了两次选择（$（'#highlightedDiv'）），而相比之下，串联的性能要更好一些，因为每次进行选择的时候，都要让Web浏览器运行所有的jQuery代码来选择该元素。因此，这段代码不是最优的。

$（'#highlightedDiv'）.css（'background-color'，’#FF0000'）；

$（'#highlightedDiv'）.css（'border'，’2px solid#FE0037'）；

这段代码迫使浏览器选择元素，更改其CSS，再次选择元素（浪费了处理器时间），并且再次应用CSS。而使用串联方法，浏览器只需要选择元素一次，然后运行CSS函数两次；选择该元素一次，这要更快并且更高效。