JavaScript API

目标：

 能够说出 Web APIs 阶段 与 JavaScript 语法阶段的关联性
 能够说出什么是 API
 能够说出什么是 Web API

---

目录：

 Web APIs 和 JS 关联性
 API 和 Web API

---

Web APIS 和 JS 基础关联性

一、JS 的组成

---

二、JS 基础以及 Web APIs 阶段

---

JS 基础学习 ECMAScript 基础语法为后面做铺垫，Web APIs 是 JS 的应用，大量使用 JS 基础语法做交互效果。

---

API 和Web APIS

一、API

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

简单理解：API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

---

二、Web API

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

现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。

比如我们想要浏览器弹出一个警示框，直接使用 alert('弹出')

---

三、API 和 Web API总结

1. API 是我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现

2. Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。

3. Web API 一般都有输入和输出 (函数的传参和返回值)，Web API 很多都是方法 (函数)

4. 学习 Web API 可以结合前面学习内置对象方法的思路学习

---

目标：

 能够说出什么是 DOM
 能够获取页面元素
 能够给元素注册事件
 能够操作 DOM 元素的属性
 能够创建元素
 能够操作 DOM 节点

---

目录

 DOM 简介
 获取元素
 事件基础
 操作元素
 节点操作

---

DOM 简介

一、什么是 DOM

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

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

---

二、DOM 树

---

• 文档：一个页面就是一个文档，DOM 中使用 document 表示

• 元素：页面中的所有标签都是元素，DOM中使用 element表示

• 节点：网页中的所有内容都是节点 (标签、属性、文本、注释等)，DOM 中使用 rode 表示

DOM 把以上内容都看做是对象

---

获取元素

一、如何获取元素

DOM在我们实际开发中主要用来操作元素。

我们如何来获取页面中的元素呢？

• 根据 ID 获取

• 根据 标签名获取

• 通过 HTML5 新增的方法获取

• 特殊元素获取

---

二、根据 ID 获取

使用 getElementById()方法 可以 获取带有 ID 的元素对象。

 // 1. 因为我们文档页面从上往下加载，所以先得有标签，所以我们 script 写在标签的下面
 // 2. get 获得 element 元素 by 通过 驼峰命名法
 // 3. 参数 id 是大小写敏感的字符串
 // 4. 返回的是一个元素对象
 ​
     <div id='time'>2020-10-01</div>
     <script>
         var timer = document.getElementById('time');
         console.log(timer);     //<div id='time'>2020-10-01</div>
         console.log(typeof timer);      // object   
 // 5. console.dir() 打印我们返回的元素对象，更好的查看里面的属性和方法
         console.dir(timer);
     </script>
 ​

---

三、根据标签名获取

使用 getElementsByTagName() 方法 返回 带有指定标签名的对象集合。(Tag 标签)。

 <ul>
     <li>知否知否,不知绿肥红瘦1</li>
     <li>知否知否,不知绿肥红瘦2</li>
     <li>知否知否,不知绿肥红瘦2</li>
 </ul>
 <script>
     // 返回的是获取过来元素对象的集合，以伪数组的形式存储的
     var lis = document.getElementsByTagName('li');
     console.log(lis);
     console.log(lis[0]);
     // 如果页面中只有一个 li ，返回的还是伪数组的形式
     // 如果页面中没有这个元素 ，返回的是空的伪数组的形式

还可以 获取某个元素 (父元素) 内部所有指定标签名的子元素。

 element.getElementsByTagName('标签名');

注意：父元素必须是单个对象 (必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

 // 方法1:
 <ol>
     <li>知否知否,不知绿肥红瘦1</li>
     <li>知否知否,不知绿肥红瘦2</li>
     <li>知否知否,不知绿肥红瘦2</li>
 </ol>
 <script>
 var ols = document.getElementsByTagName('ol');
 console.log(ols[0].getElementsByTagName('li'));
 </script>

// 方法2
<ol id="ol">		
	<li>知否知否,不知绿肥红瘦1</li>
	<li>知否知否,不知绿肥红瘦2</li>
	<li>知否知否,不知绿肥红瘦2</li>
</ol>
<script>
	var ols = document.getElementById('ol');
	console.log(ol.getElementsByTagName('li'));
</script>

四、HTML5 新增方法获取

1. document.getElementsByClassName('类名');	// 根据类名返回元素对象集合

2. document.querySelector('选择器');		// 根据指定选择器返回第一个元素对象

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
	<ul>
		<li>首页</li>
		<li>产品</li>
	</ul>
</div>
<script>

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

3.document.querySelectorAll('选择器'); 

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
	<ul>
		<li>首页</li>
		<li>产品</li>
	</ul>
</div>
<script>
var allBox = document.querySelectorAll('.box');
console.log(allbox); 
</script>

五、获取特殊元素

// 获取body元素
var bodyEle = document.body;		// 返回 body 元素对象

// 获取html元素
var htmlEle = document.documentElement;		// 返回html元素对象

---

事件基础

一、事件概述

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

简单理解：触发 --- 响应机制

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

// 点击一个按钮，弹出对话框
// 1.事件是有三部分组成	事件源，事件类型，事件处理程序
<button id="btn">唐伯虎</button>
<script>
	// 1.事件源，事件被触发的对象
	var btn = document.getElementById('btn');
	// 2.事件类型，如何触发，什么事件，比如鼠标点击(onclick),还是鼠标经过，还是键盘按下
	// 3.事件处理程序，通过一个函数赋值的方式完成
	btn.onclick = function(){
		alert('点秋香');
	}
</script>

---

二、执行事件步骤

1. 获取事件源

2. 注册事件 (绑定事件)

3. 添加事件处理程序 (采取函数赋值形式)

<div>人参</div>
// 执行事件步骤
// 1.获取事件源
var div = document.querySelector('div')
// 2.注册事件
div.onclick
// 3.添加事件处理程序
div.onclick = function(){}

---

操作元素

JavaScript的DOM操作可以 改变网页内容、结构 和 样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。

一、改变元素内容

element.innerText

innerText 从起始位置到终止位置的内容，但它去除 html 标签，同时去掉空格和换行。

element.innerHTML

innerHTML 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

  <button id="btn">显示当前时间</button>
  <div id="newTime">某个时间</div>
<script>
	// 当我们点击了按钮，div里面的文字会发生变化
	var btn = document.getElementById('btn');
	var newTime = document.getElementById('newTime');
	btn.onclick = function(){
		newTime.innerText = getNewTime();
	}

  function getNewTime(){
	var date = new Date();
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var dates = date.getDate();
	var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
	var day = date.getDay();
	return('今天是:' +year+ '年' + month + '月' + dates + '日' + arr[day]);
 }
</script>

<div></div>
// innerText 和 innerHTML 的区别
// innerText 不识别 html 标签,去除空格和换行
var div = document.querySelector('div');
// <strong>今天是:</strong>2020-10-01
div.innerText = '<strong>今天是:</strong>2020-10-01';	
	
// **今天是**:2020-10-01
div.innerHTML = '<strong>今天是:</strong>2020-10-01';	

---

二、常用元素的属性

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

---

<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="../photo/ldh.jpg"
<scrip>
	var ldh = document.getElementById('ldh');
	var zxy = document.getElementById('zxy');
	var img = document.querySelector('img');
	zxy.onclick = function(){
		img.src ="../photo/zxy.jpeg"
	}
</script>

---

案例 ：分时显示不同图片，显示不同问候语

根据不同时间，页面显示不同图片，同时显示不同的问候语。

如果上午时间打开页面，显示上午好，显示上午的图片。

如果下午时间打开页面，显示下午好，显示下午的图片。

<div>上午好</div> // 显示问候语
<img src="../photo/morning.jpg" title="上午好">
<script>
    var img = document.querySelector('img');
    var div = document.querySelector('div');
    // 得到当前的小时数
    var date = new Date();
    var h = date.getHours();
    // 判断小时数改变图片和文字信息
    if (h < 12) {
        img.src = '../photo/morning.jpg';
        img.title = '上午好，记得吃早餐';
    } else if (h < 18) {
        img.src = '../photo/afternoon.jpeg';
        img.title = '下午好，你今天努力了吗?';
    } else {
        img.src = '../photo/evening.jpg';
        img.title = '晚上好，保证精神,早点休息';
    }
</script>

---

三、表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性

type、value、checked、selected (下拉列表)、disabled (禁用某个表单)

<button>按钮</button>
<input type="text" value="输入内容">
<script>
	var input = document.querySelector('input');
	var btn = document.querySelector('button');
	btn.onclick = function(){
		input.value = 'Nick to meet you';
		// 如果想要某个表单被禁用，不能再点击 disabled，我们想要这个按钮button禁用
		btn.disabled = true;
	}
</script>

---

案例：仿京东显示密码

点击按钮将密码框切换为文本框，并可以查看密码明文。

// 1.核心思路：点击按钮，把密码框类型改为文本框就可以看见里面的密码
// 2.一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框。
// 3.算法，利用一个 flag 变量，来判断 flag 的值，如果是1就切换为文本框，
// flag设置为0，如果为0就切换为密码框，flag设置为1.

<input type="password" value="请输入密码" />
<button id="btn">查看密码</button>
<script>
    var flag = 0;
    var input = document.querySelector('input');
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        // 点击一次之后，flag一定要变化
        if (flag == 0) {
            input.type = "text";
            flag = 1;
        } else {
            input.type = 'password';
            flag = 0;
        }
    }
