前端三剑客—JS

最新推荐文章于 2024-06-23 23:55:33 发布
最新推荐文章于 2024-06-23 23:55:33 发布
阅读量1.1k 收藏 13
点赞数 16
分类专栏： JavaEE 文章标签： 前端 javascript java JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjp151/article/details/126069693
版权

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>

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

JS 的引入方式

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

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

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

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

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

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

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

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

输入输出

输入：prompt

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

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

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

输出 alert

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

输出 console.log

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

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

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

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

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

JS 的基础语法

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

变量

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

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

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

使用变量

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

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

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

不过现在更倾向于用 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 开头

特殊的数字值：

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

字符串类型

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

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

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

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

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

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

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

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

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

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

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

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

布尔类型

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

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

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

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

未定义数据类型和空值

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

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

在这里插入图片描述

null 是表示一个空值：

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

在这里插入图片描述

运算符

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

算术运算符-不同点

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

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

运行结果如下：
在这里插入图片描述
这里的运行结果是 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>

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

逻辑运算符

&& 和 || 和 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>

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

数组

使用 new 关键字创建

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

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

更常见的方法

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

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

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

打印数组

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

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

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

获取数组元素

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

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

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

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

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

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

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

如果设置下标 -1 为 10：

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

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

当然，还有更骚的操作：

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

运行结果如下：
在这里插入图片描述
也就是 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>

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

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

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

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

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

往数组中插入元素

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

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

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

删除元素

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

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

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

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

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

函数

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

语法格式

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

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

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

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

没有参数类型：

<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>

因为 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>

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

函数表达式

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

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

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

匿名函数

也就是没有写函数名：

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

运行结果如下：
在这里插入图片描述
匿名函数也就是 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>

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

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

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

对象

对象，就是一些属性 和 方法的集合。与传统意义上的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>

运行结果如下：
在这里插入图片描述
对象使用的时候，更接近于 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>

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

通过 #

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

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

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

获取后代

代码如下：

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

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

querySelectorAll

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

<body>
    <ul>
        <li>hello1</li>
        <li>hello2</li>
        <li>hello3</li>
        <li>hello4</li>
        <li>hello5</li>
    </ul>
    <script>
        //选择元素
        let div = document.querySelectorAll('ul li');
        console.log(div);
    </script>
</body>

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

事件

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

  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>

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

还可以这样写：

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

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

操作元素

操作 = 获取 + 修改

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

操作元素内容

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

<body>
    <div id="screen">hello world</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>

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

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

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

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

<body>
    <div id="screen">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </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>

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

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

<body>
    <div id="screen">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </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 = '<h1>修改后的内容</h1>';
        }
    </script>
</body>

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

操作元素属性

也是通过 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>

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

<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>

运行结果如下：
在这里插入图片描述
点击之后，就切换了图片：
在这里插入图片描述
通过 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>

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

实现全选按钮

实现全选效果，主要是操作 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. 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>

运行结果如下：
在这里插入图片描述
每次点击，字体都会增大 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>

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

操作节点

操作节点，其实是 新增 / 删除 / 移动 节点。这里主要讲 新增 / 删除。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>

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

删除节点

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

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

    <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>

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

