JQuery DOM Object Differences and linkages

The definition of two types of objects, as long as they can be understood and converted to their own words can be, not rigid according to the data written

The jquery object (JQ object) is actually the object that is obtained through the jquery Class Library selector (or the object that is generated after the DOM object is wrapped by a jquery-based object (or by the following object conversion comprehension));

jquery object is unique to jquery, you can use the method inside jquery, but not the DOM method;

Example:

$ ("#img"). attr ("src", "test.jpg"), where $ ("#img") is the jquery object;

DOM Objects (JS objects) are objects obtained through traditional methods (JavaScript), or objects that are inherently manipulated by JavaScript, or obtained through document.

Dom objects can use JavaScript's inherent methods, but cannot use the methods inside jquery;

Example:

document.getElementById ("img"). src = "test.jpg", Where document.getElementById ("img") is the DOM object;

Note:$ ("#img"). attr ("src", "test.jpg") and document.getElementById ("img"). src = "test.jpg" effect is the same,

But document.getElementById ("img"). attr ("src", "test.jpg") or $ ("#img"). src = "test.jpg" is wrong; don't confuse it, The same JavaScript script can appear at the same time the JQ object or JS object, but there is no conversion object is not to call each other is not their own object method;

In another case, this is the use of this, a lot of people write jquery often this way: this.attr ("src", "test.jpg"), but it is wrong, that is because this is a DOM object, and. attr ("src", " Test.jpg ") is the jquery method, of course, error;

To solve this problem, simply turn the DOM object into a jquery object, such as: $ (this). attr ("src", "test.jpg");

Let's talk about the conversion and use of the JQ object, JS object

I used to think that jquery's $ ("#id") and document.getElementById ("id") get the same results, but in fact, you can do the following tests:

1. Alert ($ ("#div")) pops up [Object Object]

2. Alert (document.getElementById ("div")) popup [Object Htmldivelement]

3. Alert ($ ("#div") [0]) or alert ($ ("#div"). Get (0)) Popup [Object Htmldivelement]

1. Dom object to jquery Object

For a DOM object, you simply wrap the DOM object in $ (), such as: $ (DOM object).

Example:

　　var obj=document.getelementbyid ("id"); Dom Object
　　var 　　 $obj = $ (obj); Convert to jquery Object

2. jquery object to DOM object

There are two ways (by index): [index] and. get (index);

1) The JQuery object is an array object that can be obtained by the [index] method of the corresponding DOM object

Example:

　　var $obj =$ ("#id"); jquery Object
var obj = $obj [0]; Dom objects can also be written as Var obj= $obj. Get (0);

2) jquery itself provides, through the. Get (index) method to get the corresponding DOM object

Example:

var $obj =$ ("#id"); jquery Object

var obj = $obj. Get (0); Dom objects can also be written as Var obj= $obj [0];

again, we emphasize: DOM objects can only use JavaScript's intrinsic methods, but not the methods in jquery, and the jquery object intelligently uses the JQuery method, not using the DOM object method;

In addition, the following methods are correct:

$ ("#id"). html ();

$ ("#id"). Get (0). InnerHTML;

$ ("#id") [0].innerhtml;

JQuery DOM Object Differences and linkages