1. DOM objects
The DOM is actually a document model described in an object-oriented way. The DOM defines the objects needed to represent and modify documents, the behavior and properties of these objects, and the relationships between these objects.
According to the W3C DOM specification, DOM is an application programming interface (API) for HTML and XML.
Through the DOM, all HTML elements can be accessed, along with the text and attributes they contain, the content can be modified and deleted, and new elements can be created.
HTML DOM is independent of platform and programming language, it can be used by any programming language such as JAva, JavaScript and VBScript.
DOM objects, that is, the objects we get with traditional methods (javascript).
2. jQuery object
The jQuery object is actually an array of javascript, this array contains 125 methods and 4 properties;
The 4 properties are:
jquery current jquery framework version number
length indicates the number of elements in the array object
context generally points to the HtmlDocument object
selector The content of the selector passed in, such as: #yourId or .yourClass, etc.
If you get the jquery object through the $("#yourId") method,
and you have only one element with id yourId in your page
Then $("#yourId")[0] is the HtmlElement element
It is the same as the element obtained by document.getElementById("yourId")
Simple understanding, is the object created by jQuery
A jQuery object is an object generated by wrapping a DOM object with jQuery . The jQuery object is unique to jQuery, it can use the methods in jQuery, but cannot use the methods of the DOM
3. The difference between DOM objects and jQuery objects
[javascript]
var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery object;
[javascript]
$("#img").attr("src","test.jpg"); //$("#img") here is to get the jQuery object
[javascript]
document.getElementById("img").src="test.jpg";//here
document.getElementById("img") is the DOM object;
Another example: this, I often write this when I write jQuery:
this.attr(“src”,”test.jpg”);
But it is wrong. In fact, this is a DOM object, and .attr("src", "test.jpg") is a jQuery method, so there is an error. To solve this problem, convert the DOM object into a jQuery object, for example: $(this).attr("src","test.jpg");
4. Conversion of DOM objects and jquery objects
DOM object to jQuery object:
For what is already a DOM object, just wrap the DOM object with $() to get a jQuery object.
Method: $(DOM object)
[javascript]
var v=document.getElementById("v"); //DOM object
var $v=$(v); //jQuery object
jQuery object into DOM object:
Two conversion methods convert a jQuery object into a DOM object: [index] and .get(index);
(1) The jQuery object is a data object, and the corresponding DOM object can be obtained through the [index] method.
[javascript]
var $v =$("#v") ; //jQuery object
var v=$v[0]; //DOM object
alert(v.checked) //Check whether this checkbox is selected
(2) jQuery itself provides the corresponding DOM object through the .get(index) method.
[javascript]
var $v=$("#v"); //jQuery object
var v=$v.get(0); //DOM object
alert(v.checked) //Check whether this checkbox is selected
The Document Object Model (DOM for short) is a standard programming interface recommended by the W3C organization for dealing with extensible markup languages. On a web page, the objects that organize the page (or document) are organized in a tree structure, and the standard model used to represent the objects in the document is called the DOM.
The history of the Document Object Model can be traced back to the "browser war" between Microsoft and Netscape in the late 1990s. In order to fight for life and death between JavaScript and JScript, the two sides endowed the browser with powerful functions on a large scale. Microsoft has added a lot of exclusive things to the web page technology, including VBScript, ActiveX, and Microsoft's own DHTML format, etc., so that many web pages cannot be displayed normally on non-Microsoft platforms and browsers. DOM is a masterpiece that was brewed at that time.
jQuery is a cross-browser JavaScript library that simplifies the operation between HTML and JavaScript. First release by John Resig at BarCamp NYC in January 2006. It is currently being developed by a development team led by Dave Methvin. 59% of the top 10,000 most visited websites in the world use jQuery, which is currently the most popular JavaScript library.