基于javeSprict的WebAPI详解

今天药忘吃喽~ 2024-03-17 19:50 45阅读 0赞

## 一、前言 ##

作为后端开发，前端其实只需要了解一些就可以了，不需要了解多么深入。在前面我们已经学习了ECMAScript:的基础语法部分，还有DOM API和BOM API需要学习。  
DOM API主要负责操作页面结构。  
所有的WebAPI可以参考下面这个网址里面的信息  
https://developer.mozilla.org/zh-CN/docs/Web/API

那么什么是DOM呢？  
DOM全称为Document Object Model.（文件项目模板）所以DOM实际就是W3C 标准给我们提供了一系列的函数, 让我们可以操作:网页内容、网页结构、网页样式。

DOM 树  
一个页面的结构是一个树形结构, 称为 DOM 树.  
基于DMO的页面结构如下图  
![在这里插入图片描述][c950158dc2c74bd3bc3e7c302ecb9712.png]DOM的树型结构如下图  
![在这里插入图片描述][d4e566f1e21845879c0fe49329584d1d.png]

*  文档: 一个页面就是一个 文档, 使用 document 表示.
 *  元素: 页面中所有的标签都称为 元素. 使用 element 表示.
 *  节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.

## 二、常用的WebAPI介绍 ##

### 2.1querySelector ###

这个是 HTML5 新增的, IE9 及以上版本才能使用.  
前面的几种方式获取元素的时候都比较麻烦. 而使用 querySelector 能够完全复用前面学过的 CSS 选择 器知识, 达到更快捷更精准的方式获取到元素对象.

var element = document.querySelector(selectors);

1.  electors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString。 该字符串必须是有效的 CSS选择器字符串（常见的ID选择器\#a；类选择器.a；子选择器 a b；标签选择器a）；如果不是，则引发 SYNTAX\_ERR异常。
2.  只返回文档中与指定的一组CSS选择器匹配的第一个元素的 html元素element对象。
3.  如果您需要与指定选择器匹配的所有元素的列表，则应该使用querySelectorAll()可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素。

示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <div class="box">
            abc
        </div> 
        <div id="id">
            def
        </div>
        <h3>
            <span>
                <input type="text">
            </span>
        </h3> 
    <script>
        let elem1 = document.querySelector('.box'); 
        console.log(elem1);
        let elem2 = document.querySelector('#id'); 
        console.log(elem2);
        let elem3 = document.querySelector('h3 span input'); 
        console.log(elem3);
        let elems = document.querySelectorAll('div');
        console.log(elems);
    </script> 
    </body>
    </html>

![在这里插入图片描述][495e525749bc451a8a004c488a61a7a6.png]

注意：

1.  document.querySelector()实参一定要是也给字符串类型，必须用’'括起来再输入，否则报错。
2.  document.querySelectorAll()返回的实际是一个类型为div的数组。
3.  elem1、elem2、elem3、elems、不是胡乱命名的，而是一定要这样命名，否则会报错

let elemms = document.querySelectorAll('div');//变量命名为elemms就会报错。
        console.log(elems);

![在这里插入图片描述][f44afd9c51294be2a79835f86bd1ef7b.png]

## 三、事件 ##

### 3.1事件是什么 ###

要能够和用户交互，就需要知道用户在浏览器中做了什么，也就称之为事件，代码就是需要做的就是针对这些事件给出响应。  
常见的事件比如：鼠标单击、鼠标双击、鼠标移动、键盘按下、调整浏览器窗口等。

### 3.2事件三要素 ###

1.  事件源: 哪个元素触发的
2.  事件类型: 是点击, 选中, 还是修改?
3.  事件处理程序: 进一步如何处理. 往往是一个回调函数.

### 3.3事件绑定 ###

在前端设计的时候我们就需要根据各种事件进行针对性的处理，对每一个事件的发生进行预估并写好相应的处理代码，这就是事件绑定。  
举个例子

