Differences between html, val, and text in jQuery, jqueryval

Differences between html, val, and text in jQuery, jqueryval

In the development of the project, the difference between the jquerycode and the jquery.html (),. text (), and. val () is written in demofield.

 

1. html () gets the content of the first matching element. In short, it is everything contained in the obtained tag.

If there is val in the brackets, the simplest understanding is to replace all the content obtained in the previous step with val in the brackets. Let's look at the demo.

1 <div id = "divTest" value = '2'> 2. This is the content of the div! 3 <label id = "lblText"> 4. This is the label content! 5 </label> 6 <div id = "divTest2"> 7. The second div content! 8 </div> 9 </div>

This is the html document structure. Now we can execute the following js Code to see what we have obtained.

1 $ ("# divTest" ).html () // The obtained content: this is the content of the div! <Label id = "lblText"> This is the label content! </Label> <div id = "divTest2"> the second div content! </Div>

1 $ ("# divTest" ).html ("I want to modify it! ") // Execute the modification

After the above modification, let's get it.

1 $ ("# divTest" ).html () // The obtained content: I want to modify it!

 

Note: The html () method can be used for XHTML documents, but cannot be used for XML documents!

 

2. text (): gets the content of all matching elements. The result is a combination of the text content contained by all matching elements. Similarly, text (val) is the text content that sets all matching elements.

　　

1 $ ("# divTest"). text () // The obtained content: this is the content of the div! This is the label content! The second div content! 2 // you can see what is obtained in the tag, but the tag is not used.

Note: This method is valid for both HTML and XML documents.

 

3. val () is often used to operate standard form component objects, such as buttons, text, and hidden.

For example, a select element and a hidden element are added.

1     <select id="selectVal">2         <option value="1" selected="selected">1</option>3         <option value="2" >2</option>4     </select>5     <input type="hidden" id="hidVal" value="1"/>

Now let's get their values.

1 $ ("# selectVal"). val () // The obtained value is: 1. Similarly, this is $ ("# hidVal"). val ()

　　

Sometimes a value attribute is set in a div during development, so we can use

　　

1 $("#divTest").attr('value')

 

 

If anything is wrong, please make an axe!

 

What are the differences between text (), html (), and val () in jQuery?

Text (): obtains or modifies the text of a specified element.
Html (): gets or modifies the html elements and text of a specified element.
Val (): Get or change the value of a specified Element (usually a form element)

The above three are all the syntaxes in the jquery class library.

The second problem is that there is basically no difference. The function is to obtain the value of the current object (usually a form element)
However, this. value is the native Syntax of js, and $ (this). val () is the syntax of jquery.
Using this. value removes the need to introduce any library files, while $ (this). val () requires the introduction of jquery library files.

Regarding the val (), text (), html () Issues in jquery, I read some articles written by the boss and tried it myself. How can this problem be solved?

Is it a sequence problem? Put the script under html, or put the script under $ (function (){
Alert ("val:" + $ ("# atext"). val (); // test val () method result val: undefined
Alert ("asval:" + $ ("# as"). val (); // asval: undefined
Alert ("text:" + $ ("# atext"). text (); // test the text () method result text:
Alert ("astext:" + $ ("# as"). text (); // astext
Alert ("html:" + $ ("# atext" ).html (); // test html () Result html: null
Alert ("ashtml:" + $ ("# as" example .html (); // ashtml: null
Alert ("value:" + $ ("# atext"). value); // test value result value: undefined

}); Try