jQuery DOM Manipulation 中text() html() val()的区别

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>

  这就是三个获取&设定内容的方法的区别。

原文地址:https://www.cnblogs.com/niulina/p/5679433.html