- .html()用为读取和修改元素的HTML标签
- .text()用来读取或修改元素的纯文本内容
- .val()用来读取或修改表单元素的value值。
.html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不 过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读 取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多 个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但 是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。
val()---一般 用在input上,而不用在其他元素,用来获取input或者是select的值
html()和text()可用在多种元素上,但是html()相当于依据源代码返回,也就是在返回的内容中会包含各种tag,而text()则相当于是依据页面显示返回,返回的内容是出去各种tag之间的内容html属性中有两个方法,一个有参,一个无参。
无参时是用来获取内容,举例如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("#btn1").click(function(){ 9 alert("Text: " + $("#test").text()); 10 }); 11 $("#btn2").click(function(){ 12 alert("HTML: " + $("#test").html()); 13 }); 14 }); 15 </script> 16 </head> 17 18 <body> 19 <p id="test">This is some <b>bold</b> text in a paragraph.</p> 20 <button id="btn1">Show Text</button> 21 <button id="btn2">Show HTML</button> 22 </body> 23 </html>
运行结果如下:
1.点击showText
2.点击showHtml
有参时替换选中元素的内容:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("#btn1").click(function(){ 9 $("#test1").text("Hello world!"); 10 }); 11 $("#btn2").click(function(){ 12 $("#test2").html("<b>Hello world!</b>"); 13 }); 14 $("#btn3").click(function(){ 15 $("#test3").val("Dolly Duck"); 16 }); 17 }); 18 </script> 19 </head> 20 21 <body> 22 <p id="test1">This is a paragraph.</p> 23 <p id="test2">This is another paragraph.</p> 24 <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> 25 <button id="btn1">Set Text</button> 26 <button id="btn2">Set HTML</button> 27 <button id="btn3">Set Value</button> 28 </body> 29 </html>
点击前,如下:
点击set Text:
点击set value:
点击set HTML: