Differences between text val html in jquery

Today, I found three similar functions, text val html, by referring to the jquery document. So I googled it online. This is a problem and I didn't have a good answer. So I got bored in the afternoon and started my research.

Text ()

The specific functions of jquery are not described. In fact, text calls getText () in jquery (), getText is a tool function used to obtain text values from the DOM array (remember the Dom array). The specific implementation is to traverse every Dom element in the Dom array, then determine the node type (if (elem. nodeType = 3 | elem. nodeType = 4) the code indicates determining whether the node is a text node or CDATA. If so, the node directly goes to the nodevalue of elem. If not, judge whether the node is a comment node. If not, recursively traverse the child nodes of the node (getText (elem. childNodes )). In this way, the final text value is obtained through traversal.

The above analysis shows that the text of the jquery object is the nodevalue of the node or the nodevalue of the subnode of the node. Therefore, even if the nesting depth is greater, the value of the text node will be obtained.

Note: The jquery object returned by the selector is actually an array.

<Div id = "div1"> <div id = "div2"> Find Me </div>

Jquery code $ ("# div1"). text () returns Find Me

 

Val ()

The specific implementation of val () is based on the value Attribute of the Dom element encapsulated by the jquery object. Not all Dom attributes have the value attribute. The detailed attributes of each Dom Element

In the DOm, the value attribute is the Button ImageButton (set or return the text displayed on the Button) CheckBox (set or return the value Attribute value of the checkbox) file (the File name of the FileUpload object after the text set by the user is returned .) Hidden (SETs or returns the value of the value Attribute of the Hidden domain .), Password, Radio, Reset (set or the Text displayed on the return button), Submit Text Option textarea

Note: Although select does not have the value attribute, val has a judgment before getting the value Attribute of the element. The sub-valhooks also seems to only target select and option

Hooks = jQuery. valHooks [elem. nodeName. toLowerCase ()] | jQuery. valHooks [elem. type];

If (hooks & "get" in hooks & (ret = hooks. get (elem, "value "))! = Undefined ){

Return ret;

In fact, I am not very clear about the code (I am interested in studying it myself ). However, he ensures that the select statement correctly obtains val ();

While other jquery objects get Val, it seems like a "";

 

Html

You can also guess which Dom attribute this method calls, bingo! It is innerhtnl. In fact, I am not very familiar with innerhtml.

It looks like text. Actually, it is not. As we mentioned earlier, the consistency of text is actually the value of the text node, while innerhtml is only the element of the package, as in the above example, <div di = "div2

"> Find ME </div>, in fact, I have also tried to obtain the select html. As you wish, there are indeed many options, however, it is worth noting that not all html tags can enclose elements, such as input.

 

In general, I understand so much. I don't know a lot about jquery. I hope you will forgive me.