jquery的html,text,val

來源:互聯網
上載者:User

標籤:idt   htm   依據   pad   使用   顯示   func   表單元素   tip   

  1. .html()用為讀取和修改元素的HTML標籤
  2. .text()用來讀取或修改元素的純文字內容
  3. .val()用來讀取或修改表單元素的value值。

這三個方法功能上的對比

  1. .html(),.text(),.val()三種方法都是用來讀取選定元素的內容;只不過.html()是用來讀取元素的HTML內容(包括其Html標籤),.text()用來讀取元素的純文字內容,包括其後代元素,.val()是用來讀取表單元素的"value"值。其中.和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上;另外.html()方法使用在多個元素上時,唯讀取第一個元素;.val()方法和.html()相同,如果其應用在多個元素上時,只能讀取第一個表單元素的"value"值,但是.text()和他們不一樣,如果.text()應用在多個元素上時,將會讀取所有選中元素的常值內容。
  2. .html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內容,如果三個方法同時運用在多個元素上時,那麼將會替換所有選中元素的內容。
  3. .html(),.text(),.val()都可以使用回呼函數的傳回值來動態改變多個元素的內容。
 

例子:<div id="div">

 

    <p>here is a paragram</p>
    <div>here is a big DIV</div>
</div>

function showVal()
{
   var div = $("#div");
    alert("showVal():  "+div.val());
顯示為空白
}
function showHtml()
{

   var div = $("#div");
   alert("showHtml():  "+div.html());
顯示為:
<p>here is a paragram</p>
 <div>here is a big DIV</div>
}
function showText()
{var div = $("#div");
    alert("showText():  "+div.text());
顯示為:
here is a paragram
here is a big DIV
    }
總結:val()---一般 用在input上,而不用在其他元素,用來擷取input或者是select的值
html()和text()可用在多種元素上,但是html()相當於依據原始碼返回,也就是在返回的內容中會包含各種tag,而text()則相當於是依據頁面顯示返回,返回的內容是出去各種tag之間的內容

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

 

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

例子: //多選下拉框,$(‘#multiple‘).val()返回數組

 

//$("#multiple").val().join(", "))以,串連數組中每個值

 

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(", "));

 

          2.有參val(val):設定每一個匹配元素的值。在 jQuery 1.2, 這也可以為check,select,radio元件賦值,返回一個jquery對象   

 

   html頁面代碼:

         <input type="text"/>

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

          結果:hello world!

jquery的html,text,val

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.