Instructions for using jQuery objects and DOM objects_jquery

1. jQuery objects and DOM objects
When learning jQuery for the first time, it is often difficult to tell which are jQuery objects and which are DOM objects, so you need to focus on understanding jQuery objects and DOM objects and the differences between them. Relationship.
DOM object is the object we obtain using the traditional method (javascript), and the jQuery object is the object obtained using the selector of the jQuery class library;

Copy code The code is as follows:

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

jQuery object is an object generated by wrapping a DOM object through jQuery. It is unique to jQuery. If an object is a jQuery object, then you can use the methods in jQuery, for example:
$("#foo").html(); //Get the html code in the element with the id of foo, html() is jQuery-specific methods;
The above code is equivalent to:
document.getElementById("foo").innerHTML;

Note: Any method of the DOM object cannot be used in the jQuery object.
For example, $("#id").innerHTML and $("#id").checked are wrong. You can use $("#id").html() and $("# id").attr ("checked") instead. Likewise, DOM objects cannot use jQuery methods. When learning jQuery, you should establish the correct concept and distinguish the difference between jQuery objects and DOM objects. After that, learning jQuery will be much easier.

2. Conversion between jQuery objects and DOM objects

As mentioned in the first point above, jquery objects and dom objects are different! For example, jquery objects cannot use dom methods, and dom objects cannot use jquery methods. So what should I do if my jquery does not encapsulate the methods I want?
At this time we can convert the jquer object into a dom object

Convert the jquery object into a dom object
jquery provides two methods to convert a jquery object into a dom object, namely [index] and get(index). Some people may wonder why subscripts are used. Yes, the jquery object is an array object.
The following code will demonstrate converting a jquery object into a dom object and then using the dom object method

Copy code The code is as follows:

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

Convert dom object into jquery object
For a dom object, you only need to wrap the dom object with $() to get a jquery object. The method is $(dom object);

Copy code The 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 method, You can arbitrarily convert jquery objects and dom objects to each other.
Finally, I emphasize again that only dom objects can use methods in dom. jquery objects cannot use methods in dom, but jquery objects provide a more complete set of tools for Operating dom, the dom operation of jquery will be explained in detail in a later article.


ps: The jquery objects commonly used are all created through the $() function, and the $() function is A manufacturing factory for jquery objects.
Suggestion: If the object obtained is a jquery object, add $ in front of the variable, so that it is easier to identify which are jquery objects, for example:
var $variable = jquery object;
If the dom object is obtained, it is defined as follows:
var variable = dom object