Conversion between JQUERY object and DOM object

When I first started learning jQuery, I may be confused about jQuery objects and DOM objects. As for DOM objects, we don't have much to explain, and we have too many contacts. Next we will focus on jQuery and the conversion between the two.

What is a jQuery object?

--- It is the object generated after DOM object is packaged using jQuery. JQuery objects are unique to jQuery and can be used in jQuery.

For example:

$ ("# Test" example .html () means to get the html code in the element with the ID of test. Here, html () is the method in jQuery.

This code is equivalent to implementing code with DOM:
Copy codeThe Code is as follows:
Document. getElementById ("id"). innerHTML;

Although jQuery objects are generated after packaging DOM objects, jQuery cannot use any methods of DOM objects. Similarly, DOM objects cannot use methods in jQuery. If they are used improperly, an error is returned. For example, $ ("# test"). innerHTML and document. getElementById ("id" ).html () are all incorrect.

Note that the DOM object obtained by using the # id as the selector is the DOM object obtained by the jQuery object and document. getElementById ("id"). These two are not equivalent. See the conversion between the two.

Since jQuery is different but also related, jQuery objects and DOM objects can also be converted to each other. Before the conversion, we first give a convention: If a jQuery object is obtained, we add $ before the variable, for example, var $ variab = jQuery object; if the DOM object is obtained, it is the same as the common convention: var variab = DOM object. This Convention is only convenient for explanation and difference. It is not specified in actual use.

Convert a jQuery object to a DOM object:

Two conversion methods are used to convert a jQuery object to a DOM object: [index] And. get (index );

(1) The jQuery object is a data object. You can use the [index] method to obtain the corresponding DOM object.

For example:
Copy codeThe Code is as follows:
Var $ v = $ ("# v"); // jQuery object
Var v = $ v [0]; // DOM object
Alert (v. checked) // checks whether the checkbox is selected

(2) jQuery provides the. get (index) method to obtain the corresponding DOM object.

For example:
Copy codeThe Code is as follows:
Var $ v = $ ("# v"); // jQuery object
Var v = $ v. get (0); // DOM object
Alert (v. 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. $ (DOM object)

For example, var v = document. getElementById ("v"); // DOM object

Var $ v = $ (v); // jQuery object

After conversion, you can use the jQuery method at will.

Using the above method, you can convert jQuery objects and DOM objects to each other. Note that only DOM objects can use methods in DOM. jQuery objects cannot use methods in DOM.


Conversion case:
Method for getting JQUERY objects

Var jqueryObject = $ ("# test"); // jqeuryObject is a Jquery object. It can use all jquery methods but cannot be used.
Var jqueryObject = $ ("# test"); // jqeuryObject is a Jquery object. It can use all jquery methods but cannot be used.
DOM object Method

Var DOMObject = document. getElementById ("test"); // DOMObject is a DOM object. It can use all DOM methods, but cannot use jquery methods.
Var DOMObject = document. getElementById ("test"); // DOMObject is a DOM object. It can use all DOM methods, but cannot use jquery methods.
Jquery object-> DOM object

Var jqueryObject = $ ("# test"); // obtain the jquery object
Var DOMObject = jqueryObject [0]; // convert a jquery object to a DOM object
Var jqueryObject = $ ("# test"); // obtain the jquery object
Var DOMObject = jqueryObject [0]; // convert a jquery object to a DOM object
DOM object-> jquery object
Var DOMObject = document. getElementById ("test"); // get the DOM object
Var jqueryObject = $ (DOMObject); // convert a DOM object to a jquery object

When using jquery, you sometimes need to use the method of the original DOM object. For example, when calling some methods of Activex control, you need to convert the jquery object to a DOM object. The conversion method is as follows:

Method 1: $ ("xxx") [index]
Method 2: $ ("xxx"). get (index)
Method 3: $ ("xxx"). eq (index) [0]