Conversion between jQuery objects and DOM objects.

Conversion between jQuery objects and DOM objects.
Original article link: http://www.cnblogs.com/ouyangping/p/6439939.htmljqueryobject and domobject are different

A simple example is used to distinguish jQuery objects from DOM objects:

<p id=”imooc”></p>

We need to get the div element with the id imooc on the page, then add a text "hello, world" to the text node, and make the text color red.

Processing with standard JavaScript:

var p = document.getElementById('imooc');p.innerHTML = 'hello,world!';p.style.color = 'red';

The DOM elements obtained through the document. getElementById ("imooc") method provided by the native DOM model are DOM objects. The DOM method processes the text and color of the innerHTML and style attributes.

JQuery processing:

var $p = $('#imooc');$p.html('hello,world').css('color','red');

 

You can use the $ ('# imooc') method to obtain a $ p jQuery object, $ p is an object of the class array. This object actually contains information about the DOM object and encapsulates many operation methods. It calls its own methods for html and css processing, the result is consistent with the standard JavaScript processing result.

1. convert a jQuery object to a DOM object

In essence, the jQuery library is still JavaScript code. It only wraps the JavaScript language to provide better and more convenient DOM processing and common functions for development. We can use jQuery together with JavaScript native code. The object generated through jQuery is an object that has been packaged. If you want to use the jQuery object's own method, you need to ensure that this object is generated through jQuery. In many scenarios, jQuery and DOM need to be converted to each other. They are all DOM elements for operations. 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 to DOM object div. style. color = 'red' // operate the attributes of a dom object

Use jQuery to find all 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, use the returned div object and call its style attribute to modify the color of the first div element. Note thatThe 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.

2. 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.