Web APIs

小小药虫 · 发表于 2024-4-14 22:41:04

0x01 概述

API 是一些预先定义的函数，提供应用程序与开发人员基于某软件或硬件访问一组例程的能力
Web APIs 是 W3C 组织的标准，是 JS 独有的部分
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API，即 DOM 与 BOM

0x02 DOM

（1）简介

文档对象模型（Document Object Model）是 W3C 组织推荐的处理可扩展标记语言的标准编程接口
- 可以改变网页内容、结构和样式
DOM 树：DOM 对象
graph TB文档-->0[根元素
< html >]-->1[元素
< head >] & 2[元素
< body >]1-->11[元素
< title >]-->111[文本
文档标题]2-->21[元素
< a >] & 22[元素
< h1 >]21-->211[属性
href] & 212[文本
链接文本]22-->221[文本
一级标题]
- 文档：即页面，DOM 中使用 document 表示
- 元素：页面中的任何标签，DOM 中使用 element 表示
- 节点：页面中的任何内容，DOM 中使用 node 表示

（2）获取元素

a. 根据 id 属性

getElementById()
返回带有指定 id 的元素对象

<p id="content">This is a paragraph.</p>

复制代码

b. 根据标签名

getElementByTagName()
返回带有指定标签名的元素对象集合

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

复制代码

也可以用于获取父元素内所有指定标签名的子元素
- 父元素必须为单个对象
1. <ul>
2. <li>Item 1</li>
3. <li>Item 2</li>
4. <li>Item 3</li>
5. </ul>
复制代码

c. 通过 HTML5 新方法

根据类名返回元素对象集合
- getElementByClassName()
1. Item 1
2. Item 2
3. Item 3
复制代码
根据指定选择器返回第一个元素对象
- querySelector()
1. Item 1
2. Item 2
3. Item 3
复制代码
根据指定选择器返回元素对象集合
- querySelectorAll()
1. Item 1
2. Item 2
3. Item 3
复制代码

d. 特殊元素

html 元素
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8" />
5. <title>Document</title>
6. </head>
7. <body>
8. This is a simple page.
10. </body>
11. </html>
复制代码
body 元素
1. <body>
2. This is a simple page.
4. </body>
复制代码

（3）事件基础

JavaScript 可用于创建动态页面，事件是可以被 JavaScript 侦测到的行为
页面中每个元素都可以产生某些可以触发 JavaScript 的事件
1. <p id="content">This is a paragraph.</p>
复制代码
事件三要素包括：
- 事件源：事件被触发的对象
- 事件类型：触发事件的方式
- 事件处理：通过函数处理事件
执行事件的步骤：
- 获取事件源
- 注册（或绑定）事件
- 添加事件处理程序
  - 采用函数赋值形式
常见鼠标事件
事件条件onclick左键<button><button><button><button>点击</button></button></button></button>后触发onmouseover经过时触发onmouseout离开时触发onfocus获得焦点触发onblur失去焦点触发onmousemove移动触发onmouseup弹起触发onmousedown按下触发

（4）操作元素

使用 DOM 操作可以改变网页内容、结构和样式

a. 内容

innerHTML：起始位置到终止位置的全部内容，包括 HTML 标签、空格、换行等
innerText：类似 innerHTML，不包括 HTML 标签、空格、换行等

<p id="content">This is a paragraph.</p> Text in span

复制代码

b. 属性

如 src、href、id、value 等
举例 1：图片切换至下一张
1. <button id="next">下一张图片</button>
2. <img src="https://www.cnblogs.com/./1.png" alt="图片1" />
复制代码
举例 2：显隐密码
1. <input type="password" name="password" autofocus />
2. <label>显示密码</label>
复制代码

c. 样式

行内样式操作
1. [/code]
2. [list]
3. [*]JavaScript 中，样式采取[i]驼峰命名法[/i]，如 backgroundColor 等
4. [*]JavaScript 修改样式操作产生的是[i]行内样式[/i]，CSS 的权重更高
5. [/list]
6. [*]类名样式操作
7. [code]
复制代码
- className 会更改（覆盖）元素的类名
举例 1：密码框格式错误提示信息
1. <input type="password" />
2. <p>输入 3~10 个字符</p>
复制代码
举例 2：（排他思想）
1. <button>按钮 1</button>
2. <button>按钮 2</button>
3. <button>按钮 3</button>
复制代码
举例 3：表格行在鼠标悬浮时换色
1. <table border="1">
2. <thead>
3. <tr>
6. <th>Name</th>
9. <th>Age</th>
12. <th>Gender</th>
13. </tr>
14. </thead>
15. <tbody>
16. <tr>
19. <td>John</td>
22. <td>20</td>
25. <td>Male</td>
26. </tr>
27. <tr>
30. <td>Jane</td>
33. <td>21</td>
36. <td>Female</td>
37. </tr>
38. <tr>
41. <td>Jim</td>
44. <td>22</td>
47. <td>Male</td>
48. </tr>
49. </tbody>
50. </table>
复制代码
举例 4：表单全选的选中与取消
1. <table border="1">
2. <thead>
3. <tr>
6. <th><input type="checkbox" id="selectAll" /></th>
9. <th>Name</th>
12. <th>Age</th>
13. </tr>
14. </thead>
15. <tbody>
16. <tr>
19. <td><input type="checkbox" /></td>
22. <td>John</td>
25. <td>20</td>
26. </tr>
27. <tr>
30. <td><input type="checkbox" /></td>
33. <td>Jane</td>
36. <td>21</td>
37. </tr>
38. <tr>
41. <td><input type="checkbox" /></td>
44. <td>Jim</td>
47. <td>22</td>
48. </tr>
49. </tbody>
50. </table>
复制代码

d. 自定义属性

element.属性获取的是内置属性（即元素本身自带的属性）
element.getAttribute('属性') 获取的是自定义和内置的属性

[/code]
[list]
[*]自定义属性的目的：保存并使用数据
[list]
[*]对于可以简单且可以明文展示的数据可以保存在页面中，省去使用数据库
[/list]
[*]HTML5 规定，自定义属性使用 data- 前缀命名并赋值
[*]HTML5 新增以下方法获取属性值：
[code]

复制代码

（5）节点操作

a. 简介

节点操作主要是利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强
- 兼容性差
节点是页面中的任何内容，DOM 中使用 node 表示，均可使用 JavaScript 访问
一般地，节点至少拥有以下基本属性：
- 节点类型：nodeType
  节点类型nodeType 值HTML 元素1属性2文本3
- 节点名称：nodeName
- 节点值：nodeValue

b. 父节点

复制代码

c. 子节点

获取子节点集合，包括元素节点、文本节点等
复制代码
只获取子节点集合中的元素节点
1. const children = document.getElementById("parent").childNodes;
2. for (let i = 0; i < children.length; i++) {
3. if (children[i].nodeType === 1) {
4. console.log(children[i]);
5. }
6. }
复制代码
或
1. const children = document.getElementById("parent").children;
2. console.log(children);
复制代码
第一个子节点
1. const first = document.getElementById("parent").firstChild;
2. console.log(first);
复制代码
第一个元素子节点
- 推荐方法
  1. const first = document.getElementById("parent").children[0];
  2. console.log(first);
  复制代码
- 存在兼容性问题，需要 IE9+
  1. const first = document.getElementById("parent").firstElementChild;
  2. console.log(first);
  复制代码
最后一个子节点
1. const last = document.getElementById("parent").lastChild;
2. console.log(last);
复制代码
最后一个元素子节点
- 推荐方法
  1. const parent = document.getElementById("parent");
  2. const last = parent.children[parent.children.length - 1];
  3. console.log(last);
  复制代码
- 存在兼容性问题，需要 IE9+
  1. const last = document.getElementById("parent").lastElementChild;
  2. console.log(last);
  复制代码
举例：导航栏及其下拉菜单
2. [list]
3. [*] Item 1
4. [list]
7. [*]Subitem 1
10. [*]Subitem 2
11. [/list]
12. [*] Item 2
13. [list]
16. [*]Subitem 1
19. [*]Subitem 2
20. [/list]
21. [/list]
复制代码

d. 兄弟节点

获取当前元素的下一个兄弟节点
1. [size=6]Title[/size]
3. <p id="content">This is a paragraph.</p>
复制代码
- 元素节点
  1. const p = document.querySelector("h1").nextElementSibling;
  2. console.log(p);
  复制代码
