3 前端（中）：JavaScript

🕗 发布于 2025-01-20 10:11 前端 javascript udp

文章目录

前言：JavaScript简介
一、ECMAscript（JavaScript基本语法）
二、BOM对象
三、DOM对象

前言：JavaScript简介

概念: 一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
- 脚本语言: 不需要编译，直接就可以被浏览器解析执行了
功能:
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript发展史:
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为:c–, 后来更名为:ScriptEase
- 1995年, Netscape(网景)公司，开发了一门客户端脚本语言: Livescript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
- 1996年，微软抄袭JavaScript开发出JScript语言
- 1997年，ECMA(欧洲计算机制造商协会)，制定了一套所有的客户端脚本语言要遵守的规范ECMAScript，就是所有客户端脚本语言的标准
  JavaScript = ECMAscript + JavaScript自己特有的东西(BOM+DOM)

一、ECMAscript（JavaScript基本语法）

ECMAscript是一套统一的标准，类似与数据库中的SQL语法，通用的。所以将其理解为JavaScript基本语法也是没有错的。

1 JavaScript与html结合方式（快速入门）

参考视频

与html的结合方式：
- 内部JS: 定义<script>标签，标签体里面的内容就是js代码
- 外部JS: 定义<script>标签，通过src属性引入外部的js文件
注意:
- <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序
- <script>可以定义多个。

内部JS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素状态示例</title>
    
</head>
<body>

    <!-- 内部JS：可以在html的任意位置插入js代码，注意插入的位置，位置不同，执行的时机也不同 -->
    <script>
        alert("hello world");          // 弹出一个警告框
    </script>

</body>
</html>

在这里插入图片描述
外部JS： js文件使用 .js后缀即可

b.js

alert("我是外部引入的b.js文件");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素状态示例</title>
    
</head>
<body>

    <!-- 外部部JS：可以在html的任意位置引入外部js，注意插入的位置，位置不同，执行的时机也不同 -->
    <script src="b.js"></script>

</body>
</html>

在这里插入图片描述

2 基本知识

（1）JavaScript注释（和Java注释一样）

单行注释: //注释内容
多行注释: /*注释内容*/

（2）JS输出语句

使用 window.alert()写入警告框

使用 document.write()写入 HTML界面输出

使用 console.log()写入浏览器控制台

在这里插入图片描述

（3）{ }代码块

JS同样也是一门{ }代码块区分语言

3 变量

（0）函数作用域块级作用域全局作用域

学习变量前先来学习一下作用域的概念

作用域
- 函数作用域：顾名思义根据函数内外来区分变量作用域
  - 典型的就是python中的global关键字定义全局变量、局部变量
- 全局作用域：就是全局的意思
  - 典型就是各种类里面定义在最前面的 self、this这些属性变量
  - python中直接写在最外面的层的变量，作用域也是全局作用域
- 块级作用域：仅仅在{ }内起作用
  - 典型的就是java所有变量的作用范围都是根据{ }确定的
    就算是java中的类属性，是全局的，实际上也是因为其属于的{ }是最顶层，所以也才是全局的作用域
各种语言：
- python：函数作用域 + 全局作用域
  全局作用域：定义在最外层的变量；类属性（self）; 函数内部使用global声明的变量；（主要是这三种情况）
  函数作用域：变量定义在函数内外分为来确定变量的作用范围，函数内部定义的变量就只能函数内部使用，除非使用global声明才能继续外部也能访问
- java：块级作用域 + 全局作用域
  这个很好理解，java变量作用范围一切以{ }为标准
- JS：函数作用域+块级作用域+全局作用域
  这个JS就结合了python和java的一切情况了
  - 使用 var定义变量，就是python那一套，要使用函数作用域那一套规则
  - 使用let定义变量，那作用范围就是{ }，另外如果是在最顶层的文件用let定义变量，那作用范围也是全局，也变成了全局的了

（1）var关键字：var 变量名 = 初始化值;（当成python变量来理解）

变量: 一小块存储数据的内存空间
Java语言是强类型语言，而JavaScript是弱类型语言
- 强类型: 在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
  int a = 3; 那么后面给a赋值只能是int, a = "hello"就是违法的 ---- 这就是强类型的含义
- 弱类型: 在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
  var a = 3; 那么后面对a进行赋值可以任意赋值任意类型， a = "hello"是合法的。（和python有点像）
语法：
- var 变量名 = 初始化值;
- var 变量名；
- var关键字就是声明一个变量，不管任意类型数据类型
加入函数的概念就可以引入全局变量与局部变量的概念
变量的定义使用var关键字，也可以不使用
- 用: 定义的变量是局部变量
- 不用: 定义的变量是全局变量(不建议)
  结合function函数理解。其实就是和python中的global关键字声明全局变量，一样的效果。
变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名

<script>
    var a;
    a = 10;
    alert(a);        // 弹出10这么一个提示框

    a = "hello";
    alert(a);        // 弹出hello这么一个提示框
</script>

【注】：js语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略(但不建议)

（2）let关键字：let 变量名 = 初始化值;（当成java变量来理解），ES6才引入

规则：
- let 声明的变量是块级作用域（block scope），即变量只在声明它的代码块（如 {}）内有效。
- 如果在最外层，直接文件最上层都还没有{ }，那用let声明的变量同样是全局作用域了。

（3）var和let声明变量的区别？

举一个例子就明白了：
总结就是在{ }里面定义的var在{}外面也能访问（var作用范围只和函数内外有关），let不行（let作用范围只和{ }有关）

<script>
   {
       var a = 1;
   }
   console.log(a);     // 1

   {
       let b = 2;
   }
   console.log(b);     // Uncaught ReferenceError: b is not defined ,直接报错
</script>

4 常量 const

const 是 JavaScript 中用于声明常量的关键字，也是在 ES6（ECMAScript 2015）中引入的。
- const 声明的变量必须在声明时初始化，且不能重新赋值。
- 块级作用域: 与 let 类似，const 声明的变量具有块级作用域（block scope），即变量只在声明它的代码块（如 {}）内有效。

const PI = 3.14159;
const API_URL = "https://api.example.com";

5 数据类型（原始数据类型、引用数据类型）

（1）原始数据类型(基本数据类型)

number: 数字。整数/小数/NaN(not a number 一个不是数字的数字类型)

string: 字符串。字符串 “abc”，“a”，‘abc’

boolean: true和false

null: 一个对象为空的占位符

undefined: 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

<script>
    // 定义number类型
    var num = 1;
    var num2 = 1.2;
    var num3 = NaN;

    // document.write()方法用于向文档写入HTML表达式(类似java中的System.out.println())
    document.write(num + "<br>");
    document.write(num2 + "<br>");
    document.write(num3 + "<br>");

    // 定义string类型
    var str = "hello";
    var str2 = 'world';
    document.write(str + "<br>");
    document.write(str2 + "<br>");

    // 定义boolean类型
    var bool = true;
    var bool2 = false;
    document.write(bool + "<br>");
    document.write(bool2 + "<br>");

    // 定义null类型和undefined类型
    var n = null;
    document.write(n + "<br>");
    var u = undefined;
    var u2;
    document.write(u + "<br>");
    document.write(u2 + "<br>");

</script>

在这里插入图片描述

（2）引用数据类型(对象)

（3）typeof(): 查看数据类型（类似python的type()函数）

<script>
    // 定义number类型
    var num = 1;
    document.write(num + "----" + typeof(num) + "<br>");        // 1----number
    
    var str2 = 'world';
    document.write(str2 + "----" + typeof(str2) + "<br>");      // world----string

    // 定义boolean类型
    var bool = true;
    document.write(bool + "----" + typeof(bool) + "<br>");      // true----boolean


    // 定义null类型和undefined类型
    var n = null;
    document.write(n + "----" + typeof(n) + "<br>");           // null----object
    var u = undefined;
    document.write(u + "----" + typeof(u) + "<br>");           // undefined----undefined
</script>

在这里插入图片描述
可以看到 null的数据类型竟然是object(对象)，这其实是JavaScript的一个bug，但是一直沿用至今
注释: 您也许会问，为什么 typeof 运算符对于 null 值会返回"object"。这实际上是 JavaScript 最初实现中的一个错误，然后被
ECMAScript 沿用了。现在，null 被认为是对象的占位符, 从而解释了这一矛盾，但从技术上来说,它仍然是原始值。

6 （字符串方法）JS中的原始数据类型string的属性和常用方法

JS中的string字符串虽然是原始数据类型，但是里面存在和java中一样的自动装箱机制会将其封装成一个字符串对象，里面定义了一些方法我们是可以使用的。

（1）length属性

（2）charAt(索引位置)方法：返回指定位置的字符