</script>

---

四、样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

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

使用 style 修改样式属性

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<body>
    <div></div>
    <script>
        // 1.获取元素
        var div = document.querySelector('div');
        // 2.注册事件，处理程序
        div.onclick = function () {
            // div.style里面的属性采取驼峰命名法
            this.style.backgroundColor = 'purple';
            this.style.width = '240px';
        }
    </script>
</body>

注意：

• JS 里面的样式采取驼峰命名法，比如 fontSize、backgroundColor

• JS 修改 style 样式操作，产生的是行内样式，css权重比较高。

---

使用className修改样式属性

<style>
    .first {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .change {
        background-color: red;
        color: #fff;
        font-size: 25px;
        margin-top: 100px;
    }
</style>

<body>
    <div class="first">文本</div>
    <script>
        var test = document.querySelector('div');
        test.onclick = function () {
            this.className = 'first change';
        }
    </script>
</body>

注意：

• 如果样式修改较多，可以采取操作类名方式更改元素样式。

• class 因为是保留字，因此使用 className 来操作元素类名属性

• className 会直接更改元素的类名，会覆盖原先的类名。

---

案例：关闭二维码

• 核心思路：利用样式的显示和隐藏完成，display:none 隐藏元素，display:block显示元素

• 点击按钮，就让这个二维码盒子隐藏起来即可

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<div></div>
<script>
    // 1.获取元素
    var div = document.querySelector('div');
    // 2.注册事件，处理程序
    div.onclick = function () {
        div.style.display = 'none';
    }
</script>

---

案例：循环精灵图背景

• 首先精灵图图片排列是有规律的

• 核心思路：利用 for 循环 修改精灵图片的背景位置 background-position

• 让循环里面的 i 索引号 *44 就是每个图片的 y 坐标

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    // 1.获取元素，所有的小li
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        // 让索引号乘于 44，就是每个 li 的背景 y坐标，index 就是我们的y坐标
        var index = i * 44;
        // lis[i].style.backgroundPosition = '0 -44px';
        lis[i].style.backgroundPosition = '0 -' + index + 'px';
    }
</script>

案例：显示隐藏文本框内容

当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。

---

案例分析：

• 首先表单需要2个新事件，获得焦点 onfocus 失去焦点 onblur.

• 如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容

<input type="text" value="手机" />
<script>
    var input = document.querySelector('input');
    input.onfocus = function () {
        if (this.value === '手机') {
            this.value = '';
        }
    }
    input.onblur = function () {
        if (this.value === '') {
            this.value = '手机';
        }
    }
</script>

五、排他思想

---

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

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

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

<div>
	<button>按钮1</button>
	<button>按钮1</button>
	<button>按钮1</button>
</div>
<script>
	var btns = document.getElementsByTagName('button');
	for (var i = 0; i< btn.length; i++){
		btns[i].onclick = function(){
			// (1) 我们先把所有的按钮背景颜色去掉
			// (2) 然后才让当前的元素背景颜色为 pink
			for (var i = 0; i< btn.length; i++){
				btns[i].style.backgroundColor = '';
			}
			this.style.backgroundColor = 'pink';
		}
	}
</script>

---

案例：百度换肤

• 核心算法：把当前图片的 src 路径取过来，给body做背景即可

<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background: url(../photo/00.jpg) no-repeat center top;
    }

    li {
        list-style: none;
    }

    .baidu {
        overflow: hidden;
        margin: 100px auto;
        background-color: #fff;
        width: 410px;
        padding-top: 3px;
    }

    .baidu li {
        float: left;
        margin: 0 1px;
        cursor: pointer;
    }

    .baidu img {
        width: 100px
    }
</style>

---

<ul class="baidu">
    <li><img src='../photo/01.jpg'></li>
    <li><img src='../photo/02.jpg'></li>
    <li><img src='../photo/03.jpg'></li>
</ul>
<script>
    var imgs = document.querySelector('.baidu').querySelectorAll('img');
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function () {
            document.body.style.backgroundImage = 'url(' + this.src + ')';
        }
    }
</script>

案例：表格隔行换色

ES6新方法：

<style>
	a:action,
	a:focus {
		background: #05943c;
		color: #fff;
	}
</style>	

---

案例分析：

• 用到新的鼠标事件，鼠标经过 onmouseover，鼠标离开 onmouseout

• 核心思路：鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色

• 注意：第一行 (thead 里面的行) 不需要变换颜色，因此我们获取的是 tbody里面的行。

<table>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    <tbody>
        <tr>
            <td>01</td>
            <td>小李</td>
            <td>17</td>
        </tr>

        <tr>
            <td>02</td>
            <td>小张</td>
            <td>17</td>
        </tr>

        <tr>
            <td>03</td>
            <td>小黄</td>
            <td>17</td>
        </tr>
    </tbody>
    </thead>
</table>
<script>
    var trs = document.querySelector('tbody').querySelectorAll('tr');
    for (var i = 0; i < trs.length; i++) {
        trs[i].onmouseover = function () {
            this.style.backgroundColor = 'red';
        }
        trs[i].onmouseout = function () {
            this.style.backgroundColor = '';
        }
    }
</script>

---

案例：表单全选取消全选案例

案例分析：

• 全选和取消全选做法：让下面所有复选框的 checked 属性 (选中状态)，跟随全选按钮即可。

<div class="wrap">
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>商品</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iphone13</td>
                <td>8000</td>
            </tr>

            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>ipad Pro</td>
                <td>4000</td>
            </tr>

            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>ipad Air</td>
                <td>2000</td>
            </tr>

            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    // 1.让下面所有复选框的checked属性 (选中状态) 跟随 全选按钮
    var j_cbAll = document.getElementById('j_cbAll');	// 全选按钮
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');	// 下面所有的复选框
    j_cbAll.onclick = function () {
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].checked = this.checked;
        }
    }
    // 2.下面复选框需要全部选中，上面全选才能选中做法: 给下面所有复选框绑定点击事件，每次点击，都要徐娜和
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function () {
            var flag = true;
            // 每次点击下面的复选框都要循环检查这4个小按钮是否全部选中
            for (var i = 0; i < j_tbs.length; i++) {
                if (!j_tbs[i].checked) {
                    flag = false;
                }
            }
            j_cbAll.checked = flag;
        }
    }
</script>

---

六、自定义属性的操作

1. 获取属性值

• element.属性 // 获取属性值.

• element.getAttribute('属性');

<div id="demo" index = "1" class="nav"></div>
<script>
	var div = document.querySelector('div');
	console.log(div.id);	// demo
	console.log(div.getAttribute('id'));	// demo
</script>

区别：

• element.属性 获取内置属性值 (元素本身自带的属性)

• element.getAttribute('属性')；主要获取自定义的属性 (标准) 我们程序员自定义的属性。

---

2. 设置属性值

• element.属性 = '值'; // 设置内置属性值。

• element.setAttribute('属性','值'); // 主要针对于自定义属性

<div id="demo" index = "1" class="nav"></div>
<script>
var div = document.querySelector('div');
// 设置元素属性值
// (1) element.属性 = '值';
div.id = 'test';
div.className = 'navs';

// (2) element.setAttribute('属性','值');
div.setAttribute('index',2);
div.setAttribute('class','footer');
</script>

---

3. 移除属性

• element.removeAttibute('属性');

<div id="demo" index = "1" class="nav"></div>

<script>
	div.removeAttibute('index');
</script>

案例：tab栏切换 (重点案例)

当鼠标点击上面相应的选项卡 (tab)，下面内容跟随变化

---

案例分析：

• Tab 栏切换有2个大的模块

• 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变 (排他思想) 修改类名的方式。

• 下面的模块内容，会跟随上面的选项卡变化，所以下面模块变化写到点击事件里面。

• 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。

• 核心思路：给上面的 tab_list 里面的所有小 li 添加自定义属性，属性值从0开始编号。

• 当我们点击 tab_list 里面的某个小 li，让tab_con里面对应序号的内容显示，其余隐藏 (排他思想)

<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style-type: none;
    }

    .tab {
        width: 978px;
        margin: 100px auto;
    }

    .tab_list {
        height: 39px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    .tab_list li {
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
    }

    .tab_list .current {
        background-color: #c81623;
        color: #fff;
    }

    .item_info {
        padding: 20px 0 0 20px;
    }

    .item {
        display: none;
    }

    /* .item_current {
            display: block;
        } */
</style>

---

<script>
    // 获取元素
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var tab_con = document.querySelector('.tab_con');
    var divs = tab_con.querySelectorAll('div');
    // for循环绑定点击事件
    for (var i = 0; i < lis.length; i++) {
        // 开始给5个小li设置索引号  自定义属性
        lis[i].setAttribute('index', i);
        lis[i].onclick = function () {
            // 1. 以上的模块选项卡,点击某一个,当前背景颜色变为红色,其余不变(排他思想)   修改类名的方法
            // 干掉所有人 其余的li清除 class 这个类
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';

            }
            // 留下自己 把当前的 class 改为 current
            this.className = 'current';
            // 2. 点击模块选项卡,下面显示对应的内容
            var index = this.getAttribute('index');
            // 干掉所有人 把下面所有的内容隐藏
            for (var i = 0; i < divs.length; i++) {
                divs[i].style.display = 'none';
            }
            // 留下自己 再把和当前点击相对应的内容显示出来
            // this.getAttribute('index') 获取当前的index值 也就是当前点击元素的索引号

            divs[index].style.display = 'block';
        }
    }
</script>

---

节点操作

一、为什么学节点操作

获取元素通常使用两种方式：

---

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单

---

二、节点概述

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

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

---

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

• 元素节点 nodeType 为1

• 属性节点=nodeType 为2

• 文本节点 nodeType 为3 (文本节点包含文字、空格、换行等)

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

---

三、节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

(1) 父级节点

node.parentNode

<div class="box">
	<span class="erweima">x</span>
</div>	
<script>
	// 1.父节点 parentNode
	var erweima = document.querySelector('.erweima');
	// 得到的是离元素最近的父级节点，如果找不到父节点就返回为空
	console.log(erweima.parentNode);
</script>

---

(2) 子节点

parentNode.childNodes	// 标准

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

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

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes.

<ul>
	<li>我是li</li>
	<li>我是li</li>
	<li>我是li</li>
</ul>

<script>
	// DOM提供的方法(API)获取
	var ul = document.querySelector('ul');
	// 1.子节点 childNodes 所有的子节点包含元素节点、文本节点等
	for (var i = 0; i < ul.childNodes.length; i++){
		if (ul.childNodes[i].nodeType == 1){
			console.log(ul.childNodes[i]);
		}
	}
</script>

---

parentNode.children		// 非标准

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 (这个是我们重点掌握的)。

虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。

<ul>
	<li>我是li</li>
	<li>我是li</li>
	<li>我是li</li>
</ul>

<script>
	// DOM提供的方法(API)获取
	var ul = document.querySelector('ul');
	console.log(ul.children);
</script>

parentNode.firstChild	// 获取第一个子节点，不管是文本节点还是元素节点

fisrtChild返回第一个子节点，找不到则返回 null。同样，也是包含所有的节点。

parentNode.lastChild	// 获取最后一个子节点，不管是文本节点还是元素节点

lastChild返回最后一个子节点，找不到则返回 null。同样，也是包含所有的节点。

<ul>
	<li>我是li</li>
	<li>我是li</li>
	<li>我是li</li>
</ul>

<script>
	// DOM提供的方法(API)获取
	var ul = document.querySelector('ul');
	//  获取第一个子节点
	console.log(ul.firstChild)
	//  获取最后一个子节点
	console.log(ul.lastChild);
</script>

parentNode.firstElementChild	// 返回第一个子元素节点,找不到则返回 null
parentNode.lastElementChild		// 返回最一个子元素节点,找不到则返回 null

注意：这两个方法有兼容性问题，IE9以上才支持。

---

<ol>
	<li>我是li</li>
	<li>我是li</li>
	<li>我是li</li>
</ol>

// 实际开发的写法，既没有兼容性问题又返回第一个子元素节点
console.log(ol.children[0]);	// 返回第一个子元素节点
console.log(ol.children[ol.children.length - 1]);	// 返回最后一个子元素节点

---

案例：新浪下拉菜单

案例分析：

• 导航栏里面的 li 都要有鼠标经过效果，所以需要循环注册鼠标事件

• 核心原理：当鼠标经过 li 里面的第二个孩子 ul 显示，当鼠标离开，则 ul 隐藏

<style>
    ul,
    li {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

    a {
        text-decoration: none;
        color: #333;
    }

    .box>li {
        float: left;
        height: 25px;
        width: 60px;
        padding: 4px;
        font-size: 12px;
        text-align: center;
        line-height: 25px;
    }

    .box ul {
        height: 100px;
        width: 68px;
    }

    .box ul li {
        padding: 4px;
        border: 1px solid pink;
    }

    .box ul li:first-child {
        border-top: 0;
    }

    .box ul li:hover {
        background-color: pink;
    }

    .box a:hover {
        color: rgb(189, 27, 27);
    }

    /* 让下拉列表先隐藏 */
    .box ul {
        display: none;
    }
</style>
    
    <ul class="box">
    <li>
        <a href="#">微博</a>
        <ul>
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
    <li>
        <a href="#">博客</a>
        <ul>
            <li><a href="#">个人中心</a></li>
            <li><a href="#">写新博客</a></li>
            <li><a href="#">其他</a></li>
        </ul>
    </li>
    <li>
        <a href="#">邮箱</a>
        <ul>
            <li><a href="#">收件箱</a></li>
            <li><a href="#">发件箱</a></li>
            <li><a href="#">消息</a></li>
        </ul>
    </li>
</ul>

<script>
    //获取元素
    var box = document.querySelector('.box');
    var title = box.children;

    for (var i = 0; i < title.length; i++) {
        title[i].onmouseover = function () {
            this.children[1].style.display = 'block';
        }

        title[i].onmouseout = function () {
            this.children[1].style.display = 'none';
        }

    }
</script>

---

(3) 兄弟节点

node.previousSibing

previousSibing 返回当前元素上一个兄弟节点，找不到则返回 null。同样，也是包含所有的节点。

node.nextSibling

nextSibling 返回当前元素的下一个兄弟节点，找不到则返回 null。同样，也是包含所有的节点。

<div>我是div</div>
<span>我是span</span>
<script>
	var div = document.querySelector('div');
	// nextSibing 下一个兄弟节点，包含元素节点或者文本节点
	console.log(div.nextSibling);
	console.log(div.previousSibling);
</script>

node.nextElementSibling

nextElementSibing 返回当前元素的下一个兄弟元素节点，找不到则返回 null.

node.previousElementSibling

previousElementSibling 返回当前元素的上一个兄弟元素节点，找不到则返回 null.

<div>我是div</div>
<span>我是span</span>
<script>
	var div = document.querySelector('div');
	// nextSibing 下一个兄弟节点，包含元素节点或者文本节点
	console.log(div.nextElementSibling);
	console.log(div.previousElementSibling);
</script>

注意：这两个方法有兼容性问题，IE9以上才支持。

---

四、节点的增删改

(1) 创建节点

document.createElement('tagName');

document.createElement() 方法 创建tagName 指定的 HTML 元素。因为这些元素原本不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

<ul></ul>
<script>
	// 创建元素节点
	var lis = document.createElement('li');
	
</script>

(2) 添加节点

添加节点的两种方式：

1. node.appendChild(元素)

2. node.insertBefore(child，指定元素位置)

node.appendChild(child);

node.appendChild() 方法 将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。

<ul></ul>
<script>
// 1.创建元素节点
var lis = document.createElement('li');
// 2.添加节点 node.appendChild(child); node父级 child是子级
var ul = document.querySelector('ul');
ul.appendChild(lis);
</script>

node.insertBefore(child,指定位置)

node.insertBefore() 方法 将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

<ul></ul>
<script>
// 1.创建元素节点
var lis = document.createElement('li');
// 2.添加节点 node.appendChild(child); node父级 child是子级
var ul = document.querySelector('ul');
ul.insertBefore(lis,ul.children[0]);
</script>

案例：简单版发表留言案例

案例分析：

• 核心思路：点击按钮之后，就动态创建一个 li，添加到 ul 里面。

• 创建 li 的同时，把文本域里面的值通过 li.innerHTML赋值给 li

• 如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore

<style>
li {
margin: 0px;
padding: 0px;
/* list-style: none; */
}

body {
position: relative;
}

textarea {
/* 大小不能拖动 */
resize: none;
/* 点击后 边框不变色 */
outline: none;
margin-left: 30px;
}

button {
position: absolute;
top: -3px;
left: 227px;
height: 83px;

}
</style>

<textarea name="" id="" cols="30" rows="5"></textarea>
<button>发布</button>
<ul></ul>
<script>
	var ul = document.querySelector('ul');
	var btn = document.querySelector('button');
	var text = document.querySelector('textarea');
	btn.onclick = function(){
		if (text.value == ''){
			alert('你没有输入内容');
			return false;
		}else{
		// (1) 创建元素
		var lis = document.createElement('li');
		lis.innerHTML = text.value;
		// (2) 添加元素
		ul.insertBefore(lis,ul.children[0]);
	}
}
</script>

---

(3) 删除节点

node.removeChild(child);

node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。

<button>删除</button>
<ul>
	<li>张三</li>
	<li>李四</li>
	<li>王五</li>
</ul>
<script>
	// (1) 获取元素
	var btn = document.querySelector('button');
	var ul = document.querySelector('ul');
	// (2) 删除元素
	btn.onclick = function(){
    	if (ul.children.length == 0){
    		this.disabled = true;
    	}else{
    		ul.removeChild(ul.children[0]);
    	}
    }
</script>

---

案例：删除留言

案例分析：

• 当我们把文本域里面的值赋值给 li 的时候，多添加一个删除的链接

• 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li.

• 组织链接跳转需要添加 javascript:void(0); 或者 javascript:;

<style>
    li {
        margin: 0px;
        padding: 0px;
        /* list-style: none; */
    }

    body {
        position: relative;
    }

    textarea {
        /* 大小不能拖动 */
        resize: none;
        /* 点击后 边框不变色 */
        outline: none;
        margin-left: 30px;
    }

    button {
        position: absolute;
        top: -3px;
        left: 227px;
        height: 83px;

    }
</style>

<textarea name="" id="" cols="30" rows="5"></textarea>
<button>发布</button>
<ul></ul>
<script>
    var ul = document.querySelector('ul');
    var btn = document.querySelector('button');
    var text = document.querySelector('textarea');
    btn.onclick = function () {
        if (text.value == '') {
            alert('你没有输入内容');
            return false;
        } else {
            // (1) 创建元素
            var lis = document.createElement('li');
            lis.innerHTML = text.value + "<a href = ' javascript:;'>删除</a>";
            // (2) 添加元素
            ul.insertBefore(lis, ul.children[0]);
            // (3) 删除元素，删除的是当前链接 li 
            var as = document.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function () {
    // node.removeChild(child);	删除的是li，当前a所在的li (this.parentNode)
                    ul.removeChild(this.parentNode);
                }
            }
        }
    }
</script>

---

(4) 复制节点 (克隆节点)

node.cloneNode()

node.cloneNode() 方法返回 调用该方法的节点的一个副本。也称伪克隆节点/拷贝节点.

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    // 1.node.cloneNode();括号里面为空或者里面是false(浅拷贝)
    // 2.node.cloneNode(true);括号里面是true(深拷贝)
    var lis = ul.children[0].cloneNode();
    ul.appendChild(lis);
</script>

注意：

1. 如果括号参数为空或者为false，则是浅拷贝，即只克隆标签，不克隆里面的内容。

2. 如果括号参数为 true，则是深度拷贝，会复制标签以及里面的所有的内容。

---

案例：动态生成表格

案例分析：

• 因为里面的学生数据是动态的，我们需要 js 动态生成。这里我们模拟数据，自己定义好数据。数据我们采集对象形式存储。

<style>
    table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
    }

    td,
    th {
        border: 1px solid #333;
    }

    thead tr {
        height: 40px;
        background-color: #ccc;
    }
</style>

---

<table cellspacing="0">
    <thead>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
    </thead>
</table>
<script>
    // 1.先去准备好学生的数据 用对象 套了数组 
    // 后续要添加新的行直接在数组中添加
    var datas = [{
        name: '魏璎珞',
        subject: 'JavaScript',
        score: 100
    }, {
        name: '弘历',
        subject: 'JavaScript',
        score: 98
    }, {
        name: '傅恒',
        subject: 'JavaScript',
        score: 99
    }, {
        name: '明玉',
        subject: 'JavaScript',
        score: 88
    }, {
        name: '大猪蹄子',
        subject: 'JavaScript',
        score: 0
    }];
    // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
    var tbody = document.querySelector('tbody');
    for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
        // 1. 创建 tr行
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        // 2.行里面创建单元格(跟数据有关系的3个单元格) 
        // td 单元格的数量取决于每个对象里面的属性个数,for循环遍历对象datas[i] 
        for (var k in datas[i]) { // 里面的for循环管列 td
            // 创建单元格 
            var td = document.createElement('td');
            // 把对象里面的属性值 datas[i][k] 给 td  
            // console.log(datas[i][k]);
            td.innerHTML = datas[i][k];
            tr.appendChild(td);
        }
        // 3. 创建有删除2个字的单元格 
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">删除 </a>';
        tr.appendChild(td);

    }
    // 4. 表格全部生成完毕后   删除操作 开始 
    var as = document.querySelectorAll('a');
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
            tbody.removeChild(this.parentNode.parentNode)
        }
    }
    // for(var k in obj) {
    //     k 得到的是属性名
    //     obj[k] 得到是属性值
    // }
</script>

---

H5 自定义属性规定

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

自定义属性获取是通过 getAttribut('属性')获取。

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

H5给我们新增了自定义属性：

一、设置 H5 自定义属性

H5 规定自定义属性 data-开头做为属性名并赋值。

比如 < div data-index = '1'></ div>

或者使用 JS 设置

element.setAttribute('data-index',2);

---

二、获取 H5 自定义属性

1. 兼容性获取 element.getAttribute ('data-index');

2. H5新增 element.dataset.index 或者 element.dataset['index']

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

---

目标：

能够写出元素注册事件的两种方式
能够说出删除事件的两种方式
能够说出 DOM 事件流的三个阶段
能够利用事件对象完成跟踪鼠标案例
能封装阻止冒泡的兼容性函数
能够说出事件委托的原理
能够说出常用的鼠标和键盘事件

---

目录：

注册事件 (绑定事件)
删除事件 (解绑事件)
DOM 事件流
事件对象
阻止事件冒泡
事件委托 (代理、委派)
常用的鼠标事件
常用的键盘事件

---

事件高级

---

注册事件

给元素添加事件，称为注册事件或者绑定事件。

一、注册事件两种方式

注册事件有两种方式：传统方式和方法监听注册方式

---

二、传统注册方式

• 利用 on 开头的事件 onclick

• < button onclick = "alert('hi~')" >< /button>

• btn.onclick = function(){}

• 特点：注册事件的唯一性

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

---

三、方法监听注册方式

• W3C标准推荐方式

• addEeventListen() 它是一个方法

• IE9 以前的 IE 不支持此方法，可使用 attachEvent()代替

• 特点：同一个元素同一个事件可以添加多个监听器

• 按注册顺序依次执行

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

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget (目标对象) 上，当该对象触发指定的事件时，就会执行事件处理函数。

• type：事件类型字符串，比如 click，mouseover，注意这里不要带 on

• listener：事件处理函数，事件发生时，会调用该监听函数

• useCapture：可选参数，是一个布尔值，默认为 false。学完 DOM 事件流后，我们再进一步学习。

---

// 事件监听注册事件
<button>方法监听注册事件</button>
var btn = document.querySelector('button');
btn.addEventListener(click, function(){
    alert(11);
})

---

删除事件

一、传统方式删除事件

eventTarget.onclick = null;

<div>a</div>
<div>b</div>
<div>c</div>
<script>
    var divs = document.querySelectorAll('div');
        divs[0].onclick = function(){
            alert(11);
            // 传统方式删除事件
            divs[0].onclick = 'null';
        }
</script>

二、方法监听删除方式

eventTarget.removeEventListener(type,listener[,useCapture]);

<div>a</div>
<div>b</div>
<div>c</div>
<script>
    var divs = document.querySelectorAll('div');
    divs[1].addEventListener('click', fn)	// 里面的fn不需要加小括号调用
    function fn() {
        alert(22);
        divs[1].removeEventListener('click', fn);
    }
</script>

---

DOM 事件流

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

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

比如：我们给一个 div 注册了点击事件：

---

DOM 事件流分为3个阶段：

1. 捕获阶段

2. 当前目标节点

3. 冒泡阶段

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

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

---

我们向水里面扔了一块石头，首先它有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素 (目标点) 的捕获过程；之后会产生泡泡，会在最底层 (最具体元素) 之后漂浮到水面上，这个过程相当于事件冒泡。

---

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

注意

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。

2. onclick 和 attachEvent 只能得到冒泡阶段。

3. 捕获阶段，如果 addEventListener第三个参数是 true (不写默认 false)，那么则处于捕获阶段 (document -> html -> body -> father -> son)

4. 冒泡阶段，如果 addEventListener第三个参数是 false (不写默认 false)，那么则处于冒泡阶段 (son -> father -> body -> html -> document )

<div class="father">
	<div class="son">son盒子</div>
</div>
<script>
// 捕获阶段，如果 addEventListener第三个参数是 true，
// 那么则处于捕获阶段	document -> html -> body -> father -> son
	var son = document.querySelector('.son');
		son.addEventListener('click',function(){
			alert('son');
		},false);
		
		var father = document.querySelector('.father');
		father.addEventListener('click',function(){
			alert('father');
		},false);
// 先弹出 father，然后才是 son
</script>

1. 事件开发中我们很少使用事件捕获，我们更关注事件冒泡。

2. 有些事件是没有冒泡的，比如：onblur、onfocus、onmouseenter、onmouseleave.

---

事件对象

一、什么是事件对象

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click',function(event){})
// 这个event就是事件对象，我们还喜欢的写成 e 或者 evt

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标位置、鼠标按钮的状态。

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

比如：

1. 谁绑定了这个事件。

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

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

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

---

二、事件对象的使用语法

