• 前端三剑客—JS

    JS

    JS 了解

    JS 也就是 JavaScript，这个语言也是当下最流行的编程语言之一。JS 主要是用于前端页的开发，但实际上，也可以进行 服务器开发 / 客户端程序的开发。就像在线翻译里面，点击发音，这就是 JS 实现的。

    JS 和 HTML 和 CSS 的关系

    在这里插入图片描述

    1. HTML: 网页的结构(骨)
    2. CSS: 网页的表现(皮)
    3. JavaScript: 网页的行为(魂)

    在这里插入图片描述

    1. HTML写出来的代码，就相当于是页面的框架，相当于是“骨”。
    2. CSS 就是在 HTML 的基础上，进行装饰，相当于套了一层“皮”，使其页面变得好看。 但是 此时的页面，仍是一个静态的！
    3. 当我们加入了JS之后，我们就相当于给网页赋予了灵魂。 所谓的灵魂，就是指的交互性。 其目的，就是让网页不再是一个纯粹静态的、干巴巴的、不动的一个东西了。 而是会和程序员进行一些交互。就像在线翻译：
      在这里插入图片描述

    JS 和前面的 HTML / CSS 类似，都是运行在浏览器上。
    在浏览器中，内置了一个 JS 的执行引擎。
    所谓的引擎，就对标了我们的 JVM（Java-Virtual-Machine：Java虚拟机）。

    JS 的组成

    对于运行在浏览器上执行的 JS 来说，可以分为桑部分：

    1. JS 核心语法
    2. DOM API：浏览器提供的一组，操作页面元素的API
    3. BOM API：浏览器提供的一组，操作浏览器窗口的API

    JS

    运行在 浏览器 当中的 JS ，是离不开 HTML 的，所以嵌入到 HTML 当中来写。写在 script 标签里面。

    hello world

    JS 里面的 分号，可以写，也可以不写：

    <body>
    <script>
        alert('hello world');
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5

    这里的字符串可以用单引号，也可以用双引号：
    在这里插入图片描述

    JS 的引入方式

    1. 内嵌式：像上面那种写法就是内嵌式：

      <body>
    <script>
        alert('hello world');
    script>
body>

      • 1
      • 2
      • 3
      • 4
      • 5

    2. 行内式：把 JS 写到元素的内部：

      <body>
    <button onclick="alert('hello')">这是一个按钮button>
body>

      • 1
      • 2
      • 3

      这样点击按钮的时候，就会触发 JS 操作：
      在这里插入图片描述

    3. 外部式：把 JS 写到一个单独的 JS 文件中，然后在 HTML 里面通过 script 标签来引入。创建一个 app.js 文件：
      在这里插入图片描述
      然后在 HTML 当中引入：

      <body>
    <script src="app.js">script>
body>

      • 1
      • 2
      • 3

      运行结果如下：
      在这里插入图片描述

    输入输出

    输入：prompt

    通过在 script 当中，使用 prompt 来达到输入的效果：

    <body>
    <script>
        prompt();
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5

    运行结果如下：
    在这里插入图片描述

    输出 alert

    上面的弹窗输出就是 alert 实现的。

    输出 console.log

    这个是在控制台打印日志，就是在 浏览器 的控制台里面。因为 alert 弹窗的体验非常不好，比如在看剧的时候，突然弹窗，就会暂停所有操作：

    <body>
    <script>
        console.log('hello');
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5

    运行结果如下：
    在这里插入图片描述
    同时，如果 JS 代码当中出现错误，或者运行时错误的时候，也会在控制台当中打印出来 ，比如，专门写错 console ：

    <body>
    <script>
        console.log('hello');
        consol.log('hello');
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    运行结果如下：
    在这里插入图片描述
    就清楚的说明是哪行的哪里出现了问题。

    JS 的基础语法

    JS 当中和 Java 好多是相似的。当然也有不一样的。

    变量

    定义变量的时候，通过 var 变量名 = 初始值; 来完成变量的定义：

    <body>
    <script>
        //创建一个名字为 num 的，数字类型的变量
        var num = 10;
        //创建一个名字为 s 的，字符串类型的变量
        var s = 'hello';
        //创建一个名字为 arr 的，数组类型的变量
        var arr = [];
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    就是不管创建的变量是啥类型，此时都是统一使用 var 关键字来表示的。JS 不区分整形浮点型之类的。

    使用变量

    使用变量就是 修改和读取 通过 console.log 来读取：

    <body>
    <script>
        var num = 10;
        num = 20;
        console.log(num);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行结果如下：
    在这里插入图片描述
    不过在赋值的时候，可以赋一个数字类型，也可以赋一个字符串类型。变量的类型，可以在运行过程中，随着赋值发生改变，就是 动态类型。

    不过现在更倾向于用 let 代替 var：

    1. var 没有作用域限制。
    2. let 有作用域限制。
    3. let 的字符串和数字相加，就i是拼接字符串。

    数据类型

    JS 内置了几种数据类型：

    number: 数字. 不区分整数和小数.
    boolean: true 真, false 假.
    string: 字符串类型.
    undefined: 只有唯一的值 undefined. 表示未定义的值.
    null: 只有唯一的值 null. 表示空值

    数字类型

    let a = 07; // 八进制整数, 以 0 开头
