jquery中html、val與text三者屬性取值的聯(lián)系與區(qū)別介紹
首先,html屬性中有兩個方法,一個有參,一個無參
1. 無參html():取得第一個匹配元素的html內(nèi)容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔,返回的是一個String
例子:
html頁面代碼:<div><p>Hello</p></div>
jquery代碼:$("div").html();
結(jié)果:Hello
2.有參html(val):設(shè)置每一個匹配元素的html內(nèi)容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔。返回一個jquery對象
html頁面代碼:<div></div>
jquery代碼:$("div").html("<p>Nice to meet you</p>");
結(jié)果:[ <div><p> Nice to meet you</p></div> ]
其次,text屬性中有兩個方法,一個有參,一個無參
1. 無參text():取得所有匹配元素的內(nèi)容。結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來的文本。返回的是一個String
例子:
html頁面代碼:<p><b>Hello</b> fine</p>
<p>Thank you!</p>
jquery代碼:$("p").text();
結(jié)果:HellofineThankyou!
2.有參text(val):設(shè)置所有匹配元素的文本內(nèi)容,與 html() 類似, 但將編碼 HTML (將 "<" 和 ">" 替換成相應(yīng)的HTML實體).返回一個jquery對象
html頁面代碼:<p>Test Paragraph.</p>
jquery代碼:$("p").text("<b>Some</b> new text.");
結(jié)果:[ <p><b>Some</b> new text.</p> ]
最后,val()屬性中也有兩個方法,一個有參,一個無參。
1.無參val():獲得第一個匹配元素的當(dāng)前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選,將返回一個數(shù)組,其包含所選的值。
返回的是一個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(", "));
結(jié)果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
2.有參val(val):設(shè)置每一個匹配元素的值。在 jQuery 1.2, 這也可以為check,select,radio元件賦值,返回一個jquery對象
html頁面代碼:<input type="text"/>
jquery代碼:$("input").val("hello world!");
結(jié)果:hello world!
-----------------------------------------------------------------
總結(jié):
1.如果一個對下拉框的<select>標(biāo)簽中的option進行賦值,<option name="",value=""></option>雖然option有value屬性,但是在頁面上option的這個value屬性并不是負(fù)責(zé)進行在頁面上進行顯示的,而真正能在頁面上進行顯示出來的是option標(biāo)簽之間的文本域。所以給option標(biāo)簽賦值要用html()的方法
2.如果對<input id="pro" name="province" value="安徽省">標(biāo)簽進行賦值,因為input標(biāo)簽中的value屬性就是負(fù)責(zé)在頁面上進行顯示的,所以要是對Input標(biāo)簽的文本賦值并且在瀏覽器解析的時候?qū)⑽谋局翟跒g覽器上顯示出來,那么就要用val(),屬性。
- jquery獲取ASP.NET服務(wù)器端控件dropdownlist和radiobuttonlist生成客戶端HTML標(biāo)簽后的value和text值
- jQuery獲取文本節(jié)點之 text()/val()/html() 方法區(qū)別
- 『jQuery』.html(),.text()和.val()的概述及使用
- jquery text(),val(),html()方法區(qū)別總結(jié)
- 淺析JQuery中的html(),text(),val()區(qū)別
- JQuery中的html()、text()、val()區(qū)別示例介紹
- jQuery中text() val()和html()的區(qū)別實例詳解
相關(guān)文章
jQuery Easy UI中根據(jù)第一個下拉框選中的值設(shè)置第二個下拉框是否可以編輯
這篇文章主要介紹了jQuery Easy UI中根據(jù)第一個下拉框選中的值設(shè)置第二個下拉框是否可以編輯的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-11-11jQuery對象和Javascript對象之間轉(zhuǎn)換的實例代碼
jQuery對象和Javascript對象之間轉(zhuǎn)換的實例代碼,需要的朋友可以參考一下2013-03-03用jQuery向div中添加Html文本內(nèi)容的簡單實現(xiàn)
下面小編就為大家?guī)硪黄胘Query向div中添加Html文本內(nèi)容的簡單實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07jQuery實現(xiàn)在新增加的元素上添加事件方法案例分析
這篇文章主要介紹了jQuery實現(xiàn)在新增加的元素上添加事件方法,結(jié)合具體實例形式分析了jQuery針對新增加的元素添加事件的實現(xiàn)技巧與注意事項,需要的朋友可以參考下2017-02-02Jquery選擇子控件"大于號"和" "區(qū)別介紹及使用示例
Jquery選擇子控件”>“:在給定的父元素下匹配所有的子元素;另一個就是在給定的祖先元素下匹配所有的后代元素,具體概述及使用示例如下,感興趣的朋友可以參考下哈2013-06-06通過JQuery,JQueryUI和Jsplumb實現(xiàn)拖拽模塊
這篇文章主要介紹了通過JQuery,JQueryUI和Jsplumb實現(xiàn)拖拽模塊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,,需要的朋友可以參考下2019-06-06