BOM知识

BOM

什么是BOM

即浏览器对象模型——它提供了独立于内容而与浏览器窗口进行交互的对象

BOM的构成

BOM 比 DOM 更大，它包含 DOM
包含document、location、navigation、screen、history

顶级对象window

概念：是访问浏览器窗口的一个接口——是全局变量。调用时可以省略

window对象的常见事件

页面加载

window.onload——当文档内容完全加载完成会触发该事件
注：1、可以把js写在页面元素上面 2、只能写一个，多个以最后一个为准 3、使用addEventListener没有限制

DOMContentLoaded——事件触发时，仅当DOM加载完成
如果页面的图片很多的话，用 DOMContentLoaded 事件比较合适

调整窗口大小事件

window.onresize 是调整窗口大小加载事件,  当触发时就调用的处理函数
window.innerWidth 当前屏幕的宽度

定时器
setTimeout() 炸弹定时器，单位是毫秒
语法：

window.setTimeout（调用函数，[延迟的秒数]）；

停止定时器
clearTimeout（），里面的参数是定时器的标识符

setInterval() 闹钟定时器——每隔设定的时间，去调用一次回调函数
停止定时器——clearInterval（），里面的参数是定时器的标识符

this指向问题

this的最终指向的是那个调用它的对象
全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例

location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL

URL——统一资源定位符
location 对象的属性
location.href 获取或设置整个URl
location.search 放回参数

location对象的常见方法
location.assign 跟href一样，可以跳转页面
location.replace 替换当前页面，因为不能记录历史，不能后退历史记录
location.reload 重新加载页面

navigator对象

navigator 对象包含有关浏览器的信息
最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值

history对象

与浏览器历史记录进行交互
        back（） 后退
        forward（）前进
        go（参数）前进后退功能

Web APIs

元素偏移量 offset

offset 概述 
                1. 获得元素距离带有定位父元素的位置
                2. 获得元素自身的大小（宽度高度）
                3. 注意：返回的数值都不带单位

offset 属性
                element.offsetParent  返回带有定位的父级元素
                .offsetTop 返回带有定位的父级元素上方的偏移
                .offsetLeft 返回带有定位的父级元素的左边偏移
                .offsetWidth 返回自身包括padding、边框、内容的宽度
                .offsetHeight 返回自身包括padding、边框、内容的高度

offset 与 style 区别 
                offset
                    - offset 可以得到任意样式表中的样式值
                    - offset 系列获得的数值是没有单位的
                    - offsetWidth 包含padding+border+width
                    - offsetWidth 等属性是只读属性，只能获取不能赋值
                    - > 所以，我们想要获取元素大小位置，用offset更合适
                style
                    - style 只能得到行内样式表中的样式值
                    - style.width 获得的是带有单位的字符串
                    - style.width 获得不包含padding和border 的值
                    - style.width 是可读写属性，可以获取也可以赋值
                    - > 所以，我们想要给元素更改值，则需要用style改变
                    > **因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes**

元素可视区 client 系列

client概述
通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等

client属性
                element.clientTop 返回元素上边框的大小
                .clientTop 返回元素左边框的大小
                .clientWidth 返回自身包括padding、内容不包扣边框的宽度，返回数值不带单位
                .clientHeight 返回自身包括padding、内容不包扣边框的高度，返回数值不带单位

元素滚动 scroll 系列

scroll 概述
使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等

scroll 属性
                element.scrollTop 返回被卷去的上侧距离，返回数组不带单位
                element.scrollLeft 返回被卷去的左侧距离，返回数组不带单位
                element.scrollWidth 返回自身的实际宽度，不含边框，返回数组不带单位
                element.scrollHeight 返回自身实际的高度，不含边框，返回数组不带单位

页面被卷去的头部
                当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部
                滚动条在滚动时会触发 onscroll事件
                window.pageYOffset——整个页面被卷去的头部
                window.pageXOffset——页面左肩

三大系列总结

