样式操作
在jQuery中，提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。以上方法的使用方式基本相同，当方法没有提供参数时，表示获取匹配元素的内容或值；当方法携带参数时，表示对匹配元素的内容或值进行修改。
1. html()方法：
html()方法用于获取第一个匹配元素的HTML，内容或修改匹配元素的HTML内容，方方法仅对XHTML文档有效，不能用于XML文档。html()方法的语法格式如下：
html() html(htmlCode) html(function(index, oldHtmlCode))
无参方法用于返回第1个匹配元素的HTML内容
有参方法用于设定匹配元素的文本内容
htmlCode：表示将所匹配元素的HTML内容设定为htmlCode
function(index, oldHTmlCode)：表示将函数的返回值作为当前元素的HTML内容，index表示当前元素在集合中的索引位置，oldHtmlCode表示当前在修改之前的HTML内容
示例：
//返回#mainCotentDiv标签的HTML内容 $("#mainContentDiv".html()); //设置#mainContentDiv标签的HTML内容为红色标题格式的“标题” $("#mainContentDiv").html("<h1><font color='red'>标题</font><h1/>"); //根据元素在集合中的不同位置，设定不同的HTML内容 $("p").html(function(index, htmlCode){ switch(index){ case 0: return "<h1> + htmlCode + "<h1/>"; case 1: return "<h2> + htmlCode + "<h2/>"; } });
2. text()方法：
text()方法用于读取或设置匹配元素的文本内容。与html()方法区别在于，text()方法返回纯文本内容，适用于XHTML和XML文档。text()方法的语法格式如下：
text() text(textContent) text(function(index, oldTextContent))
无参方法用于返回第1个匹配元素的文本内容
有参方法用于设定匹配元素的文本内容
textContent：表示将所匹配元素的文本内容内容设定为textContent
function(index, oldTextContent)：表示将函数的返回值作为当前元素的HTML内容，index表示当前元素在集合中的索引位置，oldTextContent表示当前在修改之前的文本内容
示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery基本操作-内容操作</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> </head> <body> <div id="newsContent"> <p>中国的商业正处于一场正在进行时态的变革。</p> <p>MALL新闻频道拥有中国购物，城市综合体，商业街区最全的商业信息。</p> </div> <div id="newsDiscuss"></div> <hr/> <input type="button" value="获得HTML内容" onClick="getHTMLContent()" /> <input type="button" value="获得Text内容" onClick="getTextcontent()" /> <input type="button" value="改变正文内容" onClick="changeContent()" /> <input type="button" value="显示HTML内容" onClick="setHTMLContent()" /> <input type="button" value="显示Text内容" onClick="setTextContent()" /> <script type="text/javascript"> //获取元素的HTML内容 function getHTMLContent() { console.log("<div>中的HTML内容如下：" + $("#newsContent").html()); } //获取元素的文本内容 function getTextcontent() { console.log("<div>中的text内容如下：" + $("#newsContent").text()); } //根据元素在集合中的位置不同，所赋的值也不同 function changeContent() { $("p").html(function(index, htmlCode) { switch(index) { case 0: return "<h1>" + htmlCode + "<h1/>"; case 1: return "<h2>" + htmlCode + "<h2/>"; } }); } //设置元素的HTML内容 function setHTMLContent() { $("#newsDiscuss").html("<hr/>补充如下：Mall全称Shopping Mall（大型购物中心），属于一种新型的复合型商业。"); } //设置元素的文本内容 function setTextContent() { $("#newsDiscuss").text("<hr/>补充如下：Mall全称Shopping Mall（大型购物中心），属于一种新型的复合型商业。"); } </script> </body> </html>
