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

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

      1. 無參html（）：取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但能夠用於XHTML文檔，返回的是一個String

     例子：

            html頁面代碼：<div><p>Hello</p></div>

           jquery代碼：$("div").html();

          結果：Hello

     2.有參html（val）：設置每個匹配元素的html內容。這個函數不能用於XML文檔。但能夠用於XHTML文檔。返回一個jquery對象

        html頁面代碼：<div></div>

        jquery代碼：$("div").html("<p>Nice to meet you</p>");

        結果：[ <div><p> Nice to meet you</p></div> ]      

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

        1. 無參text（）：取得全部匹配元素的內容。結果是由全部匹配元素包含的文本內容組合起來的文本。返回的是一個String

         例子：

            html頁面代碼：<p><b>Hello</b> fine</p>

                                  <p>Thank you!</p>

           jquery代碼：$("p").text();

           結果：HellofineThankyou!

         2.有參text（val）：設置全部匹配元素的文本內容,與 html() 相似, 但將編碼 HTML (將 "<" 和 ">" 替換成相應的HTML實體).返回一個jquery對象

           html頁面代碼：<p>Test Paragraph.</p>

          jquery代碼：$("p").text("<b>Some</b> new text.");

          結果:[ <p><b>Some</b> new text.</p> ]

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

       1.無參val（）：得到第一個匹配元素的當前值。在 jQuery 1.2 中,能夠返回任意元素的值了。包括select。若是多選，將返回一個數組，其包含所選的值。

                           返回的是一個String、 array

        例子：

            html頁面代碼 ：

 

< p ></ p >< br />
< select  id ="single" >
   < option > Single </ option >
   < option > Single2 </ option >
</ select >
< select  id ="multiple"  multiple ="multiple" >
   < option  selected ="selected" > Multiple </ option >
   < option > Multiple2 </ option >
   < option  selected ="selected" > Multiple3 </ option >
</ select >  

 

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

 

       結果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]

     

         2.有參val（val）：設置每個匹配元素的值。在 jQuery 1.2, 這也能夠爲check,select,radio元件賦值,返回一個jquery對象

 

           html頁面代碼：<input type="text"/>

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

          結果：hello world!