在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)設置值,而且形式是一樣的,大家對比記憶一下。