一、DOM

1.获取元素

（一）根据ID获取，`getElementById('id')`

（二）根据标签名获取，`getElementsByTagName('li');`

返回一个伪数组，若无元素，返回一个空伪数组

1.下面的情况未指定父元素，将获取页面中的所有li标签

2.指定父元素

（三）获取元素

（四）获取特殊元素

2.事件

（一）执行步骤

案例

（二）常见鼠标事件

（三）操作元素

1.改变元素内容

方法

这两个方法也可以用来获取标签内容

两者的区别：
前者不识别HTML标签并去除HTML标签，

案例：

（1）获得系统时间

（2）不添加事件
先获取元素，后通过以下方式修改元素中的文本。

（3 ）添加事件

2.修改属性

案例：修改图片地址，以更改图片

3.修改表单文字内容

案例：密码框小眼睛

4.修改样式

案例：隐藏广告

        div {width: 300px;height: 300px;background-color: blue;}

    <div></div><script>var div = document.querySelector('div');div.onclick = function() {this.style.backgroundColor = 'skyblue';}</script>

案例：循环精灵图

目标效果

实现，精灵图上一个个图标从上往下排列，如下

首先编写 ul > li*12 的样式，设置背景图片为精灵图，通过 js 修改不同 li 的 background-position。

案例：显示隐藏文本内容

通过修改类修改样式

        .one {width: 300px;height: 300px;background-color: blue;}.two {width: 300px;height: 300px;background-color: skyblue;}

    <div class="one"></div><script>var one = document.querySelector('.one');one.onclick = function() {this.className = 'two';}</script>

div没有类名也可以用className添加类名。
可以添加多个类
this.className = 'one two';

案例：排他思想

案例：换肤效果

案例：表格隔行变色

案例：表单全选取消全选

5.获取属性值（不是样式）

（1）方法

（2）设置属性值

（3）移除属性

案例：

案例：tab栏切换

导航栏是一个模块，下面有5个div，初始时只有第一个div是display:block，其他div都是display:none。通过js使用排他思想修改display属性的值实现tab切换，用setAttribute给div设置一个索引号index，以使div和导航栏按键一一对应。

6.自定义属性

获取自定义属性

7.节点操作

（1）概述

（2）父节点parentNode

（3）子节点 childNodes
获取所有子节点，包括文本结点。

（4）子节点 children

1.获取所有元素子节点，实际开发中常用。
实际开发中获取第一个子节点和最后一个子节点的方法：

案例：下拉菜单

2.firstChild，lastChild
获取第一个和最后一个结点，包括文本结点。
3.firstElementChild，lastElementChild
获取第一个和最后一个元素子节点，找不到则返回null。
IE9以上支持。

（5）兄弟节点

1.下一个兄弟节点

（6）创建节点

三种创建节点方式比较：

创建之后要添加节点。

节点以追加的方式添加，在其他子元素的末尾

案例

案例：简单版发布留言

（7）删除节点

案例：

案例：留言删除

else的部分修改如下。

（8）复制节点

案例：动态生成表格，添加删除操作

    <table cellspacing="0"><thead><tr><th>name</th><th>subject</th><th>grade</th><th>option</th></tr></thead><tbody></tbody></table><script>var datas = [{name: '杰哥',subject: 'javascript',grade: 100}, {name: '杰哥2',subject: 'javascript',grade: 98}, {name: '杰哥3',subject: 'javascript',grade: 80}, {name: '杰哥4',subject: 'javascript',grade: 60}];var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) {var tr = document.createElement('tr');tbody.appendChild(tr);for (var k in datas[i]) {var td = document.createElement('td');td.innerHTML = datas[i][k];tr.appendChild(td);}var td = document.createElement('td');td.innerHTML = '<a herf="javascript:;">删除</a>';tr.appendChild(td);}//删除操作var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {tbody.removeChild(this.parentNode.parentNode);}}</script>

3.阻止链接跳转

把链接设置为<a herf="javascript:;"></a>

4.事件高级

（一）注册事件

1.方法监听注册方式

2.注册方式的区别

3.兼容性封装函数注册

一般用方法监听注册方式就可以。老版本用传统方式。

4.删除事件

应用：使事件只能进行一次。
传统方式：

方法监听注册方式：

（二）DOM事件流

1.概念

addEventListener 第三个参数为 false 时冒泡。

2.事件对象

function里添加参数event会自动生成。

3.事件对象的属性和方法

（1）e.target，e.currentTarget 和 this

e.target返回的是触发事件的对象。
this总是返回事件绑定的对象。
e.currentTarget和this相同。
例：

（2）阻止冒泡。e.stopPropagation()方法

以下页面点击son后由于冒泡，father和document的事件都会触发，顺序是son-》father-》document

使用方法

（3）事件委托