（3）indexOf(字符串)方法：返回字符串中指定值的第一个出现的位置

（4）trim()方法：去除字符串两端的空格

（5）substring(开始位置, 结束位置)方法：返回指定位置的字符

// JS中的string的属性和方法

// 1. length属性
var str = "hello";
console.log(str.length); // 5

// 2. charAt(索引位置)方法：返回指定位置的字符
console.log(str.charAt(0)); // h

// 3. indexOf(字符串)方法：返回字符串中指定值的第一个出现的位置
console.log(str.indexOf("ll")); // 2

// 4 trim()方法：去除字符串两端的空格
var str2 = "  hello  ";
console.log(str2.trim()); // hello

// 5 substring(开始位置, 结束位置)方法：返回指定位置的字符
// 左闭右开
var str = "hello world";
console.log(str.substring(6, 10)); // worl

7 运算符

Java运算符参考

（1）一元运算符 ++, - - , +（正号，不是加）-（负号）

自增和自减的注意事项参考java里面的

正号：+1，+3
负号：-1，-3
就是数学上的那个，用于界面上可以展示的。正号和符号的特殊用法需要注意的就是在【6JavaScript自带强转功能在运算符运算中】

（2）算数运算符 + ，- ，*，/ ，%（取模）等等

略过，和java中的一样。

（3）赋值运算符 = ，+=，-=, *= 等等

（4）比较运算符 >, < , >=,<=, ==(宽松等于)，===（严格等于），!=(宽松不等于), !==(严格不等于)

==（宽松等于）
功能: 比较两个值是否相等，会进行自动类型转换再比较。

console.log(5 == "5"); // true，因为类型转换后相等
console.log(true == 1); // true，因为 true 转换为 1
console.log(null == undefined); // true

===（严格等于）
功能: 比较两个值是否相等，不会进行类型转换。
这个才是其他编程里面的等于

console.log(5 === "5"); // false，因为类型不同
console.log(true === 1); // false，因为类型不同
console.log(null === undefined); // false

!=（宽松不等于）
功能: 比较两个值是否不相等，会进行类型转换。

console.log(5 != "5"); // false，因为类型转换后相等
console.log(5 != 10);  // true
console.log(true != 1); // false，因为 true 转换为 1

!==（严格不等于）
功能: 比较两个值是否不相等，不会进行类型转换。

console.log(5 !== "5"); // true，因为类型不同
console.log(5 !== 10);  // true
console.log(true !== 1); // true，因为类型不同

【注】：>==是不合法的呦，别被带偏了。另外 5>"4"这种写法在javascript中会返回true，很神奇吧，这种设计自动的隐式转换规则放在现在是很离谱的，但是没有办法，javascript一开始设计就是要避免将报错信息展现在前端，为了兼容以前的产品，就没有将这种离谱的隐式转换规则改正过来。我们还是当遵从java那个隐式转换规则，这个javascript里面的太自由了，很危险，完全没有必要这么干

（5）逻辑运算符 &&（与） ||（或）！（非）

和java一样，&&（与）、 ||（或）都具有短路效果

（6）三元运算符：条件 ? 表达式1 : 表达式2

如果条件为 true，则返回表达式1 的值。
如果条件为 false，则返回表达式2 的值。

<script>
   var a = 3;
   var b = 4;
   var c = a > b ? 1:0;
</script>

（7） JavaScript运算符中的自动隐式转换功能

Java运算符强制转换特性参考
上面在演示的时候也挑出来几个演示了一下这个特性，这里再挑几个详细讲一下
注意: 在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型转换
在这个里面比较特殊的就是 + 这个运算符在什么情况下表示加号还是正号了

---- + ：加号与正号的区分（特性）及其各自特殊用法

JavaScript 会根据上下文自动区分它们是加号还是正号。

区分正号和加号
- 加号 (+): 作为二元运算符（有两个操作数），用于加法或字符串拼接。
- 正号 (+): 作为一元运算符（只有一个操作数），用于将操作数转换为数字。
加号 (+)：加号用于算术加法或 字符串拼接。
- 算数加法：这个不用讲也知道
  当操作数都是数字时，+ 表示加法运算。
- 字符串拼接（只要有一个操作数是字符串就表示拼接）
  当至少有一个操作数是字符串时，+ 表示字符串拼接。

console.log("hell0" + 10000); // "Hello10000"

正号 (+)
- 数字转换（比较常见就是字符串转数字，+可以让其自动强转）
  当 + 作为一元运算符（只有一个操作数）时，它会尝试将操作数转换为数字。
- 布尔值转换
  布尔值 true 和 false 会被转换为 1 和 0。
- 其他类型转换
  如果操作数无法转换为数字，则结果为 NaN。
  很显然负号也有这些转换规则

let str = "123";
let num = +str;
console.log(num); // 123（数字类型）

console.log(+true);  // 1
console.log(+false); // 0

console.log(+"Hello"); // NaN
console.log(+null);    // 0
console.log(+undefined); // NaN

---- boolean规则 + 自动转换

其他类型转boolean:
- number: 0或NaN为假，其他为真
- string: 除了空字符串(“”)，其他都是true
- null&undefined: 都是false
- 对象: 所有对象都为true
  这些规则是 JavaScript 隐式类型转换的一部分，通常用于条件判断、逻辑运算等场景。特别是结合当成 while （条件），if (条件)，这些里面条件如果不是布尔就会自动按照上面规则转换成布尔

if (0) {
  console.log("This will not run");
}
if ("Hello") {
  console.log("This will run");
}

（8）总结

JavaScript运算符中的自动转换功能很离谱，实际开发中我们最好还是按照java的规则来，但是也要知道一点这些离谱的自动转换，防止其他人秀操作你看不懂。自己写，java的规则就能实现，何必玩这些有的没的折磨自己。

8 流程控制语句

先回顾一下JS里面的JS规则

其他类型转boolean:
- number: 0或NaN为假，其他为真
- string: 除了空字符串(“”)，其他都是true
- null&undefined: 都是false
- 对象: 所有对象都为true
  这些规则是 JavaScript 隐式类型转换的一部分，通常用于条件判断、逻辑运算等场景。特别是结合当成 while （条件），if (条件)，这些里面条件如果不是布尔就会自动按照上面规则转换成布尔

（1）if…else…

语法：

if (条件) {
    // 条件为 true 时执行的代码
}

if (条件) {
    // 条件为 true 时执行的代码
} else {
    // 条件为 false 时执行的代码
}

if (条件1) {
    // 条件1为 true 时执行的代码
} else if (条件2) {
    // 条件2为 true 时执行的代码
} else {
    // 所有条件为 false 时执行的代码
}

（2）switch语句

在java中，switch语句可以接受的数据类型：byte int shor char, 枚举(jdk1.5)，string(jdk1.7）
在JS中, switch语句可以接受任意的原始数据类型
语法：

switch (表达式) {
    case 值1:
        // 表达式等于值1时执行的代码
        break;
    case 值2:
        // 表达式等于值2时执行的代码
        break;
    default:
        // 表达式不等于任何值时执行的代码
}

var day = "Monday";
switch (day) {
    case "Monday":
        console.log("今天是周一");
        break;
    case "Tuesday":
        console.log("今天是周二");
        break;
    default:
        console.log("今天不是周一或周二");
}

（3）while 循环

语法：

while (条件) {
    // 循环体
}

var sum = 0;
var num = 1;
while (条件) {
    sum = sum + num;
    num++;
}
alter(sum); // 5050

（4）for循环

语法：
for循环这里还有很多变体，这里我们先学习最基本的

for (初始化; 条件; 更新) {
    // 循环体
}

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

（5）break，continue，return 语句

和其他编程语言完全一样。

（6）练习：9x9乘法表（待定！！！！！！！）

参考视频

9 函数

（1）函数的定义方式一：常用

介绍: 函数(方法)是被设计为执行特定任务的代码块。
定义: JavaScript 函数通过 function 关键字进行定义，语法为:
注意:
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
- 和python的函数比较像，都不用声明参数类型
调用: 函数名称(实际参数列表)
- 注意JS中，函数调用可以传递任意个数的参数
  下面的add例子，其他语言都要严格 add(10,20)才行，但JS可以add(10,20,40,50), 随便传它只取前两个

（2）函数的定义方式二：了解即可

介绍：在JS中函数也是一个对象，因此也提供了下面这种定义函数方式

（3）JS函数声明中的隐藏arguments数组

在JS中定义函数时该函数会自动创建一个隐藏的数组arguments，用来存放调用中传入的实际参数封装所有的实际参数
在函数内部我们可以直接用变量名arguments访问这个数组
利用这个特性我们可以实现JS中的可变参数

基本演示

// arguments 是一个类数组对象，包含了函数调用时传入的所有参数
function add(){
    console.log(arguments[0]);                 
    console.log(arguments[1]);
}

add(1,2,3,4,5);     // 1,2

add(1);             // 1,undefined

可变参数求任意个参数的和

<script>
    // arguments 是一个类数组对象，包含了函数调用时传入的所有参数
    function add(){
        let sum = 0;
        for(let i = 0; i < arguments.length; i++){
            sum += arguments[i];
        }
        return sum;
    }

    console.log(add(1, 2, 3, 4, 5)); // 15
    console.log(add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)); // 55
