Dom learning summary and introduction to the use of examples_javascript skills

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




         


 
 
 

 
 
 

Case 2:

Copy code

The code is as follows:

getElementByName




    
 
 
    
    
    
    
    
 
 

案例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










< ;/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





 
 
    

         leaving into the dog

         take a shower

         fire heart

         china

        

            
            
            
        

    

 
 

案例4：权限选择

复制代码 代码如下:

Permission selection

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved