1.BOM
1.概述
BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互,其核心对象是window
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性
2.BOM的构成
1.他是JS访问浏览器的一个接口
2.它是一个全局变量,定义在全局作用域的变量,函数都会变成window对象的属性和方法
在调用的时候可以省略window,alert(),prompt()等,都属于window对象方法
注意:window下有一个特殊属性window.name
2.window对象的常见事件
1.窗口加载事件
window.onload当文档内容完全加载完成会触发该事件(包括图像,脚本文件,css文件),就调用处理函数
注意:
1.有了window.onload就可以把js代码写在页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行函数,
2.window.onload传统的注册方式只能写一次,如果有多个,会以最后一个window.onload为准
2.调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){})
window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数
注意:
1.只有窗口大小发生像素变化,就会触发这个事件
2.我们经常用这个事件完成响应式布局,window.innerWidth当前屏幕宽度
3.定时器
1.setTimeout()也称为回调函数callback
用于设置一个定时器,该定时器在定时器到期后执行调用函数
window.setTimeout(调用函数,[延迟的毫秒数]);
停止setTimeout()定时器
window.clearTimeout(timeoutID) timeoutID指定时器的名字
注意:
(1)window可以省略
(2)延迟时间单位时毫秒,可以省略。省略默认为0
(3)这个调用函数可以直接写函数也可以写函数名还可以’函数名()’
(4)页面中可能有很多个定时器,可以给定时器加标识符
2.setInterval()
setInterval()方法重复调用一个函数,每隔这个时间。就去调用一次回调函数
window.setInterval(调用函数,[延迟的毫秒数]);
注意同上
4.JS执行队列
js是单线程,也就是说同一时间只能做一件事
1.同步和异步
他们的本质区别:这条流水线上各个流程的执行顺序不同
同步任务:
同步任务都在主线程上执行,形成一个执行栈
异步任务:
JS的异步是通过回调函数实现的
一般情况下,异步任务分以下三种类型
1.普通事件:如click,resize等
2.资源加载:如load,error等
3.定时器:如setInterval,setTimeout等
异步任务相关的回调函数添加到任务队列中(任务队列也称消息队列)
2.JS执行机制
1.先执行执行栈的同步任务
2.异步任务(回调函数)放入任务队列中
3.一旦执行栈中所有的同步任务执行完,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
由于主线程不断的重复获得任务,执行任务,在获取任务,在执行,所以这种机制被称为事件循环
5.location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为loaction对象
1.location对象的属性
location对象属性 | 返回值 |
---|---|
location.href | 获取或者设置整个URL |
location.host | 返回主机(域名) |
location.port | 返回端口号 如果没写返回空字符串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 #后面内容常用于链接 锚点 |
2.location对象的方法
location对象方法 | 返回值 |
---|---|
location.assign() | 和href一样,可以跳转页面(也称为重定向页面)可以后退 |
location.replace () | 替换当前页面,因为不记录历史,所以不能后退页面 |
location.reload() | 重新加载页面,相对于刷新按钮或者f5 如果参数为true强制刷新ctrl+f5 |
6.navigator对象
navigator对象包含有关浏览器的信息,它有很多属性,我们最常使用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
7.history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户访问过的URL。
history对象方法 | 作用 |
---|---|
back() | 可以后退功能 |
forward() | 前进功能 |
go(参数) | 前进后退功能 参数如果是1前进1个页面如果是-1后退一个页面 |