前言：BOM（浏览器对象模型），他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
目录
3.1 setTimeout() 也叫回调函数callback
1.BOM概述
1.1 对比DOM,BOM:
| DOM | BOM |
| 文档对象模型 | 浏览器对象模型 |
| DOM就是把[文档」当做一个「对象」来看待 | 把「浏览器」当做一个「对象」来看待 |
| DOM的顶级对象是document | BOM的顶级对象是window |
| DOM主要学习的是操作页面元素 | BOM学习的是浏览器窗口交互的一些对象 |
| DOM是W3C标准规范 | BOM是浏览器厂商在各自浏览器上定义的,兼容性较差 |
1.2 BOM的构成
BOM比DOM更大，它包含DOM
2. window常见事件
2.1 窗口加载事件
2.1.1 onload
window. .onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
注：
- 有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,
- window.onload传统注册事件方式只能写-次,如果有多个,会以最后-个window onload为准。
- 如果使用addEventListener则没有限制
2.1.2 DOMContentLoaded
- DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片, flash等等，加载速度比onload快一些
- le9以上才支持
- 如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded事件比较合适。
2.2 调整窗口大小事件
window.onresize = function() {}
window.addEventListener("resize", function() {});3 定时器
3.1 setTimeout() 也叫回调函数callback
window.setTimeout (调用函数，[延迟的亳秒数]);（window在调用时可以省略不写）
- setTimeout0方法用于设置一个定时器 ,该定时器在定时器到期后执行一次调用函数。
- 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名（）'三种形式。 第三种不推荐
- 延迟的毫秒数可省略，默认是0
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
3.2 停止 setTimeout() 定时器
window.clearTimeout(timeoutID);//timeoutID是定时器的标识符3.3 setInterval()
window.setInterval (回调函数，[间隔的亳秒数]);
- setInterval()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。
- 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名（）'三种形式。 第三种不推荐
- 延迟的毫秒数可省略，默认是0
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
3.4 停止setInterval() 定时器
window.clearInterval(timeoutID);//timeoutID是定时器的标识符3.5 案例：倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
color: lightgoldenrodyellow;
background-color: #000;
margin-right: 3px;
}
</style>
</head>
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
var hour = document.querySelector('.hour');
var min = document.querySelector('.minute');
var sec = document.querySelector('.second');
var inputTime = +new Date('2020-7-23 12:00:00'); //返回的是用户输入事件总的毫秒数
countDown();
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); //返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //剩余时间的秒数
var h = parseInt(times / 60 / 60 % 24); //hour
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60); //minutes
m = m < 10 ? '0' + m : m;
min.innerHTML = m;
var s = parseInt(times % 60); //second
s = s < 10 ? '0' + s : s;
sec.innerHTML = s;
}
</script>
</body>
</html>3.6 案例：发送验证码按钮
<body>
<input type="text" placeholder="请输入验证码">
<button>发送</button>
<script>
var btn = document.querySelector('button');
var timer = null;
var num = 10;
btn.addEventListener('click', function() {
btn.disabled = true;
timer = setInterval(function() {
if (num == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
num = 10;
} else {
btn.innerHTML = num + '秒后再次发送';
num--;
}
}, 1000);
});
</script>
</body>4. JavaScript 执行队列
4.1 JS 是单线程
同一时间只能做一件事
4.2 同步和异步
HTML5提出web worker新标准，允许JS创建多线程，出现了同步和异步。
4.2.1 同步任务
主线程上运行 ，形成一个执行栈
4.2.2 异步任务
JS的异步是通过回调函数实现的。
一般而言,异步任务有以下三种类型：
- 普通事件,如click. resize等
- 资源加载,如load. error等
- 定时器，包括setInterval. setTimeout等
异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。
4.3 JS 执行机制
- 先执行执行栈中的同步任务。
- 异步任务(回调函数)放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，这种机制被称为事件循环（event loop）。
5. location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL ,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
5.1 URL
统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一 的URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为:
protocol: //host [:port]/ path/ [?query] # fragment
如：http: //www. itcast. cn/ index. html ?name=andysage=18#link
| 组成 | 说明 |
|---|---|
| protocol | 通信协议 常用的ttp.tp,maito等 |
| host | 主机(域名) www.baidu.com |
| port | 端口号可选，省略时使用方案的默认端口如http的默认端口为80 |
| path | 路径 由零或多个/符号隔开的字符串,一般用来表示主机上的一个目录或文件地址 |
| query | 参数 以键值对的形式通过&符号分隔开来 |
| fragment | 片段 #后面内容常见于链接锚点 |
5.2 location 对象的属性
| location对象属性 | 返回值 |
|---|---|
| location.href | 获取或者设置整个URL |
| location. host | 返回主机(域名) www.baidu.com |
| location.port | 返回端口号如果未写返回空字符串 |
| location.pathname | 返回路径 |
| location.search | 返回参数 |
| location. hash | 返回片段#后面内容常见于链接锚点 |
5.3 location.search跨页面传参
1.html
<body>
<form action="2.html">
用户名：<input type="text" name="uname">
<input type="submit" value="登录">
</form>
</body>
2.html
<body>
<div></div>
<script>
// substr('起始位置'，截取几个字符) 第二个参数可省略
var params = location.search.substr(1);
var arr = params.split('=');
var div = document.querySelector('div');
div.innerHTML = arr[1] + '\t' + ' welcome';
</script>
</body>5.4 location对象的方法
| location对象方法 | 返回值 |
|---|---|
| location.assign() | 跟href一样，可以跳转页面(也称为重定向页面) |
| location.replace() | 替换当前页面，因为不记录历史，所以不能后退页面 |
| location.reload() | 重新加载页面，相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5 |
6. navigator 对象
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent ,该属性可以返回由客户机发送服务器的user- agent头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转：
if((navigator.userAgent.match (/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBe rry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|Webos|Symbian|Windows Phone)/i))) {
window. location.href一";//手机
} else {
window. location.href = ";//电脑
}7. history对象
window对象给我们提供了-个history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL.
| history对象方法 | 作用 |
|---|---|
| back() | 可以后退功能 |
| forward() | 前进功能 |
| go(参数) | 前进后退功能 参数如果是1前进1个页面如果是-1后退1个页面 |
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