这就是一个最简单的事件绑定，在点击abc之后弹出hello的弹窗。  
在元素中使用onxxxx来表示一旦触发某个事件就执行啥。但是这种方式在实际开发中并不推荐，这实际就将html和js混在一起用了，不行！！！

所以我就需要使用 `document.querySelector()`将这个元素取出

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <div class="box">
            abc
        </div> 
    
        <script>
            let elem1 = document.querySelector('.box');
            elem1.onclick = function(){
         
                alert('hello')
            }
        </script>
    
    </body>
    </html>

![在这里插入图片描述][76394dc046394c6f9413c18fa946ce45.png]

1.  elem1 就是事件源.
2.  点击(onclick)就是事件类型
3.  function 这个匿名函数就是事件处理程序
4.  elem1.onclick = function() 这个操作称为 注册事件/绑定事件
5.  这个匿名函数相当于一个回调函数, 这个函数不需要程序猿主动来调用, 而是交给浏览器, 由浏览器 自动在合适的时机(触发点击操作时) 进行调用.

## 四、操作元素 ##

### 4.1获取属性 innerHTML ###

`Element.innerHTML` 属性设置或获取HTML语法表示的元素的后代.

**1. 读取页面内容**

![在这里插入图片描述][21ef30fa789f445d9d707d974b7e49e9.png]

**2. 写入或者修改页面内容**

<body>
        <div class="box">
            abc
        </div> 
        <script>
            let elem1 = document.querySelector('.box');
            console.log(elem1.innerHTML); 
            elem1.innerHTML = 'abcd';
        </script>
    
    </body>

![在这里插入图片描述][781e26dbd8084e0ba0c71b8fa120ad0a.png]

<body>
        <div class="box">
            abc
        </div> 
    
        <script>
            let elem1 = document.querySelector('.box');
            console.log(elem1.innerHTML); 
            elem1.innerHTML = '<p>只因你太美<p>';
            console.log(elem1.innerHTML); 
        </script>
    
    </body>

![在这里插入图片描述][5d54942f53364dc1b1ba7293abbcd346.png]  
可以看到 innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空格和换行.

### 4.2获取/修改元素属性 ###

可以通过 Element 对象的属性来直接修改, 就能影响到页面显示效果。  
HTML中标签的属性也会在JS中映射一个对象来表示这个属性。

比如说来一个案例点击一个图片这个图片就会更改为另一个图片

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <img src="坤坤.png" alt="哎呀图片不见了！" >
        <script>
            let img1 = document.querySelector('img');
            console.log(img1.src);
            console.log(img1.title);
            img1.onclick = function(){
        
                img1.src = "鸡你太美.jpg";
                img1.title = "鸡你太美";
                console.log(img1.src);
                console.log(img1.title);
            }   
        </script>
    </body>
    </html>

![在这里插入图片描述][65003a8d907a457aac99ea9e4e6fddb3.png]  
点击之后  
![在这里插入图片描述][2600e8c71031459aafa707f01ed1b44f.png]  
此外我们可以通过.dir来获取一个元素（对象）的所有属性。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <img src="坤坤.png" alt="哎呀图片不见了！" >
        <script>
            let img1 = document.querySelector('img');
            console.dir(img1);     
        </script>
    
    </body>
    </html>

![在这里插入图片描述][e5058c10ec39435da5c21d74ab4132ed.png]

### 4.3获取/修改表单元素属性 ###

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

*  value: input 的值.
 *  disabled: 禁用
 *  checked: 复选框会使用
 *  selected: 下拉框会使用
 *  type: input 的类型(文本, 密码, 按钮, 文件等)

我们这里用input来举例  
我们来一个案例

设置一个输入框，一个按钮，输入一个文本后，点击按钮就可以获取一次输入的文本，并打印。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
    
        <input type="text">
        <button>点我一下</button>
        <script>
            let input = document.querySelector('input');
            let button = document.querySelector('button');
            button.onclick = function(){
        
                console.log(input.value);
            }
        </script>
    </body>
    </html>

