蓝旭第五周预习(BOM模型,DOM模型,常用Web API介绍)

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";<!--getElementById 是方法，而 innerHTML 是属性。-->
</script>

</body>
</html>

getElementById 方法

访问 HTML 元素最常用的方法是使用元素的 id。

在上面的例子中，getElementById 方法使用 id="demo" 来查找元素。

innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

3.HTML DOM Document 对象

文档对象代表您的网页。

如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

下面是一些如何使用 document 对象来访问和操作 HTML 的实例。

4.查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法：

通过 id 查找 HTML 元素

DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。

本例查找 id="intro" 的元素：

var myElement = document.getElementById("intro");

通过标签名查找 HTML 元素

本例查找所有 <p> 元素：

var x = document.getElementsByTagName("p");

本例查找 id="main" 的元素，然后查找 "main" 中所有 <p> 元素：


var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

通过类名查找 HTML 元素

如果您需要找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()。

本例返回包含 class="intro" 的所有元素的列表：

var x = document.getElementsByClassName("intro");

通过 CSS 选择器查找 HTML 元素

如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。

本例返回 class="intro" 的所有 <p> 元素列表：

var x = document.querySelectorAll("p.intro");

通过 HTML 对象集合查找 HTML 元素

本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后显示所有元素值：

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

注*:HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

5.改变 HTML 输出流

JavaScript 能够创建动态 HTML 内容：

在 JavaScript 中，document.write() 可用于直接写入 HTML 输出流：

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

运行结果:

注*:千万不要在文档加载后使用 document.write()。这么做会覆盖文档。

6.改变 HTML 内容

修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。

如需修改 HTML 元素的内容，请使用此语法：

document.getElementById(id).innerHTML = new text

本例修改了 <p> 元素的内容：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 可以更改 HTML</h2>

<p id="p1">Hello 小海!</p>

<script>
document.getElementById("p1").innerHTML = "Hello 美合！";
</script>

<p>上面的段落由脚本更改。</p>

</body>
</html>

7.改变属性的值

如需修改 HTML 属性的值，请使用如下语法：本例修改了 <img> 元素的 src 属性的值：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="/i/eg_smile.gif">

<script>
document.getElementById("image").src = "/i/porsche.jpg";
</script>

<p>原始图像是 eg_smile.gif，但脚本将其更改为 porsche.jpg</p>

</body>
</html>

8.JavaScript 表单验证

HTML 表单验证可以通过 JavaScript 完成。

如果表单域 (fname) 为空，该函数会提示一条消息，并返回 false，以防止表单被提交：

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

HTML+JS的实例:

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<h1>JavaScript 验证</h1>

<form name="myForm" action="/demo/html/action_page.php" onsubmit="return validateForm()" method="post">
  姓名: <input type="text" name="fname">
  <input type="submit" value="保存">
</form>

</body>
</html>

运行结果:

9.自动 HTML 表单验证

HTML 表单验证可以由浏览器自动执行：

如果表单字段 (fname) 为空，则 required 属性会阻止提交此表单：

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

10.数据验证

数据验证是确保用户输入干净、正确和有用的过程。

典型的验证任务是：

用户是否填写了所有必填字段？
用户是否输入了有效日期？
用户是否在数字字段中输入了文本？

大多数情况下，数据验证的目的是确保用户输入正确。

验证可以通过许多不同的方法定义，并以许多不同的方式部署。

服务器端验证由 Web 服务器在输入发送到服务器后执行。

在将输入发送到 Web 服务器之前，客户端验证由 Web 浏览器执行。

11.改变 HTML 样式

如需更改 HTML 元素的样式，请使用此语法：

ocument.getElementById(id).style.property = new style

实例:

!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>

<p>第二个段落的样式已被脚本修改。</p>

</body>
</html>

12.使用事件

HTML DOM 允许您在事件发生时执行代码。

当“某些事情”在 HTML 元素上发生时，浏览器会生成事件：

点击某个元素时
页面加载时
输入字段被更改时

您将在本教程的下一章学到更多有关事件的知识。

本例会在用户点击按钮时，更改 id="id1" 的 HTML 元素的样式：

实例:

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">我的标题</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
单击我！</button>

</body>
</html>

运行结果:

13.创建 HTML 动画

基础页面

为了演示如何通过 JavaScript 来创建 HTML 动画，我们将使用一张简单的网页：

实例:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一部 JavaScript 动画</h1>

<div id="animation">我的动画在这里。</div>

</body>
</html>

创建动画容器

所有动画都应该与容器元素关联。

<div id ="container">
    <div id ="animate">我的动画在这里。</div>
</div>

为元素添加样式

应该通过 style = "position: relative" 创建容器元素。

应该通过 style = "position: absolute" 创建动画元素。

#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}

动画代码

JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。

这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。

基础代码是：

