JS —— 1、选择器、点击事件、放大镜项目、document、数据类型、字符串

悠悠 2023-01-20 13:59 18阅读 0赞

**目录**

2、去重（Set）：

3、选择器：

1、2、1：

3、

2、

3、

4、点击事件

1、onclick（单击）

2、ondblclick（双击）

3、4  onmousedown（按下鼠标）onmouseup（鼠标松开）

5、6  onmouseenter（移入）onmouseleave（移出）

7、8  onmouseover（移至） onmouseout（移出）

9、 onmousemove（移入）     鼠标被移动。

1、 onkeydown（按下）

5、放大镜案例

6、document对象常见属性和方法

1、

2、

3、4、5、

6、

8、

可能会出现的问题：

7、数据类型

数组Array：

对象Object：

函数function：

8、字符串

1、charAt() 方法可返回指定位置的字符。

2、concat() 方法用于连接两个或多个字符串。

3、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

4、lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置

5、includes() 方法用于判断字符串是否包含指定的子字符串

6、replace() 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

7、split() 方法用于把一个字符串分割成字符串数组

8、substr() 方法可在字符串中抽取从开始下标开始的指定数目的字符

9、substring() 方法用于提取字符串中介于两个指定下标之间的字符

10、slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分

11、toLowerCase() 方法用于把字符串转换为小写

12、toUpperCase() 方法用于把字符串转换为大写

13、trim() 方法用于删除字符串的头尾空格

--------------------

# **2、去重（Set）：** #

var a1 = [1,2,3,4,5,6,6,6];
        var a2 = [...new Set(a1)];   
        alert(a2);  //[1,2,3,4,5,6]

# 3、选择器： #

选择dom中的元素时，常用选择器：

1.  **document.getElementById();**                选择Id选择器，来选择标签
2.  **document.getElementsByTagName()****； ** 标签名来选择标签
3.  **document.getElementsByName()****；       ** name属性来选择标签

**IE8****及以上：**

1.  **document.getElementsByClassName()****；**Class选择器来选择标签
2.  **document.querySelector();            ** 可以像css一样，选择标签。（但只能设置第一行）
3.  **document.querySelectorAll()****；**      选择所有的返回的是类数组

## 1、2、1： ##

![202105131430200.png][]

//1：document.getElementById();  通过选择Id选择器，来选择标签
        document.getElementById("div").innerHTML="您好 div";
        document.getElementById("div").style.color="red";
        //document.getElementsByTagName()；通过标签名来选择标签
        document.getElementsByTagName("h1")[1].innerHTML = "您好 h1";
        //document.getElementsByClassName()；通过Class选择器来选择标签
        document.getElementsByClassName("demo")[0].style.color="blue";

![20210513143054910.png][]

## 3、 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][]

//document.getElementsByName()；通过name属性来选择标签   IE8及以上
        document.getElementsByName("p")[0].style.background="yellow";

## 2、 ##

//document.querySelector(); 可以像css一样，选择标签   获取文档中的第一个元素
        document.querySelector("#h").innerHTML="您好 div";
        document.querySelector(".a").innerHTML="您好 aaa";
        document.querySelector("p").innerHTML="您好 ppp";

## 3、 ##

//document.querySelectorAll()；  选择所有的，返回类似数组
        document.querySelectorAll(".h2")[1].style.color="red";

# 4、点击事件 #

**鼠标点击：**

1.onclick（单击）                  当用户点击某个对象时调用的事件句柄。

2.ondblclick（双击）             当用户双击某个对象时调用的事件句柄。

3.onmousedown（按下）     鼠标按钮被按下。

4.onmouseup（松开）          鼠标按键被松开。

5.onmouseenter（移入）      当鼠标指针移动到元素上时触发。

6.onmouseleave（移出）      当鼠标指针移出元素时触发

**下面两个一样：（上面两个不支持冒泡）**

7.onmouseover（移入）        鼠标移到某元素之上。

8.onmouseout（移出）         鼠标从某元素移开。

9.onmousemove（移入）     鼠标被移动。

9与上面两个移入区别：     鼠标在框内移动也算移入

**（好处内容可见）**

**键盘点击：**

1、onkeydown（按下）          某个键盘按键被按下。

2、onkeypress（按下并松开） 某个键盘按键被按下并松开。

3、onkeyup（松开）               某个键盘按键被松开。