</script>

（4）JS函数中的一些注意事项（充分体现了JS是一门不严谨语言）

注意1: JS中，函数调用可以传递任意个数的参数

function add(a,b){
    return a+b;
}
console.log(add(1,2));          //3
console.log(add(1,2,3,4,5));    //3
console.log(add(1));            //NaN

注意1: JS中，如果定义相同名字函数，不会报错，后面写的函数会完全覆盖前面的

function add(a,b){
    return a+b;
}
console.log(add(1,2));          //-1

function add(a,b){
    return a - b;
}
console.log(add(1,2));          //-1

可以看到都是调用a-b的那一个

10 对象

（1）Array数组

基本定义

JavaScript 中 Array对象用于定义数组。
定义：
访问：
特点：
- JS中Array数组 长度可变，同一个数组可以存放不同数据类型
- JS中不存在索引越界（JS的不严谨特性）
  这种不严谨性千万别带到其他语言上去

// 特点：长度可变，元素类型可变
var arr = [1, 2, 3, 4];

arr[10] = 50;      // JS中不会报错（不存在索引越界问题），但是会自动补充中间的空位，默认是初始化成undefined
console.log(arr);  // [1, 2, 3, 4, empty × 6, 50]

arr[9] = "hello";     // 可以混合存储不同类型的元素
arr[8] = true;

console.log(arr);  // [1, 2, 3, 4, empty × 4, true, "hello", empty, "50"]

在这里插入图片描述

属性和方法

属性

属性	描述
length	设置或返回数组中元素的数量

方法

方法	描述
push()	向数组的末尾添加一个或多个元素，，并返回新的长度
join(参数)	将数组中的元素按照指定的分隔拼接为字符串
pop()	删除并返回数组的最后一个元素
shift()	删除并返回数组的第一个元素
splice(开始删除的索引位置，删几个)	从数组中删除元素

---- length属性

---- join(分隔符) 方法用于把数组中的所有元素按照指定分隔符拼接一个字符串

---- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度

---- pop() 方法用于删除并返回数组的最后一个元素

---- shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

---- splice(开始删除的索引位置，删几个) ：从数组中删除元素

// join(分隔符) 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
// 默认分隔符是逗号拼接
var arr = ["h", "e", "l", "l", "o","1"];
console.log(arr.join());    // h,e,l,l,o,1
console.log(arr.join("_"));    // h_e_l_l_o_1

// push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var arr1 = ["h", "e", "l", "l", "o"];
arr1.push(100);         
console.log(arr1);      // ["h", "e", "l", "l", "o", 100]
arr1.push(200, 300);
console.log(arr1);      // ["h", "e", "l", "l", "o", 100, 200, 300]

// pop() 方法用于删除并返回数组的最后一个元素。
var arr2 = ["h", "e", "l", "l", "o"];
var last = arr2.pop();
console.log(last);      // o
console.log(arr2);      // ["h", "e", "l", "l"]

// shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
var arr3 = ["h", "e", "l", "l", "o"];
var first = arr3.shift();
console.log(first);     // h
console.log(arr3);      // ["e", "l", "l", "o"] 

// splice(开始删除的索引位置，删几个) ：从数组中删除元素 
var arr4 = ["h", "e", "l", "l", "o"];
arr4.splice(1, 2);      //  从索引1开始删除2个元素
console.log(arr4);      // ["h", "l", "o"]

Array数组的遍历

---- 遍历数组1: 普通for循环会遍历所有元素，包括空位

---- 遍历数组2: for…of循环会遍历所有元素，包括空位

---- 遍历数组3: forEach方法会跳过空位

forEach(函数) 方法：遍历数组中每一个有值的元素，并调用一次传入的函数（可以写成lambda表达式）

// 特点：长度可变，元素类型可变
var arr = [1, 2, 3, 4];

arr[10] = 50;      // JS中不会报错（不存在索引越界问题），但是会自动补充中间的空位
console.log(arr);  // [1, 2, 3, 4, empty × 6, 50]

arr[9] = "hello";     // 可以混合存储不同类型的元素
arr[8] = true;

console.log(arr);  // [1, 2, 3, 4, empty × 4, true, "hello", empty, "50"]   

console.log("=====================================");

// 遍历数组1: 普通for循环会遍历所有元素，包括空位
for (let index = 0; index < arr.length; index++) {
    console.log(arr[index]);                          // 1 2 3 4 undefined undefined undefined undefined true "hello" 50
}

console.log("=====================================");

// 遍历数组2: for...of循环会遍历所有元素，包括空位
for (let e of arr) {
    console.log(e);                                   // 1 2 3 4 true hello 50
}

console.log("=====================================");

// 遍历数组3: forEach方法会跳过空位
arr.forEach(function(e){
            console.log(e);                                   // 1 2 3 4 true hello 50
        })

// 箭头函数写法  (...) => {...}         其实下面还可以省略一些，这里为了更清晰就不省略了  
// 和java中的lambda表达式类似
arr.forEach((e) => {
    console.log(e);
})                   // 1 2 3 4 true hello 50

（2）JSON对象

学JSON对象前建议先学了【11 JS自定义类、自定义对象】

概念: JavaScript Object Notation，JavaScript对象标记法
JSON 是通过JavaScript 对象标记法书写的文本
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

---- JSON（字符串）的创建

定义：
注意：
- 键必须使用双引号，单引号不可以
- 在js中JSON最外层必须包裹单引号或者双引号变成一个字符串
- 如果JSON里面继续嵌套了自定义对象，那就继续嵌套 { }

// 定义json
var json = '{"name": "张三","age": 20,"address": ["北京","上海","广州"],"friends": [{"name": "李四","age": 21},{"name": "王五","age": 22}]}';

---- JSON的解析

JSON.parse(json字符串)：JSON字符串转JS对象()JS中的一个字面量对象了变成)

在这里插入图片描述

// 定义json
var json = '{"name": "张三","age": 20,"address": ["北京","上海","广州"],"friends": [{"name": "李四","age": 21},{"name": "王五","age": 22}]}';

// json字符串转换为JS对象
var use = JSON.parse(json);
var name = use.name;
var age = use.age;
console.log(name + " " + age);   // 张三 20

// 获取数组
var address_arr = use.address;
address_arr.forEach(element => {
    console.log(element);      // 北京 上海 广州
    
});



var friends_arr = use.friends;
friends_arr.forEach(element => {
    console.log(element.name + " " + element.age);   // 李四 21 王五 22 
});

JSON.stringify(jsObject): JS对象转JSON字符串

在这里插入图片描述

var user = {
    name: 'John',
    age: 25,
    email: "2023111@uestc,cn"
}

var jsonStr = JSON.stringify(user); 
console.log(jsonStr);               // "{"name":"John","age":25,"email":"2023111@uestc,cn"}"

（3）Date 日期对象

创建 Date 对象
可以通过多种方式创建 Date 对象
- 无参数：创建一个表示当前日期和时间的 Date 对象
  let now = new Date();
  console.log(now); // 输出当前日期和时间，例如: 2023-10-05T12:34:56.789Z
- 传递年、月、日等参数
  传递年、月、日、时、分、秒、毫秒等参数
  注意：月份从 0 开始（0 表示 1 月，11 表示 12 月）
  let date = new Date(2023, 9, 5, 12, 34, 56); // 2023 年 10 月 5 日 12:34:56
  console.log(date);
- 传递日期字符串
  传递一个日期字符串，JavaScript 会尝试解析该字符串。
  let date = new Date(“2023-10-05T12:34:56Z”);
  console.log(date);
- 传递时间戳
  传递一个时间戳（从 1970 年 1 月 1 日 00:00:00 UTC 开始的毫秒数）
  let date = new Date(1696521600000); // 时间戳对应 2023-10-05 00:00:00 UTC
  console.log(date);
方法：
这里给出一些get方法，还有很多set方法和格式化方法就不一一演示了，要用到现查就可以了
- getFullYear() 获取年份（四位数）
  date.getFullYear() → 2023
- getMonth() 获取月份（0-11，0 表示 1 月）
  date.getMonth() → 9（10 月）
- getDate() 获取日期（1-31）
  date.getDate() → 5
