本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.1节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
本章介绍jQuery中操作HTML树的方法，包含操作类、attribute、property1和元素。本章还会演示同名方法之间的差异，并讨论潜在的性能问题。
不使用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行使用一次函数调用添加了两个类。
