search

Home >Web Front-end >JS Tutorial >js DOM study notes_javascript skills

js DOM study notes_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:57:551193browse

Today I learned DOM and did the following basic exercises...
DOM is the abbreviation of Document Object Model; use JavaScript to operate DOM for DHTML development.
Learning goal: Be able to use JavaScript to operate Dom to achieve common DHTML effects.
Reference book: Zhang Xiaoxiang's "JavaScript Web Development - Experiential Learning Tutorial"
1. Introduction to DOM:
1. DOM is the model of an HTML page. Each tag is treated as an object. JavaScript can programmatically control text boxes, layers and other elements in web pages by calling attributes and methods in the DOM. For example, by manipulating the DOM object of the text box, you can read and set the value in the text box.
2. DOM, like WinForm, can be programmed through events, properties, and methods.
3. CSS JavaScript DOM=DHTML (i.e. dynamic HTML, an extension of the HTML language. It can increase the presentation effect of documents and objects.)
2. Events:
1. Event: The code in onmousedown is executed when the mouse is clicked. If there is too much code to respond to time events, put it in a separate function
:

Copy the code The code is as follows:



Please note: the brackets after bodymousedown cannot be lost, because it means calling the bodymousedown function, not the response function of the onmousedown event is bodymousedown.
2. Dynamically set events:
The event response function can be dynamically set in the code, just like "btn.Click=" in .Net.

Copy code The code is as follows:
.org/1999/xhtml">










3. window object Represents the current browser window. When using the properties and methods of the window object, you can omit the window. For example, window.alert('a') can be omitted to alert('a')
1) The alert method pops up a message dialog box
2) The confirm method displays the "OK" and "Cancel" dialog boxes. If the [OK] button is pressed, it returns true, otherwise it returns false.
if(confirm("Continue?"))
｛
alert("Confirm");
｝
else
{ alert("Cancel");}
3) Navigate again to the specified address: navigate("http://www.microsoft.com/");
4) setInterval executes the specified code every once in a while, and the first parameter is the string of the code , the second parameter is the interval time (unit: milliseconds), and the return value is the timer ID. For example: setInterval("alert('hello')",5000);


Copy code The code is as follows:


Welcome to my homepage







5) 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);
6) setTimeout is also executed regularly, but it is not executed regularly like setInterval, but after the set time Only executed once, clearTimeout is also the clearing time.
It’s easy to distinguish: Interval means timing; Timeout means timeout. For example: var timeoutld=setTimeout("alert('hello')",2000);
Case: Realize the revolving effect of the title bar, that is, the title text of the browser scrolls to the right every 500ms. Tip: The title is the document.title attribute.
4. 1) onload: Triggered when the web page is loaded. The browser downloads the document while parsing and executing it. It may happen that a certain element needs to be operated when JavaScript is executed. This element has not been loaded. In this case, the operation must be performed. Put the code in the onload event of the body, or you can put the JavaScript after the element. The element's onload event is triggered when the element itself is loaded, and the onload in the body is when all loading is completed.
2) onunload: Triggered after the web page is closed (or left). Assign a value to "Window.event.returnValue" in the event (the warning message to be displayed), so that a confirmation message will pop up when the window is left (such as forward, backward, closed). For example:
Copy code The code is as follows: