Web APIs

Web API介绍

API的概念

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。

举例解释什么是API。

例如，

​ C语言中有一个函数 fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是一个C语言提供的打开文件的工具。

​ javascript中有一个函数alert()可以在页面弹一个提示框，这个函数就是js提供的一个弹框工具。

这些工具（函数）由编程语言提供，内部的实现已经封装好了，我们只要学会灵活的使用这些工具即可。

Web API的概念

​ Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

​ 主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框， 直接使用 alert(‘弹出’)

​ MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API

​ 此处的 Web API 特指浏览器提供的一系列API(很多函数或对象方法)，即操作网页的一系列工具。例如：操作html标签、操作页面地址的方法。

DOM

什么是DOM

​ 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

​ W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。

DOM树

DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

• 文档：一个页面就是一个文档，DOM中使用document表示
• 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
• 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

获取元素

我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。

// get 获得 element 元素 by 通过  驼峰命名法
document.getElementById('id名'); // 通过id获取元素对象
document.getElementsByTagName('标签名'); // 通过标签名获取元素对象集合 伪数组

// H5新增
document.getElementsByClassName('类名'); // 通过类名获取元素对象集合 伪数组
document.querySelector('选择器'); // 通过选择器获取第一个元素对象 (推荐使用)
document.querySelectorAll('选择器'); // 通过选择器获取元素对象集合 伪数组 (推荐使用)

document.getElementsByName('name的值');  // 通过name属性获取元素对象集合 伪数组

获取特殊元素(body,html)

document.body // 获取body元素对象
document.documentElement // 获取html元素对象
document.querySelector('body'); // 之类的也行

事件基础

事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发— 响应机制。

​ 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

事件三要素

• 事件源（谁）：触发事件的元素
• 事件类型（什么事件）： 例如 click 点击事件
• 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

执行事件的步骤

1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)

事件类型

onclick // 鼠标点击
oncontextmenu //鼠标右击
ondblclick // 双击事件

onmouseover // 鼠标移入，会冒泡
onmouseout // 鼠标移出，会冒泡
onmouseenter // 鼠标移入，不会冒泡 推荐使用
onmouseleave // 鼠标移出，不会冒泡 推荐使用
onmousedown // 移入按下鼠标左键

onselectstart // 鼠标选中 不支持对input和textarea
onselect // 选择textarea或input触发

onfocus // 获得焦点
onblur // 失去焦点
onmousemove // 鼠标移动触发
onmouseup // 鼠标弹起
onmousedown // 鼠标按下

onkeyup // 键盘按键松开
onkeydown // 键盘按键按下
onkeypress // 键盘按键按下 不识别功能键 比如 ctrl shift 箭头等
onkeydown > onkeypress > onkeyup

onresize // 页面大小发生变化触发
onpageshow // 页面显示时触发 在load之后

onscroll // 页面滚动时触发

onload //  文档内容完全加载完成触发
DOMContentLoaded // DOM 加载完成触发 不包括样式表,图片,flash等 i9以上

transitionend // 过渡结束事件

onchange // 表单状态发生改变触发
oninput // 表单value发生变化时触发
xhr.upload.onprogress // 上传的过程中持续触发
xhr.upload.onload // 上传完成时触发
onsubmit // 提交触发事件
onreadystatechange // xhr请求触发
ontimeout // 请求超时触发
onrequest // 监听用户的请求事件

// ajax全局事件
onajaxStart // 请求开始发送时触发
onajaxComplete // 当请求完成时触发

onhashchange // 地址栏hash值变化触发
onerror // 图片异常触发事件

查看元素的属性

console.dir(); // 打印返回的元素对象 查看属性和方法

操作元素

​ JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

改变元素内容（获取或设置）

.innerText // 只可以识别文本,会去除空格和换行 ie9以上
.innerHTML // 可以识别html标签,变成页面结构,会保留空格和换行
.textContent // 设置文本内容

常用元素的属性操作

1. innerText、innerHTML 改变元素内容
2. src、href
3. id、alt、title

表单元素的属性操作

type、valye、checked、selected、disabled

注: 表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

样式属性操作

.style // 修改行内样式
.className // 修改类名样式

