BOM
BOM（Browser Object Model），浏览器对象模型。它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM比DOM更大
window对象
window对象是浏览器的顶级对象，它具有双重角色：
- 它是JS访问浏览器窗口的一个接口
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
原来，JS需要写在元素后面，因为代码是从上而下执行的
现在，有了window可以将JS写在元素前面
使用：window.onload = function(){}，其实窗口（页面）加载事件，当文档内容完全加载完成会触发该事件，调用的处理函数
<body>
<script type="text/javascript">
window.onload = function(){
var btn = document.querySelector('button');
btn.onclick = function(){
alert("弹窗");
}
}
</script>
<button type="button">按钮</button>
</body>
此时，script标签可以写在任意地方，即使是head标签也可以
注意：window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个为准
而使用window.addEventListener则没有限制个数
<body>
<script type="text/javascript">
window.addEventListener('load', function(){
var btn = document.querySelector('button');
btn.onclick = function(){
alert("弹窗1");
}
})
window.addEventListener('load', function(){
alert("弹窗2");
})
</script>
<button type="button">按钮</button>
</body>
则可以写多个
document.addEventListener('DOMContentLoaded', function(){
alert(33);
})
该方法在DOM元素加载完就可以执行
而window.load必须等页面所有内容（包括DOM元素、图片、css等）加载完毕才执行，没有上面这个方法快
调整窗口大小事件
当窗口大小发生变化时，就会调用：
window.onresize = function(){};
window.addEventListener("resize", function(){});
定时器
window对象提供了两个定时器：
- setTimeout()
- setInterval()
setTimeout()定时器
window.setTimeout(调用函数, [延迟的毫秒数]);
setTimeout(function(){})window可省略；延迟时间也可以省略，省略代表0，立即执行
setInterval()定时器
window.setInterval(调用函数, [延迟的毫秒数]);//每隔一段时间，就去调用一次
setInterval(function(){})window可省略
setTimeout()停止定时器
window.clearTimeout(timeout ID)window可省略，timeout ID就是前面的定时器，赋值给一个变量得来的
window.clearInterval(timeout ID)window可省略，timeout ID就是前面的定时器，赋值给一个变量得来的
JS队列
JS是单线程，同一个时间只能做一件事
同步任务：都在主线程上执行
异步任务：JS的异步是通过回调函数实现的
一般而言，异步任务有以下三种：
- 普通事件，如click、resize等
- 资源加载，如load、error等
- 定时器
异步任务相关 回调函数 添加到 任务队列中（任务队列也称为消息队列）
JS执行机制
- 先执行 执行栈 中的同步任务
- 遇到异步任务放入任务队列中
- 执行栈中的所有同步任务执行完毕，系统按次序读取任务队列中的异步任务，然后执行
location对象
window对象提供了location属性，用于获取或设置 窗体的URL，并且可以用于解析URL。
因为这个属性返回的是一个对象，因此也被称为location对象
navigator 对象
navigator对象包含有关浏览器的信息，最常用的是userAgent，该属性可以返回由客户机发生服务器的user-agent头部的值
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
history对象
history.back()后退
history.forward()前进
history.go(参数)n前进n个界面，-n后退n个界面
PC端网页特效
元素偏移量offset系列
offset概述
offset其实就是偏移量，使用offset系列相关属性可以 动态的 得到该元素的位置（偏移）、大小等
可以获取：
- 元素距离带有定位父元素的位置
- 元素自身的大小（宽高）
注意：返回的数值都不带单位
offset获取元素大小位置
style更改元素大小位置
例子：获取鼠标点击时，在div里面的坐标
获取鼠标在页面中的坐标(e.pageX, e.pageY)
获取盒子在页面中的坐标(e.offsetLeft, e.offsetRight)
例子：鼠标拖拽元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="en">
<title></title>
<style type="text/css">
.box{
position: absolute;
background-color: pink;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
var box = document.querySelector('.box');
//在鼠标按下的时候，获取鼠标的x,y
document.addEventListener('mousedown', function(e){
var mouseX = e.pageX - box.offsetLeft;
var mouseY = e.pageY - box.offsetTop;
var move = function(e){
box.style.left = e.pageX - mouseX + 'px'
box.style.top = e.pageY - mouseY + 'px'
}
//移动，和移除，都是在点击的情况下执行的
//在鼠标移动的时候，box也移动
document.addEventListener('mousemove', move);
//在鼠标放开的时候，移除
//首先，监听鼠标不点击
document.addEventListener('mouseup', function(){
//在不点击的时候，移除move监听
document.removeEventListener('mousemove', move);
})
});
</script>
</body>
</html>
元素偏移量client系列
通过client系列的相关属性，动态的得到该元素的 边框大小、元素大小
立即执行函数：
(function() {})()
或
(function(){}());
带参数：
(function(a, b){
console.log(a + b);
})(1, 2)
元素偏移量scroll系列
利用该相关属性，可以动态的得到该元素的大小、滚动距离等
mouseover鼠标经过自身、子盒子都会触发
mouseenter鼠标经过自身会触发，经过子盒子不会触发，其不会冒泡。离开的时候，搭配mouseleave，也不会冒泡
动画函数封装
动画实现原理
核心原理：通过定时器setInterval()不断移动盒子位置
扫一扫
4036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
