jquery中html、val與text三者屬性取值的聯繫與區別介紹_jquery

首先，html屬性有兩個方法，一個有參，一個無參

1. 無參html（）：取得第一個符合元素的html內容。這個函數不能用於XML文件。但可以用於XHTML文檔，傳回的是String

範例：

html頁面代碼：

Hello

jquery程式碼：$("div").html();

結果：Hello

2.有參html（val）：設定每個符合元素的html內容。這個函數不能用於XML文件。但可以用於XHTML文件。傳回一個jquery物件

html頁碼：

jquery程式碼：$("div").html("

Nice to meet you

");

結果：[

Nice to meet you

]

其次，text屬性有兩個方法，一個有參，一個無參

1. 無參text（）：取得所有符合元素的內容。結果是由所有符合元素包含的文字內容組合起來的文字。回傳的是String

範例：

html頁碼：

Hello fine

Thank you !

jquery程式碼：$("p").text();

結果：HellofineThankyou!

2.有參text（val）：設定所有符合元素的文字內容,與html() 類似, 但將編碼HTML (將"" 替換成對應的HTML實體).傳回一個jquery物件

html頁碼：Test Paragraph.

jquery程式碼：$("p").text("Some new text.");

結果: [

Some new text.

]

最後，val（）屬性中也有兩個方法，一個有參，一個無參。

1.無參val（）：獲得第一個符合元素的目前值。在 jQuery 1.2 中,可以傳回任意元素的值了。包括select。如果多選，將傳回一個數組，其包含所選的值。

返回的是一個String、 array

例子：

html頁面代碼：

複製代碼 代碼如下:

Single option>
Single2


Multiple option>
Multiple2
Multiple3

jquery代碼：$( "p").append( "Single: " $("#single").val() " Multiple: " $("#multiple").val( ).join(", "));

結果:[

Single:SingleMultiple:Multiple, Multiple3

]

2.有參val（val）：設定每一個符合元素的值。在jQuery 1.2, 這也可以為check,select,radio元件賦值,回傳一個jquery物件

html頁面程式碼：

jquery程式碼：$( "input").val("hello world!");

結果：hello world!

------------------- ----------------------------------------------

總結：

1.如果一個對下拉框的標籤中的option進行賦值，雖然option有value屬性，但是在頁面上option的這個value屬性並不是負責進行在頁面上進行顯示的，而真正能在頁面上進行顯示出來的是option標籤之間的文字域。所以給option標籤賦值要用html()的方法

2.如果對標籤進行賦值，因為input標籤中的value屬性就是負責在頁面上進行顯示的，所以要是對Input標籤的文字賦值並且在瀏覽器解析的時候將文字值在瀏覽器上顯示出來，那麼就要用val()，屬性。