排他操作

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1. 所有元素全部清除样式（干掉其他人）

2. 给当前元素设置样式 （留下我自己）

3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

自定义属性操作

获取属性值

element.属性 // 获取内置属性值
element.getAttribute('属性') // 可以获取自定义属性值
element.dataset.属性 或者element.dataset['属性'] // H5新增 获取自定义属性(以data开头的) ie9以上

设置属性值

element.属性='值' // 设置内置属性的值
element.setAttribute('属性','值') // 可以设置自定义属性的值

移除属性

removeAttribute(属性) // 移除属性

H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

HTML5规定可以为元素添加非标准的属性，但要添加前缀 data- ，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data- 开头即可添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值：

1. 设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值
比如 <div data-index="1"></div>
或者使用JS设置
element.setAttribute('data-index',2)

2. 获取H5自定义属性
  1. 兼容性获取 element.getAttribute('data-index');
  2. H5新增 element.dataset.index 或者 element.dataset['index'] ie11 才开始支持

节点操作

节点概述

​ 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

​ HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

​ 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点为1
属性节点为2
文本节点为3 (文本节点包含文字、空格、换行等)
// 我们在实际开发中，节点操作主要操作的是元素节点

父级节点

.parentNode // 获取最近的父节点 是一个元素 没有则为null

子级节点

.childNodes(标准) // 获取所有的子节点(包含元素节点,文本节点等等) 不推荐使用
.children(非标准) // 获取所有子元素节点 推荐使用

firstChild // 获取第一个子节点(包含元素节点,文本节点等等) 不推荐使用
lastChild // 获取最后一个子节点(包含元素节点,文本节点等等) 不推荐使用
firstElementChild // 返回第一个子元素节点 ie9以上
lastElementChild // 返回第一个子元素节点 ie9以上

.children[0] // 返回第一个子元素节点 推荐使用
.children[.children.length-1] // 返回最后一个子元素节点 推荐使用

兄弟节点

.nextSibling // 下一个兄弟节点 (包含元素节点,文本节点等等) 不推荐使用
.previousSibling // 上一个兄弟节点 (包含元素节点,文本节点等等) 不推荐使用

.nextElementSibling // 下一个兄弟元素节点 ie9以上
.previousElementSibling // 上一个兄弟元素节点 ie9以上

创建节点

document.createElement(''); // 创建节点
document.createTextNode(''); // 创建文本节点

添加节点

.appendChild(node); // 添加节点到子元素末尾
.insertBefore(node,指定元素); // 添加节点到指定元素的前面

删除节点

node节点.removeChild(子节点); // 删除节点,返回删除的节点。

复制(克隆)节点

node.cloneNode(); // 克隆节点(空和false是浅拷贝 只复制标签不复制里面的子节点  true 为深拷贝 会复制所有的节点)

三种创建元素方式区别

document.write() // 如果文档流执行完毕再使用,会导致页面重绘
innerHTML // 用拼接速度慢,用数组join('')方法速度比createElement快
createElement // 速度比innerHTML拼接快

innerTHML和createElement效率对比

innerHTML字符串拼接方式（效率低）

