目录
一、什么是 BOM
BOM（Browser Object Model）即 浏览器对象模型，它提供了独立于内容而与 浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
1.BOM与DOM的区别
DOM BOM
文档对象模型 浏览器对象模型
DOM就是把[文档] 当作一个 [对象] 来看待 把[浏览器]当作一个[对象]来看待
DOM的顶级对象是 document BOM的顶级对象是 window
DOM主要学习的是操作页面元素 BOM学习的是浏览器窗口交互的一些对象
DOM是W3C标准规范 BOM兼容性较差
2.窗口加载事件
2.1. load
① window.onload = function(){ }
② window.addEventListener("load",function() { });
window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数.
注意：
1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数
2. window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准
3. 如果使用 addEventListener 则没有限制
2.2. DOMContentLoaded
document.addEventListener('DOMContentLoaded', function(){ }
DOMContentLoaded 是 DOM 加载完毕 不包含图片 flash css 等就可以执行，加载速度比 load 更快一些
如果页面的图片内容很多的话，从用户访问到 onload 触发可能需要较长的事件，交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded事件比较合适.
3.调整窗口大小事件
① window.onresize = function(){ }
② window.addEventListener("resize",function() { });
window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数
注意：
1.只要窗口大小发生像素变化，就会触发这个事件
2.我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度 ; wondow.innerHeight 当前屏幕的高度；
二、定时器
1. setTimeout()
window.setTimeout(调用函数，[延迟毫秒数])；
setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
function callback() {
console.log('爆炸了');
}
var timer1 = setTimeout(callback,300);
var timer2 = setTimeout(callback,500);普通函数是按照代码顺序直接调用,而这个函数需要等待时间，时间到了才会去调用这个函数，因此称为回调函数。
停止 setTimeout()定时器: window.clearTimeout(timeout ID)
2. setInterval()
window.setInterval(回调函数，[间隔的毫秒数]);
setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数，重复调用这个函数
停止 setInterval() 定时器：window.clearInterval(interval ID);
案例：发送短信倒计时 (点击发送后按钮变为不可点击且显示倒计时)
<body>
<div class="box">
<input type="text">
<button>发送</button>
</div>
<script>
var btn = document.querySelector('button');
var time = 5;
btn.addEventListener('click', function(){
this.disabled = true;
var timer = setInterval(function() {
if(time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 5;
} else {
btn.innerHTML = '还剩下'+ time +'秒';
time --;
}
}, 1000);
})
</script>
</body>三、JS同步和异步
JS语言的一大特点就是单线程(同一个时间只能做一件事)，为了解决这个问题，利用多核CPU的计算能力，HTML 5提出Web Worker标准，允许JS脚本创建多个线程。于是，JS中出现了 同步 和 异步
概念：
同步（单线程）： 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。会导致问题： 如果JS执行的时间过长就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉.
异步： 如果一件事要花很长时间，那么在做这件事的同时，还可以去处理其他事情他们的本质区别：这条流水线上各个流程的执行顺序不同
四、 offset、client、scroll三大家族介绍
1.offset
| offset系列属性 | 作用 |
|---|---|
| element.offsetParent | 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回 body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
| element.offsetWidth | 返回自身包括padding、边框、内容区的宽度，返回数值不带单位 |
| element.offsetHeight | 返回自身包括padding、边框、内容区的高度，返回数值不带单位 |
案例：拖动模态框（鼠标按下可以移动模态框的位置）
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.alert {
display: block;
width: 400px;
margin: 10px auto;
font-size: 20px;
text-align: center;
}
.bj {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0,0,0,0.2);
}
.for {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 450px;
height: 250px;
display: none;
background-color: white;
box-shadow:0 2px 30px rgba(255,255,255,0.3);
text-align: center;
}
.login {
text-align: center;
margin: 10px 0;
}
.close {
display: block;
position:absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 10px;
background-color: white;
text-align: center;
line-height: 30px;
}
input {
width: 300px;
height: 35px;
outline: none;
border: 1px solid #a8aca8;
font-size: 12px;
text-indent: 5px;
}
#uname {
margin: 0 10px;
}
#password {
margin-right: 15px;
margin-top: 20px;
}
span {
margin-left: -9px;
margin-right: 5px;
}
button {
width: 200px;
height: 35px;
border: 1px solid #a8aca8;
background-color: white;
font-size: 12px;
margin: 35px 0;
}
.login:hover {
cursor: move;
}
</style>
</head>
<body>
<a href="javascript:;" class="alert">点击，弹出登录框</a>
<div class="bj"></div>
<div class="for">
<div class="login">登录会员</div>
<a href="javascript:;" class="close">关闭</a>
用户名 :<input type="text" placeholder="请输入用户名" id="uname">
<br>
<span>登录密码 :</span> <input type="password" placeholder="请输入登录密码" id="password">
<br>
<button>登录会员</button>
</div>
<script>
var alert1 = document.querySelector('.alert');
var bj = document.querySelector('.bj');
var close1 = document.querySelector('.close');
var input = document.querySelectorAll('input');
var fom = document.querySelector('.for');
var login = document.querySelector('.login');
for(var i = 0; i < input.length; i++) {
input[i].onfocus = function(){
this.style.borderColor = 'skyblue';
}
input[i].onblur = function(){
this.style.borderColor = '#a8aca8';
}
}
alert1.addEventListener('click',function(){
bj.style.display = 'block';
fom.style.display = 'block';
})
close1.addEventListener('click',function(){
bj.style.display = 'none';
fom.style.display = 'none';
})
login.addEventListener('mousedown',function(e){
var x = e.pageX - fom.offsetLeft;
var y = e.pageY - fom.offsetTop;
document.addEventListener('mousemove', move1)
function move1(e){
fom.style.left = (e.pageX - x) + 'px';
fom.style.top = (e.pageY - y) + 'px';
}
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move1);
})
})
</script>
</body>
2.client
| client系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 |
| element.clientHeight | 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位 |
clientWidth、clientHeight 与 offsetWidth、offsetHeight 的区别是 前者返回的宽度高度不含边框，其余一样
3.scroll
| scroll系列属性 | 作用 |
|---|---|
| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |
| element.scrollHeight | 返回自身实际的高度，不含边框，返回数值不带单位 |
scroll 和 client 的区别，scroll 返回自身实际的高度时，文本就算超出了也会算入其中，但 client 不会，就是盒子的宽度，所以当文本超出盒子宽度的时候用 scroll 来获取高度和宽度
五、缓动动画的原理和封装
1. mouseenter 和 mouseleave
当鼠标移动到元素上时就会触发 mouseenter 事件
类似 mouseover， 它们两者之间的差别是
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
之所以这样，就是因为 mouseenter 不会冒泡
跟 mouseenter 搭配 鼠标离开 mouseleave 同样不会冒泡
2. 动画的原理以及封装
核心原理：通过定时器 setInterval()不断移动盒子位置
实现步骤：
1.获得盒子当前位置
2.让盒子在当前位置加上1个移动距离
3.利用定时器不断重复这个操作
4.加一个结束定时器的条件
5.注意此元素需要添加定位，才能使用 element.style.left
动画的封装（每15ms移动5px距离）：
var box = document.querySelector('.box');
function animation(obj,target) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if(obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + 5 + 'px';
}
},15);
}
animation(box,300);3. 缓动动画原理以及案例
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
2. 核心算法：（目标值 - 现在的位置）/ 10 做为每次移动的距离 步长
3. 停止的条件是：让当前盒子位置等于目标位置就停止定时器
案例：缓动动画前进后退
<style>
.box {
position:absolute;
top: 100px;
left: 0;
width: 150px;
height: 150px;
background:linear-gradient(yellow,red);
}
</style>
</head>
<body>
<button>前进到500米</button>
<button>前进到800米</button>
<div class="box">
</div>
<script>
var btn = document.querySelectorAll('button');
var box = document.querySelector('.box');
function animation(object,target,callback) {
clearInterval(object.timer);
object.timer = setInterval(function(){
var step = (target - object.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(object.offsetLeft == target) {
clearInterval(object.timer);
if(callback) {
callback();
}
}
object.style.left = object.offsetLeft + step + 'px';
},15);
}
var flag = 1;
btn[0].addEventListener('click',function(){
animation(box,500);
})
btn[1].addEventListener('click',function(){
animation(box,800,function(){
alert('你好呀！');
});
btn[0].innerHTML = '后退到500米';
})
</script>
</body>本次的分享到此就结束啦~对你有帮助的话记得点个👍哟、
扫一扫
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
