在jQuery中，關於元素內容操作共有2組方法：
其中html()和text()用於操作普通標簽，而val()用於操作表單標簽。
在jQuery中，我們可以用html()方法來獲取和設置某個元素中的“HTML內容”。
語法：
$().html() //獲取HTML內容
$().html("HTML內容"); //設置HTML內容
說明：
html()方法跟JavaScript中的innerHTML是一樣的效果，只不過html()是jQuery的實現方式，innerHTML是JavaScript的實現方式。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//使用html()獲取HTML內容
var a = $("#p1").html();
alert(a);
});
$("#btn2").click(function () {
//使用html()設置HTML內容
$("#p2").html("<strong>jQuery入門教程</strong>");
})
})
</script>
</head>
<body>
<p id="p1"><strong> 學習網</strong></p>
<p id="p2"> 學習網</p>
<hr />
獲取p1的值：<input type="button" id="btn1" value="獲取"/><br />
設置p2的值：<input type="button" id="btn2" value="設置"/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
html()方法不僅可以用於獲取元素的HTML內容，也可以用於設置元素的HTML內容。
在jQuery中，我們可以使用text()方法來獲取和設置某個元素的“文本內容”。
語法：
$().text() //獲取文本內容
$().text("文本內容") //設置文本內容
說明：
text()方法跟JavaScript中的innerText是一樣的效果，只不過text()是jQuery的實現方式，innerText是JavaScript的實現方式。
此外還需要注意一點，JavaScript中的innerText屬性並不能在Firefox浏覽器下運行，而jQuery的text()方法支持所有的浏覽器。這也體現了jQuery完美的兼容性。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//使用html()獲取文本內容
var a = $("#p1").text();
alert(a);
});
$("#btn2").click(function () {
//使用html()設置文本內容
$("#p2").text("<strong>jQuery入門教程</strong>");
})
})
</script>
</head>
<body>
<p id="p1"><strong> 學習網</strong></p>
<p id="p2"> 學習網</p>
<hr />
獲取p1的值：<input type="button" id="btn1" value="獲取"/><br />
設置p2的值：<input type="button" id="btn2" value="設置"/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
大家將這個例子的測試結果，跟上面html()方法的例子對比一下，好好理解一下html()方法和text()方法的區別。
關於html()和text()兩個屬性的區別，我們用一個表格很能很清晰看出來了：
表單元素不像普通元素，它們的值都是通過表單元素的value屬性來傳遞的。因此我們不能使用html()和text()這兩種方法來獲取元素的內容（值）。
在jQuery中，我們可以使用val()來獲取或設置“表單元素”的值。
語法：
$().val() //獲取表單元素
$().val("表單元素的值") //設置表單元素
舉例1：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//使用val()獲取表單元素的值
var a = $("#txt1").val();
alert(a);
});
$("#btn2").click(function () {
//使用val()設置表單元素的值
$("#txt2").val("jQuery入門教程");
})
})
</script>
</head>
<body>
<input id="txt1" type="text" value=" 學習網"/><br />
<input id="txt2" type="text"/><br />
獲取第1個文本框的值：<input id="btn1" type="button" value="獲取" /><br />
設置第2個文本框的值：<input id="btn2" type="button" value="設置" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
val()不僅可以用來獲取表單元素的值，也可以用來設置表單元素的值。
舉例2：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
var a = $("#lvye").html();
var b = $("#lvye").text();
$("#txt1").val(a);
$("#txt2").val(b);
})
</script>
</head>
<body>
<div id="lvye"><strong> 學習網</strong></div>
innerHTML內容是：<input id="txt1" type="text"/><br/>
innerText內容是：<input id="txt2" type="text"/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
對於普通元素，我們可以使用html()和text()來獲取元素的內容或者值。但是對於表單元素來說，想要“獲取”或者“設置”元素的值，就必須用val()方法。
對於html()、text()、val()這3個方法都可以實現同時實現2點：（1）獲取值；（2）設置值，而且形式是一樣的，大家對比記憶一下。