Brief analysis of HTML of text of val of differences in JQuery

2020-03-30 03:47:38
OfStack

1. The HTML

HTML (): gets the HTML content of the first matched element. This function cannot be used with XML documents. But it can be used with XHTML documents

HTML (val): sets the HTML content of each matched element. This function cannot be used with XML documents. But it can be used with XHTML documents.

2. The TEXT

Text (): gets the contents of all matched elements. I usually use id

The result is a text composed of the text content contained in all matched elements. This method works for both HTML and XML documents.

Text (val): sets the text content of all matched elements

Similar to HTML (), but will encode HTML ("<") And ">" Replace with the corresponding HTML entity.

3. The VAL

Val (): gets the current value of the first matched element. It is generally used to fetch the value of input.

Val (val): sets the value of each matched element.

The above is copied from JQuery's help documentation, and there's no more nonsense. Here are some exercises you can do yourself, with the following code:

While doing this exercise I noticed another difference between HTML and text

When HTML () goes to the content of an element, it fetches the format below the selected element.

Such as: < Div id = "divShow" > < B> < I> Write Less Do More< / i> < / b> < / div>

If we use var strHTML = $("#divShow").html(); Take it,

The result: < B> < I> Write Less Do More< / i> < / b>

If we use var strHTML2 = $("#divShow b I ").html(); Take it

The result is Write Less Do More

Text doesn't have the first case,

Var strText = $("#divShow").text(); Take it

The result is Write Less Do More


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <base href="<%=basePath%>">
 <script src="js/jquery.js" type="text/javascript"></script>
 <!--
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 -->
 <title>  Gets or sets the contents of the element </title>
 <style type="text/css">
 body{font-size:15px;text-align:center}
 div{border:solid 0px #666;padding:5px;width:220px;margin:5px}
 </style>
 <script type="text/javascript">
 $(function() {
  var strHTML = $("#divShow").html();//Get the HTML content (including the two formats under div)
  var strHTML2 = $("#divShow b i").html(); //Get HTML content
  var strHTML3 = $("div").html();
  var strText = $("#divShow").text();//Get text content
  var strText2 = $("div").text();
  
  $("#divHTML").html(strHTML);//Set the HTML content
  $("#divHTML2").html(strHTML2); //Set the HTML content
  $("#divHTML3").html(strHTML3); //Set the HTML content
  $("p").html(strHTML);
  
  $("#divText").text(strText);//Set the text content
  $("#divText2").text(strText2);//Set the text content
  $("a").text(strText);
  
  $("select").change(function() { //Set the listbox change event
  //Gets the value of all the options selected in the list box
  alert($("select").val());
  var strSel = $("select").val().join(",");
  $("input").val(strSel); //Displays the values of all the options selected in the list box
  })
 })
 </script>
 </head>
 <body>
 <table border="1" bordercolor="#A9A9A9" cellspacing="0">
 <tr><td>******************************</td><td>*******************************************</td></tr>
 <tr>
 <td><div id="divShow"><b><i>Write Less Do More</i></b></div></td>
 <td> This is the original content </td>
 </tr>
 <tr>
 <td><div id="divShow"><b><i>Write XXXX Do XXXX</i></b></div></td>
 <td> This is the original content </td>
 </tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
 <tr>
 <td><div id="divHTML">1</div></td>
 <td> Get the original content ( The format of the associated content ) After the html Methods the output </td>
 </tr>
 <tr>
 <td><div id="divHTML2">2</div></td>
 <td> Get the original content ( Format without content ) After the html Methods the output </td>
 </tr>
 <tr>
 <td><div id="divHTML3">3</div></td>
 <td> Get the original content ( Gets the contents of the first matched element ) After the html Methods the output </td>
 </tr>
 <tr>
 <td><p></p></td>
 <td>HTML Method to set the text of a paragraph </td>
 </tr>
 <tr>
 <td><p></p></td>
 <td> If this also has content, it sets the content of each matched element </td>
 </tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
 <tr>
 <td><div id="divText">4</div></td>
 <td> After obtaining the original content text Methods the output </td>
 </tr>
 <tr>
 <td><div id="divText2"></div></td>
 <td> Get the original content ( Gets the contents of all matched elements ) After the text Methods the output </td>
 </tr>
 <tr>
 <td><a></a></td>
 <td>TEXT Method to set the text of a paragraph </td>
 </tr>
 <tr>
 <td><a></a></td>
 <td> If this also has content, it sets the content of each matched element </td>
 </tr>
 <tr><td>******************************</td><td>*******************************************</td></tr>
 <tr>
 <td>
 
 <select multiple="multiple"style="height:96px;width:85px">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
  <option value="5">Item 5</option>
  <option value="6">Item 6</option>
 </select>
 <select>
  <option value="7">Item 7</option>
  <option value="8">Item 8</option>
  <option value="9" selected>Item 9</option>
 </select>
 </td>
 <td>
 </td>
 </tr>
 <tr>
 <td><input ></input></td>
 <td><input ></input></td>
 </tr>
 </table>
 </body>
</html>

You can also verify by yourself, the above is my experiment, I use JQuery is 1.6

To summarize:

.html() USES HTML tags for reading and modifying elements
.text() is used to read or modify the plain text content of an element
.val() is used to read or modify the value value of the form element.

A functional comparison of the three methods

.html(),.text(),.val() are all used to read the contents of the selected element. HTML () is used to read the HTML content of an element (including its HTML tags),.text() is used to read the element's plain text content, including its descendants,.val() is used to read the "value" value of the form element. The. And. Text () methods cannot be used on form elements, while. Val () can only be used on form elements. In addition, 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(), which can only read the "value" value of the first form element if it is applied to more than one element, but.text() is different from them, which reads the text content of all selected elements if.text() is applied to more than one element.

.html(htmlString),.text(textString) and.val(value) are used to replace the content of the selected element.

.html(),.text(),.val() can all use the return value of the callback function to dynamically change the contents of multiple elements.

The following are examples given by other netizens:

Suppose the HTML structure is as follows


<div id="divTest" value='2'>
     This is a div The content of the! 
    <label id="lblText">
       This is a label The content of the! 
    </label>
    <div id="divTest2">
       The second div Content! 
    </div>
  </div>

So this is the structure of the HTML document, and now we're going to execute the js code and see what we get, okay

$("#divTest").html() // obtained content: this is the content of div! < The label id = "lblText" > That's what the label says! < / label> < Div id = "divTest2" > The second div content! < / div>
$("#divTest").html(" I need to fix it! ") // perform modifications
After the above modification, let's get it again
$("#divTest").html() // I'm going to change it!

Note: the HTML () method can be used for XHTML documents, but not for XML documents!

2. Text (): gets the contents of all matched elements, and the result is a combination of the text contents of all matched elements. Similarly, text(val) is the text contents of all matched elements

$("#divTest").text() // obtained content: this is the content of div! That's what the label says! The second div content!
// you can see that what you get is inside the tag, but you won't get the tag
Note: this method works for both HTML and XML documents

3. Val () is often used to manipulate standard form component objects such as button,text, and hidden

For example, add a select element and a hidden element


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

Now let's take their values

$("#selectVal").val() // gets the value 1& PI; $("#hidVal").val()

Sometimes development will set a value property in a div, so we can use this when evaluating

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

If not, please correct!