Conversion Method Between jQuery object and DOM object

Source: Internet
Author: User

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 () isMethods In jQuery
This code is equivalent to implementing code with DOM:
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, 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, 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.

The following are other related usage methods:
1. convert a DOM object to a jQuery object
Common Dom objects can be converted to jQuery objects through $.

For example: $ (document. getElementById ("msg "))
The returned result is a jQuery object. You can use the jQuery method.

2. convert a jQuery object to a DOM object
Because the jQuery object itself is a set. Therefore, if a jQuery object is to be converted to a Dom object, You must retrieve one of them. Generally, you can retrieve it through indexes.
For example: $ ("# msg") [0], $ ("div "). eq (1) [0], $ ("div "). get () [1], $ ("td") [5]

These are Dom objects. You can use methods in Dom, but you cannot use jQuery methods.

The following statements are correct:
$ ("# Msg" cmd.html ();
$ ("# Msg") [0]. innerHTML;
$ ("# Msg"). eq (0) [0]. innerHTML;
$ ("# Msg"). get (0). innerHTML;

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.