jQuery 中的 HTML 操作
1.操作HTML
（1）获取 HTML 内容
html() //获取匹配元素集合中的第1个元素
（2）设置 HTML 内容
html(htmlString) //为匹配集合中的所有元素设置内容
（3）根据索引设置 HTML 内容
html(function(index, html){...})
以上方式获取的都是带标签的 html 内容
2.操作文本
（1）获取文本内容
text() //返回所有匹配元素集的文本内容组合起来的文本
（2）设置文本内容
text(textString)
（3）根据索引设置文本内容
text(function(index, text){...})
以上获取的都是不带 html 标签的纯文本内容
3.操作值
专门用于操作表单元素的方法。
（1）获取元素值
val() //返回第1个匹配元素的值
（2）设置元素的值
val(value)
如：$("#username").val("lihui"); $(#box).val(["1","2","3"]);
（3）根据索引设置元素值
val(function(index, value){...})
（4）读取属性
attr(attributeName)
（5）修改属性
attr(attributeName, value)
attr(map)
如：$("ul li").attr("class", "news"); $("a").attr({target:"_self", href:"baidu.html", "class":"..."});
（6）根据索引设置属性
attr(attributeName, function(index, attr){...})
（7）删除属性
removeAttr(attributeName)
（8）添加类样式
addClass(className) //并不会更换元素中的任何样式，只是添加。
addClass(function(index, class){...})
（9）移除类样式
removeClass([className]) //并不会更换元素中的任何样式，只是添加。
removeClass(function(index, class){...})
（10）切换类样式
toggleClass(className) //如果不存在，添加该样式；否则，删除
toggleClass(className, switch) //switch 为true 则添加类，否则移除
toggleClass(function(index, class), [switch])
4.元素CSS
（1）读取CSS样式
css(cssName)
（2）设置CSS样式
css(cssName, value)
css(map)
css(cssName, function(index, value))
（3）元素CSS位置
offset() //绝对位置
offset(coordinates)
position() //相对于父元素的位置
scrollLeft()
scrollRight()
（4）元素CSS尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
下面给出一个利用 toggleClass 进行下拉菜单显示与隐藏的切换
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>toggleClass()方法</title>
6 <script language="javascript" src="jquery-1.4.2.min.js"></script>
7 <style type="text/css">
8 body {
9 margin:0;
10 padding:0;
11 font-size:14px
12 }
13 #wrap {
14 margin: 20px auto 10px auto;
15 width: 600px;
16 background: #fff;
17 padding: 10px;
18 height:140px;
19 border: 5px solid #000;
20 text-align: left;
21 }
22 h1 {
23 color:#006;
24 font-size:24px;
25 font-weight:bold;
26 text-align:center;
27 margin-top:0px;
28 }
29 ul, li {
30 /*清除ul和li上默认的小圆点*/
31 list-style: none;
32 }
33 ul {
34 /*清除子菜单的缩进值*/
35 padding: 0;
36 margin: 0;
37 }
38 .main {
39 background-image: url(title.gif);
40 background-repeat: repeat-x;
41 width: 140px;
42 float: left;
43 margin-right: 5px;
44 }
45 li {
46 background-color: #EEEEEE;
47 }
48 a {
49 /*取消所有的下划线*/
50 text-decoration: none;
51 padding-left: 20px;
52 display: block;
53 display: inline-block;
54 width: 120px;
55 padding-top: 3px;
56 padding-bottom: 3px;
57 }
58 .main a {
59 color: white;
60 background-image: url(collapsed.gif);
61 background-repeat: no-repeat;
62 background-position: 3px center;
63 }
64 .main li a {
65 color: black;
66 background-image: none;
67 }
68 .hide {
69 display:none;
70 }
71
72 </style>
73 </head>
74 <body>
75 <div id="wrap">
76 <h1>精通jQuery视频目录索引</h1>
77 <ul>
78 <li class="main"> <a href="#">JavaScript</a>
79 <ul>
80 <li> <a href="#">内容概述</a> </li>
81 <li> <a href="#">JavaScript基础语法</a> </li>
82 <li> <a href="#">JavaScript实用编程</a> </li>
83 </ul>
84 </li>
85 <li class="main"> <a href="#">Web开发基础</a>
86 <ul>
87 <li> <a href="#">HTML</a> </li>
88 <li> <a href="#">CSS</a> </li>
89 <li> <a href="#">DOM</a> </li>
90 </ul>
91 </li>
92 <li class="main"> <a href="#">jQuery简单应用</a>
93 <ul>
94 <li> <a href="#">配置开发环境</a> </li>
95 <li> <a href="#">核心函数</a> </li>
96 </ul>
97 </li>
98 </ul>
99 </div>
100 <script type="text/javascript" language="javascript">
101 $(document).ready(function(){
102 $(".main a").attr("title","切换显示与隐藏")
103 $(".main a").click(function(){
104 //找到主菜单项对应的子菜单项
105 var ulNode = $(this).next("ul");
106 ulNode.toggleClass("hide");
107 //修改主菜单的指示图标
108 changeIcon($(this));
109 });
110 });
111
112 /**
113 * 修改主菜单的指示图标
114 */
115 function changeIcon(mainNode) {
116 if (mainNode) {
117 if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
118 mainNode.css("background-image","url('expanded.gif')");
119 } else {
120 mainNode.css("background-image","url('collapsed.gif')");
121 }
122 }
123 }
124
125
126 </script>
127 </body>
128 </html>
效果（中间一个已经被点击过）：
浙公网安备 33010602011771号