Mutual conversion of jquery objects and Dom objects
Before discussing the mutual conversion of jquery objects and Dom objects, agree on the style of defining variables. If you get a jquery object, precede the variable with $, such as
var $varible = jquery object;
If you get a DOM object, it is defined as follows:
var varible = DOM object;
The 1.jquery object is turned into a DOM object:
jquery objects cannot use methods in the DOM, but if you are unfamiliar with the methods provided by the JQuery object, or if you do not have the methods that jquery wants to encapsulate, you have to use the DOM object, that is, "index" and Get[index.
(1) The JQuery object is an array object, and the corresponding DOM object can be obtained by means of "index".
The jquery code is as follows
<body>
<p>my</p>
<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) //The second way to convert to a DOM object
cr.innerhtml = " You"///detect if conversion is successful, you can use the DOM method The output is changed to the second my
ct.innerhtml = ' fuck ' /output result the first I changed to fuck
</script>
</body>
(2). The DOM object is converted to a jquery object:
For a DOM object, you need to wrap the DOM object in $ () to get a jquery object, in the form of $ (DOM object).
The jquery code is as follows:
<body>
<p>my</p>
<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 "); If the conversion succeeds, you can use the JQuery method to output the result to the second I fuck
$cr. EQ (1). HTML ("you");//output results for my
</script>
</body>
After conversion, you can use the JQuery method arbitrarily.
The above methods allow you to arbitrarily convert jquery objects and Dom objects to each other.
Finally, again, DOM objects can use DOM methods, and jquery objects cannot use methods in the DOM, but the jquery object provides a better set of tools for manipulating the DOM.
Thank you for reading, I hope to help you, thank you for your support for this site!
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
