JavaScript 复习

阳光穿透心脏的1/2处 2023-10-15 13:13 29阅读 0赞

# 第三章 JavaScript #

## 1 JavaScript的起源 ##

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript，因为Netscape与Sun合作，网景公司管理层希望蹭Java的热度，因此取名为JavaScript。

JavaScript总共分成三部分: ECMAScript(基本语法)、BOM(浏览器对象模型)、DOM(文档对象模型)

## 2 JavaScript的特性 ##

### 2.1 脚本语言 ###

JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

### 2.2 基于对象 ###

JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。

### 2.3 弱类型 ###

JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

### 2.4 事件驱动 ###

JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

### 2.5 跨平台性 ###

JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

## 3 HelloWorld ##

### **3.1 功能效果图** ###

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_image_2Fimg001_-PsmAFP5gj.png_pos_id_img-LeSphs6e-1693374798955]

### **3.2 代码实现** ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS的入门程序</title>
    </head>
    <body>
        
        <button type="button" id="helloBtn">SayHello</button>
        
        <script type="text/javascript">
            //1. 通过js代码获取到按钮对象
            //document代表当前HTML文档
            var btn = document.getElementById("helloBtn");
            //2. 给获取到的btn对象绑定点击事件
            btn.onclick = function () {
          
                //弹出警告框
                alert("Hello");
            }
        </script>
    </body>
    </html>

## 4 JavaScript的引入方式 ##

### 4.1 内部脚本方式 ###

*  JavaScript代码要写在script标签内
 *  script标签可以写在文档内的任意位置
 *  为了能够方便查询或操作HTML标签（元素）script标签可以写在body标签后面

在我们的入门程序中使用的就是内部脚本方式引入的JavaScript

### 4.2 外部脚本方式 ###

在script标签内通过src属性指定外部xxx.js文件的路径即可。但是要注意以下两点：

*  引用外部JavaScript文件的script标签里面不能写JavaScript代码
 *  先引入，再使用
 *  script标签不能写成单标签
    
    ![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_image_2Fimg008_JvCj3W3lwb.png_pos_id_img-OhvUJRMz-1693374798956]
 *  outer.js
    
    外部js文件，不需要添加script标签。直接写js代码或者方法即可！
    
        alert("hello world 外部js!!");

引入方式如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS的引入方式</title>
        
        <script src="../js/outer.js"></script>
    </head>
    <body>
    
        
        
        <script type="text/javascript">
            //调用外部js文件中的方法
            showMessage();
            alert("hello world");
        </script>
    </body>
    </html>

## 5 声明和使用变量 ##

### 5.1 JavaScript数据类型 ###

*  基本数据类型
    
     *  数值型number：JavaScript不区分整数、小数
     *  字符串string：JavaScript不区分字符、字符串；单引号、双引号意思一样。
     *  布尔型boolean：true、false  
        在JavaScript中，其他类型和布尔类型的自动转换。  
        true：非零的数值，非空字符串，非空对象  
        false：零，空字符串，null，undefined  
        例如："false"放在if判断中
        
            // "false"是一个非空字符串，直接放在if判断中会被当作『真』处理
            if("false"){
                    
              alert("true");
            }else{
                    
              alert("false");
            }
 *  引用类型(后面详细讲解)
    
     *  所有new出来的对象
     *  用\[\]声明的数组
     *  用\{\}声明的对象

### 5.2 变量 ###

*  关键字：var,其实ECMAScript6之后建议使用let
 *  数据类型：JavaScript变量是弱类型的，可以接收任意类型的数据
 *  标识符：严格区分大小写
 *  变量使用规则
    
     *  如果使用了一个没有声明的变量，那么会在运行时报错  
        Uncaught ReferenceError: b is not defined
     *  如果声明一个变量没有初始化，那么这个变量的值就是undefined

## 6 函数(重点) ##

### 6.1 内置函数 ###

内置函数就是JavaScript中内置好的函数，我们可以直接使用

*  弹出警告框

alert("警告框内容");

*  弹出确认框

var result = confirm("确定要删除吗？");
    if(result) {
        
        // 执行删除
    }

用户点击『确定』返回true，点击『取消』返回false

var result = confirm("老板，真的不加个钟吗？");
    if(result) {
        
      console.log("老板点了确定，表示要加钟");
    }else{
        
      console.log("老板点了确定，表示不加钟");
    }

*  在控制台打印日志

console.log("true");

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_image_2Fimg009_hjhr1DerFh.png_pos_id_img-jSTUCqB5-1693374798957]

### 6.2 声明函数 ###

声明函数就是使用者自己定义一个函数，它有两种写法:

写法1：

function sum(a, b) {
        
        return a+b;
    }

写法2：

var total = function() {
        
        return a+b;
    };

写法2可以这样解读：声明一个函数，相当于创建了一个『函数对象』，将这个对象的『引用』赋值给变量total。如果不给这个对象赋值，我们可以将其作为匿名函数使用(在后续学习内容中会用到)

### 6.3 调用函数 ###

JavaScript中函数本身就是一种对象，函数名就是这个『对象』的『引用』

而调用函数的格式是:函数引用()

//函数的声明
    function sum(a, b) {
        
        return a+b;
    }
    //调用函数并接收返回值
    var result = sum(2, 3);
    //控制台打印返回值内容
    console.log("result="+result);

或：

//函数的声明
    var total = function(a,b) {
        
        return a+b;
    }
    //调用函数并接收返回值
    var totalResult = total(3,6);
    //控制台打印返回值内容
    console.log("totalResult="+totalResult);

## 7 对象(重点) ##

JavaScript中没有『类』的概念，对于系统内置的对象可以直接创建使用。

### 7.1 使用new关键字创建对象 ###

// 创建对象
    var obj01 = new Object();
    
    // 给对象设置属性和属性值
    obj01.stuName = "tom";
    obj01.stuAge = 20;
    obj01.stuSubject = "java";
    
    // 在控制台输出对象
    console.log(obj01);

### 7.2 使用\{\}创建对象(常用) ###

// 创建对象
    var obj02 = {
        
        "soldierName":"john",
        "soldierAge":35,
        "soldierWeapon":"gun"
    };
    
    // 在控制台输出对象
    console.log(obj02);

### 7.3 给对象设置函数属性 ###

// 创建对象
    var obj01 = new Object();
    
    // 给对象设置属性和属性值
    obj01.stuName = "tom";
    obj01.stuAge = 20;
    obj01.stuSubject = "java";
    
    obj01.study = function() {
        
      console.log(this.stuName + " is studying");
    };
    
    // 在控制台输出对象
    console.log(obj01);
    // 调用函数
    obj01.study();

或者

// 创建对象
    var obj02 = {
        
      "soldierName":"john",
      "soldierAge":35,
      "soldierWeapon":"gun",
      "soldierShoot":function(){
        
        console.log(this.soldierName + " is using " + this.soldierWeapon);
      }
    };
    // 在控制台输出对象
    console.log(obj02);
    // 调用函数
    obj02.soldierShoot();

### 7.4 this关键字 ###

this关键字只有两种情况：

*  在函数外面：this关键字指向window对象（代表当前浏览器窗口）
 *  在函数里面：this关键字指向调用函数的对象

// 直接打印this
    console.log(this);
    
    // 函数中的this
    // 1.声明函数
    function getName() {
        
      console.log(this.name);
    }
    
    // 2.创建对象
    var obj01 = {
        
      "name":"tom",
      "getName":getName
    };
    var obj02 = {
        
      "name":"jerry",
      "getName":getName
    };
    
    // 3.调用函数
    obj01.getName();
    obj02.getName();

## 8 数组(重点) ##

### 8.1 使用new关键字创建数组 ###

// 1.创建数组对象
    var arr01 = new Array();
    
    // 2.压入数据
    arr01[0]="java";
    arr01[1]="mysql";
    arr01[2]="oracle";
    arr01.push("apple");
    arr01.push("orange");
    arr01.push("banana");
    arr01.push("grape");
    
    // 3.遍历数组
    for (var i = 0; i < arr01.length; i++) {
        
      console.log(arr01[i]);
    }
    
    // 4.数组元素反序
    arr01.reverse();
    for (var i = 0; i < arr01.length; i++) {
        
      console.log(arr01[i]);
    }
    
    // 5.数组元素拼接成字符串
    var arrStr = arr01.join(",");
    console.log(arrStr);
    
    // 6.字符串拆分成数组
    var arr02 = arrStr.split(",");
    for (var i = 0; i < arr02.length; i++) {
        
      console.log(arr02[i]);
    }
    
    //  7.删除数组元素，从index为1的位置开始删，删2个  ★
    arr01.splice(1,2);
    for (var i = 0; i < arr01.length; i++) {
        
        console.log(arr01[i]);
    }

### 8.2 使用\[\]创建数组 ###

// 8.使用[]创建数组
    var arr03 = ["cat","dog","tiger"];
    console.log(arr03);
    //后续操作和上述一致

## 9 JSON(最重点) ##

### 9.1 JSON格式的用途 ###

在开发中凡是涉及到『跨平台数据传输』，JSON格式一定是首选。

### 9.2 JSON格式的说明 ###

*  JSON数据两端要么是\{\}，要么是\[\]
 *  \{\}定义JSON对象
 *  \[\]定义JSON数组
 *  JSON对象的格式是：

{
        key:value,key:value,...,key:value}

*  JOSN数组的格式是：

[value,value,...,value]

*  key的类型固定是字符串
 *  value的类型可以是：
    
     *  基本数据类型
     *  引用类型：JSON对象或JSON数组

正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组，所以JSON格式是可以『多层嵌套』的，所以JSON格式不论多么复杂的数据类型都可以表达。

