DOM与BOM与Echarts

以下内容全部整理于：黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作

DOM

DOM简介

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

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

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

获取元素

根据 ID 获取

getElementById()

因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
get 获得 element 元素 by 通过驼峰命名法
参数 id是大小写敏感的字符串
返回的是一个元素对象
console.dir 打印我们返回的元素对象更好的查看里面的属性和方法

根据标签名获取

getElementsByTagName()

// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}
// 3. 如果页面中只有一个li 返回的还是伪数组的形式
// 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
// 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
// var ol = document.getElementsByTagName('ol'); // [ol]
// console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));

通过 HTML5 新增的方法获取

getElementsByClassName
querySelector
querySelectorAll()

// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);

特殊元素获取

获取body元素：document.body

获取html元素：document.documentElement

事件基础

事件三要素

事件是有三部分组成：事件源，事件类型，事件处理程序。我们也称为事件三要素

(1) 事件源：事件被触发的对象谁按钮

(2) 事件类型：如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是键盘按下

(3) 事件处理程序：通过一个函数赋值的方式完成

执行事件步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

操作元素

改变元素内容

innerText 不识别html标签非标准去除空格和换行

innerHTML 识别html标签 W3C标准保留空格和换行的

// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签 非标准  去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今天是：</strong> 2019';
// 这两个属性是可读写的  可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);

修改元素属性

innerText、innerHTML 改变元素内容
src、href
id、alt、title

表单属性设置

type、value、checked、selected、disabled

// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {// input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容// 表单里面的值 文字内容是通过 value 来修改的input.value = '被点击了';// 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用// btn.disabled = true;this.disabled = true;// this 指向的是事件函数的调用者 btn
}

样式属性操作

element.style 行内样式操作
element.className 类名样式操作

PS：JS 里面的样式采取驼峰命名法，比如 fontSize、 backgroundColor。JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高。

排他思想

所有元素全部清除样式后给当前元素设置样式

自定义属性操作

var div = document.querySelector('div');
// 1. 获取元素的属性值
// (1) element.属性
console.log(div.id);
//(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
// 2. 设置元素属性值
// (1) element.属性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性', '值');  主要针对于自定义属性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
// 3 移除属性 removeAttribute(属性)
div.removeAttribute('index');

H5自定义属性

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

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

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

H5给我们新增了自定义属性：H5规定自定义属性data-开头做为属性名并且赋值。

var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);

节点操作

利用DOM获取元素	利用节点层级关系获取元素
document.getElementById()	利用父子兄节点关系获取元素
document.getElementsByTagName()	逻辑性强，但是兼容性稍差
document.querySelector 等
逻辑性不强、繁琐

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

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

我们在实际开发中，节点操作主要操作的是元素节点

父级节点

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点

如果指定的节点没有父节点则返回 null

子节点

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes,常用parentNode.chidren，这样会获取所有的子元素节点，其余节点不返回。

// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);// 2. children 获取所有的子元素节点 **也是我们实际开发常用的**
console.log(ul.children);

子节点第一个和最后一个

var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);

兄弟节点

var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一个兄弟元素节点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);

创建添加删除节点

// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
// 5. 删除节点
node.removeChild(child)

克隆节点

cloneNode()

如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);

三种动态创建元素区别

document.write()
element.innerHTML
document.createElement()

区别：

document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 creatElement 高

// window.onload = function() {//         document.write('<div>123</div>');//     }
// 三种创建元素方式区别
// 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
// var btn = document.querySelector('button');
// btn.onclick = function() {//     document.write('<div>123</div>');
// }// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
// for (var i = 0; i <= 100; i++) {//     inner.innerHTML += '<a href="#">百度</a>'
// }
var arr = [];
for (var i = 0; i <= 100; i++) {arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3. document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {var a = document.createElement('a');create.appendChild(a);
}

拼接效率测试

//innerHTML拼接效率测试
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();
//innerHTML数组效率测试
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();
//createElement效率测试
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();

DOM核心

创建：document.write()、element.innerHTML、document.createElement()

增加：appendChild、insertBefore

删除：removeChild

改：

修改元素属性： src、href、title等
修改普通元素内容： innerHTML 、innerText
修改表单元素： value、type、disabled等
修改元素样式： style、className

查：

DOM提供的API 方法： getElementById、getElementsByTagName 古老用法不太推荐
H5提供的新方法： querySelector、querySelectorAll 提倡
利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

属性操作：

setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute移除属性

事件操作：

事件高级

注册事件

传统注册方式

利用 on 开头的事件 onclick

<button οnclick=“alert(‘hi~’)”>
btn.onclick = function() {}

特点：注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

w3c 标准推荐方式
addEventListener() 它是一个方法
IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
特点：同一个元素同一个事件可以注册多个监听器

eventTarget.addEventListener(type, listener[, useCapture])

type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

var btns = document.querySelectorAll('button');
// 1. 传统方式注册事件
btns[0].onclick = function() {alert('hi');
}
btns[0].onclick = function() {alert('hao a u');
}
// 2. 事件侦听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function() {alert(22);
})
btns[1].addEventListener('click', function() {alert(33);
})
// 3. attachEvent ie9以前的版本支持
btns[2].attachEvent('onclick', function() {alert(11);
})

