了解Bom与DOM的基本属性

history历史对象,可以用来前进或后退一个页面

属性有back(后退),forward(前进),go(刷新)注意:go(1)前进,go(2)前进第二个页面,go(-1)后退,go(0)刷新

 

location地址对象,可以用来获取当前URL的信息

window.location对象

用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面

location.href返回当前的URL的信息,完整的地址,也可以直接加载新文档

location.pathname 会返回URL路径名

location.assign加载新的文档,不用使用过才能使用,可以直接加载文新档

location.href也可以直接加载新文档

location.host 地址 包括域名与端口

location.hostname域名,可以打印出网页的域名

location.origin源地址,包括(协议:http://或:https://加密),域名和端口

location.port地址端口

location.protocol协议:http://或https://加密

location.hash '#abc'获取哈希地址或锚连接地址名称,带!才会出现,一般锚地址放在搜索数据的后面

location.search搜索的数据,带?号才会出现

location.reload 重新加载等于history.go(0)效果一致的功能

location.raplace用另一个页面替换当前页面,没有历史记录.

localStorage永久存储,刷新过也会存在浏览器,就算关闭页面也会存在,除非自己清除数据,注意:域名与端口一致,即使路径不一样,但是数据仍然存在

第一种:

localStorage.setItem存储方法传两个值,一个是键(秘钥),第二个是值

第二种:

localStorage.ege

取值的方式

第一种:

localStorage.getItem里面传入键key

第二 种:

localStorage.name(可变化,也可ege)不管之前存的是什么类型,取出来都是字符串类型,注意点是,存取对象前,需要转成字符串类型才能存取

清除存储

清除单个数据

localStorage.removeItem()

清除全部数据

localStorage.clear()

SessionStorage存储对象,可以用来存储数据,和cookie(达到kb)相似,区别是它是为了更大容量存储设计的,在使用上也更加方便,打开后他的值刷新还是会存在,但是网页关闭就没有了

window窗口对象,可以用来控制当前窗口,或打开新的窗口

JavaScript弹窗

弹窗语法说明

  警告框window.alert()用于确保用户可以得到某些信息

提示框window.prompt()用于提示用户在进入页面前输入某个值

确认框window.confirm()用于验证是否接受用户操作,他的作用是会有返回值,确定返回ture,取消fales.

confirm()方法

confirm("对话框中显示的纯文本")

var r=confirm("按下按钮!");

if (r==true){

x="你按下了【确定】按钮!";

}else{

x="你按下了【取消】按钮!";

}

"0"和'  '及"null",会隐形数据类型转换,结果为ture

0和''及null会隐形数据类型转换,结果为false

什么是DOM

DOM：Document Object Model（文档对象模型）

是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档

查找HTML元素

语法说明

document.getElementById通过id属性获取对象

document.getElementsByTagName通过标签名获取对象

document.getElementsByClassName通过class属性获取对象

HTML DOM -改变HTML

语法说明

document.write()改变HTML输出流

对象.innerHTML=新的HTML改变HTML内容

对象.attribute=新属性值改变HTML属性

var changeName1=document.getElementById("a").innerHTML="流水无意";

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

HTML DOM - 改变 CSS

语法说明

对象.style.property=新样式通过id属性获取对象

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

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

练习1：

渲染左侧菜单栏：

JavaScript计时事件在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行(单位是毫秒,1秒=1000毫秒)他是window对象方法

语法说明

setInterval()间隔指定的毫秒数不停地执行指定的代码

第一个值:'调用的函数'第二个值:间隔的毫秒数)

设置毫秒数来执行重复打印,可以利用他的id唯一的方法,来设置清除的关键

clearInterval()用于停止setInterval()方法执行的函数代码利用id来清除

setTimeout()暂停指定的毫秒数后只执行一次执行指定的代码

第一个值:'调用的函数'第二个值:等待的毫秒数)

clearTimeout()用于停止执行setTimeout()方法的函数代码,在执行前点击,就会组织setTimeout()的出现

setInterval()与setTimeout特点及区别

特点

setInterval()和setTimeout()用来处理延时和定时任务

区别

setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式，而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式

练习1：结合日期对象，使用JavaScript计时事件制作   实时显示现在的年月日时分秒