JQuery converts the selected object to the original DOM object

In jquery, selecting an element on a page returns a collection of jquery objects instead of the original DOM object. So you can only run the jquery method. If you want to run DOM methods and properties on a selection set, the collection must be converted to a DOM object

For example, you may not use this:

$ (' div '). InnerHTML = "Hello World";

Because innerHTML is a property of the DOM and not a jquery object. If you really want to do this, then you need to convert the jquery object to a DOM object. There are two ways to do this.

①jquery provides a core method of get (), so the above can be written as $ (' div '). Get (). InnerHTML = "Hello World";

Of course this corresponds to the case where there is only one div in the page. If there are multiple div.

So this is not a very easy method, you need to modify the code, by passing it to the index value such as Get (index) to choose.

$ ("div"). Get (0). InnerHTML = "Hello World";

Of course, you can use the $.each loop that comes with jquery to do all the assignment.

$div 1 = $ ("div"). get ();

<span style= "FONT-SIZE:18PX;" >$.each ($div 1, Function (Index, val) {val.innerhtml = ' LC ' + Index;}); </span>

② we can use [] to get the content in the form of an array.

such as $ (' div ') [0].innerhtml = "Hello World";

Let's take a look at a complete example.

<span style= "FONT-SIZE:18PX;" >

Let me add the process of translating DOM objects into jquery objects.
This is the example I'm using here.

This is the process of translating our DOM object into a jquery object.
Note: Actually it refers to our a linked object. Is an ordinary DOM object, which we pass in the onclick event.
Then we encapsulate the DOM object with $ () before we can use the AddClass function.