JavaScript

发布日期: 2023-01-08

文章字数: 17.1k

阅读时长: 68 分

阅读次数:

一、DOM 简介

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

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

在这里插入图片描述

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

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

二、获取元素

获取页面中的元素可以使用以下几种方式:

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

1. 根据 ID 获取

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

doucument.getElementByld('id名');

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

2. 根据标签名获取

根据标签名获取，使用 getElementByTagName() 方法可以返回带有指定标签名的对象的集合

doucument.getElementsByTagName('标签名');

返回的是获取过来元素对象的集合，以伪数组的形式存储。我们想要操作里面的元素就需要遍历
得到元素对象是动态的
如果获取不到元素，则返回为空的伪数组

==ps：==

可以根据标签名获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('标签名')

ol.getElementsByTagName('li');

3. 通过H5新增方法获取

3.1 getElementsByClassName

根据类名返回元素对象合集

document.getElementsByClassName('类名');

3.2 document.querySelector

根据指定选择器返回第一个元素对象

document.querySelector('选择器');

// 切记里面的选择器需要加符号 
// 类选择器.box 
// id选择器 #nav
var firstBox = document.querySelector('.box');

3.3 document.querySelectorAll

根据指定选择器返回所有元素对象

document.querySelectorAll('选择器');

4. 获取特殊元素

4.1 获取 body 元素

返回body元素对象

document.body;

4.2 获取 html 元素

返回html元素对象

document.documentElement;

三、事件基础

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

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

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

1. 事件三要素

事件源（谁）
事件类型（什么事件）
事件处理程序（做啥）

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

2. 执行事件的步骤

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

<script>
    // 执行事件步骤
    // 点击div 控制台输出 我被选中了
    // 1. 获取事件源
    var div = document.querySelector('div');
    // 2.绑定事件 注册事件
    // div.onclick 
    // 3.添加事件处理程序 
    div.onclick = function() {
        console.log('我被选中了');
    }
</script>

3. 鼠标事件

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

四、操作元素

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

1. 改变元素内容

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

element.innerText

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

element.innerHTML

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>

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

在这里插入图片描述

2. 改变元素属性

常用元素的属性操作

innerText、innerHTML 改变元素内容
src、href
id、alt、title
表单元素属性 type, value, checked, selected, disabled

// img.属性
img.src = "xxx";

input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;

3. 改变样式属性

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

行内样式操作

// element.style
div.style.backgroundColor = 'pink';
div.style.width = '250px';

类名样式操作

// element.className
div.className = 'wrong'

注意：

JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor
JS 修改 style 样式操作，产生的是行内样式，权重比较高
==如果样式修改较多，可以采取操作类名方式更改元素样式==
className 会直接更改元素的类名，会覆盖原先的类名

案例：用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息

<style>
	div {
		width: 600px;
		margin: 100px auto;
    }
	.message {
		display: inline-block;
		font-size: 12px;
		color: #999;
		background: url(images/mess.png) no-repeat left center;
		padding-left: 20px;
	}
	// 样式用类名封装
	.wrong {
		color: red;
		background-image: url(images/wrong.png);
	}
	// 样式用类名封装
	.right {
		color: green;
		background-image: url(images/right.png);
	}
</style>

<body>
	<div class="register">
		<input type="password" class="ipt">
		<p class="message">请输入6~16位密码</p>
	</div>

	<script>
		var ipt = document.querySelector('.ipt');
		var message = document.querySelector('.message');

		ipt.onblur = function () {
			if (ipt.value.length < 6 || ipt.value.length > 16) {
				message.className = 'message wrong'; // 直接更改类名
				message.innerHTML = '您输入的位数不对';
			} else {
				message.className = 'message right'; // 直接更改类名
				message.innerHTML = '密码符合条件';
			}
		}
	</script>
</body>

4. 排他思想

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

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
    </script>
</body>

5. 自定义属性

5.1 获取属性值

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

element.属性;

获取自定义的属性

element.getAttribute('属性');

5.2 设置属性值

设置内置属性值

element.属性 = '值';

主要设置自定义的属性

element.setAttribute('属性','值');

5.3 移除属性

element.removeAttribute('属性');

案例：tab 栏切换

当鼠标点击上面相应的选项卡（tab），下面内容跟随变化
在这里插入图片描述

核心思路：

给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。
当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的内容显示，其余隐藏（排他思想）

<script>
	var lis = document.querySelector('.tab_list').querySelectorAll('li');//获取tab切换栏
	var items = document.querySelectorAll('.item');//获取各个tab下的内容

	for (var i = 0; i < lis.length; i++) {
		lis[i].setAttribute('index', i);// 给每个tab栏添加序号属性
		
		lis[i].onclick = function () {
			for (var i = 0; i < lis.length; i++) {
			lis[i].className = '';
			items[i].style.display = 'none';
			} // 排他思想
			
			this.className = 'current'; // 选中点击的此tab
			var index = this.getAttribute('index');
			items[index].style.display = 'block'; // 匹配
		}
	}
</script>

H5 规定自定义属性

自定义属性目的：

保存并保存数据，有些数据可以保存到页面中而不用保存到数据库中
有些自定义属性很容易引起歧义，不容易判断到底是内置属性还是自定义的

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

<div data-index = "1"></div>
// 或者使用JavaScript设置
div.setAttribute('data-index',1);

兼容性获取 element.getAttribute('data-index')
H5新增的：element.dataset.index 或element.dataset['index'] IE11才开始支持

五、节点操作

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

利用DOM提供的方法获取元素，缺点：逻辑性不强、繁琐
- document.getElementByld()
- document.getElementsByTagName()
- document.querySelector()
利用 节点层级关系 获取元素
- 利用父子兄节点关系获取元素
- 优点：逻辑性强
- 缺点：兼容性稍差

1. 节点概述

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

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

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

元素节点：nodeType 为1
属性节点：nodeType 为2
文本节点：nodeType 为3(文本节点包括文字、空格、换行等)

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

2. 节点层级

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

2.1 父级节点

node.parentNode

parentNode属性可以返回某节点的父结点，注意是最近的一个父结点
如果指定的节点没有父结点则返回null

2.2 子结点

parentNode.childNodes(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合
返回值包含了所有的子结点，包括元素节点，文本节点等
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

parentNode.children(非标准)

parentNode.children 是一个只读属性，返回所有的子元素节点
它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）
虽然 children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

<body>
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol> 
		<li>我是li</li> 
	    <li>我是li</li> 
	    <li>我是li</li> 
	    <li>我是li</li> 
    </ol>
    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        console.log(erweima.parentNode); //得到的是离元素最近的父级节点(亲爸爸)box
        
        var ul = document.querySelector('ul');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>
</body>

2.2.1 第一个子结点

parentNode.firstChild

firstChild 返回第一个子节点，找不到则返回null
同样，也是包含所有的节点（空格、换行）

parentNode.firstElementChild

firstElementChild 返回第一个子元素节点，找不到则返回null

2.2.2 最后一个子结点

parentNode.lastChild

lastChild 返回最后一个子节点，找不到则返回null
同样，也是包含所有的节点（空格、换行）

parentNode.lastElementChild

lastElementChild 返回最后一个子元素节点，找不到则返回null

2.3 兄弟节点

2.3.1 下一个兄弟节点

node.nextSibling

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

node.nextElementSibling

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

2.3.2 上一个兄弟节点

node.previousSibling

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

node.previousElementSibling

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

3. 创建节点

document.createElement('tagName');

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

3.1 添加节点

node.appendChild(child)

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

node.insertBefore(child,指定元素)

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

3.2 删除节点

node.removeChild(child)

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

3.3 复制节点(克隆节点)

node.cloneNode()

node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
如果括号参数为空或者 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
如果括号参数为 true ，则是深拷贝，会复制节点==本身以及里面所有的子节点==

面试题

三种动态创建元素的区别

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

区别：

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

<body>
    <div class="innner"></div>
    <div class="create"></div>
    <script>
        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        // 2.1 innerHTML 用拼接字符串方法
        for (var i = 0; i <= 100; i++) {
            inner.innerHTML += '<a href="#">百度</a>';
        }
        // 2.2 innerHTML 用数组形式拼接
        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');
        var a = document.createElement('a');
        create.appendChild(a);
    </script>
</body>

六、DOM核心

对于DOM操作，我们主要针对子元素的操作，主要有

创建
增
删
改
查
属性操作
事件操作

6.1 创建

document.write
innerHTML
createElement

6.2 增

appendChild
insertBefore

6.3 删

removeChild

6.4 改

主要修改dom的元素属性，dom元素的内容、属性、表单的值等

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

6.5 查

主要获取查询dom的元素

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

6.6 属性操作

主要针对于自定义属性

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

七、事件高级

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

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

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

传统注册方式	方法监听注册方式
利用 on 开头的事件 onclick	w3c 标准推荐方式
`<button onclick = "alert("hi")"></button>`	addEventListener() 它是一个方法
btn.onclick = function() {}	IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
特点：注册事件的唯一性	特点：同一个元素同一个事件可以注册多个监听器
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数	按注册顺序依次执行

1.1 addEventListener事件监听方式

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

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

该方法接收三个参数：

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

attachEvent事件监听方式(兼容)

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上
当该对象触发指定的事件时，指定的回调函数就会被执行

eventTarget.attachEvent(eventNameWithOn,callback)

该方法接收两个参数：

eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
callback：事件处理函数，当目标触发事件时回调函数被调用
ie9以前的版本支持

2. 删除事件(解绑事件)

2.1 removeEventListener删除事件方式

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

该方法接收三个参数：

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

2.2 detachEvent删除事件方式(兼容)

eventTarget.detachEvent(eventNameWithOn,callback);

该方法接收两个参数：

eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
callback：事件处理函数，当目标触发事件时回调函数被调用
ie9以前的版本支持

2.3 传统事件删除方式

eventTarget.onclick = null;

3. DOM事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

DOM 事件流分为3个阶段：

捕获阶段
当前目标阶段
冒泡阶段

在这里插入图片描述

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

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

在这里插入图片描述

3.1 应用说明

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

3.2 捕获阶段

document -> html -> body -> father -> son

两个盒子嵌套，一个父盒子一个子盒子，我们的需求是当点击父盒子时弹出 father ，当点击子盒子时弹出 son

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        
        son.addEventListener('click', function() {
             alert('son');
        }, true); // 捕获阶段
        father.addEventListener('click', function() {
            alert('father');
        }, true);
    </script>
</body>

但是因为DOM流的影响，我们点击子盒子，会先弹出 father，之后再弹出 son

这是因为捕获阶段由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收

document -> html -> body -> father -> son
先看 document 的事件，没有；再看 html 的事件，没有；再看 body 的事件，没有；再看 father 的事件，有就先执行；再看 son 的事件，再执行。

3.3 冒泡阶段

son -> father ->body -> html -> document

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        
        son.addEventListener('click', function() {
            alert('son');
        }, false); // 冒泡阶段
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

我们点击子盒子，会弹出 son、father、document

这是因为冒泡阶段开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点

son -> father ->body -> html -> document

4. 事件对象

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

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
简单理解：
- 事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面
- 这个对象就是事件对象 event，它有很多属性和方法，比如：
  - 谁绑定了这个事件
  - 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
  - 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键
这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去
当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

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

事件对象属性方法	说明
`e.target`	返回触发事件的对象（标准）
`e.srcElement`	返回触发事件的对象（非标准）
`e.type`	返回事件类型
`e.preventDefault()`	阻止默认事件（标准）让链接不跳转、让提交按钮不提交
`e.returnValue = true`	阻止默认事件（非标准，IE678）
`e.stopPropagation()`	阻止冒泡（标准）
`e.cancelBubble`	阻止冒泡（非标准，IE678）

e.target 和 this 的区别：

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

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target); // div
            console.log(this); // div
        })
        
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);
            })
    </script>
</body>

4.2 事件对象阻止默认行为

<body>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标准写法
            })
    </script>
</body>

4.3 阻止事件冒泡

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

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

标准写法

e.stopPropagation();

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

e.cancelBubble = true;

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

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

此时点击son只会弹出son，而点击father会弹出father和document

5. 事件委托

事件委托也称为事件代理，在 jQuery 里面称为事件委派
事件委托的原理
- 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
- 作用：我们 只操作了一次 DOM ，提高了程序的性能。

<body>
    <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 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
            // 点了谁，就让谁的style里面的backgroundColor颜色变为pink
        })
    </script>
</body>

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

6. 常见的鼠标事件

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

mouseenter 事件：鼠标移动到元素上
mouseleave事件：鼠标离开元素
类似 mouseover，它们两者之间的差别是
- mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
- 因为 mouseenter 不会冒泡，mouseleave同理

6.1 禁止鼠标右键与鼠标选中

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
selectstart 禁止鼠标选中

<body>
    <h1>我是一段不愿意分享的文字</h1>
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault(); // 阻止默认行为
            })
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })
    </script>
</body>

6.2 鼠标事件对象

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

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX（重点）	返回鼠标相对于文档页面的X坐标
e.pageY（重点）	返回鼠标相对于文档页面的Y坐标
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

案例：跟随鼠标的天使
这个天使图片一直跟随鼠标移动

鼠标不断的移动，使用鼠标移动事件： mousemove
在页面中移动，给document注册事件
图片要移动距离，而且不占位置，我们使用绝对定位即可
核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的 top和left 值就可以移动图片

<style>
	img {
		position: absolute;
	}
</style>

<body>
	<img src="images/angel.gif" alt="">
	<script>
		var img = document.querySelector('img');
		document.addEventListener('mousemove', function (e) {
			var x = e.pageX;
			var y = e.pageY;
			img.style.top = y - 40 + 'px'; // 减去图片高度的一半
			img.style.left = x - 50 + 'px'; // 减去图片长度的一半
		});
	</script>
</body>

7. 常用的键盘事件

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

如果使用addEventListener 不需要加 on
onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等
三个事件的执行顺序是： keydown – keypress – keyup

7.1 键盘对象属性

e.key 返回键值，可区分大小写
e.code 返回键值，如按下s，返回KeyS，不区分大小写

在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）

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

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

<body>
	<input type="text">
	<script>
		var search = document.querySelector('input');
		document.addEventListener('keyup', function (e) {
			if (e.code == 'KeyS') { // 注意此处
				search.focus();
			}
		})
	</script>
</body>

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

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