//json的格式: {key:value,key:value}
    var person1 = {
        
        "name":"张三疯",
        "age":189,
        "address":"武当山"
    }
    //其实JSON对于前端而言，就是一个对象
    console.log(person1.name)
    
    var person2 = {
        
        "name":"张翠山",
        "age":189,
        "address":"武当山",
        "wife":{
        
            "name":"殷素素",
            "age":18,
            "address":"武当山下的小村庄"
        }
    }
    //console.log(person2.wife.name)
    
    var person3 = {
        
        "name":"张翠山",
        "age":189,
        "address":"武当山",
        "wife":{
        
            "name":"殷素素",
            "age":18,
            "address":"武当山下的小村庄"
        },
        "sons":[
            {
        
                "name":"张无忌",
                "age":1,
                "address":"武当山"
            }
        ]
    }
    
    //json数组的格式: [{key:value,key:value},{key:value,key:value}]
    var personList = [person1,person2]

### 9.3 JSON对象和JSON字符串互转 ###

*  JSON对象转JSON字符串

var jsonObj = {
        "stuName":"tom","stuAge":20};
    var jsonStr = JSON.stringify(jsonObj);
    
    console.log(typeof jsonObj); // object
    console.log(typeof jsonStr); // string

*  JSON字符串转JSON对象

jsonObj = JSON.parse(jsonStr);
    console.log(jsonObj); // {stuName: "tom", stuAge: 20}

## 10 DOM的概念 ##

DOM是Document Object Model的缩写，意思是『文档对象模型』——将HTML文档抽象成模型，再封装成对象方便用程序操作。

这是一种非常常用的编程思想：将现实世界的事物抽象成模型，这样就非常容易使用对象来量化的描述现实事物，从而把生活中的问题转化成一个程序问题，最终实现用应用软件协助解决现实问题。而在这其中『模型』就是那个连通现实世界和代码世界的桥梁。

### 10.1 DOM树的概念 ###

浏览器把HTML文档从服务器上下载下来之后就开始按照『从上到下』的顺序『读取HTML标签』。每一个标签都会被封装成一个『对象』。而第一个读取到的肯定是根标签html，然后是它的子标签head，再然后是head标签里的子标签……所以从html标签开始，整个文档中的所有标签都会根据它们之间的『父子关系』被放到一个『树形结构』的对象中。

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_image_2Fimg003_aDbpjxN95P.png_pos_id_img-XYkuV9NB-1693374798958]

这个包含了所有标签对象的整个树形结构对象就是JavaScript中的一个可以直接使用的内置对象：document。

例如，下面的标签结构：

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_image_2Fimg004_lx0l51YlkN.png_pos_id_img-mhsht2dy-1693374798958]

会被解析为：

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_image_2Fimg005_EUle83Vhmk.png_pos_id_img-ujkdmLfQ-1693374798959]

### 10.2 各个组成部分的类型 ###

整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。

> 其实严格来说，JavaScript并不支持真正意义上的『继承』，这里我们借用Java中的『继承』概念，从逻辑上来帮助我们理解各个类型之间的关系。

<table> 
 <thead> 
  <tr> 
   <th>组成部分</th> 
   <th>节点类型</th> 
   <th>具体类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>整个文档</td> 
   <td>文档节点</td> 
   <td>Document</td> 
  </tr> 
  <tr> 
   <td>HTML标签</td> 
   <td>元素节点</td> 
   <td>Element</td> 
  </tr> 
  <tr> 
   <td>HTML标签内的文本</td> 
   <td>文本节点</td> 
   <td>Text</td> 
  </tr> 
  <tr> 
   <td>HTML标签内的属性</td> 
   <td>属性节点</td> 
   <td>Attr</td> 
  </tr> 
 </tbody> 
</table>

### 10.3 父子关系 ###

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_image_2Fimg006_4aANv9AdZY.png_20_22images_22_pos_id_img-9EgJZgnc-1693374798959]

### 10.4 先辈后代关系 ###

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_image_2Fimg007_F0A8mrLwXt.png_20_22images_22_pos_id_img-YFJOHGOL-1693374798959]

### 10.5 DOM操作 ###

由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以下面罗列的API仅供参考，不做要求。

#### 10.5.1 在整个文档范围内查询元素节点 ####

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>API</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>根据id值查询</td> 
   <td>document.getElementById(“id值”)</td> 
   <td>一个具体的元素节</td> 
  </tr> 
  <tr> 
   <td>根据标签名查询</td> 
   <td>document.getElementsByTagName(“标签名”)</td> 
   <td>元素节点数组</td> 
  </tr> 
  <tr> 
   <td>根据name属性值查询</td> 
   <td>document.getElementsByName(“name值”)</td> 
   <td>元素节点数组</td> 
  </tr> 
  <tr> 
   <td>根据类名查询</td> 
   <td>document.getElementsByClassName(“类名”)</td> 
   <td>元素节点数组</td> 
  </tr> 
 </tbody> 
