javascript的Bom
一、Bom的概念
概念:浏览器模型,提供了与浏览器窗口交互的对象,核心对象是window
二、window对象的常见事件
1、页面加载事件
当文档内容加载完执行该事件
window.onload = function(){
}2.调整窗口大小事件
window.onresize =function(){
}三、定时器
window可以省略,毫秒数默认为0
1.setTimeout
延时器:延迟多少时间执行
var timer1 = setTimeout(function test() {
alert("执行");
}, 3000);2.setInterval
间隔多少时间去执行
var timer2 = setInterval(function test1() {
console.log("执行");
}, 1000);
3.回调函数
概念:callback,回调函数其实是一个参数,将这个函数作为参数传到别的函数里面,回调函数是会最后执行的
function A(callback){
callback()
}4.清除定时器
clearTimeout(定时器名字)
clearInterval(定时器名字)
5.同步和异步
同步:前一个任务做完,再执行下一个任务,程序执行顺序与任务队列是一致的,是同步的
异步:执行一个任务的时候,还可以同时处理其他任务
同步任务都在主线程上,形成一个执行栈
异步任务:js的异步任务是通过回调函数实现,然后放到任务队列
异步任务:
先执行执行栈的同步任务
异步任务放到任务队列中
执行栈的所有同步任务执行完毕的时候,才回去按照顺序读取任务队列
四、location对象
概念:解析URL
url:
proticol://host:post/path/path?query#fragment
proticol:通信协议,http,https
host:主机域名
post:端口号
path:路径,文件在服务器上的地址,路径都是由/
query:参数,以键值对的形式提交
fragment:锚点#
1.获取URL参数
location.href:整个url
location.host:获取主机
location.post:获取端口号
location.path:获取路径
location.search:获取参数
location.hash:获取片段(锚点)
2.location的方法
location.assign(href):跳转页面
location.replace():代替页面,没有历史记录
location.reload():重新加载页面相当于f5
五、navigator对象
概念:navigator对象包含有关浏览器的信息,有很多属性,我们常用的是userAgent,该属性可以返回由客户端发送服务器的user-agent(用户代理)头部值
六、history对象
与浏览器历史进行交互,修改对象包含用户(在浏览器窗口)访问过的
1.forward()
前进
history.forward()2.back()
后退
history.back()3.go()
前进和后退的功能
前进1
go(1)
后退
go(-1)
七、 本地存储
数据存储在浏览器中
设置,读取方便,甚至页面刷新都不会消失
容器较大
sessionStorage5M
localStorage20M
值存储字符串,可以编码json.stringify编码字符串
sessionStorage.setItem("index",0)
console.log(sessionStorage.getItem("index"));
localStorage.setItem("name","张三")
console.log(localStorage.getItem('name'));1.window.sessionStorage
生命周期:关闭浏览器
在同一个页面,数据共享,以键值对的形式存储
2.window.localStorage
生命周期:永久有效,除非手动删除,关闭也会存在
可以多个窗口共享,以键值对的形式存
删除 removeItem
八、this
解析器在每次调用函数的时候,都会向函数内部传递一个隐含参数
参数就是this,this是指向一个对象
这个对象我们称为函数执行上下文对象
函数调用方式不同,this的指向就不同
函数形式调用的时候,this指向就是window
方法形式调用的时候,this指向调用方法的那个对象
构造函数的形式调用,this指向新创建的对象