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后退一个页面 |