获取当前元素的上一个兄弟节点
1. [size=6]Title[/size]
3. <p id="content">This is a paragraph.</p>
复制代码
- 元素节点
  1. const h1 = document.querySelector("p").previousElementSibling;
  2. console.log(h1);
  复制代码
上述获取兄弟元素节点的方法，均存在兼容性问题，需要 IE9+，为解决此问题，可以封装以下方法：
1. function getNextElementSibling(element) {
2. let next = element.nextSibling;
3. while (next && next.nodeType !== 1) {
4. next = next.nextSibling;
5. }
6. return next;
7. }
9. function getPreviousElementSibling(element) {
10. let prev = element.previousSibling;
11. while (prev && prev.nodeType !== 1) {
12. prev = prev.previousSibling;
13. }
14. return prev;
15. }
复制代码

e. 创建与添加节点

动态创建元素节点：createElement()
1. const p = document.createElement("p");
复制代码
添加节点至指定父节点的子节点的末尾：appendChild()
1. p.innerText = "This is a paragraph"; // 设置标签内容
2. document.body.appendChild(p); // 添加节点
复制代码
在指定元素前面插入元素：insertBefore()
1. const h1 = document.createElement("h1");
2. h1.innerText = "Title";
3. document.body.insertBefore(h1, p);
复制代码
举例：<textarea></textarea>
<button>发布</button>
<ul></ul>留言
1. <textarea></textarea>
2. <button>发布</button>
3. <ul></ul>
复制代码
直接将内容写入页面的文档流：write()
1. [/code]
2. [*]write()、innerHTML()、createElement() 三种方法区别：
3. [list]
4. [*]write() 在当文档流执行完成后，会导致页面重绘
5. [*]innerHTML() 是将内容写入某个 DOM 节点，适合创建多个元素，结构稍复杂
6. [*]createElement() 结构清晰，效率较低
7. [/list]
8. [/list][size=4]f. 删除节点[/size]
10. [list]
11. [*]删除一个节点：removeChild()
12. [code]<p id="content">This is a paragraph.</p>删除节点
复制代码
举例 1：删除留言（在“<textarea></textarea>
<button>发布</button>
<ul></ul>留言”案例的基础上修改）
1. const btn = document.querySelector("button");btn.onclick = function () { const text = document.querySelector("textarea"); if (text) { const ul = document.querySelector("ul"); const li = document.createElement("li"); li.innerHTML = text.value + "[url=https://www.cnblogs.com/javascript:;]删除[/url]"; ul.insertBefore(li, ul.firstChild); const as = document.querySelectorAll("a"); for (let i = 0; i < as.length; i++) {
3. as[i].onclick = function () {
5. // this.parentNode.remove();
7. ul.removeChild(this.parentNode);
9. }; } } else { alert("<textarea></textarea>
10. <button>发布</button>
11. <ul></ul>内容不能为空"); }};
复制代码
举例 2：动态表格
1. [table]
3. [tr]
5. 姓名
7. 年龄
9. 操作 [/tr] [/table]
复制代码

g. 复制节点

克隆一个节点：cloneNode()
1. <p id="content">This is a paragraph.</p>
复制代码
其中，cloneNode() 的参数默认为 false，即浅拷贝，不会拷贝子节点

0x03 事件高级

（1）注册事件

a. 简介

注册事件又称绑定事件，给元素添加事件
注册事件方式包括：
- 传统方式
  - 以 on 为前缀的事件，如 onclick、onchange 等
  - 注册事件的唯一性，即同一元素同一事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的
- 方法监听注册方式
  - 采用 W3C 标准
  - 使用 addEventListener() 监听
  - IE9 之前可以使用 attachEvent() 代替
  - 同一元素同一事件可以注册多个监听器，并按注册顺序执行

b. addEventListener

将指定的监视器注册到目标对象上，当该对象触发指定事件时，就会执行事件处理函数
语法：addEventListener(type, listener[, useCapture])
- type：事件类型字符串，如 click、change 等
- listener：事件处理函数，即监听函数
- useCapture：（可选）是否在捕获阶段触发，是布尔值，默认 false
  
  “事件捕获”在本章节第（3）节说明
1. <button><button><button><button>点击</button></button></button></button>
复制代码

c. attachEvent

将指定的监视器注册到目标对象上，当该对象触发指定事件时，就会执行指定的回调函数
语法：attachEvent(eventNameWiteOn, callback)
- eventNameWithOn：事件类型字符串，如 onclick、onchange
- callback：回调函数，用于事件处理

d. 兼容性解决方案

兼容性处理原则：首先照顾大多数浏览器，再处理特殊浏览器

function addEventListener(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, eventName);
} else if (element.attachEvent) {
element.attachEvent(eventName, callback);
} else {
element["on" + eventName] = callback;
}
}

复制代码

（2）删除事件

删除事件又称解绑事件
删除事件方式包括：
- 传统方式
  1. <button><button><button><button>点击</button></button></button></button>
  复制代码
- 方法监听删除方式
  - 使用 removeEventListener() 删除
    <button><button><button><button>点击</button></button></button></button>
    复制代码
  - IE9 之前可以使用 detachEvent() 代替
兼容性解决方案
1. function removeEventListener(element, eventName, callback) {
2. if (element.removeEventListener) {
3. element.removeEventListener(eventName, callback);
4. } else if (element.attachEvent) {
5. element.detachEvent("on" + eventName, callback);
6. } else {
7. element["on" + eventName] = null;
8. }
9. }
复制代码

（3）DOM 事件流

事件流描述的是从页面中接收事件的顺序
DOM 事件流：事件发生时会在元素节点之间按照特定顺序的传播过程
DOM 事件流分三个阶段：
- 捕获阶段
  - 事件捕获：由 DOM 最顶层节点<button>开始</button>，逐级向下传播到最具体的元素接收的过程
- 当前目标阶段
- 冒泡阶段
  - 事件冒泡：事件<button>开始</button>时，由最具体的元素接收，之后逐级向上传播到 DOM 最顶层节点的过程
举例：注册事件采取捕获阶段触发，先父元素节点，后子元素节点
复制代码
部分事件没有冒泡，如 onblur 等

（4）事件对象

事件对象代表事件的状态，是事件一系列相关数据的集合，包括鼠标坐标等数据
在以下代码中，形参 event 就是事件对象
1. <button><button><button><button>点击</button></button></button></button>
复制代码
IE6~8 使用 window.event 写法，兼容性写法为：
1. e = event || window.event;
复制代码
常见属性和方法
属性方法说明target返回触发事件的对象srcElement返回触发事件的对象（在 IE6~8 中使用）type返回事件类型，如 click 等stopPropagation()阻止冒泡cancelBubble阻止冒泡（在 IE6~8 中使用）preventDefault()阻止默认事件returnValue阻止默认事件（在 IE6~8 中使用）
阻止事件冒泡的兼容性写法
1. if (e & e.stopPropagation) {
2. e.stopPropagation();
3. } else {
4. window.event.cancelBubble = true;
5. }
复制代码

（5）事件委托

事件委托又称事件代理，在 jQuery 中称为事件委派
原理：将每个子节点的事件监听器统一设置在其父节点上，利用冒泡原理影响每个子节点
作用：提高性能
举例：
1. <ul>
2. <li>Item 1</li>
3. <li>Item 2</li>
4. <li>Item 3</li>
5. <li>Item 4</li>
6. <li>Item 5</li>
7. <li>Item 6</li>
8. </ul>
复制代码

（6）常用鼠标事件

禁用右键菜单
1. document.addEventListener("contextmenu", function (e) {
2. e.preventDefault();
3. });
复制代码
禁止鼠标选中
1. document.addEventListener("selectstart", function (e) {
2. e.preventDefault();
3. });
复制代码
举例：跟随鼠标移动的方框
1. [/code]
2. [*]mouseenter 与 mouseover 的区别在于：mouseenter 不会冒泡
3. [list]
4. [*]mouseenter 只在鼠标经过盒子自身时触发，而 mouseover 经过其子盒子也会触发
5. [/list][code]
复制代码

（7）常用键盘事件

常用键盘事件
事件说明keyup按键松开时触发keydown按键按下时触发keypress按键按下时触发（区别大小写，不识别功能键，如 Ctrl 等）keyCode返回按键的 ASCII 值（区分大小写）
按键执行顺序：
graph LRkeydown-->keypress-->keyup
举例：按 / 键选中输入框
1. [/code]
2. [/list][size=6]0x04 BOM[/size]
4. [size=5]（1）简介[/size]
6. [list]
7. [*]浏览器对象模型（Browser Object Model）提供了独立于内容而与浏览器窗口进行交互的对象
8. [*]BOM 由一系列相关对象构成
9. [*]BOM 缺乏标准，最初是 Netscape 浏览器标准的一部分
10. [*]与 DOM 对比：
11. [table][tr]DOMBOM[/tr][tr][td]名称[/td][td]文档对象模型[/td][td]浏览器对象模型[/td][/tr][tr][td]对象[/td][td]文档[/td][td]浏览器[/td][/tr][tr][td]顶级对象[/td][td]document[/td][td]window[/td][/tr][tr][td]功能[/td][td]操作页面元素[/td][td]浏览器窗口交互[/td][/tr][tr][td]标准[/td][td]W3C[/td][td]根据浏览器厂商[/td][/tr][/table]
12. [*]BOM 构成：
13. graph TBwindow-->document & location & navigation & screen & history
14. [list]
15. [*]document：BOM 中包含 DOM
16. [*]window：是浏览器的顶级对象，既是 JS 访问浏览器窗口的接口，也是全局对象
17. [list]
18. [*]调用 window 对象方法时可以省略，如 alert()，除了 window.name
19. [/list]
20. [/list]
21. [/list][size=5]（2）window 对象常见事件[/size]
23. [list]
24. [*]窗口加载完成事件
25. [code]window.onload = function () {};
26. // 或
27. window.addEventListener("load", function () {});
复制代码
- DOM 加载完成事件（需要 IE9+）
  1. window.addEventListener("DOMContentLoaded", function () {});
  复制代码
窗口大小调整事件
1. window.onresize = function () {};
2. // 或
3. window.addEventListener("resize", function () {});
复制代码

（3）定时器

a. timeout

设置计时器
- 语法：setTimeout(callback[, timeMS])
- 作用：经过指定毫秒后执行回调函数
清除定时器
- 语法：clearTimeout(timer)
- 作用：清除 setTimeout() 设置的定时器
举例：
1. let timer = setTimeout(function() {}, 1000);
2. clearTimeout(timer);
复制代码

b. interval

设置计时器
- 语法：setInterval(callback[, timeMS])
- 作用：间隔指定毫秒后重复执行回调函数
- 举例：倒计时器
  1. 00
  2. 00
  3. 00
  复制代码
清除定时器
- 语法：clearInterval(timer)
- 作用：清除 setInterval() 设置的定时器
举例：发送短信间隔
1. 手机号: <input type="number" /><button>获取验证码</button>
复制代码

（4）执行队列

a. 执行过程

JavaScript 的特点是单线程，即同一时间只做一件事
- 缺点：当 JS 执行时间过长，会导致页面渲染不连贯，产生阻塞的感受
HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，即同步与异步
- 同步：顺序依次执行
- 异步：多任务同时执行
同步任务都在主线程上执行，形成执行栈
异步任务通过回调函数实现，分为以下类型：
- 普通事件：如 click 等
- 资源加载：如 load 等
- 定时器
异步任务相关回调函数会被添加到任务队列（又称消息队列）中

b. 执行机制

JavaScript 执行机制如下：
- 先执行执行栈中的同步任务
- 将异步任务放入任务队列
- 完成执行栈后，按次序读取任务队列，将异步任务放入执行栈并执行
由于主线程不断地重复获取任务、执行任务，因此该机制称为事件循环

（5）location 对象

用于获取或设置窗体的 URL，并且可以用于解析 URL
属性：
属性说明href获取或设置 URLhost返回主机（域名）port返回端口号pathname返回路径search返回参数hash返回片段
- 举例：获取 URL 中携带的参数
  1. [/code]
  2. [/list]
  3. [*]常用方法：
  4. [table][tr]方法说明[/tr][tr][td]assign()[/td][td]重定向页面，与属性 href 类似，可以跳转页面[/td][/tr][tr][td]replace()[/td][td]替换当前页面，替换后不能后退[/td][/tr][tr][td]reload()[/td][td]重新加载页面，相当于刷新或 F5
  5. 参数为 true 表示强制刷新或 Ctrl+F5[/td][/tr][/table]
  6. [/list][size=5]（6）navigator 对象[/size]
  8. [list]
  9. [*]包含有关浏览器的信息
  10. [*]举例：根据终端（浏览器）的不同跳转相应的页面
  11. [code]if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|iPad|ios|Android|BlackBerry|IEMobile|Opera Mini|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
  12. window.location.href = "https://m.example.com/"; // Mobile
  13. } else {
  14. window.location.href = "https://www.example.com/"; // PC
  15. }
  复制代码
