JQuery objects and Dom object conversions

First, we need to know why we need to transform both, because the methods provided by the two cannot be shared.

Like what:

$ ("#id"). InnerHTML; document.getElementById (ID). HTML ();

The above code is all wrong,

The first line, $ ("#id") is the jquery object, and innerHTML is the method of the DOM object;

The second line, document.getElementById (ID) is the DOM object, and HTML () is the method of the JQuery object;

As we begin to say, the methods provided by both cannot be used for non-objects, that is, the jquery object cannot use the methods provided by the DOM object, nor can the DOM object use the methods provided by the JQuery object.

But sometimes we need to use methods that are not available in this object, and at this point we need to convert both.

Style conventions: We agreed that the jquery object variable name is preceded by the $ symbol.

Let $str = $ (". txt")//JQuery object Let str = $str. Get (0);   Dom Object

　　

1.jQuery objects converted to Dom objects

(1) The JQuery object is an array object, so we can use [index] to convert it to a DOM object:

  Let $str = $ (". txt")//JQuery object let  str = $ (". txt") [0];//Dom Object

(2) The JQuery object itself also provides a way to convert to a DOM object, get (Index):

  Let $str = $ (". txt")//JQuery object let  str = $str. Get (0);   Dom Object

　

The 2.Dom object is converted to a jquery object:

The DOM object is converted to a JQuery object, and a jquery object can be obtained by wrapping the DOM object with $ ().

Let str = document.getElementById (ID); Dom Object Let $str = $ (str); JQuery Object

　　

We can print out both by Console.log ()

In this way, we can visually detect whether the current object is a DOM object or a jquery object.

Finish

JQuery objects and Dom object conversions