var id = setInterval(frame, 5);

function frame() {
    if (/* 测试是否完成 */) {
        clearInterval(id);
    } else {
         /* 改变元素样式的代码 */
    }
}

对应的例子:

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">单击我</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

14. DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应.

JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。

为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

在本例中，当用户点击 <h1> 时，会改变其内容：

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML='不用谢！'">谢谢！</h1>

</body>
</html>

在本例中，从事件处理程序调用函数：

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">点击此文本！</h1>

<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>

</body>
</html>

HTML 事件属性:如需向 HTML 元素分配事件，您能够使用事件属性。

向 button 元素分配 onclick 事件：

<button onclick="displayDate()">试一试</button>

使用 HTML DOM 分配事件:HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：

为 button 元素指定 onclick 事件：

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

注:在上例中，名为 displayDate 的函数被分配到 id="myBtn" 的 HTML 元素。

当点击按钮时将执行函数。

onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。

onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<p id="demo"></p>

<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookie 已启用";
  } else {
    text = "Cookie 未启用";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

onchange 事件

onchange 事件经常与输入字段验证结合使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段内容时，会调用 upperCase() 函数。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</head>
<body>

请输入您的名字：<input type="text" id="fname" onchange="myFunction()">

<p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>

</body>
</html>

运行结果:

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
请把鼠标移上来</div>

<script>
function mOver(obj) {
  obj.innerHTML = "谢谢您"
}

function mOut(obj) {
  obj.innerHTML = "请把鼠标移上来"
}
</script>

</body>
</html>

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
点击鼠标</div>

<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "松开鼠标";
}

function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="谢谢您";
}
</script>

</body>
</html>

15.addEventListener() 方法

添加当用户点击按钮时触发的事件监听器：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

您能够向一个元素添加多个事件处理程序。

您能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。

您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。

您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

向元素添加事件处理程序

当用户点击某个元素时提示 "Hello World!"：

element.addEventListener("click", function(){ alert("Hello World!"); });

您也可以引用外部“命名”函数：

当用户点击某个元素时提示 "Hello World!"：

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

向相同元素添加多个事件处理程序

addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：

实例:

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

您能够向相同元素添加不同类型的事件：

实例:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向 Window 对象添加事件处理程序

addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。

添加当用户调整窗口大小时触发的事件监听器：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

传递参数

当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”：

element.addEventListener("click", function(){ myFunction(p1, p2); });

事件冒泡还是事件捕获？

在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。

事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：
addEventListener(event, function, useCapture);
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：

element.removeEventListener("mousemove", myFunction);

16.DOM 节点

HTML 文档中的所有事物都是节点：

整个文档是文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
所有注释是注释节点

子节点和节点值

DOM 处理中的一种常见错误是认为元素节点中包含文本。

<title id="demo">DOM 教程</title>

注意*:（上面例子中的）元素节点 <title> 不包含文本。

它包含了值为 "DOM 教程" 的文本节点。

文本节点的值能够通过节点的 innerHTML 属性进行访问：

var myTitle = document.getElementById("demo").innerHTML;

访问 innerHTML 属性等同于访问首个子节点的 nodeValue：

var myTitle = document.getElementById("demo").firstChild.nodeValue;

也可以这样访问第一个子节点：

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

以下三个例子取回 <h1> 元素的文本并复制到 <p> 元素中：

<html>
<body>

<h1 id="id01">我的第一张页面</h1>
<p id="id02">Hello!</p>

<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

<html>
<body>

<h1 id="id01">我的第一张页面</h1>
<p id="id02">Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

<html>
<body>

<h1 id="id01">我的第一张页面</h1>
<p id="id02">Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

InnerHTML

在使用 innerHTML 取回 HTML 元素的内容。

不过，学习以上其他的方法有助于理解 DOM 的树结构和导航。

DOM 根节点

有两个特殊属性允许访问完整文档：

document.body - 文档的 body
document.documentElement - 完整文档

<html>
<body>

<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.documentElement</b> 属性。</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

</body>
</html>

nodeName 属性

nodeName 属性规定节点的名称。

nodeName 是只读的
元素节点的 nodeName 等同于标签名
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document

<h1 id="id01">我的第一张网页</h1>
<p id="id02">Hello!</p>

<script>
document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeName;
</script>

注释：nodeName 总是包含 HTML 元素的大写标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本
属性节点的 nodeValue 是属性值
nodeType 属性返回节点的类型。nodeType 是只读的。

<h1 id="id01">我的第一张网页</h1>
<p id="id02">Hello!</p>

<script>
document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeType;
</script>

节点与集合

二.BOM模型

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

Window 对象
`window` 对象是 BOM 的核心，它代表了浏览器窗口本身。所有其他 BOM 对象都是 `window` 对象的属性。

1.获取窗口尺寸

