15天深度复习JavaWeb的详细笔记(五)——JavaScript

谁践踏了优雅 2023-10-02 21:16 20阅读 0赞

#### 文章目录 ####

*  Demo05-JavaScript
 *   *  1，JavaScript简介
     *  2，JavaScript引入方式
     *  3，JavaScript基础语法
     *   *  3.1 书写语法
         *  3.2 输出语句
         *  3.3 变量
         *  3.4 数据类型
         *  3.5 运算符
         *   *  3.5.1 \\==和===区别
             *  3.5.2 类型转换
         *  3.6 流程控制语句
         *   *  3.6.1 if 语句
             *  3.6.2 switch 语句
             *  3.6.3 for 循环语句
             *  3.6.4 while 循环语句
             *  3.6.5 dowhile 循环语句
         *  3.7 函数
         *   *  3.7.1 定义格式
             *  3.7.2 函数调用
     *  4，JavaScript常用对象
     *   *  4.1 Array对象
         *   *  4.1.1 定义格式
             *  4.1.2 属性
             *  4.1.3 方法
         *  4.2 String对象
         *  4.3 自定义对象
     *  5，BOM
     *   *  5.1 Window对象
         *   *  5.1.1 获取window对象
             *  5.1.2 window对象属性
             *  5.1.3 window对象函数
             *  5.1.4 案例
         *  5.2 History对象
         *  5.3 Location对象
     *  6，DOM
     *   *  6.1 概述
         *  6.2 获取 Element对象
         *  6.3 HTML Element对象使用
     *  7，事件监听
     *   *  7.1 事件绑定
         *  7.2 常见事件
     *  8，RegExp对象
     *   *  8.1 正则对象使用
         *   *  8.1.1 创建对象
             *  8.1.2 函数
         *  8.2 正则表达式

## Demo05-JavaScript ##

### 1，JavaScript简介 ###

*  JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。
 *  JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等
 *  JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，只是名字比较像而已。但是基础语法类似,如怎么定义变量啊,怎么写个if判断啊,怎么写个循环啊
 *  JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准 就叫 `ECMAScript` ，所有的客户端校验语言必须遵守这个标准，当然 JavaScript 也遵守了这个标准。ECMAScript 6 (简称ES6) 是最新的 JavaScript 版本（发布于 2015 年)，我们接下来说的就是基于最新的 `ES6`

### 2，JavaScript引入方式 ###

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

*  内部脚本：将 JS代码定义在HTML页面中
    
     *  JavaScript 代码必须位于 `<script>` 与 `</script>` 标签之间
     *  script标签可以放在任意地方，放置任意数量
        
         *  一般把脚本置于 body 元素的底部，可改善显示速度
            
             *  因为浏览器在加载页面的时候会从上往下进行加载并解析。 我们应该让用户看到页面内容，然后再展示动态的效果。
 *  外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
    
     *  定义外部 js 文件。如定义名为 demo.js的文件
     *  在页面中引入外部的js文件
        
         *  
     *  注意:
        
         *  外部脚本不能包含 `<script>` 标签
            
            在js文件中直接写 js 代码即可，不要在 js文件 中写 `script` 标签
         *  `<script>` 标签不能自闭合
            
            在页面中引入外部js文件时，不能写成 `<script src="../js/demo.js" />`

### 3，JavaScript基础语法 ###

#### 3.1 书写语法 ####

*  区分大小写：与 Java 一样，变量名、函数名以及其他**一切东西都是区分大小写**的
 *  每行结尾的分号可有可无
    
     *  如果一行上写多个语句时，必须加分号用来区分多个语句。
 *  注释
    
     *  单行注释：// 注释内容
     *  多行注释：/\* 注释内容 \*/
    
    > 注意：JavaScript 没有文档注释
 *  大括号表示代码块
    
        if (count == 3) {
               
           alert(count); 
        }

#### 3.2 输出语句 ####

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

*  使用 window.alert() 写入警告框
    
     *  window.可以省略
 *  使用 document.write() 写入 HTML 输出
 *  使用 console.log() 写入浏览器控制台

#### 3.3 变量 ####

1.声明变量:

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。而在JavaScript 是一门弱类型语言，**变量可以存放不同类型的值**；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数

var test = 20;
    test = "张三";

2.变量名命名规则:

*  组成字符可以是任何字母、数字、下划线（\_）或美元符号（$）
 *  数字不能开头
 *  建议使用驼峰命名