（7）history 对象
- 用于与浏览器历史记录进行交互，包含用户（在浏览器窗口中）访问过的 URL
- 方法：
  方法说明back()后退forward()前进go(arg)参数为正数：前进 arg 个页面
  参数为负数：后退 arg 个页面
- 常见于 OA 办公系统
0x05 PC 端网页特效

（1）元素偏移量 offset

a. 简介
- 动态获取元素的位置（偏移）、大小等
  - 获取元素距离带有定位父元素的位置
  - 获取元素自身的大小（宽高）
  - 获取的数值不携带单位
- 常用属性：
  属性说明offsetParent返回作为该元素带有定位的父级元素offsetTop返回元素相对带有定位父元素上方的偏移offsetLeft返回元素相对带有定位父元素左边框的偏移offsetWidth返回自身包括内边距、边框、内容的宽度offsetHeight返回自身包括内边距、边框、内容的高度
- 相比之下，offset 更适合获取元素的大小与位置，而 style 更适合修改元素
b. 获取鼠标在盒子中的坐标
1. [/code][size=4]c. 拖动模态框[/size]
3. [list]
4. [*]HTML
5. [code]<button><button><button><button>点击</button></button></button></button>登录 [size=4]登录框标题[/size]
7. 关闭
复制代码
CSS
1. #mask {
2. width: 100%;
3. height: 100%;
4. position: fixed;
5. top: 0;
6. left: 0;
7. background-color: rgba(0, 0, 0, 0.3);
8. display: none;
9. }
10. #card {
11. width: 400px;
12. height: 300px;
13. position: fixed;
14. top: 50%;
15. left: 50%;
16. transform: translate(-50%, -50%);
17. z-index: 10;
18. background-color: white;
19. border-radius: 30px;
20. box-shadow: 0 0 10px rgb(0, 0, 0);
21. text-align: center;
22. line-height: 40px;
23. display: none;
24. }
25. #header {
26. width: 100%;
27. margin-top: 0;
28. border-bottom: 2px solid rgba(0, 0, 0, 0.3);
29. cursor: move;
30. }
复制代码
JavaScript
1. const mask = document.querySelector("#mask");
2. const card = document.querySelector("#card");
3. const header = document.querySelector("#header");
4. document.querySelector("#open").addEventListener("click", () => {
5. mask.style.display = "block";
6. card.style.display = "block";
7. });
8. document.querySelector("#close").addEventListener("click", () => {
9. mask.style.display = "none";
10. card.style.display = "none";
11. });
12. header.addEventListener("mousedown", function (e) {
13. e.preventDefault();
14. let x = e.clientX - card.offsetLeft;
15. let y = e.clientY - card.offsetTop;
16. function move(e) {
17. card.style.left = e.pageX - x + "px";
18. card.style.top = e.pageY - y + "px";
19. }
20. document.addEventListener("mousemove", move);
21. document.addEventListener("mouseup", function (e) {
22. document.removeEventListener("mousemove", move);
23. });
24. });
复制代码

