jQuery的屬性與樣式之html()及.text()
讀取、修改元素的html結(jié)構(gòu)或者元素的文本內(nèi)容是常見的DOM操作，jQuery針對這樣的處理提供了2個(gè)便捷的方法.html()與.text()
.html()方法
獲取集合中第一個(gè)匹配元素的HTML內(nèi)容 或 設(shè)置每一個(gè)匹配元素的html內(nèi)容，具體有3種用法：
- .html() 不傳入值，就是獲取集合中第一個(gè)匹配元素的HTML內(nèi)容
- .html( htmlString ) 設(shè)置每一個(gè)匹配元素的html內(nèi)容
- .html( function(index, oldhtml) ) 用來返回設(shè)置HTML內(nèi)容的一個(gè)函數(shù)
注意事項(xiàng)：
.html()方法內(nèi)部使用的是DOM的innerHTML屬性來處理的，所以在設(shè)置與獲取上需要注意的一個(gè)最重要的問題，這個(gè)操作是針對整個(gè)HTML內(nèi)容（不僅僅只是文本內(nèi)容）
.text()方法
得到匹配元素集合中每個(gè)元素的文本內(nèi)容結(jié)合，包括他們的后代，或設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容。，具體有3種用法：
- .text() 得到匹配元素集合中每個(gè)元素的合并文本，包括他們的后代
- .text( textString ) 用于設(shè)置匹配元素內(nèi)容的文本
- .text( function(index, text) ) 用來返回設(shè)置文本內(nèi)容的一個(gè)函數(shù)
注意事項(xiàng)：
.text()結(jié)果返回一個(gè)字符串，包含所有匹配元素的合并文本
.html與.text的異同:
- .html與.text的方法操作是一樣，只是在具體針對處理對象不同
- .html處理的是元素內(nèi)容，.text處理的是文本內(nèi)容
- .html只能使用在HTML文檔中，.text 在XML 和 HTML 文檔中都能使用
- 如果處理的對象只有一個(gè)子文本節(jié)點(diǎn)，那么html處理的結(jié)果與text是一樣的
- 火狐不支持innerText屬性，用了類似的textContent屬性，.text()方法綜合了2個(gè)屬性的支持，所以可以兼容所有瀏覽器
任務(wù)
在代碼編輯器中第37行填寫相應(yīng)代碼
text
在代碼編輯器中第44行填寫相應(yīng)代碼
text
在代碼編輯器中第50行填寫相應(yīng)代碼
text
在代碼編輯器中第56行填寫相應(yīng)代碼
html
在代碼編輯器中第62填寫相應(yīng)代碼
text
<!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://idcbgp.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>第二個(gè)元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二個(gè)元素</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()是整個(gè)html文檔結(jié)構(gòu)
$('p:first').?( $(".first-div").html() )
</script>
<script type="text/javascript">
//顯示出text方法獲取到的內(nèi)容
//.text()是文本內(nèi)容的合集
$('p:last').?( $(".first-div").text() )
</script>
<script type="text/javascript">
//通過.text()方法替換文本內(nèi)容
$(".left a:first").?('替換第一個(gè)a元素的內(nèi)容')
</script>
<script type="text/javascript">
//通過.html()方法替換html結(jié)構(gòu)
$(".left div:first").?('整個(gè)div的子節(jié)點(diǎn)都被替換了')
</script>
<script type="text/javascript">
//通過.text()的回調(diào)，獲取原本的內(nèi)容，修改，在重新賦值
$(".left a:first").?(function(idnex,text){
return '增加新的文本內(nèi)容' + 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;
}
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
