目录
独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
dom由一系列相关的对象构成，并且每个对象提供了很多方法与属性
bom的构成
window包括
document location navigation screen history
一、window对象
window对象是浏览器的原始对象，它具有双重角色
1.它是js访问浏览器窗口的一个接口
2.它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属 性和方法
注意：window下的特殊属性window.name
window常见的事件
窗口加载事件
1.window.οnlοad=function(){} 只能写一次，如果有多个，以最后一个window.onload为准
2.window.addEventListener(‘load’,function(){})
window.onload是窗口加载事件，当文档内容全部完全加载完成后会触发该事件（包括图像、脚本文件、css文件），就调用的处理函数
3.document.addEventListener(‘DOMContentLoaded’,function(){}) ie9以上支持
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash
调整窗口大小事件
通常用于响应式布局 window.innerWidth 表示当前屏幕宽度
1.window.οnresize=function(){}
2.window.addEventListener(‘resize’,function(){})
二、定时器
开启定时器setTimeout
window.setTimeout(调用函数[,延迟的毫秒数])
1.window可以省略
2.延迟的毫秒数省略默认是0
3.这个调用函数有三种写法： 直接写函数
函数名
‘函数名()’ 不提倡
4.页面上经常有很多定时器，我们给定时器添加标识符（名字）
var timer1=setTimeout(调用函数[,延迟的毫秒数])
停止定时器setTimeout()
window.clearTimeout(timeoutID)
1.window可以省略
2. timeoutID是定时器的标识符
开启定时器setInterval
setInterval(调用函数[,间隔的毫秒数])
重复调用一个函数，每隔这个时间，就去调用一次函数
1.window可以省略
2.间隔的毫秒数省略默认是0
3.这个调用函数有三种写法： 直接写函数
函数名
‘函数名()’ 不提倡
4.页面上经常有很多定时器，我们给定时器添加标识符（名字）
var timer1=setInterval(调用函数[,延迟的毫秒数])
停止定时器setInterval()
window.clearInterval(intervalID)
1.window可以省略
2. intervalID是定时器的标识符
3.对局部intervalID 访问时，需要在全局定义这个变量并赋值为null 此时clearInterval就可以访问了
三、this指向问题
1.全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window）
2.方法调用中谁调用this指向谁
3.构造函数中this指向构造函数的实例
四、立即执行函数
不需要调用，立即自己能够执行的函数
(function(){})() 或者 (function(){}())
主要作用：创建一个独立的作用域,里面所有的变量都是局部变量，不会有命名冲突的问题
五、js执行队列
js是单线程
js执行时间过长，会导致页面渲染不连贯，导致页面渲染加载阻塞
解决方式：js异步
js同步与异步
本质区别：这条流水线上各个流程的执行顺序不同
同步任务：
都在主线程上执行，形成一个执行栈
异步任务：
js的异步是通过回调函数实现的
一般的类型：1.普通事件，如click,resize
2.资源加载，如load,error
3.定时器，包括setInterval,setTimeout
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）
执行流程：
1.先执行执行栈中的同步任务
2.异步任务（回调函数）放入任务队列中
3.一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
由于主线程不断的重复获取任务，执行任务，再获取任务，再执行，所以这种机制被称为事件循环
六、location对象
用于获取或设置窗体的url.并且可以用于解析url,因为这个属性返回的是一个对象，所以我们将这个属性也成为location对象
属性
location.href 获取或者设置整个url
location.host 返回主机（域名）
location.port 返回端口号 如果未写返回空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段 #后面的内容 常见于链接 锚点
方法
location.assign() 跟href一样，可以跳转页面（也称为重定向也页面）记录历史，可以回退页面
location.replace() 替换当前的页面，因为不记录历史，所以不能回退页面
location.reload() 重新加载页面，相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5
七、navigator对象
包含有关浏览器的信息
属性
userAgent 返回由客户端发送服务器的user-agent头部的值
八、history对象
包含用户（在浏览器窗口中）访问过的url
方法
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能 参数如果是1前进一个页面 如果是-1后退1个页面
九、pc端网页特效
元素偏移量 offset
获取元素距离定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位
属性：
offsetParent 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
offsetTop 返回元素相对带有定位元素上方的偏移
offsetLeft 返回元素相对带有定位父元素左边框的偏移
offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
offsetHeight 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
offset与style的区别
offset可以得到任意样式表的样式值
offset获得的数值是没有单位的
offsetWidth包含padding+border+width
offsetWidth等属性是只读属性，只能获取不能赋值
获取元素大小位置使用offset更合适
style只能得到行内样式表的值
style.width获得的是带有单位的字符串
style.width获得不包含padding和border的值
style.width是可读写属性，可以获得也可以赋值
给元素更改值使用style更合适
元素可视区client
获取元素可视区的相关信息
属性
clientTop 返回元素上边框的大小
clientLeft 返回元素左边框的大小
clientWidth 返回自身包含padding、内容区的宽度、不含边框，返回数值不带单位
clientHeight 返回自身包含padding、内容区的高度、不含边框，返回数值不带单位
元素滚动scroll
可以动态得到该元素的大小，滚动距离
属性
scrollTop 返回被卷去的上侧的距离，返回数值不带单位
scrollLeft 返回被卷去的左侧的距离，返回数值不带单位
scrollWidth 返回自身实际宽度，不含边框，返回数值不带单位
scrollHeight 返回自身实际高度，不含边框，返回数值不带单位
注意：
页面被卷的头部window.pageYOffset获得，如果被卷的左侧是window.pageXOffset
元素被卷的头部scrollTop,如果被卷的左侧是scrollLeft
动画原理
1.获取盒子的当前位置
2.让盒子在当前位置加一个移动距离
3.利用定时器不断重复这个操作
4.加一个结束定时器的条件
5.注意元素需要添加定位，才能使用element.style.left;
动画函数的分装
函数需要传递两个参数，动画对象和移动的距离
缓动动画
让元素运动速度有所变化
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
- 核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长
- 停止的条件是：让当前盒子的位置等于目标位置就停止定时器
动画函数添加回调函数
回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的函数，这个过程叫做回调
回调函数的位置：定时器结束的位置
返回顶部
滚动窗口至文档的特定位置
window.scroll(x,y) x y 没有单位
带有动画的返回顶部
把所有left相关的值改为垂直相关的值
十、节流阀
防止轮播图连续点击造成播放过快
目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数
1.开始设置一个变量 var flag =true;
2.if(flag){flag=false; do something} 关闭水龙头
3.利用回调函数动画执行完毕，flag=true 打开水龙头
补充知识点1：
mouseenter和mouseover的区别
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发，mouseenter只会经过自身盒子触发
跟mouseenter搭配的鼠标离开mouseleave同样不会冒泡
补充知识点2：
火狐后退按钮不能刷新页面
可以使用pageshow事件来触发，这个事件在页面显示时候触发，无论页面是否来自缓存，在重新加载页面中，pageshow会在load事件触发后出发，根据事件对象的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个时间是给window添加
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