// 获取浏览器窗口的内部宽度和高度
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// 显示窗口尺寸
document.getElementById("demo").innerHTML = "浏览器window宽度: " + w + ", 高度: " + h + ".";

2.打开和关闭窗口

// 打开新窗口
window.open('https://www.example.com', '_blank');
// 关闭当前窗口
window.close();

3.移动和调整窗口尺寸

// 移动当前窗口
window.moveTo(100, 100);
// 调整当前窗口的尺寸
window.resizeTo(500, 500);

4.Screen 对象

`screen` 对象包含了有关用户屏幕的信息。

5.获取屏幕可用尺寸

// 获取屏幕的可用宽度和高度
var availWidth = screen.availWidth;
var availHeight = screen.availHeight;
// 显示屏幕尺寸
console.log("屏幕可用宽度: " + availWidth + ", 高度: " + availHeight);

6.Location 对象

`location` 对象包含了当前页面的 URL 信息。

7.获取和设置 URL

// 获取当前页面的 URL
console.log("当前页面的 URL: " + location.href);
// 设置新的 URL
location.href = 'https://www.example.com';

8 History 对象

`history` 对象包含了用户访问过的 URL 历史。

9.后退和前进

// 后退到上一个页面
history.back();
// 前进到下一个页面
history.forward();

10.Navigator 对象

`navigator` 对象包含了有关浏览器的信息。

11. 获取浏览器信息

// 获取浏览器的名称和版本
console.log("浏览器名称: " + navigator.appName);
console.log("浏览器版本: " + navigator.appVersion);

12.弹窗

BOM 提供了三种系统对话框：警告框、确认框和提示框。

警告框

// 显示警告框
alert("这是一个警告框！");

确认框

// 显示确认框
if (confirm("你确定要继续吗？")) {
    console.log("用户点击了确认");
} else {
    console.log("用户点击了取消");
}

提示框

// 显示提示框
var userInput = prompt("请输入你的名字:", "默认值");
if (userInput !== null) {
    console.log("用户输入: " + userInput);
} else {
    console.log("用户点击了取消");
}

参考资料:

1.http://(https://m.jb51.net/article/185565.htm)

2.https://m.jb51.net/article/176461.htm

3.http://www.cppcns.com/wangluo/javascript/310486.html

三.常用Web API介绍

API 指的是应用程序编程接口（Application Programming Interface）。
Web API 是一组预定义的接口，允许 Web 应用程序与 Web 浏览器或其他应用程序进行交互。
以下是一些常用的 Web API 及其代码实例：

1. Fetch API

Fetch API 提供了一个获取资源的接口，它比传统的 XMLHttpRequest 更加灵活和强大。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. Web Storage API

Web Storage API 提供了在客户端存储键值对的方法，包括 localStorage 和 sessionStorage。

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
let value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清除所有数据
localStorage.clear();

3. Web Sockets API

Web Sockets API 用于在客户端和服务器之间建立一个全双工通信通道。

// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com');

// 监听连接打开事件
socket.addEventListener('open', function (event) {
  socket.send('Hello Server!');
});

// 监听消息事件
socket.addEventListener('message', function (event) {
  console.log('Message from server ', event.data);
});

// 关闭连接
socket.close();

4. Web Audio API

Web Audio API 提供了在 Web 应用程序中处理音频的高级功能。

// 创建音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 加载音频文件
const audioBuffer = await fetch('sound.mp3')
  .then(response => response.arrayBuffer())
  .then(audioBuffer => audioContext.decodeAudioData(audioBuffer));

// 创建音频源
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;

// 连接音频源到扬声器
source.connect(audioContext.destination);

// 播放音频
source.start();

5. WebRTC API

WebRTC API 允许在不需要中间服务器的情况下，进行点对点（Peer-to-Peer）的视频通话或数据共享。

// 获取媒体设备
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    // 使用获取的媒体流
    const video = document.querySelector('video');
    video.srcObject = stream;
    video.play();
  })
  .catch(function(error) {
    console.log('获取媒体设备失败:', error);
  });

6. Geolocation API

Geolocation API 提供了访问设备位置信息的能力。

// 获取当前位置
navigator.geolocation.getCurrentPosition(function(position) {
  console.log('Latitude: ' + position.coords.latitude + ', Longitude: ' + position.coords.longitude);
}, function(error) {
  console.log('获取位置失败:', error);
});

7. Web Notifications API

Web Notifications API 允许网页向用户显示通知。

// 请求权限
Notification.requestPermission().then(function(permission) {
  if (permission === 'granted') {
    // 显示通知
    new Notification('Hello World!', {
      body: 'This is a notification message.'
    });
  }
});

参考资料:

1.https://m.bilibili.com/video/BV1w3411k7Pg/

2.https://www.zhihu.com/tardis/sogou/art/444025501

3.https://www.cnblogs.com/jiangge23/p/17128948.html