1.BOM
即浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM把浏览器当作一个对象。
BOM的顶级对象是window，而DOM是document。
BOM是浏览器厂商各自规定，兼容性较差。
BOM大于DOM，包含DOM。
2.window对象
是浏览器的顶级对象，具有双重角色。
1）是JS访问浏览器的一个接口
2）是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法
*window下有一个特殊属性：window.name
3.window对象的常见事件
1）窗口加载事件
window.onload = function() {}--只能存在一个
或
window.addEventListener("load", function() {})--可以有多个
当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。
2）窗口加载事件2
document.addEventListener('DOMContentLoaded', function() {})
事件触发时，仅当DOM加载完成，不包含样式表、图片，flash等。
当页面图片很多时，从用户访问到onload触发可能需要较长的事件，交互效果不能实现，必然影响用户体验，此时用该事件较合适。
3）调整窗口大小事件
window.onresize = function() {}
或
window.addEventListener("resize", function() {})
窗口大小发生变化就会被触发。
应用：响应式布局。
window.innerWidth为当前浏览器窗口宽度。
4.定时器
1）setTimeout()定时器
window.setTimeout(调用函数,[延迟的毫秒数])
用于设置一个定时器，在定时器到期后执行调用函数，只调用一次。
2）停止setTimeout()定时器
window.clearTimeout(timeoutID)
要先给定时器起个名字/标识符（timeoutID）
3）setInterval()定时器
window.setInterval(回调函数,[间隔的毫秒数])
重复调用一个函数，每隔一段事件就调用一次回调函数。
4）停止setInterval()定时器
window.clearInterval(intervalID)
5.this的指向问题
1）window
一般情况下，this指向的是调用它的对象。
定时器的this指向window。
全局作用域或者普通函数中this指向全局对象window。
2）方法内的this指向
方法调用中谁调用指向谁
3）构造函数中this指向
构造函数中this指向构造函数的实例
6.JS执行机制
1）简介
JS语言的一大特点就是单线程，比如对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加之后再删除。
单线程就意味着所有任务需要排毒，前一个任务结束了才会执行后一个任务。
导致问题：如果JS执行时间过长，会造成页面渲染不连贯，导致页面渲染加载阻塞的感觉。
解决方式：（HTML5）同步和异步。
2）同步和异步
1 同步任务：同步任务都在主线程上执行，形成一个执行线。
2 异步任务：JS的异步是通过回调函数实现的，放到任务/消息队列中执行
异步任务类型：
普通事件：click、resize等
资源加载：load、error等
定时器、包括setInterval、setTimeout等
3 执行
先执行执行栈中的同步任务，异步任务放入任务队列。
同步任务执行完，异步任务进入执行栈开始执行。
*由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（eventloop）。
7.location对象
1）简介
window对象提供的属性，用于获取或设置窗体的URL，并且可用于解析URL，此属性返回一个对象。
2）属性
*location.href：获取或设置整个URL
location.host：返回主机（域名）
location.port：返回端口号，如未写返回空字符串
location.pathname：返回路径
*location.search：返回参数
location.hash：返回片段 #后内容，常见于链接、锚点
3）方法
location.assign('url')：跟href一样，可以跳转页面（也称为重定向页面），可后退页面
location.replace('url')：替换当前页面，因为不记录历史，所以不能后退页面
location.reload()：重新加载页面，相当于刷新按钮或者f5，如果参数为true强制刷新ctrl+f5
8.navigator对象
包含有关浏览器地信息，它有很多属性，最常用地是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值
应用：判断用户用哪个终端打开页面，实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
window.location.href = '';//手机
} else {
window.location.href = '';//电脑
}
9.history对象
history.forward()前进
history.back()后退
history.go(n) 正值前进n页，负值后退n页
10.元素偏移量offset
1）概述
使用相关属性可以动态得到该元素的位置（偏移）、大小等。
1 获得元素距离带有定位父元素的位置
2 获得元素自身大小（宽高）
3 返回的数值都不带单位
2）offset系列常用属性
1 element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
2 element.offsetTop：返回元素相对带有定位父元素上方的偏移
3 element.offsetLeft：返回元素相对带有定位父元素左边框的偏移
4 element.offsetWidth：返回自身包括padding、边框、内容区的宽度，返回数值不带单位
5 element.offsetHeight：返回自身包括padding、边框、内容区的高度，返回数值不带单位
3）offset和style区别
1 offset可以得到任意样式表中的样式值，style只能得到行内样式表中的样式值
2 offset系列获得的数值是没有单位的，style.width获得的是带有单位的字符串
3 offsetWidth包含padding、border、width，style.width获得不包含padding和border的值
4 offsetWidth等属性是只读属性，style.width是可读写属性
5 想获取元素大小位置，用offset更合适，想更改元素的值，则用style
11.元素可视区client
1）概述
使用client系列的相关属性来获取元素可视区的相关信息。可动态获得该元素边框大小、元素大小等。
2）xlient系列属性
1 element.clientTop：返回元素上边距的大小
2 element.clientLeft：返回元素左边框的大小
3 element.clientWidth/Height：返回自身包括padding、内容区宽度/高度，不含边框，返回数值不带单位
*与offset最大区别就是不包含边框
3）立即执行函数：(function(){})()或(function(){}())
主要作用：创建一个独立的作用域。
特点：不需要调用，立马能够自己执行的函数。
*多个立即执行函数之间应该用;分隔
*pageshow事件：在页面显示时触发，无论页面是否来自缓存，在load事件触发后触发，e.persisted = true，说明这个页面从缓存取过来，需要触发pageshow事件来重新加载页面
12.元素scroll
1）概述
相关属性可以动态的得到该元素的大小、滚动距离等。
2）scroll系列属性
1 element.scrollTop：返回被卷去的上侧距离，返回数值不带单位
2 element.scrollLeft：返回被卷去的左侧距离，返回数值不带单位
3 element.scrollWidth/Height：返回自身实际的宽度/高度，不含边框，返回数值不带单位
*页面被卷去头部/左侧：window.pageYOffset/pageXOffset(IE9开始支持)
*元素被卷去头部/左侧：element.scrollTop/scrollLeft 有兼容性问题
*兼容问题解决方案：
声明了DTD：document.documentElement.scrollTop
未声明：document.body.scrollTop
*window.scroll(x,y)：可以让页面到达指定x,y坐标位置（如回到页面顶部）--x,y无单位
3）scroll事件
当滚动条发生变化会触发的事件。
13.offset/client/scroll三大系列的总结
1）大小对比
offsetWidth：padding+边框+内容区
clientWidth：padding+内容区
scrollWidth：返回自身实际宽度
2）主要用法
offset：用于获得元素位置offsetLeft/offsetTop
client：用于获取元素大小clientWidth/clientHeight
scroll：用于获取滚动距离（非页面）scrollTop/scrollLeft
14.mouseenter/mouseover区别
mouseenter/mouseleave不会冒泡。
父盒子绑定事件，进入子盒子不会再触发事件，是因为不会冒泡。
15.动画函数封装
1）原理：通过定时器setInterval()不断移动盒子位置。
2）注意：动画元素需添加定位。
3）缓动动画：缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。
*核心算法：（目标值-现在位置） / 10 作为每次移动的距离步长
16.节流阀
应用：防止轮播图按钮连续点击造成播放过快。
目的：当上一个函数动画内容执行完毕再去执行下一个函数动画，让事件无法连续触发。
*核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
步骤：
1）开始设置一个变量var flag = true
2）if(flag) {flag = false; do somethig}关闭水龙头
3）利用回调函数动画执行完毕，flag = true打开水龙头
17.本地存储
1）特性
1 数据存储在用户浏览器中
2 设置、读取方便、甚至页面刷新不丢失数据
3 容量较大，sessionStorage约5M、localStorage约20M
4 只能存储字符串，可以将对象JSON.stringify()编码后存储
2）window.sessionStorage
1 生命周期为关闭浏览器窗口
2 在同一个窗口（页面）下数据可以共享
3 以键值对的形式存储使用
4 存储数据：sessionStorage.setItem(key,value)
5 存储数据：sessionStorage.getItem(key)
6 删除数据：sessionStorage.removeItem(key)
7 删除所有数据：sessionStorage.clear()
3）window.localStorage
1 永不失效，除非手动删除
2 多窗口（页面）共享，只要是同一浏览器
3 以键值对的形式存储使用
4 存储数据：localStorage.setItem(key,value)
5 存储数据：localStorage.getItem(key)
6 删除数据：localStorage.removeItem(key)
7 删除所有数据：localStorage.clear()
即浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM把浏览器当作一个对象。
BOM的顶级对象是window，而DOM是document。
BOM是浏览器厂商各自规定，兼容性较差。
BOM大于DOM，包含DOM。
2.window对象
是浏览器的顶级对象，具有双重角色。
1）是JS访问浏览器的一个接口
2）是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法
*window下有一个特殊属性：window.name
3.window对象的常见事件
1）窗口加载事件
window.onload = function() {}--只能存在一个
或
window.addEventListener("load", function() {})--可以有多个
当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。
2）窗口加载事件2
document.addEventListener('DOMContentLoaded', function() {})
事件触发时，仅当DOM加载完成，不包含样式表、图片，flash等。
当页面图片很多时，从用户访问到onload触发可能需要较长的事件，交互效果不能实现，必然影响用户体验，此时用该事件较合适。
3）调整窗口大小事件
window.onresize = function() {}
或
window.addEventListener("resize", function() {})
窗口大小发生变化就会被触发。
应用：响应式布局。
window.innerWidth为当前浏览器窗口宽度。
4.定时器
1）setTimeout()定时器
window.setTimeout(调用函数,[延迟的毫秒数])
用于设置一个定时器，在定时器到期后执行调用函数，只调用一次。
2）停止setTimeout()定时器
window.clearTimeout(timeoutID)
要先给定时器起个名字/标识符（timeoutID）
3）setInterval()定时器
window.setInterval(回调函数,[间隔的毫秒数])
重复调用一个函数，每隔一段事件就调用一次回调函数。
4）停止setInterval()定时器
window.clearInterval(intervalID)
5.this的指向问题
1）window
一般情况下，this指向的是调用它的对象。
定时器的this指向window。
全局作用域或者普通函数中this指向全局对象window。
2）方法内的this指向
方法调用中谁调用指向谁
3）构造函数中this指向
构造函数中this指向构造函数的实例
6.JS执行机制
1）简介
JS语言的一大特点就是单线程，比如对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加之后再删除。
单线程就意味着所有任务需要排毒，前一个任务结束了才会执行后一个任务。
导致问题：如果JS执行时间过长，会造成页面渲染不连贯，导致页面渲染加载阻塞的感觉。
解决方式：（HTML5）同步和异步。
2）同步和异步
1 同步任务：同步任务都在主线程上执行，形成一个执行线。
2 异步任务：JS的异步是通过回调函数实现的，放到任务/消息队列中执行
异步任务类型：
普通事件：click、resize等
资源加载：load、error等
定时器、包括setInterval、setTimeout等
3 执行
先执行执行栈中的同步任务，异步任务放入任务队列。
同步任务执行完，异步任务进入执行栈开始执行。
*由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（eventloop）。
7.location对象
1）简介
window对象提供的属性，用于获取或设置窗体的URL，并且可用于解析URL，此属性返回一个对象。
2）属性
*location.href：获取或设置整个URL
location.host：返回主机（域名）
location.port：返回端口号，如未写返回空字符串
location.pathname：返回路径
*location.search：返回参数
location.hash：返回片段 #后内容，常见于链接、锚点
3）方法
location.assign('url')：跟href一样，可以跳转页面（也称为重定向页面），可后退页面
location.replace('url')：替换当前页面，因为不记录历史，所以不能后退页面
location.reload()：重新加载页面，相当于刷新按钮或者f5，如果参数为true强制刷新ctrl+f5
8.navigator对象
包含有关浏览器地信息，它有很多属性，最常用地是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值
应用：判断用户用哪个终端打开页面，实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
window.location.href = '';//手机
} else {
window.location.href = '';//电脑
}
9.history对象
history.forward()前进
history.back()后退
history.go(n) 正值前进n页，负值后退n页
10.元素偏移量offset
1）概述
使用相关属性可以动态得到该元素的位置（偏移）、大小等。
1 获得元素距离带有定位父元素的位置
2 获得元素自身大小（宽高）
3 返回的数值都不带单位
2）offset系列常用属性
1 element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
2 element.offsetTop：返回元素相对带有定位父元素上方的偏移
3 element.offsetLeft：返回元素相对带有定位父元素左边框的偏移
4 element.offsetWidth：返回自身包括padding、边框、内容区的宽度，返回数值不带单位
5 element.offsetHeight：返回自身包括padding、边框、内容区的高度，返回数值不带单位
3）offset和style区别
1 offset可以得到任意样式表中的样式值，style只能得到行内样式表中的样式值
2 offset系列获得的数值是没有单位的，style.width获得的是带有单位的字符串
3 offsetWidth包含padding、border、width，style.width获得不包含padding和border的值
4 offsetWidth等属性是只读属性，style.width是可读写属性
5 想获取元素大小位置，用offset更合适，想更改元素的值，则用style
11.元素可视区client
1）概述
使用client系列的相关属性来获取元素可视区的相关信息。可动态获得该元素边框大小、元素大小等。
2）xlient系列属性
1 element.clientTop：返回元素上边距的大小
2 element.clientLeft：返回元素左边框的大小
3 element.clientWidth/Height：返回自身包括padding、内容区宽度/高度，不含边框，返回数值不带单位
*与offset最大区别就是不包含边框
3）立即执行函数：(function(){})()或(function(){}())
主要作用：创建一个独立的作用域。
特点：不需要调用，立马能够自己执行的函数。
*多个立即执行函数之间应该用;分隔
*pageshow事件：在页面显示时触发，无论页面是否来自缓存，在load事件触发后触发，e.persisted = true，说明这个页面从缓存取过来，需要触发pageshow事件来重新加载页面
12.元素scroll
1）概述
相关属性可以动态的得到该元素的大小、滚动距离等。
2）scroll系列属性
1 element.scrollTop：返回被卷去的上侧距离，返回数值不带单位
2 element.scrollLeft：返回被卷去的左侧距离，返回数值不带单位
3 element.scrollWidth/Height：返回自身实际的宽度/高度，不含边框，返回数值不带单位
*页面被卷去头部/左侧：window.pageYOffset/pageXOffset(IE9开始支持)
*元素被卷去头部/左侧：element.scrollTop/scrollLeft 有兼容性问题
*兼容问题解决方案：
声明了DTD：document.documentElement.scrollTop
未声明：document.body.scrollTop
*window.scroll(x,y)：可以让页面到达指定x,y坐标位置（如回到页面顶部）--x,y无单位
3）scroll事件
当滚动条发生变化会触发的事件。
13.offset/client/scroll三大系列的总结
1）大小对比
offsetWidth：padding+边框+内容区
clientWidth：padding+内容区
scrollWidth：返回自身实际宽度
2）主要用法
offset：用于获得元素位置offsetLeft/offsetTop
client：用于获取元素大小clientWidth/clientHeight
scroll：用于获取滚动距离（非页面）scrollTop/scrollLeft
14.mouseenter/mouseover区别
mouseenter/mouseleave不会冒泡。
父盒子绑定事件，进入子盒子不会再触发事件，是因为不会冒泡。
15.动画函数封装
1）原理：通过定时器setInterval()不断移动盒子位置。
2）注意：动画元素需添加定位。
3）缓动动画：缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。
*核心算法：（目标值-现在位置） / 10 作为每次移动的距离步长
16.节流阀
应用：防止轮播图按钮连续点击造成播放过快。
目的：当上一个函数动画内容执行完毕再去执行下一个函数动画，让事件无法连续触发。
*核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
步骤：
1）开始设置一个变量var flag = true
2）if(flag) {flag = false; do somethig}关闭水龙头
3）利用回调函数动画执行完毕，flag = true打开水龙头
17.本地存储
1）特性
1 数据存储在用户浏览器中
2 设置、读取方便、甚至页面刷新不丢失数据
3 容量较大，sessionStorage约5M、localStorage约20M
4 只能存储字符串，可以将对象JSON.stringify()编码后存储
2）window.sessionStorage
1 生命周期为关闭浏览器窗口
2 在同一个窗口（页面）下数据可以共享
3 以键值对的形式存储使用
4 存储数据：sessionStorage.setItem(key,value)
5 存储数据：sessionStorage.getItem(key)
6 删除数据：sessionStorage.removeItem(key)
7 删除所有数据：sessionStorage.clear()
3）window.localStorage
1 永不失效，除非手动删除
2 多窗口（页面）共享，只要是同一浏览器
3 以键值对的形式存储使用
4 存储数据：localStorage.setItem(key,value)
5 存储数据：localStorage.getItem(key)
6 删除数据：localStorage.removeItem(key)
7 删除所有数据：localStorage.clear()
————学习笔记