Mutual conversion between DOM objects and JQUERY objects.

Mutual conversion between DOM objects and JQUERY objects.

Standard JavaScript processing:

1 var p = document. getElementById ('imooc ')

2 p. innerHTML = 'Hello! Learning jQuery is the best way ';

3 p. style. color = 'red ';

The DOM element obtained through the document. getElementById ("imooc") method provided by the native DOM model is a DOM object, and then the text and color are processed through the innerHTML and style attributes.

JQuery processing:

 

1 var $ p = $ ('# imooc'); 3. p.html ('Hello! Learning jqueryis the path to 'hangzhou.css ('color', 'red ');

 

You can use the $ ('# imooc') method to obtain a $ p jQuery object. $ p is a class array object. This object contains information about the DOM object.

Then, many operation methods are encapsulated and html and css methods are called. The results are consistent with the standard JavaScript processing results.

By comparing standard JavaScript DOM operations with jQuyer DOM operations, we can easily find that:

The object encapsulated by the jQuery method is a class array object. It is completely different from DOM objects. The only difference is that they can operate the DOM.

Using jQuery to process DOM operations allows developers to focus more on business logic development, without having to know which DOM node has those methods, or worry about the compatibility of different browsers.

We use the APIS provided by jQuery for development, and the code will be shorter.

JQuery is a class array object, and DOM object is a separate DOM element.

How to convert a jQuery object to a DOM object?

Read the DOM object in jQuery using array icons

HTML code

<Div> element 1 </div> <div> element 2 </div> <div> element 3 </div> JavaScript code var $ div =$ ('div ') // jQuery object var div = $ div [0] // convert it to DOM object div. style. color = 'red' // operate the attributes of a dom object

Use jQuery to find all the div elements (3). Because the jQuery object is also an array structure, you can use the array subscript index to find the first div element and use the returned div object, call its style attribute to modify the color of the first div element. Note that the index of the array starts from 0, that is, the subscript of the first element is 0.

Get () method that comes with jQuery

The jQuery object itself provides a. get () method that allows us to directly access relevant DOM nodes in the jQuery object. The get method provides an element index:

Var $ div = $ ('div ') // jQuery object var div = $ div. get (0) // use the get method to convert to the DOM object div. style. color = 'red' // operate the attributes of a dom object

　　

In fact, let's open the source code and look at it. The get method is the first method to handle it, but it is packaged into a get method to make developers more convenient to use.

Convert a DOM object to a jQuery object

Compared with converting jQuery into DOM, a dom object is processed into a jQuery object in development. $ (Parameter) is a multi-function method, which has different effects by passing different parameters.

If the parameter passed to the $ (DOM) function is a DOM object, the jQuery method will wrap the DOM object into a new jQuery object.

After the $ (dom) method is used to process a common dom object into a jQuery object, we can call the jQuery method.

HTML code

 

<Div> element 1 </div> <div> element 2 </div> <div> element 3 </div> JavaScript code var div = document. getElementsByTagName ('div '); // dom object var $ div =$ (div); // jQuery object var $ first = $ div. first (); // find the first divelement named first.css ('color', 'red'); // set the color for the first element

Get the elements of all div nodes through getElementsByTagName. The result is a dom collection object, but this object is an array collection (three div elements ).

Convert the $ (div) method to a jQuery object, and call the first and css methods in the jQuery object to find the first element and change its color.