语法篇JS基础

偏执的太偏执、 2024-04-17 11:46 70阅读 0赞

## 一、初识JavaScript ##

### 1.1前景 ###

>  **CSS 预处理器**  
> CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些  
> 编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化  
> 成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正  
> 常的 CSS 文件，以供项目使用”。  
> **常用的 CSS 预处理器有哪些**
> 
>  *  SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
>  *  LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于
>  *  SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用 LESS。

### 1.2JavaScript介绍 ###

> JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。被广泛应用于各种客户端Web程序尤其是HTML开发中，能给HTML网页添加动态功能，响应用户各种操作，实现诸如欢迎信息、数字日历、跑马灯,显示浏览器停留时间等特殊效果，提高网页的可观性。

### ![732c5c4f20684056a5719e8c856c58f4.png][] ###

### 1.3JavaScript框架 ###

>  *  jQuery:大家熟知的 JavaScript 框架,优点是简化了 DOM 操作,缺点是 DOM 操作太频繁, 影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
>  *  Angiar:Google 收购的前端框架,由一群 Java 程序员开发,其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念,与微软合作,采用 TypeScript 语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如:1代->2代,除了名字,基本就是两个东西;截止发表博客时已推出了 Angular6)
>  *  React:Facebook 出品,一款高性能的 JS 前端框架;特点是提出了新概念【虚拟 DOM】用于减少真实 DOM 操作,在内存中模拟 DOM 操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门【JSX】语言;
>  *  Vue:一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状志管理等新特性。其特点是综合了 Angular(模块化)和 React(虚拟 DOM)的优点;
>  *  Axios:前端通信框架;因为 Vue的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用 jQuery 提供的 AJAX通信功能;

### 1.4UI框架 ###

![776f55a4fa834d1581ec8d1533dc7325.png][]

> 补充：微信小程序WeUI

### 1.5JavaScript用途 ###

>  *  JavaScript 获得创建动态 HTML 的所有力量：
>  *  JavaScript 能改变页面中的所有 HTML 元素
>  *  JavaScript 能改变页面中的所有 HTML 属性
>  *  JavaScript 能改变页面中的所有 CSS 样式
>  *  JavaScript 能删除已有的 HTML 元素和属性
>  *  JavaScript 能添加新的 HTML 元素和属性
>  *  JavaScript 能对页面中所有已有的 HTML 事件作出反应
>  *  JavaScript 能在页面中创建新的 HTML 事件

### 1.6快速入门 ###

#### 1.6.1格式入门 ####

![4bcce5efa96d4801bba68f5da71aefa4.png][]

> 把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示，JS代码建议置于body的最底部
> 
> 可以在 <head> 或 <body> 中放置外部脚本引用

#### 1.6.2语法入门 ####

![ff2c3e91a5744d49a67d80618b6c8801.png][]

#### 1.6.3注释 ####

> 在JavaScript中，有两种常见的注释方式：
> 
> 单行注释：使用双斜杠（//）可以在代码中添加单行注释。例如
> 
> // 这是一个单行注释
> 
> var x = 5; // 这是另一个单行注释
> 
> 多行注释：使用斜杠和星号（/\* 和 \*/）可以添加多行注释，用于注释一段代码块。例如
> 
> /\* 这是一个多行注释
> 
> 可以跨越多行
> 
> 用于详细描述代码功能 \*/
> 
> var y = 10;
> 
> 注释在代码中是用来解释和说明代码的作用和逻辑，对于代码的可维护性和可读性非常重要。
> 
> 除此之外，注释还有另外一个用途就是当我们在调试JavaScript代码时，可用于阻止其中  
> \- -条/块代码的执行。

#### 1.6.4代码块 ####

![51a12b9d8ba44679bbd869b15f415016.png][]

### 1.7浏览器控制台使用 ###

### ![2ac00ce3d95a47a7a01a719d24a2ecc0.png][] ###

> //console. log(score)在浏览器的控制台打印变量!

### 1.8几点总结 ###

>  *  分号分隔 JavaScript 语句，在每条可执行的语句之后添加分号
>  *  注释： 单行注释以 // 开头； 多行注释以 /\* 开头，以 \*/ 结尾
>  *  JavaScript 标识符对大小写敏感

## 二、JavaScript入门 ##

### 2.1组成 ###

> 完整 JavaScript 的实现是由以下三个部分组成：
> 
>  *  ECMAScript ：核心标准。
>  *  DOM ： 文档对象模型。
>  *  BOM ：浏览器对象模型。

> ECMAScript是JavaScript的核心标准，它描述了该语言的语法和基本对象。

> DOM指的是Document Object Model (文档对象模型)，它是HTML的应用程序接口。DOM将整个HTML页面看作是由各种节点层级构成的结构文档。

> BOM指的是Browser Object Model (浏览器对象模型)，可 以对浏览器窗口进行访问和操作  
> 处理。

### 2.2JavaScript使用 ###

>  *  内部JavaScript
>  *  外部JavaScript

内部JavaScript

![c2b99f67641f43dfb9cdc8d26e4358dd.png][]

### 2.3变量 ###

>  *  let，声明带作用域的变量
>  *  const，声明带作用域的常量
>  *  Arrow Functions，适合简写匿名函数的箭头函数

#### 2.3.1变量的声明 ####

var a;
    const a=1; //必须赋值
    let a;//块内元素

> JavaScript是一种弱类型的脚本语言，无论是数字、文本还是其他内容,统一使用关键词var加上变量名称进行声明
> 
> ●变量的声明不是必须的，可以不使用关键词var声明直接使用。

#### ![c73546e1834d4e3ab77a234622df65d5.png][] ####

#### 2.3.2变量的赋值 ####

> 常见变量的赋值为数字或文本形式。当变量的赋值内容为文本时，需要使用引号  
> (单引号、双引号均可)括住内容;当为变量赋值为数字的时候，内容不要加引号  
> 否则会被当作字符串处理。