<script>
    function fn() {
        var d1 = +new Date();
        var str = '';
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

createElement方式（效率一般）

<script>
    function fn() {
        var d1 = +new Date();

        for (var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border = '1px solid red';
            document.body.appendChild(div);
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

innerHTML数组方式（效率高）

<script>
    function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

事件高级

注册事件(事件监听)

// 传统注册方式 唯一性 只能绑定一个同种事件
<button onclick="alert(hi~)"></button>
btn.onclick=function(){}

// 方法监听注册方式
addEventListener(type,listener,useCapture) //可以绑定多个同种事件
// 事件类型(不带on)  事件监听函数  布尔值(true为捕获阶段false为冒泡阶段)   ie9以上
btn.addEventListener('click',function(){})

btn.attachEvent('onclick',function(){}) //非标准 ie9以下 不推荐使用

删除(解绑)事件

// 传统方式删除事件
.onclick=null; // 可以直接用
.onclick=fn;
function fn(){.onclick=null;}

// 第二种 removeEventListener删除事件
.addEventListener('click',fn)
function fn(){.removeEventListener('click',fn);}

// 第三种 detachEvent
.attachEvent('onclick',fn);
function fn(){.detachEvent('onclick',fn);}

DOM事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。
当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。

比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。也就触发了对应元素绑定的单击事件

DOM 事件流会经历3个阶段：

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

事件冒泡

  <div class="father">
      <div class="son">son盒子</div>
  </div>
  <script>
      // onclick 和 attachEvent（ie） 在冒泡阶段触发
      // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
      // son -> father ->body -> html -> document
      var son = document.querySelector('.son');
// 给son注册单击事件
      son.addEventListener('click', function() {
          alert('son');
      }, false);
// 给father注册单击事件
      var father = document.querySelector('.father');
      father.addEventListener('click', function() {
          alert('father');
      }, false);
// 给document注册单击事件，省略第3个参数
      document.addEventListener('click', function() {
          alert('document');
      })
  </script>

冒泡(点透)问题

1.嵌套关系
2.绑定同一个事件

//当点击里面的元素的时候，会触发外层所有元素身上的同种事件

// onblur 失去焦点,onfocus 获得焦点,onmouseenter 鼠标移入,onmouseleave 鼠标移出   没有冒泡

事件捕获

  <div class="father">
      <div class="son">son盒子</div>
  </div>
  <script>
      // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
      // document -> html -> body -> father -> son
       var son = document.querySelector('.son');
// 给son注册单击事件，第3个参数为true
       son.addEventListener('click', function() {
           alert('son');
       }, true);
       var father = document.querySelector('.father');
// 给father注册单击事件，第3个参数为true
       father.addEventListener('click', function() {
           alert('father');
       }, true);
// 给document注册单击事件，第3个参数为true
      document.addEventListener('click', function() {
          alert('document');
      }, true)
  </script>

事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

比如：

1. 谁绑定了这个事件。

2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。

3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

事件对象的兼容性处理

事件对象本身的获取存在兼容问题：

1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。

2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

e = e || window.event

事件对象常见的属性和方法

e.target 			// 返回触发事件的对象 标准 ie9以上
e.srcElement 		// 返回触发事件的对象 非标准 ie9以下
var target = e.target || e.srcElement;

e.type 				// 返回事件的类型 不带on

e.cancelBubble 	= true	// 阻止冒泡 非标准 ie9以下
e.stopPropagation() // 阻止冒泡 标准 ie9以上

e.returnValue 		// 阻止默认事件(行为) 非标准 ie9以下 比如不让链接跳转
e.preventDefault() 	// 阻止默认事件(行为) 标准
retrun false // 也能阻止默认事件 只限于传统注册方式

currentTarget 		// 和this相似的新属性 i9以上支持

阻止事件冒泡的兼容性处理

if(e && e.stopPropagation){
    e.stopPropagation();
}else {
    window.event.cancelBubble = true
}

事件委托

// 给父节点添加侦听器,利用事件冒泡影响每一个子节点
// 利用冒泡的原理,减少了绑定事件的次数

禁止选中文字和禁止右键菜单

contextmenu // 鼠标右键
document.addEventListener('contextmenu',function(e){
  	e.preventDefault();
}) // 禁止右键菜单
selectstart // 鼠标选中
document.addEventListener('selectstart',function(e){
  	e.preventDefault();
}) // 禁止选中

常用鼠标事件对象

e.clientX // 鼠标在可视区域的X坐标
e.clientY // 鼠标在可视区域的Y坐标
e.pageX // 鼠标在页面文档的X坐标 I9以上
e.pageY // 鼠标在页面文档的Y坐标 I9以上
e.screenX // 鼠标在电脑屏幕的X坐标
e.screenY // 鼠标在电脑屏幕的Y坐标

常用的键盘事件对象

e.KeyCode
97:a	65:A	32:" "	 48:0	49:1 //ASCII对应值

触发事件的新方法

.focus(); // 获得焦点
.click(); // 获得点击

BOM

什么是BOM

​ BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

​ BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

​ BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

BOM的构成

浏览器对象模型
BOM 比 DOM 更大，它包含 DOM。
BOM控制浏览器api接口
DOM控制文档api接口
window BOM顶级对象

顶级对象window

window 对象是浏览器的顶级对象,塔具有双重角色
1.它是JS访问浏览器窗口的一个接口
2.它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window,前面学习的对话框都属于window对象方法，如alert()、prompt()等。
注意：window下的一个特殊属性window.name

window常见事件

// 页面加载事件
window.onload = function(){}
window.addEventListener('load',function(){})
// 文档内容完全加载完成触发

document.addEventListener('DOMContentLoaded',function(){})
// DOM 加载完成触发 不包括样式表,图片,flash等 i9以上


// 调整窗口大小事件
window.onresize = function(){};
window.addEVentListener('resize',function(){});

window.innerWidth // 获取屏幕宽度
window.innerHeight // 获取屏幕高度

定时器

window.setTimeout(调用函数,延迟的毫秒数); // 炸弹性定时器 调用一次函数 省略延迟是0毫秒

window.setInterval(调用函数,延迟的毫秒数); // 间歇性定时器 重复调用函数

清除定时器

window.clearTimeout(timeoutID); 
window.clearInterval(intervalID);

this指向问题

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2. 方法调用中谁调用this指向谁
3. 构造函数中this指向构造函数的实例

location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象

URL

统一资源定位符(Unifrom Resource Locator,URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器该怎么处理它。

// URL 的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment

protocol 通信协议 常用的http,ftp,maito等
host 主机(域名)   www.baidu.com
port			端口号 可选，省略时使用方案的默认端口为80
path 			路径 由 零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query 			参数 以键值对的新式，通过&符号分隔开来
fragment 		片段 #后面内容 常见于链接 锚点

location 对象的属性

location.href // 获取或设置整个URL
location.host // 返回主机(域名)
location.port // 返回端口号 如果未写 返回空字符串
location.pathname // 返回路径
location.search // 返回参数
location.hash // 返回片段 #后面内容 常见于链接 锚点

location 对象的常见方法(跳转方式)

location.href='' // 在原页面跳转
window.open('') // 跳转到新页面
location.assign('') // 可以后退
location.replace('') // 不可以后退
location.reload('') // 刷新

navigator对象

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

navigator.userAgent // 获取浏览器设备信息

下面前端代码可以判断用户那个终端打开页面，实现跳转

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 = "";     //电脑
 }

history对象

​ window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

history.forward(); // 前进
history.back(); // 后退
history.go(); // 1前进1步 -1后退1步

JS执行机制

JS 是单线程

	JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JavaS这门脚本语言诞生的使命所致--JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
	单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步任务和异步任务

​ 单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！

​ 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。于是，JS 中出现了同步任务和异步任务。

同步

​ 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步

​ 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

他们的本质区别：这条流水线上各个流程的执行顺序不同。

JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是：
	在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是：
	不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

同步任务都在主线程上执行，形成一个执行栈。

JS的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型：

1.普通事件，如click、resize等
2.资源加载，如load、error等
3.定时器，包括setInterval、setTimeout等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

JS执行机制（事件循环）

1.先执行执行栈中的同步任务。
2.异步任务（回调函数）放入任务队列中。
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态,进入执行栈，开始执行。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环(event loop)。

三大系列

元素偏移量 offset 系列

offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 获得元素距离带有定位父元素的位置

2. 获得元素自身的大小（宽度高度）

3. 注意：返回的数值都不带单位

.offsetParent // 返回元素带有定位的父元素，没有则返回body
.offsetTop // 当前元素与带有定位父元素上方的距离
.offsetLeft // 当前元素与带有定位父元素左边框的距离
.offsetWidth // 元素包括padding,边框,内容区的宽度，不带单位 
.offsetHeight // 元素包括padding,边框,内容区的高度，不带单位

// offset 可以得到任意样式表中的样式值
// offset 系列获得的数值是没有单位的
// offsetWidth 包含padding+border+width
// offsetWidth 等属性是只读属性，只能获取不能赋值

// style 只能得到行内样式表中的样式值
// style.width 获得的是带有单位的字符串
// style.width 获得不包含padding和border 的值
// style.width 是可读写属性，可以获取也可以赋值

我们想要获取元素大小位置，用offset更合适
我们想要给元素更改值，则需要用style改变

元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client
系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

.clientTop // 返回元素上边框的大小
.clientLeft // 返回元素左边框的大小
.clientWidth // 返回自身包括padding,内容区的宽度,不含边框,不带单位
.clientHeight // 返回自身包括padding,内容区的高度,不含边框,不带单位

元素滚动 scroll 系列

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

.scrollTop // 返回被卷去的上侧距离,不带单位
.scrollLeft // 返回被卷去的左侧距离,不带单位
.scrollWidth // 返回内容实际的宽度,不含边框,不带单位
.scrollHeight // 返回内容实际的高度,不含边框,不带单位

window.pageXOffset // 获取浏览器被卷去的左侧距离,不带单位
window.pageYOffset // 获取浏览器被卷去的上侧距离,不带单位
window.scroll(x,y) // 滚动到页面指定位置

页面被卷去的头部兼容性解决方案

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

1. 声明了 DTD，使用 document.documentElement.scrollTop
2. 未声明 DTD，使用  document.body.scrollTop
3. 新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持

function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的时候  getScroll().left

动画函数封装

动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置。

实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left

动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。

核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

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);
       }

缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法： (目标值 - 现在的位置)   /  10    做为每次移动的距离步长
3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 
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();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

移动端事件

触屏事件概述

移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

常见的触屏事件如下：

touchstart // 触摸开始
touchmove // 触摸时
touchend // 触摸结束
touchcancel // 中断触摸
click // 要在较短时间内弹起才会触发

触摸事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

touchstart、touchmove、touchend 三个事件都会各自有事件对象。

触摸事件对象重点我们看三个常见对象列表：

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

touches // 正在触摸屏幕大的所有的手指的列表
targetTouches // 正在触摸当前DOM元素的手指的列表
changedTouches // 手指状态发生了改变的列表 从无到有 或者 从有到无

移动端拖动元素

1. touchstart、touchmove、touchend可以实现拖动元素

2. 但是拖动元素需要当前手指的坐标值 我们可以使用  targetTouches[0] 里面的pageX 和 pageY

3. 移动端拖动的原理：    手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离

4. 手指移动的距离：  手指滑动中的位置 减去  手指刚开始触摸的位置

   拖动元素三步曲：

   （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置

   （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子

   （3） 离开手指 touchend:

   注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

解决移动端click延时300ms的方案

禁用
插件
touch封装插件

H5新增 classList

classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。

该属性用于在元素中添加，移除及切换 CSS 类。有以下方法

.classList[] // 返回类名
.classList.add(); // 添加类名
.classList.remove(); // 移除类名 
.classList.toggle(); // 切换类名

立即执行函数

// 不需要调用，立马能够自己执行的函数 也可以传递参数 第二个小括号可以看做是调用函数  
// 最大作用就是 独立创建了一个作用域。避免了命名冲突问题
;(function(){})();
;(function(){}());

window.devicePixeRatio || 1 // 物理像素比
resize // 页面大小发生变化触发
pageshow // 页面显示时触发 在load之后
e.persisted // 判断页面是否从缓存中取出

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

window.localStorage

1、声明周期永久生效，除非手动删除 否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3、以键值对的形式存储使用

window.sessionStorage // 5M 关闭浏览器窗口就没有

sessionStorage.setItem(key,value) // 存储
sessionStorage.getItem(key) // 获取
sessionStorage.removeItem(key) // 删除
sessionStorage.clear() // 清空

window.localStorage // 20M 永久生效(除非删除) 同一浏览器共享

localStorage.setItem(key,value) // 存储
localStorage.getItem(key) // 获取
localStorage.removeItem(key) // 删除
localStorage.clear() // 清空

JSON(序列化)

JSON.stringify(); // 转成像对象的字符串
JSON.parse(); // 转成真对象

其他

window.location // 设置页面变化
window.parent // 拿到子页面的父页面的window对象
window.location.hash.slice(1) // 获取hash值 地址栏#那部分

window.parent.getUserInfo() // 调用父页面中的方法，重新渲染用户的头像和用户的信息

var file = e.target.files[0]
// 将文件转换为路径
var newImgURL = URL.createObjectURL(file);