Differences between jQuery DOM objects and jquerydom objects

Differences between jQuery DOM objects and jquerydom objects

For the definition of the two object types, you only need to understand and convert them into your own statement.

JQuery object(Jq object) actually, it is the object obtained through the jquery class library selector (or the object obtained through $ or the object generated after the dom object is wrapped through jquery (refer to the following object conversion comprehension ));

Jquery objects are unique to jquery. You can use methods in jquery, but you cannot use dom methods;

Example:

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

DOM object(Js object) is the object obtained through the traditional method (javascript), or some object operations inherent in javascript, or the object obtained through the document;

DOM objects can use the inherent methods of javascript, but they cannot use the methods in jquery;

Example:

Document. getElementById ("img"). src = paitest.jpg "; where document. getElementById (" img ") is the DOM object;

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

However, document. getElementById ("img "). attr ("src", "test.jpg") or $ ("# img "). src = javastest.jpg "is incorrect. Do not confuse it. The same javascript script can contain jq or js objects at the same time, only methods of non-self-object cannot be called without conversion objects;

Another situation is:ThisMany people often write this when writing jquery: this. attr ("src", "test.jpg"); however, an error occurs because this is a dom object. attr ("src", "test.jpg") is a jquery method. Of course, an error occurs;

To solve this problem, you only need to convert the dom object to a jquery object, such as $ (this). attr ("src", "test.jpg ");

 

Next we will talk about the conversion and use of jq objects and js objects.

I used to think that jquery's $ ("# id") and document. getElementById ("id") have the same results. Otherwise, you can perform the following tests:

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

2. alert (document. getElementById ("div") pops up [object HTMLDivElement]

3. alert ($ ("# div") [0]) or alert ($ ("# div"). get (0) pop up [object HTMLDivElement]

 

1. convert a DOM object to a jquery object

For a dom object, you only need to wrap the dom object with $ (), for example: $ (dom object)

Example:

　　VarObj = document. getElementById ("id"); // dom object
　　Var $ Obj = $ (obj); // convert to jquery object

2. convert a jquery object to a dom object

There are two ways (through index): [index] And. get (index );

1) The jquery object is an array object. You can use the [index] method to obtain the corresponding dom object.

Example:

　　Var$ Obj = $ ("# id"); // jquery object
VarObj = $ obj [0]; // The dom object can also be written as var obj = $ obj. get (0 );

2) jquery itself provides a dom object that can be obtained through the. get (index) method.

Example:

Var$ Obj = $ ("# id"); // jquery object

VarObj = $ obj. get (0); // The dom object can also be written as var obj = $ obj [0];

Emphasize again:DOM objects can only use the methods inherent in javascript, but they cannot use the methods in jquery. Meanwhile, jquery objects intelligently use jquery methods rather than dom object methods;

The following statements are correct:

$ ("# Id" pai.html ();

$ ("# Id"). get (0). innerHTML;

$ ("# Id") [0]. innerHTML;