## 1、onclick（单击） ##

**方式一：**

window.onload = function() {
    
    }
    
    function fun() {
        document.getElementById("h1").style.color = "red"
    }

方式二：（写在大括号里面）

document.getElementsByTagName("button")[1].onclick=function(){
            document.getElementById("h1").innerHTML = "我是按钮";
        }

方式三：（常用？）

document.getElementsByTagName("button")[1].onclick=fun2;
    
        function fun2(){
            document.getElementById("h1").innerHTML = "我是按钮";
        };

//添加监听事件
        document.getElementsByTagName("button")[1].addEventListener("click",fun2);
    
        function fun2(){
            document.getElementById("h1").innerHTML = "我是按钮";
        };

## 2、ondblclick（双击） ##

document.querySelector(".btn2").ondblclick =fun2;
        function fun2(){
            document.getElementById("h1").innerHTML = "我是按钮";
        };

## 3、4  onmousedown（按下鼠标）onmouseup（鼠标松开）    ##

//按下、松开
        document.querySelector(".btn3").onmousedown=function(){
            document.getElementById("h1").innerHTML = "按钮按下了";
        }
        document.querySelector(".btn3").onmouseup=function(){
            document.getElementById("h1").innerHTML = "按钮松开了";
        };

## 5、6  onmouseenter（移入）onmouseleave（移出） ##

## 7、8  onmouseover（移至） onmouseout（移出） ##

//移入、移出
        document.querySelector(".btn4").onmouseover=function(){
            this.style.background = "rgba(68,157,68,1)";
        }
        document.querySelector(".btn4").onmouseout=function(){
            this.style.background = "rgba(68,157,68,.6)";
        }

## 9、 onmousemove（移入）     鼠标被移动。       ##

好处：
    
    document.querySelector(".btn4").onmousemove=function(event){
            //当前鼠标移入与X轴的距离
            document.getElementById("h1").innerHTML = event.clientX;    
        }

## 1、 onkeydown（按下）   ##

//键盘事件  按下键盘时发生的状态
        document.querySelector(".input").onkeyup = function(){
            document.getElementById("h1").innerHTML = this.value;
        }

**2****、**onkeypress（按下并松开）  某个键盘按键被按下并松开。

**3****、**onkeyup（松开）                某个键盘按键被松开。

# 5、放大镜案例 #

#box {
        position: relative;
    }
    .small_pic {
        width:360px;
        height:500px;
    }
        .small_pic img {
            width:100%;
            height:100%;
        }
        .small_pic .slider {
            width:180px;
            height:250px;
            position: absolute;
            background:rgba(255,255,255,.3);
            cursor:move;
            display:none;
        }
    .big_pic {
        width:360px;
        height:500px;
        position: absolute;
        top:0;
        left:370px;
        border:1px solid #333;
        overflow: hidden;
        display:none;
    }
        .big_pic .big_img {
            position: absolute;
        }

**Index.js**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][]

**Index.js**

![20210513145517283.png][]//设置滑块的边界

**Index.js**

![20210513145541391.png][]

**Index.js**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2][]

//右侧只显示鼠标刚移入进来时的位置

**Index.js**

//完成

# 6、document对象常见属性和方法 #

1.  document.activeElement()           返回当前获取焦点元素
2.  document.addEventListener()     向文档添加句柄
3.  document.createElement()          创建元素节点。
4.  document.createTextNode()               创建文本节点。
5.  appendChild()     方法可向节点的子节点列表的末尾添加新的子节点。
6.  lastChild            返回最后一个子节点
7.  firstChild        返回第一个子节点
8.  childNodes()      返回所有子节点对象

## 1、 ##

方式一：

![20210513150117113.png][]

window.onload = function(){
        //document.activeElement    返回当前获取焦点元素
    					 //活动 元素
        alert(document.activeElement.id);
    }

![20210513150126380.png][]

方式二：

document.getElementById("my").onclick=function(){
            var _name = document.activeElement.tagName;  //tagName（标签名）
            document.getElementById("test").innerHTML = _name;
        }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3][]

![20210513150152962.png][]

![20210513150152996.png][]

![20210513150152994.png][]

![20210513150152997.png][]

## 2、 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4][]

//document.addEventListener()   向文档添加句柄
    document.getElementById("my").addEventListener('click',function(){
    var _name = document.activeElement.tagName;
    document.getElementById("test").innerHTML = _name;
    });