删除事件

var divs = document.querySelectorAll('div');
divs[0].onclick = function() {alert(11);// 1. 传统方式删除事件divs[0].onclick = null;
}
// 2. removeEventListener 删除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号function fn() {alert(22);divs[1].removeEventListener('click', fn);
}
// 3. detachEvent
divs[2].attachEvent('onclick', fn1);function fn1() {alert(33);divs[2].detachEvent('onclick', fn1);
}

DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。

事件捕获：网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

注意：

JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。
addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

// 事件对象
var div = document.querySelector('div');
div.onclick = function(e) {// console.log(e);// console.log(window.event);// e = e || window.event;console.log(e);}
// div.addEventListener('click', function(e) {//         console.log(e);//     })
// 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
// 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
// 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
// 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
// 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;

e.target 和 this 的区别：

this 是事件绑定的元素，这个函数的调用者（绑定这个事件的元素）
e.target 是事件触发的元素。

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

// 常见事件对象的属性和方法
// 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
// 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click', function(e) {console.log(e.target);console.log(this);})
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {// 我们给ul 绑定了事件  那么this 就指向ul  console.log(this);console.log(e.currentTarget);// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是liconsole.log(e.target);})
// 了解兼容性
// div.onclick = function(e) {//     e = e || window.event;
//     var target = e.target || e.srcElement;
//     console.log(target);// }
// 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识

阻止事件冒泡

标准写法：利用事件对象里面的 stopPropagation()方法

非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

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

事件委托

事件委托也称为事件代理，在 jQuery 里面称为事件委派。

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

例如：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。

作用：我们只操作了一次 DOM ，提高了程序的性能。

常用鼠标事件

1.禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

2.禁止鼠标选中（selectstart 开始选中）

// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {e.preventDefault();})

鼠标事件对象

// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {// 1. client 鼠标在可视区的x和y坐标console.log(e.clientX);console.log(e.clientY);console.log('---------------------');// 2. page 鼠标在页面文档的x和y坐标console.log(e.pageX);console.log(e.pageY);console.log('---------------------');// 3. screen 鼠标在电脑屏幕的x和y坐标console.log(e.screenX);console.log(e.screenY);
})

常用键盘事件

onkeyup、onkeydown、onkeypress(不识别功能键)

注意：

如果使用addEventListener，不需要加on
onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
三个事件的执行顺序是： keydown --> keypress —> keyup
onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）

// 常用的键盘事件
//1. keyup 按键弹起的时候触发
// document.onkeyup = function() {//         console.log('我弹起了');//     }
document.addEventListener('keyup', function() {console.log('我弹起了');
})//3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {console.log('我按下了press');
})
//2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {console.log('我按下了down');
})
// 4. 三个事件的执行顺序  keydown -- keypress -- keyup

BOM

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

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

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

DOM	BOM
文档对象模型	浏览器对象模型
DOM 就是把「文档」当做一个「对象」来看待	把「浏览器」当做一个「对象」来看待
DOM 的顶级对象是 document	BOM 的顶级对象是 window
DOM 主要学习的是操作页面元素	BOM 学习的是浏览器窗口交互的一些对象
DOM 是 W3C 标准规范	BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM的构成

window下：document、location、navigation、screen、history

window对象是浏览器的顶级对象，它具有双重角色。

它是 JS 访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

注意：window下的一个特殊属性 window.name

window对象常见事件

窗口加载事件

window.onload = function(){}
window.addEventListener(“load”,function(){});

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

注意：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制

document.addEventListener(‘DOMContentLoaded’,function(){})

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。Ie9以上才支持

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

调整窗口大小

window.onresize = function(){}
window.addEventListener(“resize”,function(){});

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意：

只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

