Javascript的知识总结(13)
BOM浏览器对象模型
思维导图
什么是BOM
- 顶级对象是
window
- window.name 是特殊的属性
窗口加载事件
窗口加载事件
window.onload = function(){}
等页面加载完毕,具有唯一性,层叠性,使用addEventListener则没有限制document.addEvenListener('DOMContentLoaded',function(){})
区别:load事件是页面内容全部加载完毕,包括dom元素,图片,css等,DOMContentLoaded是DOM加载完毕就执行,不包括其他的图片等等
window.onresize()
只要窗口发生变化,像素点发生变化,就执行,响应式布局window.innerWidth
可以检测屏幕的宽度`window.setTimeout(调用函数,延时时间),window调用可以省略,只调用一次
查看实例
1 | setTimeout(function(){ |
- 回调函数callback window.SetTimeout()
- 清除定时器 clearSetTimeout(定时器的名称)
- 定时器
window.setInterval()
反复调用函数 - 清除重复的定时器
widow.clearInterval
清除效果
1 | <span>1</span> |
案例网站运行时间
1 | <style> |
演示图例
短信倒计时案例
1 | <input type="number" name="" id=""><button>发送</button> |
this指向
- 方法调用中谁调用this指向谁
- 全局作用下的this指向window
同步和异步
- 执行的顺序不同
- 同步任务都在主线程上
- 异步任务 是通过回调函数实现的
- 事件循环 event loop
loaction对象
https://www.xxxx.cn/index.html?name=andy&age=18#link
- query 是以键值对的形式通过&符号分隔开
- location.href 获取url
- location.search 返回参数
- location.hash 返回片段 #
- location.pathname 返回路径
- location.port 返回端口号
- location.host 返回主机域名
- location.assign()和href一样,能记录浏览历史
- location.replace(),无法记录浏览历史
- location.reload() 如果+ true 页面可强制刷新
- 使用location对象将一个页面的数据传送到另一个页面
查看实例
1 | var div = document.querySelector('div'); |
navidator对象
查看答案
1 | if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { |
history对象
- history.back 后退
- history.forword 前进
- history.go(1/-1) 实现页面的前进后退
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论