What is the difference between a DOM object and a jquery object?

What is the difference between a DOM object and a jquery object?

A deep understanding of the differences between jQuery objects and common DOM objects. Mutual conversion: Q1
Q1, js Writing Method: document. getElementById ('save'). disabled = true;
In jquery, I wrote $ ("# save"). disabled = true. Why is it ineffective?

A. This is A typical problem. In fact, $ ("# save") is actually A jQuery object, not A common DOM object.
This is a common problem for beginners.
Solution:
1. Use JQ to write $ ("# save"). attr ("disabled", "true ");
2. convert it to DOM writing $ ("# save") [0]. disabled = true;
Of course, $ ("# save") [0] can also be written as $ ("# save"). get (0 ). It also returns DOM elements.

$ ("# Save"). eq (0) returns the jq object.
$ (Dom object) to get a jq object.


JQuery object and DOM object usage instructions. For more information, see.
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;
Copy the Code as follows:

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.
Copy the Code 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); // 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 );
Copy the Code 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.

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