#### 2.3.3命名规范 ####

![b858d7440fd34c91b71275b0785856e4.png][]

#### 2.3.4 JavaScript关键字和保留字 ####

![41f72b3853a14014bbf4a0466ebd32fa.png][]

![26ad4bf63e494fd3aab324a665c54ce8.png][]

#### 2.3.5严格检测模式 ####

![ac46cbdd52f64d0f89d52b26039703a7.png][]

#### ![18e4cb1bf1cc48018001b11827368727.png][] ####

#### 2.3.6变量作用域 ####

![8510086098ab46afac25f4bc06bb6da7.png][]

#### ![f1fd9646eb0b46a0a74d585ac9c4bfd2.png][]全局变量 ####

![7c620792c9cb460d947b44bf17587b55.png][]

### ![c5062d4ee970430aba610ba0e4409ed3.png][] ###

![27a24e2bd56f4d7ba6e6d2c08a7fa1be.png][]

#### 局部作用域（let） ####

#### 2.3.7方法的定义与调用 ####

定义方法

![15c3cf73d9b845e0b6585277dda31857.png][]

#### apply关键字 ####

![4cab15cdda4d41b89e1ef0ab5cc2e680.png][]

### 2.4基本数据类型 ###

> JavaScript有五种原始类型分别是：Number（数字）、Boolean（布尔值）、String（字符串）、Null（空值）和Undefined（未定义）。

![03d1b8f94c174a18847a6ca3b4d5b08b.png][]

#### 2.4.1Number类型 ####

在JavaScript中使用Number类型表示数字，其数字可以是32位以内  
的整数或64位以内的浮点数

>  *  八进制的数需要用数字0开头
>  *  十六进制的数需要用数字0和字母x开头
>  *  浮点数可以使用toFixed()方法规定小数点后保留几位数（遵守四舍五入）。
>     
>         123 //整数
>         .15 //浮点数
>         1.123e3 //科学计数
>         -99 //负数
>  *  特殊值![4263c156a76e41268671440606ff6a07.png][]
> 
>     //正确转换为Number类型时返回真（true），其他情况返回假（false）
>     isNaN(变量名称)

#### 2.4.2String类型 ####

![0b9483e2489b4ea0ac44d2179a17d445.png][]

> 常用方法：
> 
> 1.  获取字符串长度 msg.length
> 2.  获取字符串中的单个字符 msg.charAt(1) 代码编号msg.charCodeAt(1)
> 3.  连接字符串msg.concat（所要连接字符串）
> 4.  查找字符串是否存在![9a7d462e9d03439cbb2495fae5524661.png][]
> 5.  查找与替换字符串 msg.match(正则表达式) msg.search(正则表达式) msg.replace(正则表达式，替换文本）
> 6.  获取字符串片段 slice（开始，结束）去掉指定字符串 ，subtring（开始，结束）获取![167469522eda47e9a10a65a5e0347395.png][]
> 7.  字符串大小写转换 toLowerCase()，toUpperCase()
> 8.  转义字符同C++

#### 2.4.3Boolean类型 ####

> 布尔值( boolean )在很多程序语言中都被用于进行条件判断，其值只有  
> 两种: true (真) 或者false (假)。

#### 2.4.4Undefined类型 ####

> 所有undefined类型的输出值都是undefined。当需要输出的变量从未声明过，或者使用关键词  
> var声明过但是从未进行赋值时会显示undefined字样。

#### 2.4.5Null类型 ####

![6d6b50ae87a0433e8ba4d475358b9869.png][]

### ![04d0fe47c38844aaac51ebe6036ef26a.png][] ###

### 2.5常用运算符 ###

#### 2.5.1赋值运算符 ####

#### 2.5.2算术运算符 ####

![373ff309f0404f34938a4eb72511431e.png][]

> 尽量避免使用浮点数进行运算，存在精度问题

#### 2.5.3逻辑运算符 ####

> 逻辑运算符有三种类型:NOT (逻辑非)、 AND(逻辑与)和OR (逻辑或) 。

#### ![ce20bf80fdf14b65ae8efc9839c4eba0.png][] ####

#### 2.5.4关系运算符 ####

> 在JavaScript中，关系运算符共有四种:大于(> )、小于(<)、大于等于(>=)和小于等于(<=)。 用于比较两个值的大小，返回值-定是布尔值(true 或false)。

#### 2.5.5相等性运算符 ####

![09d63740a3a24007beeb7d10179794c1.png][]

#### ![ec9636ee9cf04ca6b55f662641b8c444.png][]2.5.6条件运算符（三目运算符） ####

#### 2.5.7两个常用函数 ####

### ![5022d84648dc4894b96899c8749c8e5c.png][]2.6语句 ###

#### 2.6.1条件语句 ####

>  *  if语句
>  *  switch语句
> 
> 同C++语法

<!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>例3  6 分支结构程序设计</title>
      <script>
        function Login() { // 添加了一个 {
          var name = login.username.value; // 用 . 访问属性
          var password = login.password.value; // 用 . 访问属性
          if (name == "" || password == "") { // 用 || 表示逻辑或
            alert("请输入用户名和密码！");
            return false;
          }
          if (name != "123456" || password != "123456") { // 用 || 表示逻辑或
            alert("用户名和密码不正确，请重新输入！");
            return false;
          }else {
            alert("登录成功");
          }
        } // 删除了一个 '
    
      </script>
    </head>
    <body>
    <table bgcolor="#cccccc" align="center">
      <form name="login">
        <caption><h3>登录表单</h3></caption>
        <tr>
          <td align="right">用户名：</td>
          <td><input type="text" name="username"/></td>
        </tr>
        <tr>
          <td align="right">密 码：</td>
          <td><input type="password" name="password"/></td>
        </tr>
        <tr>
          <td align="center" colspan="2"><input type="submit" value="登录" onclick="Login()"/></td> // 把 type 的值改为 submit
        </tr>
      </form>
    </table>
    </body>
    </html>

#### 2.6.2循环语句 ####

> JavaScript 支持不同类型的循环：
> 
>  *  for - 多次遍历代码块
>  *  for/in - 遍历对象属性
>  *  while - 当指定条件为 true 时循环一段代码块
>  *  do/while - 当指定条件为 true 时循环一段代码块

![0e07facd1feb4098b6474cd2640b668f.png][]

<!DOCTYPE html>
    <html>
    <head>
      <title>【示例6_1】为JSON字符串创建对象</title>
      <meta charset="utf-8">
    </head>
    <body>
    <h2> 为JSON字符串创建对象 </h2>
    <p id="demo"></p>
    <script>
      var text = '{"sites" : [' +
              '{"name" : "长沙民政", "url" : "www.csmzxy.com"},'+
              '{"name" : "世界大学城", "url" : "www.worlduc.com"},'+
              '{"name" : "百度", "url" : "www.baidu.com"}]}';
      var obj = JSON.parse(text);
      var demoNode = document.getElementById("demo");
      demoNode.innerHTML = ""; // 清空原有内容
      for (var i = 0; i < obj.sites.length; i++) { // 使用 for 循环遍历数组
        var site = obj.sites[i]; // 取出一个网站对象
        demoNode.innerHTML += site.name + "网址："; // 拼接网站名称
        demoNode.innerHTML += "<a href=\"http://" + site.url + "\">" + site.url + "</a>"; // 拼接网站链接
        demoNode.innerHTML += "<br>"; // 换行
        demoNode.innerHTML += "<hr>"; // 分隔线
      }
    </script>
    </body>
    </html>

### 2.7函数 ###

#### 2.7.1定义函数 ####

定义方式一

![4c58298ac5d04cad804468d4a7edbc8c.png][]

定义方法二

![d37162a7b37944c0aa8e5bc17b103b8c.png][]

参数问题: javaSqript 可以传任意个参数，也可以不传递参数-

异常判断

#### arguments关键字· ####

arguments是一个JS免费赠送的关键字;代表,传递进来的所有的参数,是一个数组!

#### rest关键字 ####

ES6引入的新特性,获取除了已经定义的参数之外的所有参数~ ...

#### 2.7.2基础函数 ####

![03efbd6fa28e4a35afcd6bb4a060b4bc.png][]

![c7c0473943b0424a8cca7cddf970f492.png][]

> 相比Java而言，JavaScript 函数更加简便，无需特别声明返回值类型。  
> JavaScript函数如果存在返回值，直接在大括号内的代码块中使用return关键词后面紧跟需要返回的值即可。

![fd42ea92b142447995c88c84e23172d6.png][]

#### 2.7.3箭头函数 ####

![58a49b59f3684162a3e770c55e37e398.png][]

### ![00eb9ae888b442a88645229e5ff75fbc.png][] 2.8JavaScript对象类型 ###

![5afd48325f324c3f9a0573b868e78f8d.png][]

>  *  本地对象
>  *  内置对象
>  *  宿主对象
> 
> ●本地对象( native object)是ECMAScript定义的引用类型;  
> ●内置对象( built-in object )指的是无需实例化可直接使用的对象,其实也是特殊的本地对象;  
> ●宿主对象( host object)指的是用户的机器环境，包括DOM和BOM。

### 本地对象 ###

#### 2.8.1数组 ####

> Java的数值必须是相同类型的对象~, JS中不需要这样!  
> var arr = \[1,2,3,4,5, 'he11o' ,nu11，true\]  
> Array对象还包含了length属性，可以用于获取当前数组的长度，即数组中的元素个数。如果当前数组中没有包含元素，则length值为0

#### 2.8.2日期Data ####

> 在JavaScript中使用Date对象处理时间日期有关内容。有四种初始化方式  
> ![27edd508af8b40b893db60903ac74005.png][]
> 
> **常用方法** ![03a264ca89a44c088e4f8ee4a58afe61.png][]

#### 2.8.3正则表达式 ####

语法格式

![042bd846dd3245c2b7f12015a13e1b4c.png][]

常用方法

> ![e7471ea271a94adbb5e6fdbacf784c72.png][]
> 
> ![d47a29218e264df9a334cdb8e6f5a6c6.png][]

#### 2.8.4Map和Set集合(ES6新特性) ####

Map

Set

#### 2.8.5iterator ####

![dc12327b7ac34177bc5c219ee137f545.png][]

#### 2.8.6对象 ####

对象也是变量。但是对象包含很多值 值 名称:值 对的方式来书写（名称和值由冒号分隔）

![f21e6f92920d4c3da5427adbf6f083cb.png][]

获取对象的方法

![496149d55c984e04b2658329ac573db9.png][]

![e53085da5e6c437cbb3dbd18b586b289.png][]

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>例2_1 JavaScrtip对象应用示例</title>
    </head>
    <body>
    <script>
        person = new Object();
        person.firstname = 'Bob';
        person.lastname = 'Steven';
        person.age = 45;
        person.eyecolor = 'blue';
        document.write(person.firstname + ', ' + person.lastname + '. ');
        document.write(person.age + '<br>eyecolor: ' + person.eyecolor);
    </script>
    </body>
    </html>

### 内置对象 ###

>  *  Gobal对象
>  *  Math对象

### 宿主对象 ###

#### 2.8. 7DOM事件 ####

> JavaScript还可以在HTML页面状态发生变化时执行代码，这种状态的变化称为DOM事件( Event )。
> 
> 定义了：
> 
>  *  作为对象的 HTML 元素
>  *  所有 HTML 元素的属性
>  *  访问所有 HTML 元素的方法
>  *  所有 HTML 元素的事件
> 
> 换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
> 
> W3C DOM 标准被分为 3 个不同的部分：
> 
>  *  Core DOM - 所有文档类型的标准模型
>  *  XML DOM - XML 文档的标准模型
>  *  HTML DOM - HTML 文档的标准模型

> 浏览器解析HTML网页时，会创建一个HTML DOM模型对象，通过执行JavaScript代码调用DOM方法，操作HTML元素的内容/属性/事件等，从而实现与HTML页面的互交

![d316d1f716264007a2b7e2809ab1b576.png][]

#### 2.8.8操作BOM对象 ####

> 浏览器对象模型( Browser Object Model，BOM )使JavaScript可以与浏览器进行交互。

常见对象

>  *  window ：浏览器窗口对象，其成员包括所有的全局变量、函数和对象
>  *  screen ：屏幕对象，通常用于获取用户可用屏幕的宽和高。
>  *  location ：位置对象，用于获得当前页面的 URL 地址，还可以把浏览器重定向到新的指定页面。
>  *  history ：历史记录对象，其中包含了浏览器的浏览历史记录。
>  *  navigator ：浏览器对象，通常用于获取用户浏览器的相关信息。

window对象

> 在JavaScript中window对象表示浏览器窗口，目前所有浏览器都支持该对象JavaScript中一切全局变量、函数和对象都自动成为window对象的内容。
> 
>   
> 例如，用于判断变量是否为数字的全局方法isNaN()就是window对象的方法，完整写法为window.isNaN()通常情况下window前缀可以省略不写。

![afc1e2bcc18c42f485649be28ca86a14.png][]

常见方法

![7c9b8eb162ae428896d7d4dd96773423.png][]

navigator对象

> 在JavaScript中window.navigator对象可用于获取用户浏览器的一系列信息，例如浏览器的名称、版本号等。该对象在使用时通常可以省略window前缀，简写为navigator

![a66eed6d66a042f58007a223c55f3162.png][]

> 大多数时候，我们不会使用navigator对象， 因为会被人为修改!不建议使用这些属性来判断和编写代码

screen 对象

> 在JavaScript中window.screen对象可用于获取屏幕的可用宽度和高度。该对象在使用时通常可以省略window前缀，简写为screen。

![acc0751bc804458fba5ed3bac4b7612e.png][]

location 对象

![bab002a6a50748ad9214794bc6d433a7.png][]

![69410e6f6e91480f87e5af55d68f5e64.png][]

document对象

![17b8dc5f23ca4df5a7ce6bf9686f6d77.png][]

![9698b162879a478eafdc9e474eeef16a.png][]history 对象

> 代表浏览器的历史记录

![118137ba566b4726bc31e4d1c880340f.png][]

history.back()
    history.forward()

#### 2.8.9操作DOM对象 ####

> 浏览器网页就是一个Dom 树形结构！
> 
>  *  更新：更新Dom节点
>  *  遍历dom节点：得到Dom节点
>  *  删除：删除一个Dom节点
>  *  添加：添加一个新的节点
> 
> 要操作一个Dom节点，就必须要先获得这个Dom节点

查找HTML元素

>  *  通过HTML元素的id名称查找;
>  *  通过HTML元素的标签名称查找:
>  *  通过HTML元素的类名称查找

![b2c8d67288484719850bcb8b820ad6fc.png][]

![5a377ecddc7b4f07b36a83b06fcf3bd6.png][]

更新节点

修改HTML文本内容

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="id1">
        123
    </div>
    <script>
      var id1 = document.getElementById('id1');
      //动态创建文本内容
      var date = new Date();
      document.write("当前时间为"+date.toLocaleDateString());
      //修改文本的值
      id1.innerText="456";
      //修改解析HTML文本标签
      id1.innerHTML='<strong>789</strong>';
    </script>
    </body>
    </html>

修改HTML元素属性

![891d8082b4064ae989bbf19e768bbf05.png][]

修改HTML的CSS样式

![e9c2aa28e10d4d25bd0c919c20977a85.png][] 删除DOM节点

> 删除节点的步骤:先获取父节点,在通过父节点删除自己  
> 注意:删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意!

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="father">
        <h1>标题</h1>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
    </div>
    <script>
      var self = document.getElementById('p1');
      var father = p1.parentElement;
      father.removeChild(self);
    </script>
    </body>
    </html>

插入节点1创建

![edac328d3cc7425ba1b200c4235e1b1d.png][]

![f6d4d06ed9484456a21b235843e92bdb.png][]

![a7b45972a14e4720bb3509784f6f05ea.png][]

插入节点2

![fd446ba5fee242a3a929373f4394c3ad.png][]

### 2.9类型转换 ###

#### 2.9.1转换成字符串 ####

//布尔值类型（Boolean）和数字类型（Number）这两种基本数据类型均可使用toString()方法
    //把值转换为字符串形式
    var x = true;
    var result = x.toString(); //返回"true"

//toString()不带参数直接使用，此时无论是整数、小数或者科学计数法表示的内容，都会显示为十进制的数值
    var x1 = 99;
    var x2 = 99.90;
    var x3 = 1.25e8;
     
    var result1 = x1.toString(); //返回值为"99"
    var result2 = x2.toString(); //返回值为"99.9"
    var result3 = x3.toString(); //返回值为"125000000"

var x = 10;
    var result1 = x.toString(2); //声明将原始数据转换成二进制数，返回值为"1010"
    var result2 = x.toString(8); //声明将原始数据转换成八进制数，返回值为"12"
    var result3 = x.toString(16); //声明将原始数据转换成十六进制数，返回值为"A"
    
    var x = null;
    var result1 = String(x); //返回值为字符串"null"
    var result2 = x.toString(); //发生错误，无返回值

#### 2.9.2转换成数字 ####

![81dc77facb4c406a9291821ba60a3b89.png][]

var x = "123hello";
    var result = parseInt(x); //返回值是123，因为h不是有效数字，则停止检查
    
    var x = "hello";
    var result = parseInt(x); //返回值是NaN，因为第一个字符h就不是有效数字，直接停止检查
    
    var x = "3.14";
    var result = parseInt(x); //返回值是3，因为小数点不是有效数字，则停止检查
    
    var x = "10";
    var result1 = parseInt(x, 2); //表示原始数据为二进制，返回值为2
    var result2 = parseInt(x, 8); //表示原始数据为八进制，返回值为8
    var result3 = parseInt(x, 10); //表示原始数据为十进制，返回值为10
    var result4 = parseInt(x, 16); //表示原始数据为十六进制，返回值为16
    
    var x = "010";
    var result1 = parseInt(x); //表示原始数据为八进制，返回值为8
    var result2 = parseInt(x, 10); //表示原始数据为十进制，返回值为10
    var result3 = parseInt(x, 8); //表示原始数据为八进制，返回值为8

var x = "hello3.14";
    var result = parseFloat(x); //返回值是NaN，因为第一个字符h就不是有效数字，则停止检查
    
    var x = "3.14hello";
    var result = parseFloat(x); //返回值是3.14，因为h不是有效数字，则停止检查
    
    var x = "3.14.15.926";
    var result = parseFloat(x); //返回值是3.14，因为第二个小数点不是有效数字，则停止检查
    
    var x = "010";
    var result1 = parseInt(x); //默认为是八进制数，返回值为8
    var result2 = parseFloat(x); //默认为是十进制数，返回值为10
    
    var x = "A";
    var result1 = parseInt(x, 16); //parseInt()允许十六进制数，返回值为10
    var result2 = parseFloat(x); //parseFloat()不允许十六进制数，返回值为NaN

#### 2.9.3强制类型转换![666cb5f9975c49888f29773841c5b32f.png][] ####

Boolean()函数

> ![a464540313e649108639b2d8632db20d.png][]
> 
> ![fabf0d1f557d49d188df5241ae36066a.png][]
> 
> ![466f04c9f03d4501be5598c39f90c8ac.png][]

Number函数

> ![e4bdc9f768704de0967a648f8ee52e20.png][]
> 
> ![46b853424bf448599707ee989fccdea2.png][]

String函数

![7cb10ee0837746caa62bdab64a5fa9e9.png][]

## 三、JavaScript高阶 ##

### 3.1JavaScript 输出 ###

> JavaScript 没有任何打印或者输出的函数
> 
> JavaScript 可以通过不同的方式来输出数据
> 
>  *  使用 window.alert() 弹出警告框
>  *  使用 document.write() 方法将内容写到 HTML 文档中
>  *  使用 innerHTML 写入到 HTML 元素
>  *  使用 console.log() 写入到浏览器的控制台

使用 window.alert()

![c220f13685624eada2b9604e435822bf.png][]

使用 document.write() 方法

![67b2df38b32e4df397e0cab591c2b4a9.png][]

使用 innerHTML 写入

> 如需从 JavaScript 访问某个 HTML 元素， 使用 document.getElementById(id) 方法； 使用innerHTML 来获取或插入元素内容；

![1fe100cfa14c4b9fba97102e7e696647.png][]

使用 console.log()

### 3.2JSON对象/BSON ###

> JSON: JavaScript Object Notation. JSON 是一种轻量级的数据交换格式,用于存储和传输数据
> 
> JSON 格式在语法上与创建 JavaScript 对象代码是相同的
> 
> ![86057034d7dc46a0b154dbb90f1320c1.png][]
> 
> Json，通过文本描述JS对象，方便转换JS对象传递操作，属性以键值对保存，大括号，分号，双引号，逗号，方括号(数组)，方法等等
> 
> 格式:  
> ●对象都用\{\}  
> ●数组都用\[\]  
> ●所有的键值对都是用key:value

![17b918fc71a741c9849ff879889c683a.png][]

> 后端从数据库取出数据，将数据转为Java对象，将Java对象转为json字符串，通过网络将json字符串传递给前端，前端将json字符串转为JavaScript对象，JavaScript将JavaScript对象中的数据渲染到页面

### 3.3面向对象编程 ###

#### 3.3.1原型继承 ####

#### 3.3.2class继承 ####

定义一个类

![6a56f36a3f4d47b281d0524b16d92ebd.png][]

继承

![e2a8aca22a9045a8ba75e70d7b56fae1.png][]

> 原型链

### 3.4事件概述 ###

![a5ed4468980648ca945600af43774693.png][]

> 事件句柄是事件发生要进行的操作。onload 属性就是我们所说的事件句柄,也称为事件属性。![c6c219f5ca164b12b1457c726c60ecf7.png][]

### ![45326fc09ca6470fa9297a9321f4d892.png][] ###

![eaef6f48cd71446e92ac428d27224ca3.png][]

#### 表单事件 ####

![241d04ee0df34aac8d3d187da0e6d8aa.png][]

#### 选择事件 ####

![ef7eaa41e58848cda28a84d618067b87.png][]

键盘事件

![8893f77f2be341019450afc83891cc29.png][]

#### 窗口事件 ####

![27318e2a10954af8bdfa8c4754e903af.png][]

### ![187562501083422fab3036060db4e4bd.png][]3.5DOM事件 ###

> JavaScript还可以在页面状态发生变化时执行代码，这种状态的变化称为DOM事件(事件)。

![a63192dcdd3742bda00c11ac6ab716a9.png][]

![09442e9d42374be0b4101218f4e55444.png][]

![a7bf371ffce24f97b53b993e80a7c43d.png][]

### 3.6操作表单 ###

![9e500250710245c791c637d145da7804.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    </head>
    <body>
    <form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
        <p>
        <span>用户名:</span><input type="text" id ="username" name="username">
        </p>
        <p>
            <span>密码:</span><input type="password" id="input-password">
        </p>
        <input type="hidden" id="md5-password" name="password">
        <button type="submit">提交</button>
    </form>
    <script>
      function aaa(){
          var uname = document.getElementById('username');
          var pwd = document.getElementById('input-password');
          var md5pwd = document.getElementById('md5-password');
          md5pwd.value=md5(pwd.value);
          return true;
      }
    </script>
    </body>
    </html>

## 四、关键语法补充 ##

### 4.1添加/删除 新属性![2b231369ce4e46f688d52c38dc1f4e36.png][] ###

### 4.2对象转数组 ###

![40f4bf8002cf437eb0e1760a952283d8.png][]

### 4.3访问器 ###

![39554e98751e4749b7f4d10b09dc4fc2.png][]

### 4.4对象构造器 ###

![6d1f28a5de354db8a3211f4e65fda67a.png][]

### 4.5对象原型 ###

![e86888de09334fafbfb9d32cdc07c031.png][]

![a6512da177d44b059e99b5aae9fcb70e.png][]

### 4.6JAVASCRIPT类 ###

![4e18e2f2821540a0af64d80e8dbf63ca.png][]

### 4.7回调![23a9692fe35a4bfebc9853a3817db65b.png][] ###

### ![a3c42472444f4bb9a4a25a1ae8cd694e.png][] 4.8异步 ###

> 与其他函数并行运行的函数称为异步(asynchronous)

#### 4.8.1等待超时 ####

![392e77b01dca4673a05feb680f44846e.png][]

![bea092fa195f43f9a411f450f5805204.png][]

#### 4.8.2等待间隔 ####

![7d92d1acb0ed4d89be30220e75639613.png][]

### 4.9Promise ###

![8402a0a8dba549fd8b1dd98f55260fef.png][]

### ![dc5ffd6ddbf44dd8a02695d57426a5af.png][]4.10asynchronism异步 ###

### ![aa94020b560641caa8e7f5b4d5b46774.png][]![062ebea20340450d9c0204a42270038e.png][] ![07beecf51e244313b55b2476c7863444.png][] ###

### 4.11Call()方法![3579942cc193429b96a0ac677211c2c4.png][] ###

### ![7c3c1e9554844535b608647d168c3349.png][] ###

### 4.12apply()方法 ###

![7ea07aaa1ef44c36b3d4cd425a7acc10.png][]

### 4.13嵌套函数 ###

### ![dd0b3b37f6084fcd8acae988b5f4c8d0.png][] 4.14自调用函数![e255b7d0cd7a4982a627eb5ee3aa4568.png][] ###

### 4.15闭包 ###

![71e2e44e88e64914b1212e56a978d93b.png][]

![ab4daa02f2ed4d08af9c88ced33253a8.png][]

### 4.16模板字符串 ###

![f22134659bf544f5ac23c1fa16560380.png][]

[732c5c4f20684056a5719e8c856c58f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/1ef05d3a5d504e50a9e81b5e5f43fe79.png
[776f55a4fa834d1581ec8d1533dc7325.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/1c4375c9c83543b6811fd0bf15e5d440.png
[4bcce5efa96d4801bba68f5da71aefa4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/b1e19c77f505437f91e051f148e5d2b4.png
[ff2c3e91a5744d49a67d80618b6c8801.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/4bc7743f30de4b69b3895ec9c7b5c6df.png
[51a12b9d8ba44679bbd869b15f415016.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/0508bd6a6e2a4b768e7be38becbf5430.png
[2ac00ce3d95a47a7a01a719d24a2ecc0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/de32eba7ce5e4f51bfcf0133ddae02b9.png
[c2b99f67641f43dfb9cdc8d26e4358dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/f003639c92b54a028c916cbd4af047aa.png
[c73546e1834d4e3ab77a234622df65d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/7b332531416c409cbf0f092edd11cb99.png
[b858d7440fd34c91b71275b0785856e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/0fe6b9013d9e4df2993ade682ab36d69.png
[41f72b3853a14014bbf4a0466ebd32fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/fdf38d50516441f5b5ff0857b6d3e74a.png
[26ad4bf63e494fd3aab324a665c54ce8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/bd196d9c552d45779cc1159fbe93d6fb.png
[ac46cbdd52f64d0f89d52b26039703a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/977b8871cf2049f797333ac8e0c1bc8d.png
[18e4cb1bf1cc48018001b11827368727.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/83ac742218064494ad080d8918410f1c.png
[8510086098ab46afac25f4bc06bb6da7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/111308553f894659b044d340b95f8c94.png
[f1fd9646eb0b46a0a74d585ac9c4bfd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/da608086c61c40019214f4fc555d6839.png
[7c620792c9cb460d947b44bf17587b55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/cefd8d0e35ae4a15b479adc1a9ccf8d9.png
[c5062d4ee970430aba610ba0e4409ed3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/ecd8a07a26ec4de3998e3e594697ab0f.png
[27a24e2bd56f4d7ba6e6d2c08a7fa1be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/289799e4d4c94a5b8fe0cfc2c4aca8b1.png
[15c3cf73d9b845e0b6585277dda31857.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/2a1d858f1bb84d75a5da9078a1a0eebd.png
[4cab15cdda4d41b89e1ef0ab5cc2e680.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/66ff8012f8954029a7ec239dd72bd0a9.png
[03d1b8f94c174a18847a6ca3b4d5b08b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/3d113324a23f41c689bc5e51148811d7.png
[4263c156a76e41268671440606ff6a07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/c880a5ce88124eb39c2f2a79a360ff27.png
[0b9483e2489b4ea0ac44d2179a17d445.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/e1675f40c2ac440b899e3a9a7538084a.png
[9a7d462e9d03439cbb2495fae5524661.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/b9c5c51a8ed54a13b2b79c008ca5e894.png
[167469522eda47e9a10a65a5e0347395.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/ceecfc23cec1488ea1482674e77672db.png
[6d6b50ae87a0433e8ba4d475358b9869.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/32c1e1122fa34602a026d81154047aa5.png
[04d0fe47c38844aaac51ebe6036ef26a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/ee8bbf8d0ae7432cb9819d6a776a516c.png
[373ff309f0404f34938a4eb72511431e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/9ee17f1386f141b28204c0e67e9c3955.png
[ce20bf80fdf14b65ae8efc9839c4eba0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/e2313efc24244b11b65230f26d3bdf0c.png
[09d63740a3a24007beeb7d10179794c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/45a7a31294e94fee8429e5c7c679e507.png
[ec9636ee9cf04ca6b55f662641b8c444.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/0fa6f35d2ded4fdfb3a25eb0114053fc.png
[5022d84648dc4894b96899c8749c8e5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/8de0a9a9ecb84b199856404871643440.png
[0e07facd1feb4098b6474cd2640b668f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/b8726838d4bc4f44a782070d045138d1.png
[4c58298ac5d04cad804468d4a7edbc8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/2f4efddc4cfd46bda3eb4fd8d43f28eb.png
[d37162a7b37944c0aa8e5bc17b103b8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/4badee48ad96498b83390fb65487d147.png
[03efbd6fa28e4a35afcd6bb4a060b4bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/50499298b8a34e619dea13e71b69ca38.png
[c7c0473943b0424a8cca7cddf970f492.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/b084d145294747edb61f83dc2f6bd04c.png
[fd42ea92b142447995c88c84e23172d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/e69c0fc1fd8c488a9fae0ab3b17a3c27.png
[58a49b59f3684162a3e770c55e37e398.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/d6631bbd330d413ebdca670dd3732561.png
[00eb9ae888b442a88645229e5ff75fbc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/139baeaec6524b75b9a444db9be406f9.png
[5afd48325f324c3f9a0573b868e78f8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/d8f08eca9c5c4fdb9a7eae77a307c9a0.png
[27edd508af8b40b893db60903ac74005.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/4b0925aa750847049245d768bc9079d5.png
[03a264ca89a44c088e4f8ee4a58afe61.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/4721cb96df4c41da952b6a9d08e6aaea.png
[042bd846dd3245c2b7f12015a13e1b4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/313cc1bdac8f4706b12c2ddda8af903a.png
[e7471ea271a94adbb5e6fdbacf784c72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/ba41ab7692674bc5b2c6736c8ad11c02.png
[d47a29218e264df9a334cdb8e6f5a6c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/f4b63732d9b944caaccb73eb9e44bb95.png
[dc12327b7ac34177bc5c219ee137f545.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/423a3395b0a14b1c968bea7d275ef397.png
[f21e6f92920d4c3da5427adbf6f083cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/68b0798c04204a029c070fe545a356f9.png
[496149d55c984e04b2658329ac573db9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/934d818d5c234ce1ba2a53fd89b6797c.png
[e53085da5e6c437cbb3dbd18b586b289.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/90f880992bd74170952702784f408b5a.png
[d316d1f716264007a2b7e2809ab1b576.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/634249d489804d61b55a00f06eb04e2c.png
[afc1e2bcc18c42f485649be28ca86a14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/a247863526b84f5183abd38553158e00.png
[7c9b8eb162ae428896d7d4dd96773423.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/18df7877c69846cfaadf75ea5491cc29.png
[a66eed6d66a042f58007a223c55f3162.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/451920d8f18944339a55da73a26c2cb4.png
[acc0751bc804458fba5ed3bac4b7612e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/1fe8b4cf56b24da8a95e23f1a7a071ab.png
[bab002a6a50748ad9214794bc6d433a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/d8bb42df776d4cf3958c86c9048ad3f1.png
[69410e6f6e91480f87e5af55d68f5e64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/acafe89852934132919dc8dde47e555f.png
[17b8dc5f23ca4df5a7ce6bf9686f6d77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/95d86f062fbb41c795db53d21371e869.png
[9698b162879a478eafdc9e474eeef16a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/ba90717be03d4dc198ebd0a5f0536df2.png
[118137ba566b4726bc31e4d1c880340f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/b6ae7236ecae4d3d81624a2effe0c350.png
[b2c8d67288484719850bcb8b820ad6fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/3d4acfb17b16448896a5ac091e135920.png
[5a377ecddc7b4f07b36a83b06fcf3bd6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/2cb809b06f2d44019abacf5572140ecc.png
[891d8082b4064ae989bbf19e768bbf05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/618af6da487f495fb37ed695d72c9633.png
[e9c2aa28e10d4d25bd0c919c20977a85.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/e118bba2a99a41dbbdf287ca635c0366.png
[edac328d3cc7425ba1b200c4235e1b1d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/8a6298d56ff94de48d9e4a173d8607f1.png
[f6d4d06ed9484456a21b235843e92bdb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/98f93577a1674b30b66a3eed7978dabf.png
[a7b45972a14e4720bb3509784f6f05ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/18798749548a43cea54632730ea65b9f.png
[fd446ba5fee242a3a929373f4394c3ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/531fc9fddad34aa1b53be314df569ab8.png
[81dc77facb4c406a9291821ba60a3b89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/1f212534651246c2891a9c013e88eec6.png
[666cb5f9975c49888f29773841c5b32f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/9160a194974140b498c0d083370bc50f.png
[a464540313e649108639b2d8632db20d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/4bd535f9adc0443aa227d493b236dc64.png
[fabf0d1f557d49d188df5241ae36066a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/caf68392e439467db82d967bcfff6e49.png
[466f04c9f03d4501be5598c39f90c8ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/a522eda11da04546a2c5a8ab97d44209.png
[e4bdc9f768704de0967a648f8ee52e20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/3bc4779ee8af499d91bb344b647ade4f.png
[46b853424bf448599707ee989fccdea2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/35744692da4e43bdbe4c9cd48b7236a3.png
[7cb10ee0837746caa62bdab64a5fa9e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/b280c13c294f42fc905a462c84f0f0c2.png
[c220f13685624eada2b9604e435822bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/63aee75d23c14c6199cceb71745c716f.png
[67b2df38b32e4df397e0cab591c2b4a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/a0c783f1885b45219bc332840d024d53.png
[1fe100cfa14c4b9fba97102e7e696647.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/855f161ae7184d82981e111343459bb9.png
[86057034d7dc46a0b154dbb90f1320c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/c9544210ec6a4e1eabc5cdf6460c6482.png
[17b918fc71a741c9849ff879889c683a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/04880c700e504c9d9cfe3d2e1962850a.png
[6a56f36a3f4d47b281d0524b16d92ebd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/9265e6f41f0d47bb972764fa8714ba38.png
[e2a8aca22a9045a8ba75e70d7b56fae1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/1ab8a2437a0b44e7a96ac48b356a5633.png
[a5ed4468980648ca945600af43774693.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/1697128dd5a84efd91921b4f2275f1df.png
[c6c219f5ca164b12b1457c726c60ecf7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/c726b868cc2d43e299aeb6103b811968.png
[45326fc09ca6470fa9297a9321f4d892.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/dcec8257f56c4f5fb81deed59d0d60f7.png
[eaef6f48cd71446e92ac428d27224ca3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/d6c3b9c3ac1e4780885fe3a45f971c19.png
[241d04ee0df34aac8d3d187da0e6d8aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/509c1967a99e423b986fb20f6e3b4859.png
[ef7eaa41e58848cda28a84d618067b87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/64adf681e2674d59a2de3ceda9713223.png
[8893f77f2be341019450afc83891cc29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/13ea822fd18e4079a1b92cf270947aab.png
[27318e2a10954af8bdfa8c4754e903af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/f124793aca1449e19e41b26f7c9801be.png
[187562501083422fab3036060db4e4bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/3e1e25ada70a4223aa0f0f2402680958.png
[a63192dcdd3742bda00c11ac6ab716a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/d0b6703655ef466280a5fcd1e0aabc4d.png
[09442e9d42374be0b4101218f4e55444.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/1c8a9e8721f5437ea5f1fe9d93d2fa8c.png
[a7bf371ffce24f97b53b993e80a7c43d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/a882a3997fae42f89c1c2890441ad710.png
[9e500250710245c791c637d145da7804.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/961752dda6164d28a0f243d568a2d1fa.png
[2b231369ce4e46f688d52c38dc1f4e36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/c13155cb8a554e80b92f52d554e36b23.png
[40f4bf8002cf437eb0e1760a952283d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/4a83f2ffbccb44a392c35705f4f5a523.png
[39554e98751e4749b7f4d10b09dc4fc2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/1f31028c17e140a79f2fde7633261b54.png
[6d1f28a5de354db8a3211f4e65fda67a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/6ff6445a31f24647893b729f89994c0e.png
[e86888de09334fafbfb9d32cdc07c031.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/b0726211342c4e1fb37cdc35a228d4ae.png
[a6512da177d44b059e99b5aae9fcb70e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/6a0136d90c834566815a5dee36a66cb8.png
[4e18e2f2821540a0af64d80e8dbf63ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/50c2bf54993b4671b1e9220315552eb3.png
[23a9692fe35a4bfebc9853a3817db65b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/24764b426b7a4f17923ee84434bcd104.png
[a3c42472444f4bb9a4a25a1ae8cd694e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/2e8110345f4e47f6b5f7bd562db32971.png
[392e77b01dca4673a05feb680f44846e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/d1ab0c33f1b147f591f2b0d054959476.png
[bea092fa195f43f9a411f450f5805204.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/6c1f1cb727f244d1a924a67e3a511779.png
[7d92d1acb0ed4d89be30220e75639613.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/d84a972cddbf450db2d108990b5b9873.png
[8402a0a8dba549fd8b1dd98f55260fef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/a623712ff7884fdbb92ad0c8929a1b93.png
[dc5ffd6ddbf44dd8a02695d57426a5af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/d9bf4506fd234f58a5fbcaf6d0566b50.png
[aa94020b560641caa8e7f5b4d5b46774.png]: https://img-blog.csdnimg.cn/aa94020b560641caa8e7f5b4d5b46774.png
[062ebea20340450d9c0204a42270038e.png]: https://img-blog.csdnimg.cn/062ebea20340450d9c0204a42270038e.png
[07beecf51e244313b55b2476c7863444.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/925539909e7a428db1feb0ff39a2543e.png
[3579942cc193429b96a0ac677211c2c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/9abebfffd2cb40dabd58c0f108ab93f3.png
[7c3c1e9554844535b608647d168c3349.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/e53de1d056f64936b91ff885b9d85994.png
[7ea07aaa1ef44c36b3d4cd425a7acc10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/28b4f4b09dcb44208f4bfdd4e0489d38.png
[dd0b3b37f6084fcd8acae988b5f4c8d0.png]: https://img-blog.csdnimg.cn/dd0b3b37f6084fcd8acae988b5f4c8d0.png
[e255b7d0cd7a4982a627eb5ee3aa4568.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/06e9bb8ce5324a6c88800cd353c33b34.png
[71e2e44e88e64914b1212e56a978d93b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/3043f41f743743749aec324b9e5d3d7f.png
[ab4daa02f2ed4d08af9c88ced33253a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/add598959cbe4280a3a2f5c89edc26cf.png
[f22134659bf544f5ac23c1fa16560380.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/25572ee1d5a74ecbb5c0c7afbb9ad4e9.png