</table>

#### 10.5.2 在具体元素节点范围内查找子节点 ####

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>API</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>查找子标签</td> 
   <td>element.children</td> 
   <td>返回子标签数组</td> 
  </tr> 
  <tr> 
   <td>查找第一个子标签</td> 
   <td>element.firstElementChild</td> 
   <td>标签对象</td> 
  </tr> 
  <tr> 
   <td>查找最后一个子标签</td> 
   <td>element.lastElementChild</td> 
   <td>节点对象</td> 
  </tr> 
 </tbody> 
</table>

#### 10.5.3 查找指定元素节点的父节点 ####

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>API</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>查找指定元素节点的父标签</td> 
   <td>element.parentElement</td> 
   <td>标签对象</td> 
  </tr> 
 </tbody> 
</table>

#### 10.5.4 查找指定元素节点的兄弟节点 ####

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>API</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>查找前一个兄弟标签</td> 
   <td>node.previousElementSibling</td> 
   <td>标签对象</td> 
  </tr> 
  <tr> 
   <td>查找后一个兄弟标签</td> 
   <td>node.nextElementSibling</td> 
   <td>标签对象</td> 
  </tr> 
 </tbody> 
</table>

#### 10.5.5 DOM操作之查找元素案例 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM之查询</title>
    </head>
    <body>
        <div id="div01">
            <input type="text" id="username" name="aaa"/>
            <input type="text" id="password" name="aaa"/>
            <input type="text" id="email"/>
            <input type="text" id="address"/>
        </div>
        <input type="text"/><br>
        <input type="button" value="整个文档搜索按钮" id="btn01"/>
        <input type="button" value="具体元素子级搜索按钮" id="btn02"/>
        <input type="button" value="子级找父级搜索按钮" id="btn03"/>
        <input type="button" value="兄弟搜索按钮" id="btn04"/>
        <script>
            document.getElementById("btn01").onclick=function () {
          
                //根据id属性值获得元素对象
                var elementById = document.getElementById("username");
                console.log(elementById);
                //根据标签名称获得元素对象数组
                var inputs = document.getElementsByTagName("input");
                console.log(inputs.length);
                for (var i = 0; i < inputs.length; i++) {
          
                    console.log(inputs[i]);
                }
                //根据name属性值获得元素对象数组
                var elementsByName = document.getElementsByName("aaa");
                console.log(elementsByName.length);
                for (var i = 0; i < elementsByName.length; i++) {
          
                    console.log(elementsByName[i]);
                }
            }
            document.getElementById("btn02").onclick=function () {
          
                //从div内搜索
                var div01 = document.getElementById("div01");
                //div01中的所有子节点元素数组
                var children = div01.children;
                console.log(children.length);
                for (var i = 0; i < children.length; i++) {
          
                    console.log(children[i]);
                }
                //第一个子节点元素
                var firstElementChild = div01.firstElementChild;
                console.log(firstElementChild);
                //最后一个子节点元素
                var lastElementChild = div01.lastElementChild;
                console.log(lastElementChild);
            }
            document.getElementById("btn03").onclick=function () {
          
                var elementById = document.getElementById("password");
                //父级节点元素
                var parentElement = elementById.parentElement;
                console.log(parentElement)
            }
            document.getElementById("btn04").onclick=function () {
          
                var elementById = document.getElementById("password");
                //前一个兄弟
                var previousElementSibling = elementById.previousElementSibling;
                console.log(previousElementSibling)
                //后一个兄弟
                var nextElementSibling = elementById.nextElementSibling;
                console.log(nextElementSibling)
            }
        </script>
    </body>
    </html>

#### 10.5.6 属性操作 ####

<table> 
 <thead> 
  <tr> 
   <th>需求</th> 
   <th>操作方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>读取属性值</td> 
   <td>元素对象.属性名</td> 
  </tr> 
  <tr> 
   <td>修改属性值</td> 
   <td>元素对象.属性名=新的属性值</td> 
  </tr> 
 </tbody> 
</table>

#### 10.5.7 标签体的操作 ####

<table> 
 <thead> 
  <tr> 
   <th>需求</th> 
   <th>操作方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>获取或者设置标签体的文本内容</td> 
   <td>element.innerText</td> 
  </tr> 
  <tr> 
   <td>获取或者设置标签体的内容</td> 
   <td>element.innerHTML</td> 
  </tr> 
 </tbody> 
</table>

