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 进行下拉菜单显示与隐藏的切换

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>

效果（中间一个已经被点击过）：

posted @ 2012-07-16 11:38  lihui_yy  阅读(539)  评论(0)  编辑  收藏  举报