window.addEventListener('load', function() {var div = document.querySelector('div');window.addEventListener('resize', function() {console.log(window.innerWidth);console.log('变化了');if (window.innerWidth <= 800) {div.style.display = 'none';} else {div.style.display = 'block';}})
})

定时器

setTimeout()

setTimeout(调用函数，延迟毫秒数) 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。这个调用函数我们也称为回调函数 callback。普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

注意：

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

取消定时器：

clearTimeout(intervalID)方法取消了先前通过调用 setTimeout() 建立的定时器。

var btn = document.querySelector('button');
var timer = setTimeout(function() {console.log('爆炸了');}, 5000);
btn.addEventListener('click', function() {clearTimeout(timer);
})

setInterval()

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

注意：

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

停止计时器：

clearInterval(intervalID)方法取消了先前通过调用 setInterval()建立的定时器。

setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器

setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局变量  null是一个空对象
begin.addEventListener('click', function() {timer = setInterval(function() {console.log('ni hao ma');}, 1000);
})
stop.addEventListener('click', function() {clearInterval(timer);
})

JS执行队列

详情可以参阅：你不知道的Javascript(中)阅读

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步

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

异步

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

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

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等

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

执行机制

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

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

location对象

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

url

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

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

location对象的属性

location对象的方法

方法	返回值
location.assign()	和href一样可以跳转页面
location.replace()	替换当前页面，不记录历史所以不能后退
location.reload()	重写加载页面相当于刷新，如果参数为true强制刷新

navigator对象

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

history对象

方法	作用
back()	后退功能
forward()	前进功能
go(参数)	前进后退功能

PC端网页特效

offset

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

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）

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

常用属性：

// offset 系列
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.可以得到元素的偏移 位置 返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2.可以得到元素的大小 宽度和高度 是包含padding + border + width
console.log(w.offsetWidth);
console.log(w.offsetHeight);
// 3. 返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位

与style区别：

offset	style
offset 可以得到任意样式表中的样式值	style 只能得到行内样式表中的样式值
offset 系列获得的数值是没有单位的	style.width 获得的是带有单位的字符串
offsetWidth 包含padding+border+width	style.width 获得不包含padding和border 的值
offsetWidth 等属性是只读属性，只能获取不能赋值	style.width 是可读写属性，可以获取也可以赋值
所以，我们想要获取元素大小位置，用offset更合适	所以，我们想要给元素更改值，则需要用style改变

案例一：计算鼠标在盒子内的坐标

// 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。
// 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）
// 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
// 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {// console.log(e.pageX);// console.log(e.pageY);// console.log(box.offsetLeft);var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})

案例二：拖动的模态框

// 1. 获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 2. 点击弹出层这个链接 link  让mask 和login 显示出来
link.addEventListener('click', function() {mask.style.display = 'block';login.style.display = 'block';
})
// 3. 点击 closeBtn 就隐藏 mask 和 login
closeBtn.addEventListener('click', function() {mask.style.display = 'none';login.style.display = 'none';
})
// 4. 开始拖拽
// (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function(e) {var x = e.pageX - login.offsetLeft;var y = e.pageY - login.offsetTop;// (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值document.addEventListener('mousemove', move)function move(e) {login.style.left = e.pageX - x + 'px';login.style.top = e.pageY - y + 'px';}// (3) 鼠标弹起，就让鼠标移动事件移除document.addEventListener('mouseup', function() {document.removeEventListener('mousemove', move);})
})

仿京东放大镜案例

①整个案例可以分为三个功能模块

②鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能

③黄色的遮挡层跟随鼠标功能。

④移动黄色遮挡层，大图片跟随移动功能。

