The jQuery object is different from the DOM object. The jquery object dom

The jQuery object is different from the DOM object. The jquery object dom

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.

Convert a DOM object to a jQuery object:

This means that v is a DOM object, while $ v is a jquery object. If you want to call it later, $ v is used. Of course, $ is not required. You can also use other variable names, such as var jq_obj = $ (v)

How can I determine whether an object is a jquery object or a dom object?

Both jquery objects and dom objects can be converted. If you only need jquery objects
Function (dom)
{
Var mydom =$ (dom );
}
If you only need a simple dom object:
Function (dom)
{

Var mydom = dom;
If (dom [0]) // you can determine whether dom [0] exists. if it exists, it must be a jquery object.
{
Mydom = dom [0]; // converts a jquery object to a dom object
}
}