jquery objects and Dom object transformations

The original link Http://www.cnblogs.com/ouyangping/p/6439939.htmljQuery object is not the same as the DOM object

With a simple example, it is easy to distinguish between jquery objects and DOM objects:

<p id= "Imooc" ></p>

We're going to get the DIV element with the ID IMOOC on the page and add a text to the text node: "Hello,world" and make the text color red.

Processed by standard javascript:

var p = document.getElementById (' Imooc ');p. InnerHTML = ' hello,world! '; P.style.color = ' red ';

The DOM element obtained by the document.getElementById ("Imooc") method provided by the native DOM model is a DOM object that handles its own innerHTML and style properties with text and color through the DOM method.

The processing of jquery:

var $p = $ (' #imooc '); $p. html (' Hello,world '). CSS (' Color ', ' red ');

Through the $ (' #imooc ') method you get a $p jquery object, $p is an object of an array of objects that actually contains the information of the DOM object and then encapsulates a lot of manipulation methods, calling its own method HTML and CSS processing, The resulting effect is consistent with the standard JavaScript processing results.

1.jQuery objects converted to DOM objects

The jquery library is essentially JavaScript code, which simply wraps the JavaScript language, in order to provide better and more convenient DOM processing and development common in commonly used features. We can use jquery as well as mix JavaScript native code with it. The object generated by jquery is a wrapper object, and if you want to use the JQuery object's own method, you need to satisfy that object is generated by jquery. In many scenarios, we need jquery and Dom to be able to convert each other, both of which are operational DOM elements, jquery is a class array object, and the DOM object is a separate DOM element.

How do I turn a jquery object into a DOM object?

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 $div = $ (' div ')//jquery object var div = $div [0]//Convert to DOM object div.style.color = ' red '//Manipulate DOM object properties

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 then call it the style property by returning the Div object and then modify the color of the first DIV element. 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

The jquery object itself provides a. Get () method that allows us to directly access the associated DOM nodes in the jquery object, providing an index of an element in the Get method:

var $div = $ (' div ')//jquery object var div = $div. Get (0)//via Get method, convert to DOM object div.style.color = ' red '//Manipulate DOM object properties

In fact, we open the source code, to see that the Get method is to use the first way to deal with, just packaged into a get to make developers more direct and convenient use.

Convert 2.DOM objects into jquery objects

Compared to jquery into the DOM, more of the development is the processing of a DOM object into a jquery object. $ (parameter) is a versatile method that produces different effects by passing different parameters.

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

After the normal DOM object is processed into a jquery object through the $ (DOM) method, we can invoke the jquery method.

HTML code

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

JavaScript code

var div = document.getelementsbytagname (' div '); Dom object var $div = $ (div); jquery object var $first = $div. First (); Find the first DIV element $first.css (' Color ', ' red '); Set the color of the first element

The elements of all DIV nodes are obtained through getelementsbytagname, and the result is a DOM collection object, but this object is a set of number combinations (3 div elements). The $ (div) method is used to convert the jquery object by invoking the first and CSS methods in the JQuery object to find and change its color.

jquery objects and Dom object transformations