快捷導(dǎo)航

jquery中html、val與text三者屬性取值的聯(lián)系與區(qū)別介紹

更新時(shí)間：2013年12月29日 16:51:44 作者：

本文為大家詳細(xì)介紹下jquery中，html、val與text三者屬性取值的聯(lián)系與區(qū)別，下面有個(gè)不錯(cuò)的示例，感興趣的朋友不要錯(cuò)過(guò)

首先，html屬性中有兩個(gè)方法，一個(gè)有參，一個(gè)無(wú)參

1. 無(wú)參html（）：取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔，返回的是一個(gè)String

例子：

html頁(yè)面代碼：<div><p>Hello</p></div>

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

結(jié)果：Hello

2.有參html（val）：設(shè)置每一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。返回一個(gè)jquery對(duì)象

html頁(yè)面代碼：<div></div>

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

結(jié)果：[ <div><p> Nice to meet you</p></div> ]

其次，text屬性中有兩個(gè)方法，一個(gè)有參，一個(gè)無(wú)參

1. 無(wú)參text（）：取得所有匹配元素的內(nèi)容。結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來(lái)的文本。返回的是一個(gè)String

例子：

html頁(yè)面代碼：<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實(shí)體).返回一個(gè)jquery對(duì)象

html頁(yè)面代碼：<p>Test Paragraph.</p>

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

結(jié)果:[ <p><b>Some</b> new text.</p> ]

最后，val（）屬性中也有兩個(gè)方法，一個(gè)有參，一個(gè)無(wú)參。

1.無(wú)參val（）：獲得第一個(gè)匹配元素的當(dāng)前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選，將返回一個(gè)數(shù)組，其包含所選的值。

返回的是一個(gè)String、 array

例子：

html頁(yè)面代碼：

復(fù)制代碼代碼如下:

 
<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è)置每一個(gè)匹配元素的值。在 jQuery 1.2, 這也可以為check,select,radio元件賦值,返回一個(gè)jquery對(duì)象

html頁(yè)面代碼：<input type="text"/>

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

結(jié)果：hello world!

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

總結(jié)：

1.如果一個(gè)對(duì)下拉框的<select>標(biāo)簽中的option進(jìn)行賦值，<option name="",value=""></option>雖然option有value屬性，但是在頁(yè)面上option的這個(gè)value屬性并不是負(fù)責(zé)進(jìn)行在頁(yè)面上進(jìn)行顯示的，而真正能在頁(yè)面上進(jìn)行顯示出來(lái)的是option標(biāo)簽之間的文本域。所以給option標(biāo)簽賦值要用html()的方法

2.如果對(duì)<input id="pro" name="province" value="安徽省">標(biāo)簽進(jìn)行賦值，因?yàn)閕nput標(biāo)簽中的value屬性就是負(fù)責(zé)在頁(yè)面上進(jìn)行顯示的，所以要是對(duì)Input標(biāo)簽的文本賦值并且在瀏覽器解析的時(shí)候?qū)⑽谋局翟跒g覽器上顯示出來(lái)，那么就要用val()，屬性。

您可能感興趣的文章: