Javascript高级技术 BOM操作

Javascript高级技术

window的常见事件

事件	详情
window.onload = function(){} 或者window.addEventListener(“load”,function(){})	页面加载完成后执行里边的方法
document.addEventListener(“DOMContentLoaded”,function(){})	DOM元素加载完成就可以了（不包含图片等）
window.onresize = function(){} window.addEventListener(“resize”,function(){})	浏览器窗口大小变化
window.innerWidth	浏览器窗口的宽度
window.setTimeout(function(){},延迟的时间)	定时器，隔多少秒执行
window.clearTimeout(定时器的标识符)	关闭Timeout定时器
window.setInterval(function(){},间隔的时间)	间隔多少时间调用
window.clearInterval(定时器的标识符)	关闭Interval定时器

在调用时，window可以省略，延时时间是毫秒，匿名函数也可以写成函数名（不用加括号）

//设置定时器
var timer = window.setTimeout(function(){
    alert("定时器执行")
},3000)

//关闭定时器
window.clearTimeout(timer)

JS的执行机制

同步任务在主线程里边执行，异步任务放置在任务队列里边

先执行同步任务，再执行异步任务

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qhPOJJgY-1590298101389)(C:\Users\小胡同学\AppData\Roaming\Typora\typora-user-images\image-20200524104817144.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hGHx8ktj-1590298101393)(C:\Users\小胡同学\AppData\Roaming\Typora\typora-user-images\image-20200524110022308.png)]

Window的location对象

location对象的属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）
location.port	返回端口号，如果没有写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后边的内容 常见于链接、锚点
location对象的方法	返回值
location.assign()	跟href一样，可以实现页面的跳转，记录历史，可以后退
location.replace()	替换當前页面，因为不记录历史，所以不能后退
location.reload()	重新加载页面

navigator对象

我们可以通过navigator获取当前是PC端页面还是移动端页面

history对象

history对象方法	作用
history.back()	可以后退功能
history.forward()	前进功能
go(参数)	前进后退功能，参数是1前进一个页面。参数是-1后退一个页面