let b = 0xa; // 十六进制整数, 以 0x 开头
let c = 0b10; // 二进制整数, 以 0b 开头

    • 1
    • 2
    • 3

    特殊的数字值：

    Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
    -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
    NaN: 表示当前的结果不是一个数字.

    字符串类型

    1. 字符串 可以通过单引号定义，也可以通过双引号定义。

    2. 如果字符串本身就包含了 引号 这个时候，就可以通过 单双引号 灵活搭配的形式，来避免使用转义字符。

      <body>
    <script>
        let s = "'123qwe'";
        console.log(s);
    script>
body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

      运行结果如下：
      在这里插入图片描述

    JS中的转义字符，不仅仅是 +单双引号，还有其它的转义字符，也是支持的。 像 \t（水平制表符），\n（换行符），\f（换页符）…这些转义字符，也是同样支持的。

    1. 求字符串长度：通过 length 来求字符串长度：

      <body>
    <script>
        let s = "123qwe";
        console.log(s.length);
    script>
body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

      运行结果如下：
      在这里插入图片描述
      这里的长度，单位是字符，一个汉字的字符是 1。

    2. 字符串拼接：通过 + 来拼接字符串：

      <body>
    <script>
        let s = "123qwe";
        console.log(s + 456);
    script>
body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

      运行结果如下：
      在这里插入图片描述

    另外，字符串也提供了很多方法：
    在这里插入图片描述
    这些方法和 Java 中的差不多。

    布尔类型

    与 Java 中的 boolean 类型不同，JS 当中的 布尔类型，会当成 0 和 1 来处理。true 是 1，false 是 0。举一个极端例子：

    <body>
    <script>
        let s = true;
        console.log(s + 1);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    运行结果如下：
    在这里插入图片描述
    这里的 true 就被隐式转换为 1 了。有一种说法：

    如果一个编程语言，越支持隐式类型转换，就认为类型越弱。
    如果一个编程语言，越不支持隐式类型转换，就认为类型越强。
    Java，Go，Python 认为是强类型的编程语言。
    C，JS，PHP 认为是弱类型的编程语言

    未定义数据类型和空值

    undefined 这个类型，就只有 undefined 这一个值。表示当前的变量处于一个未被初始化的状态。

    <body>
    <script>
        let a;
        console.log(a);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    null 是表示一个空值：

    <body>
    <script>
        let a = null;
        console.log(a);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    运算符

    JS 中的运算符和 Java 用法基本相同，这里拿一些不同的来说。

    算术运算符-不同点

    常见的运算符：+ - * / % 这里的 / 是不一样的：

    <body>
    <script>
        let a = 1;
        console.log(a/2);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    运行结果如下：
    在这里插入图片描述
    这里的运行结果是 0.5，因为 JS 的变量都可以用 let 表示，所以这里就是 0.5

    比较运算符 - 不同点

    JS中比较相等的符号，有两种：== 和 === 。不相等的符号也有两种： != 和 !== 。

    1. == 和 != ：只是比较两个变量的值，不比较 两个变量的类型。如果两个变量能够通过隐式类型转换，转换相同的值，那么，此时就认为 两个变量 是相等的。
    2. === 和 !== ：既要比较 两个变量的值，又要比较两个变量的类型。如果类型不相同，就直接认为两个变量不相等。

    举例：

    <body>
    <script>
        let a = 10;
        let b = '10';
        console.log(a == b);
        console.log(a === b)
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    运行结果如下：
    在这里插入图片描述

    逻辑运算符

    && 和 || 和 Java 当中的不一样，Java 就是返回一个布尔类型的值： true，或者 false。而 JS 是返回其中的表达式。

    c = a || b，如果 a 的值为真，那么 c 的值，就是 表达式a 的只。如果 a 的值为假，b 的值为真，那么 c 的值就是 表达式b 的值。&& 也是这种用法。

    通过逻辑运算符，就有了一种用法：判断是否为 空值，如果是空值，就给一个默认值：

    <body>
    <script>
        let a = null;
        if (!a) {
            a = 10
        }
        console.log(a);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    运行结果如下：
    在这里插入图片描述
    这里的代码的意思等价于 a = a || 0

    数组

    使用 new 关键字创建

    <body>
    <script>
        let arr = new Array();
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5

    这里就是通过 new 来创建一个 数组。

    更常见的方法

    <body>
    <script>
        let arr = [];
        let arr1 = [1,2,3,4];
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    不过 Java 定义数组的时候，就已经定义好相应的类型了，但是 JS 的话，什么类型都可以放在一起：

    <body>
    <script>
        let arr = [1,'hello',null,undefined,true];
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5

    打印数组

    这里也是通过 console.log 来打印数组：

    <body>
    <script>
        let arr = [1,'hello',null,undefined,true];
        console.log(arr)
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    运行结果如下：
    在这里插入图片描述

    获取数组元素

    通过 下标来获取 数组元素，数组下标也是从 0 开始的：

    <body>
    <script>
        let arr = [1,2,3,4];
        console.log(arr[0]);
        console.log(arr[1]);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行结果如下：
    在这里插入图片描述
    按照 Java 的话，超出数组长度的话，就会抛出异常，但是 JS 不会，而是抛出 undefined ：

    <body>
    <script>
        let arr = [1,2,3,4];
        console.log(arr[0]);
        console.log(arr[4]);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行结果如下：
    在这里插入图片描述
    当然，还有其它操作：

    <body>
    <script>
        let arr = [1,2,3,4];
        arr[100] = 10;
        console.log(arr);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行结果如下：
    在这里插入图片描述
    长度就变成了 101 ，中间的就是空元素。

    如果设置下标 -1 为 10：

    <body>
    <script>
        let arr = [1,2,3,4];
        arr[-1] = 10;
        console.log(arr);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行结果如下：
    在这里插入图片描述
    此时的 -1 ，与其说是一个下标，不如说是一个属性。并没有影响到数组的长度。当然也可以取出来 -1 处的值。

    当然，还有更骚的操作：

    <body>
    <script>
        let arr = [1,2,3,4];
        arr['hello'] = 10;
        console.log(arr);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行结果如下：
    在这里插入图片描述
    也就是 JS 当中的数组，不仅能当 数组使用，还能当 map 使用，更准确的说，是一个对象，JS 当中，可以在运行时，给对象新增属性。 arr[‘hello’] 就是给 arr 这个对象，新增了一个属性，属性的名字是 hello，属性值是 10，就等价于：arr.hello = 10 也可以通过这些方法访问到 10。

    获取数组长度

    通过 .length 来获取数组长度：

    <body>
    <script>
        let arr = [1,2,3,4];
        console.log(arr.length);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    运行结果如下：
    在这里插入图片描述
    但是！JS 里面的 length 属性是可以修改的：

    <body>
    <script>
        let arr = [1,2,3,4];
        arr.length = 3;
        console.log(arr.length);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行结果如下：
    在这里插入图片描述
    如果 length 改成 大于数组长度 的话，就是 空白：

    <body>
    <script>
        let arr = [1,2,3,4];
        arr.length = 5;
        console.log(arr.length);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行结果如下：
    在这里插入图片描述

    往数组中插入元素

    通过 push 方法，来往数组当中插入新的元素：

    <body>
    <script>
        let arr = [1,2,3,4];
        arr.push(5);
        console.log(arr);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行结果如下：
    在这里插入图片描述

    删除元素

    通过 splice 方法，就可以对数组中的某个片段，进行替换（因为是替换，所以可以看作是删除元素）：

    <body>
    <script>
        let arr = [1,2,3,4];
        arr.splice(2, 2);
        console.log(arr);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    这里的意思就是：从下标为 n 的元素，向后删除 n 个元素，就是从下标为 2 的元素，向后删除 2 个元素，运行结果如下：
    在这里插入图片描述
    也可以完成替换操作，就是在前两个参数之后，加上要替换的参数：

    <body>
    <script>
        let arr = [1,2,3,4];
        arr.splice(2, 2, 111, 222);
        console.log(arr);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行结果如下：
    在这里插入图片描述

    函数

    JS 中的函数（function），在 Java 中叫做 方法（Method）。函数就是方法，方法就是函数，两者就是同一个东西，只是叫法不同而已。

    语法格式

    // 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    不过要注意的是，在 创建函数/函数声明/函数定义 的时候，形参列表不用写形参类型。因为参数类型，完全取决于调用的时候，传什么参数。代码：

    <body>
    <script>
        // 这里是定义函数，定义和调用 不分前后。
        function hello() {
            console.log('hello');
        }
        //这里是调用函数
        hello();
        hello();
        hello();
    </script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    写了函数之后，必须调用才可以，可以多次调用。运行结果如下：
    在这里插入图片描述

    没有参数类型：

    <body>
    <script>
        function add(x, y) {
            return x + y;
        }
        let result = add(10, 20);
        console.log(result);
        result = add('hello','world');
        console.log(result);
        result = add('hello', 10);
        console.log(result);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    因为 JS 没有参数类型，所以什么类型都可以直接放到函数里面，运行结果如下：
    在这里插入图片描述

    使用多个数字相加：因为 JS 的特性，就可以直接在这里相加了：

    <body>
    <script>
        function add(a, b, c, d, e, f, g) {
            a = a || 0;
            b = b || 0;
            c = c || 0;
            d = d || 0;
            e = e || 0;
            f = f || 0;
            g = g || 0;
            return a + b + c + d + e + f + g;
        }
        console.log(add(10, 20));
        console.log(add(10, 20, 30));
        console.log(add(10, 20, 30, 40));
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    这里可以实现最多 7 个数相加，运行结果如下：
    在这里插入图片描述

    函数表达式

    在 JS中，函数是 “一等公民”。一个“一等公民”的函数，函数可以像一个普通的变量一样，赋值给 其他的变量。同时，可以作为另一个函数的参数，还可以作为另一个函数的返回值。简单来说：函数和普通的变量，并没有本质区别。只不过函数这个变量，相对于普通变量来说，多了一个功能（可调用）。

    <body>
    <script>
        function hello() {
            console.log('hello');
        }
        let f = hello;
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    hello 是一个函数名，hello 后面没有()，说明这个操作，不是函数调用，而是一个单纯的函数的赋值。f 是一个 function 类型的变量。

    匿名函数

    也就是没有写函数名：

    <body>
    <script>
        let f = function () {
            console.log('hello')
        };
        f();
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    运行结果如下：
    在这里插入图片描述
    匿名函数也就是 lambda 表达式。

    作用域

    就是 某个标识符名字在代码中的有效范围。在 ES6 标准之前, 作用域主要分成两个：

    1. 全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效。
    2. 局部作用域/函数作用域: 在函数内部生效.

    其实在 ES6 之前，就没有 let 这个东西。let 是在 ES6之后 才引入的。在ES6版本之前，只有 var。在ES6版本之前，只有 var。在 JS 中，{}内部代码 是可以访问 {} 外部的代码的。：

    <body>
    <script>
        let num = 32;
        {
            console.log(num);
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在 {} 内也可以访问到 {} 外面的元素：
    在这里插入图片描述
    也可以在函数当中访问：

    <body>
    <script>
        let num = 60;
        function hello() {
            console.log(num);
        }
        hello();
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    运行结果如下：
    在这里插入图片描述
    这些是支持无限套娃的。

    对象

    对象，就是一些属性 和 方法的集合。与传统意义上的Java对象的概念是类似的。

    1. 在 JS 中，对象 是不依托于 类的。直接通过 {} 就可以创建对象。

    创建对象

    js对象中的每个属性和方法，其实都是通过“键值对” 这样的方式来表达的。{} 表示这是一个对象。

    1. 键值对之间，采用 逗号 进行分割。
    2. 键和值之间，采用 冒号 进行分割。
    3. 后续就可以通过 对象名 . 来访问了

    直接通过 {} 创建对象：

    <body>
    <script>
        let student = {
            name: 'Lockey',
            age: 20,
            height: 180,
            weight: 120,
            sing: function () {
                console.log('Perfect');
            },
            jump: function () {
                console.log('jump')
            },
        };
        console.log(student.name);
        console.log(student.age);
        student.sing();
        student.jump();
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    运行结果如下：
    在这里插入图片描述
    对象使用的时候，更接近于 Java。

    DOM API

    基于上述的语法，感觉除了会写了个 hello world，就啥也做不了。要写实际的程序，光会语言是不够的，还需要掌握配套的库/框架。

    1. 对于在浏览器上运行的 JS 来说，最核心的库，就是 DOM API。
    2. DOM API 是浏览器给 JS 提供的原生接口。基于这样的接口，就可以针对页面上的元素进行操作了。
    3. DOM ->Document 0bject Model - 文档对象模型。
    4. 文档指的是页面显示的部分。对象指的是 JS中代码操作的部分。
    5. JS 这边操作 对象，文档那边就会发生改变。所以 这两个的关系，是相辅相成的关系。
    6. 不过原生的 DOM API 能用，但是并不方便。所以也就有了大量的第三方库/框架。像 JQuery 就是一个知名的库。

    这里只讲 querySelector 和 querySelectorAll 。

    querySeletor

    直接获取元素

    通过 querySelector 来获取页面参数：

    <body>
    <div class="one">
        hello
    div>
    <script>
        //选择元素
        let div = document.querySelector('.one');
        console.log(div);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    这样就选中了页面的参数，运行结果如下：
    在这里插入图片描述

    通过 #

    使用 # 也可以获取对应元素，# 是 id 选择器：

    <body>
    <div id="one">
        hello
    div>
    <script>
        //选择元素
        let div = document.querySelector('#one');
        console.log(div);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    运行结果如下：
    在这里插入图片描述

    获取后代

    代码如下：

    <body>
    <ul>
        <li>helloli>
    ul>
    <script>
        //选择元素
        let div = document.querySelector('ul li');
        console.log(div);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    运行结果如下：
    在这里插入图片描述
    但是如果有多个对象的时候，querySelector 只能选中一个，所以就要使用 querySelectorAll 来选中所有。

    querySelectorAll

    使用 querySelectorAll 就是选中所有元素，然后返回一个数组。准确的说 querySelectorAll 返回的并不是一个数组，而是一个对象，只不过有 length，而且可以通过 下标来访问内部因素，使用起来和数组非常相似（一模一样），就是叫做”伪数组“：

    <body>
    <ul>
        <li>hello1li>
        <li>hello2li>
        <li>hello3li>
        <li>hello4li>
        <li>hello5li>
    ul>
    <script>
        //选择元素
        let div = document.querySelectorAll('ul li');
        console.log(div);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    运行结果如下：
    在这里插入图片描述

    事件

    就是浏览器对于 用户操作 行为就行的 统称，大部分是用户操作产生的：

    1. 鼠标在页面上移动，就会产生一个鼠标移动事件
    2. 鼠标点击页面某个位置，就会产生一个鼠标点击事件
    3. 鼠标滚动，也是一个事件

    JS 主要就是在不同的事情中，进行不同的处理，事件的三个要素：

    1. 事件源：哪个 HTML 产生的事件,JS 中的很多代码，都是通过 事件 来触发。
    2. 事件类型：鼠标移动，点击，键盘事件，窗口大小改变事件
    3. 事件的处理程序：事件产生之后，执行什么样的 JS 代码

    举例：

    <body>
    <button>这是一个按钮button>
    <script>
        //选择元素
        let button = document.querySelector('button');
        button.onclick = function () {
            alert("hello");
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    运行结果如下：
    在这里插入图片描述
    这里的 function 也就是回调函数，这个函数不会立即调用，而是在合适的时机 被 库/框架 自动调用。

    还可以这样写：

    <body>
    <button onclick="f()">这是一个按钮button>
    <script>
        function f () {
            alert("hello");
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    运行结果如下：
    在这里插入图片描述
    这两种写法的功能都是一样的，但是第一种写法更好，因为第二种写法会把页面写的很乱。

    操作元素

    操作 = 获取 + 修改

    1. 操作元素内容
    2. 操作元素的属性
    3. 操作元素的样式

    操作元素内容

    通过 对象 里面的一个属性 innerHTML 来实现：

    <body>
    <div id="screen">hello worlddiv>
    <button id="btn">这是一个按钮button>
    <script>
        let btn = document.querySelector('#btn');
        btn.onclick = function () {
            let screen  = document.querySelector('#screen');
            console.log(screen.innerHTML);
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    就是在点击的时候，就可以获取到元素内容：
    在这里插入图片描述

    点击之后：
    在这里插入图片描述

    点击次数多了之后，hello world 前面的计数器就会增加。

    如果在 div 里面再放入标签的话：

    <body>
    <div id="screen">
        <ul>
            <li>aaali>
            <li>bbbli>
            <li>cccli>
        ul>
    div>
    <button id="btn">这是一个按钮button>
    <script>
        let btn = document.querySelector('#btn');
        btn.onclick = function () {
            let screen  = document.querySelector('#screen');
            console.log(screen.innerHTML);
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    运行结果如下：
    在这里插入图片描述
    就直接获取到了 div 里面的 HTML。

    也可以是通过 innerHTML 来修改元素：

    <body>
    <div id="screen">
        <ul>
            <li>aaali>
            <li>bbbli>
            <li>cccli>
        ul>
    div>
    <button id="btn">获取内容button>
    <button id="btn2">修改内容button>
    <script>
        let btn = document.querySelector('#btn');
        btn.onclick = function () {
            let screen  = document.querySelector('#screen');
            console.log(screen.innerHTML);
        }
        let btn2 = document.querySelector('#btn2');
        btn2.onclick = function () {
            let screen  = document.querySelector('#screen');
            screen.innerHTML = '
    修改后的内容
    '    ;
        }
        script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    运行结果如下：
    在这里插入图片描述
    点击修改内容之后：
    在这里插入图片描述

    操作元素属性

    也是通过 querySelector 来操作：

    <body>
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.D5bn8h4fBKriHDbO3tK5NgHaJ4?w=138&h=184&c=7&r=0&o=5&pid=1.7" alt="" title="" id="1">

    <script>
        let img = document.querySelector('img');
        img.onclick = function () {
            console.log(img.src);
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    点击图片之后就可以查看相应内容了：
    在这里插入图片描述
    当然也可以通过点击切换图片：

    <body>
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.D5bn8h4fBKriHDbO3tK5NgHaJ4?w=138&h=184&c=7&r=0&o=5&pid=1.7" alt="" title="" id="1">

    <script>
        let img = document.querySelector('img');
        img.onclick = function () {
            console.log(img.src);
            if (img.src.indexOf('D5bn8h4fBKriHDbO3tK5NgHaJ4') >= 0) {
                img.src = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0cx19GDKi2HaGJUtnrihWAHaHc?w=183&h=184&c=7&r=0&o=5&pid=1.7';
            } else if (img.src.indexOf('0cx19GDKi2HaGJUtnrihWAHaHc') >= 0) {
                img.src = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.D5bn8h4fBKriHDbO3tK5NgHaJ4?w=138&h=184&c=7&r=0&o=5&pid=1.7';
            }
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    运行结果如下：
    在这里插入图片描述
    点击之后，就切换了图片：
    在这里插入图片描述
    通过 dom 对象 . 属性名就可以操作了。一个 HTML 标签里，能写哪些属性，就同样可以通过 JS 中的 DOM 对象来获取到一样的属性。

    切换按钮的显示文本

    也是通过操作元素来完成对文本的切换：

    <body>
    <input type="button" value="播放">

    <script>
        let input = document.querySelector('input');
        input.onclick = function () {
            if (input.value == '播放') {
                input.value = '暂停';
            } else if (input.value == '暂停') {
                input.value = '播放';
            }
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    运行结果如下：
    在这里插入图片描述
    点击之后：
    在这里插入图片描述

    实现全选按钮

    实现全选效果，主要是操作 input 的 check 属性：

    <body>
    <input type="checkbox" id="all"> 我全都要 <br>
    <input type="checkbox" class="ch">火锅 <br>
    <input type="checkbox" class="ch">小龙虾 <br>
    <input type="checkbox" class="ch">烧烤 <br>
    <input type="checkbox" class="ch">甜点 <br>

    <script>
        // 实现全选表单的效果
        // 1、获取元素
        let all = document.querySelector('#all');
        let ch = document.querySelectorAll('.ch');
        //2、给 all 注册点击事件
        all.onclick = function () {
            for (let i = 0; i < ch.length; i++) {
                ch[i].checked = all.checked;
            }
        }
        // 3、针对每个 ch 注册点击事件，实现对 all 的取消操作
        for (let i = 0; i < ch.length; i++) {
            ch[i].onclick = function () {
                all.checked = checkCh(ch);
            }
        }

        function checkCh(ch) {
            //判断是不是所有的 ch 都被选中
            for (let i = 0; i < ch.length; i++) {
                if (!ch[i].checked) {
                    //只要有一个没被选中，就让 all 是未选中状态
                    return '';
                }
            }
            //遍历一圈，发现都被选中了，就让 all 也是选中状态
            return 'checked';
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    这些代码就实现了，全选和全不选，全选之后，取消部分选中：
    在这里插入图片描述
    全选效果：
    在这里插入图片描述

    操作元素样式

    本质上也是操作元素属性：

    1. style 对应行内样式（直接把样式写到 style 里面）
    2. className/classList 对应内部样式/外部样式 应用了 一个/一组 CSS 类名

    style 操作示例：点击放大字体：

    <body>
    <div style="font-size: 20px">这是一个文本div>

    <script>
        let div = document.querySelector('div');
        div.onclick = function () {
            //先获取到当前字体大小
            let fontsize = parseInt(div.style.fontSize);
            //在当前字体大小基础上，增加 5px
            fontsize += 5;
            div.style.fontSize = fontsize + 'px';
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    运行结果如下：
    在这里插入图片描述
    每次点击，字体都会增大 5像素，连续多次点击之后：
    在这里插入图片描述
    如果要修改的样式比较多，通过 style 来修改就麻烦了，可以借助 CSS 类来修改：

    <body>
    <style>
        .light {
            background-color: white;
            color: black;
        }

        .dark {
            background-color: black;
            color: white;
        }
    style>

    <div class="light" style="height: 500px">这是一段话div>
    <button>关灯button>

    <script>
        let div = document.querySelector('div');
        let button = document.querySelector('button');
        button.onclick = function () {
            if (div.className == 'light') {
                div.className = 'dark';
                button.innerHTML = '开灯';
            } else if (div.className == 'dark') {
                div.className = 'light';
                button.innerHTML = '关灯';
            }
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    这样的话，就可以通过点击来实现”开关灯了“：
    在这里插入图片描述
    点击之后的效果：
    在这里插入图片描述

    操作节点

    操作节点，其实是 新增 / 删除 / 移动 节点。这里主要讲 新增 / 删除。HTML 页面是显示的 DOM 树的内容。在创建完节点之后，要挂在 DOM 树上才可以显示。通过 appendChild 来挂到树上：

    新增节点

    通过 appendChild 来实现。

    <body>
    <div class="container">div>

    <script>
        //1、创建新节点
        let newDiv = document.createElement('div');
        newDiv.id = 'newDiv';
        newDiv.className = 'one';
        newDiv.innerHTML = 'hello';
        console.log(newDiv);
        //2、把节点挂在 dom 树上
        let container = document.querySelector('.container');
        container.appendChild(newDiv);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    运行结果如下：
    在这里插入图片描述

    删除节点

    通过 removeChild 来实现，先拿到父节点，然后再拿到待删除的子节点：

    <body>
    <div class="container">div>
    <button>删除 divbutton>

    <script>
        //1、创建新节点
        let newDiv = document.createElement('div');
        newDiv.id = 'newDiv';
        newDiv.className = 'one';
        newDiv.innerHTML = 'hello';
        console.log(newDiv);
        //2、把节点挂在 dom 树上
        let container = document.querySelector('.container');
        container.appendChild(newDiv);
        //删除
        let button = document.querySelector('button');
        button.onclick = function () {
            container.removeChild(newDiv);
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    运行结果如下：
    在这里插入图片描述
    点击之后就完成了删除：
    在这里插入图片描述

  • 相关阅读:
    javaScrip入门
    【云原生 | Kubernetes 系列】---Skywalking 告警
    static关键字修饰成员变量与成员函数
    Linux云服务环境安装-Redis篇
    1.4_17 Axure RP 9 for mac 高保真原型图 - 案例16 【动态面板-滚动条6】手动制作滚动条
    linux查看服务器开放的端口和启用的端口五种方式
    [倒置字符串]
    数字化转型的“支点”是什么？
    零代码开发入门：快速上手DIY函数公式的5个步骤
    临界区互斥方法
  • 原文地址：https://blog.csdn.net/sjp151/article/details/126069693