eventTarget.onclick = function(event){
	// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}
eventTarget.addEventListener('click',function(e){
	// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
})

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

当我们注册事件时，event 对象就会被系统自动创建，并依次传递给事件监听器 (事件处理函数)。

---

三、事件对象的兼容性方案

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

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

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

解决：

e = e || window.event;

---

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

事件对象属性方法	说明
e.target	返回触发事件的对象 (标准)
e.srcElement	返回触发事件的对象 (非标准 ie6-8使用)
e.type	返回事件的类型，比如click、mouseover ，不带 on
e.cancelBubble	该属性阻止冒泡 (非标准) ie6-8使用
e.returnValue	该属性阻止冒泡 (默认行为)，非标准，ie6-8使用，比如不让链接跳转
e.preventDefault()	该属性阻止冒泡 (默认行为)，标准，比如不让链接跳转
e.stopPropagation()	阻止冒泡 (标准)

<div>abc</div>
<ul>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
</ul>
<script>
    // 常见对象的属性和方法
    // 1. e.target 返回的是触发事件的对象(元素)，this 返回的是绑定事件的对象
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (e) {
        console.log(e.target);			// <li>abc</li>
        console.log(this);			// <ul>...</ul>
    })
</script>

---

<div>abc</div>
<a href = "http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
	<input type="submit" value="提交" name="sub">
</form>
<script>
	// 1.返回事件类型
	var div = document.querySelector('div');
	div.addEventListener('click',fn);
	function fn(){
		console.log(e.type);
	}
	// 2.阻止默认行为(事件) 让链接不跳转，或让提交按钮不提交
	var a = document.querySelector('a');
	a.addEventListener('click',function(e){
		// 普通浏览器	
		e.preventDefault();		// 阻止默认行为(事件) 
		// 低版本浏览器 ie678	
		e.returnValue;			// 阻止默认行为(事件) 
		// 我们可以利用 return false 也能阻止默认行为，没有兼容性问题
	});
	
</script>

阻止事件冒泡

阻止事件冒泡的两种方式：

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

事件冒泡本身的特性，会带来坏处，也会带来好处，需要我们灵活掌握。

阻止冒泡

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

e.stopPropagation()

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

e.cancelBubble = true; // cancel 取消 bubble 泡泡

<div class="father">
    <div class="son">son盒子</div>
</div>
<script>
    document -> html -> body -> father -> son
    var son = document.querySelector('.son');
    son.addEventListener('click', function (e) {
        alert('son');
        // 阻止事件冒泡	stopPropagation()
        e.stopPropagation();
    }, false);

    var father = document.querySelector('.father');
    father.addEventListener('click', function (e) {
        alert('father');
    }, false);
</script>

阻止事件冒泡的兼容性解决方案：

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

事件委托 (代理、委派)

咱们班有100个学生，快递员有100个快递，如果一个个送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？

解决方案：快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。

<ul>
    <li>知否知否</li>
    <li>知否知否</li>
    <li>知否知否</li>
    <li>知否知否</li>
    <li>知否知否</li>
</ul>

点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。

事件委托

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

事件委托的原理

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

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

---

事件委托的作用

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

<ul>
    <li>知否知否</li>
    <li>知否知否</li>
    <li>知否知否</li>
    <li>知否知否</li>
    <li>知否知否</li>
</ul>
<script>
	var ul =document.querySelector('ul');
	ul.addEventListener('click',function(e){
		e.target.style.backgroundColor = 'pink';
	})
</script>

---

常用的鼠标事件

(1) 常用的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键除法
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

禁止鼠标右键菜单

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

// 1.contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu',function(){
	e.preventDefault();
})

禁止鼠标选中 (selectstart 开始选中)

// 禁止选中文字  selectstart 
document.addEventListener('selectstart ',function(){
	e.preventDefault();
})

---

(2) 鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和 键盘事件对象 KeyboardEvent.

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的 X 坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的 Y 坐标
e.pageX	返回鼠标相对于文档页面的 X 坐标 IE9+支持
e.pageY	返回鼠标相对于文档页面的 Y 坐标 IE9+支持
e.sceenX	返回鼠标相对于电脑屏幕的 X 坐标
e.sceenY	返回鼠标相对于电脑屏幕的 Y 坐标

---

document.addEventListener('click',function(e){
    // 1. client 鼠标在可视区的 x 和 y 坐标
    console.log(e.clientX);
    console.log(e.clientY);
    // 2.page 鼠标在页面文档的 x 和 y 坐标
    console.log(e.pageX);
    console.log(e.pageY);
})

案例：跟随鼠标的天使

这个天使图片一直跟随鼠标移动

案例分析

1. 鼠标不断的移动，使用鼠标移动事件：mousemove

2. 在页面中移动，给 document 注册事件

3. 图片要移动距离，而且不占位置，我们使用绝对定位即可

4. 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片

<style>
    img {
    	position:absolute;
    	width: 60px;
    	height: 60px;
}
</style>
<img src="../photo/angel.jpeg" alt="">
<script>
    var pic = document.querySelector('img');
    document.addEventListener('mousemove',function(e){
        var x = e.pageX;
        var y = e.pageY;
        // 3.千万不要忘记给 left 和 top 添加px单位
        pic.style.left = x + 'px';
        pic.style.top = y + 'px';
    })
</script>

---

常用的键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发，但是它不识别功能键，比如 ctrl,shift,箭头等

<script>
	// onkeyup 按键松开起时触发
	document.onkeyup = function(){
		console.log('我弹起了');
	}
	// onkeydown 按键按下时触发
	document.addEventListener('keydown',function(){
		console.log('我松开了');
	})
</script>

注意：

1. 如果使用 addEventListener 不需要加 on

2. onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift等。

3. 三个事件的执行顺序是：keydown - keypress - keyup

---

(4) 键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的ASCII值

注意：onkeydown 和 onkeyup不区分字母大小写 (a,A都是65)，onkeypress区分字母大小写。

在我们实际开发中，我们更多的使用 keydown 和 keyup，它能识别所有的键 (包括功能键)，keypress不识别功能键，但是keyCode属性能区别大小写，返回不同的ASCII值。

<script>
    // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
    document.addEventListener('keyup', function (e) {
        console.log(e.keyCode);		// 49	(按了键盘1(ASCII为49))
    })
</script>

---

案例 1：模拟京东按键输入内容

当我们按下 s 键，光标定位到搜索框1

案例分析：

1. 核心思路：检测用户是否按下了 s 键，如果按下 s 键，就把光标定位到搜索框里面

2. 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键

3. 搜索框获得焦点：使用 js 里面的 focus() 方法

<input type="text">
<script>
    var search = document.querySelector('input');
    document.addEventListener('keyup',function(e){
        if (e.keyCode == 83){
            search.focus();
        }
    })
</script>

案例 2：模拟京东快递单号查询

要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容

---

1. 快递单号输入内容时，上面的大号字体盒子 (con) 显示 (这里面的字号更大)

2. 表单检测用户输入：给表达添加键盘事件

3. 同时把快递单号里面的值 (value) 获取过来赋值给 con 盒子 (innerText) 做为内容

<style>
* {
    margin: 0;
    padding: 0;
}
.search{
    position: relative;
    width: 178px;
    margin: 100px;
}
.con {
    display: none;
    position: absolute;
    top: -40px;
    width: 171px;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    padding: 5px 0;
    font-size: 18px;
    line-height: 20px;
    color: #333;
}
.con::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 28px;
    left: 18px;
    border: 8px solid #000;
    border-style: solid dashed dashed;
    border-color: #fff  transparent  transparent;
}
</style>
    <div class="search">
        <div class="con">abc</div>
        <input type="text" placeholder="请输入你的快递单号" class="jd">
    </div>
