Example analysis of the relationship between JS, DOM and JQuery_Basic knowledge

DOM (document object model) is actually a general term for element objects in the browser

All operations we use JavaScript to perform on web pages are performed through DOM. The DOM belongs to the browser and is not the core content specified in the JavaScript language specification. Therefore, if you download a JavaScript language reference help document and check it, you will not be able to find even the document.write method that is well known to women and children.

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and can change the content and presentation of the document. What we are most concerned about is that the DOM connects web pages with scripts and other programming languages. Script developers can control, manipulate, and create dynamic web page elements through the document object's properties, methods, and events. Each web page element (an HTML tag) corresponds to an object (object, the so-called "object" means "thing" in vernacular. The word object is usually translated as "object" in Taiwan). The tags on the web page are nested layer by layer, and the outermost layer is . The document object model is also nested layer by layer, but it is usually understood as the shape of a tree. The root of the tree is the window or document object, which is equivalent to the periphery of the outermost label, that is, the entire document.

A small example:

Copy code The code is as follows:

< ;script type="text/javascript">
var x = document.getElementById("test");
var xc = x.childNodes;
var xcl = xc.length;
for (var i=0;idocument.write("nodeName = " xc[i].nodeName "; nodeType = " xc[i].nodeType "
") ;}

Javascript can operate on the DOM. For example: a is a DOM object, and javascript can add, delete, and other operations on it. .

Many people see the word "Java" in Java and JavaScript and think they are the same thing. Even I was like this at the beginning. In fact, they are two completely different things. Java, whose full name should be Java Applet, is a small program embedded in a web page and has its own independent running window. Java Applets are pre-compiled. If you open an Applet file (.class) with Notepad and read it, you cannot understand it at all. Java Applet is very powerful. It can access http, ftp and other protocols, and can even plant viruses on the computer (there is precedent). In comparison, JavaScript's capabilities are relatively small. JavaScript is a kind of "script" ("Script"). It writes codes directly into HTML documents. They are compiled and executed when the browser reads them. Therefore, if you can view the HTML source file, you can view the JavaScript source code. JavaScript does not have an independent running window. The current window of the browser is its running window. The only thing they have in common is that they use Java as the programming language. JavaScript is a client-side scripting language that is object- and event-driven and relatively secure. It is also a scripting language widely used in client-side web development. It is often used to add dynamic functions to HTML web pages, such as responding to various user operations.

A small example:

Copy code The code is as follows:

var myVariable="outside";
function myFunction(){
var myVariable="inside";
alert(myVariable);
}
myFunction();
alert(myVariable) ;

Jquery is the so-called JavaScript framework, which is actually a collection and packaging of JavaScript functions.

Jquery is another excellent Javascript framework after prototype. It is a lightweight js library (only 21k after compression). It is compatible with CSS3 and various browsers (IE 6.0, FF1.5, Safari 2.0, Opera 9.0). jQuery enables users to more easily process HTML documents and events, implement animation effects, and easily provide AJAX interaction for websites. Another big advantage of jQuery is that its documentation is very complete and its various applications are explained in detail. There are also many mature plug-ins to choose from. jQuery can keep the code and HTML content of the user's HTML page separated. That is to say, there is no need to insert a bunch of js in the HTML to call the command. You only need to define the id.

jQuery is currently the most widely used javascript function library. According to statistics, 46% of the top 1 million websites in the world use jQuery, far more than other libraries. Microsoft even uses jQuery as their official library. For web developers, learning jQuery is necessary. Because it allows you to understand the most common techniques in the industry, lays the foundation for learning more advanced libraries in the future, and can indeed create many complex effects easily.

A small example:

Copy code The code is as follows:

< ;script type="text/javascript" src="jquery.js">