d. 图片放大镜

HTML
3. [align=center][img]https://www.cnblogs.com/./image.jpg[/img][/align]
复制代码
CSS
1. #image {
2. position: relative;
3. width: 200px;
4. height: 200px;
5. background-image: url("https://www.cnblogs.com/./image.jpg");
6. background-size: cover;
7. border: 1px solid black;
8. }
9. #mask {
10. position: absolute;
11. top: 0;
12. left: 0;
13. width: 100px;
14. height: 100px;
15. background-color: red;
16. opacity: 0.5;
17. cursor: move;
18. display: none;
19. }
20. #preview {
21. position: absolute;
22. top: 0;
23. left: 210px;
24. width: 300px;
25. height: 300px;
26. overflow: hidden;
27. z-index: 10;
28. border: 1px solid black;
29. display: none;
30. }
31. #previewImg {
32. position: absolute;
33. top: 0;
34. left: 0;
35. }
复制代码
JavaScript
1. const image = document.querySelector("#image");
2. const mask = document.querySelector("#mask");
3. image.addEventListener("mouseover", () => {
4. mask.style.display = "block";
5. preview.style.display = "block";
6. });
7. image.addEventListener("mouseout", () => {
8. mask.style.display = "none";
9. preview.style.display = "none";
10. });
11. image.addEventListener("mousemove", function (e) {
12. let x = e.pageX - this.offsetLeft;
13. let y = e.pageY - this.offsetTop;
14. let maskX = x - mask.offsetWidth / 2;
15. let maskY = y - mask.offsetHeight / 2;
16. let maskMaxX = this.offsetWidth - mask.offsetWidth;
17. let maskMaxY = this.offsetHeight - mask.offsetHeight;
18. if (maskX < 0) {
19. maskX = 0;
20. } else if (maskX > maskMaxX) {
21. maskX = this.offsetWidth - mask.offsetWidth;
22. }
23. if (maskY < 0) {
24. maskY = 0;
25. } else if (maskY > maskMaxY) {
26. maskY = this.offsetHeight - mask.offsetHeight;
27. }
28. mask.style.left = maskX + "px";
29. mask.style.top = maskY + "px";
31. const preview = document.querySelector("#preview");
32. const previewImg = document.querySelector("#previewImg");
33. let previewMaxX = previewImg.offsetWidth - preview.offsetWidth;
34. let previewMaxY = previewImg.offsetHeight - preview.offsetHeight;
35. previewImg.style.left = -((maskX * previewMaxX) / maskMaxX) + "px";
36. previewImg.style.top = -((maskY * previewMaxY) / maskMaxY) + "px";
37. });
复制代码