<script>
    var con = document.querySelector('.con');
    var jd_input = document.querySelector('.jd');
    jd_input.addEventListener('keyup',function(){
    	if (this.value == ''){
    		con.style.display = 'block';
    	}else{
    		con.innerText = this.value;
    	}
    })
    // 当我们失去焦点，隐藏这个 con 盒子
    jd_input.addEventListener('blur',function(){
    	con.style.display = 'none';
    })
    // 当我们获得焦点，显示这个 con 盒子
    jd_input.addEventListener('focus',function(){
    	if (this.value !== ''){
    		con.style.display = 'block';
    	}
  })
</script>

---

注意：

1. keydown 和 keypress 在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中。

2. keyup 事件触发的时候，文字已经落入文本框里面了

3. 当我们失去焦点，就隐藏这个con盒子

4. 当我们获得焦点，并且文本框内容不为空，就显示这个 con 盒子

---

目录

BOM概述
window对象的常见事件
定时器
this指向问题
JS执行机制
location对象
navigator对象
history对象

目标

能够说出什么是 BOM
能够知道浏览器的顶级对象
能够写出页面加载事件以及注意事项
能够写出两种定时器函数并说明区别
能够说出JS执行机制
能够使用location对象完成页面之间的跳转
能够知晓navigator对象涉及的属性
能够使用history提供的方法实现页面刷新

---

BOM概述

一、什么是 BOM

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

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

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

---

二、DOM和BOM区别

BOM比DOM更大，它包含DOM

---

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

1. 它是 JS 访问浏览器窗口的一个接口。

2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

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

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

---

window对象的常见事件

一、窗口加载事件

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

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

注意：

1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。

2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。

3. 如果使用 addEventListener 则没有限制

window.addEventListener('load', function() {
  var btn = document.querySelector('button');
  btn.addEventListener('click', function() {
    alert('点击我');
  })
})

---

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

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。 Ie9以上才支持 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。 区别：

1. load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等

2. DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

---

二、调整窗口大小事件

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

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

注意：

1. 只要窗口大小发生像素变化，就会触发这个事件。

2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

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

---

定时器

开启定时器setTimeout(调用函数, [延迟的毫秒数])	 		只调用一次
开始定时器setlnterval(调用函数, [延迟的毫秒数])		重复调用
停止定时器clearTimeout(定时器名字)
停止定时器clearInterval(定时器名字)

两种定时器

window 对象给我们提供了 2 个非常好用的方法-定时器。

• setTimeout() // 调用一次

• setInterval() // 重复调用

---

一、setTimeout() 定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout() 方法用于设置一个定时器，该定时器在设定的时间到了后执行调用函数。

<script>
  setTimeout(function(){
	console.log('时间到了');
  },2000);
</script>

注意：

1. window 可以省略。

2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()' 三种形式。第三种不推荐

3. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。

4. 因为定时器可能有很多，所以我们经常给定时器加标识符 (起名字)。

---

<script>
  function calkback() {
      console.log('爆炸了');
  }
 var time1 = setTimeout(calkback, 3000);
 var time2 = setTimeout(calkback, 5000);
</script>

setTimeout() 这个调用函数我们也称为回调函数 callback

普通函数是按照代码顺序直接调用。

而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。 简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。 以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数。

---

案例: 5秒后自动关闭的广告

<script>
  var ad = document.querySelector('.ad');
  setTimeout(function () {
	console.log('时间到了');
	ad.style.display = 'none';
  }, 5000);
</script>
<img src="images/02.jpg" alt="" class="ad">

---

二、停止setTimeout() 定时器

window.clearTimeout(timeoutID)

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

注意：

• window 可以省略。

• 里面的参数就是定时器的标识符 。

<button>点击停止定时器</button>
<img src="images/02.jpg" alt="" class="ad">
<script>
    var ad = document.querySelector('.ad');
    var btn = document.querySelector('button');

    var timer = setTimeout(function () {
        console.log('时间到了');
        ad.style.display = 'none';
    }, 5000);

    btn.addEventListener('click', function () {
        clearTimeout(timer);
    });
</script>

---

三、setInterval() 定时器

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

window.setInterval(回调函数, [间隔的毫秒数]);

<script>
  setInterval(function() {
	console.log('继续输出');
  },5000);
</script>

注意：

1. window 可以省略。

2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。

3. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

---

案例：京东倒计时，设置了定时器

案例分析

1. 这个倒计时是不断变化的，因此需要定时器来自动变化 (setInterval)

2. 三个盒子里面分别存放时分秒

3. 三个黑色盒子利用innerHTML放入计算的小时分钟秒数

<div class="time_bottom">
	<span class="hour"></span>
	<span class="minute"></span>
	<span class="second"></span>
</div>
<script>
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    var inputTime = +new Date('2020-4-14 22:00:00');//返回的是用户输入时间总的毫秒数
    function countDown() {
        var nowTime = +new Date();//返回的是当前时间总的毫秒数
        // time是剩余时间总的毫秒数
        var times = (inputTime - nowTime) / 1000;   //1000 表示剩余时间总的毫秒数转化为秒
        var h = parseInt(times / 60 / 60 % 24);//小时
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;//剩余的小时给小时盒子
        var m = parseInt(times / 60 % 60);//分
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;//剩余的分钟给分钟盒子
        var s = parseInt(times % 60);//秒
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;//剩余的秒数给秒数盒子
    }
    setInterval(countDown, 1000);
</script>

---

(四) 停止 setInterval定时器

clearInterval()方法 取消 setInterval()建立的定时器。

window.clearInterval(intervalID);

注意：

1. window 可以省略。

2. 里面的参数就是定时器的标识符 。

<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
    var begin = document.querySelector('.begin');
    var stop = document.querySelector('.stop');
    var timer = null; // 全局变量，如果在函数内部声明，就拿不到timer，
    // 所以要在全局作用域内声明
    begin.addEventListener('click', function() {
      timer = setInterval(function() {
        console.log('how are you');
      }, 5000);
    })
    stop.addEventListener('click', function() {
      clearInterval(timer);
    })
</script>

---

案例：发送短信点击发送后60S内不能再次点击

手机号码： <input type="number">
<button>发送</button>
<script>
    // 按钮点击之后，会禁用 disabled 为true 
    // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
    // 里面秒数是有变化的，因此需要用到定时器
    // 定义一个变量，在定时器里面，不断递减
    // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
    var btn = document.querySelector('button');
    var time = 60; // 定义剩下的秒数
    btn.addEventListener('click', function () {
        btn.disabled = true;
        var timer = setInterval(function () {
            if (time == 0) {
                // 清除定时器和复原按钮
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
            } else {
                btn.innerHTML = '还剩下' + time + '秒';
                time--;
            }
        }, 1000);
    })
</script>

---

this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是哪个调用它的对象

现阶段，我们先了解一下几个this指向：

一、全局作用域或者普通函数中this指向全局对象window

（注意：定时器里面的this也是指向window）

console.log(this);	//window

function fn() {
  console.log(this);	// window
}
window.fn();

window.setTimeout(function() {
  console.log(this);	// window

}, 1000);

二、方法调用中谁调用this指向谁

