In-depth learning of jQuery's three methods for describing text content, in-depth learning of jquery

In-depth learning of jQuery's three methods for describing text content, in-depth learning of jquery
* Directory [1] html () [2] text () [3] val () [4] Summary

In javascript, the description element content has five attributes: innerHTML, outerHTML, innerText, outerText, and textContent. These five attributes have their own functions and their compatibility is different. JQuery provides three convenient methods for such processing: html (), text (), and val (). This article will introduce in detail the three methods for jQuery to describe the text content.

 

Html ()

The html () method is similar to the inenrHTML attribute in javascript. It is used to obtain the HTML content of the First Matching Element in the set or to set the html content of each matching element. There are three Usage Details:

[1] html ()

If html () is not input, it can be used to obtain the HTML content of the First Matching Element in the set.

[Note] similar to the innerHTML attribute, IE8-the browser converts all labels into a large write format and does not contain blank text nodes. other browsers return the original format.

<div class="test">    <div>Demonstration Box</div></div><div class="test">    <div>123</div></div><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>//'  <div>Demonstration Box</div>'console.log($('.test').html());</script>

[2] html (htmlString)

The html (htmlString) method sets the html content of each matching element. Any content in these elements will be completely replaced by the new content. In addition, before replacing these elements with new content, jQuery deletes other structures from child elements, such as data and event handlers, to prevent memory overflow.

<div class="demo-container">  <div class="demo-box">Demonstration Box</div></div><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>//123$('div.demo-container').html('123');</script>

[3] html (function (index, oldhtml ))

Html (function (index, oldhtml) is used to return a function that sets HTML content. The index location of the received element and the original HTML of the element are used as parameters. Before jQuery calls this function, it clears the elements and uses the oldhtml parameter to reference the previous content. In this function, this points to the current element in the element set.

<div class="demo-container">123</div><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>//1230$('div.demo-container').html(function(index,oldhtml) {  return oldhtml + index;});</script>

Scope of use

The same as the innerHTML attribute, the html () method can only be applied to dual tags, and the single tag is invalid.

<input id="test" value="123"><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>console.log(test.innerHTML)//''console.log($('#test').html())//''</script>

 

Text ()

The text () method is similar to the innerText attribute in javascript to obtain the combination of the text content of each element in the element set, including their descendants, or set the text content of each element in the element set to the specified text content. There are three usage methods:

[1] text ()

The text () method is used to obtain the merged text of each element in the matched element set, including their descendants.

<p id="test">This is a <i>simple</i> document</p><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>//This is a simple documentconsole.log($('#test').text());</script>

<div>1</div><div>2</div><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>//12console.log($('div').text());</script>

[2] text (textString)

Text (textString) is used to set the text content that matches each element in the element set to the specified text content.

<p id="test">This is a <i>simple</i> document</p><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>$('#test').text('<i>123</i>');//'<i>123</i>'console.log($('#test').text());</script>

[3] text (function (index, text ))

The text (function (index, text) method uses a function to set the text content. This function receives the index position and text value of the element as the parameter and returns the set text content.

<p id="test">This is a <i>simple</i> document</p><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>$('#test').text(function(index, text){    return text + index;});//'This is a simple document0'console.log($('#test').text());</script>

This method is often used for data initialization. The same effect can be achieved using the html () method.

<Ul> <li> </ul> <script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <script> $ ('ul li '). text (function (index, text) {return 'content' + (index + 1) ;}); // 'content 1 content 2 content 3' console. log ($ ('lil '). text (); // 'content 1'lele.log((('li'{.html (); </script>

Scope of use

The same as the innerText attribute, the text () method cannot be used in the input element. In IE8-browser, the text () method cannot be used on the script element.

The val () method can be used to obtain or set the text value for the input element. The html () method can be used for the script element.

<Input id = "test1" value = "123"> <script id = "test2"> var a = 1; </script> <script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <script> console. log ($ ('# test1 '). text (); // ''// IE8-return'' from the browser, and return from other browsers 'var a = 1; 'console. log ($ ('# test2 '). text (); console. log ($ ('# test1 '). val (); // '123'lele.log(('{test2'}.html (); // 'var a = 1; '</script>

 

Val ()

The val () method is similar to the value attribute in javascript and is mainly used to process the values of form elements, obtains the current value of the first element in a matched element set or sets the value of each element in a matched element set.

Val ()

If the val () method does not have a parameter, the value of the element is obtained.

<input id="test" value="text"><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>console.log($('#test').val());//'text'</script>

[Note] the value obtained from the textarea element through the val () method does not contain the carriage return (\ r) character. However, if the value is passed to the server through XHR, the carriage return (\ r) character will be retained (or added by the browser, however, the original data does not contain carriage return (\ r )). You can use the valHook method below to solve this problem.

$.valHooks.textarea = {  get: function(elem){    return elem.value.replace(/\r?\n/g,"\r\n");  }};

The val () method is mainly used to obtain the values of form elements, such as input, select, and textarea. For the <select multiple = "multiple"> element, val () returns an array containing each selected item. If no selection is selected, null is returned.

<textarea id="test1">1</textarea><input id="test2" value="2"><select id="test3">    <option>3</option></select><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>console.log($('#test1').val());//1console.log($('#test2').val());//2console.log($('#test3').val());//3</script>

Val (value)

Val (value) is used to set the value of a form element.

<Input id = "test" value = "2"> <button id = "btn"> button </button> <script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <script> btn. onclick = function () {var value = $ ('# test '). val (); $ ('# test '). val ('test' + value)} </script>

Val (function (index, value ))

The val () method can take a function as a parameter. this in the function points to the current element. Elements in the received set. The old value is used as the index location of the parameter and the set value is returned.

<Input id = "test" value = "2"> <button id = "btn"> button </button> <script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <script> btn. onclick = function () {$ ('# test '). val (function (index, value) {return 'test' + index + value ;})} </script>

 

Summary

Html (), text (), val () are used to read the content of the selected element; html () is used to read the html content of the element, text () it is used to read the plain text content of an element. val () is used to read the value of a form element. The html () and text () methods cannot be used on form elements, while val () can only be used on form elements.

When the html () and val () methods are used on multiple elements, only the first element is read. When the text () method is applied on multiple elements, read the text of all selected elements.

Html (htmlString), text (textString), and val (value) methods are used to replace the content of the selected element. If the three methods are used on multiple elements at the same time, the contents of all selected elements will be replaced.

Both html (), text (), and val () can use the return values of the callback function to dynamically change the content of multiple elements.