快递单号输入内容时，上面的大号字体盒子（con）显示
同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
1. 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
注意：
keydown 和 keypress他们两个事件触发的时候，文字还没有落入文本框中
1. keyup事件触发的时候，文字已经落入文本框里面了
当我们失去焦点，就隐藏这个con盒子
当我们获得焦点，并且文本框内容不为空，就显示这个con盒子

<body>
	<div class="search">
		<div class="con">123</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 = 'none';
			} else {
				con.style.display = 'block';
				con.innerHTML = this.value;
			}
		})
		jd_input.addEventListener('blur', function () {
			con.style.display = 'none';
		})
        jd_input.addEventListener('focus', function () {
			if (this.value !== '') {
				con.style.display = 'block';
			}
		})
	</script>
</body>

八、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 是浏览器厂商在各自浏览器上定义的，兼容性较差

1. BOM的构成

BOM 比 DOM 更大。它包含 DOM。

在这里插入图片描述

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

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

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt()等。
注意：window下有一个特殊属性 window.name，在定义变量时不要使用name这个名称

九、window 对象的常见事件

1. 窗口加载事件

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

window.onload = function(){
    
};
// 或者
window.addEventListener("load",function(){});

注意：

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

document.addEventListener('DOMContentLoaded',function(){})

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

2. 调整窗口大小事件

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

window.onresize = function() {}
// 或者
window.addEventListener('resize',function(){});

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

<body>
    <script>
        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';
                }
            })
        })
    </script>
    <div></div>
</body>

十、定时器

window 对象给我们提供了两个定时器

setTimeout()
setInterval()

1. setTimeout() 定时器

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

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

注意：

window可以省略
这个调用函数
- 可以直接写函数
- 或者写函数名
- 或者采取字符串 ‘函数名()’（不推荐）
延迟的毫秒数省略默认是0，如果写，必须是毫秒
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
setTimeout() 这个调用函数我们也称为回调函数 callback
普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才会回头去调用这个函数，因此称为回调函数。
- 以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数。

2. clearTimeout() 停止定时器

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

window.clearTimeout(timeoutID)

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

<body>
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>
</body>

3. setInterval() 定时器

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

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

注意：

window可以省略
这个回调函数:
- 可以直接写函数
- 或者写函数名
- 或者采取字符 ‘函数名()’
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

案例：倒计时效果

这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
三个黑色盒子里面分别存放时分秒
- 三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
- 最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题

<body>
	<div>
		<span class="hour">1</span>
		<span class="minute">2</span>
		<span class="second">3</span>
	</div>
	
	<script>
		var hour = document.querySelector('.hour');
		var minute = document.querySelector('.minute');
		var second = document.querySelector('.second');
		var inputTime = +new Date('2023-01-22 00:00:00'); // 设定目标时间，并求目标时间的总毫秒数
		countDown();//先调用一次,防止刷新出现空白间隔1s
		
		setInterval(countDown, 1000);


		function countDown() {
			var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
			var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
			var h = parseInt(times / 60 / 60); //时
			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;
		}
	</script>
</body>

4. clearInterval() 停止定时器

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

window.clearInterval(intervalID);

注意：

window可以省略
里面的参数就是定时器的标识符

案例：发送短信

点击按钮后，该按钮3秒之内不能再次点击，防止重复发送短信

按钮点击之后，会禁用 disabled 为true
同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML修改
- 里面秒数是有变化的，因此需要用到定时器
- 定义一个变量，在定时器里面，不断递减
- 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

<body>
	手机号码：<input type="number"> <button>发送</button>
	
	<script>
		var btn = document.querySelector('button');
		var time = 3;

		btn.addEventListener('click', function () {
			this.disabled = true; // 按钮不可点击
			
			var timer = setInterval(function () {
				if (time == 0) {
					clearInterval(timer);
					btn.disabled = false;
					btn.innerHTML = '发送';
					time = 3;
				} else {
					btn.innerHTML = '还剩下' + time-- + 's';
				}
			}, 1000);
		})
	</script>
</body>

5. this指向

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁

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

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

<body>
    <button>点击</button>
    <script>
        // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);

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

        }, 1000);
        
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象
            }
        }
        o.sayHi();
        
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象
            })
            
            // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun的实例对象Fun()
        }
        var fun = new Fun();
    </script>
</body>

十一、JS执行机制

1. JS是单线程

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

2. 一个问题

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

console.log(1);
setTimeout(function() {
    console.log(3);
},1000);
console.log(2);
// 1 2 3

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

console.log(1);
setTimeout(function() {
    console.log(3);
},0);
console.log(2);
// 1 2 3

3. 同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程
于是，JS 中出现了同步和异步。
同步:
- 前一个任务结束后再执行后一个任务
异步：
- 在做这件事的同时，你还可以去处理其他事情

3.1 同步任务

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

在这里插入图片描述

3.2 异步任务

JS中的异步是通过回调函数实现的
异步任务有以下三种类型
- 普通事件，如click，resize等
- 资源加载，如load，error等
- 定时器，包括setInterval，setTimeout等
异步任务相关回调函数添加到任务队列中