- getDay() 获取星期几（0-6，0 表示周日）
  date.getDay() → 4（周四）
- getHours() 获取小时（0-23）
  date.getHours() → 12
- getMinutes() 获取分钟（0-59）
  date.getMinutes() → 34
- getSeconds() 获取秒数（0-59）
  date.getSeconds() → 56
- getMilliseconds() 获取毫秒数（0-999）
  date.getMilliseconds() → 789
- getTime() 获取时间戳（从 1970 年 1 月 1 日开始的毫秒数）
  date.getTime() → 1696521600000

（4）Math 对象（静态，直接类名调用）

在 JavaScript 中，Math 对象是一个内置对象，提供了许多数学相关的常量和函数。与 Date 对象不同，Math 对象不是一个构造函数，因此不能通过 new Math() 创建实例。所有 Math 对象的属性和方法都是静态的，可以直接通过 Math 调用。

属性
- Math.E 自然对数的底数（e）
  2.718281828459045
- Math.PI 圆周率（π）
  3.141592653589793
- …
方法：
- Math.sin(x) 返回 x 的正弦值（x 为弧度）
- Math.round(x) 四舍五入到最接近的整数
  Math.round(4.7) → 5
- Math.ceil(x) 向上取整（返回大于或等于 x 的最小整数）
  Math.ceil(4.2) → 5
- …

console.log(Math.pow(2, 3)); // 8
console.log(Math.sqrt(16));  // 4
console.log(Math.log(10));   // 2.302585092994046

（5）RegExp 对象（正则表达式对象）

在JS中正则表达式我们不需要知道太多，学一个方法就行（表单校验的时候用一下）。复杂的正则也用不到前端处理，交给后端。

创建
- var reg = new RegExp(“正则表达式”)；
- var reg = /正则表达式/；
  注意这种字面量的方式，千万不要加引号；后期这种字面量的方式使用的更多
  两种方式都可以
方法：
- test(str) 测试字符串是否匹配正则表达式，返回布尔值。
  我们前端知道这一个方法就够了

var reg = new RegExp("\\w{6,12}");    // 这种方式 双斜杠 才 代表一个斜杠

var reg2 = /\w{6,12}/;      //  匹配6-12位的字母数字下划线

var username = "zhangsan";
// 验证
if(reg.test(username)){
    console.log("验证通过");      // 验证通过
}else{
    console.log("验证失败");
}

（6）Global对象：里面有一些全局方法

Global 对象是一个隐含的全局对象，它代表了全局作用域。
这个对象里面的一些方法我们要用到，并且特殊的是，这个里面的方法我们直接方法名就可以调用，连对象都可以不用创建。就像python中直接调用print()函数一样

---- encodeURI() 对 URI 进行编码；decodeURI() 对 URI 进行解码

我们在一些URL中经常看到 %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2这种，其实就是加密了
这么做主要是为了防止URL乱码（中文等等）和更加安全

encodeURI() 对 URI 进行编码。
decodeURI() 对 URI 进行解码。

var str1 = "http://www.baidu.com?wd=传智播客";      // 一般情况下，直接传这种不安全，很容易被别人知道信息
var encodeStr1 = encodeURI(str1);                   // 
console.log(encodeStr1);                            // http://www.baidu.com?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var decodeStr1 = decodeURI(encodeStr1);
console.log(decodeStr1);                            // http://www.baidu.com?wd=传智播客

---- encodeURIComponent() 对 URI 进行编码，编码的方式更加复杂一些；decodeURIComponent() 对 URI 进行解码

encodeURIComponent() 对 URI 进行编码，编码的方式更加复杂一些
decodeURIComponent() 对 URI 进行解码

var str1 = "http://www.baidu.com?wd=传智播客";      // 一般情况下，直接传这种不安全，很容易被别人知道信息
var encodeStr1 = encodeURIComponent(str1);          // 对字符串进行编码 
console.log(encodeStr1);                           // http%3A%2F%2Fwww.baidu.com%3Fwd%3D%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var decodeStr1 = decodeURIComponent(encodeStr1);   // 对字符串进行解码
console.log(decodeStr1);                           // http://www.baidu.com?wd=传智播客

---- parseInt() 将字符串转为整数

var str = "345";
var num = parseInt(str);
console.log(typeof(num)); // number
console.log(num + 1); // 346

---- parseFloat() 将字符串转为浮点数。

---- isNaN() 检查一个值是否为 NaN

Nan == 比较压根比不了，只能使用这个方法

---- eval()：将字符串转出JS代码执行

var str = "alert('hello world')";
eval(str);     // 将字符串当作代码执行

在这里插入图片描述

11 JS自定义类、自定义对象

注意类和对象的不同啊哈哈哈

（1）自定义类（ES6 引入了 class 关键字）

// 定义类
class Person {
    // 定义构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // 定义方法
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

// 创建对象
var person1 = new Person("Alice", 25);
person1.sayHello(); // 输出: Hello, my name is Alice

（2）自定义对象（JSON对象其实就是指这个JS对象）

注意这是对象，下面这种有点像java中的匿名内部类

定义格式：
调用方式：

// 自定义对象
var user = {
    name: '张三',
    age: 18,
    gender: '男',

    eat() {
        alert('吃饭');
    }
};

// 输出属性
document.write(user.name + '<br>' + user.age + '<br>' + user.gender + '<br>');

// 显式调用 eat 方法
// user.eat(); // 如果需要调用 eat 方法，取消注释

二、BOM对象

概念: Browser Obiect Model浏览器对象模型，允许JavaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。
组成：
- Window: 浏览器窗口对象
- Navigator: 浏览器对象（开发用不到）
  这个对象里面记录了一些浏览器的版本信息这些东西，我们开发压根用不到
- Screen: 屏幕对象（开发用不到）
  这个对象可以调整屏幕的色彩、亮度这些。开发中我们不会使用这个，电脑操作系统都能调，你浏览器调算什么对吧
- History: 历史记录对象
- Location: 地址栏对象

1 Window: 浏览器窗口对象

在这里插入图片描述

在 JavaScript 中，Window 对象是浏览器环境中的全局对象，代表了浏览器窗口或标签页（浏览器每一个tab页就是一个Window窗口对象）。它是 JavaScript 的顶级对象，所有全局变量和函数都是 Window 对象的属性或方法。
在浏览器中，Window 对象是全局对象，所有在全局作用域中定义的变量和函数都会成为 Window 对象的属性。

介绍: 浏览器窗口对象。
获取: 直接使用 window，其中 window. 可以省略。
我们写JS中所有东西默认都是window的属性或者方法，一般我们习惯不写window. 所以就经常忽略这个
全局对象:
在浏览器中，Window 对象是全局对象，所有在全局作用域中定义的变量和函数都会成为 Window 对象的属性。
var x = 10;
console.log(window.x); // 输出: 10
这段代码中变量x , console都是Window 对象的属性
Window 对象是 JavaScript 的顶级对象，document、location、navigator、console 等对象都是 Window 对象的属性。
属性：
- window.document 返回当前窗口的 Document 对象（DOM 树的根节点）
- window.console 返回当前窗口的控制台对象
- window.location 返回当前窗口的 Location 对象（URL 信息）
- window.navigator 返回当前窗口的 Navigator 对象（浏览器信息）
- window.screen 返回当前窗口的 Screen 对象（屏幕信息）
- window.history 返回当前窗口的 History 对象（浏览历史）
方法
- window.alert() 显示一个警告框
- window.confirm() 显示一个确认框，返回用户的选择（true 或 false）
- window.prompt() 显示一个提示框，返回用户输入的字符串
- window.open() 打开一个新窗口或标签页
- window.close() 关闭当前窗口
- window.setTimeout() 在指定的毫秒数后执行一次函数
- window.setInterval() 每隔指定的毫秒数重复执行一次函数
- window.clearTimeout() 取消由 setTimeout() 设置的定时器
- window.clearInterval() 取消由 setInterval() 设置的定时器

这里属性和方法很多，这里我们只演示几个常见的，具体的详细的还是要具体学到单独的部分再详细介绍

（1）Window_弹出方法

---- window.alert() 显示一个警告框

---- window.confirm() 显示一个确认框，返回用户的选择（true 或 false）

如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，则方法返回false

---- window.prompt() 显示一个提示框，返回用户输入的字符串

返回值:获取用户输入的值

alert("这是一个警告框");
var isConfirmed = confirm("你确定吗？");
console.log(isConfirmed); // true 或 false
var userInput = prompt("请输入你的名字");
console.log(userInput); // 用户输入的字符串

（2）Window_打开关闭方法

---- window.open(url) 打开一个新窗口或标签页，并返回打开的窗口的window对象

---- window.close() 关闭当前窗口

注意：这个关闭方法是那个window对象调用关的就是谁。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    
</head>
<body>
    <input id = "openBtn" type="button" value="打开窗口">      <!-- 定义一个按钮，用于打开新窗口 -->
    <input id = "closeBtn" type="button" value="关闭窗口">     <!-- 定义一个按钮，用于关闭新窗口 -->
 
