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 进行下拉菜单显示与隐藏的切换
View Code
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>
效果（中间一个已经被点击过）：
