Today I learned DOM and did some basic exercises ...
The DOM is an abbreviation for the Document Object model, which uses JavaScript to manipulate the DOM for DHTML Development.
Learning goals: The ability to use JavaScript to manipulate the DOM to achieve common DHTML effects.
Reference book: Zhang Xiaoxiang: "JavaScript Web Development--Experiential learning course"
First, the introduction of DOM:
1, Dom is the model of HTML page, each label as an object, JavaScript by calling the DOM properties, methods can be in the Web page text boxes, layers and other elements of the editing
Process Control. For example, by manipulating the DOM object of a text box, you can read the value in the text box and set the value in the text box.
2, Dom also like WinForm, through events, properties, methods for programming.
3, css+javascript+dom=dhtml (that is, Dynamic HTML, is an extension of the HTML language. It can increase the presentation effects of documents and objects. ）
Ii. Events:
1. Event: <body onmousedown= "alert (' haha ')" > Executes the code in onmousedown when clicking the mouse. Sometimes there's too much code for the incident response, and it's a separate letter.
Number of:
Copy Code code as follows:
<script type= "Text/javascript" >
function Bodymousedown ()
{
Alert ("The Web page is broken, lose it!") ");
Alert ("Tease you to play!") ");
}
</script>
<body onmousedown= "Bodymousedown ()" >
Note that the parentheses after the Bodymousedown cannot be lost because the response function that represents the call to the Bodymousedown function, rather than the onmousedown event, is Bodymousedown.
2. Dynamically set up events:
You can set the event response function dynamically in your code, just like. NET in the BTN. click+= "the same.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script type= "Text/javascript" >
function Bodymousedown () {
Alert ("Page is broken, pay!");
Alert ("Tease you to play!");
}
Function F1 () {
Alert ("I am F1");
}
function F2 () {
Alert ("I am F2");
}
</script>
<body>
<input type= "button" onclick= "Document.ondblclick=f1" value= "associated event 1"/>
<input type= "button" onclick= "Document.ondblclick=f2" value= "associated event 2"/>
</body>
3, Window objects represent the current browser windows, use the Properties of Window objects, methods can be omitted window, such as Window.alert (' a ') can be omitted as alert (' a ')
1 Alert method, pop-up message dialog box
2 Confirm method, display the OK, Cancel dialog box, if the "OK" button is pressed, return true, otherwise false.
if (confirm) (Do you want to continue?) "))
｛
Alert ("OK");
｝
Else
{Alert ("Cancel");}
3) re-navigate to the specified address: navigate ("http://www.microsoft.com/");
4) setinterval executes the specified code every other time, the first parameter is the string of code, the second parameter is the interval (in milliseconds), and the return value is the identifier of the timer. such as: SetInterval ("alert (' Hello ')", 5000);
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Welcome to my homepage </title>
<script type= "Text/javascript" >
function Scroll () {
var title = Document.title;
var firstch = Title.charat (0);
var leftstr = title.substring (1, title.length);
Document.title = Leftstr + firstch;
//purpose is to scroll the title of the page
SetInterval ("Scroll ()", 500);
</script>
<body>
</body>
5) clearinterval Cancel the setinterval execution, which is equivalent to the Enabled=false in the timer. Because SetInterval can set multiple timings, clearinterval specifies to clear the identity of that timer, that is, the setinterval return value. var intervalld= setinterval ("alert (' Hello ')", 5000);
Clearinterval (INTERVALLD);
6 settimeout is also timed to execute, but not like SetInterval is timed to perform, but set time after only one execution, cleartimeout is also clear timing.
Good distinction: interval is timed; timeout is a time-out. such as: Var timeoutld=settimeout ("Alert (' Hello ')", 2000);
Case: The implementation of the title bar Merry-go effect, that is, the browser's title text every 500ms scrolling right. Tip: The caption is Document.title property.
4, 1) onload: The Web page loaded when the trigger, the browser is one side of the download document, while parsing execution, may appear JavaScript execution needs to operate an element, this element has not been loaded, if this will be the operation of the code into the body of the onload incident, Or you can put JavaScript behind the elements. Elements of the OnLoad event is the element itself loaded when the trigger, and the body of the onload is all loaded complete.
2) OnUnload: When the Web page closes (or leaves), it triggers. Assign a value to "Window.event.returnValue" in the event (a warning message to display) so that the window leaves (such as forward, rewind, close) and a confirmation message pops up. such as: <body onbeforeunload= "window.event.returnvalue=" really want to give up the post exit? ' >
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script type= "Text/javascript" >
Showmodeldialog (' htmlpagewindow.htm ');/Be intercepted
Btn.value = "OK"/error, because the BTN element is not yet built
</script>
<body onload= "btn.value= ' OK", "onbeforeunload=" window.event.returnvalue= "really want to give up the post exit?" The article will be lost! '; ' >
<input type= "button" id= "btn" value= "modal Dialog" onclick= "showModelessDialog (' htmlpagewindow.htm ')"/>
<input type= "Text"/>
<textarea cols= "rows=" ></textarea>
</body>
5, other events:
In addition to the unique attributes, of course, there are common HTML element events: OnClick (click), ondblclick (double-click), onkeydown (press the key), onkeyup (press the key to release), onkeypress (click the button), OnMouseDown (mouse down), onmousemove (mouse move), onmouseout (mouse away from the element range),
onMouseOver (mouse move to element range), onmouseup (mouse button release) and so on.
Three, Window object properties
1, window.location.href= "http://www.sina.com.cn", redirect the new address, and navigate method effect. Window.location.reload () refreshes the page.
2, Window.event is a very important attribute, used to obtain information when the event occurred, the event is not limited to the Window object events, all elements of events can be through the event attribute to the relevant information.
1 Altkey property, boot type, which indicates whether the ALT key was pressed when the event occurred, similar to the Ctrlkey, Shiftkey properties, example <input type= "button" value= "click" onclick= "if ( Event.altkey)
{alert (' alt-click ')}else{alert (' Normal click ')} "/>;
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<body>
<input type= "button" value= "href" onclick= "alert (location.href)"/>
<input type= "button" value= "redirect" onclick= "location.href= ' htmlpage1.htm '"/>
<input type= "button" value= "click" onclick= "if (window.event.ctrlKey) {alert (' Press CTRL ')}else{alert (' Normal click ')}"/>
<a href= "http://www.baidu.com" onclick= "alert (' Prohibit access! '); window.event.returnvalue=false; " > Hundred Poison </a>
<form action= "Jing.aspx" >
<input type= "Submit" value= "submitted" onclick= "alert (' data is problematic! '); Window.event.returnvalue=false; "/>
</form>
</body>
2 The coordinates of the mouse in the client area when the ClientX and ClientY occur, ScreenX, screeny the coordinates of the mouse on the screen when the event occurs; OffsetX, OffsetY the coordinates of the mouse when the event occurs, relative to the source of the event, such as when the button is clicked.
3) ReturnValue property, if the returnvalue is set to False, the default event processing is canceled.
4) Srcelement: Get Event Source Object
5) KeyCode: Key value when the time occurs
6 button: The time when the mouse button, 1 for the left key, 2 for the right key, 3 for the key around the same time. <body onmousedown= ' if (event.button==2) {alert (' Prohibit copy ')} ' >
