目录
一、什么是BOM
BOM提供了独立于内容而与浏览器窗口进行交互的对象；
核心对象：windows
注：JavaScript语法标准为EMCA；
DOM标准为W3C；BOM标准是浏览器本身自己定义的；
DOM把文档当成对象；顶级对象为docment；
BOM把浏览器当成对象；顶级对象为window；
window{ 它是JS访问浏览器窗口的一个接口，也是一个全局变量 }
二、Window常见事件
1.窗口加载事件
//传统注册
window.onload = function() {}
//监听注册
window.addEventListener('load',function() {})注：window.onload为窗口加载事件（当页面内容全部加载完毕触发改事件；包括CSS、图片等）
作用：用于使JS代码可以写在html中的任意位置
document.addEventListener('DOMContentLoaded',function() {})注：仅当DOM加载完毕触发（不包括CSS、图片、flash等；最先触发；）
用处：图片过多时，图片网站；
2.调整窗口大小事件
//传统注册
window.onresize = function() {};
//监听注册
window.addEventListener('resize',function() {});注：只要窗口大小发生改变就会触发；
用处：响应式开发；
附：window.innerWidth（当前屏幕宽度）
3.两种定时器
（1）Timeout定时器
window.setTimeout(调用函数,延迟毫秒数) //window可以省略
//例子
setTimeout(function() {
console.log(1);
},1000)
//给定时器取标识符
var STime = setTimeout(function() {
console.log(1);
},1000);
//停止定时器
clearTimeout(STime);（2）Interval定时器
window.setInterval(回调函数,间隔的毫秒数)；
//例子
var SInter = setInterval(function() {
console.log(1);
},1000);
//停止定时器
clearInterval(SInter);4.This指向（重点）
（1）全局作用域或普通函数中this指向window；
（2）方法调用中this指向调用者；
（3）构造函数中this指向构造函数的实例；
三、JS的执行队列
JS为单线程（同一时间只能做一件事）；
同步：单线程；
异步：同时处理多个任务；
1.同步任务
同步任务都在主线程上执行，形成一个执行栈；
2.异步任务
JS的异步任务是通过回调函数实现的
注：常见的异步任务
普通：click，resize
资源加载：load，error
定时器：setTimeout，setInterval
3.执行机制
（1）先执行栈中的同步任务
（2）异步任务（回调函数）放进任务队列中（不执行仅仅是放入）
（3）执行栈中的同步任务执行完毕后，系统自动按次序读取任务队列中的异步任务进入执行栈；
4.事件循环
主线程不断的重复获得任务，执行任务，再获取任务，在执行的这种机制；
四、location对象
location用于获取或设置窗体的URL，并且用于解析URL
1.统一资源定位符（URL）
URL：互联网上标准资源的地址。互联网上的每一个文件都有一个唯一的URL，它包含信息为指出文件位置以及浏览器应如何处理；
语法：protocol://host[ ：prot ]/path/[ ?query ]#fragment
protocol:通信协议（常见的为http，ftp，maito）
host:主机（域名）如www.baidu.com
port：端口号（可选）如http的默认值为60
path：路径；由零或多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query：参数；以键值对的形式，通过&分隔
fargment：片段；#后面常用于链接锚点
2.location对象属性
location.href（获取或设置整个URL）
location.host（返回主机域名）
location.port（返回端口号）
location.pathname（返回路径）
location.search（返回参数）重点！
location.hash（返回片段即#后面内容）
3.location对象方法
location.assign（） 跟href一样，可以跳转页面，可以后退
location.replace（） 替换当前页面，但没有记录不能后退
location.reload（） 重新加载页面，参数为true时为强制刷新
4.navigator对象
navigator对象包含了有关浏览器 的信息
5.history对象
history对象与浏览器历史记录交互
（1）history对象方法
back（）后退 forward（）前进 go（参数）前进后退功能；-1后退一个页面
五、PC端网页特效
1.元素偏移量（offset）
offset系列相关属性可以动态获取元素的位置、大小等属性
注：获取元素是距离带有定位的父级元素的位置；获取元素大小返回值不带单位！
（1）offset属性
element.offsetParent //返回该元素带有定位的父级；若无定位父级返回body
element.offsetTop/Left //返回该元素距离带定位父级的上/左距离；不带单位
element.offsetWidth/Height //返回包括padding、boder以及内容区的宽度；不带单位注：在DOM节点中，element.parentNode返回的是最近的父级
2.元素可视区域（client）
client系列来获取元素可视区的相关信息，可以动态得到改元素边框与元素大小；
注：返回值不带单位！
（1）client属性
element.clientTop/Left //返回元素上边框
element.clientWidth/Height //返回自身宽/高度与padding值3.元素滚动（scroll）
scroll系列来动态获取元素大小，滚动距离
注：返回值不带单位！
element.scrollTop/Left //返回被卷去的上/左侧距离
element.scrollWidth/Height //返回自身实际宽/高度（不含边框）
//scroll事件
window.pageYOffset //获取页面被卷去的头部
window.pageXOffset //获取页面被卷去的左侧4.三个获取元素的区别
（1）返回值
offset：包含padding、boder与内容区
client：包含padding与内容区
scroll：包含内容区
（2）用途
offset：用于获取元素位置
client：用于获取元素大小
scroll：用于获取滚动距离
5.立即执行函数
//第一种
(function(实参) {函数体})(形参);
//第二种
(function(实参){函数体}(形参))作用：创建一个独立的作用域，避免了命名冲突问题
立即执行函数：不需要调用，立马能够自己执行函数
注：
1.两个立即执行函数之间用；号分隔
2.所有变量为局部变量
3.dpr为物理像素比
六、动画封装
1.核心
通过定时器（setlenterval（））不断移动盒子位置
2.步骤
（1）获取盒子位置（offset）
（2）让盒子在当前位置加上一个移动距离
（3）利用定时器重复
（4）加上一个结束定时器条件
（5）此元素要定位
3.封装
封装至少传两个参数（动画对象，移动距离）
obj目标对象（自定义）
target目标距离（自定义）
4.缓动效果
需要写在定时器内部
思路：让每次移动距离减少
算法：（目标值 - 现在位置）/ 10 = 每次移动
七、节流（面试重点）
1.作用
防止事件连续触发时造成的播放熟读过快
2.目的
当上一个执行完毕后在执行下一个
3.思路
利用回调函数、添加一个变量，锁住与解锁函数
八、Swiper插件（轮播图）
作用：用于制作轮播图
网站
https://www/swiper.com.cn/
九、本地存储
1.特点
（1）数据存储在用户浏览器中
（2）设置、读取方便，甚至页面刷新不丢失数据
（3）容量较大（sessionStorage约5M；localStorage约20M）
（4）只存储字符串，可以将对象通过JSON.stringify（）编码后存储
2.本地存储（localStorage）
特点
（1）生命周期永久生效；除非主动删除；即使关闭页面也存在；
（2）可以多窗口共享（同一浏览器）
（3）以键值对的形式存储
注：语法与会话存储一致只是改名字
3.会话存储（sessionStorage）
特点
（1）生命周期为关闭浏览器窗口
（2）在同一窗口（页面）下数据可以共享
（3）以键值对形式存储
语法
//存储
sessionStorage.setItem(key,value);
//key:键；自定义
//value:值；输入的值
//获取对应的key
sessionStorage.getItem(key);
//删除对应的key
sessionStorage.setIrem(key);
//删除对应数据
sessionStorage.removeItem();
//删除全部
sessionStorage.clear()
1390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