    <script>                                         // 使用script标签定义JavaScript代码

        var openBtn = document.getElementById('openBtn');      // 获取打开窗口按钮
        var closeBtn = document.getElementById('closeBtn');    // 获取关闭窗口按钮

        var newwindow = null;                                 // 定义一个变量，用于存放新打开的窗口
        openBtn.onclick = function(){                         // 绑定打开窗口按钮的点击事件
            newwindow = open('http://www.baidu.com');                     // 打开百度首页
        }

        closeBtn.onclick = function(){
            newwindow.close();                                // 关闭新打开的窗口
        }

    </script>

</body>
</html>

在这里插入图片描述

（3）Window_定时器方法

一次性计时器

---- window.setTimeout(要执行的函数，毫秒值) 在指定的毫秒数后执行一次函数（一次性计时器），返回一个计时器id唯一标识

---- window.clearTimeout() 取消由 setTimeout() 设置的定时器

// setTimeout() 一次性定时器

setTimeout(function(){
    console.log('1秒后执行1次');
}, 1000);

也可以直接传函数，后面继续加的参数可以当做函数参数

function add(a, b){
    console.log(a+b);
}

setTimeout(add, 2000, 5, 11);      // 16

取消计时器：例如我设置了一个2分钟后执行的计数器，我们可以通过计时器的id值取消计时器

function add(a, b){
    console.log(a+b);
}

var id = setTimeout(add, 100000, 5, 11); 


// 根据计时器的id来清除计时器
clearTimeout(id);

周期性计时器

---- window.setInterval(要执行的函数，毫秒值) 每隔指定的毫秒数重复执行一次函数（周期性计时器）,会返回一个计时器id唯一标识

---- window.clearInterval() 取消由 setInterval() 设置的定时器

// setInterval() 重复性定时器
var i = 0;
setInterval(function(){
    i++;
    console.log('定时器执行了'+i+'次');
},1000)

/* 
定时器执行了1次
定时器执行了2次
定时器执行了3次
... 
*/

计时器取消

// setInterval() 重复性定时器
var i = 0;
var id = setInterval(function(){
    i++;
    console.log('定时器执行了'+i+'次');
},5000)

// clearInterval() 清除定时器
clearInterval(id);

案例：轮播图（待定！！！！！！！）

参考视频

（4）Window_属性

---- document 返回当前窗口的 Document 对象（DOM 树的根节点）

---- console 返回当前窗口的控制台对象

---- location 返回当前窗口的 Location 对象（URL 信息）

---- navigator 返回当前窗口的 Navigator 对象（浏览器信息）

---- screen 返回当前窗口的 Screen 对象（屏幕信息）

---- history 返回当前窗口的 History 对象（浏览历史）

具体的属性使用还得看具体的使用

2 Location: 地址栏对象

(1)基本属性和方法使用

在 JavaScript 中，Location 对象是 Window 对象的一个属性，用于表示当前文档的 URL 信息，并提供了操作浏览器地址栏的方法。通过 Location 对象，可以获取或修改当前页面的 URL，并实现页面的跳转和刷新。

创建（获取）：
- location 或者 window.location
属性
- href 获取或设置完整的 URL
- protocol 获取或设置 URL 的协议（如 http: 或 https:）
- host 获取或设置 URL 的主机名和端口（如 www.example.com:8080）
- hostname 获取或设置 URL 的主机名（如 www.example.com）
- port 获取或设置 URL 的端口号
方法：
- reload() 重新加载当前页面（刷新页面）
- assign(url) 加载指定的 URL（会在浏览器历史中记录）、页面跳转
- replace(url) 加载指定的 URL（不会在浏览器历史中记录）、页面跳转

获取当前url

let currentUrl = location.href;
console.log("当前 URL: " + currentUrl);

页面跳转
注意这里直接location.href = “https://www.example.com/new-page”;修改url也是会触发页面跳转的

// 修改url:跳转到新页面
location.href = "https://www.example.com/new-page";

// 或者使用 assign()
location.assign("https://www.example.com/new-page");

// 或者替换当前页面（不记录历史）
location.replace("https://www.example.com/new-page");

(2)案例：自动跳转首页（待定！！！！！）

参考视频

3 History: 历史记录对象

参考视频
在 JavaScript 中，History 对象是 Window 对象的一个属性，用于操作浏览器的会话历史记录（即用户访问过的页面列表）。通过 History 对象，可以实现页面的前进、后退、跳转等功能，而无需重新加载页面

创建（获取）：
- history 或者 window.history
属性：
- length 返回历史记录中的页面数量
方法：
- back() 导航到历史记录中的上一个页面
- forward() 导航到历史记录中的下一个页面
- go(n) 导航到历史记录中的第 n 个页面（正数表示前进，负数表示后退）
  go(1): 前进一个界面，等价于forward()
  go(-1): 后退一个界面，等价于back()
  其实这几个前进、回退功能，浏览器都自带了，不用我们写，这里只是来介绍一下

这个前进和后退功能，其实很多。比如说小说见面的上一页和下一页就可以使用这个功能演示，两个按钮分别绑定前进和后退

注意：这个history只能控制当前这个tab页的浏览记录，不是右上角那个浏览器的历史记录

三、DOM对象

概念: Document Object Model，文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
其实就是具体的html封装成了一个对象（一颗DOM树）
将标记语言的各个组成部分封装为对应的对象:
- Document: 整个文档对象
- Element: 元素对象
- Attribute: 属性对象
- Text: 文本对象
- Comment: 注释对象
  DOM对象主要就是上面的5种，我们开发中用Document: 整个文档对象、Element: 元素对象这两个就足以应对基本全部清空，下面我们也主要是讲这两种
JavaScript 通过DOM，就能够对HTML进行操作
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML元素

1 Document对象的属性和方法

（1）获取Element元素对象

通过 document 对象访问

---- document.getElementById(id属性值) 通过 id 属性值获取元素节点,返回单个Element对象

---- document.getElementsByClassName(class 属性值) 通过 class 属性值获取元素节点数组, 返回Element对象数组

---- document.getElementsByTagName(标签名) 通过标签名获取元素节点数组, 返回Element对象数组

---- document.getElementsByName(name属性值) 根据name属性值获取，返回Element对象数组

注：上述的返回值不是前面讲到Array数组，而是一种类数组结构。其中并没有forEach方法，遍历我们使用普通的for遍历需要。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    
</head>
<body>
    <img id = "h1" src="1.png">   <br><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">游戏
</body>
<script>
    // 1 获取Element元素对象
    // 1.1 通过id属性获取元素对象
    var img = document.getElementById("h1");

    // 1.2 通过标签名获取元素对象 - div
    var divs = document.getElementsByTagName("div");      // 注意返回的是一个集合，是一个类数组对象，没有forEach方法, 但是可以通过for循环遍历
    for (var i = 0; i < divs.length; i++) {
        console.log(divs[i].innerHTML);        // 传智教育  黑马程序员
    }

    // 1.3 通过类名获取元素对象
    var cls = document.getElementsByClassName("cls");
    for (var i = 0; i < cls.length; i++) {
        console.log(cls[i].innerHTML);        // 传智教育  黑马程序员
    }

    // 1.4 通过name属性获取元素对象
    var hobby = document.getElementsByName("hobby");
</script>

</html>

（2）创建其他DOM对象并插入到指定位置

创建其他DOM对象

---- createElement() 创建一个新的元素节点（Element）对象

---- createAttribute(name) 创建一个新的属性节点（Attribute）对象

---- createTextNode() 创建一个新的文本节点（Text）对象

---- createComment() 创建一个新的注释节点（Comment）对象

将创建的DOM对象插入html指定位置处（其实下面两个是Node对象里面通用方法，后面会讲）

---- appendChild() 将节点添加到指定元素的子节点列表末尾

---- insertBefore() 将节点插入到指定元素的前面

只有一个 createElement() 创建一个新的元素节点（Element）对象用到的概率大一点，这里我们就简单演示这个（其余的要具体学习还是要好好的学习前端去）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>
<body>
    <div id="div1">传智教育</div>
    <div id="div2">黑马程序员</div>
</body>


<script>
    let newElement1 = document.createElement("div"); // 创建新元素
    newElement1.textContent = "新的元素:我应该在body末尾";
    document.body.appendChild(newElement1); // 添加到 body 末尾


