jQuery 中的 HTML 操作

来源：互联网发布：免费下载迅雷软件编辑：程序博客网时间：2024/04/29 23:39

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>

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

0 0