Today's content:
1. JavaScript: 1. ECMAScript: 2. BOM: 3. DOM: 1. Event
DOM simple learning: to meet case requirements
*Function: control the content of html document
*Get page label (Element) object: element
*document.getElementById("id value"): get the element object through its id
*To manipulate an Element object:
1. Modify attribute value:
1. What is the object of acquisition?
2. Check the API document to find out which properties can be set
2. Modify the label content:
*Property: innerHTML
1. Get element object
2. Use the innerHTML attribute to modify the label body content
Event simple learning
* Function: after some components are executed some operations, trigger the execution of some code.
* Sentence making: xxx cover xxx,I will xxx
* When our crystal is destroyed, I blame my friend.
* When the enemy crystal is destroyed, I praise myself.
* How to bind events
1. Directly in html On the tag, specify the properties of the event(operation)，The property value is js Code
1. Event: onclick--- Click events
2. adopt js Get element object, specify event attribute, set a function
* Code:
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun(){
alert('I was ordered.');
alert('I was ordered again');
}
function fun2(){
alert('How can I get older?');
}
//1. Get light2 object
var light2 = document.getElementById("light2");
//2. Binding event
light2.onclick = fun2;
</script>
</body>
* Case 1: light switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Light switch</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
/*
Analysis:
1.Get picture object
2.Bind click event
3.Switch pictures every time you click
* Rules:
* If the light is on, switch the picture to off
* If the light is off, switch the picture to on
* Using flag to complete
*/
//1. Get picture object
var light = document.getElementById("light");
var flag = false;//It means the light is off. Off pictures
//2. Bind click event
light.onclick = function(){
if(flag){//Judge if the light is on, it will be off
light.src = "img/off.gif";
flag = false;
}else{
//If the light is off, turn it on
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
BOM:
1. Concept: Browser Object Model Browser object model
* Encapsulate the components of the browser into objects.
2. Form:
* Window: Window object
* Navigator: Browser object
* Screen: Display screen object
* History: History object
* Location: Address bar object
3. Window: Window object
1. Establish
2. Method
1. Methods related to pop ups:
alert() Displays a warning box with a message and a confirm button.
confirm() Displays a dialog box with a message and a confirm and Cancel buttons.
* If the user clicks the OK button, the method returns true
* If the user clicks the Cancel button, the method returns false
prompt() Displays a dialog box that prompts you for input.
* Return value: get the value entered by the user
2. Methods related to opening and closing:
close() Close the browser window.
* Who calls me? Who do I turn off
open() Open a new browser window
* Return to new Window object
3. Timer related methods
setTimeout() Call a function or compute expression after a specified millisecond count.
* Parameters:
1. js Code or method object
2. Millisecond value
* Return value: unique identification, used to cancel the timer
clearTimeout() Cancel from setTimeout() Method set timeout.
setInterval() Calls a function or evaluates an expression in milliseconds over a specified period.
clearInterval() Cancel from setInterval() Set up timeout.
3. Properties:
1. Get other BOM Participants:
history
location
Navigator
Screen:
2. Obtain DOM object
document
4. Characteristic
* Window Objects do not need to be created and can be used directly window Use. window.Method name();
* window References can be omitted. Method name();
4. Location: Address bar object
1. Establish(Obtain):
1. window.location
2. location
2. Method:
* reload() Reloads the current document. Refresh
3. attribute
* href Set or return to full URL.
5. History: History object
1. Establish(Obtain):
1. window.history
2. history
2. Method:
* back() Load history Previous in list URL.
* forward() Load history Next in list URL.
* go(parameter) Load history A specific page in the list.
* Parameters:
* Positive number: Several Historical Records
* Negative: back several history records
3. Properties:
* length Returns the URL Number.
DOM:
* Concept: Document Object Model Document object model
* The components of markup language document are encapsulated as objects. You can use these objects to CRUD Dynamic operation of
* W3C DOM The standard is divided into three different parts:
* core DOM - Standard model for any structured document
* Document: Document object
* Element: Element object
* Attribute: Attribute object
* Text: Text object
* Comment:annotation objects
* Node: Node object, other 5 parent objects
* XML DOM - In the light of XML Standard model for documents
* HTML DOM - In the light of HTML Standard model for documents
* core DOM Model:
* Document: Document object
1. Establish(Obtain): stay html dom Available in models window Object to get
1. window.document
2. document
2. Method:
1. Obtain Element Participants:
1. getElementById() : according to id Property value gets the element object. id Property values are generally unique
2. getElementsByTagName(): Get the element objects according to the element name. The return value is an array
3. getElementsByClassName():according to Class Attribute values get the element objects. The return value is an array
4. getElementsByName(): according to name Attribute values get the element objects. The return value is an array
2. Create other DOM Participants:
createAttribute(name)
createComment()
createElement()
createTextNode()
3. attribute
* Element: Element object
1. Obtain/Creating: by document To get and create
2. Method:
1. removeAttribute(): Delete attribute
2. setAttribute(): set a property
* Node: Node object, other 5 parent objects
* Features: all dom Object can be considered as a node
* Method:
* CRUD dom Tree:
* appendChild(): Add a new child to the end of the node's child list.
* removeChild() : Deletes (and returns) the specified child of the current node.
* replaceChild(): Replace a child node with a new one.
* Properties:
* parentNode Returns the parent of the node.
* HTML DOM
1. Setting and obtaining of label body: innerHTML
2. Use html Attribute of element object
3. Control element styles
1. Using element's style Property to set
//Such as:
//Modify style mode 1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. The style of the class selector is defined in advance through the className Property to set its class Attribute value.
Event monitoring mechanism:
*Concept: some components are executed some operations, trigger the execution of some code. *Event: some actions. For example: click, double-click, keyboard pressed, mouse moved *Event source: component. For example: button text input box *Listener: code. *Register listening: combine event, event source and listener together. When an event occurs on the event source, the execution of a listener code is triggered. *Common events: 1. Click event: 1. onclick: click event 2. ondblclick: double click event 2. Focus events 1. onblur: lose focus 2. onfocus: element gets focus. 3. Load event: 1. onload: a page or an image is loaded. 4. Mouse event: 1. onmousedown mouse button is pressed. 2. onmouseup mouse button is released. 3. onmousemove mouse is moved. 4. onmouseover mouse over an element. 5. onmouseout mouse moves away from an element. 5. Keyboard events: 1. onkeydown a keyboard key is pressed. 2. onkeyup a keyboard key is released. 3. onkeypress a keyboard key is pressed and released. 6. Selection and change 1. The content of onchange field is changed. 2. onselect text is selected. 7. Form event: 1. The onsubmit confirmation button is clicked. 2. The onreset button is clicked.
278 original articles published, praised 129, visited 90000+