jQuery的text()、html()和val()函式用法簡單介紹

antzone發表於2017-03-07
jQueryHTML函式

標題中的三個函式具有相似之處，但是它們之間的不同點還是更大的，如果沒有很好地理解可能造成一些誤操作，對於初學者有一定的迷惑性，下面就通過程式碼例項介紹一下它們三者的區別。

基本概念:

text()函式:設定或者返回匹配元素的文字內容。

html()函式:設定或者返回匹配元素的html內容。

val()函式:設定或者匹配表單元素的valuevalue屬性值。

比較難區分的就是html()函式和text()函式，下面通過程式碼例項介紹一下它們之間的區別。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">  
$(document).ready(function(){
  $("#bt").click(function(){
    alert($("#top").text());
    alert($("#top").html());
    $("#middle").text("<strong>新螞蟻部落</strong>");
    $("#bottom").html("<strong>新螞蟻部落</strong>");
  })
})
</script>  
</head>  
<body>  
<div id="top"><strong>螞蟻部落</strong></div>
<div id="middle"></div>
<div id="bottom"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>  
</html>

1.text()函式可以獲取或者設定匹配元素的文字內容:

獲取的是匹配元素的文字內容。

設定內容的時候，如果內容中存在html內容，也會以文字形式顯示，不會被渲染。

2.html()函式可以獲取或者設定匹配元素的html內容:

獲取的內容是匹配元素的html內容。

設定內容的時候，如果內容中存在html內容，則會將其渲染。

相關閱讀:

1.text()函式可以參閱jQuery text()一章節。

2.html()函式可以參閱jQuery html()一章節。 

3.val()函式可以參閱jQuery val()一章節。

相關文章