在这里插入图片描述

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

在这里插入图片描述

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

十二、location 对象

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

1. url

==统一资源定位符（uniform resouce locator）是互联网上标准资源的地址==。互联网上的每个文件都有一个唯一的 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.baidu.com
port	端口号，可选
path	路径由零或多个’/‘符号隔开的字符串
query	参数以键值对的形式，通过`&`符号分隔开来
fragment	片段 `#`后面内容常见于链接、锚点

2. location 对象属性

location对象属性	返回值
`location.href`	获取或者设置整个URL
`location.host`	返回主机（域名）www.baidu.com
`location.port`	返回端口号，如果未写返回空字符串
`location.pathname`	返回路径
`location.search`	返回参数
`location.hash`	返回片段 `#`后面内容常见于链接锚点
重点记住： `href`和`search`

案例1：5s之后跳转页面

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }

        }, 1000);
    </script>
</body>

案例2：获取 URL 参数数据

第一个登录页面，里面有提交表单， action 提交到 index.html页面
第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
- 第二个页面之所以可以使用第一个页面的数据，是利用了URL 里面的 location.search参数
在第二个页面中，需要把这个参数提取。
- 第一步去掉？利用 substr
- 第二步利用=号分割键和值 split('=')
- 第一个数组就是键第二个数组就是值

简单写一个登录框，点击登录跳转到 index.html

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

接下来我们写 index.html

<body>
    <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>
</body>

3. location 对象方法

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

十三、navigator 对象

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

下面前端代码可以判断用户是用哪个终端打开页面的，如果是用 PC 打开的，我们就跳转到 PC 端的页面，如果是用手机打开的，就跳转到手机端页面

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个页面

十五、元素偏移量 offset 系列

1. offset 概述

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

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

offset 系列常用属性：

在这里插入图片描述

2. offset 与 style 区别

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

3. 案例

3.1 获取鼠标在盒子内部的坐标

我们在盒子内点击，想要得到鼠标距离盒子左右的距离。
1. 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
2. 其次得到盒子在页面中的距离( box.offsetLeft, box.offsetTop)
3. 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标
如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件mousemove

<body>
	<div class="box"></div>
	<script>
		var box = document.querySelector('.box');
		box.addEventListener('mousemove', function (e) {
			var x = e.pageX - this.offsetLeft;
			var y = e.pageY - this.offsetTop;
			this.innerHTML = 'x的坐标为' + x + ' y的坐标为' + y;
		})
	</script>
</body>

3.2 模态框拖拽

点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。
点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
鼠标松开，可以停止拖动模态框移动。

在页面中拖拽的原理：鼠标按下mousedown并且移动mousemove，之后松开鼠标mouseup
鼠标按下触发的事件源是最上面一行，就是 id 为 title
拖拽过程: 鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了
- 鼠标的坐标 - 鼠标在盒子内的坐标，才是模态框真正的位置。
  - ==鼠标按下==，我们要得到鼠标在盒子的坐标。
  - ==鼠标移动==，就让模态框的坐标设置为：鼠标坐标 - 盒子坐标即可，注意移动事件写到按下事件里面。
  - ==鼠标松开==，就停止拖拽，就是可以让鼠标移动事件解除

//1. 鼠标按下时，获取鼠标在盒子中的位置
title.addEventListener('mousedown', function (e) {
	var x = e.pageX - login.offsetLeft;
	var y = e.pageY - login.offsetTop;
	//2. 鼠标移动过程中，获取鼠标实时位置，盒子跟随移动
	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);
	})
})

3.3 仿京东放大镜

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

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

==黄色的遮挡层跟随鼠标功能==
- 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
- 首先是获得鼠标在盒子的坐标。
- 之后把数值给遮挡层做为left 和top值。
- 发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。
==遮挡层不能超出小图片盒子范围==
- 如果小于零，就把坐标设置为0
- 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
  - 遮挡层的最大移动距离：小图片盒子宽度 - 遮挡层盒子宽度
==移动黄色遮挡层，大图片跟随移动功能==
- 遮挡层移动距离 / 遮挡层最大移动距离 = 大图片移动距离 / 大图片最大移动距离
  - 大图片移动距离 = 遮挡层移动距离* 大图片最大移动距离 / 遮挡层最大移动距离

