JQuery DOM Object Differences and linkages

Source: Internet
Author: User
Tags object object

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;


$ ("#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;


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).


  var obj=document.getelementbyid ("id"); Dom Object
   $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


  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


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.