#### 10.5.8 DOM操作之属性标签体操作案例 ####

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>操作标签的属性和文本</title>
        </head>
        <body>
            <input type="text" id="username" name="username" />
            <div id="d1">
                <h1>你好世界</h1>
            </div>
            <script>
                //目标: 获取id为username的输入框的value
                //1. 找到要操作的标签
                var ipt = document.getElementById("username");
    
                //2. 设置标签的value属性值
                ipt.value = "张三"
    
                //3. 获取标签的value属性的值
                var value = ipt.value;
                console.log(value)
    
                //获取id为d1的div中的文本内容
                //获取标签的文本: element.innerText,获取文本的时候会将左右两端的空格去掉
                var innerText = document.getElementById("d1").innerText;
                console.log(innerText)
    
                //获取标签体的内容: element.innerHTML,获取标签体的内容
                var innerHTML = document.getElementById("d1").innerHTML;
                console.log(innerHTML)
    
                //设置标签体的内容:建议使用innerHTML，如果是使用innerText的话它会将标签当做普通文本处理
                document.getElementById("d1").innerHTML = "<h1>hello world</h1>"
            </script>
        </body>
    </html>

#### 10.5.9 DOM增删改操作 ####

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document.createElement(“标签名”)</td> 
   <td>创建元素节点并返回，但不会自动添加到文档中</td> 
  </tr> 
  <tr> 
   <td>document.createTextNode(“文本值”)</td> 
   <td>创建文本节点并返回，但不会自动添加到文档中</td> 
  </tr> 
  <tr> 
   <td>element.appendChild(ele)</td> 
   <td>将ele添加到element所有子节点后面</td> 
  </tr> 
  <tr> 
   <td>parentEle.insertBefore(newEle,targetEle)</td> 
   <td>将newEle插入到targetEle前面</td> 
  </tr> 
  <tr> 
   <td>parentEle.replaceChild(newEle, oldEle)</td> 
   <td>用新节点替换原有的旧子节点</td> 
  </tr> 
  <tr> 
   <td>element.remove()</td> 
   <td>删除某个标签</td> 
  </tr> 
 </tbody> 
</table>

#### 10.5.10DOM操作之增删改案例 ####

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>创建和删除标签</title>
        </head>
        <body>
            <ul id="city">
                <li id="bj">北京</li>
                <li id="sh">上海</li>
                <li id="sz">深圳</li>
                <li id="gz">广州</li>
            </ul>
            <script>
                //目标1: 在城市列表的最后添加一个子标签 <li id="cs">长沙</li>
                //1. 创建一个li标签  <li></li>
                var liElement = document.createElement("li");
                //2. 给创建的li标签设置id属性和文本 <li id="cs">长沙</li>
                liElement.id = "cs"
                liElement.innerText = "长沙"
                //3. 将创建的li标签添加到城市列表中（ul）
                var cityUl = document.getElementById("city");
    
                //父.appendChild(子)将子标签添加到父标签的最后面
                //cityUl.appendChild(liElement)
    
                //目标2:在城市列表的深圳之前添加一个子标签 <li id="cs">长沙</li>
                //获取到深圳这个标签
                var szElement = document.getElementById("sz");
                //父.insertBefore(新标签,参照标签)
                //cityUl.insertBefore(liElement,szElement)
    
                //目标3: 在城市列表中添加一个子标签替换深圳 <li id="cs">长沙</li>
                //父.replaceChild(新标签,被替换的标签)
                //cityUl.replaceChild(liElement,szElement)
    
                //目标4: 在城市列表中删除深圳
                //szElement.remove()
    
                //目标5: 清除城市列表中的所有城市,保留城市列表标签ul
                cityUl.innerHTML = ""
            </script>
        </body>
    </html>

## 11 JavaScript的事件驱动(很重要) ##

### 11.1 事件的概念 ###

*  HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户做的某些事情
 *  事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

### 11.2 常见事件 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>此事件发生在何时…</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onclick</td> 
   <td>当用户点击某个对象时调用的事件句柄。</td> 
  </tr> 
  <tr> 
   <td>ondblclick</td> 
   <td>当用户双击某个对象时调用的事件句柄。</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>域的内容被改变。</td> 
  </tr> 
  <tr> 
   <td>onblur</td> 
   <td>元素失去焦点。</td> 
  </tr> 
  <tr> 
   <td>onfocus</td> 
   <td>元素获得焦点。</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>一张页面或一幅图像完成加载。</td> 
  </tr> 
  <tr> 
   <td>onsubmit</td> 
   <td>确认按钮被点击；表单被提交。</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>某个键盘按键被按下。</td> 
  </tr> 
  <tr> 
   <td>onkeyup</td> 
   <td>某个键盘按键被松开。</td> 
  </tr> 
  <tr> 
   <td>onmousedown</td> 
   <td>鼠标按钮被按下。</td> 
  </tr> 
  <tr> 
   <td>onmouseup</td> 
   <td>鼠标按键被松开。</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>鼠标从某元素移开。</td> 
  </tr> 
  <tr> 
   <td>omouseover</td> 
   <td>鼠标移到某元素之上。</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>鼠标被移动。</td> 
  </tr> 
 </tbody> 
</table>

### 11.3 事件绑定的方式 ###

#### 11.3.1. 普通函数方式(设置标签的属性) ####