    let newElement2 = document.createElement("div"); // 创建新元素
    newElement2.textContent = "新的元素:我应该在div2（黑马程序员）前面";
    let div2 = document.getElementById("div2");
    document.body.insertBefore(newElement2, div2); // 插入到 div2 前面
</script>

</html>

在这里插入图片描述

2 Element对象的属性和方法

属性

---- innerHTML属性获取或设置元素的 HTML 内容

参考视频

功能:
- 获取或设置元素的 HTML 内容，包括所有子元素和标签
- 返回的字符串包含 HTML 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>
<body>

    <div id="myElement">
        <p>Hello, <strong>world</strong>!</p>
    </div>
    
</body>


<script>
    let element = document.getElementById("myElement");

    // 获取 innerHTML
    console.log(element.innerHTML); // 输出: <p>Hello, <strong>world</strong>!</p>

    // 设置 innerHTML
    element.innerHTML = "<p>New content</p>";
</script>

</html>

---- textContent 获取或设置元素的文本内容（忽略 HTML 标签）

功能:
- 获取或设置元素的文本内容，忽略所有 HTML 标签
- 返回的字符串不包含 HTML 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>
<body>

    <div id="myElement">
        <p>Hello, <strong>world</strong>!</p>
    </div>
    
</body>


<script>
    let element = document.getElementById("myElement");

    // 获取 textContent
    console.log(element.textContent); // 输出: Hello, world!

    // 设置 textContent
    element.textContent = "New content";
</script>

</html>

---- style 返回元素的样式对象，用于操作内联样式（可以用这个修改css里面具体信息）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>

    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            color: white;
            text-align: center;
            line-height: 200px;
            font-size: 20px;
        }

    </style>

</head>
<body>

    <div id="box">Hello, World!</div>
    <button id="changeColor">Change Color</button>
    <button id="changeSize">Change Size</button>
    <button id="resetStyle">Reset Style</button>
    
</body>
<script>
    // 获取元素
    const box = document.getElementById('box');
    const changeColorButton = document.getElementById('changeColor');
    const changeSizeButton = document.getElementById('changeSize');
    const resetStyleButton = document.getElementById('resetStyle');

    // 点击按钮改变背景颜色
    changeColorButton.addEventListener('click', () => {
    box.style.backgroundColor = 'tomato'; // 修改背景颜色
    box.style.color = 'black'; // 修改文字颜色
    });

    // 点击按钮改变大小
    changeSizeButton.addEventListener('click', () => {
    box.style.width = '300px'; // 修改宽度
    box.style.height = '300px'; // 修改高度
    box.style.lineHeight = '300px'; // 修改行高以保持文字居中
    });

    // 点击按钮重置样式
    resetStyleButton.addEventListener('click', () => {
    box.style.backgroundColor = 'lightblue'; // 重置背景颜色
    box.style.color = 'white'; // 重置文字颜色
    box.style.width = '200px'; // 重置宽度
    box.style.height = '200px'; // 重置高度
    box.style.lineHeight = '200px'; // 重置行高
    });
</script>

</html>

结果
- 初始状态：
  #box 的背景颜色为 lightblue，文字颜色为 white，宽度和高度为 200px。
- 点击 “Change Color” 按钮：
  #box 的背景颜色变为 tomato，文字颜色变为 black。
- 点击 “Change Size” 按钮：
  #box 的宽度和高度变为 300px，行高也相应调整以保持文字居中。
- 点击 “Reset Style” 按钮：
  #box 的样式恢复到初始状态。
详细解释
- style 属性：
  style 是一个对象，表示元素的内联样式。
  通过 style，你可以直接修改元素的样式属性，例如 backgroundColor、width、height 等。
- 修改样式：
  使用 element.style.property = value 的方式修改样式。
  注意：CSS 属性名中的连字符（如 background-color）需要转换为驼峰命名（如 backgroundColor）。

方法

---- getAttribute()：获取属性值

功能: 获取元素的指定属性值。
语法: element.getAttribute(attributeName)
返回值: 属性值（字符串），如果属性不存在则返回 null。

<body>

    <div id="myElement" class="example" data-custom="12345">Hello, world!</div>
    
</body>
<script>
    let element = document.getElementById("myElement");

    // 获取 id 属性
    let id = element.getAttribute("id");
    console.log(id); // 输出: myElement

    // 获取 class 属性
    let className = element.getAttribute("class");
    console.log(className); // 输出: example

    // 获取自定义属性
    let customData = element.getAttribute("data-custom");
    console.log(customData); // 输出: 12345

    // 获取不存在的属性
    let nonExistent = element.getAttribute("nonexistent");
    console.log(nonExistent); // 输出: null
</script>

---- setAttribute(): 设置属性值

功能: 设置元素的指定属性值。如果属性已存在，则更新其值；如果属性不存在，则创建新属性。
语法: element.setAttribute(attributeName, value)

<body>
    <div id="myElement">Hello, world!</div>
</body>
<script>
    let element = document.getElementById("myElement");

    // 设置 class 属性
    element.setAttribute("class", "newClass");
    console.log(element.getAttribute("class")); // 输出: newClass

    // 设置自定义属性
    element.setAttribute("data-custom", "67890");
    console.log(element.getAttribute("data-custom")); // 输出: 67890

    // 设置不存在的属性
    element.setAttribute("newAttribute", "value");
    console.log(element.getAttribute("newAttribute")); // 输出: value
</script>

---- removeAttribute(): 删除属性

功能: 删除元素的指定属性。
语法: element.removeAttribute(attributeName)

<body>

    <div id="myElement" class="example" data-custom="12345">Hello, world!</div>
    
</body>


<script>
    let element = document.getElementById("myElement");

    // 删除 class 属性
    element.removeAttribute("class");
    console.log(element.getAttribute("class")); // 输出: null

    // 删除自定义属性
    element.removeAttribute("data-custom");
    console.log(element.getAttribute("data-custom")); // 输出: null

    // 删除不存在的属性
    element.removeAttribute("nonexistent"); // 不会报错
</script>

---- querySelector(selector) 返回元素内匹配指定选择器的第一个子元素

querySelector 方法返回元素内匹配指定选择器的第一个子元素。如果没有匹配的元素，则返回 null
selector：css选择器(就是前面学的那个css选择器)

<div id="container">
  <p class="text">Paragraph 1</p>
  <p class="text">Paragraph 2</p>
  <p class="text">Paragraph 3</p>
</div>

<script>
  // 获取容器元素
  const container = document.getElementById('container');

  // 查找第一个匹配的子元素
  const firstParagraph = container.querySelector('.text');
  console.log(firstParagraph.textContent); // 输出: "Paragraph 1"
</script>

---- querySelectorAll(selector) 返回元素内匹配指定选择器的所有子元素（NodeList）

querySelectorAll 方法返回元素内匹配指定选择器的所有子元素，结果是一个 NodeList（类数组对象）。如果没有匹配的元素，则返回空的 NodeList。
- selector：css选择器(就是前面学的那个css选择器)

<body>

    <div id="container">
        <p class="text">Paragraph 1</p>
        <p class="text">Paragraph 2</p>
        <p class="text">Paragraph 3</p>
    </div>
    
</body>
<script>
// 获取容器元素
const container = document.getElementById('container');

// 查找所有匹配的子元素
const allParagraphs = container.querySelectorAll('.text');
console.log(allParagraphs); // 输出: NodeList(3) [p.text, p.text, p.text]

// 遍历 NodeList
allParagraphs.forEach((e) => {
    console.log(e.textContent);     // 输出: Paragraph 1  Paragraph 2  Paragraph 3
});
</script>

3 Node对象的属性和方法

Node对象其实就是节点，前面讲的 Document: 整个文档对象、Element: 元素对象、Attribute: 属性对象、Text: 文本对象、Comment: 注释对象这些都是Node对象，所以这里面有一些通用的属性和方法是大家都能用的

我们主要学习其中的通用CRUD方法

（1）属性

---- parentNode: 返回父节点

<body>

    <div id="container">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
    </div>
    
</body>
<script>
    // 获取第一个 <p> 元素
    const firstParagraph = document.querySelector('#container p');

    // 获取第一个 <p> 元素的父节点
    const parent = firstParagraph.parentNode;

    // 输出父节点的信息
    console.log(parent); // 输出: <div id="container">...</div>
    console.log(parent.id); // 输出: "container"

    // 修改父节点的样式
    parent.style.backgroundColor = 'lightblue';

    // 在父节点末尾添加一个新元素
    const newParagraph = document.createElement('p');
    newParagraph.textContent = 'New Paragraph';
    parent.appendChild(newParagraph);
</script>

在这里插入图片描述

（2）方法

---- appendChild(node): 将一个节点添加到子节点列表的末尾

