亚洲伊伊人中文综合网,A毛片免费精品一区二区三区

jQuery的屬性與樣式之html()及.text()

讀取、修改元素的html結構或者元素的文本內容是常見的DOM操作，jQuery針對這樣的處理提供了2個便捷的方法.html()與.text()

.html()方法

獲取集合中第一個匹配元素的HTML內容或設置每一個匹配元素的html內容，具體有3種用法：

.html() 不傳入值，就是獲取集合中第一個匹配元素的HTML內容
.html( htmlString ) 設置每一個匹配元素的html內容
.html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數

注意事項：

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

.text()方法

得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。，具體有3種用法：

.text() 得到匹配元素集合中每個元素的合并文本，包括他們的后代
.text( textString ) 用于設置匹配元素內容的文本
.text( function(index, text) ) 用來返回設置文本內容的一個函數

注意事項：

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

.html與.text的異同:

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

任務

在代碼編輯器中第37行填寫相應代碼

text

在代碼編輯器中第44行填寫相應代碼

text

在代碼編輯器中第50行填寫相應代碼

text

在代碼編輯器中第56行填寫相應代碼

html

在代碼編輯器中第62填寫相應代碼

text

?不會了怎么辦

index.html
imooc.css

<!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://www.xianlaiwan.cn/static/lib/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方法獲取到的內容</h4> <p></p> <h4>顯示通過text方法獲取到的內容</h4> <p></p> <script type="text/javascript"> //顯示出html方法獲取到的內容 //.html()是整個html文檔結構 $('p:first').?( $(".first-div").html() ) </script> <script type="text/javascript"> //顯示出text方法獲取到的內容 //.text()是文本內容的合集 $('p:last').?( $(".first-div").text() ) </script> <script type="text/javascript"> //通過.text()方法替換文本內容 $(".left a:first").?('替換第一個a元素的內容') </script> <script type="text/javascript"> //通過.html()方法替換html結構 $(".left div:first").?('整個div的子節點都被替換了') </script> <script type="text/javascript"> //通過.text()的回調，獲取原本的內容，修改，在重新賦值 $(".left a:first").?(function(idnex,text){ return '增加新的文本內容' + text }) </script> </body> </html>

.left { width: auto; height: 120px; } .left div { width: 150px; height: 70px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } a,p{ display: block; }

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

3-2 jQuery的屬性與樣式之html()及.text()

jQuery的屬性與樣式之html()及.text()

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

3-2 jQuery的屬性與樣式之html()及.text()

熱搜

最近搜索清空

jQuery的屬性與樣式之html()及.text()

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