案例：

（4）禁用右键菜单

禁止复制文本，右键不弹出菜单。
ctrl + c 仍然可以复制。

（5）禁止选中文本

从而禁止复制。
然而F12键还是可以复制。

4.鼠标事件对象

（1）鼠标移动事件mousemove

<body><img src="吸烟.gif" alt=""><script>var pic = document.querySelector('img');document.addEventListener('mousemove', function(e) {var x = e.pageX;var y = e.pageY;console.log(x + ',' + y);pic.style.left = x + 'px';pic.style.top = y + 'px';});</script>
</body>

5.键盘事件

用addEventListener，不能加on。

<script>document.onkeyup = function() {console.log('up');}document.onkeydown = function() {console.log('down');}document.onkeypress = function() {console.log('press');}</script>

6.键盘事件对象

（1）e.keycode
可以得到按键的ASCII码。可以用来判断按下的键是哪个。

案例：按键，搜索框获得焦点

京东用了这种方式。

案例：京东物流查询

实现：

添加如下功能：

二、BOM

1.window对象

（一）window对象的常见事件

（1）窗口加载事件

可以将JavaScript放在任何地方，而不必一定要放在后面。

（2）调整窗口大小事件

案例：页面缩小隐藏div

（3）定时器

两种定时器，一种执行一次，一种间隔执行无数次。
第一种：

应用

案例：定时关闭广告

停止定时器

应用

第二种：

应用：

停止setInterval定时器：
clearInterval。

案例：倒计时

案例：手机验证码倒计时

（4）this的指向

this 的指向可以修改。

（5）js执行机制

案例：
以下代码先打印1、2再打印3.

案例：以下代码打印顺序为1、2、3。

原理如下

先执行执行栈中的同步任务。
回调函数被交给异步进程处理，满足触发条件（点击、时间到等）时添加到异步队列中。
执行完同步任务后，再将异步队列中的任务添加到执行栈，执行异步任务。
异步队列会被反复检查，事件循环。

2.location对象

（一）location的属性

案例：自动跳转页面

案例：数据在不同页面交互

Untitled页面

<body><form action="index.html">用户名：<input type="text" name="uname"><input type="submit" value="登录"></form><script></script>
</body>

index页面

<body><script>// console.log(location.search);var params = location.search.substr(1);var arr = params.split('=');console.log(arr[1]);</script>
</body>

（1）location对象的方法

应用：

3.navigator对象

4.history对象

应用：

三、网页特效

1.元素偏移量offset

父元素无定位则返回的是相对body的。

案例：获取鼠标在盒子内的坐标

案例：模态框拖拽

案例：仿京东放大镜效果

2.元素可视区client

pageshow事件

3.立即执行函数

4.元素滚动scroll

兼容：

应用：

案例：仿淘宝固定侧边栏

5.mouseenter和mouseover的区别

6.动画函数封装

案例：移动盒子

点击按钮移动盒子：
bug：一直点击按钮盒子速度会越来越快，原因和解决方法如下。

缓动动画

代码实现：
有bug，可能走不到目的地，因为步长可能是小数。解决方法是向上取整 Math.ceil()

在不同位置往返移动：

动画函数添加回调函数

将函数作为参数，在定时器后调用函数

在传参时加入（定义）函数

function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function() {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();}}obj.style.left = obj.offsetLeft + step + 'px';}, 15);
}

7.常见网页特效

（1）轮播图

效果

html

<body><div class="tb-promo"><!-- 按钮 --><a href="javascript:;" class="prev">&lt;</a><a href="javascript:;" class="next">></a><!-- 轮播图图片 --><ul class="focus"><li><a href="javascript:;"><img src="data:images/tudou.jpg" alt=""></a></li><li><a href="javascript:;"><img src="data:images/img.jpg" alt=""></a></li><li><a href="javascript:;"><img src="data:images/pig.jpg" alt=""></a></li><li><a href="javascript:;"><img src="data:images/tb.jpg" alt=""></a></li></ul><!-- 小圆圈 --><ul class="promo-nav"></ul></div>
</body>

