那年杏花微雨，你说你是BOM

皇上，敬事房的人来了，该翻牌子了

一、==什么是BOM==
- 1.1 ==BOM概述==
- 1.2 ==DOM与BOM的区别==
二、==window对象的常用事件==
- 2.1 ==窗口加载事件==
- 2.2 ==调整窗口大小事件==
- 2.3 ==定时器==
- - 2.3.1 ==设置定时器==
  - 2.3.2 ==回调函数==
  - 2.3.3 ==停止定时器==
三、==JS执行队列==
- 3.1 ==单线程==
- 3.2 ==同步和异步==
- 3.3 ==JS执行机制==
四、==location对象==
- 4.1 ==URL==
- 4.2 ==location参数的属性==
- 4.3 ==location对象的常见方法==
五、==navigator对象==
六、 ==history对象==
七、==PC端网页特效==
- 7.1 ==元素偏移量offset系列==
- 7.2 ==元素可视区client系列==
- 7.3 ==元素滚动scroll系列==
总结（一定要看哦！！！）

一、什么是BOM

1.1 BOM概述

BOM browser object model
即浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了许多方法和属性。但其缺乏标准，Javascript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。（就比如说你用不同的浏览器显示alert弹窗，显示效果不完全相同，这就是因为每个浏览器有他自己的BOM标准）

BOM比DOM更大，它包含DOM

1.2 DOM与BOM的区别

DOM

文档对象模型
DOM就是把文档当作一个对象来看待
DOM的顶级对象是document
DOM主要学习的是操作页面元素
DOM是W3C标准规范

BOM

浏览器对象模型
把浏览器当作是一个对象来看待
BOM的顶级对象是window
BOM学习的是浏览器窗口交互的一些对象
BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。

二、window对象的常用事件

window对象是浏览器的顶级对象，它具有双重角色

它是JS访问浏览器窗口的一个接口
它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法

在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。

2.1 窗口加载事件

window.onload = function() {}
window.addEventListener("load",function() {})
document.addEventListener('DOMContentLoaded',function() {})
window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等等。如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。

注意

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
如果使用addEventListener则没有限制，可以叠加很多个

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.addEventListener('load',function(){var btn = document.querySelector('button');btn.addEventListener('click',function(){alert('hh');})alert('11');})window.addEventListener('load',function(){alert('22');})document.addEventListener('DOMContentLoaded',function(){alert('33');})</script>
</head>
<body><button>hhh</button>
</body>
</html>

最先显示33，而后是11，然后是22，之后才显示按钮以触发点击事件。

2.2 调整窗口大小事件

window.onresize = function() {}
window.addEventListener("resize",function() {})
window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

注意

只要窗口大小发生像素变化，就会触发这个事件
我们经常利用这个事件完成响应式布局，window.innerWidth为当前屏幕的宽度

2.3 定时器

2.3.1 设置定时器

方法一setTimeout()
window.setTimeout(调用函数，[延迟的毫秒数])（这个window可以省略，延迟时间可以省略，省略后默认是0）
setTimeout()方法用于设置一个定时器，该定时器在定时到期后执行调用函数

<script>//第一种写法setTimeout(function(){console.log('时间到了');},2000);//第二种写法function callback(){console.log('时间到了');}setTimeout(callback,2000);
</script>

方法二setInterval()
window.setInterval(回调函数,[间隔的毫秒数])
setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
定时器可能有很多，所以我们经常给定时器赋值一个标识符

2.3.2 回调函数

setTimeout() 这个调用函数我们也称之为回调函数callback
普通函数是按照代码顺序直接调用，而这个函数需要等待一定时间，时间到了才去调用这个函数，因此称为回调函数。以前我们学的点击事件也是回调函数。

2.3.3 停止定时器

window.clearTimeout(timeoutID)
该方法可以取消先前通过调用setTimeout()建立的定时器

<body><button>点击停止计时器</button><script>var btn = document.querySelector('button');var timer = setTimeout(function(){console.log('时间到了');},2000);btn.addEventListener('click',function(){clearTimeout(timer);})
</script>
</body>

window可以省略，括号内的参数就是定时器的标识符
window.clearInterval(intervalID)
该方法可以取消先前通过调用setInterval()建立的定时器

<body><button class="begin">点击开始定时器</button><button class="stop">点击结束定时器</button><script>var begin = document.querySelector('.begin');var stop = document.querySelector('.stop');var timer = null;begin.addEventListener('click',function(){timer = setInterval(function(){console.log('哈哈哈');},1000);})stop.addEventListener('click',function(){clearInterval(timer);})
</script>
</body>

三、JS执行队列

3.1 单线程

Javascript语言的一大特点就是单线程，也就是说同一时间只能做一件事，这是因为Javascript专门脚本语言诞生的使命所致——Javascript视为处理页面中用户的交互，以及操作DOM而生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加之后再删除。单线程就意味着所有任务需要排队，前一个任务结束才会执行后一个任务。这样所导致的问题就是，如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

3.2 同步和异步

为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许Javascript脚本创建多个线程，于是Javascript中出现了同步和异步
同步
前一个任务结束后再执行。后一个任务程序的执行顺序与任务的排列顺序是一致的，同步的。比如做饭，我们要烧水煮饭，等水开了之后再去切菜炒菜。
异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭，我们在烧水的同时利用间隔时间去切菜炒菜。

3.3 JS执行机制

先执行执行栈中的同步任务
异步任务放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序依次读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行线，开始执行。

