本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.1节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
第3章 修改页面
本章介绍jQuery中操作HTML树的方法，包含操作类、attribute、property1和元素。本章还会演示同名方法之间的差异，并讨论潜在的性能问题。
3.1 技巧：添加类
不使用jQuery，单次调用函数只能设置元素的所有类，浏览器没有提供别的方法。在添加或者移除类的时候需要考虑元素上已经存在的其他类。这样，想给元素添加另外的类时就会增加额外的复杂度和开销。幸好jQuery提供了addClass()函数，可以方便地在选取集上添加一个或者多个类，从而解决了这个问题。
代码清单3-1演示了如何调用一次addClass()函数为元素添加类。
代码清单3-1 在单个元素上添加多个类
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>The addClass() function</title>
05 <style>
06 /* 请将下列代码移至一个外部的
07 .css文件*/
08
09 p.initial {
10 background-color: blue;
11 }
12
13 p.change {
14 font-weight: bold;
15 }
16
17 p.big {
18 font-size: 72px;
19 }
20 </style>
21 </head>
22 <body>
23
24 <p>This text will have a different appearance after
25 the class change. Click on the text to make it a
26 bit larger.</p>
27
28 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
29
30 <script>
31 // 请将下列代码移至一个外部的.js文件中
32 $(document).ready(function() {
33
34 $('p').addClass('initial');
35
36 $('p').click(function() {
37 $(this).addClass('change big');
38 });
39
40 });
41 </script>
42 </body>
43 </html>
第34行为元素添加了一个类，第37行使用一次函数调用添加了两个类。
