1 <!--
2 节点操作
3
4 replaceWith 节点替换
5 $("div").replaceWith("<span>") 将所有div用span替换、一般用于替换单标记
6
7 wrap 包裹节点
8 $("tag").wrap("<div></div>") 将tag放置在div内
9
10 样式操作
11
12 attr("class") 获取设置样式
13 addClass("classname") 添加样式
14 removeClass("classname") 移除样式
15 toggleClass("classname") 切换样式（若原存在则移除/若不存在则添加）
16 hasClass("classname") 判断指定样式是否存在
17 -->
18 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
19 <html xmlns="http://www.w3.org/1999/xhtml">
20 <head>
21 <title>CSS样式操作</title>
22 <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
23 <script type="text/javascript">
24 $(function () {
25 //给标题添加样式
26 $("#addClass").click(function () {
27 if (!$("#pTitle").hasClass("title"))
28 $("#pTitle").addClass("title");
29 else
30 alert("不能重复添加！");
31 });
32
33 //移除样式
34 $("#clearClass").click(function () {
35 if ($("#pTitle").hasClass("title"))
36 $("#pTitle").removeClass("title");
37 else
38 alert("不能重复清除！");
39 });
40
41 //切换样式、原来存在则取消、原来不存在则加上、类似于xor的运算方法
42 $("#toggleClass").click(function () {
43 $("#pTitle").toggleClass("title");
44 });
45 });
46 </script>
47
48 <style type="text/css">
49 .title
50 {
51 text-align:center;
52 font-size:60px;
53 }
54 </style>
55 </head>
56 <body>
57 <p id="pTitle">这是标题</p>
58
59 <input id="addClass" type="button" value="addClass(Title)" />
60 <input id="clearClass" type="button" value="clearClass(Title)" />
61 <input id="toggleClass" type="button" value="toggleClass(Title)" />
62 </body>
63 </html>