Home > Developer > JavaScript
Conversion of jquery and javascript dom objects, jquerydom
The Jquery Framework defines independent methods and attributes for jquery objects. It cannot directly call methods of dom objects, nor can dom objects directly call methods and attributes of jquery objects.
Jquery objects and dom objects can be converted to each other, because all the objects they operate on are dom elements, but jquery objects contain multiple dom elements, and dom objects are a dom element, in short, a jquery object is an array of dom elements, called a class array, and a dom object is a single dom element.
1. convert a jquery object to a dom object
(1) Use array subscript to read a dom element object in the jquery object set.
Var $ li = $ ('lil'); // jquery object
Var li = $ li [0]; // dom object
(2) Use the get () method of the jquery object
Var $ li = $ ('lil'); // jquery object
Var li = $ li. get (0); // dom object
2. convert a dom object to a jquery object
Var li = document. getElementsByTagName ('div ');
Var $ li = $ (li [o]); // encapsulate the first div element as a jquery object
Var li = document. getElementsByTagName ('div ');
Var $ li = $ (li); // encapsulate the div element as a jquery object.
The Load event will not be executed until all content on the webpage is loaded.
When there is a lot of content in the webpage, the load event will be delayed
The ready event of Jquery is executed after the dom structure is drawn, that is, it is executed before the external file is loaded, and the ready event is prior to the load event.
The Load event can only be written once, but the ready event can be defined multiple times in the same document.
<Html>
<Head>
</Head>
<Body>
<Div class = "panel"/> wlecome </div>
<Script type = "text/javascript" src = "jquery-1.5.1.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('<Input type = "button" value = "click me"/> <input type = "button" value = "triggle click me"/> <input type = "button "value =" detach handler "/> <input type =" button "value =" show/hide text "/> '). appendTo ($ ('body '));
$ ('Input [type = "button"] ')
. Eq (0). click (function (){
$ (This). val ("red"). addClass ('red') ;}). end (). eq (1). click (function (){
Alert (1 );
}). End (). eq (2). click (function (){
Alert (2 );
}). End (). eq (3). toggle (function (){
$ ('. Panel'). hide ('low ');
}, Function (){
$ ('. Panel'). show ('low ');
}
);
});
</Script>
</Body>
<Html/>
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 to convert a JQUERY object to a Javascript Object
$ ("# Test") // jQuery object
$ ("# Test") [0] // jQuery object-> native DOM object
$ ("# Test") [0]) // DOM object-> jQuery object (a bit around, but as long as you understand how to use $ () then, you can encapsulate the native DOM object into a jQuery object)
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
