Home > Developer > JavaScript
Analysis of jQuery's text () method usage, jquerytext
This document describes the usage of jQuery's text () method. Share it with you for your reference. The specific analysis is as follows:
This method returns or sets the text content of the matching element.
For more information, see the text () method.
Note:
HTML content can contain HTML tags and be rendered by browsers.
The text content first converts the pre-defined HTML characters in the content into html character entities, so that HTML tags will not be rendered.
Use of text:
Usage 1:
When this method does not contain parameters, the function is to obtain the text content of all matching elements, and the result is a combination of the text content of all matching elements.
This method is similar to the parameter usage of the html () method, but it is quite different:
1. the html () method gets the content of the First Matching Element, while the text () method gets the content of all matching elements.
2. the html () method gets the html content, while the text () method gets the text content.
The instance code is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> text () function-helper's house </title>
<Style type = "text/css">
Div {
Height: 150px;
Width: 150px;
Background-color: green;
Margin-top: 10px;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
Alert ($ ("div"). text ());
})
})
</Script>
</Head>
<Body>
<Div>
<Ul>
<Li> html zone </li>
<Li> DIV + CSS area </li>
<Li> jquery area </li>
</Ul>
</Div>
<Button> click to view results </button>
</Body>
</Html>
The above code pops up to retrieve all text content in the div.
Usage 2:
When parameters are set, the text content of all matching elements is set.
This method is similar to the html () method with parameters, but there is a big difference:
The text () method is used to match the text content of an element, and converts reserved characters (such as greater than signs (>) in HTML to html character entities for correct display, the html () method is to set the html content of the matching element.
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> text () function-helper's house </title>
<Style type = "text/css">
Div {
Height: 150px;
Width: 150px;
Background-color: green;
Margin-top: 10px;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). text ("<span> is an inline element ");
Alert ($ ("div" example .html ())
})
})
</Script>
</Head>
<Body>
<Div> original content </div>
<Button> click to view results </button>
</Body>
</Html>
Example code 3:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> text () function-helper's house </title>
<Style type = "text/css">
Div {
Height: 150px;
Width: 150px;
Background-color: green;
Margin-top: 10px;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ (". Html" ).html ("<B> learn </B> ");
$ (". Text"). text ("<B> learn </B> ");
})
})
</Script>
</Head>
<Body>
<Div class = "html"> </div>
<Div class = "text"> </div>
<Button> click to view results </button>
</Body>
</Html>
Through this example, you can observe the differences between HTML content and text content.
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