<标签 属性="js代码，调用函数"></标签>

#### 11.3.2 匿名函数方式 ####

### 11.4 事件的使用介绍 ###

*  点击事件  
    需求: 没点击一次按钮 弹出hello…

<input type="button" value="按钮" onclick="fn1()">
    
        <input type="button" value="另一个按钮" id="btn">
            <script>
            //当点击的时候要调用的函数
            function fn1() {
        
            alert("我被点击了...")
        }
    
    //给另外一个按钮，绑定点击事件:
    //1.先根据id获取标签
    var btn = document.getElementById("btn");
    //2. 设置btn的onclick属性(绑定事件)
    //绑定命名函数
    //btn.onclick = fn1
    
    //绑定匿名函数
    btn.onclick = function () {
        
        console.log("点击了另外一个按钮")
    }
    </script>

*  获得焦点(onfocus)和失去焦点(onblur)  
    需求:给输入框设置获得和失去焦点

var ipt = document.getElementById("ipt");
    
    //绑定获取焦点事件
    ipt.onfocus = function () {
        
        console.log("获取焦点了...")
    }
    
    //绑定失去焦点事件
    ipt.onblur = function () {
        
        console.log("失去焦点了...")
    }

*  内容改变(onchange)  
    需求: 给select设置内容改变事件

<body>
        
        <select onchange="changeCity(this)">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
    
    </body>
    <script>
        function changeCity(obj) {
        
            console.log("城市改变了"+obj.value);
        }
    </script>

*  键盘相关的, 键盘按下(onkeydown) 键盘抬起(onkeyup)

//给输入框绑定键盘按键按下和抬起事件
    ipt.onkeydown = function () {
        
        //当按键按下的时候，数据并没有到达输入框
        //输出输入框里面的内容
        //console.log(ipt.value)
    }
    
    ipt.onkeyup = function () {
        
        //输出输入框的内容:当键盘按键抬起的时候，数据已经到达了输入框
        console.log(ipt.value)
    }

*  鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)

//给输入框绑定鼠标移入事件
    ipt.onmouseover = function () {
        
        console.log("鼠标移入了...")
    }
    //给输入框绑定鼠标移出事件
    ipt.onmouseout = function () {
        
        console.log("鼠标移出了...")
    }

## 12. 正则表达式 ##

### 12.1 正则表达式的概念 ###

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。用我们自己的话来说: **正则表达式用来校验字符串是否满足一定的规则的公式**

### 12.2 正则表达式的用途 ###

*  模式验证: 检测某个字符串是否符合规则，例如检测手机号、身份证号等等是否符合规范
 *  匹配读取:读取字符串中符合规则的内容
 *  匹配替换:替换字符串中符合规则的内容

### 12.3 正则表达式的语法 ###

*  对象形式：`var reg = new RegExp("正则表达式")`当正则表达式中有"/"那么就使用这种
    
        // 类似创建数组可以new Array()、创建对象可以使用new Object()
        var reg = new RegExp("a");
 *  直接量形式：`var reg = /正则表达式/`一般使用这种声明方式
    
        // 类似创建数组时可以使用[]、创建对象可以使用{}
        var reg = /a/;

#### 12.3.1 正则表达式的组成 ####

正则表达式本身也是一个字符串，它由两种字符组成：

*  普通字符，例如大、小写英文字母；数字等。
 *  元字符：被系统赋予特殊含义的字符。例如：^表示以某个字符串开始，$表示以某个字符串结束

#### 12.3.2 字符集合 ####

<table> 
 <thead> 
  <tr> 
   <th>语法格式</th> 
   <th>示例</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[字符列表]</td> 
   <td>正则表达式：[abc] 含义：目标字符串包含abc中的任何一个字符 目标字符串：plain 是否匹配：是 原因：plain中的“a”在列表“abc”中</td> 
   <td>目标字符串中任何一个字符出现在字符列表中就算匹配。</td> 
  </tr> 
  <tr> 
   <td>[^字符列表]</td> 
   <td>[^abc] 含义：目标字符串包含abc以外的任何一个字符 目标字符串：plain 是否匹配：是 原因：plain中包含“p”、“l”、“i”、“n”</td> 
   <td>匹配字符列表中未包含的任意字符。</td> 
  </tr> 
  <tr> 
   <td>[字符范围]</td> 
   <td>正则表达式：[a-z] 含义：所有小写英文字符组成的字符列表 正则表达式：[A-Z] 含义：所有大写英文字符组成的字符列表</td> 
   <td>匹配指定范围内的任意字符。</td> 
  </tr> 
 </tbody> 
</table>

#### 12.3.3 元字符 ####

在正则表达式中被赋予特殊含义的字符，不能被直接当做普通字符使用。如果要匹配元字符本身，需要对元字符进行转义，转义的方式是在元字符前面加上“\\”，例如：^

