Home Web Front-end JS Tutorial Dom learning summary and introduction to the use of examples_javascript skills

Dom learning summary and introduction to the use of examples_javascript skills

May 16, 2016 pm 05:35 PM
dom js

1. Re-navigate to the specified address: navigate("http://www.jb51.net");

2,

(1. *setInterval executes the specified code at intervals. The first parameter is the string of the code, the second parameter is the interval time (unit: milliseconds), and the return value is the identifier of the timer. For example:

setInterval("alert('hello')",5000);

*clearInterval cancels the scheduled execution of setInterval, which is equivalent to Enabled=False in Timer. Because setInterval can set multiple timings, clearInterval must specify the identifier of the timer to clear, which is the return value of setInterval.

var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);

(2. setTimeout is also a scheduled execution, but it is not a scheduled execution like setInterval. Instead, it is only executed once after setting the time. clearTimeout is also a clearing timing.
It is easy to distinguish: Interval is timing; Timeout is timeout.

var timeoutld=setTimeout("alert('hello')",2000);
(3. Case: Realizing the effect of title bar revolving door, that is, the browser's title text scrolls to the right every 500ms

Copy code The code is as follows:

Marquee effect


/title & gt;
& lt; script type = "text/javascript" & gt;
Function Scroll () {
var Title = document.tital; (0);
          var last = title.substring(1, title.length); 🎜>                                            script>







3.

(1. onload: Triggered when the web page is loaded. The browser downloads the document and parses and executes it at the same time. It may happen that a certain element needs to be operated when JavaScript is executed. This element has not been loaded. If so, the operation must be done. The code is placed in the onload event of the body, or the JavaScript can be placed after the element. The onload event of the element is triggered when the element itself is loaded, and the onload in the body is completed.
(2. onunload: web page. Triggered after closing (or leaving). onbeforeunload: A confirmation message will pop up when the window leaves (such as moving forward, backward, or closing). For example: ? '">

4,

In addition to unique attributes, there are of course events for common HTML elements: onclick (click), ondblclick (double-click), onkeydown (key pressed), onkeyup (key released), onkeypress (click on the button) , onmousedown (mouse pressed), onmousemove (mouse moved), onmouseout (mouse leaves element range),
onmouseover (mouse moves to element range), onmouseup (mouse button released), etc.

5. Properties of window object

(1. window.location.href="http://www.sina.com.cn", redirect to the new address, has the same effect as the navigate method. window.location.reload() refreshes the page.
(2. window.event is a very important attribute, used to obtain information when an event occurs. Events are not limited to events of the window object. Events of all elements can obtain relevant information through the event attribute.
a. altKey attribute, boot type, indicates whether the alt key is pressed when an event occurs. Similar attributes include ctrlKey and shiftKey

Copy code The code is as follows:

windows event example







"
="Click" onclick="if(window.event.ctrlKey){alert('Ctrl pressed')}else{alert('Normal click')}" />                                                  : //www.baidu.com "Onclight =" Alert ('Forbidden access!'); Window.event.returnValue = false; px " >

;




b. clientX, clientY are the coordinates of the mouse in the client area (in the browser page) when events occur; screenX, screenY are the coordinates of the mouse on the screen when events occur; offsetX, offsetY are when events occur relative to the mouse relative to the event source ( Button button) coordinates.
c, returnValue attribute, if returnValue is set to false, the processing of the default event will be cancelled.
d, srcElement: Get the event source object
e, KeyCode: the key value when the time occurs
f, button: the mouse button when the time occurs, 1 is the left button, 2 is the right button, 3 is the left button keys simultaneously.

                                      

6. clipboardData object, operations on the pasteboard. clearData("Text") clears the pasteboard; getData("Text") reads the value of the pasteboard, and the return value is the content of the pasteboard; setData("Text",val), sets the value of the pasteboard.

(1. When copying, the oncopy method of body is triggered. Directly return false to prohibit copying.
(2 , many elements also have oncopy and onpaste events

.

Example 1: No copying

Example 3: Disable pasting into text box

Please enter your mobile phone number:

Please enter your mobile phone number again: :

Example 4: Attached content when copying

When copying articles on the website, in order to prevent copyists from not adding the source of the article, a copyright statement is automatically added after the copied content.

function modifyClipboard(){

clipboardData.setData('Text',clipboardData.getData('Text') 'This article comes from the Blog Park Technology Zone, please indicate the source when reprinting.' location.href);

}

oncopy="setTimeout ('modifyClipboard()',100)".


The user will modify the content in the pasteboard 0.1 seconds after the copy action occurs. 100ms is just a common value, you can write 1000, 10, 50, 20... You cannot directly perform operations on the pasteboard in oncopy, so set a timer to execute it after 0.1 seconds, so that it is no longer on the oncopy execution call stack.

7. Page forward and backward: history operation history

window.history.back() goes back; window.history.forward() goes forward. You can also use window.history.go(-1) to move forward; window.history.go(1) to move backward.

Example 1:

This is page 2Back


8. Document attribute (the most complex attribute) document is an attribute of the window object. Because the window can be omitted when using the window object members, document is generally written directly.

(1. Write: Write content to the document. writeln is similar to write, except that a carriage return is added at the end (2.

(3. Code written in onclick and other events will flush out the content of the page, and will only be displayed when the page is loaded. During the write process, the write will be integrated with the original content

(4.

Case 1:


Copy code The code is as follows:

getElementById



getElementById
         












Case 2:



Copy code
The code is as follows:

getElementByName



Example of getElementByName< /title> Unlike foreach in C#, for (var r in radios) does not traverse each element, but traverses the key<BR> for (var r in radios) {<BR> alert(r.value);< : 🎜>          } <BR> }<BR> function btnClick2() {<BR> var inputs = document.getElementsByTagName("input");<BR> for (var i = 0; i < inputs.length; i ) {<BR> var input = inputs(i);<BR>                                                                                                                                                                     lt ;body><br>  <input type="radio" name="gender" value="Male" />Male<br>  <input type="radio" name="gender" value="Female" / >Female<br>  <input type="radio" name="gender" value="Confidential" />Confidential<br>  <input type="button" value="click" onclick="btnClick() " /><br> " <br /><br> " <input type="text" /><br /><br> " <input type="text" /><br /><br>  <input type="text" /><br /><br>  <input type="text" /><br /><br>  <input type ="text" /><br /><br>  <input type="button" value="bytagname" onclick="btnClick2()" /><br> </body><br> </html><br><br><br>Case 3: <br><br><br><br><br>Copy code<br><br><br> The code is as follows:<br><div class="codebody" id="code77712"> <br>getElementByTagName <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br>     <title>getElementByTagName
    
 
 
    
    
    
    
    
 
 

案例4:
复制代码 代码如下:

Read protocol wait timer


                                                                                                                                                                       var leftTime = 10;
var TimeID;
function scroll() {//alert(222);
var btn = document.getElementById("btnAgree");
//If the web page is very slow, it may be timed The control has not been loaded when the server is running!
                                                                                                                                                                btn.disabled = "";
                                                                                                                         value = "Please read the agreement and agree (there are " leftTime " seconds left)";
                       leftTime--;                                              
                                                                                                                     gt;


     




Case 5:




Copy code


The code is as follows:

Beauty Clock



Welcome to daomul Welcome to my blog, thank you






< ;/html>


16. Form form: The Form object is the Dom object of the form.

Method: submit() submits the form, but does not trigger the onsubmit event. Implement autopost, that is, the page is submitted immediately after the focus leaves the control, instead of submitting only after the submit button is submitted. When the cursor leaves, the onblur event is triggered, and the submit method of the form is called in onblur. After clicking submit, the onsubmit event of the form is triggered. Data verification can be performed in onsubmit. If there is a problem with the data, return false to cancel the submission.

Case 1:




Copy code

The code is as follows:

Form



Welcome to daomul’s blog, welcome again, thank you (Form form submission 4)

 
 
    

        

        

        

        

        


            
            
            
        


    

 
 

案例4:权限选择
复制代码 代码如下:

Permission selection



Welcome to daomul Blog, welcome back, thank you (permission selection)

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use JS and Baidu Maps to implement map pan function How to use JS and Baidu Maps to implement map pan function Nov 21, 2023 am 10:00 AM

How to use JS and Baidu Map to implement map pan function Baidu Map is a widely used map service platform, which is often used in web development to display geographical information, positioning and other functions. This article will introduce how to use JS and Baidu Map API to implement the map pan function, and provide specific code examples. 1. Preparation Before using Baidu Map API, you first need to apply for a developer account on Baidu Map Open Platform (http://lbsyun.baidu.com/) and create an application. Creation completed

Recommended: Excellent JS open source face detection and recognition project 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

How to create a stock candlestick chart using PHP and JS How to create a stock candlestick chart using PHP and JS Dec 17, 2023 am 08:08 AM

How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price

How to use JS and Baidu Map to implement map click event processing function How to use JS and Baidu Map to implement map click event processing function Nov 21, 2023 am 11:11 AM

Overview of how to use JS and Baidu Maps to implement map click event processing: In web development, it is often necessary to use map functions to display geographical location and geographical information. Click event processing on the map is a commonly used and important part of the map function. This article will introduce how to use JS and Baidu Map API to implement the click event processing function of the map, and give specific code examples. Steps: Import the API file of Baidu Map. First, import the file of Baidu Map API in the HTML file. This can be achieved through the following code:

How to use JS and Baidu Maps to implement map heat map function How to use JS and Baidu Maps to implement map heat map function Nov 21, 2023 am 09:33 AM

How to use JS and Baidu Maps to implement the map heat map function Introduction: With the rapid development of the Internet and mobile devices, maps have become a common application scenario. As a visual display method, heat maps can help us understand the distribution of data more intuitively. This article will introduce how to use JS and Baidu Map API to implement the map heat map function, and provide specific code examples. Preparation work: Before starting, you need to prepare the following items: a Baidu developer account, create an application, and obtain the corresponding AP

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

How to use JS and Baidu Maps to implement map polygon drawing function How to use JS and Baidu Maps to implement map polygon drawing function Nov 21, 2023 am 10:53 AM

How to use JS and Baidu Maps to implement map polygon drawing function. In modern web development, map applications have become one of the common functions. Drawing polygons on the map can help us mark specific areas for users to view and analyze. This article will introduce how to use JS and Baidu Map API to implement map polygon drawing function, and provide specific code examples. First, we need to introduce Baidu Map API. You can use the following code to import the JavaScript of Baidu Map API in an HTML file

See all articles