//结果一样

![20210513150230783.png][]

//结果一样

## 3、4、5、 ##

![20210513150240118.png][]

![20210513150243145.png][]

//动态的操作DOM，添加内容 <div>hello world</div>
      document.querySelector(".btn").onclick=function(){
          var _div = document.createElement("div");				//创建元素节点
          var _text = document.createTextNode("hello world"); //创建文本节点
          _div.appendChild(_text);  //把文本节点添 加到元素节点末尾
          document.body.appendChild(_div);
      }           //注意body

## 6、 ##

![20210513150259206.png][]

![20210513150302698.png][]

//扩展  需求：二个列表，单击按钮时，左边最后一个数据移动到右边
        //lastChild    返回最后一个子节点
        //firstChild   返回第一个子节点
        document.querySelector(".change").onclick = function(){
            //左边的最后一个数据
            var _left = document.querySelector(".listL").lastChild;
            //右边添 加数据
            document.querySelector(".listR").appendChild(_left);
        };

![20210513150315756.png][]

![20210513150317526.png][]

//32.55

## 8、 ##

//扩展二  需求：二个列表，左侧选 中的数据移入到右侧
        var _listL = document.querySelector(".listL");
    var child = _listL.childNodes;   	//获取子节点  ['red','orange']
    
        for(var i=0;i<child.length;i++){
            child[i].onclick = function(){  //arr[0]
                document.querySelector(".listR").appendChild(this);  //this表示当前单击的对象
            }
        };

![20210513150341142.png][]

![20210513150341164.png][]

## 可能会出现的问题： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5][]

//复制（只是写法不同）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 9][]

//用nodeType解决

元素节点的属性是返回1，

文本节点的属性是返回3

# 7、数据类型 #

![20210513150428507.png][]//引用数据类型有堆栈

值类型(基本类型)：

字符串（String）、

数字(Number)、

布尔(Boolean)、

空对象（Null）、

未定义（Undefined）

引用数据类型(复杂类型)：

对象(Object)、

数组(Array)、

函数(function)

## 数组Array： ##

**方式一：**![20210513150500672.png][]![20210513150500767.png][]

**方式二：**![20210513150500764.png][]

**方式三：**![20210513150500766.png][]

## 对象Object： ##

**方式一：**

![20210513150515222.png][]

**方式二：**

![20210513150515230.png][]

//结果是20

## 函数function： ##

**方式一：**![20210513150538397.png][]

**方式二：**

![20210513150544331.png][]//结果为hello world

# 8、字符串 #

1.  charAt()         方法可返回指定位置的字符。
2.  concat()        方法用于连接两个或多个字符串。
3.  indexOf()       方法可返回某个指定的字符串值在字符串中首次出现的位置。
4.  lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置
5.  includes()      方法用于判断字符串是否包含指定的子字符串
6.  replace()       方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
7.  split()            方法用于把一个字符串分割成字符串数组
8.  substr()         方法可在字符串中抽取从开始下标开始的指定数目的字符
9.  substring()     方法用于提取字符串中介于两个指定下标之间的字符
10. slice(start, end)     方法可提取字符串的某个部分，并以新的字符串返回被提取的部分
11. toLowerCase()      方法用于把字符串转换为小写
12. toUpperCase()      方法用于把字符串转换为大写
13. trim()            方法用于删除字符串的头尾空格

## 1、charAt() 方法可返回指定位置的字符。 ##

![20210513150739405.png][]//1

获取最后一个：

![20210513150749143.png][]//d

## 2、concat() 方法用于连接两个或多个字符串。 ##

![20210513151036308.png][]![20210513151036310.png][]

![20210513151036315.png][]![20210513151036315.png][]

## 3、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 10][]

![20210513151050272.png][] //8

## 4、lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置 ##

![20210513151106920.png][]

与上面相反，从后面开始

![20210513151106922.png][]

## 5、includes() 方法用于判断字符串是否包含指定的子字符串 ##

![20210513151115765.png][]

## 6、replace() 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串 ##

![20210513151128958.png][]  ![20210513151128956.png][]

## 7、split() 方法用于把一个字符串分割成字符串数组 ##

![20210513151145118.png][]  ![20210513151145113.png][]

![20210513151145115.png][]![20210513151145120.png][]