window.addEventListener('load', function() {// 1.获取元素var prev = this.document.querySelector('.prev');var next = this.document.querySelector('.next');var focus = this.document.querySelector('.tb-promo');// 按键显示和隐藏focus.addEventListener('mouseenter', function() {prev.style.display = 'block';next.style.display = 'block';clearInterval(timer);timer = null;});focus.addEventListener('mouseleave', function() {prev.style.display = 'none';next.style.display = 'none';timer = setInterval(function() {next.click();}, 2000);});// 动态生成小圆圈var ul = this.document.querySelector('.focus');var ul2 = this.document.querySelector('.promo-nav');var focusWidth = focus.offsetWidth;var index = 0;for (var i = 0; i < ul.children.length; i++) {var li = this.document.createElement('li');// 给小圆圈一个索引号li.setAttribute('index', i);ul2.appendChild(li);// 小li的排他思想li.addEventListener('click', function() {for (var i = 0; i < ul2.children.length; i++) {ul2.children[i].className = '';}this.className = 'current';// 点击小圆圈，移动图片console.log(focusWidth);index = this.getAttribute('index');num = index;circle = index;animate(ul, -index * focusWidth);});}// 把第一个小li设置为橙色ul2.children[0].className = 'current';// 克隆第一张图片放到最后var first = ul.children[0].cloneNode(true);ul.appendChild(first);var num = 0;var circle = 0;// 点击右侧按钮，滑动图片next.addEventListener('click', function() {// 无缝滚动if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth);// 小圆圈跟随变化circle++;if (circle == ul2.children.length) {circle = 0;}for (var i = 0; i < ul2.children.length; i++) {ul2.children[i].className = '';}ul2.children[circle].className = 'current';});prev.addEventListener('click', function() {// 无缝滚动if (num == 0) {ul.style.left = -(ul.children.length - 1) * focusWidth + 'px';num = ul.children.length - 1;}num--;animate(ul, -num * focusWidth);// 小圆圈跟随变化circle--;if (circle < 0) {circle = ul2.children.length - 1;}for (var i = 0; i < ul2.children.length; i++) {ul2.children[i].className = '';}ul2.children[circle].className = 'current';})//自动播放var timer = setInterval(function() {next.click();}, 2000);})

1.节流阀

2.window.scroll(x,y)滚动到指定位置

x，y不用单位，为px

案例：返回顶部

 <style>* {margin: 0;padding: 0;}body {position: relative;}.first {background-color: blue;height: 200px;width: 80%;}.second {background-color: aqua;height: 300px;width: 80%;}.third {background-color: bisque;height: 600px;width: 80%;}.drive {position: fixed;top: 300px;left: 80%;width: 70px;height: 20px;background-color: cadetblue;}</style>
</head><body><div class="first"></div><div class="second"></div><div class="third"></div><div class="drive"><a href="javascript:;">返回顶部</a></div>
</body>
<script>function goBackTop(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function() {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();}}// obj.style.left = obj.offsetLeft + step + 'px';window.scroll(0, window.pageYOffset + step);}, 15);};var drive = document.querySelector('.drive');drive.addEventListener('click', function() {goBackTop(window, 0);});
</script>

案例：筋斗云

布局：

效果：
先获取元素

JavaScript进阶学习（Web APIs）相关推荐

javaScript进阶webAPI web前端api进阶DOM、BOM学习笔记day01
一.Web_API 基础认知 1. 作用和分类作用:使用js去操作html和浏览器分类:DOM (文档对象模型)BOM(浏览器对象模型) 2. DOM DOM(document Object Mo ...
JavaScript进阶学习（二）—— 基于原型链继承的js工具库的实现方法
文章来源:小青年原创发布时间:2016-07-03 关键词:JavaScript,原型链,jQuery类库转载需标注本文原始地址: http://zhaomenghuan.github.io... ...
【总结整理】javascript进阶学习（慕课网）
数组数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. 二维数组二维数组一维数组,我们看成一组盒子,每个盒子只能放一个内容. 一维数组的表示: ...
JavaScript进阶学习-webAPI（总结）
webAPI DOM 概念 JS分三个部分: ECMAScript标准:js的基本语法 DOM:Document object model -文档对象模型-操作页面的元素 BOM: Browser o ...
【JavaScript进阶学习】NodeJs语言的介绍及基本使用
NodeJs语言的介绍 NodeJs服务器语言,后端语言,采用了ECMAScript的语法,用来在服务器中开启服务,操作文件,处理路径,处理请求,发送数据等服务功能. NodeJs的解析器:V8引擎 ...
javascript进阶学习笔记笔记
基础知识: 1) 函数的声明方式:普通的声明方式: function myFun(m,n){ alert(m+n);} 使用变量初始化函数: Var myFun =function (m,n){ al ...
JavaScript基础和Web APIs两个阶段的关联性（1）
【JavaScript进阶学习】ajax
ajax ajax是前后端交互的重要手段,ajax:异步的js和服务端的数据.前端用来异步获取服务端数据,无刷新加载新数据(不阻塞浏览器其他任务的情况下获取到新数据) ajax并不是一个技术,多种技术 ...
【JavaScript进阶学习】jQuery的介绍
一.jQuery的介绍框架:对原生语言或一些常见的操作进行修改后,形成自身的语法特色.并对一些常规操作,提供便携性的使用,或快速实现某种某类某个完整项目的实现库:用来完善或补全当前项目或框架的某些 ...

JavaScript进阶学习（Web APIs）