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

學了一段時間的Jquery了但是我老是分不太清html、val、text這三者之間的屬性以及之間的聯絡與區別，下面我就給大家舉例一些簡單的來區分jquery這三者之間的關係 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! 

 

一 val()適合的頁面的input元素如下：
在jQuery當中用法：

$("#name").val() 一起jquery,17jquery 

1 文字框: 

<input type="text" id="name"/> 
內容來自17jquery
 

2 文本域: 

<textarea  id="textArea"/> 17jquery.com 

3 下拉框:

         <select id="address">         <option value="0">北京</option>         <option value="1">成都</option>         <option value="2">昆明</option>           </select> 一起jquery,17jquery 

4 檔案框: 

<input type="file" name="file" id="file"/> 17jquery.com 

5 按鈕:    

<input type="button" id="bt" value="中國"/> 內容來自17jquery 

特殊情況：
6 單選框:

<input type="radio" name="sex"  value="0" checked/>男<input type="radio" name="sex"  value="1" />女<input type="radio" name="sex"  value="2" />人妖 
17jquery.com
 

jQuery擷取方式如下：

//$('input[type=radio]:checked').val();//$('input[type=radio][name=sex]:checked').val();//$('input[type=radio][name=sex][checked]').val();//$('input[type=radio][@name=sex][checked]').val();//$('input[type=radio]@name=sex]:checked').val();$(':radio[name=sex]:checked').val(); 17jquery.com 

7 多複選框:

<input type="checkbox" name="love" value="電影"/>電影<input type="checkbox" name="love" value="圖書"/>圖書<input type="checkbox" name="love" value="學習" checked/>學習 <input type="checkbox" name="love" value="編程"/>編程 一起jquery,17jquery 

jQuery擷取方式如下：

 var arr = [];   // $('input[type=checkbox][name=love]:checked').each(function()   //所有為checked狀態的多選框 $(':checkbox[name=love]:checked').each(function()    {  arr.push(this.value);    });   //arr.toString(); 一起jquery,17jquery 

8 多下拉框

<select id="address2" multiple >      <option value="0">北京</option>      <option value="1">石家莊</option>       <option value="2">保定</option></select> 17jquery.com 

jQuery擷取方式如下：

var arr = [];       $('#address2>option:selected').each(function()     {  //直接用this可提高速度,如去掉上面的：selected就可用下面這種方式 //if(this.selected == true){arr.push(this.value + "," + this.text);