3.关于声明的变量的三个关键字:

*  var声明的变量:
    
     *  作用域：全局变量
    
        {
              
            var age = 20;
        }
        alert(age);  // 在代码块中定义的age 变量，在代码块外边还可以使用
    
     *  变量可以重复定义
 *  ECMAScript 6 新增了 let 关键字来定义变量:
    
     *  用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
 *  ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

#### 3.4 数据类型 ####

JavaScript 中提供了两类数据类型：原始类型 和 引用类型。

> 使用 typeof **运算符**可以获取数据类型

原始数据类型：

*  **number**：数字（整数、小数、NaN(Not a Number)）
 *  **string**：字符、字符串，单双引皆可
    
     *  **在 js 中 双引号和单引号都表示字符串类型的数据**
 *  **boolean**：布尔。true，false
 *  **null**：对象为空
    
        var obj = null;
        alert(typeof obj);//结果是 object
    
    为什么打印上面的 obj 变量的数据类型，结果是object；这个官方给出了解释:
    
    > 您也许会问,为什么typeof运算符对于null值会返回"Object",这实际上是JavaScript最初实现中的一个错误,然后被ECMAScript沿用了.现在,null被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值.
 *  **undefined**：当声明的变量未初始化时，该变量的默认值是 undefined

#### 3.5 运算符 ####

JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 `==` 和 `===`，一会我们只演示这两个的区别，其他运算符将不做演示

*  一元运算符：++，–
 *  算术运算符：+，-，\*，/，%
 *  赋值运算符：=，+=，-=…
 *  关系运算符：>，<，>=，<=，!=，==，===…
 *  逻辑运算符：&&，||，!
 *  三元运算符：条件表达式 ? true\_value : false\_value

##### 3.5.1 ==和===区别 #####

*  ==：
    
    1.  判断类型是否一样，如果不一样，则进行类型转换
    2.  再去比较其值
 *  ===：作用相当于js 中的全等于:
    
    1.  判断类型是否一样，如果不一样，直接返回false
    2.  再去比较其值

var age1 = 20;
    var age2 = "20";
    alert(age1 == age2);// true
    alert(age1 === age2);// false

##### 3.5.2 类型转换 #####

上述讲解 `==` 运算符时，发现会进行类型转换，所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。

*  其他类型转为number
    
     *  string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
        
        将 string 转换为 number 有两种方式：
        
         *  使用 `+` (**正号**)运算符：
            
                var str = +"20";
                alert(str + 1) //21
         *  使用 `parseInt()` 函数(方法)：
            
                var str = "20";
                alert(parseInt(str) + 1);
        
        > 建议使用 `parseInt()` 函数进行转换。
     *  boolean 转换为 number 类型：true 转为1，false转为0
        
            var flag = +false;
            alert(flag); // 0
 *  其他类型转为boolean
    
     *  number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
     *  string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
     *  null类型转换为 boolean 类型是 false
     *  undefined 转换为 boolean 类型是 false
    
        // var flag = 3;
        // var flag = "";
        var flag = undefined;
        
        //if判断需要boolean型数据,所以这里会进行自动转换为Boolean型
        if(flag){
              
            alert("转为true");
        }else {
              
            alert("转为false");
        }

**使用场景：**

在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，代码如下：

var str = "abc";
    
    //健壮性判断
    if(str != null && str.length > 0){
        
        alert("转为true");
    }else {
        
        alert("转为false");
    }

但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：

var str = "abc";
    
    //健壮性判断
    if(str){
        
        alert("转为true");
    }else {
        
        alert("转为false");
    }

#### 3.6 流程控制语句 ####

JavaScript 中提供了和 Java 一样的流程控制语句，**这五种流程控制语句的使用和java中的一模一样**

*  if
 *  switch
 *  for
 *  while
 *  dowhile

##### 3.6.1 if 语句 #####

##### 3.6.2 switch 语句 #####

var num = 3;
    switch (num) {
        
        case 1:
            alert("星期一");
            break;
    //省略了周二三四五六日
        default:
            alert("输入的星期有误");
            break;
    }

##### 3.6.3 for 循环语句 #####

var sum = 0;
    for (let i = 1; i <= 100; i++) {
        
        sum += i;
    }
    alert(sum);

*  我们不希望i的值出了for循环还可以使用,所以用let声明变量