<table> 
 <thead> 
  <tr> 
   <th>代码</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.</td> 
   <td>匹配除换行字符以外的任意字符。</td> 
  </tr> 
  <tr> 
   <td>\w</td> 
   <td>匹配字母或数字或下划线等价于[a-zA-Z0-9 _]</td> 
  </tr> 
  <tr> 
   <td>\W</td> 
   <td>匹配任何非单词字符。等价于[^A-Za-z0-9 _]</td> 
  </tr> 
  <tr> 
   <td>\s</td> 
   <td>匹配任意的空白符，包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。</td> 
  </tr> 
  <tr> 
   <td>\S</td> 
   <td>匹配任何非空白字符。等价于[^\f\n\r\t\v]。</td> 
  </tr> 
  <tr> 
   <td>\d</td> 
   <td>匹配数字。等价于[0-9]。</td> 
  </tr> 
  <tr> 
   <td>\D</td> 
   <td>匹配一个非数字字符。等价于[^0-9]</td> 
  </tr> 
  <tr> 
   <td>\b</td> 
   <td>匹配单词的开始或结束</td> 
  </tr> 
  <tr> 
   <td>^</td> 
   <td>匹配字符串的开始，但在[]中使用表示取反</td> 
  </tr> 
  <tr> 
   <td>$</td> 
   <td>匹配字符串的结束</td> 
  </tr> 
 </tbody> 
</table>

#### 12.3.4 出现次数 ####

<table> 
 <thead> 
  <tr> 
   <th>代码</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>*</td> 
   <td>出现零次或多次</td> 
  </tr> 
  <tr> 
   <td>+</td> 
   <td>出现一次或多次</td> 
  </tr> 
  <tr> 
   <td>?</td> 
   <td>出现零次或一次</td> 
  </tr> 
  <tr> 
   <td>{n}</td> 
   <td>出现n次</td> 
  </tr> 
  <tr> 
   <td>{n,}</td> 
   <td>出现n次或多次</td> 
  </tr> 
  <tr> 
   <td>{n,m}</td> 
   <td>出现n到m次</td> 
  </tr> 
 </tbody> 
</table>

### 12.4 正则表达式使用体验 ###

#### 12.4.1 模式验证 ####

**注意**：这里是使用**正则表达式对象**来**调用**方法。

// 创建一个最简单的正则表达式对象
    var reg = /o/;
    // 创建一个字符串对象作为目标字符串
    var str = 'Hello World!';
    // 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式，返回结果true
    console.log("/o/.test('Hello World!')="+reg.test(str));

#### 12.4.2 匹配读取 ####

// 在目标字符串中查找匹配的字符，返回匹配结果组成的数组
    var resultArr = str.match(reg);
    // 数组长度为1
    console.log("resultArr.length="+resultArr.length);
    
    // 数组内容是o
    console.log("resultArr[0]="+resultArr[0]);

#### 12.4.3 替换 ####

**注意**：这里是使用**字符串对象**来**调用**方法。

var newStr = str.replace(reg,'@');
    // 只有第一个o被替换了，说明我们这个正则表达式只能匹配第一个满足的字符串
    console.log("str.replace(reg)="+newStr);//Hell@ World!
    
    // 原字符串并没有变化，只是返回了一个新字符串
    console.log("str="+str);//str=Hello World!

#### 12.4.4 全文查找 ####

如果不使用g对正则表达式对象进行修饰，则使用正则表达式进行查找时，仅返回第一个匹配；使用g后，返回所有匹配。

// 目标字符串
    var targetStr = 'Hello World!';
    
    // 没有使用全局匹配的正则表达式
    var reg = /[A-Z]/;
    // 获取全部匹配
    var resultArr = targetStr.match(reg);
    // 数组长度为1
    console.log("resultArr.length="+resultArr.length);
    
    // 遍历数组，发现只能得到'H'
    for(var i = 0; i < resultArr.length; i++){
        
      console.log("resultArr["+i+"]="+resultArr[i]);
    }

对比

// 目标字符串
    var targetStr = 'Hello World!';
    
    // 使用了全局匹配的正则表达式
    var reg = /[A-Z]/g;
    // 获取全部匹配
    var resultArr = targetStr.match(reg);
    // 数组长度为2
    console.log("resultArr.length="+resultArr.length);
    
    // 遍历数组，发现可以获取到“H”和“W”
    for(var i = 0; i < resultArr.length; i++){
        
      console.log("resultArr["+i+"]="+resultArr[i]);
    }

#### 12.4.5 忽略大小写 ####

//目标字符串
    var targetStr = 'Hello WORLD!';
    
    //没有使用忽略大小写的正则表达式
    var reg = /o/g;
    //获取全部匹配
    var resultArr = targetStr.match(reg);
    //数组长度为1
    console.log("resultArr.length="+resultArr.length);
    //遍历数组，仅得到'o'
    for(var i = 0; i < resultArr.length; i++){
        
      console.log("resultArr["+i+"]="+resultArr[i]);
    }

