jquery Learning Note (i)--jquery objects and DOM objects convert to each other

By using standard JavaScript to manipulate the DOM against the Jquyer Operation DOM, it is not difficult to find:

1. The object that is wrapped by the jquery method is a class array object. It's completely different from Dom objects, and the only similarity is that they all work with the DOM.
2. Working with the DOM through jquery allows developers to focus more on the development of business logic without needing to know exactly which DOM node has those methods, and does not need to be concerned with the compatibility of different browsers, and we develop through the API provided by jquery, and the code is much shorter.

jquery is a class array object, and the DOM object is a separate DOM element.

jquery objects turn into DOM objects

Use array subscripts to read DOM objects in jquery

HTML code

<div> element One </div><div> element two </div><div> element three </div>

JavaScript code

var // jquery Object  var div = $div [0] // Convert to DOM object // manipulating the properties of a DOM object

Find all DIV elements (3) with jquery, because the jquery object is also an array structure, you can find the first DIV element through an array subscript index, and modify the color of the first DIV element by returning the Div object, calling its Style property. One thing to note here is that the index of the array starts at 0, that is, the first element subscript is 0

The Get () method that comes with jquery

var // jquery Object var // Convert to Dom object by get method // manipulating the properties of a DOM object

The Get method is the first way to handle it, just wrapping it into a get to make it more straightforward for developers to use.

Dom objects into jquery objects

If the argument passed to the $ (DOM) function is a DOM object, the jquery method wraps the DOM object into a new jquery object
HTML code

< Div > Element One </div><Div> element two </ Div > < Div > Elements three </div>

JavaScript code

var // DOM Object  var $div = $ (div); // jquery Object var // find the first DIV element // set the color of the first element

jquery Learning Note (i)--jquery objects and DOM objects convert to each other