1.BOM
BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
window对象是浏览器的顶级对象，它具有双重角色
1.它是js访问浏览器窗口的一个接口
2.它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。
1.1页面加载事件
window.onload=function（）{} 是页面所有元素都加载完毕后，再调用此函数
传统方式只能写一个，如果多个以最后一个为准执行
window.addEventListern('load',function(){})，没有限制
IE9以上支持：document.addEventListern('DOMContentLoaded',function(){})
load等页面内容全部加载完毕，包含页面dom元素 图片 flash css等
DOMContentLoaded是DOM加载完毕，不包含图片faslh css 图片等，所以比load快一点
1.2调整窗口大小事件
window.onresize=function(){}
window.addEventListern('resize',function(){})
注意：只要窗口大小发生像素变化，就会触发这个事件
我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
<div></div>
<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>
1.3定时器之setTimeout()
window对象给我们提供了2个非常好用的方法 定时器
setTimeout（）
setInterval（）
window.setTimeout（调用函数，[延迟的毫秒数]）；
//这个window可以省略
//这个延时时间单位是毫秒，但是可以省略，如果省略则是立 即执行调用函数
//这个调用函数可以直接写函数，还可以写函数名
//还有一个写法 'callback()',3000 不提倡此写法
//页面中可能有很多的定时器，我们经常给定时器加标识符（名字）；
<script>
function callkback() {
console.log('爆炸了')
}
setTimeout(callkback, 3000);
</script>
1.4回调函数
以前写的事件也都是回调函数，定时器也是
<img src="images/ad.jpg" alt="">
<script>
var ad = document.querySelector('img');
setTimeout(function() {
ad.style.display = 'none';
}, 5000)
</script>
1.5清除定时器
window.clearTimeout(timeout ID);
<button>点击停止</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log('爆炸了')
}, 5000)
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>
1.6 setInterval
setInterval(回调函数，[延时时间])；
<script>
setInterval(function() {
console.log('继续输出');
}, 1000)
//2.setTimeout 延时时间到了，就去调用这个回调函数，只调用一次，就结束
//3.setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用
</script>
定时器：
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2022-4-28 18:00:00');
//先调用一次函数，防止有空白
countDown();
//开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date();
var times = (inputTime - nowTime) / 1000;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
1.7发送短信案例之清除计时器
手机号码：<input type="number" name="" id=""> <button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 10; //定义剩下的秒数
btn.addEventListener('click', function() {
btn.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 10; //这个3需要重新开始
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000)
})
</script>
1.8this指向问题
1.全局作用域或者普通函数，定时器一般情况下this指向调用它的对象window
2.方法调用中谁调用this指向谁
3.构造函数中this指向实例对象
1.9.js的执行队列
同步和异步
js是单线程，同一个事件只能做一件事
同步:前一个任务结束后再执行后一个任务
异步：多任务同时，多线程
本质区别：这条流水线上各个流程的执行顺序不同
同步任务都在主线程上执行，形成一个技术栈
异步任务：一般而言：异步任务有以下三种类型
1.普通事件，如 click resize等
2.资源加载，如load error等
3.定时器
异步任务相关回调函数添加到任务队列中（任务队列也称消息队列）
js执行机制：1.先执行执行栈中的同步任务，2.异步任务（回调函数）放到任务队列里 3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
由于主线程不断的重复获得任务，执行任务，再获取任务，再执行，所以这种机制被称为事件循环（event loop）
2.0 location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象
属性：1.location.href 获取或者设置整个URL
location.host ：返回主机域名
2.location.serach:返回参数
location.hash:返回片段，常见于链接 锚点
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
//记录浏览历史，所以可以实现后退功能
// location.assign('http://www.baidu.com');
//不记录浏览历史，所以不能实现后退功能
// location.replace('http://www.baidu.com');
// 重新刷新，参数为空则相当于刷新，如果参数为true则强制刷新
location.reload()
})
</script>
2.1navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回浏览器和主机信息
2.2history对象
history.forward() 前进
history.back() 后退
history.go（） 参数为1则前进一步；
3. PC端网页特效
3.1元素偏移量offest系列
offset翻译过来就是偏移量，我们使用offest系列相关属性可以动态的得到改元素的位置 大小等
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有父元素左边框的位移
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
//可以得到元素的偏移，位置 不带单位
console.log(father.offsetTop);
console.log(father.offsetLeft);
//它以定位的盒子为准
console.log(son.offsetLeft);
</script>
element.offsetWidth 返回元素的宽度和高度
element.offsetHeight
//获得元素的宽度和高度 包含padding和borde 值
console.log(w.offsetWidth);
console.log(w.offsetHeight);
//返回带有定位的父亲 否则返回body
console.log(son.offsetParent);
console.log(son.parentNode); //返回父亲 是最近一级的父亲，不管带不带定位
获取元素大小位置，用offset ，想要给元素大小赋值用style
3.2元素可视区client系列
client可以动态的得到元素的边框大小，元素大小等
client宽度和我们offsetWidth最大的区别就是不包含边框
3.3立即执行函数
立即执行函数
写法：
（function(){}）（）或者（function(){}()）;
<script>
(function(a, b) {
console.log(a + b);
})(1, 2);
//第二个小括号可以看做是调用函数
(function sum(a, b) {
console.log(a + b);
}(2, 3))
//立即执行函数最大的作用就是独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突
</script>
3.4pageshow 事件
页面重新加载触发的事件，火狐有特点，不管是往返缓存都会触发
e.paersisited返回的是true，就是说如果这个页面是从缓存取过来的页面，也需要重新计算
3.5元素滚动scroll系列
element.scrollWidth 返回不带边框，自身实际的宽度
.scroHeight 返回自身实际的高度 不含边框 返回数值不带单位
scrollTop：页面被卷去的头部
scrollLeft：页面被卷去的左部
onscroll：当滚动条发生变换就会触发的事件
注意：元素被卷去的头部是element.scrollTop,如果是页面被卷去的头部则是window.pageYOffset
3.6三大系列总结
offset系列包含边框，另外俩个不包含
offset系列经常用于获得元素位置 offsetLeft offsetTop
client系列经常用于获取元素大小 clientWidth clientHeight
scroll经常用于获取滚动距离 scrollTop scrollLeft
注意：页面滚动距离通过window.pageYOffset获取
3.7 mouseover和mouseenter区别
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发
mouseenter只会经过自身盒子触发，因为它不会冒泡
跟mouseenter搭配鼠标离开mouseleave事件同样不会冒泡
两者都是鼠标移动到元素上时会触发事件
4.动画函数封装
核心原理：通过定时器不断移动盒子位置
<script>
//动画原理
//1.获取盒子当前位置
//2.让盒子在当前位置加上1个移动距离
//3.利用定时器不断重复这个操作
//4.加一个结束定时器的条件
//5.注意此元素需要添加定位，才能使用element.style.left
var div = document.querySelector('div');
var timer = setInterval(function() {
if (div.offsetLeft >= 400) {
//停止动画，本质是停止计时器
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
}, 30)
</script>
4.1函数封装
//简单动画函数封装obj目标对象 target 目标位置
function animate(obj, target) {
var timer = setInterval(function() {
if (obj.offsetLeft >= target) {
//停止动画，本质是停止计时器
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30)
}
var div = document.querySelector('div');
var span = document.querySelector('span');
//调用函数
animate(div, 300);
animate(span, 200);
4.2给不同元素记录不同定时器
//简单动画函数封装obj目标对象 target 目标位置
//给不同元素指定不同计时器
function animate(obj, target) {
//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多定时器
//解决方案就是让我们元素只有一个定时器执行
//先清除以前的定时器，只保留一个计时器
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
//停止动画，本质是停止计时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30)
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
animate(span, 200);
})
//调用函数
animate(div, 300);
4.3缓动动画
缓动动画就是让元素运动速度有所变化，最常见的就是让速度慢慢停下来
思路：
1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
2.核心算法：（目标值-现在的位置）/10 作为每次移动的距离 步长
3.停止的条件是：让当前盒子位置等于目标位置就停止定时器
function animate(obj, target) {
//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多定时器
//解决方案就是让我们元素只有一个定时器执行
//先清除以前的定时器，只保留一个计时器
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//步长值写道定时器的里面
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft = target) {
//停止动画，本质是停止计时器
clearInterval(obj.timer);
}
//把每次加1这个步长值改为一个慢慢变小的值 步长公式
obj.style.left = obj.offsetLeft + step + 'px';
}, 15)
}
4.4缓动动画添加回调函数
回调函数写到定时器结束的时候
function animate(obj, target, callback) {
//console.log(callback); callback=function(){} 调用的时候用callback();
//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多定时器
//解决方案就是让我们元素只有一个定时器执行
//先清除以前的定时器，只保留一个计时器
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//步长值写道定时器的里面
//把步长值改为整数，不要小数
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//停止动画，本质是停止计时器
clearInterval(obj.timer);
//回到函数写到定时器结束里面
if (callback) {
callback();
}
}
//把每次加1这个步长值改为一个慢慢变小的值 步长公式
obj.style.left = obj.offsetLeft + step + 'px';
}, 15)
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function() {
animate(span, 500);
})
btn800.addEventListener('click', function() {
animate(span, 800, function() {
span.style.backgroundColor = 'red';
});
})
//调用函数
5.移动端特效
5.1触屏touch事件
touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动时触发
tochend手指从一个DOM元素上移开时触发
5.2触摸事件对象touchevent
touchstart touchmove tochend 都有各自的事件对象
touchstart{
touches：正在触摸屏幕的所有手指的一个列表
targetTouches:正在触摸当前DOM元素的手指列表，重点记住常用
changedTouches:手指状态发生了改变的列表，从无到有 或者从有到无
//当我们手指离开屏幕的时候，就没有touches和targettouches了
如果监听的是同一个DOM元素则这两个没有区别
}
5.3移动端拖动元素
拖动元素需要当前手指的坐标值 我们可以使用targetTouches[0]里面的pageX和pageY
移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离
手指移动的距离：手指滑动中的位置减去 手指刚开始触摸的位置
拖动元素三部曲
1.触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置
2.移动手指touchmove：计算手指的活动距离，并且移动盒子
3.离开手指touchend：
注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault();
5.4classlist
返回元素的类名
是以数组的形式返回的
该属性用于元素中添加，移除以及切换类名
element.calsslist.add('three');
是在后面追加类名，不会覆盖以前的类名,注意前面不用加点
div.classlist.remove('one')
切换类名
element.classlist.toggle('bg');
5.5click延时解决方案
移动端click时间会有300ms的延时，原因是移动端屏幕双击会缩放页面
解决方案：1.禁用缩放
2.利用touch时间自己封装这个时间解决300ms延迟
3.使用插件 fastclick
6.swiper插件
1.引入插件
2.按照语法使用
js 移动端视频插件 zy.media.js
7.本地存储
7.1window.sessionStorage
本地存储特性
设置 读取方便 甚至页面刷新不丢失数据
容量大
1.生命周期为关闭浏览器窗口
2.在同一个窗口（页面）下数据可以共享
3.以键值对的形式存储
存储数据
sessionStorage.setItem('uname', val); key value
获取数据
sessionStorage.getItem('uname');key
删除数据
sessionStorage.removeItem('uname');
清空所有数据
sessionStorage.clear();
7.2window.localStorage
生命周期永久生效，除非手动删除，否则关闭页面也会存在
可以多窗口（页面）共享，同一浏览器共享
以键值对的形式存储
localStorage.setItem('username', val);
localStorage.getItem('username');
localStorage.removeItem('username');
localStorage.clear();
存储用户名案例
<input type="text" id="username">
<input type="checkbox" name="" id="remember">记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', username.value);
} else {
localStorage.removeItem('username');
}
})
</script>