When you first learn jquery, you may be confused about which jquery objects and which are DOM objects. As far as DOM objects are concerned, we have too much contact, and the following focuses on jquery and the conversion between the two
Some of the methods used in jquery will be summed up in the past few days, in the hope that the jquery beginners can play a certain role in helping.
Today's main look at jquery objects and the conversion of DOM objects, understand this, later use jquery will be more convenient.
1. Method name conflict resolution when we start using jquery, we should first avoid the conflict between jquery and other class libraries or custom JS. Let's take a look at the simplest piece of code:
Copy Code code as follows:
JQuery (document). Ready (function () {
Alert ("welcome!");
});
There is no use of the $ (document) notation here, because many times we define the $ (ID) method to get the element, and the $ () method is also defined in class libraries such as prototype. Therefore, in order to avoid conflict, we recommend that you also use jquery ("#id") this wording.
2. Mutual conversion of jquery objects and Dom objects jquery object to DOM object: jquery ("#id") gets a jquery object that is different from a normal DOM object, so you can't directly use the method defined by the DOM object. Because the jquery object itself is a collection, it is possible to convert the jquery object into a DOM object by index, such as jquery ("#id") [0] is a DOM object. Look at an example below:
Copy Code code as follows:
<div id= "Show" >
<span> What to display 1</span>
<span> What to display 2</span>
<span> What to display 3</span>
</div>
To get the content in span, use the following methods correctly.
Copy Code code as follows:
jquery method, get first span content
JQuery ("#show span"). HTML ();
Get a third span content
JQuery ("#show span") [2].innerhtml;
EQ () Returns the JQuery object, starting with EQ (0). Get a second span content
JQuery ("#show span"). EQ (1) [0].innerhtml;
Get () returns the DOM object directly, starting with getting (0). Get a third span content
JQuery ("#show span"). Get (2). InnerHTML;
Dom object to the jquery object: Use jquery () to turn a DOM object into a jquery object. Such as:
Copy Code code as follows:
JQuery (document.getElementById ("Show")). html ();
The output results are:
Copy Code code as follows:
<div id= "Show" >
<span> What to display 1</span>
<span> What to display 2</span>
<span> What to display 3</span>
</div>
This enables the conversion of the JQuery object and the DOM object, such as a text box that focuses on the ID focus. Just:
Copy Code code as follows:
JQuery ("#focus") [0].focus ();
What is a jquery object?
---is the object that is generated after the DOM object is wrapped through jquery. jquery objects are unique to jquery, and they can use the methods in jquery.
Like what:
$ ("#test"). html () means: Gets the HTML code within the element with the ID test. where HTML () is the method in jquery
This code is equivalent to implementing the code with the DOM:
Copy Code code as follows:
document.getElementById ("id"). InnerHTML;
Although jquery objects are created after wrapping a DOM object, jquery cannot use any of the methods of the DOM object, nor can the same DOM object use the method in jquery. Indiscriminate use can be an error. For example: $ ("#test"). InnerHTML, document.getElementById ("id"). The writing of HTML () is wrong.
Another thing to note is that using #id as a selector is not equivalent to getting a DOM object from a jquery object and a document.getElementById ("id"). Please refer to the conversion between the two as described below.
Since jquery is different but also connected, jquery objects and Dom objects can also be converted to each other. Before converting between the two, we give a convention: if one gets a jquery object, then we add $ to the variable, such as: var $variab = jquery object; If you get a DOM object, it's the same as usual: var Variab = dom Object This agreement is only easy to explain and difference, the actual use does not stipulate.
The jquery object is turned into a DOM object:
Two conversions convert a jquery object into a DOM object: [index] and. get (index);
(1) The jquery object is a data object, which can be obtained through the method of [index] to get the corresponding DOM object.
Such as:
Copy Code code as follows:
var $v =$ ("#v"); jquery objects
var v= $v [0]; Dom Object
Alert (v.checked)//Detect if this checkbox is selected
(2) jquery itself provides, through the. Get (Index) method, the corresponding DOM object
Such as:
Copy Code code as follows:
var $v =$ ("#v"); jquery objects
var v= $v. Get (0); Dom Object
Alert (v.checked)//Detect if this checkbox is selected
The DOM object turns into a jquery object:
For already a DOM object, you can get a jquery object by wrapping the DOM object with $ (). $ (DOM object)
such as: Var V=document.getelementbyid ("V"); Dom Object
var $v =$ (v); jquery objects
After the conversion, you can use the JQuery method at will.
The above methods allow you to arbitrarily convert jquery objects and Dom objects to each other. It should be emphasized that DOM objects can use methods in the DOM, and jquery objects are methods that cannot be used in the DOM.
Conversion Case:
Ways to get jquery objects
var jqueryobject = $ ("#test"); Jqeuryobject is a jquery object that can use all of jquery's methods but cannot use
var jqueryobject = $ ("#test"); Jqeuryobject is a jquery object that can use all of jquery's methods but cannot use
Methods of Dom objects
var domobject = document.getElementById ("test");//domobject is a DOM object that can use all of the DOM's methods, but cannot use the jquery method
var domobject = document.getElementById ("test");//domobject is a DOM object that can use all of the DOM's methods, but cannot use the jquery method
jquery Object->dom Object
var jqueryobject = $ ("#test");/Get jquery Object
var Domobject = Jqueryobject[0];//jquery Object converted to DOM object
var jqueryobject = $ ("#test");/Get jquery Object
var Domobject = Jqueryobject[0];//jquery Object converted to DOM object
Dom Object->jquery Object
var domobject = document.getElementById ("test");//Get DOM Object
var jqueryobject = $ (domobject);//dom object converted to jquery object
When using jquery, sometimes you need to use the methods of the original DOM object, such as calling some methods of an ActiveX control, when you need to convert the jquery object to a DOM object, as follows:
Method 1: $ ("xxx") [index]
Method 2:$ ("xxx"). Get (Index)
Method 3:$ ("xxx"). EQ (index) [0]