// 1. 鼠标移动，mask跟随移动
preview_img.addEventListener('mousemove', function (e) {
	var x = e.pageX - this.offsetLeft;
	var y = e.pageY - this.offsetTop;

	// 遮挡层移动距离
	var maskX = x - mask.offsetWidth / 2; // 再减去盒子自身宽度的一半
	var maskY = y - mask.offsetHeight / 2; // 再减去盒子自身高度的一半
	// 遮挡层的最大移动距离
	var maskMaxX = this.offsetWidth - mask.offsetWidth;
	var maskMaxY = this.offsetHeight - mask.offsetHeight;
	// 大图片最大移动距离
	var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
	var bigMaxY = bigImg.offsetHeight - big.offsetHeight;

	// 限制mask的移动范围在图片框内
	if (maskX <= 0) {
		maskX = 0;
	} else if (maskX >= maskMaxX) {
		maskX = maskMaxX;
	}
	if (maskY <= 0) {
		maskY = 0;
	} else if (maskY >= maskMaxY) {
		maskY = maskMaxY;
	}
	mask.style.left = maskX + 'px'; // 赋坐标值给 mask
	mask.style.top = maskY + 'px';

	// 3. 鼠标移动，大图跟随移动
	// 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
	var bigX = maskX * bigMaxX / maskMaxX;
	var bigY = maskY * bigMaxY / maskMaxY;
	bigImg.style.left = -bigX + 'px';
	bigImg.style.top = -bigY + 'px';
})

十六、元素可视区 client 系列

1. 系列属性

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

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

在这里插入图片描述

2. 案例

淘宝 flexible.js 源码分析

2.1 立即执行函数

立即执行函数是指函数定义好后，不需要调用直接执行。即一引入 JS 文件，则该函数自动执行。

语法：(function() {})() 或者 (function(){}())

主要作用：

创建一个独立的作用域
避免了命名冲突问题

<body>
	<script>
	(function (a, b) {
		console.log(a + b);
	})(1, 2);

	(function sum(a, b) {
		console.log(a + b);
	}(2, 3));
	</script>
</body>

2.2 pageShow 事件

pageShow 是加载页面功能

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

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

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

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

十七、元素 scroll 系列属性

1. 系列属性

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

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

在这里插入图片描述

2. 页面被卷去的头部

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

获取页面被卷去的头部：

页面被卷去的头部：可以通过 window.pageYOffset 获得，如果是被卷去的左侧 window.pageXOffset
注意，元素被卷去的头部是 element.scrollTop，左侧 element.scrollLeft

3. 案例

仿淘宝固定右侧侧边栏

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

需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document
滚动到某个位置，就是判断页面被卷去的上部值。
页面被卷去的头部：可以通过window.pageYOffset 获得如果是被卷去的左侧 window.pageXOffset

document.addEventListener('scroll', function () {
	if (window.pageYOffset >= banner.offsetTop) {
		sliderbar.style.position = 'fixed';
		sliderbar.style.top = sliderbarTop + 'px';
	} else {
		sliderbar.style.position = 'absolute';
		sliderbar.style.top = '300px';
	}
	if (window.pageYOffset >= main.offsetTop) {
		goBack.style.display = 'block';
	} else {
		goBack.style.display = 'none';
	}
})

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

十八、动画函数封装

1. 动画实现原理

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

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

2. 动画函数简单封装

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

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

function animate(obj, target) {
    // 给不同节点对象 obj 设置定时器
    obj.timer = setInterval(function () {
        if (obj.offsetLeft <= target) {
            obj.style.left = obj.offsetLeft + 1 + 'px';
        } else {
            // 清除对象自己的定时器
            clearInterval(timer);
        }
    }, 30);
}

3. 缓动动画效果原理

之前讲的是匀速动画：盒子当前位置 = 盒子当前位置 + 固定值

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

思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
核心算法：每次移动的距离步长 = (目标值 - 现在的位置) / 10
停止的条件是：让当前盒子位置等于目标位置就停止定时器
注意步长值需要取整

PS：
可以让动画函数从 800 移动到 500。当我们点击按钮时候，判断步长是正值还是负值：

如果是正值，则步长往大了取整（Math.ceil()）
如果是负值，则步长向小了取整（Math.floor()）

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

4. 动画函数添加回调函数

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做 回调（callback）。
回调函数写的位置：定时器结束的位置。

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);
            // 判断，回调函数 callback 存在则调用
            if (callback) { 
				callback(); 
			}
	    }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 30);
}

// 回调函数作为实参传入 
animate(span, 800, function () { 
	span.style.backgroundColor = 'pink'; 
});

十九、常见网页特效

1. 网页轮播图

轮播图也称为焦点图，是网页中比较常见的网页特效。

功能需求：

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
图片播放的同时，下面小圆圈模块跟随一起变化。
点击小圆圈，可以播放相应图片。
鼠标不经过轮播图，轮播图也会自动播放图片。
鼠标经过，轮播图模块，自动播放停止。

案例分析：

因为 js 较多，我们单独新建 js 文件夹，再新建 js 文件，引入页面中。
此时需要添加 load 事件。

1.1 动态生成小圆圈

核心思路：小圆圈的个数要跟图片张数一致
所以首先先得到 ul 里面图片的张数（图片放入 li 里面，所以就是 li 的个数）
利用循环动态生成小圆圈（这个小圆圈要放入 ol 里面）
创建节点 createElement('li')
插入节点 ol.appendChild(li)
第一个小圆圈需要添加 current 类

