jquery Basics-Style chapter (3)

1.jQuiery Objects and Dom objects　　

For beginners who have just come into contact with jquery, it is important to understand thatjquery objects are not the same as DOM objects. It 's probably 1:30. What are jquery objects and which are DOM objects, the following highlights the jquery object, and the conversion between the two.

Here's a simple example:

<id= "Cnblogs"></p>

Using native JavaScript processing: DOM elements obtained from the document.getElementById ("Snblogs") method provided by the native DOM model are DOM objects, Use the DOM method to manipulate your own innerHTML and style properties with text and color.

var p = document.getElementById (' snblogs '= ' Hello! Learning the front end through the blog Park is thebest way to ' = ' red ';

Using jquery Processing: the $ (' #snblogs ') method will get a $p jquery object, $p is an object of an array of objects this object actually contains the information of the DOM object and then encapsulates a lot of operation methods, calling its own method HTML and CSS Processing , the resulting effect is consistent with the standard JavaScript processing results .

var $p = $ (' #cnblogs '); $p. html (' Hello! Learning the front end through the blog Park is the best way to '). CSS (' Color ', ' red ');

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 the jquery object, which is a new object.
2. jquery is not exactly the same thing as Dom objects, but it seems to have been similar, because they can handle the DOM.
3. The manipulation of the DOM through jquery allows developers to focus more on the development of business logic without needing to know specifically which DOM node has those methods, and does not need to be concerned with the compatibility of different browsers, and we can develop through a more friendly jquery API, and the code will be much shorter.

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

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. Here you need
One thing to note 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.

the 3.DOM object is converted to jquery Object

　compared to jquery into the DOM, more of the development is the processing of a DOM object into a jquery object. $ (parameter   if  The arguments passed to $ (dom object, the jquery method will put this dom object is wrapped 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). Into a jquery object through the $ (div) method, by invoking the
First and CSS methods to find and change its color.

jquery Basics-Style chapter (3)