Lockey-s
关注
  • 16
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
WEB-1-前端三剑客
feng25751006的博客
06-04 1531
网络开发前端三剑客
前端三剑客
mmm174的博客
11-01 1420
HTML、CSS、JS详细使用方法。JS和Java的区别
什么是传说中的前端三剑客
FMgxth的博客
06-23 402
vscode 全称为 Visual Studio Code ，是⼀款免费开源的现代化轻量级代码编辑器，⽀持⼏乎所有主流的开发语⾔的语法⾼亮、智能代码补全、⾃定义快捷键、括号匹配和颜⾊区分、代码⽚段、代码对⽐ Diff、GIT命令 等特性，⽀持插件扩展，并针对⽹⻚开发和云端应⽤开发做了优化。我们通常需要代码提示我们辅助编写，这个时候就涉及到VSCODE提供的一系列的插件插件安装在 Extension 中，点击即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。针对⼀些⾮标准的标签，这个插件还是很有⽤的。
前端“三剑客”——HTML,CSS,JS
热门推荐
欢迎来到 晨 的博客
09-25 1万+
关于对web部分基础知识的总结
前端开发框架三剑客
weixin_33901843的博客
08-30 285
是否选择了合适的框架进行Web开发对项目是有重大影响的。我们都希望找到一个稳健的易维护的框架结构。接下来，我们一起来对当前三款流行Web开发框架作个简单比较认识。 初步认识 AngularJS诞生于2009年，是商业产品GetAngular的一部分。后来，GetAngular创造者之一的MisKoHevry对其 进行精简，并随后获得了Google的大力支持，进而发展成今天的样子。Angul...
前端三剑客 html js css 来实现计算器功能
最新发布
08-14
在互联网时代，前端技术的重要性不言而喻，而HTML、CSS和JavaScript作为前端开发的三大基石，被誉为“前端三剑客”。本文将为您揭示如何利用这三大技术，轻松实现一个实用的计算器功能，助您提升前端技能。 HTML是...
前端三剑客（html+css+js）加vue部分基础运用2
06-11
在IT行业中，前端开发是构建Web应用程序的重要组成部分，而“前端三剑客”指的是HTML、CSS和JavaScript，这三种技术是构建任何现代网页的基础。Vue.js是近年来非常流行的一个前端框架，它使得JavaScript的开发更加...
前端三剑客参考文档大全.zip
10-27
JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容...
关于前端三剑客（HTML、CSS、JavaScript）的学习代码。.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
前端基础三剑客HTML，css，js
04-21
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现UI/UX设计的各种效果，从而让用户获得更好的使用体验。它主要负责页面的展示样式...
web前端开发三剑客.zip
05-09
HTML - XHTML The Definitive Guide, Sixth Edition HTML权威指南英文第六版 CSS The Definitive Guide, 4th Edition CSS权威指南英文第四版 JavaScript The Definitive Guide, 6th Edition JavaScript权威指南英文第六版
前端三剑客 - HTML
ryy1999的博客
05-07 2818
我们要想搭建一个网站，既需要写一些前端代码，又需要写一些后端代码。前端，当前主流的实现方案，其实就是我们平时所说的“前端开发三剑客”。以上转载于「Dark And Grey」的文章 原文链接：https://blog.csdn.net/DarkAndGrey/article/details/124390460我们已经了解了 HTML基本开发方式，也了解了浏览器如何查看页面结构。 接下来，就开始具体学习 HTML 中的语法细节。 说是语法细节，实际上学习的是 HTML 中的各种标签。   一个网页上可能有连接
前端三剑客_HTML
Hello_super的博客
01-04 1341
前端三剑客 一、软件的架构 1、C/S（客户端/服务器端） 一般我们使用的软件都是C/S架构； 比如系统中的QQ、360……； C表示客户端，通过客户端来使用软件； S表示服务器，服务器负责处理软件的业务逻辑； 特点： 软件使用前必须的安装； 软件更新是，服务器和客户端的同时更新； C/S架构的软件不能跨平台使用； C/S架构的软件客户端和服务器端通信采用的自有协议，相对来说是比较安全的。 2、B/S（浏览器/服务器） B/S本质也是C/S，只不过B/S架构的软件，使用浏览器作
前端三剑客（入门）
qq_45623543的博客
10-15 1524
《个人学习笔记一》 Wed标准三剑客：HTML CSS JavaScript HTML HTML（Hypertext Markup Language）是超文本标记语言。它是一种标记语言，而不是编程语言。HTML是Web页面的结构。HTML使用标记来描述网页。网页的内容包括标题、副标题、段落、无序列表、定义列表、表格、单表等。 HTML文档是用来描述网页，由HTML标记和纯文本构成的文本文件。Web浏览器可以读取HTNL文档，并以网页的形式显示出它们。 CSS CSS的作用 级联样式表（Cascading S
总结前端三剑客之一（HTML基础）
x0919的博客
01-25 6959
今天我们来学习前端三剑客之一（HTML），在讲解HTML之前，我们需要先了解前端三剑客是什么，分别又有什么作用呢？ 前端三剑客指的是HTML、CSS、JavaScript，这三门语言。目前大多数网站的前端都是由这三门语法写的，他们之前相互搭配进行使用，就能够显示出很多丰富的效果。而他们三者的作用就像是这样的： HTML，像骨头一样，撑起了整个页面的大致框架，比如左边需要一个输入框，右边需要一个按钮之类的，都可以用HTML来实现。 CSS，而HTML实现出来的样式比较单调，CSS就是为它进行“化妆”的，也就
前端基本知识介绍
weixin_49376454的博客
05-06 453
vscode 全称为 Visual Studio Code ，是⼀款免费开源的现代化轻量级代码编辑器，⽀持⼏乎所有主流的开发语⾔的语法⾼亮、智能代码补全、⾃定义快捷键、括号匹配和颜⾊区分、代码⽚段、代码对⽐ Diff、GIT命令 等特性，⽀持插件扩展，并针对⽹⻚开发和云端应⽤开发做了优化。我们通常需要代码提示我们辅助编写，这个时候就涉及到VSCODE提供的一系列的插件插件安装在 Extension 中，点击即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。针对⼀些⾮标准的标签，这个插件还是很有⽤的。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lockey-s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值