Example analysis of the relationship between JS, DOM and JQuery

Home

Web Front-end

JS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:53 PM

dom jquery js

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">

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7715

Java Tutorial

1641

CakePHP Tutorial

1395

Laravel Tutorial

1289

PHP Tutorial

1232

Related knowledge

Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

Detailed explanation of jQuery reference methods: Quick start guide Feb 27, 2024 pm 06:45 PM

Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded

How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

How to remove the height attribute of an element with jQuery? Feb 28, 2024 am 08:39 AM

How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element

The relationship between js and vue Mar 11, 2024 pm 05:21 PM

The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.

jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

See all articles