（2）元素可视区 client

获取元素可视区相关信息，如边框大小、元素大小等
常见属性：
属性说明clientTop返回元素上边框的大小clientLeft返回元素左边框的大小clientWidth返回自身包括内边距、内容的宽度clientHeight返回自身包括内边距、内容的高度

立即执行函数：(function() {})()
主要作用：创建一个独立的作用域

（3）元素滚动 scroll

获取元素的大小、滚动距离等
如果浏览器的高度（宽度）不足以显示全部内容，则会自动出现滚动条
- 当滚动条向下（向右）滚动后，未显示在当前窗口的页面称为被卷去的页面
- 滚动条在滚动时会触发 onscroll 事件
常见属性：
属性说明scrollTop返回被卷去的上侧距离scrollLeft返回被卷去的左侧距离scrollWidth返回自身内容的宽度scrollHeight返回自身内容的高度
被卷去的头部兼容性写法
1. function getScroll() { return { left:
3. window.pageXOffset ||
5. document.documentElement.scrollLeft ||
7. document.body.scrollLeft ||
9. 0, top:
11. window.pageYOffset ||
13. document.documentElement.scrollTop ||
15. document.body.scrollTop ||
17. 0, };}
复制代码
举例：侧边栏
- HTML
  1. <header></header>
  4. <button>回到顶部</button>
  复制代码
