Understand the basic properties of BOM and DOM

history Historical object , It can be used to move forward or backward a page

Attributes are back( back off ),forward( Forward ),go( Refresh ) Be careful :go(1) Forward ,go(2) Advance to the second page ,go(-1) back off ,go(0) Refresh

 

location Address object , Can be used to get the current URL Information about

window.location object

Used to get the address of the current page (URL), And redirect the browser to a new page

location.href Returns the current URL Information about , Full address , You can also load new documents directly

location.pathname Meeting return URL Pathname

location.assign Load new document , Do not use it before use , You can load new files directly

location.href You can also load new documents directly

location.host  Address   Including domain name and port

location.hostname domain name , You can print out the domain name of the web page

location.origin source address , Include ( agreement :http:// or :https:// encryption ), Domain name and port

location.port Address port

location.protocol agreement :http:// or https:// encryption

location.hash '#abc' Get hash address or anchor connection address name , belt ! Will appear , Generally, the anchor address is placed behind the search data

location.search Search data , belt ? No. will appear

location.reload Reload equals history.go(0) Functions with consistent effects

location.raplace Replace the current page with another page , There is no history .

localStorage Permanent storage , There will also be browsers after refreshing , Even if you close the page, it will still exist , Unless you clear the data yourself , Be careful : The domain name is consistent with the port , Even if the path is different , But the data still exists

The first one is :

localStorage.setItem The storage method passes two values , One is the key. ( Secret key ), The second is the value

The second kind :

localStorage.ege

Value method

The first one is :

localStorage.getItem Inside the incoming key key

second Kind of :

localStorage.name( Changeable , Can also be ege) No matter what type it was stored before , All of them are string types , Note that , Before accessing the object , You need to convert to string type to access

Clear storage

Clear single data

localStorage.removeItem()

Clear all data

localStorage.clear()

SessionStorage Store the object , Can be used to store data , and cookie( achieve kb) be similar , The difference is that it's designed for larger capacity storage , It is also more convenient to use , After opening, its value refresh will still exist , But when the web page is closed, it's gone

window Window object , It can be used to control the current window , Or open a new window

JavaScript Popup

Popup grammar explain

  Warning box window.alert() Used to ensure that users can get some information

Prompt box window.prompt() It is used to prompt the user to enter a value before entering the page

Confirmation box window.confirm() Used to verify whether user actions are accepted , Its function is to have a return value , Confirm to return ture, Cancel fales.

confirm() Method

confirm(" The plain text displayed in the dialog box ")

var r=confirm(" Press the button !");

if (r==true){

x=" You pressed 【 determine 】 Button !";

}else{

x=" You pressed 【 Cancel 】 Button !";

}

"0" and '  ' And "null", Invisible data type conversion , The result is ture

0 and '' And null Invisible data type conversion , The result is false

What is? DOM

DOM：Document Object Model（ Document object model ）

yes HTML Document object model （HTML DOM） A set of standard methods defined , Used to access and manipulate HTML file

lookup HTML Elements

grammar explain

document.getElementById adopt id Property to get the object

document.getElementsByTagName Get object by tag name

document.getElementsByClassName adopt class Property to get the object

HTML DOM - change HTML

grammar explain

document.write() change HTML Output stream

object .innerHTML= new HTML change HTML Content

object .attribute= New attribute value change HTML attribute

var changeName1=document.getElementById("a").innerHTML=" Running water has no intention ";

var changePic1=document.getElementById("b").src="image/a.jpg";

HTML DOM - change CSS

grammar explain

object .style.property= New style adopt id Property to get the object

document.getElementById("a").style.width="100px";

document.getElementById("a").style.height="150px";

practice 1：

Render the left menu bar ：

JavaScript Timing events Execute the code after a set interval , Not immediately after the function is called ( In milliseconds ,1 second =1000 millisecond ) He is window Object methods

grammar explain

setInterval() Executes the specified code continuously for the specified number of milliseconds in the interval

The first value is :' Called function ' Second value : The number of milliseconds between )

Set the number of milliseconds to perform repeated printing , You can use his id The only way , To set the key to clearing

clearInterval() Used to stop setInterval() Method executes function code using id To get rid of

setTimeout() After pausing the specified number of milliseconds, only Do it once Execute the specified code

The first value is :' Called function ' Second value : The number of milliseconds to wait )

clearTimeout() Used to stop execution setTimeout() Method , Click... Before execution , Will organize setTimeout() Appearance

setInterval() And setTimeout Features and differences

characteristic

setInterval() and setTimeout() Used to handle delayed and scheduled tasks

difference

setTimeout() Method is used to call functions or compute expressions after specified milliseconds. , and setInterval() You can call a function or expression every specified number of milliseconds

practice 1： Combine date objects , Use JavaScript Timing event production    Display the current year, month, day, hour, minute and second in real time