"JQuery". Overview and use of the HTML (),. Text () and. Val () _jquery

This section focuses on using the. html (),. Text () and. Val () Three methods in jquery to read, modify the HTML structure of elements, the textual content of elements, and methods of value values for form elements. jquery provides us with a variety of ways to manipulate the HTML structure of elements and the textual content of elements, for example, you can add new elements to the inner, surrounding, front, or back of an existing element, or substitute one element for another, or you can read or modify the content or structure of an element. Sometimes we are vague, we don't know whether to add content to the element or add an element, for example, we need to give an existing element to effectively increase the content of the element.

Here we share with you how to add, delete, and replace elements, and jquery gives us three ways to manipulate the structure and content of elements:

1. . HTML (): Reads and modifies the HTML content of an element, details. html ();
2. . Text (): reads and modifies the textual content of an element, details. text ();
3. . Val (): Reads and modifies value field values for a FORM element, details. val ().

As you'll see, these methods make it easy for you to read or modify the original content of the element or read and modify any HTML value, or you can easily read or modify the Value field values in the form.

HTML structure of an ACTION element ——. HTML ()

The. html () method in jquery allows you to read and modify the contents of an element's HTML in three main ways:. html (),. html (htmlstring),. html (function (index,html) {...}), Let's take a look at their specific use in turn.

1, read an element of HTML structure ——. HTML ()

Grammar:

$ ("Element"). html (); 

return value:string

Description

The. HTML () method is used to get the HTML content of any element, and if the selector selects more than one element at a time, it can read only the HTML content of the first element. In addition, this method is not valid for XML party files.

To read the HTML content of an element, you first select the element and then invoke the. html () method in jquery, for example, in the following code, we select the P element in Div.demo, and then read the HTML content of this element through. html (), such as:

HTML Code:

Copy Code code as follows:

<div class= "Demo" >
<p> This is a paragraph element that contains a LINK element <a href= "#" >W3CPLUS</a></p>
</div>

jQuery Code

Copy Code code as follows:

$ (document). Ready (function () {
Alert ("The HTML structure of the P element in Div.demo:" +$ ("Div.demo P"). html ());
});

Results

The above code pops up a warning box that shows the elements in the original HTML tag, as shown in the previous illustration. It's Div.demo, there's only one P element, what if there are multiple? What's going to happen is that we don't have to look at once:

HTML Markup

Copy Code code as follows:

<div class= "Demo" >
<p> I am the first P element in Div.demo: <a href= "#" > I'm in the first P </a></p>
<p> This is a paragraph element that contains a LINK element <a href= "#" >W3CPLUS</a></p>
</div>

JQuery Code

Copy Code code as follows:

$ (document). Ready (function () {
Alert ("The HTML structure of the P element in Div.demo:" +$ ("Div.demo P"). html ());
});

effect

From the above effect diagram we can see clearly that the same piece of jquery code, the results are different. Here again, if you call the. HTML () method of multiple selected elements, it reads only the first element, in other words: If the selector matches more than one element, then only the HTML content of the first matching element is fetched.

2, modify the HTML content of an element ——. HTML (htmlstring)

Grammar:

$ ("Element"). HTML (htmlstring);//htmlstring is an HTML string used to set each matching element 

return Value:jquery Object

Description

The HTML content of the first matching element is reset, and any content of those elements is completely superseded by the new content. Based on the above example, replace the HTML content of the original paragraph completely:

HTML Markup

Copy Code code as follows:

<div class= "Demo" >
<p> I am the first P element in Div.demo: <a href= "#" > I'm in the first P </a></p>
<p> This is a paragraph element that contains a LINK element <a href= "#" >W3CPLUS</a></p>
</div>

jQuery Code:

Copy Code code as follows:

$ (document). Ready (function () {
$ ("Div.demo p"). html ('

});

Effect:

From the above effect, we know that if the. html (Htmlstrong) method is used to match on multiple elements, then the HTML content of the multiple matching elements will be replaced and replaced with the same HTML structure, that is, the. html (htmlstring) method specifies the " Htmlstring "structure. In other words, if you use the. html (htmlstring) method to select more than one element, the HTML content of the selected elements will be replaced by the "htmlstring" in the. html (htmlstring) method. As shown in the figure above.

3. Use a callback function to replace the HTML content of an element

Grammar:

$ ("Element"). HTML (function (index,html) {...}); 

return Value:jquery Object

Description

Used to return a function that sets HTML content. Receives the index position of the element and the element's old HTML as a parameter.

Using a callback function to replace the HTML content of an element, you must meet the following two conditions:

1. The index value position of the current element (the index value starts at 0);
2. The old HTML content of the current element.

The return value of the function is then used as an alternative to HTML. This is a convenient way, if you want to replace the content of multiple elements and don't want to change to something different than the one above, then we can use this method to replace multiple elements with different HTML content based on the location of the element or the existing content (or both). Let's take a look at an example:

HTML Markup

Copy Code code as follows:

<div class= "Demo" >
<p><a href= "#" > I am inside the first p </a></p>
<p><a href= "#" >W3CPLUS</a></p>
</div>

jQuery Code:

Copy Code code as follows:

$ (document). Ready (function () {
$ ("Div.demo p"). html (function (index,oldhtml) {
Return "I am the paragraph" + (Index+1) + ":" + oldhtml;
});
});

Effect:

The plain text content of the action element ——. text ()

The previous. HTML () method allows you to read or modify the HTML content of the element-including the HTML tag of the element-and the. Text () method in jquery is simply an operation on the element's plain text. Like the. html () method, he includes three ways to use it:

1, read the text content ——. text ()

Grammar:

$ ("Element"). Text (); 

return Value: returns a string;

Description

Gets a combination of textual content for each element in the matching element collection, including their descendants. The. Text () method differs from the. html () method, which can be used in both XML and HTML documents. Text () The result of a method is text that is combined with the text content contained by all matching elements (because different browsers are different from the HTML parser, text wrapping and other spaces that are returned may vary.) )

The. Text () and. html () methods are almost identical, such as:

HTML Markup

Copy Code code as follows:

<div class= "Demo" >
<p><a href= "#" >W3CPLUS</a></p>
</div>

jQuery Code:

Copy Code code as follows:

$ (document). Ready (function () {
Alert (". Text () reads:" + $ ("Div.demo p"). text ());
});

Effect:

From the above results we learned that using the. Text () method, we read only the plain text content of the element, including his descendant elements, and the HTML tags in this element (including the HTML tags of its descendant elements) are stripped out, leaving only textual content.

. Text () and. HTML () methods can select more than one element at a time. But there is a difference:. html () matches more than one element, only the first of the matching elements is read, and the. Text () method, when he matches multiple elements, reads the contents of multiple elements at the same time, such as:

HTML Markup

Copy Code code as follows:

<div class= "Demo" >
<p><a href= "#" >W3CPLUS</a></p>
<p> I is paragraph two: <a href= "#" >W3CPLUS</a></p>
</div>

JQuery Code

Copy Code code as follows:

$ (document). Ready (function () {
Alert (". Text () Method:" + $ ("Div.demo p"). text ());
Alert (". HTML () Method:" + $ ("Div.demo p"). html ());
});

Effect:

2, the replacement text content ——. text (textstring)

Grammar

$ ("Element"). Text (textstring);//textstring used to set the content of the matching element 

return Value:jquery Object

Description

The. Text (TextString) method and the. html (htmlstring) method are all the same to replace the contents of elements, and they are different:. The HTML (htmlstring) method replaces the original content with HTML tags as new HTML tags, while. Text (textstring) converts HTML tags into plain text content instead of the old content of the element. In other words, if the. Text (TextString) method contains a label for HTML, this method replaces < with <,> Replace with >. We change. html () to. Text () based on the previous. HTML (htmlstring) instance.

HTML Markup

Copy Code code as follows:

<div class= "Demo" >
<p><a href= "#" >W3CPLUS</a></p>
<p> I is paragraph two: <a href= "#" >W3CPLUS</a></p>
</div>

JQuery Code

Copy Code code as follows:

$ (document). Ready (function () {
$ ("Div.demo p"). Text ('

});

Effect:

As you can see on the effect map, the. Text (TextString) method replaces the old content of an element with an HTML tag as plain text, and the. html (htmlstring) method is completely different, and everyone can go with the previous. HTML (htmlstring) For comparison. But they have one thing in common: if you match multiple elements, using the. Text (TextString) replaces the contents of the matched elements with the same content.

3, use a callback function to replace the text content of an element

The. Text () method, like the. html () method, also uses a callback function to dynamically replace the contents of multiple elements without replacing multiple elements with the same content as. Text (TextString).

Grammar

$ ("Element"). Text (function (Index,text) {...}); 

return value:jquery to Image

Description

Used to return a function that sets the text content. Receives the index position of the element and the old text value of the element as an argument. To replace the contents of an element with a callback function, you must meet the following two conditions:

1. The index value position of the current element (the index value starts at 0);
2. The old text content of the current element.

The return value of the function is then used as the plain text content of the substitution element. This is convenient, if you want to replace the contents of multiple elements, and instead of switching to the same content as above and replacing it with different content, we can use this method to replace multiple elements with different waking text content based on the location of the element or the existing content (or both). Let's take a look at an example:

HTML Markup

Copy Code code as follows:

<div class= "Demo" >
<p><a href= "#" > I am inside the first p </a></p>
<p><a href= "#" >W3CPLUS</a></p>
</div>

jQuery Code:

Copy Code code as follows:

$ (document). Ready (function () {
$ ("Div.demo p"). Text (function (index,oldtext) {
Return (index+1) + "." + OldText;
});
});

effect

Action form field value value ——. val ()

The. html () and. Text () described earlier are not able to operate on the input element, so let's look at A. Val () method. This method, like the. Text () method, can read and modify the value of the form field "value".

1. Get the form element value ——. val ()

Grammar

$ ("Element"). Val (); 

return Value: A string or array that will be returned

Description

The. Val () method is used primarily to get the value of a form element. As for the "<select multiple=" multiple ">" element, the. Val () method returns an array containing each selected option, for the next selection box "<select>" and the check box, the radio ([type= CheckBox "],[type=" Radio]) you can use the ": Selected" and ": checked" selectors to get the values. Specifically we look at a few examples:

HTML Markup

Copy Code code as follows:

<div id= "Colorradio" >
<input type= "Radio" name= "Color" id= "Rd1" value= "Red"/>red
<input type= "Radio" name= "Color" id= "Rd2" value= "Yello"/>yello
<input type= "Radio" name= "Color" id= "Rd3" value= "Blue"/>blue
</div>
<div id= "Sizecheck" >
<input type= "checkbox" name= "Size" id= "CH1" Value= "PT"/>10 PT
<input type= "checkbox" name= "Size" id= "CH2" Value= "PT"/>12 PT
<input type= "checkbox" name= "Size" id= "CH3" Value= "PT"/>14 PT
</div>
<input type= "button" id= "submitbtn" value= "Get Value"/>

JQuery Code

Copy Code code as follows:

$ (document). Ready (function () {
$ (' #submitBtn '). Click (function () {
Alert ($ (' #colorRadio Input:radio '). Val ());
Alert ($ (' #sizeCheck Input:checkbox '). Val ());
});
});

effect

. val () returns the first of the matching set of elements, sometimes you want to return the value of the selected radio or checkbox, and if you only use the. Val () method At this point, the return will be the first value, which has nothing to do with the Select option, as shown in the previous illustration, if you want to return the value you selected , you need to do something like this to get the selected value:

Copy Code code as follows:

$ (document). Ready (function () {
$ (' #submitBtn '). Click (function () {
Alert ($ (' input:radio[name=color]:checked '). Val ());
Alert ($ (' input:checkbox[name=size]:checked '). Val ());
});
});

The Radio (radio) will return the value in your selection, but the checkbox is not, if you select multiple checkbox at the same time. Val () returns only the value from the first selection, and if no value is selected, then "undefined" is returned. I just said that when there are multiple checks for a checkbox, the rebate will be just the first value, and if we need to return all of them, we need to traverse the checkbox using each ()

Copy Code code as follows:

$ (document). Ready (function () {
$ (' #submitBtn '). Click (function () {
Alert ($ (' input:radio[name=color]:checked '). Val ());
$ (' input:checkbox[name=size]:checked '). each (function () {
Alert ($ (this). Val ());
});
});
});

Also, Val () is divided into two cases when "select", when the. Val () method is applied to the <select> element, the selected value is returned; the other is when the. Val () method is applied to the <select multiple= "multiple" > element, Returns an array that contains each of the selected option. Look at one of the following examples.

HTML Markup

Copy Code code as follows:

<form action= "" method= "POST" >
<select id= "Dropdown" >
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</select>
<select id= "ListBox" multiple= "multiple" >
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</select>
<input type= "button" id= "Getselectvalue" value= "Get Value"/>
</form>

JQuery Code

Copy Code code as follows:

$ ("#getSelectValue"). Click (function () {
Alert ($ ("#dropdown"). Val ());
var colors = $ ("#listbox"). Val ();
for (var key in colors) {
Alert (Colors[key]);
}
});

2. Replace the value of a FORM element ——. val (value)

Grammar

$ ("Element"). val (value);//value represents a text string or a string array that sets the value of each matching element. 

return value jquery object

Description

This method is often used to set the value of a form field, and for the "<select multiple=" multiple ">" element, multiple options can be selected by an array. val (value) can change the value of the selected element at the same time. And the values are the same, such as:

Copy Code code as follows:

$ ("input"). Val ("Test");

The code above will eventually replace all Inupt value values with "test", which we generally don't use in normal applications. Val (value) is often applied to the focus and blur of input[type= "text", such as:

HTML Markup

Copy Code code as follows:

<input type= "text" id= "TextBox" value= "hello,jquery!"/>

JQuery Code

Copy Code code as follows:

$ ("Input:text"). focus (function () {
var $inputTextVal = $ (this). Val ();
if ($inputTextVal = = This.defaultvalue) {
$ (this). Val ("");
}
});
$ ("Input:text"). blur (function () {
var $inputTextVal = $ (this). Val ();
if ($inputTextVal = = "") {
$ (this). Val (This.defaultvalue);
}
});

3. Use a callback function to replace the value of the form field "value"

The previous. Val (value) can change the value of the selected form element to the same, so we often need to set it to a different value value, and we will use this method to set this value through a function. This function passes two arguments, the current element's value and its current value.

Grammar

$ ("Element"). Val (function (Index,value) {...}); 

return value jquery object

Description

Using the return value of this function to set the value of each matched INPUT element, let's look at an instance on a checkbox and radio:

HTML Markup

Copy Code code as follows:

<form action= "" >
<div id= "Colorradio" >
<input type= "Radio" name= "Color" id= "Rd1" value= "Red"/><span id= "Color1" >Red</span>
<input type= "Radio" name= "Color" id= "Rd2" value= "yellow"/><span id= "Color2" >Yellow</span>
<input type= "Radio" name= "Color" id= "Rd3" value= "Blue"/><span id= "Color3" >Blue</span>
</div>
<div id= "Sizecheck" >
<input type= "checkbox" name= "Size" id= "Ch1" value= "Ten pt"/><span id= "size1" >10 pt</span>
<input type= "checkbox" name= "Size" id= "CH2" Value= "PT"/><span id= "Size2" >12
<input type= "checkbox" name= "Size" id= "CH3" Value= "PT"/><span id= "Size3" >14
</div>
<input type= "text" id= "Txtbox" disabled= "disabled"/>
<input type= "button" id= "SetValue" value= "Set value"/>
</form>

JQuery Code

Copy Code code as follows:

$ (document). Ready (function () {
$ ("Input:radio[name=color]"). Val (function (index,oldval) {
Return "color-" + (index+1) + ":" + oldval;
});

$ ("input:checkbox[name=size]"). Val (function (index,oldval) {
Return "size-" + (index+1) + ":" + oldval;
});
$ ("#setValue"). Click (function () {
var $msg = $ ("input:radio[name=color]:checked"). Val () + ",";
$ ("input:checkbox[name=size]:checked"). each (function () {
$msg + = $ (this). Val () + ",";
});
$ ("#txtBox"). Val ($msg);
});
});

For the multi-selection down box, we can change this way:

HTML Markup

Copy Code code as follows:

<select id= "Dropdown" >
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</select>
<select id= "ListBox" multiple= "multiple" >
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</select>

JQuery Cody

Copy Code code as follows:

$ (document). Ready (function () {
$ (' #dropdown '). Val (' Yellow ');
$ (' #listbox '). Val ([' Red ', ' Blue ']);
});

It describes the specific use of. Val (), so when can we use the. Val () method?

1. You can use. val () to read and modify <select> selected list items. As the example above shows, of course these values are already in the Presence list item;
2. You can use. val () to read <select multiple= "multiple" > Selected values, and if you select more than one option, then. val () Returns an option array, but you cannot use. val () to set multiple values for him;
3. You can use. val () to read the values of radio and checkbox, or to read the selected values in conjunction with the checked= "checked" property, but for a checkbox to traverse with each (), you can read only the first selected value;
4. You can use function to dynamically change the value of multiple elements in a form.

This section focuses on the use of the. html (),. Text () and. Val () Three methods in jquery, and finally summarizes the three methods:

1. . HTML () is used for HTML tags that read and modify elements
2. . Text () to read or modify the plain text content of an element
3. . Val () is used to read or modify the value values of the form elements.

The functional comparisons of these three methods

1. . HTML (),. Text (),. Val () Three methods are used to read the contents of the selected element; HTML () is the HTML content (including its HTML tag) that is used to read the element, and. Text () is used to read the plain text content of the element. Includes its descendant elements,. val () is the "value" value used to read form elements. The. and. Text () methods cannot be used on form elements. and. Val () can only be used on form elements, and when the. html () method is used on more than one element, only the first element is read; the. Val () method is the same as. html (), if it is applied on more than one element, Only the value of the first FORM element can be read, but. Text () is different from them, and if. Text () is applied to more than one element, the text content of all selected elements is read.
2. . HTML (htmlstring),. Text (TextString) and. Val (value) Three methods are used to replace the contents of a selected element, and if three methods are applied to multiple elements at the same time, the contents of all selected elements will be replaced.
3. . HTML (),. Text (),. Val () can dynamically change the contents of multiple elements by using the return value of a callback function.