Reprinted address: https: //www.cnblogs.com/xiaomaozi168/p/8615440.html
I. Definition
1, DOM objects
DOM document model is actually an object-oriented manner described. DOM defines the objects required to represent and modify documents, the relationship between the behavior and properties of these objects, and these objects.
The W3C DOM specification, DOM of HTML and XML application programming interface (API).
By DOM, you can access all the HTML elements, along with text and attributes they contain. The contents of which can be modified and deleted, but can also create new elements.
HTML DOM and platform-independent programming language. It can be any programming language such as Java, JavaScript and VBScript uses.
DOM object, that is, objects that we use traditional methods (javascript) obtained.
2, jQuery objects
jquery object is actually a javascript array, the array contains the object 125 and four methods properties
four properties are
jquery jquery current version number of the frame
number of elements in the array length indicating object
the general context objects are directed HtmlDocument
selector selector passed in content such as: #yourId or .yourClass etc.
If you acquired the object through jquery $ ( "# yourId") method, and your page is only one element of the id yourId, then $ ( "# yourId" ) [0] is HtmlElement element
with document.getElementById ( "yourId") acquired element is the same.
Simple to understand, is the object created jQuery,
jQuery object is, after packaging by jQuery DOM object created. jQuery jQuery object is unique, in jQuery methods that can be used, but you can not use DOM methods
II. Difference
1, the difference between DOM objects and objects jquery
var domObj = document.getElementById ( "id" ); // DOM objects
var $ obj = $ ( "# id"); // jQuery objects;
. $ ( "# IMG") attr ( "the src", "Test. jpg "); // $ here (" # img ") is to get the jQuery object;
document.getElementById (". ") src =" img test.jpg "; // here document.getElementById (" img ") is DOM objects;
say an example: is this, I often write at the time of writing jQuery: this.attr ( "src", "test.jpg"); but that is wrong. In fact, this is a DOM object,
and .attr ( "src", "test.jpg ") is a jQuery method, so wrong.
To solve this problem we must convert the DOM object to jQuery object, for example: $ (the this) .attr ( "src", "test.jpg");
2, converting a DOM object and jquery object
DOM object into a jQuery object:
to have a DOM object, just use the $ () to wrap up the DOM object, you can get a jQuery object up.
Method: $ (DOM object)
var document.getElementById V = ( "V"); // DOM object
var $ v = $ (v) ; // jQuery objects
jQuery object into a DOM objects:
two conversion a manner jQuery object into a DOM object: [index] and .get (index);
(. 1) the jQuery object is a data object, by [index] method to give the corresponding DOM object.
var $ v = $ ( "# v"); // jQuery objects
var v = $ v [0] ; // DOM objects
alert (v.checked) // detect whether the checkbox is checked
(2) jQuery itself provides, by .get (index) method, to give the corresponding DOM object.
var $ v = $ ( "# v"); // jQuery objects
var v = $ v.get (0) ; // DOM objects
alert (v.checked) // detect whether the checkbox is checked