![20210513151145119.png][]![20210513151145121.png][]

\-------------------------------------------------------------------------------

![20210513151145127.png][] //也一样

\-------------------------------------------------------------------------------

![20210513151145126.png][]

## 8、substr() 方法可在字符串中抽取从开始下标开始的指定数目的字符 ##

![2021051315120477.png][]  ![2021051315120478.png][]

![2021051315120483.png][]![2021051315120487.png][]

## 9、substring() 方法用于提取字符串中介于两个指定下标之间的字符 ##

![20210513151214302.png][]![20210513151214388.png][]

![20210513151214387.png][]![20210513151214391.png][]

![20210513151224266.png][]![20210513151214390.png][]

## 10、slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分 ##

![20210513151234563.png][]![20210513151234564.png][]

![20210513151234568.png][]![20210513151234565.png][] //最后一个

![20210513151234572.png][]  //作业

## 11、toLowerCase() 方法用于把字符串转换为小写 ##

## 12、toUpperCase() 方法用于把字符串转换为大写 ##

![20210513151253254.png][]

![20210513151253256.png][]

## 13、trim() 方法用于删除字符串的头尾空格 ##

![20210513151306731.png][]![20210513151301966.png][]

[202105131430200.png]: /images/20221021/f8f43e142c524689be73282e168bc59b.png
[20210513143054910.png]: /images/20221021/ce677428b15b46d8bc6247eca53c153e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20221021/6f38cc931b34497d84bceb95e59e62b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/c9af672eec9b4473932b15d340b4547e.png
[20210513145517283.png]: /images/20221021/001a363251354d05b6aa874b577bf24f.png
[20210513145541391.png]: /images/20221021/e2f30e7d8fa5410daa5269deb074c65b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221021/b48b2941bb0d498b8aa3b6ac8403f391.png
[20210513150117113.png]: /images/20221021/e6f195f48fb44610bd82319d424b5028.png
[20210513150126380.png]: /images/20221021/2b586c344ddf4afea6196e5d5534e06c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221021/77ea7211e71f4967a577051e015ec34a.png
[20210513150152962.png]: /images/20221021/b50317c2ec8f460d97b4a8fb5ccc8822.png
[20210513150152996.png]: /images/20221021/f50ca30d915c4c2680ea8583a3022338.png
[20210513150152994.png]: /images/20221021/748fe6c601db47fd806e3649bbabe44c.png
[20210513150152997.png]: /images/20221021/9e938c6c32334d038699c326fce1c0da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4]: /images/20221021/138583e2272c459ca0e489cfb254e9c5.png
[20210513150230783.png]: /images/20221021/7d2f5e9a6e90423f8acc54078fe2fcc9.png
[20210513150240118.png]: /images/20221021/89e91bb38d58470d8eed599927bc97ba.png
[20210513150243145.png]: /images/20221021/0100d7bec606497b94dc041e099621dd.png
[20210513150259206.png]: /images/20221021/6e833938f19143df9bd92dec39c86268.png
[20210513150302698.png]: /images/20221021/255b74dba0d54692a20651a331388c78.png
[20210513150315756.png]: /images/20221021/62aa9c38d33244359f92ceb857049c20.png
[20210513150317526.png]: /images/20221021/53e777fbf2e343faa079a81a9598f152.png
[20210513150341142.png]: /images/20221021/2be3169a9def47e9bef9020695fbc28c.png
[20210513150341164.png]: /images/20221021/9920f43c4a104c69828409fd21259059.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5]: /images/20221021/8c9d4eb7790d4e949aeccb08e9d879bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 6]: /images/20221021/169e74e9d1424874821037f5c5d89e88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 7]: /images/20221021/87e89b034b0e478d8d87f09469734569.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 8]: /images/20221021/fb676e6e83d0416187a09487e4518962.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 9]: /images/20221021/678a131d01404aca9cb8c2802df9f832.png
[20210513150428507.png]: /images/20221021/f695d026452a40f6aa51fc0da916d174.png
[20210513150500672.png]: https://img-blog.csdnimg.cn/20210513150500672.png
[20210513150500767.png]: /images/20221021/092b06eb5c8a4ec5a577ea1fb78db61c.png
[20210513150500764.png]: /images/20221021/ce614686d9154d8681b03582f86a8846.png
[20210513150500766.png]: /images/20221021/310be664fe0a4063a6306566d9a13eda.png
[20210513150515222.png]: /images/20221021/fa2a3e31b0fd4c2594a7de8a8cc73d49.png
[20210513150515230.png]: /images/20221021/7040d07ff5214482a34df44b151e06ba.png
[20210513150538397.png]: /images/20221021/3f37420bab244afc947c8a68a08d9398.png
[20210513150544331.png]: /images/20221021/90e6740fb1484a4aa19e8e19fc740826.png
[20210513150739405.png]: /images/20221021/0d3258426c6e4f958d5db5e8e7586737.png
[20210513150749143.png]: /images/20221021/41acb81d2db14063bb5a337af7bf8214.png
[20210513151036308.png]: https://img-blog.csdnimg.cn/20210513151036308.png
[20210513151036310.png]: /images/20221021/d94e8ed34ded4afbb154cdbc63300056.png
[20210513151036315.png]: /images/20221021/9c0f50e30b9b43c5bb5bbaa4f4649e83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 10]: /images/20221021/9075647344f842ec9f1431d653036d87.png
[20210513151050272.png]: /images/20221021/ca1c5ec524e944c39175ff5e4caec278.png
[20210513151106920.png]: /images/20221021/7d5b482eca924ded84fcae0e564d08f1.png
[20210513151106922.png]: /images/20221021/ca86a1f285e0485c8856475c9dcf68ad.png
[20210513151115765.png]: /images/20221021/6d714a34a2a547e29e144e5b1fe4b933.png
[20210513151128958.png]: https://img-blog.csdnimg.cn/20210513151128958.png
[20210513151128956.png]: /images/20221021/da17094d5fdb48509da05a54c58d6dbb.png
[20210513151145118.png]: https://img-blog.csdnimg.cn/20210513151145118.png
[20210513151145113.png]: /images/20221021/9ede2d086f7542c09e1dd3d12163565c.png
[20210513151145115.png]: https://img-blog.csdnimg.cn/20210513151145115.png
[20210513151145120.png]: /images/20221021/78371d09f7f7477d99723661b891b984.png
[20210513151145119.png]: https://img-blog.csdnimg.cn/20210513151145119.png
[20210513151145121.png]: /images/20221021/e259181f840d43c4a925ba53d6ac9072.png
[20210513151145127.png]: /images/20221021/b6c526800bdf4f1f874ff82367b9f191.png
[20210513151145126.png]: /images/20221021/9e8957314528431fb9d50cca83c4ea78.png
[2021051315120477.png]: https://img-blog.csdnimg.cn/2021051315120477.png
[2021051315120478.png]: /images/20221021/b334f95f36304e9999be949e6c2fdd03.png
[2021051315120483.png]: https://img-blog.csdnimg.cn/2021051315120483.png
[2021051315120487.png]: /images/20221021/739c550c283349bab24838bc8ad6125a.png
[20210513151214302.png]: https://img-blog.csdnimg.cn/20210513151214302.png
[20210513151214388.png]: /images/20221021/9635b3ddad3d4688a7a9c302e7744842.png
[20210513151214387.png]: https://img-blog.csdnimg.cn/20210513151214387.png
[20210513151214391.png]: /images/20221021/1cbd5bb48d4d4469ba7a7bc966947c86.png
[20210513151224266.png]: https://img-blog.csdnimg.cn/20210513151224266.png
[20210513151214390.png]: /images/20221021/c378581ba390464eb39253bf196878f4.png
[20210513151234563.png]: https://img-blog.csdnimg.cn/20210513151234563.png
[20210513151234564.png]: /images/20221021/3dc23712a12a431999377d967fbf0238.png
[20210513151234568.png]: https://img-blog.csdnimg.cn/20210513151234568.png
[20210513151234565.png]: /images/20221021/381f4f07abdf498690283b728d622dab.png
[20210513151234572.png]: /images/20221021/e42f691657f446cf953a9461fc064007.png
[20210513151253254.png]: /images/20221021/5a7bff79a11f4b36ac0df7a387f53bc8.png
[20210513151253256.png]: /images/20221021/d5dd2538bb084b249e5a693d9e7fab6a.png
[20210513151306731.png]: https://img-blog.csdnimg.cn/20210513151306731.png
[20210513151301966.png]: /images/20221021/d2666ae78e3743ca8987410ad9d56607.png