Introduction to the relation and difference between the value of HTML val and text in jquery

First, there are two methods in an HTML attribute, one with arguments and one without

1. Parameter free HTML () : gets the HTML content of the first matched element. This function cannot be used with XML documents. But it can be used with XHTML documents, and it returns a String

Example:

HTML page code: < Div> < P> Hello< / p> < / div>

$("div").html();

Results: Hello!

2. Parameter HTML (val) : sets the HTML content of each matched element. This function cannot be used with XML documents. But it can be used with XHTML documents. Returns a jquery object

HTML page code: < Div> < / div>

Jquery code: $("div").html("< P> Nice to meet you< / p>" );

Results: [< div> < p> Nice to meet you< / p> < / div>]

Second, the text property has two methods, one with arguments and one without

1. No arguments text () : gets the contents of all matched elements. The result is a text composed of the text content contained in all matched elements. It returns a String

Example:

HTML page code: < P> < B> Hello< / b> Fine< / p>

< P> Thank you! < / p>

$("p").text();

Results: HellofineThankyou!

2. Text (val) : sets the text content of all matched elements, similar to HTML (), but encodes HTML ("<") And ">" Returns a jquery object

HTML page code: < P> The Test com.lowagie.text.paragraph. < / p>

Jquery code: $("p").text("< B> Some< / b> New text. ");

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

Finally, there are two methods in the val () attribute, one with arguments and one without.

Val () : gets the current value of the first matched element. In jQuery 1.2, you can now return the value of any element. Including the select. If multiple, an array containing the selected value is returned.

The return is a String, array

Example:

HTML page code:

 
<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 code: $("p").append("< B> Single: < / b> "+ $("#single"). Val () +" < B> Multiple: < / b> "+ $(" # multiple"). The val (). The join () ", ");

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

2. Parameter val (val) : sets the value of each matched element. In jQuery 1.2, this can also assign values to check,select, and radio elements, returning a jQuery object

HTML page code: < Input type = "text" / >

$("input").val("hello world!") );

Result: hello world!

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

Conclusion:

1. If a pair of < Select> Option in the tag is assigned, < The option name = ", "value =" "> < / option> Although option has a value attribute, the value attribute of option on the page is not responsible for displaying on the page, but the text field between option tags. So the HTML () method is used to assign the option tag

2. If true Input id = "pro" name = "province" value = "anhui province" > Because the value attribute in the input tag is responsible for displaying the text on the page, if you assign the text of the input tag and display the text value in the browser during the browser parsing, then use the val() attribute.