<div id="container">
  <p>Paragraph 1</p>
</div>

<script>
  // 获取父节点
  const container = document.getElementById('container');

  // 创建一个新的段落元素
  const newParagraph = document.createElement('p');
  newParagraph.textContent = 'Paragraph 2';

  // 将新段落添加到容器的末尾
  container.appendChild(newParagraph);
</script>

结果：

<div id="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

---- removeChild(node): 从子节点列表中移除一个节点

<div id="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

<script>
  // 获取父节点
  const container = document.getElementById('container');

  // 获取要移除的子节点
  const paragraphToRemove = container.querySelector('p');

  // 移除子节点
  container.removeChild(paragraphToRemove);
</script>

结果：

<div id="container">
  <p>Paragraph 2</p>
</div>

---- replaceChild(newNode, oldNode): 替换一个子节点

<div id="container">
  <p>Old Paragraph</p>
</div>

<script>
  // 获取父节点
  const container = document.getElementById('container');

  // 创建一个新的段落元素
  const newParagraph = document.createElement('p');
  newParagraph.textContent = 'New Paragraph';

  // 获取要被替换的子节点
  const oldParagraph = container.querySelector('p');

  // 替换子节点
  container.replaceChild(newParagraph, oldParagraph);
</script>

结果：

<div id="container">
  <p>New Paragraph</p>
</div>

---- insertBefore(newNode, referenceNode): 在指定节点前插入一个新节点

<div id="container">
  <p>Paragraph 1</p>
  <p>Paragraph 3</p>
</div>

<script>
  // 获取父节点
  const container = document.getElementById('container');

  // 创建一个新的段落元素
  const newParagraph = document.createElement('p');
  newParagraph.textContent = 'Paragraph 2';

  // 获取参考节点（在哪个节点前插入）
  const referenceNode = container.querySelector('p:nth-child(2)');

  // 在参考节点前插入新节点
  container.insertBefore(newParagraph, referenceNode);
</script>

结果：

<div id="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

‘p:nth-child(2)’ 是一个 CSS 选择器，用于选择作为其父元素的第二个子元素的 <p> 元素。它的含义可以分为两部分：
（1）p: 表示选择 <p> 元素。
（2）:nth-child(2): 表示选择其父元素的第二个子元素。
css选择器有很多种，又看到一种新的，没办法，只能查文档

4 DOM_进行CSS样式控制

（1）方式1：使用Element对象的style属性（前面讲Element对象演示过）

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>

    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            color: white;
            text-align: center;
            line-height: 200px;
            font-size: 20px;
        }

    </style>

</head>
<body>

    <div id="box">Hello, World!</div>
    <button id="changeColor">Change Color</button>
    <button id="changeSize">Change Size</button>
    <button id="resetStyle">Reset Style</button>
    
</body>
<script>
    // 获取元素
    const box = document.getElementById('box');
    const changeColorButton = document.getElementById('changeColor');
    const changeSizeButton = document.getElementById('changeSize');
    const resetStyleButton = document.getElementById('resetStyle');

    // 点击按钮改变背景颜色
    changeColorButton.addEventListener('click', () => {
    box.style.backgroundColor = 'tomato'; // 修改背景颜色
    box.style.color = 'black'; // 修改文字颜色
    });

    // 点击按钮改变大小
    changeSizeButton.addEventListener('click', () => {
    box.style.width = '300px'; // 修改宽度
    box.style.height = '300px'; // 修改高度
    box.style.lineHeight = '300px'; // 修改行高以保持文字居中
    });

    // 点击按钮重置样式
    resetStyleButton.addEventListener('click', () => {
    box.style.backgroundColor = 'lightblue'; // 重置背景颜色
    box.style.color = 'white'; // 重置文字颜色
    box.style.width = '200px'; // 重置宽度
    box.style.height = '200px'; // 重置高度
    box.style.lineHeight = '200px'; // 重置行高
    });
</script>

</html>

结果
- 初始状态：
  #box 的背景颜色为 lightblue，文字颜色为 white，宽度和高度为 200px。
- 点击 “Change Color” 按钮：
  #box 的背景颜色变为 tomato，文字颜色变为 black。
- 点击 “Change Size” 按钮：
  #box 的宽度和高度变为 300px，行高也相应调整以保持文字居中。
- 点击 “Reset Style” 按钮：
  #box 的样式恢复到初始状态。
详细解释
- style 属性：
  style 是一个对象，表示元素的内联样式。
  通过 style，你可以直接修改元素的样式属性，例如 backgroundColor、width、height 等。
- 修改样式：
  使用 element.style.property = value 的方式修改样式。
  注意：CSS 属性名中的连字符（如 background-color）需要转换为驼峰命名（如 backgroundColor）。

（2）方式2：使用Element对象的className属性选择类选择器样式

提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>

    <style>
        .box-style {
            width: 200px;                         /* 宽度 */
            height: 200px;                        /* 高度 */
            background-color: lightblue;        /* 背景颜色: 淡蓝色 */  
            color: white;                       /* 字体颜色: 白色 */
            text-align: center;                   /* 文本居中 */
            line-height: 200px;                   /* 行高 */
            font-size: 20px;                      /* 字体大小 */
        }

        .highlight {
            background-color: tomato;        /* 背景颜色: 番茄色 */
            border: 5px solid black;         /* 边框: 5px 黑色实线 */
            border-radius: 20px;               /* 边框圆角: 20px */
        }

        .large {
            width: 300px;                    /* 宽度: 300px */
            height: 300px;                   /* 高度: 300px */
            line-height: 300px;              /* 行高: 300px */
        }

    </style>

</head>
<body>

    <div id="box" class="box-style">Hello, World!</div>
    <button id="addClass">Add Class</button>
    <button id="removeClass">Remove Class</button>
    <button id="toggleClass">Toggle Class</button>
    
</body>
<script>
    // 获取元素
    const box = document.getElementById('box');
    const addClassButton = document.getElementById('addClass');
    const removeClassButton = document.getElementById('removeClass');
    const toggleClassButton = document.getElementById('toggleClass');

    // 点击按钮添加类
    addClassButton.addEventListener('click', () => {
    box.className = 'box-style highlight large'; // 替换类名
    });

    // 点击按钮移除类
    removeClassButton.addEventListener('click', () => {
    box.className = 'box-style'; // 重置为初始类名
    });

    // 点击按钮切换类
    toggleClassButton.addEventListener('click', () => {
    if (box.className.includes('highlight')) {
        box.className = 'box-style'; // 如果包含 highlight 类，则移除
    } else {
        box.className = 'box-style highlight'; // 否则添加 highlight 类
    }
    });
</script>

</html>

结果：
- 初始状态：
  #box 的类名为 box-style，显示为浅蓝色背景、白色文字。
- 点击 “Add Class” 按钮：
  #box 的类名变为 box-style highlight large，显示为红色背景、黑色边框、圆角，并且尺寸变大。
- 点击 “Remove Class” 按钮：
  #box 的类名恢复为 box-style，样式回到初始状态。
- 点击 “Toggle Class” 按钮：
  如果 #box 当前有 highlight 类，则移除该类；否则添加该类。

是的，在 CSS 中，后面的样式规则会覆盖前面的样式规则，前提是它们的优先级相同。这种覆盖行为是基于 CSS 的层叠规则（Cascading Rules）。

覆盖规则

相同属性的覆盖：
- 如果多个类定义了相同的属性（例如 background-color、width 等），后面的类会覆盖前面的类。
- 例如：
  - .box-style 定义了 background-color: lightblue;。
  - .highlight 定义了 background-color: tomato;。
  - 最终生效的是 .highlight 的 background-color: tomato;，因为 .highlight 在 .box-style 之后。
不同属性的合并：
- 如果多个类定义了不同的属性，这些属性会合并生效。
- 例如：
  - .box-style 定义了 font-size: 20px;。
  - .highlight 定义了 border: 5px solid black;。
  - .large 定义了 width: 300px;。
  - 最终生效的样式是这些属性的合并结果。

5 JS事件监听

在 JavaScript 中，事件监听是一种机制，用于在特定事件发生时执行指定的代码。通过事件监听，你可以让网页对用户的操作（如点击、鼠标移动、键盘输入等）或其他事件（如页面加载、网络请求完成等）做出响应。

事件: HTML事件是发生在HTML元素上的“事情”。比如
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听: JavaScript可以在事件被侦测到时执行代码

事件监听的核心方法是 addEventListener，它允许你为 DOM 元素绑定事件处理函数。

（1）addEventListener事件监听