##### 3.6.4 while 循环语句 #####

##### 3.6.5 dowhile 循环语句 #####

var sum = 0;
    var i = 1;
    do {
        
        sum += i;
        i++;
    }
    while (i <= 100);
    alert(sum);

#### 3.7 函数 ####

函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。

##### 3.7.1 定义格式 #####

函数定义格式有两种：

*  方式1
    
        function 函数名(参数1,参数2..){
              
            要执行的代码
        }
 *  方式2
    
        var 函数名 = function (参数列表){
              
            要执行的代码
        }

> 注意：
> 
>  *  形式参数不需要类型。因为JavaScript是弱类型语言
>     
>         function add(a, b){
>                
>             return a + b;
>         }
>     
>     上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。
>  *  返回值也不需要定义类型，可以在函数内部直接使用return返回即可

##### 3.7.2 函数调用 #####

函数调用函数：

函数名称(实际参数列表);

let result = add(10,20);

> 注意：
> 
>  *  JS中，函数调用可以传递任意个数参数
>  *  例如 `let result = add(1,2,3);`
>     
>     它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而**数据 3 没有变量接收**

### 4，JavaScript常用对象 ###

JavaScript 提供了很多对象供使用者来使用。这些对象总共分类三类

*  基本对象
    
    ![在这里插入图片描述][177494d271a54f5abea20569eb5a3503.png_pic_center]
 *  BOM 对象

![在这里插入图片描述][5ee05b64b8e24e3392238bd44b74f341.png_pic_center]

*  DOM对象
    
    DOM 中的对象就比较多了，下图只是截取部分

![在这里插入图片描述][713aa47c100c4702a950a2c2c7b15794.png_pic_center]

这小节我们先学习基本对象，而我们先学习 `Array` 数组对象和 `String` 字符串对象。

#### 4.1 Array对象 ####

JavaScript Array对象用于定义数组

##### 4.1.1 定义格式 #####

数组的定义格式有两种：

*  方式1
    
        var 变量名 = new Array(元素列表);
 *  方式2
    
        var 变量名 = [元素列表];

注意:

*  Java中的数组静态初始化使用的是\{\}定义，而 JavaScript 中使用的是 \[\] 定义
 *  JavaScript数组相当于java中的集合,是**变长变类型**的
    
        var arr1 = [1,2,3];
        arr1[10] = 10;
        
        // 访问(访问数组中元素的方式和java中的一样)
        alert(arr1[10])//输出10
        alert(arr1[9])//输出undefined

##### 4.1.2 属性 #####

Array 对象提供了很多属性，我们常用的是length属性,用来获取数组长度

##### 4.1.3 方法 #####

Array 对象同样也提供了很多方法，我们这里只说push和splice:

*  push 函数：给数组添加元素，也就是**在数组的末尾添加元素**,参数表示要添加的元素
 *  splice 函数：删除元素
    
     *  参数1：索引。表示从哪个索引位置删除
     *  参数2：个数。表示删除几个元素

#### 4.2 String对象 ####

1.String对象的创建方式有两种:

*  方式1：
    
        var 变量名 = new String(s);
        var str = new String("hello");
 *  方式2：
    
        var 变量名 = s; 
        var str = "hello"; 
        var str2 = 'hello';

2.属性：

String对象提供了很多属性,说一下length属性:用于动态的获取字符串的长度

*  注意和java的区别:
    
     *  在java中获取字符串长度用的是**方法length()**

3.函数：

String对象提供了很多函数（方法），比如:

*  charAt()
    
     *  返回在指定位置的字符
 *  indexOf()
    
     *  检索字符串
 *  trim()
    
     *  去掉字符串两端的空格
     *  应用场景:当用户登录账号时可能会不小心在首末打空格,我们就可以用trim()方法去掉首末的空格

#### 4.3 自定义对象 ####

在 JavaScript 中自定义对象特别简单，下面就是自定义对象的格式：

var 对象名称 = {
        
        属性名称1:属性值1,
        属性名称2:属性值2,
        ...,
        函数名称:function (形参列表){
        },
    	...
    };

调用属性的格式：

对象名.属性名

调用函数的格式：

对象名.函数名()

var person = {
        
            name : "zhangsan",
            age : 23,
            eat: function (){
        
                alert("干饭~");
            }
        };
    
    alert(person.name);  //zhangsan
    alert(person.age); //23
    person.eat();  //干饭~