对比

//目标字符串
    var targetStr = 'Hello WORLD!';
    //使用了忽略大小写的正则表达式
    var reg = /o/gi;
    //获取全部匹配
    var resultArr = targetStr.match(reg);
    //数组长度为2
    console.log("resultArr.length="+resultArr.length);
    //遍历数组，得到'o'和'O'
    for(var i = 0; i < resultArr.length; i++){
        
      console.log("resultArr["+i+"]="+resultArr[i]);
    }

#### 12.4.6 元字符使用 ####

var str01 = 'I love Java';
    var str02 = 'Java love me';
    // 匹配以Java开头
    var reg = /^Java/g;
    console.log('reg.test(str01)='+reg.test(str01)); // false
    console.log("<br />");
    console.log('reg.test(str02)='+reg.test(str02)); // true

var str01 = 'I love Java';
    var str02 = 'Java love me';
    // 匹配以Java结尾
    var reg = /Java$/g;
    console.log('reg.test(str01)='+reg.test(str01)); // true
    console.log("<br />");
    console.log('reg.test(str02)='+reg.test(str02)); // false

#### 12.4.7 字符集合的使用 ####

//n位数字的正则
    var targetStr="123456789";
    var reg=/^[0-9]{0,}$/;
    //或者 ： var reg=/^\d*$/;
    var b = reg.test(targetStr);//true

//数字+字母+下划线，6-16位
    var targetStr="HelloWorld";
    var reg=/^[a-z0-9A-Z_]{6,16}$/;
    var b = reg.test(targetStr);//true

### 12.5 常用正则表达式 ###

<table> 
 <thead> 
  <tr> 
   <th>需求</th> 
   <th>正则表达式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>用户名</td> 
   <td>/^[a-zA-Z **<em>][a-zA-Z</em>-0-9]{5,9}$/</td> 
  </tr> 
  <tr> 
   <td>密码</td> 
   <td>/^[a-zA-Z0-9 _-@#&amp; *]{6,12}$/</td> 
  </tr> 
  <tr> 
   <td>前后空格</td> 
   <td>/^\s+|\s+$/g</td> 
  </tr> 
  <tr> 
   <td>电子邮箱</td> 
   <td>/^[a-zA-Z0-9 _.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/</td> 
  </tr> 
 </tbody> 
</table>

[\[ 上一章 \]][Link 1] [\[ 回目录 \]][Link 2] [\[ 下一章 \]][Link 3]

[20230724024159.png_origin_url_image_2Fimg001_-PsmAFP5gj.png_pos_id_img-LeSphs6e-1693374798955]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=image%2Fimg001_-PsmAFP5gj.png&pos_id=img-LeSphs6e-1693374798955
[20230724024159.png_origin_url_image_2Fimg008_JvCj3W3lwb.png_pos_id_img-OhvUJRMz-1693374798956]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=image%2Fimg008_JvCj3W3lwb.png&pos_id=img-OhvUJRMz-1693374798956
[20230724024159.png_origin_url_image_2Fimg009_hjhr1DerFh.png_pos_id_img-jSTUCqB5-1693374798957]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=image%2Fimg009_hjhr1DerFh.png&pos_id=img-jSTUCqB5-1693374798957
[20230724024159.png_origin_url_image_2Fimg003_aDbpjxN95P.png_pos_id_img-XYkuV9NB-1693374798958]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=image%2Fimg003_aDbpjxN95P.png&pos_id=img-XYkuV9NB-1693374798958
[20230724024159.png_origin_url_image_2Fimg004_lx0l51YlkN.png_pos_id_img-mhsht2dy-1693374798958]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=image%2Fimg004_lx0l51YlkN.png&pos_id=img-mhsht2dy-1693374798958
[20230724024159.png_origin_url_image_2Fimg005_EUle83Vhmk.png_pos_id_img-ujkdmLfQ-1693374798959]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=image%2Fimg005_EUle83Vhmk.png&pos_id=img-ujkdmLfQ-1693374798959
[20230724024159.png_origin_url_image_2Fimg006_4aANv9AdZY.png_20_22images_22_pos_id_img-9EgJZgnc-1693374798959]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=image%2Fimg006_4aANv9AdZY.png%20%22images%22&pos_id=img-9EgJZgnc-1693374798959
[20230724024159.png_origin_url_image_2Fimg007_F0A8mrLwXt.png_20_22images_22_pos_id_img-YFJOHGOL-1693374798959]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=image%2Fimg007_F0A8mrLwXt.png%20%22images%22&pos_id=img-YFJOHGOL-1693374798959
[Link 1]: https://www.wolai.com/3DtzUoWFF4nPKnbxi9mAyN
[Link 2]: https://www.wolai.com/uqHQ7tKYz6d6dAg5Gbva4T
[Link 3]: https://www.wolai.com/dcdc6Nv1VFRKmfHopH7hda