Core tip: The jquery object obtained by the jquery selector and the dom object obtained by document.getElementById() in standard javascript are two different object types. In general, the jquery object obtained by S('#id') , it can't use the dom method in js. Therefore, if the jquery object is to use the standard dom methods, object conversion is required.
When you are just starting to learn jQuery, it may be unclear which are jQuery objects and which are DOM objects. As for the DOM object, there is not much explanation. We have touched too much. Let's focus on jQuery and the conversion between the two.
What is a jQuery object?
--- is the object generated by wrapping the DOM object with jQuery. jQuery objects are unique to jQuery and can use methods in jQuery.
for example:
$("#test").html() means: get the html code inside the element whose ID is test. Where html() is a method in jQuery
This code is equivalent to implementing the code with the DOM:
| document.getElementById("id").innerHTML; |
Although the jQuery object is generated by wrapping the DOM object, jQuery cannot use any method of the DOM object, and similarly the DOM object cannot use the methods in jQuery. If it is used indiscriminately, an error will be reported. For example: $("#test").innerHTML, document.getElementById("id").html() etc. are all wrong.
Another thing to note is that using #id as the selector gets the jQuery object and the DOM object obtained by document.getElementById("id"), which are not equivalent. Please refer to the conversion between the two described below.
Since jQuery is different but also related, jQuery objects and DOM objects can also be converted to each other. Before converting the two, we first give a convention: if one obtains a jQuery object, then we add $ in front of the variable, such as: var $variab = jQuery object; if it obtains a DOM object, it is the same as usual : var variab = DOM object; this convention is only for the convenience of explanation and distinction, and is not specified in actual use.
Convert jQuery object to DOM object:
Two conversion methods convert a jQuery object into a DOM object: [index] and .get(index);
(1) The jQuery object is a data object, and the corresponding DOM object can be obtained through the [index] method.
Such as: var $v =$("#v") ; //jQuery object
var v=$v[0]; //DOM object
alert(v.checked) //Check whether this checkbox is selected
(2) jQuery itself provides the corresponding DOM object through the .get(index) method
Such as: var $v=$("#v"); //jQuery object
var v=$v.get(0); //DOM object
alert(v.checked) //Check whether this checkbox is selected
DOM object to jQuery object:
For already a DOM object, just wrap the DOM object with $() to get a jQuery object. $(DOM object)
Such as: var v=document.getElementById("v"); //DOM object
var $v=$(v); //jQuery object
After the conversion, you can use jQuery's methods arbitrarily.
Through the above methods, jQuery objects and DOM objects can be converted to each other arbitrarily. It needs to be emphasized again: DOM objects can use the methods in the DOM, and jQuery objects cannot use the methods in the DOM.