前言
- JS是前端三件套之一，也是核心，本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点，这篇是BOM;
- 这篇文章是本人大一学习前端的笔记；
- 欢迎点赞 + 收藏 + 关注，本人将会持续更新。
文章目录
- BOM
- 1、BOM概述
- 2、window对象的常见事件
- 2.1、窗口加载事件
- 2.1.1、区别
- 2.2、调整窗口大小事件
- 3、定时器
- 3.1、setTimeout()定时器
- 3.2、clearTimeout()停止定时器
- 3.3、setInterval() 定时器
- 3.4、clearInterval()停止定时器
- 3.5、this指向
- 发送信息案例
- 4、JS执行机制
- 4.1、JS是单线程
- 4.2、一个问题
- 4.3、同步与异步
- 5、location对象
- 5.1、url
- 5.2、location对象属性
- 5.3、location对象方法
- 6、navigation对象
- 7、history对象
BOM
1、BOM概述
- BOM ：是浏览器对象模型
- 对象核心是window
| DOM | BOM |
|---|---|
| 文档对象模型 | 浏览器对象模型 |
| DOM就是把文档当中一个对象 | 把浏览器当作一个对象 |
| DOM的顶级对象是document | BOM的顶级对象是 window |
| DOM主要学习的是操作页面的元素 | BOM学习的是浏览器交互的一些对象 |
| 兼容性好 | 兼容性较差 |
- BOM包含DOM
- window对象是浏览器的顶级对象，它具有双重角色
2、window对象的常见事件
2.1、窗口加载事件
window.onload 是窗口页面加载事件，把文档内容完全加载完全会出阿飞该事件（包括图像，脚本文件，css文件等），就调用函数
//1.
window.onload = function() {};//2.
window.addEventListener("load",function() {});
- 有了window.onload 就可以把js代码写到元素的上方
- 如果由多个window.onload，就以第一个为准
- 如果使用addEventListener则没有限制
document.addEventListener('DOMContentLoaded',function() {});
- DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等
- 如果页面图片多的话，访问到onload触发可能较长时间
2.1.1、区别
- load等页面内容全部加载完毕后，包括页面dom元素，图片，flash，css等
- DOMContentLoaded是DOM加载图片，不包括页面dom元素，图片，flash，css等，加载速度比load快一点
window.addEventListener('load',function() {alert(22);
})
document.addEventListener('DOMContentLoaded',function() {alert(33);
})
2.2、调整窗口大小事件
window.onresize是调整窗口大小加载事件，当触发时就调用的函数
window.onresize = function() {}
window.addEventListener('resize',function() {})
- 只要窗口大小发送像素变化，就会触发这个事件
- 经常用这个事件完成响应布局。window.innerWidth 当前屏幕的速度
<body><script>window.addEventListener('load',function() {var div = document.querySelector('div');window.addEventListener('resize',function() {if(window.innerWidth <= 800){div.style.display = 'none';} else {div.style.display = 'block';}})})</script><div>box</div>
</body>
3、定时器
window 对象提供了两个定时器
- setTimeout( )
- setInterval( )
3.1、setTimeout()定时器
**setTimeout()**方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
window.setTimeout(调用函数,延迟毫秒数)
注意：
- window可以省略
- 调用这个函数
- 可以直接写函数名
- 延迟的毫秒数省略默认的是0，如果写，必须是毫秒
- 因为定时器很多，说以经常给定时器赋值一个标识符
setTimeout()这个调用函数也称为回调函数callback
function callback() {console.log('爆炸了');
}
var time1 = setTimeout(callback,3000);
var time2 = steTimeout(callback,5000);
3.2、clearTimeout()停止定时器
clearTimeout方法取消了先前通过调用setTimeout()建立的定时器
window.clearTimeout(timeoutID)
//timeoutID 是定时器的标识符
注意：
window可以省略
3.3、setInterval() 定时器
setInterval方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
window.setaInterval(回调函数,间隔的毫秒数);
- window 可以省略
- 注意：
第一次执行也是间隔毫秒数之后
3.4、clearInterval()停止定时器
claerInterval( )方法取消了先前通过调用setInterval()建立的定时器
注意：
window可以省略- 里面参数就是标识符
3.5、this指向
this的指向在函数定义的时候确定不了的，只有函数执行的时候才能确定this指向谁- 全局变量或者普通函数中
this指向全局对象window
发送信息案例
<body><input type = 'number'> <button>发送</button><script>var btn = document.querySetector('button');var time = 60;btn.addEventListener('click',function() {this.disabled = 'true';var timer = setInterval(function() {if(time == 0) {clearInterval(timer);this.disabled = 'flase';this.innerHTML = '发送';} else {this.innerHTML = '还剩下' + time + '秒';time--;}},1000);})</script>
</body>
4、JS执行机制
4.1、JS是单线程
- 简单理解，
同一时间只能做一件事情。
4.2、一个问题
//1.
console.log(1);
setTimeout(function(){console.log(3);
} ,1000);
console.log(2);//2.
console.log(1);
setTimeout(function() {console.log(3);
},0);
console.log(2);
结果：1 2 3
4.3、同步与异步
同步：- 前一个任务结束在执行下一个
异步：- 在做这件事的同时，你还可以去处理其他事情
- JS中的异步是通过回调函数实现的
- 异步任务类型：
- 普通事件，如：
click,resize等 - 资源加载，如：
load,error等 - 定时器，包括
setTnterval,setTimeout等
- 普通事件，如：
5、location对象
- window提供了
location属性**用于获取或者设置窗体的url，并且解析url。
5.1、url
统一资源定位符
url语法一般为：
protocol://host[:port]/path/[?query]#fragmenthttp://www.itcast.cn/index.html?name=andy&age=18#link
| 组成 | 说明 |
|---|---|
| protocol | 通信协议，常用的http,ftp,maito等 |
| host | 主机（域名）www.itheima.com |
| port | 端口号，可选 |
| path | 路径由零或者多个’/'符号隔开的字符串 |
| query | 参数以键值的形式，通过&符号分开 |
| fragment | 片段#后面内容，常用于描点链接 |
5.2、location对象属性
| location对象属性 | 返回值 |
|---|---|
| location.href | 获取或者设置整个url |
| location.host | 返回主机（域名）www.baidu.com |
| location.port | 返回端口号，如果未写就返回空字符串 |
| location.pathname | 返回路径 |
| location.search | 返回参数 |
| loacation.hash | 返回片段，#后面内容常见于链接 |
重点记住：href和search
5.3、location对象方法
| location对象方法 | 返回值 |
|---|---|
| location.assign() | 和href一样，可以跳转页面（也称为页面重启向页） |
| location.replace() | 替换当前页面 |
| location.reload() | 重新加载页面 |
6、navigation对象
- navigator对象包含有关浏览器，他有很多属性
- 我们常用的是userAgent
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))) {window.location.href = ""; //手机} else {window.location.href = ""; //电脑}7、history对象
- window对象提供了一个history对象，与浏览器历史记录进行交互
| history对象方法 | 作用 |
|---|---|
| back() | 可以后退功能 |
| forward() | 前进功能 |
| go(参数) | 前进后退功能，参数如果是1 前进1 ， |
<body><a href = "list.hrml">列表</a><button>前进</button><script>var btn = document.querySelector('button');btn.addEventListener('click',function() {history.go(1);})</script>
</body>