对比
                offsetWidth 能返回边框
                clientWidth 不能返回边框
                scrollWidth 不能返回边框，能返回元素真实的内容宽度（溢出文本的宽度）

用法：
                1.offset系列 经常用于获得元素位置    offsetLeft  offsetTop
                2.client经常用于获取元素大小  clientWidth clientHeight
                3.scroll 经常用于获取滚动距离 scrollTop  scrollLeft  
                4.注意页面滚动的距离通过 window.pageXOffset  获得

mouseenter 和mouseover的区别

- 当鼠标移动到元素上时就会触发mouseenter 事件
- 类似 mouseover，它们两者之间的差别是
- mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter  只会经过自身盒子触发
- 之所以这样，就是因为mouseenter不会冒泡
- 跟mouseenter搭配鼠标离开 mouseleave  同样不会冒泡

动画函数封装

原理 

通过定时器 setInterval() 不断移动盒子位置

实现步骤：
            1. 获得盒子当前位置
            2. 让盒子在当前位置加上1个移动距离
            3. 利用定时器不断重复这个操作
            4. 加一个结束定时器的条件
            5. 注意此元素需要添加定位，才能使用element.style.left
注：开启多个定时器会使元素速度越来越快，先清除以前的定时器，只保留当前的一个定时器执行

缓动效果原理  

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法： (目标值 - 现在的位置)   /  10    做为每次移动的距离步长
3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器  
4. 注意步长值需要取整  
当我们点击按钮时候，判断步长是正值还是负值：

正值：Math.ceil()向上取整
负值：Math.floor() 向下取整

添加回调函数

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
            回调函数写的位置：定时器结束的位置。
节流阀
目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数
格式： 

开始设置一个变量var flag= true;

If(flag){flag = false; do something}       关闭水龙头

利用回调函数动画执行完毕， flag = true     打开水龙头

 触屏事件

概述 

不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果
触屏事件 touch（也称触摸事件），Android和 IOS 都有
touch 对象代表一个触摸点

常见的触屏事件

touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素是滑动时触发
touchend 手指从一个DOM元素上移开时触发

触摸事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件
这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
            touches 正在触摸所有手指的一个列表
            targetTouches 正触摸当前DOM元素上的手指的一个列表
            changedTouches 手指状态发生改变的列表 无到有、有到无

classList 属性

classList属性是HTML5新增的一个属性，返回元素的类名
            添加类：element.classList.add（’类名’）；
            移除类：element.classList.remove（’类名’）;
            切换类：element.classList.toggle（’类名’）;
注意:以上方法里面，所有类名都不带点

移动端常用开发插件

什么是插件

JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用
特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小

fastclick 插件解决 300ms 延迟——GitHub官网地址： https://github.com/ftlabs/fastclick

Swiper 插件的使用

中文官网地址： https://www.swiper.com.cn/ 
            1.  引入插件相关文件。（不同版本的引用文件名不一样，注意查看）
            2.  按照规定语法使用

其他移动端常见插件

lsuperslide： http://www.superslide2.com/
l iscroll： https://github.com/cubiq/iscroll

移动端视频插件 zy.media.js——通过 JS 修改元素的大小、颜色、位置等样式

移动端常用开发框架

概念

框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案
使用者要按照框架所规定的某种规范进行开发
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端

Bootstrap使用步骤：

1.引入相关js 文件
2.复制HTML 结构
3.修改对应样式
4.修改相应JS 参数

本地存储

特性

1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage
            1、生命周期为关闭浏览器窗口
            2、在同一个窗口(页面)下数据可以共享
            3、以键值对的形式存储使用

window.localStorage
            1、声明周期永久生效，除非手动删除 否则关闭页面也会存在
            2、可以多窗口（页面）共享（同一浏览器可以共享）
            3.  以键值对的形式存储使用

存储数据：sessionStorage（localStorage）.setItem(key, value)
获取数据：sessionStorage（localStorage）.getItem(key)
删除数据：sessionStorage（localStorage）.removeItem(key)
清空数据：(所有都清除掉)sessionStorage（localStorage）.clear()