### 5，BOM ###

*  BOM：Browser Object Model **浏览器对象模型**。也就是 **JavaScript 将浏览器的各个组成部分封装为对象**
 *  我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为 `https://www.itheima.com` 就可以通过使用 BOM 中定义的 `Location` 对象的 `href` 属性，代码： `location.href = "https://itheima.com";`
    
     *  BOM 中包含了如下对象：
     *  Window：浏览器窗口对象
     *  Navigator：浏览器对象
     *  Screen：屏幕对象
     *  History：历史记录对象
     *  Location：地址栏对象
 *  下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系

![在这里插入图片描述][bfae7675aac64366ba48b991ca8dd64f.png_pic_center]

*  BOM 中的 `Navigator` 对象和 `Screen` 对象基本不会使用，所以我们下面只对 `Window`、`History`、`Location` 对象进行讲解。

#### 5.1 Window对象 ####

window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

##### 5.1.1 获取window对象 #####

该对象不需要创建直接使用 `window`，其中 `window.` 可以省略(因为**window是JavaScript的内置函数**)。比如我们之前使用的 `alert()` 函数，其实就是 `window` 对象的函数，在调用是可以写成如下两种

*  显式使用 `window` 对象调用
    
        window.alert("abc");
 *  隐式调用
    
        alert("abc")

##### 5.1.2 window对象属性 #####

`window` 对象提供了用于获取其他 BOM 组成对象的属性

![在这里插入图片描述][8d4d507613a34b54bb18bd166a13f1a0.png_pic_center]

也就是说，我们想使用 `Location` 对象的话，就可以使用 `window` 对象获取；写成 `window.location`，而 `window.` 可以省略，简化写成 `location` 来获取 `Location` 对象。

##### 5.1.3 window对象函数 #####

`window` 对象提供了很多函数供我们使用，而很多都不常用；下面给大家列举了一些比较常用的函数

![在这里插入图片描述][92abb2fc823942499e12d14a476d3f8c.png_pic_center]

> `setTimeout(function,毫秒值)` : 在一定的时间间隔后执行一个function，只执行一次  
> `setInterval(function,毫秒值)` :在一定的时间间隔后执行一个function，循环执行

**confirm代码演示：**

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
    var flag = confirm("确认删除？");
    alert(flag);

而以后我们在页面删除数据时候每一条数据后都有 `删除` 按钮，有可能是用户的一些误操作，所以对于删除操作需要用户进行再次确认，此时就需要用到 `confirm()` 函数。

##### 5.1.4 案例 #####

需求：每隔1秒，灯泡切换一次状态

