JS object and jQuery object

Time:2022-5-26

Original address:http://www.cnblogs.com/yellow…

Differences between DOM objects and jQuery objects

JQuery object and DOM object instructions can be referred to by friends who need them.
JQuery object and DOM object
When learning jQuery for the first time, you often can’t distinguish which are jQuery objects and which are DOM objects. Therefore, you need to focus on understanding jQuery objects, DOM objects and the relationship between them
DOM object is the object we get with traditional methods (JavaScript), and jQuery object is the object obtained with the selector of jQuery class library;
The copy code is as follows:

var domObj = document. getElementById("id"); // DOM object
var $obj = $("#id"); // JQuery object;

JQuery object is the object generated by wrapping DOM objects through jQuery, which is unique to jQuery. If an object is a jQuery object, you can use the methods in jQuery, for example:
$(“#foo”). html(); // Get the HTML code in the element with ID foo. HTML () is a unique method of jQuery;
The above code is equivalent to:

document.getElementById("foo").innerHTML;

Note: you cannot use any method of a DOM object in a jQuery object.
For example, $(“#id”) InnerHTML and $(“#id”) The expressions such as checked are wrong. You can use $(“#id”) HTML () and $(“#id”) Instead, use jQuery methods such as attr (“checked”). Similarly, DOM objects cannot use jQuery methods. When learning jQuery, you should establish a correct concept and distinguish the difference between jQuery objects and DOM objects. After that, learning jQuery will be much easier.

Mutual conversion of jQuery object and DOM object

As mentioned in the first point above, jQuery objects are different from DOM objects! For example, jQuery objects cannot use DOM methods, and DOM objects cannot use jQuery methods. What can I do if jQuery does not encapsulate the methods I want?
At this time, we can convert the object jquer into a DOM object

Convert jQuery object to DOM object
JQuery provides two methods to convert a jQuery object into a DOM object, namely [index] and get (index). Some people may wonder how to use subscripts. Yes, jQuery object is an array object
The following code will demonstrate the method of converting a jQuery object into a DOM object and then using the DOM object
The copy code is as follows:

var $cr=$("#cr"); // JQuery object
var cr = $cr[0]; // DOM object can also be written as var CR = $cr.get (0);
alert(cr.checked); // Check whether this checkbox is selected

Converting DOM objects to jQuery objects
For a DOM object, you only need to wrap the DOM object with $() to get a jQuery object. The method is $(DOM object);
The copy code is as follows:

var cr=document. getElementById("cr"); // DOM object
var $cr = $(cr); // Convert to jQuery object

After conversion, you can use any method in jQuery
Through the above methods, jQuery objects and DOM objects can be converted to each other arbitrarily
Finally, it is emphasized again that only DOM objects can use the methods in DOM, and jQuery objects cannot use the methods in DOM, but jQuery objects provide a set of more perfect tools for operating dom. The DOM operation of jQuery will be explained in detail in the following articles

PS: jQuery objects usually used are made through the $() function, which is a manufacturing factory of jQuery objects
Suggestion: if the obtained object is a jQuery object, add $in front of the variable to make it easy to identify which jQuery objects are, for example:

Var $variable = jQuery object;
If the DOM object is obtained, the definition is as follows:
Var variable = DOM object