四、location对象

Window对象给我们提供了一个location属性，用于获取或设置窗体的url，并且可以用于解析url，因为这个属性返回的是一个对象，所以我们也将这个属性称为location对象。

4.1 URL

4.2 location参数的属性

<body><button>点击</button><script>var btn = document.querySelector('button');btn.addEventListener('click',function(){console.log(location.href);})</script>
</body

4.3 location对象的常见方法

五、navigator对象

Navigator对象包含有关浏览器的信息，他有很多属性，我们最常用的是userAgent。该属性可以返回由客户机发送服务器的user -agent头部的值。
可以判断用户是使用哪个终端打开页面，实现跳转。

<script>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 = "";//电脑}
</script>

六、 history对象

Window对象给我们提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过的url

<body><a href="#">点我去往列表页</a><button>前进</button><script>var btn = document.querySelector('button');btn.addEventListener('click',function(){history.forward();})</script>
</body>

七、PC端网页特效

7.1 元素偏移量offset系列

offset即元素偏移量，我们使用offset系列相关属性可以动态地得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小、宽高
注意返回的数值都不带单位

offset系列常见属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box{margin-top: 100px;margin-left: 100px;width: 200px;height: 200px;background-color: purple;}</style>
</head>
<body><div class="box"></div><script>var box = document.querySelector('.box');console.log(box.offsetTop);console.log(box.offsetLeft);</script>
</body>
</html>

注意宽高是包含padding、padding、width的

7.2 元素可视区client系列

client即客户端，我们使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态地得到该元素的边框大小、元素大小等

与offset区别
client不包含border边框

7.3 元素滚动scroll系列

scroll即滚动，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等

scrollHeight是实际内容的大小
clientHeight是盒子的大小

总结（一定要看哦！！！）

这就是我们最后一次写博客了，不知不觉讨论班也要接近尾声了。感谢同在蓝旭并肩作战坚持到最后的我们，也要感谢每一位耐心为我们解答问题的学长学姐。

一段文字送给大家

我也曾赴过琼林宴，我也曾打马御街前。惟愿此去经年，于万物众生中磊落做人，身怀赤诚，告诉世界何谓勇敢。人世间山水迢迢，路遥马急，借此，祝所有相遇:天高海阔，万事胜意，山水有来路，早晚复相逢。

那年杏花微雨，你说你是BOM相关推荐

那年杏花微雨，你说你是DOM
那年杏花微雨,你说你是DOM 皇上今天想翻谁的牌子? 一.==什么是DOM== 1.1 ==何为DOM== 1.2 ==何为Web API== 1.3 ==为什么要学习DOM== 二.==走进DOM= ...
灵飞经4·西城八部第十九章片山微雨（三）
"放肆! "少女厉声喝道,"朱微两个字也是你叫的么?" 乐之扬没好气道:"不叫朱微叫什么? " "当然是叫殿下.叫公主." ...
灵飞经4·西城八部第十九章片山微雨（二）
老太监当先引路,左一拐,右一折,白影萧索,恍若鬼魅,走了数百步,到了一处回廊.冷玄左右看看,但见无人,陡然脚步一顿,向后掠出.乐之扬眼前一花,便觉疾风袭来.他欲要躲闪,却快不过冷玄鬼魅幻形似的身手,只 ...
多重比较和多重比较陷阱
方差分析中的多重比较 1.当拒绝原假设时,表明μi(i=1,2,-,k)之间的差异是显著的,但μ1与μ2.μ1与μ3.-.μ1与μk.-.μk-1与μk之间究竟是哪两个均值不同呢? 这就需要做进一步的 ...
c语言从入门到脱发,知乎|脱发是一种怎样的体验？
原标题:知乎|脱发是一种怎样的体验? 听说脱发已经成为比脱单更困扰当代大学生的问题,心系学子的小编们立刻打开手机开始天罗地网式搜寻,终于找到了拯救脱发的秘籍! 今日财大知乎,带你走进脱发的世界... ...
不要让等待成为一种伤害
情感语录:不要让爱成为一种遗憾 1.男人是否变心和女人是否美丽,之间没有必然联系.当男人厌倦了女人,任何一个新的女人都会比她更有吸引力.所以,女人保持美丽提升智慧并不单纯是为了留住老公,而是,即便某天 ...
熹贵妃竟是这种隐藏属性，从MBTI来看甄嬛“三姐妹”的爱恨情仇?
就在不久前的5月17日,农历四月十七,是熹贵妃的农历生日,这一天为了给嬛嬛庆生,朋友圈微博等各大平台,可热闹了起来,这盛况堪比那年果郡王为嬛嬛庆生- 如今,距<甄嬛传>首播已经有11年之久 ...
梦幻西游手游服务器维护时段,梦幻西游手游2018合区时间服务器汇总详解
梦幻西游手游什么时候合区,合区服务器有哪些呢?下面就给大家分享一下今年的所有服务器合区的内容汇总,有兴趣的朋友们一起来看看吧. 梦幻西游手游2018年什么时候合区? 最新合区:暂未开始 2018年3月 ...
中奖名单模板_春分纪中奖名单出炉~才艺主公用“树叶阵法”致敬率土！
在上周发起的 "率土春分纪"活动里小率每天都能在后台中收获主公们的"春天故事" 今天小率将优质投稿整理出来分享给各位主公 1 春分诗词春·赋雨水以将兮 ...

那年杏花微雨，你说你是BOM