![在这里插入图片描述][6f3e87952166489aaf1af13e0eec2c9c.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript演示</title>
    </head>
    <body>
    
    <img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
    
    <script>
        function on(){
          
            document.getElementById('myImage').src='../imgs/on.gif';
        }
    
        function off(){
          
            document.getElementById('myImage').src='../imgs/off.gif'
        }
        //定义一个变量，用来记录灯的状态，偶数是开灯状态，奇数是关灯状态
        var x = 0;
        //使用循环定时器
        setInterval(function (){
          
            if(x % 2 == 0){
          //表示是偶数，开灯状态，调用 on() 函数
                on();
            }else {
            //表示是奇数，关灯状态，调用 off() 函数
                off();
            }
            x ++;//改变变量的值
        },1000);
    </script>
    </body>
    </html>

#### 5.2 History对象 ####

*  History 对象是 JavaScript 对历史记录进行封装的对象。

*  History 对象的获取
    
     *  使用 window.history获取，其中window. 可以省略
 *  History 对象的函数:
    
     *  back():加载history列表的前一个URL
     *  forward():加载history列表的下一个URL
    
    应用场景:当我们点击向左的箭头，就跳转到前一个访问的页面，这就是 `back()` 函数的作用；当我们点击向右的箭头，就跳转到下一个访问的页面，这就是 `forward()` 函数的作用。

#### 5.3 Location对象 ####

*  Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。
 *  Location对象的获取:
    
     *  使用 window.location获取，其中window. 可以省略
 *  Location对象的属性
    
     *  Location对象提供了很对属性。以后常用的只有一个属性 `href`
        
         *  用于**设置或返回**完整的URL
 *  案例:3秒跳转到百度首页
    
        document.write("3秒跳转到首页..."); 
        setTimeout(function (){
              
            location.href = "https://www.baidu.com"
        },3000);

### 6，DOM ###

#### 6.1 概述 ####

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

*  Document：整个文档对象
 *  Element：元素对象
 *  Attribute：属性对象
 *  Text：文本对象
 *  Comment：注释对象

如下图，左边是 HTML 文档内容，右边是 DOM 树

![在这里插入图片描述][dad8261ea9264af282ef2fe9be922855.png_pic_center]

**作用：**

JavaScript 通过 DOM， 就能够对 HTML进行操作了

*  改变 HTML 元素的内容
 *  改变 HTML 元素的样式（CSS）
 *  对 HTML DOM 事件作出反应
 *  添加和删除 HTML 元素

**DOM相关概念：**

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：

1.  XML DOM： 针对 XML 文档的标准模型
2.  HTML DOM： 针对 HTML 文档的标准模型
    
    该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
    
     *  例如：`<img>` 标签在浏览器加载到内存中时会被封装成 `Image` 对象，同时该对象也是 `Element` 对象。
     *  例如：`<input type='button'>` 标签在浏览器加载到内存中时会被封装成 `Button` 对象，同时该对象也是 `Element` 对象。

#### 6.2 获取 Element对象 ####

HTML 中的 Element 对象可以通过 `Document` 对象获取，而 `Document` 对象是通过 `window` 对象获取:使用 window.document获取，其中window. 可以省略

`Document` 对象中提供了以下获取 `Element` 元素对象的函数

*  `getElementById()`：根据id属性值获取，返回**单个**Element对象
 *  `getElementsByTagName()`：根据标签名称获取，返回Element对象**数组**
 *  `getElementsByName()`：根据name属性值获取，返回Element对象**数组**
 *  `getElementsByClassName()`：根据class属性值获取，返回Element对象**数组**

#### 6.3 HTML Element对象使用 ####

HTML 中的 `Element` 元素对象有很多，不可能全部记住，以后是根据具体的需求查阅文档使用。

下面我们通过具体的案例给大家演示文档的查询和对象的使用；下面提前给大家准备好的页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <img id="light" src="../imgs/off.gif"> <br>
    
        <div class="cls">传智教育</div>   <br>
        <div class="cls">黑马程序员</div> <br>
    
        <input type="checkbox" name="hobby"> 电影
        <input type="checkbox" name="hobby"> 旅游
        <input type="checkbox" name="hobby"> 游戏
        <br>
        <script>
            //在此处写js代码
        </script>
    </body>
    </html>

**需求：**

1.  点亮灯泡
    
        //1，根据 id='light' 获取 img 元素对象
        var img = document.getElementById("light");
        //2，修改 img 对象的 src 属性来改变图片
        img.src = "../imgs/on.gif";
2.  将所有的 `div` 标签的标签体内容替换为 `呵呵`并设为红字
    
        //1，获取所有的 div 元素对象
        var divs = document.getElementsByTagName("div");
        /*
                style:设置元素css样式
                innerHTML：设置元素内容
            */
        //2，遍历数组，获取到每一个 div 元素对象，并修改元素内容
        for (let i = 0; i < divs.length; i++) {
              
            divs[i].style.color = 'red';
            divs[i].innerHTML = "呵呵";
        }
    
    注意:**style和innerHTML属性是通用属性**,所有的html标签对应的对象都有这两个属性
3.  使所有的复选框呈现被选中的状态
    
        //1，获取所有的 复选框 元素对象
        var hobbys = document.getElementsByName("hobby");
        //2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
        for (let i = 0; i < hobbys.length; i++) {
              
            hobbys[i].checked = true;
        }

### 7，事件监听 ###

要想知道什么是事件监听，首先先聊聊什么是事件？

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 `按钮被点击`、`鼠标移动到元素之上`、`按下键盘按键` 等都是事件。

事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码

比如输入框:当我们输入了用户名 `光标离开` 输入框，就需要通过 js 代码对输入的内容进行校验，没通过校验就在输入框后提示 `用户名格式有误!`

#### 7.1 事件绑定 ####

JavaScript 提供了两种事件绑定方式：

*  方式一：通过 HTML标签中的**事件属性**进行绑定
    
    如下面代码，有一个按钮元素，我们是在该标签上定义 `事件属性`，在事件属性中绑定函数。`onclick` 就是 `单击事件` 的事件属性。`onclick='on（）'` 表示该点击事件绑定了一个名为 `on()` 的函数
    
        <input type="button" οnclick='on()’>
    
    下面是点击事件绑定的 `on()` 函数
    
        function on(){
              
        	alert("我被点了");
        }
    
    这种方式html和js耦合在一起了,不推荐使用
 *  方式二：通过 DOM 元素属性绑定
    
    如下面代码是按钮标签，在该标签上我们并没有使用 `事件属性`，绑定事件的操作需要在 js 代码中实现
    
        <input type="button" id="btn">
    
    下面 js 代码是获取了 `id='btn'` 的元素对象，然后将 `onclick` 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行
    
        document.getElementById("btn").onclick = function (){
              
            alert("我被点了");
        }

#### 7.2 常见事件 ####

上面案例中使用到了 `onclick` 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家列举一些比较常用的事件属性

<table> 
 <thead> 
  <tr> 
   <th>事件属性名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onclick</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>onmouseover</td> 
   <td>鼠标被移到某元素之上</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>鼠标从某元素移开</td> 
  </tr> 
 </tbody> 
</table>

onsubmit事件应用场景:在用户注册账号点击"注册"按钮后,我们进行一些逻辑判断,如果符合就提交表单,否则就不提交表单:

document.getElementById("id").onsubmit = function (){
        
        //返回true则表单会提交,返回false则阻止表单提交
        return true;
    }

### 8，RegExp对象 ###

*  RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。
 *  在 js 中对正则表达式封装的对象就是正则对象。

#### 8.1 正则对象使用 ####

##### 8.1.1 创建对象 #####

正则对象有两种创建方式：

*  直接量方式：注意这不是字符串,不要加引号
    
        var reg = /正则表达式/;
 *  创建 RegExp 对象
    
        var reg = new RegExp("正则表达式");

##### 8.1.2 函数 #####

`test(str)` ：判断指定字符串是否符合规则，返回 true或 false

#### 8.2 正则表达式 ####

*  正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。
 *  正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。

正则表达式常用的规则如下：

*  ^：表示开始
 *  $：表示结束
 *  \[ \]：代表某个范围内的单个字符，比如： \[0-9\] 单个数字字符
 *  .：代表任意单个字符，除了换行和行结束符
 *  \\w：代表单词字符：字母、数字、下划线(*)，相当于 \[A-Za-z0-9*\]
 *  \\d：代表数字字符： 相当于 \[0-9\]

量词：

*  \+：至少一个
 *  \*：零个或多个
 *  ？：零个或一个
 *  \{x\}：x个
 *  \{m,\}：至少m个
 *  \{m,n\}：至少m个，最多n个

// 规则：符合手机号规则
    //1,创建正则对象，对正则表达式进行封装
    var reg = /^[1]\d{10}$/;
    
    var str = "abcccc";
    //2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
    var flag = reg.test(str);
    alert(flag);

[177494d271a54f5abea20569eb5a3503.png_pic_center]: https://img-blog.csdnimg.cn/177494d271a54f5abea20569eb5a3503.png#pic_center
[5ee05b64b8e24e3392238bd44b74f341.png_pic_center]: https://img-blog.csdnimg.cn/5ee05b64b8e24e3392238bd44b74f341.png#pic_center
[713aa47c100c4702a950a2c2c7b15794.png_pic_center]: https://img-blog.csdnimg.cn/713aa47c100c4702a950a2c2c7b15794.png#pic_center
[bfae7675aac64366ba48b991ca8dd64f.png_pic_center]: https://img-blog.csdnimg.cn/bfae7675aac64366ba48b991ca8dd64f.png#pic_center
[8d4d507613a34b54bb18bd166a13f1a0.png_pic_center]: https://img-blog.csdnimg.cn/8d4d507613a34b54bb18bd166a13f1a0.png#pic_center
[92abb2fc823942499e12d14a476d3f8c.png_pic_center]: https://img-blog.csdnimg.cn/92abb2fc823942499e12d14a476d3f8c.png#pic_center
[6f3e87952166489aaf1af13e0eec2c9c.png_pic_center]: https://img-blog.csdnimg.cn/6f3e87952166489aaf1af13e0eec2c9c.png#pic_center
[dad8261ea9264af282ef2fe9be922855.png_pic_center]: https://img-blog.csdnimg.cn/dad8261ea9264af282ef2fe9be922855.png#pic_center