addEventListener 方法
addEventListener 是用于为元素添加事件监听器的标准方法。
语法：
- element.addEventListener(event, callback, options);
  - event: 事件类型（如 “click”、“mouseover”、“keydown” 等）。
  - callback: 事件触发时执行的回调函数。
  - options: 可选参数，用于指定事件监听器的行为（如 { once: true } 表示只触发一次）。
以下是一些常见的事件类型：
- click 鼠标点击元素时触发。
- mouseover 鼠标移动到元素上方时触发。
- mouseout 鼠标移出元素时触发。
- keydown 按下键盘按键时触发。
- keyup 松开键盘按键时触发。
- focus 元素获得焦点时触发。
- blur 元素失去焦点时触发。
- submit 表单提交时触发。
- load 资源（如图片、脚本）加载完成时触发。
- DOMContentLoaded HTML 文档加载完成时触发。

<button id="myButton">Change Color</button>
<div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div>

<script>
  const button = document.getElementById('myButton');
  const div = document.getElementById('myDiv');

  // 添加点击事件监听器
  button.addEventListener('click', () => {
    div.style.backgroundColor = 'tomato';
  });
</script>

点击按钮后，#myDiv 的背景颜色会变为 tomato。
在这里插入图片描述

（2）事件监听简写方式

方式一：通过HTML标签中事件属性进行绑定

在这里插入图片描述

方式二：通过Element节点对象的属性

在这里插入图片描述

<body>

    <button id="myButton">Change Color</button>
    <div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div>
    
</body>
<script>
    const button = document.getElementById('myButton');
    const div = document.getElementById('myDiv');
  
    // 添加点击事件监听器
    button.onclick = function(){
        div.style.backgroundColor = 'tomato';
    }
</script>

练习

1 案例1：点亮灯泡（待定！！！！！！！）

参考视频

需求：

2 案例2：动态表格操作（待定！！！！！！！）

参考视频
 参考视频
 参考视频：使用innerHTML属性改进代码

原文地址：https://blog.csdn.net/smalltorch/article/details/145190908

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：抽象设计如何提升用户体验？
下一篇：服务器机房迁移，centos系统root无法登录，也无法联网等问题

Linux系统下安装配置 Nginx 超详细图文教程_linux安装nginx
1、修改配置端口和默认访问页面#找到nginx的配置文件，编辑#这里放置的是nginx默认显示的页面。
阅读更多2025-01-21
JWT（JSON Web Token）
JWT是一个开放标准（RFC 7519），它定义了一种紧凑且自包含的方式，用于将信息作为JSON对象在各方之间安全地传输。JWT通常用于在Web应用和API安全中，作为访问令牌（access toke
阅读更多2025-01-21
WGAN - 瓦萨斯坦生成对抗网络
WGAN的提出旨在通过引入Wasserstein距离来解决传统GAN中的上述问题。Wasserstein距离是一种度量两个分布之间距离的方法，它可以有效地避免传统GAN中存在的梯度消失问题，并且提供更
阅读更多2025-01-21
Web3 游戏周报（1.13 - 1.19）
回顾上周的区块链游戏概况，查看与 ABGA 最新发布的数据报告。
阅读更多2025-01-21
鸿蒙开发中的骨架图：提升用户体验的关键一环
骨架图，简单来说，是一种在数据尚未加载完成时，展示页面大致结构的占位图形。它就像一个精心搭建的建筑蓝图🏗️，以简洁的线条和几何形状勾勒出页面的主要元素，如标题栏、列表项、图片区域等。当用户打开应用，首
阅读更多2025-01-21
AI 在人形机器人发展中的作用
本文主要探讨了 AI 在人形机器人发展中的关键作用。通过对相关技术和应用案例的分析，阐述了 AI 如何赋予人形机器人智能感知、学习决策、自然语言处理及运动控制等能力，推动人形机器人在多领域的应用和产业
阅读更多2025-01-21
Ubuntu 22.04 能识别笔记本的键盘，但是无法识别外接键盘
【代码】Ubuntu22.04能识别笔记本的键盘，但是无法识别外接键盘。
阅读更多2025-01-21
cmake 可使用的构建系统
cmake可使用的构建系统。
阅读更多2025-01-21
# 03_docker容器化技术精讲（三）
21-dockerfile-案例-自定义centos21-dockerfile-案例-部署springboot项目22-dockercompose-概述23-dockercompose-安装使用24-
阅读更多2025-01-21
从零开始：使用 Brain.js 创建你的第一个神经网络（一）
本文是Brain.js系列的基础篇，主要面向零基础或有一定开发经验的读者，讲解如何使用Brain.js快速搭建一个简单的二分类模型。文章详细介绍了Brain.js的背景与特点、项目初始化、依赖安装、训
阅读更多2025-01-21

3 前端（中）：JavaScript

文章目录

前言：JavaScript简介

一、ECMAscript（JavaScript基本语法）

1 JavaScript与html结合方式（快速入门）

2 基本知识

（1）JavaScript注释（和Java注释一样）

（2）JS输出语句

使用 window.alert()写入警告框

使用 document.write()写入 HTML界面 输出

使用 console.log()写入浏览器控制台

（3）{ }代码块

3 变量

（0）函数作用域 块级作用域 全局作用域

（1）var关键字：var 变量名 = 初始化值;（当成python变量来理解）

（2）let关键字：let 变量名 = 初始化值;（当成java变量来理解） ，ES6才引入

（3）var和let声明变量的区别？

4 常量 const

5 数据类型（原始数据类型、引用数据类型）

（1）原始数据类型(基本数据类型)

number: 数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)

string: 字符串。字符串 “abc”，“a”，‘abc’

boolean: true和false

null: 一个对象为空的占位符

undefined: 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

（2）引用数据类型(对象)

（3）typeof(): 查看数据类型（类似python的type()函数）

6 （字符串方法）JS中的原始数据类型string的属性和常用方法

（1）length属性

（2）charAt(索引位置)方法：返回指定位置的字符

（3）indexOf(字符串)方法：返回字符串中指定值的第一个出现的位置

（4）trim()方法：去除字符串两端的空格

（5）substring(开始位置, 结束位置)方法：返回指定位置的字符

7 运算符

（1）一元运算符 ++, - - , +（正号，不是加）-（负号）

（2）算数运算符 + ，- ，*，/ ，%（取模）等等

（3）赋值运算符 = ，+=，-=, *= 等等

（4）比较运算符 >, < , >=,<=, ==(宽松等于)，===（严格等于），!=(宽松不等于), !==(严格不等于)

（5）逻辑运算符 &&（与） ||（或） ！（非）

（6）三元运算符 ：条件 ? 表达式1 : 表达式2

（7） JavaScript运算符中的自动隐式转换功能

---- + ：加号与正号的区分（特性）及其各自特殊用法

---- boolean规则 + 自动转换

（8）总结

8 流程控制语句

（1）if…else…

（2）switch语句

（3）while 循环

（4）for循环

（5）break，continue，return 语句

（6）练习：9x9乘法表 （待定！！！！！！！）

9 函数

（1）函数的定义方式一：常用

（2）函数的定义方式二：了解即可

（3）JS函数声明中的隐藏arguments数组

（4）JS函数中的一些注意事项（充分体现了JS是一门不严谨语言）

10 对象

（1）Array数组

基本定义

属性和方法

---- length属性

---- join(分隔符) 方法用于把数组中的所有元素按照指定分隔符拼接一个字符串

---- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度

---- pop() 方法用于删除并返回数组的最后一个元素

---- shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

---- splice(开始删除的索引位置，删几个) ：从数组中删除元素

Array数组的遍历

---- 遍历数组1: 普通for循环会遍历所有元素，包括空位

---- 遍历数组2: for…of循环会遍历所有元素，包括空位

---- 遍历数组3: forEach方法会跳过空位

（2）JSON对象

---- JSON（字符串）的创建

---- JSON的解析

JSON.parse(json字符串)：JSON字符串转JS对象()JS中的一个字面量对象了变成)

JSON.stringify(jsObject): JS对象转JSON字符串

（3）Date 日期对象

（4）Math 对象（静态，直接类名调用）

（5）RegExp 对象（正则表达式对象）

（6）Global对象：里面有一些全局方法

---- encodeURI() 对 URI 进行编码；decodeURI() 对 URI 进行解码

使用 document.write()写入 HTML界面输出

（0）函数作用域块级作用域全局作用域

（2）let关键字：let 变量名 = 初始化值;（当成java变量来理解），ES6才引入

number: 数字。整数/小数/NaN(not a number 一个不是数字的数字类型)

（5）逻辑运算符 &&（与） ||（或）！（非）

（6）三元运算符：条件 ? 表达式1 : 表达式2

（6）练习：9x9乘法表（待定！！！！！！！）

---- console 返回当前窗口的控制台对象

---- innerHTML属性获取或设置元素的 HTML 内容