var o = {
  sayHi: function () {
    console.log(this); // this指向的是 o 这个对象

  }
}
o.sayHi();
var btn = document.querySelector('button');
// btn.onclick = function() {
//     console.log(this); // this指向的是btn这个按钮对象

// }
btn.addEventListener('click', function () {
  console.log(this); // this指向的是btn这个按钮对象
})

三、构造函数中this指向构造函数的实例

function Fun() {
  console.log(this); // this 指向的是fun 实例对象

}
var fun = new Fun();

---

JS执行机制

一、JS 是单线程

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

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

---

二、同步和异步

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

---

(1) 同步

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

---

(2) 异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。 他们的本质区别： 这条流水线上各个流程的执行顺序不同。

---

(3) 同步和异步

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

异步任务：JS的异步是通过回调函数实现的

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

普通事件，如click、resize等

资源加载，如load、error等

定时器，包括setInterval、setTimeout

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

---

一个问题

那么以下代码执行的结果又是什么？

 console.log(1);

 setTimeout(function () {	// 定时器属于回调函数，属于异步任务
     console.log(3);
 }, 1000);

 console.log(2);
// 结果为 1，2，3 
// 为什么2在3的前面？
// 因为3(定时器)属于回调函数，属于异步任务

---

三、JS 执行机制

---

---

1. 先执行执行栈中的同步任务。

2. 异步任务（回调函数）放入任务队列中。

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

---

---

如果异步任务有很多个呢？

console.log(1);

document.onclick = function() {
  console.log('click');
}

console.log(2);

setTimeout(function() {
  console.log(3)
}, 3000)

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

---

location对象

一、location 对象概述

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

---

二、URL

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

URL 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

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

---

三、location对象的属性

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

重点记住： href 和 search

<button>点击</button>
<script>
	var btn = document.querySelector('button');
	btn.addEventListener('click',function(){
		/* console.log(window.location.href); */
		location.href = 'http://www.itcase.com';
	})
</script>

---

案例：五秒之后跳转到首页

案例分析

1. 利用定时器倒计时效果

2. 时间到了，就跳转页面。使用 location.href

<div></div>
<script>
    var timer = 5;
    var div = document.querySelector('div');
    tiaozhuan();
    function tiaozhuan() {
        if (timer == 0) {
            location.href = 'http:www.jd.com';
        }
        else {
            div.innerHTML = '您好，将在' + timer + '秒之后跳转到首页'
            timer--;
        }
    }
    setInterval(tiaozhuan, 1000)
</script>

---

案例：获取 URL 参数数据

案例分析

1. 第一个登录页面，里面有提交表单，action 提交到 index.html页面

2. 第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果

3. 第二个页面之所以可以使用第一个页面的数据，是利用了 URL 里面的 location.search 参数

4. 在第二个页面中，需要把这个参数提取。

5. 第一步去掉 ?利用 substr

6. 第二步 利用 = 号 分隔 键和值 split('=')

// 第一个页面 (login.html)
<form action="index.html">
    用户名：<input type="text" name="uname">
    <input type="submit" value="登录">
</form>

---

// 第二个页面 index.html
<div></div>
<script>
    console.log(location.search);		//得到：？uname=andy
    //  1、先去掉问号    substr('起始的位置',截取几个字符)
    //  1 表示从索引号1开始  第二值没写表示截取到最后
    var params = location.search.substr(1);		
    	console.log(params);		 //得到  uname=andy
     //  2、利用等号把字符串分割为数组
    var arr = params.split('=');
       	console.log(arr);	// ['uname','andy']       
    var div = document.querySelector('div');
       	div.innerHTML = arr[1] + '欢迎你';		// arr[1]获取andy
</script>

---

四、location对象的方法

location对象方法	返回值
location.assign()	跟 href一样，可以跳转页面 (也称为重定向页面)
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮 或者 f5 如果参数为 true 强制刷新 ctrl+f5

location.assign() 与 location.replace() 的区别在于能否实现后退功能。

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  // 记录浏览历史，所以可以实现后退功能
  location.assign('http://www.itcast.cn');
  // 不记录浏览历史，所以不可以实现后退功能
  location.replace('http://www.itcast.cn');

  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对象

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

history对象方法	作用
back()	可以后退
forward()	前进功能
go(参数)	前进后退功能 参数如果是1 前进1个页面 如果是-1后退1个页面

<a href="list.html">点击我去往列表页</a>
<button>前进</button>
<script>
	var btn1 = document.querySelector('button');
	btn1.addEventListener('click', function() {
 	 // history.forward();
 	 history.go(1);
	})
</script>

---

<a href="login.html">点击我去往首页</a>
<button>后退</button>
<script>
	var btn2 = document.querySelector('button');
	btn2.addEventListener('click', function() {
 	 // history.back();
	  history.go(-1);
	})
</script>

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

---

目标

 能够写出 sessionStorage 数据的存储以及获取
 能够写出 localStorage 数据的存储以及获取
 能够说出它们两者的区别

---

 window.sessionStorage
 window.localStorage

一、本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，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()

---

 <input type="text">
 <button class="set">存储数据</button>
 <button class="get">获取数据</button>
 <button class="remove">删除数据</button>
 <button class="del">清空所有数据</button>
 ​
 <script>
     var ipt = document.querySelector('input');
     // 存取数据
     var set = document.querySelector('.set');
         set.addEventListener('click',function(){
             var val = ipt.value;
             sessionStorage.setItem('uname', val);
             sessionStorage.setItem('pwd', val);
         });
        
     // 获取数据
     var get = document.querySelector('.get');
         get.addEventListener('click', function () {
             console.log(sessionStorage.getItem('uname'));
         });
     // 删除数据
     var remove = document.querySelector('.remove');
         remove.addEventListener('click', function () {
             console.log(sessionStorage.removeItem('uname'));
         });
     // 清空数据
     var del = document.querySelector('.del'); 
         del.addEventListener('click', function () {
             console.log(sessionStorage.clear());
         });
 </script>

---

(三) window.localStorage

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

2. 可以多窗口 (页面) 共享 (同一浏览器可以共享)

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

存储数据：

 localStorage.setItem(key,value)

获取数据：

localStorage.getItem(key)

---

删除数据：

localStorage.removeItem(key)

---

删除所有数据：

localStorage.clear()

---

<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>

<script>
    var ipt = document.querySelector('input');
    // 存取数据
    var set = document.querySelector('.set');
        set.addEventListener('click',function(){
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
       
    // 获取数据
    var get = document.querySelector('.get');
        get.addEventListener('click', function () {
            console.log(sessionStorage.getItem('uname'));
        });
    // 删除数据
    var remove = document.querySelector('.remove');
        remove.addEventListener('click', function () {
            console.log(sessionStorage.removeItem('uname'));
        });
    // 清空数据
    var del = document.querySelector('.del'); 
        del.addEventListener('click', function () {
            console.log(sessionStorage.clear());
        });
</script>

---

案例：记住用户名

如果勾选记住用户名，下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名

案例分析

1. 把数据存起来，用到本地存储

2. 关闭页面，也可以显示用户名，所以用到 localStorage

3. 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框

4. 当复选框发生改变的时候 change 事件

5. 如果勾选，就存储，否则就移除

<input type="text" id="username">
<input type="checkbox" name="" id="remember">记住用户名
<script>
	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');
		}
	})
</script>

 

---