- CSS
  1. header {
  2. width: 90%;
  3. height: 200px;
  4. background-color: #ccc;
  5. margin: 10px auto;
  6. }
  7. #content {
  8. width: 90%;
  9. height: 1000px;
  10. background-color: #eee;
  11. margin: 10px auto;
  12. }
  13. #bar {
  14. position: absolute;
  15. top: 300px;
  16. right: 0;
  17. width: 30px;
  18. height: 150px;
  19. background-color: #ddd;
  20. }
  21. button {
  22. display: none;
  23. position: absolute;
  24. top: 50%;
  25. left: 50%;
  26. transform: translate(-50%, -50%);
  27. }
  复制代码
- JavaScript
  1. const bar = document.querySelector("#bar");
  2. const btn = document.querySelector("button");
  3. let ctnTop = document.querySelector("#content").offsetTop;
  4. let barTop = bar.offsetTop - ctnTop;
  5. document.addEventListener("scroll", () => {
  6. if (window.scrollY > ctnTop) {
  7. bar.style.position = "fixed";
  8. bar.style.top = barTop + "px";
  9. btn.style.display = "block";
  10. } else {
  11. bar.style.position = "absolute";
  12. bar.style.top = "300px";
  13. btn.style.display = "none";
  14. }
  15. });
  16. btn.addEventListener("click", () => {
  17. window.scrollTo({
  18. top: 0,
  19. behavior: "smooth",
  20. });
  21. });
  复制代码