1.2 给小圆圈绑定点击事件

1.2.1 点击圆圈选中圆圈

点击当前小圆圈，就添加 current 类
其余的小圆圈就移除这个 current 类
注意：我们在刚才生成小圆圈的同时，就可以直接绑定这个点击事件了。

1.2.2 点击小圆圈跳转到相应图片

此时用到 animate 动画函数，将 js 文件引入（注意，因为 index.js 依赖 animate.js 所以，animate.js 要写到index.js 上面）
使用动画函数的前提，该元素必须有定位
注意是 ul 移动而不是小 li
滚动图片的核心算法：点击某个小圆圈，就让图片滚动小圆圈的索引号乘以图片的宽度做为 ul 移动距离
1. 此时需要知道小圆圈的索引号，我们可以在生成小圆圈的时候，给它设置一个自定义属性，点击的时候获取这个自定义属性即可。

// 2.动态生成小圆圈，几张轮播图就生成几个小圆圈
for (var i = 0; i < ul.children.length; i++) {
	var li = document.createElement('li');
	// 在生成小圆圈时，同步新增index属性
	li.setAttribute('index', i);
	ol.appendChild(li);
	
	// 3.在创建小圆圈时绑定点击事件，这样所有的li都能绑定到事件
	li.addEventListener('click', function () {
		// 3.1点击圆圈选中圆圈
		// 排他
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		this.className = 'current';
		
		// 3.2点击小圆圈，跳转到相应图片
		var index = this.getAttribute('index');
		// 当我们点击小li，就要把li的索引号赋给num(后续用)
		// 这样以后点击任一圆圈后，再点击左右侧按钮时，就可以从圆圈对应的图片处跳到下或上一张图片了
		num = index;
		// 当我们点击小li，就要把li的索引号赋给circle(后续用)
		circle = index;
		animate(ul, -index * focusWidth);
	})
}
ol.children[0].className = 'current';

1.3 右侧按钮功能

1.3.1 点击右侧按钮图片滚动

声明一个变量 num，点击一次，自增 1，让这个变量乘以图片宽度，就是ul 的滚动距离。
图片无缝滚动原理：
1. 把 ul 第一个 li 克隆一份，放到 ul 的最后面
2. 当图片滚动到克隆的最后一张图片时，让 ul 快速的、不做动画的跳到最左侧：left 为0
3. 同时 num 赋值为0，可以重新开始滚动图片了

1.3.2 点击右侧按钮小圆圈跟随变化

最简单的做法是再声明一个变量 circle，每次点击自增1，注意，左侧按钮也需要这个变量，因此要声明全局变量。
但是图片有5张，我们小圆圈只有4个少一个，必须加一个判断条件
如果 circle == 4 就从新复原为 0

1.3.3 节流阀

功能：防止轮播图按钮连续点击造成播放过快。
原理：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
1. 开始设置一个变量：var flag = true;
2. if(flag) {flag = false; do something}：关闭水龙头
3. 利用回调函数动画执行完毕：flag = true 打开水龙头

// 4.克隆第一张图片
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);

// 5.点击右侧按钮，图片移动一张
var num = 0;
var circle = 0;
// 节流阀
var flag = true;

arrowr.addEventListener('click', function () {
	if (flag) {
		flag = false;
		if (num == ul.children.length - 1) {
			ul.style.left = 0;
			num = 0;
		}
		num++;

		animate(ul, -num * focusWidth, function () {
			flag = true;
		});

		// 6.点击右侧按钮，小圆圈跟随一起变化
		circle++;
		if (circle == ol.children.length) {
			circle = 0;
		}
		circleChange();
	}
})

function circleChange() {
	// 清除其他小圆圈的current类名
	for (var i = 0; i < ol.children.length; i++) {
		ol.children[i].className = '';
	}
	// 留下当前小圆圈类名
	ol.children[circle].className = 'current';
}

// 7.左侧按钮
arrowl.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;
		});

		// 点击左侧按钮，小圆圈跟随一起变化
		if (circle == 0) {
			circle = ol.children.length;
		}
		circle--;
		circleChange();
	}
})

1.4 自动播放功能

添加一个定时器
自动播放轮播图，实际就类似于点击了右侧按钮
此时我们使用手动调用右侧按钮点击事件 arrowr.click()
鼠标经过 focus 就停止定时器
鼠标离开 focus 就开启定时器

// 8.自动播放图片
var timer = setInterval(function () {
	arrowr.click();
}, 2000);

2. 返回顶部

此时可以继续使用我们封装的动画函数
只需要把所有的 left 相关的值改为跟页面垂直滚动距离相关就可以了
页面滚动了多少，可以通过 window.pageYOffset 得到
页面滚动事件，使用 window.scroll(x, y)

