當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

HQuery中html结构及文本的修改

發(fā)布時間：2023/12/31 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 HQuery中html结构及文本的修改小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

讀取、修改元素的html結(jié)構(gòu)或者元素的文本內(nèi)容是常見的DOM操作，jQuery針對這樣的處理提供了2個便捷的方法.html()與.text()
我們一起來看看。

.html()方法

獲取集合中第一個匹配元素的HTML內(nèi)容或設(shè)置每一個匹配元素的html內(nèi)容，具體有3種用法：
1..html() 不傳入值，就是獲取集合中第一個匹配元素的HTML內(nèi)容
2..html( htmlString ) 設(shè)置每一個匹配元素的html內(nèi)容
3..html( function(index, oldhtml) ) 用來返回設(shè)置HTML內(nèi)容的一個函數(shù)

注意：
.htm()方法內(nèi)部使用的是DOM的innerHTML屬性來處理的，所以在設(shè)置與獲取上需要注意的一個最重要的問題，這個操作是針對整個HTML內(nèi)容（不僅僅只是文本內(nèi)容）

.text()方法

得到匹配元素集合中每個元素的文本內(nèi)容結(jié)合，包括他們的后代，或設(shè)置匹配元素集合中每個元素的文本內(nèi)容為指定的文本內(nèi)容。，具體有3種用法：
1..text() 得到匹配元素集合中每個元素的合并文本，包括他們的后代
2..text( textString ) 用于設(shè)置匹配元素內(nèi)容的文本
3..text( function(index, text) ) 用來返回設(shè)置文本內(nèi)容的一個函數(shù)

注意：
.text()結(jié)果返回一個字符串，包含所有匹配元素的合并文本

.html與.text的異同:

1..html與.text的方法操作是一樣，只是在具體針對處理對象不同。
2..html處理的是元素內(nèi)容，.text處理的是文本內(nèi)容。
3..html只能使用在HTML文檔中，.text 在XML 和 HTML 文檔中都能使用。
4.如果處理的對象只有一個子文本節(jié)點(diǎn)，那么html處理的結(jié)果與text是一樣的。
5.火狐不支持innerText屬性，用了類似的textContent屬性，.text()方法綜合了2個屬性的支持，所以可以兼容所有瀏覽器。

具體實(shí)例：

<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" href="imooc.css" type="text/css"><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head><body><h3>.html()與.text()</h3><div class="left first-div"><div class="div"><a>:first-child</a><a>第二個元素</a><a>:last-child</a></div> <div class="div"><a>:first-child</a><a>第二個元素</a><a>:last-child</a></div></div><h4>顯示通過html方法獲取到的內(nèi)容</h4><p></p><h4>顯示通過text方法獲取到的內(nèi)容</h4><p></p><script type="text/javascript">//顯示出html方法獲取到的內(nèi)容//.html()是整個html文檔結(jié)構(gòu)$('p:first').text( $(".first-div").html() ) </script><script type="text/javascript">//顯示出text方法獲取到的內(nèi)容//.text()是文本內(nèi)容的合集$('p:last').text( $(".first-div").text() ) </script><script type="text/javascript">//通過.text()方法替換文本內(nèi)容$(".left a:first").text('替換第一個a元素的內(nèi)容')</script><script type="text/javascript">//通過.html()方法替換html結(jié)構(gòu)$(".left div:first").html('整個div的子節(jié)點(diǎn)都被替換了')</script><script type="text/javascript">//通過.text()的回調(diào)，獲取原本的內(nèi)容，修改，在重新賦值$(".left a:first").text(function(idnex,text){return '增加新的文本內(nèi)容' + text})</script></body></html>

好好感悟！

總結(jié)

以上是生活随笔為你收集整理的HQuery中html结构及文本的修改的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。