Usage analysis of jQuery's text of method
- 2020-05-07 19:14:18
- OfStack
This article illustrates the use of the text() method for jQuery. Share with you for your reference. Specific analysis is as follows:
This method returns or sets the text content of the matching element.
For more information, see the text() method in the reference manual.
special note:
HTML content is content that can contain HTML tags and be rendered by the browser.
The text content first converts the HTML predefined characters in the content into html character entities so that the HTML label is not rendered.
text() :
Use 1:
When this method takes no arguments, the function is to get the text content of all matched elements, and the result is text composed of the text content contained in all matched elements.
This method is similar to the html() method in that it has no parameter usage, but is quite different:
1. The html() method gets the contents of the first matched element, while the text() method gets the contents of all matched elements.
2. The html() method gets the html content, while the text() method gets the text content.
Example code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title>text() function - The home of the script </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 The zone </li>
<li>DIV+CSS The zone </li>
<li>jquery The zone </li>
</ul>
</div>
<button> Click to view </button>
</body>
</html>
The above code pops up to get all the text content in div.
Use 2:
With arguments, you set the text content of all matched elements.
This method is similar to the use of the html() method with parameters, but with a big difference:
The text() method sets the text content of the matched element and sets the reserved characters in HTML (such as the greater than sign (
>
) to the html character entity for proper display, while the html() method sets the html content of the matching element.
Example code:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title>text() function - The home of the script </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> It's an inline element ");
alert($("div").html())
})
})
</script>
</head>
<body>
<div> Original content </div>
<button> Click to view </button>
</body>
</html>
Example code 3:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title>text() function - The home of the script </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> study hard </b>");
$(".text").text("<b> study hard </b>");
})
})
</script>
</head>
<body>
<div class="html"></div>
<div class="text"></div>
<button> Click to view </button>
</body>
</html>
From this example you can observe the difference between HTML content and text content.
I hope this article has been helpful to your jQuery programming.