JQuery, Dom object Silly Division

When learning jquery, it is often unclear what jquery objects are and which are DOM objects. This is a very bad phenomenon. It is necessary to make a clear distinction between what jquery objects are and what DOM objects are, which is more convenient for subsequent learning and understanding.

Start with the DOM object, and then talk about the jquery object (the JQ object is based on the DOM object).

DOM, Dom object

DOM is the standard for the system, and Dom is the norm for the Document Object model. Defines the criteria for accessing HTML and XML documents.

The Document Object model is a platform-neutral interface that allows programs and scripts to dynamically access and update the contents, structure, and style of the document, and more specifically, we can dynamically update the style, attributes, etc. of an HTML element through JS, jquery code.

The DOM standard consists of 3 parts:

The core dom-is a standard model for any structured document.

XML dom-a standard model for XML documents.

HTML dom-a standard model for HTML documents.

Here we focus on the HTML DOM and how it gets, modifies, adds, or removes HTML elements (DOM objects).

DOM node

All content in an HTML document is a node, based on the HTML DOM standard of the paper:

1. The entire document is a document node

2. Each HTML element is an element node

3. Each HTML attribute is an attribute node

4. Note is a comment node

HTML DOM node tree

The HTML DOM sees an HTML document as a tree structure. This structure becomes a node tree:

An example:

The introduction of DOM is so much, you can refer to the W3cschool Manual for more information.

Dom Object

Simply by using getElementsByTagName or getElementById in JavaScript to get an element node, the resulting DOM element is the DOM object. Dom objects can use methods in JavaScript, simple instances:

var obj = document.getElementById ("id");//Get Dom object var objhtml = obj.innerhtml;                Using the JS method

jquery Object

jquery objects are objects that are produced by wrapping a DOM object through jquery.

It is important to note that the jquery object is unique to jquery. If an object is a jquery object, then you can use the method in jquery.

A simple example:

$ ("#foo"). html ();   Gets the HTML code within the element with the ID foo. HTML () is the method in jquery

This code is equivalent to:

document.getElementById ("id"). InnerHTML

Convert each other

Core tip: jquery selectors get the jquery object and the standard DOM object are two different objects, and jquery objects cannot use the DOM object's property methods. The same DOM object cannot use the methods and properties of the jquery object.

However, the previous understanding that the jquery object was originally wrapped in a DOM object, the two must be able to convert.

Before discussing the interaction between jquery objects and Dom objects, you should agree on the style of defining variables. The jquery object is prepended with $, for example:

var $test = JQuery object;        jquery variable var test = DOM object;           Dom variables

jquery Object->dom Object

jquery objects cannot use methods in the DOM, but if you are unfamiliar with the methods of the JQuery object, or if the jquery object does not encapsulate the method you want, you can convert the jquery object to a DOM object in the following two ways when you have to use the DOM object.

(1) The JQuery object is an array object that can be obtained by [index].

var $vars = $ ("#vars");           jquery object var test = $vars [0];               Dom Object Console.info (test.checked);    Checks whether the object is selected

(2) Returns a DOM object using the Get (index) method provided by jquery itself.

var $vars = $ ("#vars");           jquery object var test = $vars. Get (0);             Dom Object Console.info (test.checked);    Checks whether the object is selected

Dom Object->jquery Object

For a DOM object, you can simply wrap the DOM object in $ () and convert it to a jquery object.

var cr = document.getElementById ("id");     Dom object var $CR = $ (CR);                            jquery Object

After conversion, you can use the methods in jquery arbitrarily.

The above method can be used to convert the DOM object and the jquery object, but in general the JQuery object provides a more complete set of tools for manipulating the DOM, so it is a good choice to manipulate the DOM using jquery objects.

Example

The console output JS is selected, and the information that is selected by jquery pops up.