Introduction to the connection and difference between the values ​​of html, val and text attributes in jquery_jquery

First of all, there are two methods in the html attribute, one with parameters and one without parameters

1. No parameters html(): Get the html content of the first matching element. This function cannot be used with XML documents. But it can be used for XHTML documents, returning a String

Example:

html page code:

jquery code: $("div").html();

Result: Hello

2. Parameter html (val): Set the html content of each matching element . This function cannot be used with XML documents. But it can be used for XHTML documents. Return a jquery object

html page code:

jquery code: $("div").html("

Nice to meet you< ;/p>");

Result: [

]

Secondly, the text attribute has Two methods, one with parameters and one without parameters

1. No parameters text(): Get the content of all matching elements. The result is the text combined from the text content contained in all matching elements. What is returned is a String

example:

html page code:

Hello fine

jquery code: $("p").text();

Result: HelloofineThankyou!

2. There is text parameter (val): Sets the text content of all matching elements, similar to html(), but will encode HTML (replace "<" and ">" with corresponding HTML entities). Returns a jquery object

html page code:

Test Paragraph.

jquery code: $("p").text("Some new text.") ;

Result:[

Some new text.

]

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

1. Parameterless val(): Get the current value of the first matching element. In jQuery 1.2, you can return the value of any element. Including select. If multiple selections are made, an array containing the selected values ​​will be returned.

returns a String, array

Example:

html page code:

Copy code The code is as follows:

Single
Single2


Multiple
Multiple2
Multiple3
< /select>

jquery code: $("p").append( "Single: " $("#single").val() " < ;b>Multiple: " $("#multiple").val().join(", "));

Result:[

Single: SingleMultiple:Multiple, Multiple3

]

2. Parameter val (val): Set the value of each matching element. In jQuery 1.2, this can also assign values ​​to check, select, and radio elements and return a jquery object

html page code:

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

Result: hello world!

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

Summary:

1. If one assigns a value to the option in the tag of the drop-down box, Although option has a value attribute, the value attribute of option on the page is not responsible for displaying it on the page. What can really be displayed on the page is the text field between the option tags. Therefore, to assign a value to the option tag, use the html() method

2. If you assign a value to the tag, because the input tag The value attribute in is responsible for displaying it on the page, so if you assign a value to the text of the Input tag and display the text value on the browser when the browser parses it, you must use the val() attribute.