document.addEventListener('scroll', function () {
	if (window.pageYOffset >= banner.offsetTop) {
	// 侧边盒子固定住，不受页面滑动影响
		sliderbar.style.position = 'fixed';
		sliderbar.style.top = sliderbar.offsetTop - banner.offsetTop + 'px';
	} else {
		sliderbar.style.position = 'absolute';
		sliderbar.style.top = '300px';
	}

	if (window.pageYOffset >= main.offsetTop) {
		goBack.style.display = 'block';
	} else {
		goBack.style.display = 'none';
	}
})

// 点击返回顶部模块，页面滚动至最上方
goBack.addEventListener('click', function () {
	animate(window, 0);
})

3. 筋斗云

鼠标经过某个小 li，筋斗云跟这到当前小 li 位置
鼠标离开这个小 li，筋斗云复原为原来的位置
鼠标点击了某个小 li，筋斗云就会留在点击这个小 li 的位置

利用动画函数做动画效果
原先筋斗云的起始位置是 0
鼠标经过某个小 li，把当前小 li 的 offsetLeft 位置做为目标值即可
鼠标离开某个小 li，就把目标值设为起始位置
如果点击了某个小 li，就把 li 当前的位置存储起来，作为筋斗云的起始位

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

二十、本地存储

==本地存储特性==

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

1. window.sessionStorage

1.1 特点

生命周期为 关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用

1.2 相关操作

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

删除所有数据：

sessionStorage.clear()

返回一个整数，表示存储在Storage对象中的数据项数量：

sessionStorage.length

返回存储中的第n个key名称：

sessionStorage.key(n)

2. window.localStorage

1.1 特点

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

1.2 相关操作

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

loaclStorage.removeItem(key)

删除所有数据：

localStorage.clear()

返回一个整数，表示存储在Storage对象中的数据项数量：

localStorage.length

返回存储中的第n个key名称：

localStorage.key(n)

3. 案例：记住用户名

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

把数据存起来，用到本地存储
关闭页面，也可以显示用户名，所以用到 localStorage
打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
当复选框发生改变的时候 change 事件
如果勾选，就存储，否则就移除

var nameInput = document.querySelector('#username');
var remember = document.querySelector('#remember');

if (localStorage.getItem('username')) {
    nameInput.value = localStorage.getItem('username');
    remember.checked = true;
}
remember.addEventListener('change', function () {
    if (remember.checked) {
        localStorage.setItem('username', nameInput.value);
    } else {
        localStorage.removeItem('username');
    }
})

Nanying

https://nan-ying.github.io/2023/01/08/JavaScript%E7%9F%A5%E8%AF%86%E6%95%B4%E7%90%86%E5%92%8C%E6%80%BB%E7%BB%932-%E8%BF%9B%E9%98%B6%E7%AF%87/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Nanying !

JavaScript

JavaScript知识整理和总结3-高级篇

2023-01-13 JavaScript

JavaScript

markdown 语法速查

2023-01-04 工具

md语法

JavaScript知识整理和总结2-进阶篇

一、DOM 简介

二、获取元素

1. 根据 ID 获取

2. 根据标签名获取

3. 通过H5新增方法获取

3.1 getElementsByClassName

3.2 document.querySelector

3.3 document.querySelectorAll

4. 获取特殊元素

4.1 获取 body 元素

4.2 获取 html 元素

三、事件基础

1. 事件三要素

2. 执行事件的步骤

3. 鼠标事件

四、操作元素

1. 改变元素内容

2. 改变元素属性

3. 改变样式属性

4. 排他思想

5. 自定义属性

5.1 获取属性值

5.2 设置属性值

5.3 移除属性

H5 规定自定义属性

五、节点操作

1. 节点概述

2. 节点层级

2.1 父级节点

2.2 子结点

2.2.1 第一个子结点

2.2.2 最后一个子结点

2.3 兄弟节点

2.3.1 下一个兄弟节点

2.3.2 上一个兄弟节点

3. 创建节点

3.1 添加节点

3.2 删除节点

3.3 复制节点(克隆节点)

面试题

六、DOM核心

6.1 创建

6.2 增

6.3 删

6.4 改

6.5 查

6.6 属性操作

七、事件高级

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

1.1 addEventListener事件监听方式

attachEvent事件监听方式(兼容)

2. 删除事件(解绑事件)

2.1 removeEventListener删除事件方式

2.2 detachEvent删除事件方式(兼容)

2.3 传统事件删除方式

3. DOM事件流

3.1 应用说明

3.2 捕获阶段

3.3 冒泡阶段

4. 事件对象

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

4.2 事件对象阻止默认行为

4.3 阻止事件冒泡

5. 事件委托

6. 常见的鼠标事件

6.1 禁止鼠标右键与鼠标选中

6.2 鼠标事件对象

7. 常用的键盘事件

7.1 键盘对象属性

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

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

八、BOM概述

1. BOM的构成

九、window 对象的常见事件

1. 窗口加载事件

2. 调整窗口大小事件

十、定时器

1. setTimeout() 定时器

2. clearTimeout() 停止定时器

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

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