Jquery: figuring out some basic concepts about the differences between DOM objects and jquery objects

1. jquery object and DOM object

When learning jquery for the first time, it is often difficult to identify jquery objects and DOM objects. Therefore, we need to focus on the relationship between jquery objects and DOM objects.
DOM objects are the objects we obtain using the traditional method (JavaScript). jquery objects are the objects obtained using the selector of the jquery class library.

 

VaR domobj = Document. getelementbyid ("ID"); // DOM object var $ OBJ =$ ("# ID"); // jquery object;

 

Jquery objects are generated after DOM objects are encapsulated by jquery. They are unique to jquery. If an object is a jquery object, you can use the method in jquery, for example:
$ ("# Foo" ).html (); // obtain the HTML code in the element whose ID is foo. html () is a unique method of jquery;
The above code is equivalent:

 

document.getElementById("foo").innerHTML;

 

Note: you cannot use any methods of DOM objects in jquery objects.

For example: $ ("# ID "). innerhtml and $ ("# ID "). checked and other statements are incorrect. You can use $ ("# ID" ).html () and $ ("# ID "). instead of jquery methods such as ATTR ("checked. Similarly, DOM objects cannot use the jquery method. When learning jquery, we should establish a correct idea to distinguish the differences between jquery objects and DOM objects. After learning jquery, it will be much easier.

 

2. Mutual conversion between jquery objects and DOM objects

As mentioned above, jquery objects and DOM objects are different! For example, the jquery object cannot use the DOM method, and the DOM object cannot use the jquery method. What should I do if jquery does not encapsulate the method I want?
In this case, we can convert the jquer object into a DOM object.

Convert a jquery object to a DOM object

Jquery provides two methods to convert a jquery object into a DOM object, that is, [Index] And get (index ). Some people may wonder how to use subscript. That's right. The jquery object is an array object.
The following code converts a jquery object to a DOM object and then uses the DOM object method.

 

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); // checks whether the checkbox is selected.

 

Convert a DOM object to a jquery object

For a DOM object, you only need to wrap the DOM object with $ () to obtain a jquery object. The method is $ (DOM object );

VaR Cr = document. getelementbyid ("cr"); // DOM object var $ Cr = $ (CR); // convert it to a jquery object. After conversion, you can use any method in jquery.

 

Using the above method, you can convert jquery objects and DOM objects to each other.
Finally, we emphasize that only DOM objects can use methods in Dom. jquery objects cannot use methods in Dom. However, jquery objects provide a more comprehensive set of tools for Dom operations, the Dom operations of jquery will be explained in detail in later articles.

 

PS: The jquery objects used at ordinary times are made by the $ () function, and the $ () function is a manufacturing factory of jquery objects.
Suggestion: If the obtained object is a jquery object, add $ to the variable to easily identify jquery objects, for example:
VaR $ variable = jquery object;
If a DOM object is obtained, it is defined as follows:
VaR variable = DOM object