1.html()
html() 方法设置或返回被选元素的内容(innerHTML)。
当该方法用于返回内容时,则返回第一个匹配元素的内容。
当该方法用于设置内容时,则重写所有匹配元素的内容。
提示:如只需设置或返回被选元素的文本内容,请使用text()方法。
2.text()
text() 方法设置或返回被选元素的文本内容。
当该方法用于返回内容时,则返回所有匹配元素的文本内容(会删除 HTML 标记)。
当该方法用于设置内容时,则重写所有匹配元素的内容。
提示:如需设置或返回被选元素的 innerHTML(文本 + HTML 标记),请使用html()方法。
3.val()
val() 方法返回或设置被选元素的 value 属性。
当用于返回值时:
该方法返回第一个匹配元素的 value 属性的值。
当用于设置值时:
该方法设置所有匹配元素的 value 属性的值。
注意:val() 方法通常与 HTML 表单元素一起使用。
例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 alert($("button").val());//text()、html() 9 }); 10 }); 11 </script> 12 </head> 13 <body> 14 <button value="one">1</button> 15 <button value="two">2</button> 16 </body> 17 </html>
1.当使用val()会返回第一个button的value值,当未设定时,返回被选元素的当前值。
2.设定button的value后,val()返回“one”,即第一个button的value值。
3.当使用text()会返回所有button的内容的组合,即“12”.
4.当使用html()会返回第一个button的html内容。
5.当把14行的内容改为<button value="one"><p>1</p></button>时:
button.val()会返回one
button.text()会返回1
button.html()会返回<p>1</p>
这就是三个获取&设定内容的方法的区别。