（4）动画函数封装

原理：通过定时器 setInterval() 不断移动盒子的位置
- 盒子需要定位才能使用动画
1. <button>开始</button>
复制代码
动画函数的简单封装需要传递两个参数：动画对象、移动距离
1. function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(() => { if (obj.offsetLeft >= target) {
3. clearInterval(obj.timer); } obj.style.left = obj.offsetLeft + 1 + "px"; }, 25);}document.querySelector("button").addEventListener("click", () => { animate(document.querySelector("div"), 500);});
复制代码
缓动动画是让元素的运动速度发生变化（即，将移动距离递减）
- 步长需要取整
- 正步长向上取整，负步长向下取整
1. function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(() => { if (obj.offsetLeft === target) {
3. clearInterval(obj.timer); } let step = (target - obj.offsetLeft) / 50; step = step > 0 ? Math.ceil(step) : Math.floor(step); obj.style.left = obj.offsetLeft + step + "px"; }, 25);}
复制代码
在动画函数中引入回调函数
1. function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(() => { if (obj.offsetLeft === target) {
3. clearInterval(obj.timer);
5. if (callback) callback(); } let step = (target - obj.offsetLeft) / 50; step = step > 0 ? Math.ceil(step) : Math.floor(step); obj.style.left = obj.offsetLeft + step + "px"; }, 25);}document.querySelector("button").addEventListener("click", () => { animate(document.querySelector("div"), 500, () => { alert("移动结束"); });});
复制代码
将动画函数封装到单独的 JavaScript 文件中
- 创建 animate.js
  1. /** * 实现元素的平滑移动动画。 * @param {Object} obj - 需要进行动画的DOM对象。 * @param {number} target - 目标位置，即元素移动到的左偏移量。 * @param {Function} callback - 动画完成后的回调函数。 */function animate(obj, target, callback) { // 停止当前正在进行的动画 clearInterval(obj.timer); // 设置定时器，每25毫秒执行一次动画逻辑 obj.timer = setInterval(() => { // 当元素移动到目标位置时，停止动画 if (obj.offsetLeft === target) {
  3. clearInterval(obj.timer);
  5. // 如果设置了回调函数，则动画完成后执行回调
  7. if (callback) callback(); } // 计算每次移动的距离，平滑移动 let step = (target - obj.offsetLeft) / 50; // 确保移动方向正确，且移动步长为整数 step = step > 0 ? Math.ceil(step) : Math.floor(step); // 更新元素的左偏移量 obj.style.left = obj.offsetLeft + step + "px"; }, 25);}
  复制代码
- 在页面中使用
  1. [/code]
  2. [/list]
  3. [/list][size=6]0x06 本地存储[/size]
  5. [list]
  6. [*]本地存储特性：
  7. [list]
  8. [*]数据存储在用户浏览器中
  9. [*]存储与读写方便
  10. [*]容量大（sessionStorage - 5M，localStorage - 20M）
  11. [*]只能存储字符串，可以将对象使用 JSON.stringify() 编码后存储
  12. [/list]
  13. [/list][size=5]（1）sessionStorage[/size]
  15. [list]
  16. [*]当浏览器窗口关闭后，sessionStorage 生命周期终止
  17. [*]在同一窗口（页面）下，数据可以共享
  18. [*]以[b]键值对[/b]的形式存储和使用
  19. [*]举例：
  20. [code]<input type="text" />
  21. <button id="save">存储</button>
  22. <button id="read">读取</button>
  23. <button id="delete">删除</button>
  24. <button id="clear">清空</button>
  复制代码
（2）localStorage
- 生命周期永久有效，只能手动删除
- 在同一浏览器下，数据可以共享
- 以键值对的形式存储和使用
- 举例：
  1. <input type="text" />
  2. <button id="save">存储</button>
  3. <button id="read">读取</button>
  4. <button id="delete">删除</button>
  5. <button id="clear">清空</button>
  复制代码
（3）记住用户名
1. <input type="text" id="username" />
2. <input type="checkbox" id="rememberMe" />
3. <label for="rememberMe">记住我</label>
复制代码
来源:https://www.cnblogs.com/SRIGT/p/18134525
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

Web APIs

本帖子中包含更多资源