window.addEventListener('load', function() {var preview_img = document.querySelector('.preview_img');var mask = document.querySelector('.mask');var big = document.querySelector('.big');// 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子//鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能//就是显示与隐藏preview_img.addEventListener('mouseover', function() {mask.style.display = 'block';big.style.display = 'block';})preview_img.addEventListener('mouseout', function() {mask.style.display = 'none';big.style.display = 'none';})// 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走//黄色的遮挡层跟随鼠标功能。//把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。//首先是获得鼠标在盒子的坐标。 //之后把数值给遮挡层做为left 和top值。//此时用到鼠标移动事件，但是还是在小图片盒子内移动。//发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。//遮挡层不能超出小图片盒子范围。//如果小于零，就把坐标设置为0//如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离//遮挡层的最大移动距离： 小图片盒子宽度 减去 遮挡层盒子宽度preview_img.addEventListener('mousemove', function(e) {// (1). 先计算出鼠标在盒子内的坐标var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;// console.log(x, y);// (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了// (3) 我们mask 移动的距离var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;// (4) 如果x 坐标小于了0 就让他停在0 的位置// 遮挡层的最大移动距离var maskMax = preview_img.offsetWidth - mask.offsetWidth;if (maskX <= 0) {maskX = 0;} else if (maskX >= maskMax) {maskX = maskMax;}if (maskY <= 0) {maskY = 0;} else if (maskY >= maskMax) {maskY = maskMax;}mask.style.left = maskX + 'px';mask.style.top = maskY + 'px';// 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离// 大图var bigIMg = document.querySelector('.bigImg');// 大图片最大移动距离var bigMax = bigIMg.offsetWidth - big.offsetWidth;// 大图片的移动距离 X Yvar bigX = maskX * bigMax / maskMax;var bigY = maskY * bigMax / maskMax;bigIMg.style.left = -bigX + 'px';bigIMg.style.top = -bigY + 'px';})})

client

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

淘宝flexible.js源码分析

(function flexible(window, document) {// 获取的html 的根元素var docEl = document.documentElement// dpr 物理像素比var dpr = window.devicePixelRatio || 1// adjust body font size  设置我们body 的字体大小function setBodyFontSize() {// 如果页面中有body 这个元素 就设置body的字体大小if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'} else {// 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body// 的字体大小document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10    设置我们html 元素的文字大小function setRemUnit() {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小window.addEventListener('resize', setRemUnit)// pageshow 是我们重新加载页面触发的事件window.addEventListener('pageshow', function(e) {// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小if (e.persisted) {setRemUnit()}})// detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法if (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))

下面三种情况都会刷新页面都会触发 load 事件。

a标签的超链接
F5或者刷新按钮（强制刷新）
前进后退按钮

但是，火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。所以此时后退按钮不能刷新页面。

此时可以使用 pageshow事件来触发。，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加。

scroll

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

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

仿淘宝固定侧边

原先侧边栏是绝对定位
当页面滚动到一定位置，侧边栏改为固定定位
页面继续滚动，会让返回顶部显示出来

分析：

①需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document

②滚动到某个位置，就是判断页面被卷去的上部值。

③页面被卷去的头部：可以通过window.pageYOffset 获得如果是被卷去的左侧 window.pageXOffset

④注意，元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部则是 window.pageYOffset

⑤其实这个值可以通过盒子的 offsetTop 可以得到，如果大于等于这个值，就可以让盒子固定定位了

//1. 获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 获取main 主体元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function() {// console.log(11);// window.pageYOffset 页面被卷去的头部// console.log(window.pageYOffset);// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位if (window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {sliderbar.style.position = 'absolute';sliderbar.style.top = '300px';}// 4. 当我们页面滚动到main盒子，就显示 goback模块if (window.pageYOffset >= mainTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}})

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

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

声明了 DTD，使用 document.documentElement.scrollTop
未声明 DTD，使用 document.body.scrollTop
新方法 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};
}

三大总结

他们主要用法：

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

mouseenter 和mouseover的区别

当鼠标移动到元素上时就会触发 mouseenter 事件，类似 mouseover，它们两者之间的差别是：

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发，之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开mouseleave 同样不会冒泡

动画函数封装

动画原理

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

实现步骤：

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

    <style>div {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div></div><script>// 动画原理// 1. 获得盒子当前位置  // 2. 让盒子在当前位置加上1个移动距离// 3. 利用定时器不断重复这个操作// 4. 加一个结束定时器的条件// 5. 注意此元素需要添加定位， 才能使用element.style.leftvar div = document.querySelector('div');var timer = setInterval(function() {if (div.offsetLeft >= 400) {// 停止动画 本质是停止定时器clearInterval(timer);}div.style.left = div.offsetLeft + 1 + 'px';}, 30);</script>

封装

1、函数需要传递2个参数，动画对象和移动到的距离。

2、如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

3、记得及时清除以前定时器，只保留一个即可。

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

核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长
停止的条件是：让当前盒子位置等于目标位置就停止定时器
注意我们步长值改为整数，不要出现小数问题

5、还可以添加回调函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}span {position: absolute;left: 0;top: 200px;display: block;width: 150px;height: 150px;background-color: purple;}</style>
</head><body><button class="btn500">点击夏雨荷到500</button><button class="btn800">点击夏雨荷到800</button><span>夏雨荷</span><script>// 缓动动画函数封装obj目标对象 target 目标位置// 思路：// 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。// 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长// 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器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();}}// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);}var span = document.querySelector('span');var btn500 = document.querySelector('.btn500');var btn800 = document.querySelector('.btn800');btn500.addEventListener('click', function() {// 调用函数animate(span, 500);})btn800.addEventListener('click', function() {// 调用函数animate(span, 800, function() {// alert('你好吗');span.style.backgroundColor = 'red';});})// 匀速动画 就是 盒子是当前的位置 +  固定的值 10 // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）</script>
</body></html>

引用animate动画函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.sliderbar {position: fixed;right: 0;bottom: 100px;width: 40px;height: 40px;text-align: center;line-height: 40px;cursor: pointer;color: #fff;}.con {position: absolute;left: 0;top: 0;width: 200px;height: 40px;background-color: purple;z-index: -1;}</style><script src="animate.js"></script>
</head><body><div class="sliderbar"><span>←</span><div class="con">问题反馈</div></div><script>// 1. 获取元素var sliderbar = document.querySelector('.sliderbar');var con = document.querySelector('.con');// 当我们鼠标经过 sliderbar 就会让 con这个盒子滑动到左侧// 当我们鼠标离开 sliderbar 就会让 con这个盒子滑动到右侧sliderbar.addEventListener('mouseenter', function() {// animate(obj, target, callback);animate(con, -160, function() {// 当我们动画执行完毕，就把 ← 改为 →sliderbar.children[0].innerHTML = '→';});})sliderbar.addEventListener('mouseleave', function() {// animate(obj, target, callback);animate(con, 0, function() {sliderbar.children[0].innerHTML = '←';});})</script>
</body></html>

仿淘宝返回顶部

滚动窗口至文档中的特定位置。

window.scroll(x, y)

注意，里面的x和y 不跟单位，直接写数字

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.slider-bar {position: absolute;left: 50%;top: 300px;margin-left: 600px;width: 45px;height: 130px;background-color: pink;}.w {width: 1200px;margin: 10px auto;}.header {height: 150px;background-color: purple;}.banner {height: 250px;background-color: skyblue;}.main {height: 1000px;background-color: yellowgreen;}span {display: none;position: absolute;bottom: 0;}</style>
</head><body><div class="slider-bar"><span class="goBack">返回顶部</span></div><div class="header w">头部区域</div><div class="banner w">banner区域</div><div class="main w">主体部分</div><script>//1. 获取元素var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面var bannerTop = banner.offsetTop// 当我们侧边栏固定定位之后应该变化的数值var sliderbarTop = sliderbar.offsetTop - bannerTop;// 获取main 主体元素var main = document.querySelector('.main');var goBack = document.querySelector('.goBack');var mainTop = main.offsetTop;// 2. 页面滚动事件 scrolldocument.addEventListener('scroll', function() {// console.log(11);// window.pageYOffset 页面被卷去的头部// console.log(window.pageYOffset);// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位if (window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {sliderbar.style.position = 'absolute';sliderbar.style.top = '300px';}// 4. 当我们页面滚动到main盒子，就显示 goback模块if (window.pageYOffset >= mainTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}})// 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方goBack.addEventListener('click', function() {// 里面的x和y 不跟单位的 直接写数字即可// window.scroll(0, 0);// 因为是窗口滚动 所以对象是windowanimate(window, 0);});// 动画函数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 - window.pageYOffset) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset == target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);// 回调函数写到定时器结束里面// if (callback) {//     // 调用函数//     callback();// }callback && callback();}// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10// obj.style.left = window.pageYOffset + step + 'px';window.scroll(0, window.pageYOffset + step);}, 15);}</script>
</body></html>

筋斗云案例

    <script src="animate.js"></script><script>window.addEventListener('load', function() {// 1. 获取元素var cloud = document.querySelector('.cloud');var c_nav = document.querySelector('.c-nav');var lis = c_nav.querySelectorAll('li');// 2. 给所有的小li绑定事件 // 这个current 做为筋斗云的起始位置var current = 0;for (var i = 0; i < lis.length; i++) {// (1) 鼠标经过把当前小li 的位置做为目标值lis[i].addEventListener('mouseenter', function() {animate(cloud, this.offsetLeft);});// (2) 鼠标离开就回到起始的位置 lis[i].addEventListener('mouseleave', function() {animate(cloud, current);});// (3) 当我们鼠标点击，就把当前位置做为目标值lis[i].addEventListener('click', function() {current = this.offsetLeft;});}})</script>

综合轮播图案例

功能需求：

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。

3.图片播放的同时，下面小圆圈模块跟随一起变化。

4.点击小圆圈，可以播放相应图片。

5.鼠标不经过轮播图，轮播图也会自动播放图片。

6.鼠标经过，轮播图模块，自动播放停止。

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。防止轮播图按钮连续点击造成播放过快。

核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

开始设置一个变量 var flag = true;
If(flag) {flag = false; do something} 关闭水龙头
利用回调函数动画执行完毕， flag = true 打开水龙头

window.addEventListener('load', function() {// 1. 获取元素var arrow_l = document.querySelector('.arrow-l');var arrow_r = document.querySelector('.arrow-r');var focus = document.querySelector('.focus');var focusWidth = focus.offsetWidth;// 2. 鼠标经过focus 就显示隐藏左右按钮focus.addEventListener('mouseenter', function() {arrow_l.style.display = 'block';arrow_r.style.display = 'block';clearInterval(timer);timer = null; // 清除定时器变量});focus.addEventListener('mouseleave', function() {arrow_l.style.display = 'none';arrow_r.style.display = 'none';timer = setInterval(function() {//手动调用点击事件arrow_r.click();}, 2000);});// 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈var ul = focus.querySelector('ul');var ol = focus.querySelector('.circle');// console.log(ul.children.length);for (var i = 0; i < ul.children.length; i++) {// 创建一个小li var li = document.createElement('li');// 记录当前小圆圈的索引号 通过自定义属性来做 li.setAttribute('index', i);// 把小li插入到ol 里面ol.appendChild(li);// 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件li.addEventListener('click', function() {// 干掉所有人 把所有的小li 清除 current 类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下我自己  当前的小li 设置current 类名this.className = 'current';// 5. 点击小圆圈，移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值// 当我们点击了某个小li 就拿到当前小li 的索引号var index = this.getAttribute('index');// 当我们点击了某个小li 就要把这个li 的索引号给 num  num = index;// 当我们点击了某个小li 就要把这个li 的索引号给 circle  circle = index;// num = circle = index;console.log(focusWidth);console.log(index);animate(ul, -index * focusWidth);})}// 把ol里面的第一个小li设置类名为 currentol.children[0].className = 'current';// 6. 克隆第一张图片(li)放到ul 最后面var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 7. 点击右侧按钮， 图片滚动一张var num = 0;// circle 控制小圆圈的播放var circle = 0;// flag 节流阀var flag = true;arrow_r.addEventListener('click', function() {if (flag) {flag = false; // 关闭节流阀// 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth, function() {flag = true; // 打开节流阀});// 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放circle++;// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原if (circle == ol.children.length) {circle = 0;}// 调用函数circleChange();}});// 9. 左侧按钮做法arrow_l.addEventListener('click', function() {if (flag) {flag = false;if (num == 0) {num = ul.children.length - 1;ul.style.left = -num * focusWidth + 'px';}num--;animate(ul, -num * focusWidth, function() {flag = true;});// 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放circle--;// 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）// if (circle < 0) {//     circle = ol.children.length - 1;// }circle = circle < 0 ? ol.children.length - 1 : circle;// 调用函数circleChange();}});function circleChange() {// 先清除其余小圆圈的current类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下当前的小圆圈的current类名ol.children[circle].className = 'current';}// 10. 自动播放轮播图var timer = setInterval(function() {//手动调用点击事件arrow_r.click();}, 2000);})

移动端网页特效

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

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

常见的触屏事件如下：

触屏touch事件	说明
touchsmart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

触屏事件对象：

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了变化的列表，从无到有，从有到无变化

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

移动端拖动元素

touchstart、touchmove、touchend 可以实现拖动元素
但是拖动元素需要当前手指的坐标值我们可以使用 targetTouches[0] 里面的pageX 和 pageY
移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三步曲：

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

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

（3）离开手指 touchend:

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

// （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
// （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
// （3） 离开手指 touchend:
var div = document.querySelector('div');
var startX = 0; //获取手指初始坐标
var startY = 0;
var x = 0; //获得盒子原来的位置
var y = 0;
div.addEventListener('touchstart', function(e) {//  获取手指初始坐标startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;x = this.offsetLeft;y = this.offsetTop;
});div.addEventListener('touchmove', function(e) {//  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标var moveX = e.targetTouches[0].pageX - startX;var moveY = e.targetTouches[0].pageY - startY;// 移动我们的盒子 盒子原来的位置 + 手指移动的距离this.style.left = x + moveX + 'px';this.style.top = y + moveY + 'px';e.preventDefault(); // 阻止屏幕滚动的默认行为
});

轮播图案例

window.addEventListener('load', function() {// alert(1);// 1. 获取元素 var focus = document.querySelector('.focus');var ul = focus.children[0];// 获得focus 的宽度var w = focus.offsetWidth;var ol = focus.children[1];// 2. 利用定时器自动轮播图图片var index = 0;var timer = setInterval(function() {index++;var translatex = -index * w;ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + translatex + 'px)';}, 2000);// 等着我们过渡完成之后，再去判断 监听过渡完成的事件 transitionend ul.addEventListener('transitionend', function() {// 无缝滚动if (index >= 3) {index = 0;// console.log(index);// 去掉过渡效果 这样让我们的ul 快速的跳到目标位置ul.style.transition = 'none';// 利用最新的索引号乘以宽度 去滚动图片var translatex = -index * w;ul.style.transform = 'translateX(' + translatex + 'px)';} else if (index < 0) {index = 2;ul.style.transition = 'none';// 利用最新的索引号乘以宽度 去滚动图片var translatex = -index * w;ul.style.transform = 'translateX(' + translatex + 'px)';}// 3. 小圆点跟随变化// 把ol里面li带有current类名的选出来去掉类名 removeol.querySelector('.current').classList.remove('current');// 让当前索引号 的小li 加上 current   addol.children[index].classList.add('current');});// 4. 手指滑动轮播图 // 触摸元素 touchstart： 获取手指初始坐标var startX = 0;var moveX = 0; // 后面我们会使用这个移动距离所以要定义一个全局变量var flag = false;ul.addEventListener('touchstart', function(e) {startX = e.targetTouches[0].pageX;// 手指触摸的时候就停止定时器clearInterval(timer);});// 移动手指 touchmove： 计算手指的滑动距离， 并且移动盒子ul.addEventListener('touchmove', function(e) {// 计算移动距离moveX = e.targetTouches[0].pageX - startX;// 移动盒子：  盒子原来的位置 + 手指移动的距离 var translatex = -index * w + moveX;// 手指拖动的时候，不需要动画效果所以要取消过渡效果ul.style.transition = 'none';ul.style.transform = 'translateX(' + translatex + 'px)';flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果e.preventDefault(); // 阻止滚动屏幕的行为});// 手指离开 根据移动距离去判断是回弹还是播放上一张下一张ul.addEventListener('touchend', function(e) {if (flag) {// (1) 如果移动距离大于50像素我们就播放上一张或者下一张if (Math.abs(moveX) > 50) {// 如果是右滑就是 播放上一张 moveX 是正值if (moveX > 0) {index--;} else {// 如果是左滑就是 播放下一张 moveX 是负值index++;}var translatex = -index * w;ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + translatex + 'px)';} else {// (2) 如果移动距离小于50像素我们就回弹var translatex = -index * w;ul.style.transition = 'all .1s';ul.style.transform = 'translateX(' + translatex + 'px)';}}// 手指离开的时候就重新开启定时器clearInterval(timer);timer = setInterval(function() {index++;var translatex = -index * w;ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + translatex + 'px)';}, 2000);});// 返回顶部模块制作var goBack = document.querySelector('.goBack');var nav = document.querySelector('nav');window.addEventListener('scroll', function() {if (window.pageYOffset >= nav.offsetTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}});goBack.addEventListener('click', function() {window.scroll(0, 0);})
})

classList使用

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

该属性用于在元素中添加，移除及切换 CSS 类。有以下方法【注意所有类名都不带点】：

**添加类：**element.classList.add（’类名’）；

移除类：element.classList.remove（’类名’）;

**切换类：**element.classList.toggle（’类名’）；

// classList 返回元素的类名
var div = document.querySelector('div');
// console.log(div.classList[1]);
// 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
div.classList.add('three');
// 2. 删除类名
div.classList.remove('one');
// 3. 切换类
var btn = document.querySelector('button');
btn.addEventListener('click', function() {document.body.classList.toggle('bg');
})

click延迟解决

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

解决方案：

禁用缩放。浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。

<meta name="viewport" content="user-scalable=no">

利用touch事件自己封装这个事件解决 300ms 延迟。

原理就是：

当我们手指触摸屏幕，记录当前触摸时间
当我们手指离开屏幕，用离开的时间减去触摸的时间
如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

//封装tap，解决click 300ms 延时
function tap (obj, callback) {var isMove = false;var startTime = 0; // 记录触摸时候的时间变量obj.addEventListener('touchstart', function (e) {startTime = Date.now(); // 记录触摸时间});obj.addEventListener('touchmove', function (e) {isMove = true;  // 看看是否有滑动，有滑动算拖拽，不算点击});obj.addEventListener('touchend', function (e) {if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指触摸和离开时间小于150ms 算点击callback && callback(); // 执行回调函数}isMove = false;  //  取反 重置startTime = 0;});
}
//调用  tap(div, function(){   // 执行代码  });

使用插件。 fastclick 插件解决 300ms 延迟。插件使用步骤：

确认插件实现的功能
去官网查看使用说明
下载插件
打开demo实例文件，查看需要引入的相关文件，并且引入
复制demo实例文件中的结构html，样式css以及js代码

本地存储

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

本地存储特性：

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

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

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

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

window.sessionStorage

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

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

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

功能	代码
存储	sessionStorage.setItem(key, value)
获取	sessionStorage.getItem(key)
删除	sessionStorage.removeItem(key)
删除所有	sessionStorage.clear()

window.localStorage

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

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

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

功能	代码
存储	localStorage.setItem(key, value)
获取	localStorage.getItem(key)
删除	localStorage.removeItem(key)
删除所有	localStorage.clear()

记住用户名案例

var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {username.value = localStorage.getItem('username');remember.checked = true;
}
remember.addEventListener('change', function() {if (this.checked) {localStorage.setItem('username', username.value)} else {localStorage.removeItem('username');}
})

Echarts

基本使用

步骤1:下载并引入echarts.js文件

步骤2∶准备一个具备大小的DOM容器

步骤3∶初始化echarts实例对象

步骤4∶指定配置项和数据(option)

步骤5∶将配置项设置给echarts实例对象

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>

数据可视化适配方案

flexible.js + rem单位 +flex布局

flexible.js检测浏览器宽度，修改html文字大小。
rem单位元素根据rem适配大小，配合cssrem插件
flex页面快速布局

//实现rem适配
@media screen and (max-width:1024px){html{font-size:42.66px !important;}
}@media screen and (min-width:1920px){html{font-size:80px !important;}
}

DOM与BOM与Echarts相关推荐

（九）JS-WEB-API（DOM、BOM、事件、Ajax、存储）【每个工程师必须熟练掌握的技能】
JS-WEB-API 提问 DOM BOM 事件 Ajax 存储从JS基础知识到JS-WEB-API JS基础知识 JS-WEB-API DOM(Document Object Model) DOM ...
提升对前端的认知，不得不了解Web API的DOM和BOM
了解Web API的DOM和BOM 引言正文一.DOM操作 1.DOM的本质 2.DOM节点操作 (1)property形式 (2)attribute形式 3.DOM结构操作 (1)新增/插入节点 ...
[html] DOM和BOM有什么区别？
[html] DOM和BOM有什么区别? BOM指浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,譬如可以弹出新的窗口 ...
html中dom和bom,区分BOM和DOM，区分window、document、html、body
JavaScript三大组成部分 1. ECMAScript ECMAScript是JavaScript的语法标准,由ECMA(欧洲计算机厂家协会)制定的. 2. BOM BOM即浏览器对象模型(br ...
DOM和BOM的区别
DOM和BOM的区别在浏览器中运行的JavaScript可以认为由三部分组成:ECMAScript描述了该语言的语法和基本对象,DOM文档对象模型描述了处理网页内容的方法和接口,BOM浏览器对象模型 ...
js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...
再谈BOM和DOM(1):BOM与DOM概述
JavaScript的实现包括以下3个部分: ECMAScript(核心):描述了JS的语法和基本对象. 浏览器对象模型(BOM):与浏览器交互的方法和接口文档对象模型 (DOM):处理网页内容的方 ...
什么是 DOM 和 BOM？
什么是 DOM 和 BOM? DOM 指的是文档对象模型,它指的是把文档当做一个对象,这个对象主要定义了处理网页内容的方法和接口. BOM 指的是浏览器对象模型,它指的是把浏览器当做一个对象来对待,这 ...
JavaScript实战操作（DOM，BOM）
JS语法页面文档对象模型浏览器对象模型 JS ECMAScript DOM BOM API 应用程序编程接口,就是一个工具,以便于能轻松实现想要完成的功能 Web API Web API是浏览器提 ...