Content:
1. JavaScript: 1. ECMAScript: 2. BOM: 3. DOM: 1. Event
DOM Simple Learning: To meet case requirements
*Function: Control the content of html documents
*Get page label (element) object: Element
* document.getElementById("id value"): Get the element object from the element's ID
*Operating on Element objects:
1. Modify attribute values:
1. Which object is explicitly acquired?
2. Check the API documentation to find out which properties can be set
2. Modify label contents:
* Attribute: innerHTML
1. Get Element Object
2. Use innerHTML attribute to modify tag body content
Event Simple Learning
* Function: Some components trigger the execution of some code after certain actions have been performed.
* Sentence-making: xxx cover xxx,I am xxx
* After our crystal was destroyed, I blamed my friend.
* When the enemy crystal is destroyed, I praise myself.
* How to Bind Events
1. Directly in html On the label, specify the properties of the event(operation)，The attribute value is js Code
1. Event: onclick--- Click Event
2. adopt js Get an element object, specify event properties, 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 old am I?');
}
//1. Get the light2 object
var light2 = document.getElementById("light2");
//2. Binding events
light2.onclick = fun2;
* 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 Objects
2.Bind Click Event
3.Switch pictures per click
* Rules:
* If the light is on, switch the picture to off
* If the light is off, switch the picture to on
* Complete with flag Tags
*/
//1. Get picture objects
var light = document.getElementById("light");
var flag = false;//The representative light is off.Off pictures
//2. Binding Click Events
light.onclick = function(){
if(flag){//Judge that if the light is on, it will go out
light.src = "img/off.gif";
flag = false;
}else{
//If the lamp is off, turn it on
light.src = "img/on.gif";
flag = true;
}
}
</script> </body> </html>
BOM:
1. Concepts: Browser Object Model Browser Object Model
* Encapsulates each component of the browser as an object.
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-up boxes:
alert() Displays a warning box with a message and a confirmation button.
confirm() Displays a dialog box with a message and confirmation and cancellation 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 the user 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 I turn off
open() Open a new browser window
* Return to New Window object
3. Ways related to timers
setTimeout() Calls a function or evaluates an expression after a specified number of milliseconds.
* Parameters:
1. js Code or Method Object
2. Millisecond value
* Return value: Unique identification used to cancel the timer
clearTimeout() Cancel by setTimeout() Method Set timeout.
setInterval() Calls a function or evaluates an expression for a specified period in milliseconds.
clearInterval() Cancel by setInterval() Set timeout.
3. Attributes:
1. Get Other BOM Object:
history
location
Navigator
Screen:
2. Obtain DOM object
document
4. Characteristic
* Window Objects do not need to be created to 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() Reload the current document.Refresh
3. attribute
* href Set or return complete URL.
5. History: History Object
1. Establish(Obtain):
1. window.history
2. history
2. Method:
* back() Load history The first one in the list URL.
* forward() Load history Next in the list URL.
* go(parameter) Load history A specific page in the list.
* Parameters:
* Positive numbers: a few previous histories
* Negative number: go back a few records
3. Attributes:
* length Return to the URL Number.
DOM:
* Concepts: Document Object Model Document Object Model
* Encapsulates the components of a markup language document as objects.These objects can be used for markup language documents CRUD Dynamic operation
* W3C DOM The criteria are divided into three different sections:
* core DOM - Standard model for any structured document
* Document: Document object
* Element: Element object
* Attribute: Property Object
* Text: Text object
* Comment:annotation objects
* Node: Node object, other five 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 Can be used in models window Object to get
1. window.document
2. document
2. Method:
1. Obtain Element Object:
1. getElementById() : according to id Attribute value gets element object. id Attribute values are generally unique
2. getElementsByTagName(): Gets the element objects based on the element name.The return value is an array
3. getElementsByClassName():according to Class Attribute values get element objects.The return value is an array
4. getElementsByName(): according to name Attribute values get element objects.The return value is an array
2. Create Others DOM Object:
createAttribute(name)
createComment()
createElement()
createTextNode()
3. attribute
* Element: Element object
1. Obtain/Create: Through document To get and create
2. Method:
1. removeAttribute(): Delete Properties
2. setAttribute(): set a property
* Node: Node object, other five parent objects
* Features: All dom Objects can be considered a node
* Method:
* CRUD dom Tree:
* appendChild(): Add a new child node to the end of the node's child node list.
* removeChild() : Deletes (and returns) the specified child node of the current node.
* replaceChild(): Replace a child node with a new node.
* Attributes:
* parentNode Returns the parent node of a node.
* HTML DOM
1. Setup and acquisition of label body: innerHTML
2. Use html Properties of Element Objects
3. Control Element Style
1. Using elements style Property to set
//For example:
//Modify Style Style 1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. Define the style of the class selector in advance, using the element's className Property to set it class Property value.
Event monitoring mechanism:
*Concept: Some components trigger the execution of some code after certain actions have been performed. *Event: Some actions.For example: click, double click, keyboard press, mouse move *Event source: component.For example: Button text input box... *Listener: Code. *Register listeners: Combine events, event sources, and listeners together.When an event occurs on the event source, the execution of a listener code is triggered. *Common events: 1. Click Events: 1. onclick: click the event 2. ondblclick: Double-click event 2. Focus Events 1. onblur: lose focus 2. onfocus: Element gets focus. 3. Load events: 1. onload: A page or an image is loaded. 4. Mouse events: 1. The onmousedown mouse button is pressed. 2. The onmouseup mouse button is released. 3. The 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 the onchange field is changed. 2. onselect text is selected. 7. Form events: 1. onsubmit confirmation button is clicked. 2. The onreset reset button is clicked.
