Home > Developer > JavaScript
Arbitrary mutual conversion between jquery objects and DOM objects, and mutual conversion between jquerydom
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, document. getElementById ("id" pai.html ()And so on.
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.
Before discussing the mutual conversion between jquery objects and DOM objects, we must first define the style of variables. If jquery objects are obtained, add $ before the variables. For example:
Var $ varible = jquery object;
If a DOM object is obtained, it is defined as follows:
Var varible = DOM object;
1. convert a jquery object to a DOM object:
Jquery objects cannot use methods in the DOM. However, if they are unfamiliar with the methods provided by jquery objects or do not have methods to be encapsulated by jquery, they must use DOM objects, that is, [index] And get [index].
(1) The jquery object is an array object. You can use the [index] method to obtain the corresponding DOM object.
The jquery code is as follows:
<Body> <p> my </p> <script src = "jquery-2.1.4.min.js"> </script> <script> var $ cr = $ ("p "); // jquery object var cr = $ cr [1]; // dom object var ct = $ cr. get (0) // second method of converting to DOM object cr. innerHTML = "you" // check whether the conversion is successful. you can use the DOM method to output the second result. innerHTML = 'fuck' // The first output result is changed to fuck. </script> </body>
(2). 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 ).
The jquery code is as follows:
<Body> <p> my </p> <script src = "jquery-2.1.4.min.js"> </script> <script> var cr = document. getElementsByTagName ("p") // DOM object var $ cr = $ (cr); // jquery object $ cr. eq (0 ). ("fuck"); // check whether the conversion is successful. you can use the jquery method to output the second result, which is changed to fuck javascr.eq(1).html ("you "); // change the output result to my. </script> </body>
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.
Finally, we emphasize that only DOM objects can use the DOM method. jquery objects cannot use the methods in DOM, but jquery objects provide a more comprehensive set of tools for DOM operations.
I hope you will like this article.
Articles you may be interested in:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