![在这里插入图片描述][79683f23b24c4292906340fe0d0f720a.png]  
![在这里插入图片描述][ee7cd6de40ca4fb9a64eb65f8152c496.png]

1.  获取input标签里面的输入内容使用的是`input.value`;而不是使用`innerHTML`，因为input里面是单标签，innerHTML\`获取的实际就可以理解为是两个<>中间的东西，以字符串形式返回，但是单标签根本没有这个东西。

再来几个应用场景

设置一个播放按钮, 在 “播放” - “暂停” 之间切换.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <button>播放</button>
        <script>
           let button  = document.querySelector('button');
           button.onclick = function(){
        
                if(button.innerHTML == '播放'){
        
                    button.innerHTML = '暂停';
                }else{
        
                    button.innerHTML = '播放';
                }
           }
           
        </script>
    </body>
    </html>

![在这里插入图片描述][5cc96d719f3c4ed992e194503031fd6c.png]  
![在这里插入图片描述][750b625ded9944c89d765547715dbcbc.png]  
**点击计数  
使用一个输入框输入初始值(整数). 每次点击按钮, 值 + 1**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <button>1</button>
        <script>
           let button  = document.querySelector('button');
           button.onclick = function(){
        
                button.innerHTML += 1;
           }
           
        </script>
    </body>
    </html>

这样写是不对的，达不到预期效果  
![在这里插入图片描述][51302b8a503b46e4a1d208a97de9cba4.png]

**每次点击会以字符串的形式在后面加上一个字符1。**

所以应该像下面这样

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <input type="text" id="text" value="0">
        <input type="button" id="btn" value='点我+1'> 
        <script>
            var text = document.querySelector('#text'); 
            var btn = document.querySelector('#btn');
            btn.onclick = function () {
         
                var num =+ text.value; 
                console.log(num);
                num++;
                text.value = num; 
            }
        </script>
    </body>
    </html>

![在这里插入图片描述][adb976fefcfc4c7cab468d58c3e71c85.png]

1.  input 具有一个重要的属性 value, 这个 value 决定了表单元素的内容。
2.  如果是输入框, value 表示输入框的内容, 修改这个值会影响到界面显式; 在界面上修改这个值也会 影响到代码中的属性。
3.  如果是按钮, value 表示按钮的内容. 可以通过这个来实现按钮中文本的替换。

**制作一个按钮可以隐藏和显示密码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <input type="text">
        <button>隐藏密码</button>
        <script>
            let input = document.querySelector('input');
            let button = document.querySelector('button');
            button.onclick = function(){
        
                if(input.type == 'text'){
        
                input.type = 'password';
                button.innerHTML = '显示密码';
            }
            else{
        
                input.type = 'text';
                button.innerHTML = '隐藏密码';
            }      
        }
        </script>
    </body>
    </html>

### 4.4获取/修改样式属性 ###

#### 1. 行内样式操作 ####

element.style.[属性名] = [属性值]; 
    element.style.cssText = [属性名+属性值];

我们先来一个案例

**点击文字则放大字体.**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <div style="font-size: 20px;">鸡你太美</div>//style作为属性值，这是HTML的语法，css是将style作为标签。
       <script>
        let div = document.querySelector('div');
        div.onclick = function(){
        
            let num = parseInt(div.style.fontSize);
            num = num+10;
            div.style.fontSize = num + "px"//最后不要忘记加单位px.
        }
        
       </script>
    </body>
    </html>

![在这里插入图片描述][735f81ef10d7496b980f4a99c4111704.png]  
这里面有几个点需要说明

1.  style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的.例如: font-size => fontSize, background-color => backgroundColor 等 这种方式修改只影响到特定样式, 其他内联样式的值不变.
2.  parseInt函数的作用在于div.style.fontSize的返回值是一个字符串，然后parseInt函数是遍历这个字符串，遇到数字字符就转化为对于的整型数字，直到遇到第一个非数字型字符就停止，所以这里实际返回了当前字符大小的整型数值。

#### 2.类名样式操作 ####

element.className = [CSS 类名];

代码示例: 夜间模式和日间模式切换

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
        <style>
            .light{
        
                background-color: white;
                color: black;
                
            }
            .night{
        
                background-color: black;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="light" style="height: 500px;">这是一段话</div>
        <script>
            let div = document.querySelector('div');
            div.onclick = function(){
        
                if(div.className == 'light'){
        
                    div.className = 'night';
                }else{
        
                    div.className = 'light';
                }
            }
        </script>
    </body>
    </html>

![在这里插入图片描述][f2be93f16f3b4b51bacccdfeab2334f9.png]![在这里插入图片描述][9b6225fb06e34c43a4af9231956b9d35.png]

1.  `div.className == 'light'` 之所以不用div,class == ‘night’;由于 class 是 JS 的保留字, 所以名字叫做 className

## 五、新增元素 ##

### 5.1创建元素节点 ###

上述操作都是针对当前页面上以后元素进行的操作，那么JS中如何创建元素呢？

在DOM中每一个元素都是都是一个节点

使用 createElement 方法来创建一个元素. options 参数暂不关注.

var element = document.createElement(tagName[, options]);

示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
        
    </head>
    <body>
        <script>
            let div = document.createElement('div');
            div.innerHTML = '这是一段文字';
            div.style = 'font-size: 40px';
            div.id = 'mydiv';   
        </script>
    </body>
    </html>

1.  上面介绍的只是创建元素节点, 还可以使用:createTextNode 创建文本节点、createComment 创建注释节点、createAttribute 创建属性节点。
2.  此时发现, 虽然创建出新的 div 了, 但是 div 并没有显示在页面上. 这是因为新创建的节点并没有加入到 DOM 树中.

### 5.2插入节点到 dom 树中 ###

#### 1 使用 appendChild 将节点插入到指定节点的最后一个孩子之后 ####

element.appendChild(aChild)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <div class="container"></div>
        <script>
            let div = document.createElement('div');
            div.innerHTML = '这是一段文字';
            div.style = 'font-size: 40px';
            div.id = 'mydiv';   
            let container = document.querySelector('.container');//获取containner类元素
            container.appendChild(div);//加入containner结点的子节点中
        </script>
    </body>
    </html>

示例  
![在这里插入图片描述][a479148b122a4a8ca81fe465f68909aa.png]

#### 2.使用 insertBefore 将节点插入到指定节点之前. ####

var insertedNode = parentNode.insertBefore(newNode, referenceNode)

*  `insertedNode` 被插入节点(newNode)
 *  `parentNode` 新插入节点的父节点
 *  `newNode`用于插入的节点
 *  `referenceNode`：newNode将要插在这个节点之前

如果referenceNode为null，则newNode将被插入到子节点的末尾.  
referenceNode 引用节点不是可选参数

示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js</title>
    </head>
    <body>
        <ol id = 'container'>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ol>
    <script>
        let container =  document.querySelector('#container');
        let li = document.createElement('li');
        li.innerHTML='列表0';
        container.insertBefore(li,container.children[0]);
        
    </script>
    </body>
    </html>

![X][]

## 六、删除节点 ##

使用 removeChild 删除子节点

oldChild = element.removeChild(child);

*  child 为待删除节点
 *  element 为 child 的父节点
 *  返回值为该被删除节点
 *  被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位置。
 *  如果上述child节点不是element节点的子节点,则该方法会抛出异常。

## 代码案例1: 猜数字 ##

效果图’  
![在这里插入图片描述][59ef7b4bef5b41ecbbb5f3758c40a807.png]  
首先要说一下JS中随机数实现

N = Math.random();

N的范围时\[0,1);  
我们需要1-100的整数，那么只需要再将N\*100+1即可。  
但是这里的N还是小数，所以还需要用parseINT转一下

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>js</title>
        </head>
        <body>
            <button id="reset">重新开始</button>
            <br>
            请输入你要猜的数字:
            <input type="text" id="input_number">
            <button id="button_input">输入</button>
            <br>
            已经猜的次数：<span id="count">0</span>
            <br>
            结果：<span id="result"></span>
            
        </body>
    
        <script>
            let button_reset = document.querySelector('#reset');
            let intput_number = document.querySelector('#input_number');
            let button_input = document.querySelector('#button_input');
            let count = document.querySelector('#count');
            let result = document.querySelector('#result');
    
            let number = (parseInt(Math.random()*100)+1);
            console.log(number);
    
            button_input.onclick = function(){
        
                count.innerHTML = parseInt(count.innerHTML)+1;
                if(parseInt(intput_number.value)== number) {
        
                    result.innerHTML = '猜对了！'
                }
                if(parseInt(intput_number.value)< number){
        
                    result.innerHTML = '猜小了！'
                }
                if(parseInt(intput_number.value)> number){
        
                    result.innerHTML = '猜大了！'
                }
            }
    
            button_reset.onclick = function(){
        
                number = (parseInt(Math.random()*100)+1);
                console.log(number);
                result.innerHTML = '';
                count.innerHTML = 0;
    
            }
        </script>
        </html>

![在这里插入图片描述][e50dd09ed6b749ae8d5bf054ce4796d6.png]  
![在这里插入图片描述][cafd07b3c19142a3a667972f370d3b1f.png]![在这里插入图片描述][81b18efd539949fd82b96664b5eba303.png]

## 代码案例2: 表白墙 ##

![在这里插入图片描述][bb7d46cd40494a7e8f5df01ab4d71a62.png]  
下面是基本代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表白墙</title>
        <style>
            /* * 通配符选择器, 是选中页面所有元素 */
            * {
        
                /* 消除浏览器的默认样式. */
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            .container {
        
                width: 600px;
                margin: 20px auto;
            }
    
            h1 {
        
                text-align: center;
            }
    
            p {
        
                text-align: center;
                color: #666;
                margin: 20px 0;
            }
    
            .row {
        
                /* 开启弹性布局 */
                display: flex;
                height: 40px;
                /* 水平方向居中 */
                justify-content: center;
                /* 垂直方向居中 */
                align-items: center;
            }
    
            .row span {
        
                width: 80px;
            }
    
            .row input {
        
                width: 200px;
                height: 30px;
            }
    
            .row button {
        
                width: 280px;
                height: 30px;
                color: white;
                background-color: orange;
                /* 去掉边框 */
                border: none;
                border-radius: 5px;
            }
    
            /* 点击的时候有个反馈 */
            .row button:active {
        
                background-color: grey;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>表白墙</h1>
            <p>输入内容后点击提交, 信息会显示到下方表格中</p>
            <div class="row">
                <span>谁: </span>
                <input type="text">
            </div>
            <div class="row">
                <span>对谁: </span>
                <input type="text">
            </div>
            <div class="row">
                <span>说: </span>
                <input type="text">
            </div>
            <div class="row">
                <button id="submit">提交</button>
            </div>
            <div class="row">
                <button id="revert">撤销</button>
            </div>
            
        </div>
    
        <script>
            // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. 
            // 点击的时候, 获取到三个输入框中的文本内容
            // 创建一个新的 div.row 把内容构造到这个 div 中即可. 
            let containerDiv = document.querySelector('.container');
            let inputs = document.querySelectorAll('input');
            let button = document.querySelector('#submit');
            button.onclick = function() {
        
                // 1. 获取到三个输入框的内容
                let from = inputs[0].value;
                let to = inputs[1].value;
                let msg = inputs[2].value;
                if (from == '' || to == '' || msg == '') {
        
                    return;
                }
                
                // 2. 构造新 div
                let rowDiv = document.createElement('div');
                rowDiv.className = 'row message';
                rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
                containerDiv.appendChild(rowDiv);
                // 3. 清空之前的输入框内容
                for (let input of inputs) {
        
                    input.value = '';
                }
            }
            let revertButton = document.querySelector('#revert');
            revertButton.onclick = function() {
        
                // 删除最后一条消息. 
                // 选中所有的 row, 找出最后一个 row, 然后进行删除
                let rows = document.querySelectorAll('.message');
                if (rows == null || rows.length == 0) {
        
                    return;
                }
                containerDiv.removeChild(rows[rows.length - 1]);
            }
        </script>
    </body>
    </html>

至此我们的webapi就说到这里啦

[c950158dc2c74bd3bc3e7c302ecb9712.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8deac6ed770348dd879a41c7d4c66890.png
[d4e566f1e21845879c0fe49329584d1d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/22fe517c3b51419db9c8dd13e2f57322.png
[495e525749bc451a8a004c488a61a7a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/eb2b4b4c3aa340b9aaff648399edbf75.png
[f44afd9c51294be2a79835f86bd1ef7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0afc31e36aa444cd9cf56aba827e0ac5.png
[76394dc046394c6f9413c18fa946ce45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3f97af48faea43a6aac1c1afd5094c22.png
[21ef30fa789f445d9d707d974b7e49e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8a09629c1ca2466bbd61bbdda12bedcc.png
[781e26dbd8084e0ba0c71b8fa120ad0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/fac23cbe61594b8abe64718f996d06a0.png
[5d54942f53364dc1b1ba7293abbcd346.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/86bf97b7ede442bd8ad571f1292d1c83.png
[65003a8d907a457aac99ea9e4e6fddb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3291c47d72564c0184bf1e2cd1bfd3e7.png
[2600e8c71031459aafa707f01ed1b44f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/07af724c254a42c49619553c4519915c.png
[e5058c10ec39435da5c21d74ab4132ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/77c13a6cb1b24b97a94a37c14c633aba.png
[79683f23b24c4292906340fe0d0f720a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/08508dd3aa064a41bab7e399dae5b501.png
[ee7cd6de40ca4fb9a64eb65f8152c496.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/99e8a1a12b3a4bd8afc45e8fadcd7b5a.png
[5cc96d719f3c4ed992e194503031fd6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/7dc1d6a9be0447f7a4b0b82ad6f1026f.png
[750b625ded9944c89d765547715dbcbc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/39b2715f2d19453cbbe62524d172a242.png
[51302b8a503b46e4a1d208a97de9cba4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/68be99d1fc3a4ed9b455004e774c33d7.png
[adb976fefcfc4c7cab468d58c3e71c85.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/7bd4c4c200074c64a27d068e6d11e6fc.png
[735f81ef10d7496b980f4a99c4111704.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/2a1076f552c4413f91277c3eb5608bf5.png
[f2be93f16f3b4b51bacccdfeab2334f9.png]: https://img-blog.csdnimg.cn/f2be93f16f3b4b51bacccdfeab2334f9.png
[9b6225fb06e34c43a4af9231956b9d35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0ba0cc1b350b4b06a07ab9f52f923fd3.png
[a479148b122a4a8ca81fe465f68909aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/35ee7f8f165a4a639582e8045640c575.png
[X]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ee09337325c64fbc94cfc71bf8c3bca0.png
[59ef7b4bef5b41ecbbb5f3758c40a807.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/351e90f49fe14981a739d87a3358c693.png
[e50dd09ed6b749ae8d5bf054ce4796d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c33cfd891c794b52b33c73903ed4b363.png
[cafd07b3c19142a3a667972f370d3b1f.png]: https://img-blog.csdnimg.cn/cafd07b3c19142a3a667972f370d3b1f.png
[81b18efd539949fd82b96664b5eba303.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d93692de83c54f9197c905e6f4f11e57.png
[bb7d46cd40494a7e8f5df01ab4d71a62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0dc25f2280f8474dbaab824c7b45b210.png