禁止摆烂-才浅

JavaScript - 基础+WebAPI（笔记）

前言：

求关注
本篇文章主要记录以下几部分：
- 基础：
  - 输入输出语法；
  - 数据类型；
  - 运算符；
  - 流程控制 - 分支语句；
  - 流程控制 - 循环语句；
  - 数组 - 基础；
  - 函数 - 基础；
  - 对象 - 基础；
- Web API：
  - DOM；
  - DOM事件基础（事件监听、常用事件、事件对象）；
  - DOM事件进阶（事件流、事件委托）；
  - 日期对象；
  - 节点操作；
  - M端事件；
  - JS插件；
  - window对象；
  - 本地存储；
  - 正则表达式；

以下部分请移步JavaScript - 进阶+高级（笔记）：
- 进阶：
  - 作用域；
  - 函数进阶（函数提升、函数参数、箭头函数）；
  - 解构赋值；
  - 对象进阶（构造函数、实例成员、静态成员）；
  - 内置构造函数（Object、Array、String、Number）；
  - 编程思想；
  - 构造函数；
  - 原型
- 高级：
  - 深浅拷贝；
  - 异常处理；
  - this指向；
  - 性能优化（防抖、节流）；

壹、❗❗ JavaScript基础

HTML 表示网页的结构
CSS 表示网页的样式
JavaScript 表示网页的行为
浏览器内核 = 渲染引擎 + JS引擎
JavaScript的组成
- ECMAScript — JS的基础语法
- Web APIs
  - DOM — 操作文档流的属性和方法（文档对象模型）
    - 是HTML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式，可以在程序中对该结构进行访问，从而改变文档的结构、样式和内容。DOM将文档解析为一个由节点和对象（包含属性和方法）组成的结构集合。简言之，它会将 web页面和程序连接起来。进而操作网页的内容，实现各种功能和部分特效
  - BOM — 操作浏览器的属性和方法（浏览器对象模型）
JS的本质：通过 JS 的语法，让浏览器发生变换，让文档发生变化。

一、JavaScript书写位置

行内 JavaScript
内部 JavaScript
外部 JavaScript

二、输入输出语法

小括号里面只要 不是纯数字 和变量必须要用 引号包裹（单、双、反）

alert()			        ---  警示框
prompt()			---  浏览器弹出输出框，用户可以输入信息
console.log()			---  控制台输出
document.write()		---  在文档页面输出（识别标签）

代码展示：

alert('你好， js');
prompt('JavaScript 基础');
console.log('它~会魔法吧~');
document.write('javascript我来');

三、字面量、变量、常量

3.1 字面量

用来在计算机中描述事 / 物
[ ] ：数组字面量
{ } ：对象字面量
数字字面量：数字
字符字面量：字符串
布尔字面量：布尔值

3.2 变量

变量：用来 存储数据 的容器
变量的本质：内存里的一块空间，用来存储数据
变量必须 先声明 后使用
变量的初始化： 声明变量 并赋值
变量命名规则：变量名只能是 数字、大小写字母、美元符($)、下划线组成（⚠ 不能以数字开头）
⚠ 不能使用 name 作为变量名（name会将数字型转为字符型）
声明变量使用 let

代码展示：

// 声明变量

// 声明变量不赋值
let a   

// 变量的初始化  ---  声明变量并赋值
let age = 18	

// 声明多个变量（用逗号隔开）--- 不推荐
let a = 18, b = 'pink'   

// 更新变量
let age = 18
    age = 19
console.log(age)   // 19

// 用变量赋值
let myFood = '香蕉'
let youFood = myFood
console.log(youFood)	  // 香蕉

3.2.1 var 和 let 的区别

var
- 可以先使用再声明
- var声明过的变量可以重复声明
- 存在变量提升、没有块作用域等等。
let / const
- 必须 先声明 后使用
- 不能声明重复变量
- 不存在变量提升
- 使用了 let / const 声明的变量存在块作用域
- const声明变量的时候必须初始化

3.3 常量

声明常量使用 const

⚠ 常量不允许重新赋值，声明的时候必须赋值 (必须初始化)

注意：

const num = 10;
num = 10;
console.log(num);	// 报错 - 常量不允许重新赋值

四、❗❗ 数据类型

1️⃣ 值类型 （基本数据类型）（6）
- number — 数字型
- string — 字符串型
- boolean — 布尔型
- undefined — 未定义型
- null — 空类型
- symbol （了解）
- bigint
2️⃣ 引用数据类型 （复杂数据类型）（3）
- object — 对象
- function – 函数
- array — 数组

4.1 数字型 - number

数字型 = number + NaN
Number 一切十进制表示的数字

Number.MAX_VALUE    // 数字中的最大值
Number.MIN_VALUE    // 数字中的最小值
Infinity	    // 无穷大
-Infinity	    // 无穷小
NaN		    // 非数值

isNaN(数据) 这个方法用来判定非数字，并且返回一个值，如果是数字返回 false，如果不是数字返回 true

+ `NaN` 代表一个计算错误，它是一个不正确的或者一个未定义的数学操作所得到的结果 + ⚠ **`NaN` 是粘性的。任何对 `NaN` 的操作都会返回 `NaN`**

console.log(2 - NaN)	   // NaN
console.log('粘性' + NaN)  // NaN
console.log(NaN === NaN)   // NaN

4.2 字符串型 - string

用引号（单引号 / 双引号 / 反引号）包裹的都是字符串

4.2.1 字符串的长度

lengtn 属性
let strMsg = (`扶我起来，我还能干！`) 
console.log(strMsg.length)		// 显示 10

4.2.2 字符串的拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 新的字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
“+” 数字相加，字符相连

4.2.3 ❗❗ 模板字符串

使用 反引号（``） 包裹

模板字符串可以嵌套变量

代码展示：

let myName = `邵秋华`
let age = 22
let str = `扶我起来，我还能干！`
document.write(`我叫${myName}，今年${age}岁了，我的座右铭是${str}`)

4.2.4 ❌ 转义字符

4.3 布尔型 - boolean

布尔类型有 两个值，true 和 false，其中 true 表示真，而 false 表示假
布尔型 和 数字型 相加的时候，true = 1，false = 0
❗ 除了 0 、 '' 、 undefined 、 null 、 NaN、false 转换为布尔值后为假，其余都为真

4.4 未定义类型 - undefined

只声明变量，不赋值 的情况下，变量的默认值为 undefined
- undefined 这里本该有一个值，但是没有，就是 undefined
⚠ 数字 + undefined = NaN
⚠ 注意：
- ⚠ 对 undefined 的任何操作都是NaN，除了拼接字符串
出现情况：
- 声明变量未赋值
- 数组里面没有某个元素
- 对象里面没有某个属性或方法
- 函数
  - 形参多于实参（没有赋值的形参默认值是 undefined）
  - 函数未指定返回值（没有 return 关键字）

console.log(undefind + 1)	    // NaN
condsole.log(undefined + 'purple')  // undefinedpurple
console.log(typeof(undefined))	    //undefined

4.5 空类型 - Null

Null 这里有一个值，有一个空值
✅参与 数学运算 的时候，null = 0

console.log(null + 1)	        // 1
console.log(null + 'purple')    // nullpurple
console.log(typeof(null))	// object

4.6 null 和 undefined 区别：

undefined 表示声明了一个变量，但是没有赋值
- ```
let num
console.log(undefined + 1)	// NaN
```
null 表示声明了一个变量并且 赋值了，但是内容为空
- ```
let num = null
console.log(null + 1)	// 1
```
✅注意：
- ⚠ null 和 undefined 值相等，数据类型不相等
```
console.log(null == undefined)	// true
```

4.7 检测数据类型

1️⃣ 作为运算符：typeof 数据
以字符串的形式给你变量的数据类型
⚠ 使用 typeof 检测错误类型为 undefined 的代码不会报错，检测结果是 undefined

2️⃣ 函数形式：typeof(数据)（推荐使用）

以字符串的形式给你变量的数据类型
先运算小括号里面结果，然后去检测结果的数据类型

代码展示：

let num = 10;
console.log(typeof num);	  // number
let str = 'purple';
console.log(typeof str);	  //string
let flag = true;
console.log(typeof flag);     //boolean
let i = undefined;
console.log(typeof i);	  //undefined
let timer = null;
console.log(typeof timer);	  //object
// 注意
console.log(typeof (a));	  // undefined

3️⃣ instanceof
- 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
- 返回值：布尔值（true / false）

4️⃣ 究极方法： Object.prototype.toString()

可以通过 toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 的检测，需要以 Function.prototype.call() 或 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数。
返回值：[ object type ]

代码展示：

// 引用数据类型
const obj = {uname: '迪迦', age: 22};
console.log(Object.prototype.toString.call(obj));	// [object Object]
const arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr));	// [object Array]
const fn = function () { console.log(1) };
console.log(Object.prototype.toString.call(fn));	// [object Function]

// 基本数据类型
console.log(Object.prototype.toString.call(123));	// [object Number]
console.log(Object.prototype.toString.call('123'));		// [object String]
console.log(Object.prototype.toString.call(false) );	// [object Boolean]
console.log(Object.prototype.toString.call(undefined));	// [object Undefined]
console.log(Object.prototype.toString.call(null));		// [object Null]

4.8 数据类型转换

4.8.1 转数字

1️⃣ parseInt(string) 可以把 字符串型 转换为 整数型（不识别小数点）

从 第一个字符开始 取第一个整数，如果取不到就是NaN
⚠ 转换的字符开头如果不是数字，就是NaN

代码展示：

console.log(parseInt('3.14'))	  //3（取整数位）
console.log(parseInt('3.99'))	  //3（取整数位）
console.log(parseInt('120px'))        //120 (自动去除单位，前面必须是数字)
console.log((parseInt'rem120px'))     //NaN
console.log(parseInt(true))		  //NaN
console.log(parseInt(null));	  // NaN

2️⃣ parseFloat(string) 可以把 字符串型 转换为 浮点型（识别小数点）

从第一个字符开始取第一个小数，如果取不到就是NaN
⚠ 转换的字符开头如果不是数字，就是NaN

代码展示：

console.log(parseFloat('3.14'));	  //3.14
console.log(parseFloat('3.99'));	  //3.99
console.log(parseFloat('120px'));     //120 (自动去除单位，前面必须是数字)
console.log(parseFloat('rem120px'));  //NaN
console.log(parseFloat(true))	  //NaN
console.log(parseFloat(null));	  // NaN

⚠ 注意：

parseInt 和 parseFloat 单词的大小写

3️⃣ Number(string) 强制转换

转换的数据中不能包含非数字，如果有就是NaN
识别小数点

代码展示：

let num = '123';
console.log(Number(num));			  //123
console.log(Number('12')); 		 	//12
console.log(NUmber('123.123');	       // 123.123
console.log(Number('123abc');		//NaN
console.log(Number(null));			// 0
console.log(Number(true));			// 1
console.log(Number(false));			// 0

4️⃣ 利用了算术运算 **+(正号) - * / % ** 隐式转换

代码展示：

console.log('12' - 0);	  //12	（先将 '12' 转换成数字型在进行减）
console.log('123' - '120');		//3
console.lof('123' * 1);		  //123
console.log(+'123')			//123
+ 号作为正号解析可以转换成数字型（单用）

let year = prompt('请输入您的出生年份：');
//let age = 2022 - year;
alert('您今年：' + (2022 - year) + '岁了');

注意：

隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

代码展示：

let num1 = prompt('请输入第一个数据：');	//得到的num1是字符型的
let num2 = prompt('请输入第二个数据：');	//得到的num2是字符型的
let result = parseInt(num1) + parseInt(num2);
alert(parseInt(num1) + '+' + parseInt(num2) + '=' +  result);

/*
let num1 = +prompt('请输入第一个数据：');	
let num2 = +prompt('请输入第二个数据：');	
let result = num1 + parseInt(num2);
*/

✅ 注意：
- 有字符串的加法 ‘’ + 1，结果是 ‘1’
- 减法只能用于数字，它会使 空字符串 ‘’ 转换为 0
- null 经过 数字转换 之后会变为 0
  - ```
  parseInt(null);		// NaN
  parseFloat(null);	// NaN
  Number(null);		// 0
```
- undefined 经过 数字转换 之后会变成 NaN
- undefined 做任何操作都是 NaN 除了拼接字符串
```
null == undefined	// true 值都是空
null === undefined  // false 数据类型不一样
```

4.8.2 转字符串

1️⃣ String(数据)
- 返回值：转换好的数据
- 代码展示：
```
console.log(String(123))		// '123'
```
2️⃣ 数据.toString()
- 返回值：转换好的数据
- ⚠ **注意：**需要配合变量使用、
- 代码展示：
```
let num = 123
console.log(num.toString())  // '123'
```
3️⃣ +（加号）
- 字符串的拼接
- 代码展示：
```
console.log(123 + '')				// '123'
```

toString() 和 String()  使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

4.8.3 转布尔

Boolean(数据)

返回值：转换好的数据
⚠ 注意：代表空、**否定的值 **会被转换成 false
- ‘’、 0、 NaN、 null、 undefined、 false

代码展示：

console.log(Boolean(''))		// false
console.log(Boolean(0))		// false
console.log(Boolean(NaN))		// false
console.log(Boolean(null))		// false
console.log(Boolean(undefined))	// false
console.log(Boolean(false))		// false

注意：
// 两个等号值比较 值
// null 和 undefined 都是空
console.log(null == undefined)	// true

五、运算符

5.1 算术运算符

+ ⚠ **注意：** + 取余前面的数比后面的小，余数就是前面的数

5.2 递增递减运算符

5.2.1 前置++

先自加，后返回值
先自加，后运算（++在前先加）

let  num = 10;
alert(++num + 10);   // 21

5.2.2 后置++

先原值运算，后自加（++在后后加）
先表达式返回原值，后面变量再自加1

let  num = 10;
alert(10 + num++);  // 20

**注意：**前置++ 和后置++ 单独书写没有差别

5.2.3 前置–

先自减，后运算（先已后人）
let  num = 10;
alert(--num + 10);   // 19

5.2.4 后置–

先原值运算，后自减（先人后己） 
let  num = 10;
alert(10 + num--);  // 20

let a = 10;
++a;              // ++a = 11  a = 11
let b = ++a + 2;  // a = 12    ++a = 12
console.log(b);   // 14

let c = 10;
c++;		  // c++ = 11  c = 11
let d = c++ + 2;  // c++ = 11  c = 12
console.log(d);	  // 13

let e = 10;
let  f = e++ + ++e;
// e++ = 10   e = 11
// e = 12    ++e = 12
console.log(f);	   // 22

5.3 比较运算符

注意：
- 比较运算符有隐式转换
- ```
console.log(2 == '2')		// true
```
⚠ 特殊说明：
- 如果是数字和“其他值”的比较，则其他值会自动转换成数字去比较
- 涉及到“NaN”都是false
- 如果是”字符串“和“字符串”比较，则会比较每一个字符的ASCII码
- 如果是布尔值参与比较，布尔值会自动转换成数字0和1
- 数字只有0是假，其余为真
- 字符串只有’'（空字符串）是假，其余都为真

5.4 ❗ 逻辑运算符

1️⃣ && 与 有一个是 false ，得到的结果就是 false ；只有两侧都是 true 的时候，才可以到的 true
2️⃣ || 或 有一个是 true ，得到的结果就是 true ；只有两侧都是 false 的时候，才得到 false
3️⃣ ! 非 取反（双取反可以转布尔）
⚠ 注意： 逻辑运算符 优先级： ! > && > ||

5.4.1 短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

1️⃣ 逻辑与-语法：（一假则假）

表达式1 && 表达式2
	 如果 表达式1的值 为 真，则返回 表达式2
   如果 表达式1的值 为 假，则返回 表达式1 （后面的表达式不再执行）
	 两侧都为真，返回第二个

2️⃣ 逻辑或-语法：（一真则真）

表达式1 || 表达式2
	 如果 表达式1的值 为 真，则返回 表达式1 （后面的表达式不再执行）
   如果 表达式1的值 为 假，则返回 表达式2 
   两侧都为真返回第一个

5.5 赋值运算符

5.6 ❗ 运算符优先级

一元运算符 里 逻辑非 优先级最高
逻辑与 比 逻辑或 优先级高

console.log( 4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true)  // true
let num = 10
console.log( 5 == num / 2 && (2 + 2 * num).toString() === ‘22’)		// true
let a = 3 > 5 && 2 < 7 && 3 == 4 
console.log(a)  		// false
let b = 3 <= 4 || 3 > 1 || 3 != 2 
console.log(b) 		// true
let c = 2 === "2" 
console.log(c)  		// false
let d = !c || b && a 
console.log(d)		// true

六、流程控制 - 分支语句

表达式和语句的区别：
- 表达式：表达式可被求值，可以写在赋值语句的右侧（运算符和数据组成的式子）
- 语句：不一定有值（可以被执行的代码）

6.1 if 语句

条件为 true 的时候，大括号里面的代码才会执行
小括号里的结果若不是布尔类型时，会发生隐式转换转为布尔类型
⚠ if分支语句，如果前面的条件被满足，后面的代码就不执行了

if (条件) {
  满足条件要执行的代码
}

if (条件) {
  满足条件要执行的代码
} else {
  条件不满足时要执行的代码
}

eg:
// 能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年
let year = +prompt('请输入年份：')
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
  alert(`&{year}是闰年`)
} else {
  alert(`&{year}是平年`)
}

if (条件表达式1) {
  满足条件1要执行的代码
} else if (条件表达式2) {
  满足条件2要执行的代码
} else if (条件表达式n) { 
  满足条件n要执行的代码
} else {
  所有条件都不满足时要执行的代码
}

6.2 三元运算符

语法结构：

条件表达式 ? 表达式1 : 表达式2

执行思路：
- 如果 条件表达式 结果为真，则返回 表达式1 的值，如果 条件表达式 结果为假，则返回 表达式2 的值

代码展示：

let time = prompt('请您输入一个 0 ~ 59 之间的一个数字')
// 三元表达式 表达式 ？ 表达式1 ：表达式2 
let result = time < 10 ? '0' + time : time // 把返回值赋值给一个变量
alert(result)

/* 如果输入的数字小于10，就在该数字前面加一个0，否则原样输出该数字 */
let num = prompt('请输入数字：')
let result = num < 10 ? '0' + num : num
alert(result)

6.3 switch 语句

表达式有一个返回值，**返回值 **会和 value 做匹配（必须是全等的关系），如果匹配上了就执行对应的语句，如果都匹配不上就执行default里的语句

语法：

switch ( 表达式 ) {
	case value1:
	满足value1执行的代码
	break
	case value2:
	满足value2执行的代码
	break
	default:
	所有条件都不满足时要执行的代码
}

⚠ 注意：

每一个 case 和 表达式 必须是 ===（值和 数据类型 都相等）才叫满足
switch 语句，只能判断一些准确的值，不能判断范围
实际开发过程中表达式我们经常写成变量

代码展示：

let num1 = +prompt('请输入第一个数字：')
let sp = prompt('请输入 + - / * 其中一个：')
let num2 = +prompt('请输入第二个数字：')

switch (sp) {
  case '+':
    let add = num1 + num2
    alert(`${num1} + ${num2} = ${add}`)
    break
  case '-':
    let dif = num1 - num2
    alert(`${num1} - ${num2} = ${dif}`)
    break
  case '*':
    let bus = num1 * num2
    alert(`${num1} x ${num2} = ${bus}`)
    break
  case '/':
    let pro = num1 / num2
    alert(`${num1} ÷ ${num2} = ${pro}`)
    break
  default:
    alert('请输入正确的运算符')
    break
}

七、流程控制 - 循环语句

7.1 循环成立的条件

初始值作为循环的开始
条件判断决定要不要继续循环
要重复执行的代码
改变初始值为了让循环有结束

7.2 ❗ for 循环

语法结构：

for (初始化变量; 条件表达式; 操作表达式) {
    循环体
}

初始化变量：通常被用于初始化一个计数器，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。（终止条件）
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。（递增或者递减）

代码展示：

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>

body>

<script>
  // 求1-100之间所有数字的和
  let  sum = 0;
  let average = 0;
  for (let i = 1; i<= 100; i++) {
      sum += i
  }
  average = sum / 100;
  console.log('1-100之间所有数字的和为：' + average); 

  // 求1-100之间所有偶数的和和奇数的和
  let even = 0;
  let odd = 0;
  for (i = 1; i <= 100; i++) {
    // 第一种
    if (i % 2 == 0) {
      even = even + i;
    } else {
      odd += i;
    }
    
    //第二种
    if (i % 2 == 0) {
      even = even + i;
    }
    odd = sum - even;
  }
  console.log('1-100之间所有偶数的和为：' + even + '\n' + '1-100之间所有奇数的和为：' + odd);

  // 求1-100之间所有能被3整除的数字的和
  let odd_num = 0;
  for (let i = 1; i <= 100; i++) {
      if (i % 3 == 0) {
          odd_num = odd_num + i;
      }
  }
  console.log('1-100之间所有能被3整除的数字的和为：' + odd_num);
  
  //弹出输入框，输入一共有n个学生，然后弹出n个输入框，输入每个学生的成绩，最后输出总成绩和平均成绩
  let frequency = prompt('请输入有多少个学生：');
  let score = 0;
  for (let i = 1; i <= frequency; i++) {
      let a = prompt('请输入第' + i + '个同学的成绩：');
    // 从 prompt 获取到的数据是 String 类型的，不能直接和数字进行相加
      score = score + parseFloat(a);
   }
  alert('该班总成绩是：' + score);
  alert('该班平均成绩是：' + (score / frequency));

  //一行打印五个星星
  let str = ' ';
  for (let i = 1; i <=5; i++) {
          str = str + '⭐';
  }
  console.log(str);
script>
html>

7.3 ❗ 双重for循环

//打印n行m列的星星
let rows = +prompt('请输入需要打印几行的星星：');
let cols = +prompt('请输入需要打印几列的星星：');
let str = '';
for (let i = 1; i <=rows; i++) {
  for (let j = 1; j <= cols; j++) {
    str +=  '⭐';
  }
  str += '\n';
}
console.log(str);

冒泡排序：

// 外层for循环：控制已经排序好的元素的个数
// 内层for循环：控制每排序好一个元素需要比较几次
const arr = [1, 7, 3, 9, 5, 2, 6, 4, 8];
for (let i = 0; i < arr.length - 1; i++) {
  for (let j = 0; j < arr.length - i - 1; j++) {
    if (arr[j] > arr[j + 1]) {
      let temp = arr[j + 1];
      arr[j + 1] = arr[j];
      arr[j] = temp;
    }
  }
}
console.log(arr);

7.4 while循环

循环三要素：
- 变量初始值
- 终止条件
- 变量变化量

语法：

let n = 1
   while ( 循环条件 ) {
       重复执行的代码
       n++
   }

7.5 ❗ continue 和 break

continue
退出本次循环，继续下一次循环
一般用于排除或者跳过某一个选项的时候
continue 在循环节构中用来跳过本次循环中剩余的代码，并且在条件求值为真的时开始下一次循环。
不能省略 continue 后面的分号（导致胡乱）
continue 后面的代码不会再执行
break
退出整个循环（结束循环）
一般用于结果已经得到，后续的循环不需要的时候
在一些计算机语言中 break 是保留字，其作用大多数情况下是终止上一层循环。

7.6 JS标记语法

JS标记语法
here:
for (let i = 1; i <= 5; i++) {
  for (let j = 1; j <= 3; j++) {
    if (i === 3 && j === 2) {
      console.log('看到半条虫子')
      break here
    }
    console.log('吃的第 ' + i + ' 个包子得第 ' + j + ' 口')
  }
  console.log('=================')
}

八、❗❗ 数组 - 基础

一种有序的数据集合

8.1 创建数组

8.1.1 字面量创建

let 数组名 = [数据1, 数据2, …, 数据n]
let arr = ['name', 'Jack', 'age', 20, 'gender', '男']

8.1.2 内置构造函数创建

//没有参数表示空数组
let arr = new Array()  

//一个参数表示数组的长度
let arr = new Array(100) 

//多个参数表示都是数组里面的数据，没有表示长度的参数
let arr = new Array(10, 20, 30) 
arr.length = 2				//删除最后一个
arr.length = 5				//后面的两个用空补齐
console.log(arr[2])		//读取里面的额第三个数据

8.2 ❗❗ 遍历数组

能够获取数组里面的每个元素

8.2.1 for

格式：

for (let i = 0; i < 数组名.length; i++) {
  // 执行的操作
  // console.log(数组名[i])
}

8.2.2 forEach

取代 for 循环

语法：

数组.forEach(function (item, index, arr) {  } )
  -> item ：数组里面的每一项
  -> index ：数组里面每一项的索引
  -> arr ： 原始数组

⚠ 没有返回值
forEach中的 return 等同于 for循环的 continue

终止forEach循环：try - catch

try {
  [1, 2, 0, 3].forEach(item => {
    console.log(item)
    if (item === 1) {
      console.log(item)
      throw Error()
    }
  })
} catch (error) {
  console.log('终止循环')
}

// 打印结果
// 1
// 1
// z

8.2.3 for of

遍历 可迭代 的数据：数组，伪数组，字符串
遍历的是数组、伪数组、字符串的值

语法：

for (let item of arr) {
  console.log(item)		//  item -> 数据里面的每一项
}

8.3 数组的增删查改

8.3.1 增

1️⃣✔数组.push() 方法：将 一个或多个元素 追加 **到数组的末尾，并返回 追加元素后数组 的长度
- 语法：数组.push(数据1, 数据2， … ，数据n)
- 返回值： 追加元素后数组的长度
- ⚠改变原始数组
2️⃣ 数组.unshift() 方法：将 一个或多个元素 插入到数组的开头，并返回 插入元素后数组 的长度
- 语法：数组.unshift(数据1, 数据2, …, 数据n)
- 返回值： 插入元素后数组的长度
- ⚠改变原始数组
见代码展示

8.3.2 删

1️⃣ 数组.pop() 方法：从数组中删除 最后一个 元素
- 语法：数组.pop()
- 返回值： 被删除的元素
- ⚠改变原始数组
2️⃣ 数组.shift() 方法：从数组中删除 第一个元素
- 语法：数组.shift()
- 返回值： 被删除的元素
- ⚠改变原始数组
3️⃣ ✔数组.splice(start, deleteCount) 方法：删除数组里 指定的元素
- 语法：数组.splice(开始索引，删除几个)
  - ⚠ 注意：包含开始索引 对应的元素
  - deleteCount：表示要移除的数组元素的个数（如果省略则默认从 指定的起始位置 删除到最后）
- 返回值： 新数组（将删除的元素放到这个新数组里面）
- ⚠改变原始数组
见代码展示

8.3.3 查

见代码展示

8.3.4 改

见代码展示

代码展示：

<script>
  let arr = ['pink', 'red'];
  // 增加
    // 方案一：数组.push()方法
        语法：arr.push(元素1, 元素2, …, 元素n);
        追加数组 的同时 有一个 返回值 是 追加以后 的 数组长度
        console.log(arr.push('green', 'hotpink', 'deeppink'));	// 5
        console.log(arr); 
	// ['pink', 'red', 'green', 'hotpink', 'deeppink']
		
    // 方案二：数组.unshift()方法
        语法：arr.unshift(元素1, 元素2, …, 元素n);
        console.log(arr.push('green', 'hotpink', 'deeppink'));	// 5
        console.log(arr);
        // ['green', 'hotpink', 'deeppink', 'pink', 'red']
	
 // 删除
    // 方案一：数组.pop()
        console.log(arr.pop());		// green
    // 方案二：数组.shift()
        console.log(arr.shift());	// red
    // 方案三：数组.splice(起始位置的索引, 删除几个元素)
        // 从索引号0的位置开始，删除两个元素
        console.log(arr.splice(0, 2));	// ['hotpink', 'deeppink']

 // 查询 --- 利用数组的索引进行查找
        console.log(arr[0]);	// pink

 // 修改 --- 利用 对数组进行遍历，然后和字符串拼接，重新赋值给数组里的元素
    // 方案一：
    arr[0] = 'blue';
    arr[1] = 'purple';

    //方案二：
    for (let i = 0; i < arr.length; i++) {
        arr[i] += '老师';
    }
    console.log(arr)
</script>

九、❗❗ 函数

函数：执行特定任务的代码块

9.1 函数的声明和使用

9.1.1 函数的声明

函数命名规范：

和变量命名基本一致
小驼峰式命名法

⚠ 前缀应该为动词

can		---		判断是否可执行某个动作
has		---		判断是否含义有某个值
is		---		判断是否为某个值
get		---             获取某个值
set		---		设置某个值
load	        ---		加载某些数据

1️⃣ 具名函数
- 语法：
```
function 函数名() {
  函数体
}
```
- ⚠ 注意：可以后声明先调用，也可以先声明后调用
2️⃣ 匿名函数
- 使用方式：
  - ① 函数表达式：
    - 语法：
```
let 函数名 = function () {
    // 函数体
}
```
  - ② 立即执行函数：
    - 语法：
```
!(function (实参) { 函数体 })(实参);
!(function (实参) { 函数体 } (实参));
```
    - ⚠ 注意： 立即执行函数末尾必须加分号
- ⚠ 注意：
  - 函数名() — 表示调用这个函数
  - 函数名 — 表示一个变量，代表这个函数

代码展示：

function getSum() {
  let sum = 0
  for (let i =  1; i <= 100; i++) {
    sum += sum
  }
  document.write(sum)
}

9.1.2 函数的使用

函数的调用：
- ```
函数名()
```
⚠ 注意： 声明的函数 必须调用才会真正执行，使用（）调用函数

函数 一次声明 可以 多次调用 ，每一次函数调用函数体里面的代码会重新执行一次

代码展示：

function getSum() {
  let sum = 0
  for (let i =  1; i <= 100; i++) {
    sum += sum
  }
  document.write(sum)
}
getSum()	// sum = 5050

9.1.3 函数传参

声明语法：

function 函数名(参数列表) {
  函数体
}

传入数据列表
声明这个函数需要传入几个数据
多个参数之间用逗号隔开

代码展示：

function getSum(start, end) {
  // 形参 - 形式上的参数
  let sum = 0
  for (let i =  start; i <= end; i++) {
    sum += sum
  }
  document.write(sum)
}

调用语法：
- ```
函数名(传递的参数列表)
```
- 代码展示：
```
getSum(10, 20)	// sum = 33
// 实参 - 实际的参数
```
- 形参：
  - 形式上的参数 — 写在 函数声明阶段 的 小括号 里
  - 本质：就是在函数内部声明的变量（局部变量）
  - 作用：接受实参传递的参数
  - 如果既没有实参传递，也没有设置默认值，就是 undefined
- 实参：
  - 实际上的参数 — 写在 **函数调用阶段 **的 **小括号 **里
  - 实参可以是变量
  - 作用：给形参赋值

参数默认值：

在调用的过程中，如果有参数传递过来，就用传递过来的；如果没有参数传递过来就用默认的
⚠ **注意：**若没设置默认值，默认就是 undefined

代码展示：

function getSum(x = 0, y = 0) {
  // 小括号里写了就不用写
  // 推荐用逻辑中断
  // x = x || 0
  // y = y || 0
  document.write(x + y)
}

getSum()	// 0
getSum(1, 2)   // 3

9.1.4 函数的返回值：

语法：返回给调用者（当调用某个函数，这个函数会返回一个结果出来）
```
return 要返回的数据
```
⚠ 注意：
- 在 函数体 中使用 return 关键字能 将内部的执行结果 交给 函数外部 使用
- 所以 return 后面的数据不要换行写
  - ⚠ return 和要返回的数据不能换行写（模板字符串、函数除外）
- 一个函数只能有一个return（因为第一个return后面的代码就不执行了）
- 如果函数 没有指定 return，这种情况函数 默认返回值 为 undefined
- 函数如果有 多个返回值 ，用 中括号包裹，中间用 逗号隔开 （返回的是一个新数组）

代码展示：

function fn() {
    return 20   // 把 结果(20) 返回给 fn
}
fn()  // 相当于执行了 fn() = 20	（fn()是函数的调用者）
console.log(fn())	// 20

// 求两个数的最大值
function getMax(x = 0, y = 0) {
  return x > y ? x : y
}

getMax(65, 99)	// 99
let max = getMax(65, 99)
console.log(max)

求数组里面的最大值和最小值

代码展示：

// 声明一个 getArrValue函数
function getArrValue(arr = []) {
  let max = arr[0]
  let min = arr[0]
  //遍历数组
  for (let i = 0; i < arr.length; i++) {
    // 最大值
    if (max < arr[i]) {
      max = arr[i]
    }
		
    // 最小值
    if (min > arr[i]) {
      min = arr[i]
    }
  }
	
  // return 返回多个值写法
  return [max, min]
}

let newArrr = getArrValue([23, 56, 32, 198, 0, 5, -98])

console.log(`数组中的最大值是：&{newArr[0]}`)		// 198
console.log(`数组中的最小值是：&{newArr[1]}`)		// -98

时间转换 + 补0

代码展示：

function getTime(t = 0) {
  let second = parseInt(t % 60)
  let minute = parseInt(t / 60 % 60)
  let hour = parseInt(t / 60 / 60 % 24)

  // if条件分支语句
  /*  if (second < 10) {
          second = '0' + second
      }

      if (minute < 10) {
          minute = '0' + minute
      }

      if (hour < 10) {
              hour = '0' + hour
      } */

  // 三元表达式
  second < 10 ? second = '0' + second : second
  minute < 10 ? minute = '0' + minute : minute
  hour < 10 ? hour = '0' + hour : hour

  return `${t}秒 = ${hour}小时${minute}分钟${second}秒`
}

let str = getTime(+prompt('请输入秒数：'))	// 1000
document.write(str)		// 1000秒 = 00小时16分钟40秒

⚠ 函数注意点：
- 两个函数名相同的函数，后面的会覆盖前面的
- 两个函数体相同的匿名函数不是同一个函数
- 传递参数
  - 形参过多会自动填上 undefined
  - 实参多于形参，剩余的实参不参与运算
  - 实参少于形参，多于的形参使用默认值 undefined
- 函数一旦碰到 return 就不会往下执行，函数的结束用 return
break 和 return 的区别：
- break：结束的是 循环和 switch
- return：结束的是函数和 for循环

9.2 作用域基础

作用域： 变量的 可用性范围 就是作用域（提高程序逻辑的局部性）

9.2.1 全局作用域

全局有效
作用与所有代码执行的环境（整个script标签内部）或者一个独立的js文件

9.2.2 局部作用域

局部有效
作用与函数内的代码环境，就是局部作用域。因为跟函数有关，所以也称为函数作用域

9.2.3 特殊

如果函数内部，变量没有声明，直接赋值。也当全局变量看。不推荐

代码展示：

function fn() {
  num = 10	// 全局变量来看
}

fn()									
console.log(num)	// 10

函数内部的形参可以看作是 局部变量

代码展示：

function fun(x, y) {
  // 形参可以看做是函数的局部变量
  console.log(x)	// 1
}
fun(1, 2)				
console.log(x)	// x is not defined （报错）

9.3 变量的访问原则

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

⚠ 访问原则（就近原则）：在能够访问到到的情况下 先局部，局部没有 再找全局 （由内向外）

代码展示：

functin f1 () {
  let num = 123
  function f2 () {
    console.log(num)	//   123
  }
  f2()
}
let num = 456
f1()

function f1() {
  let num = 123
  function f2() {
    let num = 0
    console.log(num)	//  0
  }
  f2()
}
let num = 456
f1()

let a = 1
function fn1() {
  let a = 2
  let b = '22'
  function fn2() {
    let a = 3
    fn3()
    function f3() {
      let a = 4
      console.log(a)	//  a的值 = 4
      console.log(b)	//  b的值 = '22'
    }
  }
}
fn1()

9.4 匿名函数

没有名字的函数，无法直接使用

使用方式：函数表达式 / 立即执行函数

1️⃣ 函数表达式：
- 函数表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用
- 语法：
```
let 变量名 = function () {
  // 函数体
}
```
- ⚠ 调用：变量名()
- 代码展示：
```
let fn = function () {
  console.log('我是函数表达式')
}
fn()  //  我是函数表达式
```
- ⚠ 注意： 函数表达式 必须先声明、后调用
  - 因为变量必须先声明后使用

2️⃣ **立即执行函数：**避免全局变量的污染（防止变量污染（冲突））

函数声明后立即执行，并且执行完一次后被释放

语法：

// 写法一：
(函数)();		

// 写法二：
(函数 ());

⚠ 立即执行函数 必须加分号
立即执行函数可以传递参数
先写两个小括号，前面的小括号写函数
可以给匿名函数添加函数名

⚠ 最后面的小括号相当于调用函数

代码展示：

(function () {
  console.log('立即执行函数')
})();
// 保存之后会在控制台立即打印 '立即执行函数'

// 第一种写法：
(function () {
    console.log('立即执行函数第一种写法');
})();

(function (x, y) {	// (x, y) --->   形参
  console.log(x, y);	// x = 5; y = 9
})(5, 9);		// (5, 9) --->   实参


// 第二种写法：
(function () {
    console.log('立即执行函数第二种写法');
} ());

(function (x, y) {	// (x, y) --->   形参
  console.log(x, y);	// x = 5, y = 9
} (5, 9));	// (5, 9) --->   实参

9.5 具名函数和匿名函数的区别

具名函数：
- 可以 先调用 后声明，也可以 先声明 后调用
- 具名函数的调用可以写在任意位置
匿名函数
- 函数表达式必须 先声明函数表达式 后调用
- 匿名函数的调用必须写在声明函数的后面

9.6 函数中的逻辑中断

函数的默认值

方案一：（赋值）

function fn(x = 0, y = 0) {
  x = x
  y = y
  console.log(x, y)
}
fn(1, 2)	// x = 1, y = 2
fn()	// x = 0, y = 0

方案二：（逻辑中断）(推荐)

function fn(x, y) {
  x = x || 0
  y = y || 0
  console.log(x, y)
}
fn(1, 2)	// x = 1, y = 2
fn()	// x = 0, y = 0

十、❗❗ 对象 - 基础

对象 = 属性 + 方法

10.1 对象 - object

对象是一种复杂数据类型
一种无序的数据集合（不可迭代）

10.2 使用对象

10.2.1 声明对象

语法：

let 对象名 = {}
let 对象名 = new Object()

let obj = {}		// 声明了一个obj的对象
let obj = new Object();

组成：属性 + 方法
```
let 对象名 = {
	属性名: 属性值,
  方法名: 函数
}

eg:
  let obj = {
   uname: 'pink老师',
   age : 18,
   gender: '男'
 }
  console.log(obj)
  // {uname: 'pink老师', age: 18, gender: '男'}
```
- 属性都是成对出现的，包括 属性名 和 属性值 ，它们之间使用英文 : 分隔
- 对象属性没有顺序
- 多个属性之间使用英文 , 分隔
- 属性就是依附在对象上的变量（外面是变量，对象内 是属性）
- ⚠ 属性名可以使用 " " 或 ’ ’ ，一般情况下省略，除非名称遇到特殊符号如空格、中划线等
  - ⚠ 属性名不能使用反引号

10.2.2 增删查改

1️⃣查
- 语法：
  - 对象名.属性名
  - 对象名[‘属性名’] （ 属性名 必须加引号）
    - ⚠ 如果属性名存放在一个变量里面，只能使用 数组关联语法
- 代码展示：
```
console.log(obj.uname)	// pink老师
console.log(obj['uname'])	// pink老师
```
2️⃣改
- 语法：对象名.属性名 = 新值
- 代码展示：
```
obj.gender = '女'
console.log(obj.gender)	// 女
```

3️⃣增

语法：对象名.新属性名 = 新值

obj.address = '武汉黑马'
console.log(obj)	// {uname: 'pink老师', age: 18, gender: '女', address: '武汉黑马'}
console.log(obj.address)	// 武汉黑马

4️⃣删（了解）

语法：delete 对象名.属性名

delete obj.address
console.log(obj)	// {uname: 'pink老师', age: 18, gender: '女'}

10.2.3 对象的方法

方法 = 方法名 + 函数，它们之间用 : 分隔
多个属性 之间使用英文 , 分隔
方法是依附在对象中的函数（外面是函数，对象内 是方法）
方法名可以使用 “” 或 ‘’ ，一般情况下省略，除非遇到特殊符号如空格、中划线等
声明对象，并添加了若干方法后，可以使用，调用对象中的（方法）函数，我们称之为方法调用
- 语法：对象名.方法名()
- 千万别忘了给方法名后面加 小括号

代码展示：

let obj = {
  uname: '刘德华',
  // 方法
  song: function () {
    console.log('冰雨')
  },
  getSum: function (x, y ) {
    x = x || 0
    y = y || 0
    console.log(x + y)
  }
}

// 方法调用 对象名.方法名()
obj.song()				// 冰雨
obj.getSum(2, 5)	// 7

10.3 ❗ 遍历对象

1️⃣ for in 语法：
- 遍历的是对象的属性 / 数组的索引 / 伪数组的索引 / 字符串的索引
  - 得到的索引都是字符串型
```
for (let k in obj) {
  console.log(obj[k])
}
```
- 结论： k 是获得对象的属性名 ， 对象名[k] 是获得对象的 属性值

2️⃣ 判断一个成员在不在对象里面

语法：
```
属性/方法 in 对象名
```
返回值： 布尔值（true / false）

代码展示：

let obj = {
  uname: 'jack',
  age: 18,
  gender: '男',
  score: 100
};
console.log('name' in obj);	// true

代码展示：

//声明一个 obj 对象
let obj = {
  uname: 'pink老师',
  age: 18,
  gender: '男'
}

// 用 fou in 循环遍历对象
for (let k in obj) {		
  // k 可以是任何变量，选择 k/key 是因为许多程序员都在使用
  
  // console.log(k)      
  // k 是字符串型的，带有引号
  // k => 'uname' 'age' 'gender'
  // obj 对象里面没有 'uname'、 'age'、 'gender' 的属性名   ------    有引号
  // obj 对象里面的属性名是 uname、 age、 gender            ------    没有引号
  // 查询对象里面的属性有两种方法：1）对象名.属性名
  // 													2）对象名['属性名']
  // 原因：obj[k] === obj['uname'] === obj.uname
  //      obj[k] === obj['age'] === obj.age
  //	   obj[k] === obj['gender'] === obj.gender
  // 所以，利用for in循环遍历对象采用第二种查询方法
  // 结论：k 是获得对象的属性名 ， 对象名[k] 是获得 属性值
  
  console.log(obj[k])	// 'pink老师'(string)  18(number)  '男'(string)
}

渲染学生信息

代码展示：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
    table {
        width: 600px;
        text-align: center;
    }

    table,
    th,
    td {
        border: 1px solid #ccc;
        border-collapse: collapse;
    }

    caption {
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: 700;
    }

    tr {
        height: 40px;
        cursor: pointer;
    }

    table tr:nth-child(1) {
        background-color: #ddd;
    }

    table tr:not(:first-child):hover {
        background-color: #eee;
    }
    style>
head>

<body>
    <h2>学生信息h2>
    <p>将数据渲染到页面中...p>

    <table>
        <caption>学生列表caption>
        <tr>
            <th>序号th>
            <th>姓名th>
            <th>年龄th>
            <th>性别th>
            <th>家乡th>
        tr>
        <script>
            // 1.数据准备
            let students = [
                { name: '小明', age: 18, gender: '男', hometown: '河北省' },
                { name: '小红', age: 19, gender: '女', hometown: '河南省' },
                { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
                { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
            ]

            // 2.开始渲染页面
            for (let i = 0; i < students.length; i++) {
                document.write(`
                
                    ${i + 1}
                    ${students[i].name}
                    ${students[i].age}
                    ${students[i].gender}
                    ${students[i].hometown}
                    
                `)
            }
        script>
    table>

body>

html>

10.4 内置对象

10.4.1 Math对象包含的方法

1️⃣Math.random()：生成0-1之间的随机小数（包含0不包括1）

如何生成0-10的随机小数？

let num = Math.floor(Math.random() * (10 + 1))

如何生成5-10的随机数？

let num = Math.floor((Math.random() * (5 + 1)) + 5

如何生成N~M的随机数？

let num = Math.floor(Math.random() * (M - N + 1)) + N
function getRandom (N, M) {
  // return Math.floor(Math.random() * (M - N + 1)) + N;
  return parseInt(Math.random() * (M - N + 1)) + N;
}

数组随机数：
```
Math.floor(Math.random() * arr.length)
```

2️⃣Math.ceil(数据)：向上取整

代码展示：

console.log(Math.ceil(1.1))	// 2
console.log(Math.ceil(1.01))	// 2

3️⃣Math.floor(数据)：向下取整

代码展示：

console.log(Math.floor(1.9))	// 1
console.log(Math.floor(1.99))	// 1

4️⃣Math.max(数据)：找最大数

代码展示：

console.log(Math.max(0.1, 1, 65, 23, 88))  // 88

5️⃣Math.min(数据)：找最小数

代码展示：

console.log(Math.min(99, 65, 3, 0.1, -99))	// -99

6️⃣pow：幂运算（了解）
7️⃣Math.abs(数据)：绝对值
- 代码展示：
```
console.log(Math.abs(-100))	// 100
```

8️⃣Math.round(数据)：四舍五入（取整数）

代码展示：

console.log(Math.round(2.45))	// 2
console.log(Math.round(2.5))	// 3
console.log(Math.round(-20.5))	// -20
console.log(Math.round(-20.51))	// -21

贰、❗❗ Web APIS

Web API：是一套操作网页内容（DOM）与浏览器窗口（BOM）的对象
- API：就是一些预定义好的方法，这些方法可以实现特定的功能，开发人员可以直接使用
- Web API：浏览器提供了一套操作网页和浏览器的方法，通过这些方法可以轻松的操作元素和浏览器
复杂数据类型 用 const 声明：复杂数据类型 放在堆里面，栈里面存放的地址指向堆里面存放的数据，变的只是堆里面存放的数据，存放数据的地址没有发生变化
变量名 -> 栈地址-> 堆数据

const实际上指的并不是变量的值不得改动，
其实说的是变量指向的那个内存空间中保存的数据不得改变
简单数据类型是将值保存在栈中，所以用const声明简单数据类型时，值不得改变，相当于常量
而复杂数据类型是将引用地址保存在栈中，具体的值保存在堆中
那么用const声明复杂数据类型时，比如对象，数组时，只能保证的是这个地址是固定不变的
堆中保存的数据是不是可变的，就无法保证了

一、❗❗ DOM（文档对象模型）

Document Object Model — 文档对象模型
定义：是HTML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以在从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和程序语言连接起来。进而操作网页的内容，实现各种功能和部分特效。

1.1 DOM树和 DOM对象

1.1.1 DOM树

DOM树：一种树状结构，把页面标签按照树状结构排列好，结构更加清晰
- 每个DOM对象中都有表示层级关系的属性，利用这些属性把所有的DOM对象联系在一起，就形成一个树状结构，称为DOM树
作用：文档树直观的体现了标签与标签之间的关系

1.1.2 DOM对象

**DOM对象：**浏览器根据htm标签自动生成的JS对象
- 浏览器把网页内容翻译成一个个的对象，把网页内容的特征翻译成对象的属性
document对象：是DOM里提供的一个对象（DOM里面最大的对象）
- 它提供的属性和方法都是用来访问和操作 网页内容的

1.2 获取DOM对象

打印对象：打印元素的时候，以对象的形式展现
```
console.dir(对象);
```

1.2.1 ❗❗ 根据CSS选择器来获取DOM元素

1️⃣ 选择匹配的 第一个 元素
- 语法：
```
document.querySelector('css选择器')
```
- 代码展示：
```
const li = document.querySelector('ul li')
```
- 参数：小括号里面包含一个或多个有效的css选择器 字符串（引号）
- 返回值：
  - css选择器匹配的 第一个元素，一个 HTMLElement 对象
  - ⚠ 如果 没有匹配 到元素就是 null
  - ⚠ 注意：必须加引号
2️⃣ 选择匹配的多个元素
- 语法：
```
document.querySelectorAll('css选择器')
```
- 代码展示：
```
const lis = document.querySelectorAll('li') //NodeList[li, li, li]
```
- 参数：小括号里面包含一个或多个有效的CSS选择器 字符串
- 返回值：
  - CSS选择器匹配的 NodeList 对象集合
  - 如果页面 不存在 这个元素，得到的就是一个 空的伪数组
  - 把所有 匹配的 元素放到 NodeList伪数组 里面返回
  - 有长度，有索引
  - 没有push()，pop()等数组方法
  - 想要得到里面的每一个对象，则需要遍历获得

1.2.2 获取HTML、body、head、title

document.documentElement	--- 	html
document.body			--- 	body
document.head			--- 	head			
document.title			--- 	title

1.2.3 ❌其他获取元素的方式

1️⃣根据 id 获取元素
- ```
document.getElementById('id名称')
```
- 注意：
  - id名称不加 #
2️⃣根据标签获取一类元素
- ```
document.getElementsByTagName('标签名称')
```
- 注意：
  - getElementsByTagName
  - 返回值：伪数组
3️⃣根据类名获取元素
- ```
document.getElementsByClassName('类名')
```
- 注意：
  - 类名不加 .
  - getElementsByClassName
  - 返回值：伪数组

1.3 操作元素内容

1.3.1 对象.innerText 属性

将 元素文本内容 添加/更新到任意标签位置
显示 纯文本，不解析标签
见代码展示

1.3.2 对象.innerHTML 属性

将 元素内容 添加/更新到任意标签位置
- 包括标签、文本、注释
会解析标签，多标签建议使用模板字符串
⚠ 既要保留原来内容又要添加新内容，采用 字符串拼接 的方式
- ```
innerHTML += '要添加的文本'
```
见代码展示
代码展示：

<div class="box"> 天地不仁以万物为刍狗！！！ </div>
<strong>
    const box = document.querySelector('.box') 
    // 对象.innerText 属性
    box.innerText = '扶我起来，我还能干！！！'
    box.innerText = '扶我起来，我还能干！！！'
  
    // 对象.innerHTML 属性
    box.innerHTML = '扶我起来，我还能干！！！'
    box.innerHTML = '扶我起来，我还能干！！！'
</strong>

⚠innerText 和 innerHTML 的区别

innerText
- 只能获取元素文本，无法获取标签
- ⚠ 在获取文本的时候，包含 子元素的文本
innerHTML
- 可以获取对象里面的所有 文本+标签

代码展示：

<body>
    <div>
        123
        <p>456
        <span>789</span>
        </p>
    </div>

    <script>
        console.log(document.querySelector('div').innerText);
        console.log(document.querySelector('div').innerHTML);
    </script>
</body>

1.3.3 获取表单元素文本

语法： 元素.value
获取 输入的字符长度 ：元素.value.length
⚠ 获取 button 的文本依然使用 innerHTML（button双标签）
拓展：
- ⚠ 元素.value.trim() - 去除字符串左右两侧的空格

1.4 操作元素属性

1.4.1 操作元素属性

语法：元素.属性 = ‘值’

代码展示：

<img src="./images/1.webp" alt="">
//随机数函数
function getRandom(N, M) {
  return Math.floor(Math.random() * (M- N + 1)) + N
}
//获取图片对象
//img在html中是标签，在js中是对象
const pic = document.querySelector('img')
// 修改对象的属性值
pic.src = `./images/${getRandom(1, 6) }.webp`

1.4.2 控制样式属性

1️⃣ 通过 style属性 操作css

语法：元素.style.样式属性 = ‘值’
- 对于复杂的样式属性建议使用 小驼峰 命名法
- 生成的是 行内样式表，权重很高，只有 !important 能做掉它
- ⚠ 只写属性

代码展示：

// 获取对象（元素）
const box = document.querySelector('div')
// 修改样式属性 对象.style.样式属性 = '值'
box.style.width = '400px'
box.style.height = '100px'
box.style.backgroundColor = 'red'
box.style['background-color'] = 'green'

2️⃣ 通过 类名（className） 操作css

语法：元素.className = ‘类名’
- ⚠ 注意：会覆盖前面的类名 新值换旧值
- 想要原来的类名 -> 元素.className = ‘旧类名新类名’

代码展示：

<style>
  div {
    width: 200px;
    height: 200px;
    background-color: pink;
  }
  .active {
    width: 300px;
    height: 300px;
    background-color: hotpink;
    margin-left: 100px;
  }
style>

<body>
  <div class="one">div>
  <script>
    // 1.获取元素
    // let box = document.querySelector('css选择器')
    let box = document.querySelector('div')
    // 2 给div添加类名 class 是个关键字，选用className替代它
    // 新值换旧值，会覆盖原来的类名
    box.className = 'active'
    // 用旧类名+新类名的形式覆盖原来的类名
    box.className = 'one active'
  script>
body>

❗3️⃣ 通过 classList 操作类 控制css
- 语法：
  - 追加类：元素.classList.add(‘类名’)
  - 删除类：元素.classList.remove(‘类名’)
  - 切换类：元素.classList.toggle(‘类名’)
    - 如果有这个类名就是删掉，没有就追加
  - 替换类：元素.classList.replace(‘旧类名’, ‘新类名’)
    - 两个参数，第一个是原来的类名，第二个参数是替换的类名
  - 是否包含指定的 类：元素.classList.contains(‘类名’)
    - 判断是否包含指定的类名，返回值是布尔值 true / false
- ⚠ 注意：
  - 类名不加点，并且是字符串
  - 是方法，注意加小括号
- 代码展示：
```
// 获取对象
const box = document.querySelector('.one')

// 追加类名
box.classList.add('two')
box.classList.add('three')

// 删除类名
box.classList.remove('three')

// 切换类名
// 如果有这个类名就是删除，没有就是追加
box.classList.toggle('ab')
box.classList.toggle('one')

// 替换类名
// 将 旧类名box 替换成 新类名box1
box.classList.replace('box', 'box1')

// 判断是否包含指定的类名
console.log(box.classList.contains('box'))		// true
```

classList 和 className区别
- classList 是 追加类名，将新类名追加到旧类名后面，不影响以前的类名
- className 是 覆盖类名，新类名覆盖旧类名，影响以前的类名

1.4.3❗❗ 操作表单元素属性

语法：
- 获取：元素.属性名
- 设置：元素.属性名 = 新值

代码展示：获取表单里面的值

const input = document.querySelector('.computer')
console.log(input.value)
input.value = '扶我起来，我还能干！！！'

⚠ 注意：对象.innerHTML 只能获取 普通元素 的文本，获取 表单元素 的文本需要使用 对象.value
- ⚠ 注意： 对象.value 获得的文本是 包含首尾 的 空白符
  - 想要获得 有效的文本 需要使用 trim() 方法[对象.value.trim()]，删除首尾的空白符
- ⚠注意：获取 button 的文本还是用 innerHTML
表单属性中添加就有效果，移除就没有效果，一律使用 布尔值 表示，如果为 true 代表添加了该属性，如果是 false 代表移除该属性
- disabled（禁用）、checked（选中）
- 除了 ’ '， false， 0， null， undefined，NaN 其余的都是true，但是不建议写，建议写布尔值
- 代码展示：
```
<input type="checkbox" value="" name="">
const input = document.querySelector('.computer')
input.checked = true	// 让复选框选中
input.checked = false	// 让复选框不选中
input.disable = true	// 禁用吗？ - 禁用（true）
input.disable = false // 禁用吗？ - 不禁用（false默认值）
```

1.4.4 ❗❗ 自定义属性

属性

标准属性：标签天生自带的属性，可以直接使用 点语法 操作

自定义属性：

在h5中推出了专门的 data- 自定义属性
在标签上一律以 data- 开头（必须以 data- 开头）
在DOM对象上一律以 dataset 对象方式获取
dataset 是一个 自定义属性集合，包含 该标签内 的所有 自定义属性

代码展示：

<div data-id="1" data-spm="不知道">1div>
<div data-id="2">2div>
<div data-id="3">3div>
<div data-id="4">4div>
<div data-id="5">5div>
<script>
  // 获取元素
  const one = document.querySelector('div')
	// one是一个HtmlElement对象
	console.log(one)
	// dataset是一个对象集合
	console.log(one.dataset)
	// 获取dataset对象里面的id属性
	console.log(one.dataset.id)
	// 获取dataset对象里面的spm属性
	console.log(one.dataset.spm)
script>

❌⛔ 拓展：
- 获取自己瞎定义的属性
- 浏览器不会识别瞎定义属性，并且它不会体现在DOM对象上
- 语法：
```
DOM对象.getAttribute(瞎定义属性名)
```

1.5 ❗❗ 定时器 - 间歇函数

定时器 = setInterval() + setTimeout()
setInterval(函数, 间隔时间)（间歇函数）：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到clearInterval()被调用或窗口关闭
- 间歇函数可以根据时间自动重复执行某些代码
setTimeout(函数, 延迟时间)（延时函数）：在指定的毫秒数后调用函数或计算表达式 (Timeout - 超出)
定时器里面的第一个参数是回调函数
- 将一个函数作为参数传递给另外一个函数，这个函数就是回调函数

1.5.1 开启定时器

语法：

匿名函数：setInterval(函数, 间隔时间)		// Interval - 间隔，间隙
具名函数：setInterval(函数名, 间隔时间)

作用：每隔一段时间回头调用函数（先隔段时间，再调用函数）
- 间隔时间单位是 毫秒(ms)，不用写
- 不是立即调用函数，时间间隔过后再去调用函数
间歇函数返回值
- 表示当前定时器是页面中的第几个定时器，是一个 id数字（数字型）（唯一的）
- 一个间歇函数只有一个返回值，并且是唯一

代码展示：

// 匿名函数
setInterval(() => {
  console.log('扶我起来，我还能干！！！')
}, 1000)

// 具名函数
function fn() {
  console.log('扶我起来，我还能干！！！')
}
setInterval(fn, 1000)
// fn() --- 执行这个函数，只执行一次 （fn()调用这个函数）
// fn --- 每隔一段时间，回头去找fn这个函数（自动调用），再执行（fn是一个变量，代表这个函数）

// 定时器的返回值，是数字型，是id
// 声明一个变量，接收定时器的返回值
let n = setInterval(() => {
  console.log(1)
}, 1000)
console.log(n)			// 1

function fn() {
  console.log('扶我起来，我还能干！！！')
}
let m = setInterval(fn, 1000)
console.log(m)			// 2

1.5.2 关闭定时器

语法：

// 匿名函数
let 变量名 = setInterval(函数, 时间间隔)
// 具名函数
let 变量名 = setInterval(函数名, 时间间隔)
clearInterval(变量)

代码展示：

// 匿名函数
let n = setInterval(() => {
  console.log(11)
}, 1000)

// 具名函数
function fn() {
  console.log('扶我起来，我还能干！！！')
}
let m = setInterval(fn, 1000)

// 关闭定时器
clearInterval(n)
clearInterval(m)

二、❗❗ DOM事件基础

2.1 事件监听（绑定）

让程序检测是否有事件产生，一旦事件触发，就立即调用一个函数做出响应，也称为绑定事件 / 注册事件
事件监听三要素：
- 事件源
- 事件类型
- 事件调用的函数（事件处理函数）

语法：

元素对象.addEventListener('事件类型', 要执行的函数)

⚠ 注意：事件类型 要加引号
- L2 注册的事件不会出现覆盖
- L0 注册的事件会发生覆盖（后面的覆盖前面的）（同对象、同事件类型）

代码展示：

// 获取元素
const btn = document.querySelector('button')
// 事件监听-点击事件
btn.addEventListener('click', () => {
  alert('扶我起来，我还能干！！！')
})

2.2 事件类型

2.2.1 鼠标事件

1️⃣ click - 鼠标点击
2️⃣ mouseenter - 鼠标经过
3️⃣ mouseleave - 鼠标离开
4️⃣ mousemove - 鼠标移动
5️⃣ dblclick - 鼠标左键双击

2.2.2 焦点事件

1️⃣ focus - 获得焦点
2️⃣ blur - 失去焦点

2.2.3 键盘事件

1️⃣ keydown - 键盘按下触发
2️⃣ keyup - 键盘抬起触发
注意： 用鼠标粘贴内容不会触发

2.2.4 文本事件

1️⃣ input - 用户输入事件
- 获取用户 输入文本 ：对象.value
- 获取用户 输入文本 的长度：对象.value.length
  - ⚠ 注意：
    - 得到的是 数字型
    - ⚠ 包括 左右两侧 的空格
- 想要获得有效的 文本和长度 （不包括首尾的空白符）
  - 有效文本： 对象.value.trim()
  - 有效长度： 对象.value.trim().length
  - trim() 方法：删除字符串首尾 空白符（空格、制表符、换行符等其他空白符）
  - 不会改变原始字符串
  - 不适用于null，undefined，Number类型

2.2.5 表单事件

1️⃣ submit - 提交事件
2️⃣ change - 失去焦点并且表单内容发生改变触发事件
3️⃣ 重置表单： form.reset()

2.2.6 光标的坐标

1️⃣ clientX 和 clientY
- 光标距相对于 浏览器可视化窗口左上角 的位置
- 鼠标在窗口中的位置
2️⃣ pageX 和 pageY
- 光标距离 文档流左上角 的位置
- 鼠标在页面中的坐标
- 计算鼠标在某个盒子中的坐标：
  - 鼠标到盒子顶部的距离 = 鼠标到页面顶部的距离 - 盒子顶部到页面顶部的距离
  - 鼠标到盒子左侧的距离 = 鼠标到页面左侧的距离 - 盒子左侧到页面左侧的距离
3️⃣ offsetX 和 offsetY
- 光标距离 DOM元素左上角 的位置
- 鼠标在标签中的位置
⚠ 拓展：利用 js 调用事件
- 语法：元素.事件类型()

2.3 事件对象 - event

也是个对象，里面有事件触发时相关的信息

2.3.1 获取事件对象

⚠ 使用场景：
- 可以判断用户按下哪个键
- 可以判断鼠标点击了哪个元素，从而做相应的操作
语法：
- 在 事件绑定 的 回调函数 的 第一个参数 就是 事件对象
- 一般命名为 event、ev、e
- ```
element.addEventListener('事件类型', function (e) {})
```
在触发 DOM 上的某个事件时，会产生一个事件对象
event对象包含与创建它的特定相关的和方法

2.3.2 事件对象常用属性

type：获取 当前的 事件类型
clientX / clientY：获取光标相对于 浏览器可视化窗口 左上角 的位置
offsetX / offsetY：获取光标相对于 当前DOM元素 左上角 的位置
pageX / pageY : 光标距离 文档流左上角 的位置
key：
- 用户按下 键盘键的值
- 现在不提倡使用keyCode

代码展示：

元素.addEventListener('click', function (e) {
  console.log(e.key)
  console.log(e.type)
})

2.4 环境对象

函数内部特殊的变量 this，代表当前函数运行时所处的环境
每个函0数里面都有 this
非严格模式
- this指向函数的调用者（普通函数里面 this -> window）
- 事件侦听里面，指向事件源
- 箭头函数没有this（箭头函数不会自己创建this，它只会沿用自己所在这条作用域链的上层作用域的this）
- 定时器里面this指向window

2.5 回调函数

官方：如果将函数A作为参数传递给函数B时，我们称函数A为回调函数
把一个函数当作参数来传递给另外一个函数的时候，这个函数就是回调函数

三、❗❗ DOM事件进阶

3.1 事件流

3.1.1 事件流与两个阶段说明

事件流 = 事件捕获 + 事件目标 + 事件冒泡
- 事件流指的是：事件完整执行过程中的 流动路径
- 过程：事件捕获 => 事件目标阶段 => 事件冒泡整个完整的过程就是事件流
两个阶段：
- 捕获阶段：从父到子（从大到小）
- 冒泡阶段：从子到父（从小到大）
- 实际工作中都是使用事件冒泡为主

3.1.2 ❌ 事件捕获（了解）

概念：从DOM的 根元素 开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看见效果
- 代码：
```
DOM.addEventListener(事件类型, 事件处理函数[, 是否使用捕获机制 = false])
```
  - addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
  - 若传入false代表冒泡阶段触发，默认就是false
  - 若是用 L0（on事件类型） 事件监听，则只有冒泡阶段，没有捕获

3.1.3 事件冒泡

从子到父（从小到大）
概念：当一个元素触发事件后，会依次向上调用 所有父级元素 的 同名事件（同种事件类型）
事件冒泡是默认存在的
事件冒泡的必要性
- 如果没有冒泡，给大盒子注册点击事件，点击的是里面的小盒子，会导致大盒子的点击无法执行
- 事件委托（委托给祖先元素）
L2事件监听第三个参数是false，或者默认都是冒泡

代码展示：

const fa = document.querySelector('.father')
const son = document.querySelector('.son')
document.addEventListener('click', function () {
  alert('我是爷爷')
})
fa.addEventListener('click', function () {
  alert('我是爸爸')
})
son.addEventListener('click', function () {
  alert('我是儿子')
})
// 事件冒泡：从子到父
// 弹出框的顺序依次是：儿子 -> 我是爸爸 -> 我是爷爷

3.1.4 阻止冒泡

语法：

事件对象.stopPropagation()		// 方法		停止传播		sp（快捷）
e.stopPropagation()
// 事件对象 - 回调函数的第一个参数

此方法可以阻断事件流动传播 ，不光在冒泡阶段有效，捕获阶段也有效

代码展示：

const fa = document.querySelector('.father')
const son = document.querySelector('.son')
document.addEventListener('click', function () {
  alert('我是爷爷')
})
fa.addEventListener('click', function () {
  alert('我是爸爸')
})
son.addEventListener('click', function (e) {
  alert('我是儿子')
  // 阻止流动传播（阻止事件冒泡）
  // 在这一块卡住，不允许向上传播
  e.stopPropagation()
})
// 弹出框：我是儿子

阻止元素默认行为：

语法：

e.preventDefault()		// 方法 阻止默认	pd（快捷）
// 阻止 链接跳转
// 阻止 表单提交（缺点：提交数据页面h）

代码展示：

<body>
  <form action="http://www.itcast.cn">
    <input type="submit" value="免费注册">
  form>
  <a href="http://www.baidu.com">百度一下a>
  <script>
    // 获取元素
    const a = document.querySelector('a')
    const form = document.querySelector('form')
    // 事件侦听-a-点击事件
    a.addEventListener('click', function (e) {
      // 阻止a的默认行为-页面跳转
      e.preventDefault()
    })
    // 事件侦听-form-提交事件
    form.addEventListener('submit', function (e) {
      // 阻止form的默认行为-表单的提交
      e.preventDefault()
    })
  script>
body>

3.1.5 两种鼠标事件的区别

⚠ 注意：
- mouseover 和 mouseout 会 有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果（推荐）

3.1.6 解绑事件

1️⃣ L0事件解绑（on方式）

直接使用 null 覆盖就可以实现事件的解绑

代码展示：

btn.onclick = function () {
  alert('点击了')
}
// L0事件移除解绑
btn.onclick = null

2️⃣ L2 事件解绑

语法：
```
removeEventListener(事件类型, 函数名[, 获取捕获或冒泡阶段])
```
- ⚠ 中括号包裹的参数可以省略
- ⚠ 匿名函数 无法进行 事件解绑 操作
- ⚠ 解绑的时候必须是 同一个函数（两个函数体一样的匿名函数不是同一个函数）

代码展示：

<script>
  // 获取元素
  const btn = document.querySelector('button')
	// 声明函数
	let fn = function (e) {
            alert(`事件解绑语法：
            元素.removeEventListener(事件类型, 函数名)
            匿名函数 无法进行 事件解绑 操作
            ${e.target.tagName}
          `)
        }
	// 事件侦听-点击事件
	btn.addEventListener('click', fn)
	// 事件解绑
	btn.removeEventListener('click', fn)
</script>

3.1.7 两种注册事件的区别

1️⃣ 传统on 注册（L0）
- 同一个对象，后面注册的事件会覆盖前面注册的事件（同一个事件）
- 直接使用 null 覆盖就可以实现事件的解绑
- 都是冒泡阶段执行的（只有冒泡没有捕获）
2️⃣ 事件监听注册（L2）
- 语法：addEventListener(事件类型, 事件处理函数[ , 是否使用捕获 = false])
  - 既能捕获也能冒泡
  - 捕获将第三个参数改成 true
  - 冒泡不用写，默认就是冒泡（false）
- 后面注册的事件 不会覆盖 前面注册的事件（同一个事件）
- 可以通过第三个参数去确定是在冒泡阶段或者捕获阶段执行的
- 必须使用 removeEventListener(事件类型, 事件处理函数[ , 获取捕获或者冒泡阶段])
- ⚠ 匿名函数无法解绑

3.2 事件委托

优点：
- 减少注册次数
- 提高程序性能
- ⚠ 为未来元素预备事件（添加节点）
原理： 事件委托其实是利用 事件冒泡 的特点
- 给 父元素 注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
⚠ 注意： 事件触发元素嵌套关系很复杂就不可以使用事件委托
实现：
- 获得真正触发事件的元素（对象）：事件对象.target
- 获得真正触发事件元素的标签名称：事件对象.target.tagName

代码展示：

<body>
  <ul>
      <li>第1个孩子li>
      <li>第2个孩子li>
      <li>第3个孩子li>
      <li>第4个孩子li>
      <li>第5个孩子li>
      <p>我不需要变色p>
  ul>
  <script>
      // 1.点击每个小li，当前li文字变色
      // 按照事件委托的方式，委托给父级，事件写到父级身上
      // 获取元素
      const ul = document.querySelector('ul')
      // 事件绑定
      ul.addEventListener('click', function (e) {
          // e：事件对象
          // 得到一个事件对象
          // console.log(e)
          // 得到被点击的元素
          // console.log(e.target)
          // 得到被点击元素的标签名称
          // 得到的标签名称是 大写的 字符串
          // console.log(e.target.tagName)	// 'LI'
          // 判断点击的是不是li，如果是li文字就变颜色
          if (e.target.tagName === 'LI') {
              e.target.style.color = 'red'
          }
      })
  script>
body>

3.3 其他事件

3.3.1 页面加载事件

⚠ JavaScript 写在body上面，必须使用 load事件或者 DOMContentLoaded事件

1️⃣ load 事件

等待页面 所有外部资源（外联CSS、外联JavaScript，图片……）加载完毕时，就回去执行回调函数
事件名： load（等待）

监听 整个页面 所有外部资源 加载完毕

⚠ 给 window 添加 load 事件

语法：

window.addEventListener('load', function () {
  //	执行操作
})

代码展示：script标签在body标签上方

<script>
  // 给 window 添加 页面加载事件（load）
  window.addEventListener('load', function () {
  // 获取元素
  const btn = document.querySelector('button')
  // 事件侦听-点击事件
  btn.addEventListener('click', function () {
    alert(`
       页面加载事件
       给 window 添加 load 事件
       window.addEventListener('load', function() {})
      `)
  })
})
</script>
<body>
  <button>点击</button>
</body>

⚠ 注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定 load事件

2️⃣ DOMContentLoaded 事件

当 初始的HTML文档（DOM节点） 被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待外部资源加载
事件名： DOMContentLoaded

监听页面 DOM节点 加载完毕

⚠ 给 document 添加 DOMContentLoaded 事件

语法：

document.addEventListener('DOMContentLoaded', function () {
  // 执行的操作
})

代码展示：

document.addEventListener('DOMContentLoaded', function () {
  // 获取元素
  const btn = document.querySelector('button')
  // 事件侦听-点击事件
  btn.addEventListener('click', function () {
    alert(`
        页面加载事件
        给 document 添加 DOMContentLoaded 事件
        document.addEventListener('DOMContentLoaded', function() {})
      `)
  })
})

3.3.2 元素滚动事件 - scroll

滚动条 滚动的时候触发（⚠ 页面必须有滚动条才能触发）
- 让页面具有 滑动效果 (不是瞬间到指定位置，而是缓慢滑动到指定位置)
  - ```
  /* 页面滑动 */
  html {
    /* 让滚动条丝滑的滑动 */
    /* 滚动-行为：平滑 */
    scroll-behavior: smooth;
  }
```

让 html标签（页面最大的标签）滚动

document.documentElement.scrollTop // html被卷去的高度
window.pageYoffset		// 页面滚出去的高度（页面在竖轴的偏移量）
document.documentElement.scrollTop === window.pageYoffset

应用场景：固定导航栏、返回顶部
事件名： scroll
监听 整个页面 滚动
- 语法：
```
window.addEventListener('scroll', function () {
  // 执行的操作
})
```
- ⚠ 注意：
  - 给 window（常用）或 document 添加 scroll 事件
  - 监听某个元素的内部滚动直接给某个元素加即可
- 代码展示：

获取位置

scrollTop（被卷去的头部）和 scrollLeft（被卷去的左侧）（属性）

⚠ 读写属性（可以读取亦可以赋值）
⚠ 获取到的是数字，赋值的时候 不带单位

检测页面滚动的头部距离

document.documentElement.scrollTop = 数字

```
window.pageYoffset - 只读属性
```

获取被卷去的大小
获取 元素内容 往左、往上滚出去 看不到 的距离
⚠ 得到的是：数字型 不带单位
尽量写在 scroll事件 里面
代码展示：

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    height: 3000px;
  }

  div {
    display: none;
    margin: 100px auto;
    width: 470px;
    height: 150px;
    border: 1px solid #000;
    text-align: center;
    font-size: 20px;
    font-family: '隶书';
  }

  .active {
    display: block;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
  }
style>

<body>
  <div>
    世间的悲喜皆不如我所愿，但苦于乐皆是恩赐！！！
    世间的悲喜皆不如我所愿，但苦于乐皆是恩赐！！！
    世间的悲喜皆不如我所愿，但苦于乐皆是恩赐！！！
    世间的悲喜皆不如我所愿，但苦于乐皆是恩赐！！！
    世间的悲喜皆不如我所愿，但苦于乐皆是恩赐！！！
    世间的悲喜皆不如我所愿，但苦于乐皆是恩赐！！！
  div>
  <script>
    // 事件侦听-页面滚动事件-window
    window.addEventListener('scroll', function () {
      // 获取html元素
      const html = document.documentElement
      // 获取div元素
      const div = document.querySelector('div')
      // console.log(html.scrollTop);		// 得到的是数字型
      // scrollTop >= 300显示div并固定在可视区域顶部，小于300隐藏
      if (html.scrollTop >= 300) {
        div.classList.add('active')
      } else {
        div.classList.remove('active')
      }
    })
  script>
body>

让页面 滚动到指定位置

1️⃣ 属性赋值

document.documentElement.scrollTop = 指定位置距离顶部的距离

2️⃣ 方法
```
window.scrollTo(x, y)
```

3.3.3 ❌ 页面尺寸事件 - resize（了解）

窗口尺寸改变 的时候触发事件

事件类型： resize

语法：

window.addEventListener('resize', function () {
  // 执行的代码
})

检测屏幕宽度

语法：

window.addEventListener('resize', function () {
  let w = document.documentElement.clientWidth
  console.log(w)
})

获取元素宽高 （属性）
- 获取元素的 可见部分 宽高（不包含border、margin、滚动条）
- clientWidth 和 clientHeight
- 得到的是 数字型

3.4 ❗❗ 元素的尺寸和位置

1️⃣ 获取宽高：（属性）
- 获取元素 自身的宽高
  - 内容 + padding + border
- offsetWidth 和 offsetHeight
- 获取到的是数值
- ⚠ 获取的是 可视宽高，如果盒子是隐藏的，获取的结果是0
2️⃣ 获取位置：
- ① 获取元素距离自己 最近一级 定位 祖先元素 的 左、上 距离
  - 带有 定位属性 的祖先元素
  - 如果都没有，就以文档左上角为准
- offsetLeft 和 offsetTop
  - 相对于页面来说
  - ⚠ 只读属性
- 获取的是可视宽高，若盒子隐藏，则获得的是0
- ② ❌ 元素.getBoundingClientRect() （了解）
  - 返回元素的大小及其 相对于视口的位置
  - 相对于视口
  - 代码展示：
```
const div = document.querySelector('div')
div.getBoundingClientRect()
```

✅ 总结

属性	作用	说明
scrollLeft 和 scrollTop	被卷去的头部和左侧	配合页面滚动(scroll 事件) 来用，可读写
clientWidth 和 clientHeight	获得元素的宽度和高度	不包含border、margin、滚动条，用于js 获取元素大小只读属性
offsetWidth 和 offsetHeight	获得元素的宽度和高度	包含border、padding、滚动条等，只读属性
offsetLeft 和 offsetTop	获取元素距离自己定位父元素的左、上距离	获取元素位置的时候使用，只读属性

scroll系列、 client系列、 offset系列
- scroll系列： 标签内部内容的大小，位置
  - scrollTop / scrollLeft：表示标签真实内容相对于标签的位置
  - ❌scrollWidth / scrollHeight：表示标签真实内容的大小（和标签本身的大小无关，是内容的宽高）
- client系列： 标签 容纳范围（border里面） 的大小、位置
  - clientWidth / clientHeight：表示标签内容区域的大小
  - ❌clientTop / clientLeft：表示标签内容区域的位置（几乎不用，仅仅表示上边框的高度，左边框的宽度）
- ✔ offset系列： 标签本身 的大小、位置
  - offsetWidth / offsetHeight：包含content + padding + border
  - offsetTop / offsetLeft：最近一级 的 带有定位属性 的 祖先元素 的相对位置（如果没有定位，那么就是相对于body）

拓展：

添加css让页面滚动平滑
- ```
html {
  scroll-behavior: smooth;
}
```

if单分支语句拓展：

if (old) old.classList.remove('active')

old && old.classList.remove('active') - 逻辑与

old?.classList.remove('active') - 可选链

属性选择器

document.querySelector('[data-name=new]')
自定义属性 的 属性值 可以 省略 双引号（不推荐）

四、❗❗ 日期对象

用来 表示时间 的对象
作用： 得到 当前系统 的时间
日期对象：Date构造函数的实例，记录了一个时间信息

4.1 实例化

实例化：有 new 关键字的都是实例化（见 JS 高级）

4.1.1 得到当前时间

创建一个时间对象并获取时间

语法：
```
const 常量名 = new Date()
```

代码展示：

const date = new Date()
console.log(date)
// Wed Aug 03 2022 20:37:52 GMT+0800 (中国标准时间)
// 周三 八月 3号 年份 时间

4.1.2 指定时间

倒计时 的时候使用

语法：

const 常量名 = new Date('指定的时间')

⚠ 参数:
- 数字 : 月份是从 0 开始的
- 字符串 : 月份是正常的

代码展示：

const date = new Date('2022-8-3 20:50:00')
let h = date.getHours()
console.log(h)	// number
console.log(date)
console.log(typeof date)	// object
// Wed Aug 03 2022 20:50:00 GMT+0800 (中国标准时间)

4.2 日期对象方法

语法	作用	说明
对象.getFullYear()	获得年份	获取四位年份
对象.getMonth()	获得月份	取值为 0 ~ 11
对象.getDate()	获取月份中的某一天	不同月份取值不同
对象.getDay()	获取星期	取值为 0 ~ 6
对象.getHours()	获取小时	取值为 0 ~ 23
对象.getMinutes()	获取分钟	取值为 0 ~ 56
对象.getSeconds()	获取秒	取值为 0 ~ 59
对象.getMilliseconds()	获取毫秒	取值为 0~1000

⚠ 注意：
- 周日是一周的开始 -> 周日 = 0
- 当前月份 = 获取的月份 + 1
- ⚠ 得到的都是 数字型

4.3 时间的另一种写法

时间对象.toLocaleString() ：年月日时分秒
时间对象.toLocaleDateString() :年月日
时间对象.toLocaleTimeString() :时分秒

代码展示：

// 获得当前系统时间
const systemTime = new Date()
// 从 获取的当前系统时间（systemTime）里找
// 获取年份
const year = systemTime.getFullYear()
// 获得月份
const month = systemTime.getMonth() + 1
// 获取月份中的某一天
const date = systemTime.getDate()
// 获取星期
const day = systemTime.getDay()
// 获取小时
const hours = systemTime.getHours()
// 获取分钟
const minutes = systemTime.getMinutes()
// 获取秒
const seconds = systemTime.getSeconds()
console.log(systemTime);
console.log(`${year} 年 ${month} 月 ${date} 日 周${day}  ${hours} 时 ${minutes} 分 ${seconds} 秒`)
// Wed Aug 03 2022 21:14:56 GMT+0800 (中国标准时间)
// 2022 年 8 月 3 日 周3  21 时 14 分 56 秒

格式化时间：

DOCTYPE html>
  <html lang="en">

   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Documenttitle>
<style>
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	}

	div {
  	margin: 100px auto;
  	width: 600px;
  	height: 100px;
  	border: 5px solid #969696;
  	background-color: #d7d7d7;
  	color: hsl(338, 100%, 50%);
  	font-size: 44px;
  	font-weight: 700;
  	font-family: '华文隶书';
  	text-align: center;
  	line-height: 100px;
	}
style>
head>

<body>
  <div>div>
  <script>
      // 写法一：  
  	const div = document.querySelector('div')
          function getTime() {
              const date = new Date()
              let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
              let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
              let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
              return `当前时间：${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 	${hours}:${minutes}:${seconds}`
          }
          
          div.innerHTML = getTime()
          setInterval(function () {
               div.innerHTML = getTime()
          }, 1000)
          // 当前时间：2022-8-3 22:45:50

          // 写法二：自动补0
          /*
              // 定时器外面再写一次的原因：定时器隔1s再去执行，用外面的填补页面空白
              div.innerHTML = date.toLocaleString()
              // div.innerHTML = date.toLocaleDateString()
              // div.innerHTML = date.toLocaleTimeString()
              setInterval(function () {
                  const date = new Date()
                  div.innerHTML = date.toLocaleString()	 // 2022/8/3 23:00:00
                  // div.innerHTML = date.toLocaleDateString()    // 2022/8/3
                  // div.innerHTML = date.toLocaleTimeString()    // 22:48:20
              }, 1000)
          */
  script>
body>
html>

4.3 时间戳

使用场景：倒计时
时间戳： 是指1970年01月01日00时00分00秒起 至现在 的 毫秒数

注意：

时间戳 是 唯一的

⚠ 中国在 东8区

const date = +new Date('1970-01-01 00:00:00') / 1000 / 60 / 60
console.log(date)	// -8

⚠ 算法：
- 将来的时间戳 - 当前的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数转换为剩余时间的日时分秒就是倒计时
- 展示：
```
将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
1000ms 转换时分秒就是 0小时0分1秒
```

三种获取时间戳的方法：

1️⃣ 使用 getTime() 方法

语法：

const date = new Date()
console.log(date.getTime())	// 1659539589145 毫秒数
// new Date().get.Time()
拓展:
时间对象.getTime() 和 时间对象.valueOf() 的到的结果一样
console.log(date.getTime() === date.valueOf())	// true

⚠ 注意：
- 必须先实例化
- ⚠ 可以返回 指定时间的时间戳

2️⃣ ✔简写 +new Date()

语法：

console.log(+new Date())  // 1659539732765 毫秒数

⚠ 注意：
- + -> 正号（隐式转换）
- ⚠ 可以返回 指定时间的时间戳
  - 代码展示：
```
conlose.log(+new Date('2022-10-1 07:30:00'))
// 1664580600000 -- 指定时间的时间戳
```

3️⃣ 使用 Date.now()
- 语法：
```
console.log(Date.now())  // 1659540040487 毫秒数
```
- ⚠ 注意：
  - 没有实例化
  - ⚠ 只能得到 当前的时间戳

时间转换公式
- 通过时间戳得到是毫秒，需要转换为秒在计算
- 转换公式：
  - days： d = parseInt(总秒数 / 60 / 60 / 24)
  - hours： h = parseInt(总秒数 / 60 / 60 % 24)
  - minutes： m = parseInt(总秒数 / 60 % 60)
  - seconds： s = parseInt(总秒数 % 60)

✔ 倒计时函数：

const element = document.qurySelector('css选择器')
function getCountTime(time) {
  // 得到当前的时间戳（毫秒）
  const now = +new Date()
  // 得到未来时间时间戳（毫秒）
  const last = +new Date(time)
  // 得到剩余的时间戳（毫秒） 并转换为 秒
  const count = (last - now) / 1000
  // 将 剩余秒数 -> 天、时、分、秒
  let day = parseInt(count / 60 / 60 / 24)
  let hours = parseInt(count / 60 /60 % 24)
  // 补0
  hours = hours < 10 ? '0' + hours : hours
  let minutes = parseInt(count / 60 % 60)
  // 补0
  minutes = minutes < 10 ? '0' + minutes : minutes
  let seconds = parseInt(count % 60)
  // 补0
  seconds = seconds < 10 ? '0' + seconds : seconds
  return `${day} 天 - ${hours}:${minutes}:${seconds}`
}

function getRemainingTime(element, time) {
  // 先执行一次：定时器过1s再去执行，会有1s的显示空白时间，让它限制性，填补空白，再让后面的覆盖
  element.innerHTML = getCountTime(time)
  setInterval(function () {
      element.innerHTML = getCountTime(time)
      }, 1000)
}

getRemainingTime(div, '2022-10-1 00:00:00')

五、❗❗ 节点操作

浏览器 使用对象来记录 网页内容
- 浏览器把网页内容翻译成一个个的对象，把网页内容的特征翻译成对象的属性
- 这个对象就称为 DOM对象
- 网页内容的特征：
  - 标签属性
  - 标签内容
  - 标签上下级
  - …
网页内容、对象
- 网页内容：标签、文本、注释
- DOM对象：标签（元素）节点、文本节点、注释节点
- 网页内容和 DOM对象一一对应
DOM树
- 每个DOM对象中都有表示层级关系的属性，这些属性把所有DOM对象联系在一起，形成一个树状结构，称为DOM树
- DOM树 === 网页

5.1 DOM节点

DOM节点： DOM树里面每一个内容都称之为节点
节点类型：
- 1️⃣ ❗✔元素节点：
  - 所有的标签
  - html 是 根节点
- 2️⃣ 属性节点：
  - 所有的属性
- 3️⃣ 文本节点：
  - 所有的文本

5.2 查找节点 - 属性

有效返回值 是一个对象
无效返回值 - null

5.2.1 父节点

1️⃣ parentNode属性

语法：
```
子元素.parentNode
```
返回值：
- ⚠ DOM对象
- 最近一级 的父节点（亲爸爸），找不到 返回 null

代码展示：

<div class="yeye">
    <div class="dad">
        <div class="baby">x</div>
    </div>
</div>

<script>
    const baby = document.querySelector('.baby')
    console.dir(bady)		// div.bady -> DOM对象
    console.dir(baby.parentNode)	// div.dad -> DOM对象
    console.dir(baby.parentNode.parentNode)	  // div.yeye -> DOM对象
</script>

关闭广告：

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    .box {
      position: relative;
      width: 1000px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      text-align: center;
      font-size: 50px;
      line-height: 200px;
      font-weight: 700;
    }

    .box1 {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 20px;
      height: 20px;
      background-color: skyblue;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      cursor: pointer;
    }
  style>
head>

<body>
  <div class="box">
    我是广告
    <div class="box1">Xdiv>
  div>
  <div class="box">
    我是广告
    <div class="box1">Xdiv>
  div>
  <div class="box">
    我是广告
    <div class="box1">Xdiv>
  div>

  <script>
    // const smallBox = document.querySelectorAll('.box1')
    /* for (let i = 0; i < smallBox.length; i++) {
      smallBox[i].addEventListener('click', function () {
        this.parentNode.style.display = 'none'
      })
    } */

    // 事件委托
    document.body.addEventListener('click', function (e) {
      if (e.target.className === 'box1') {
        e.target.parentNode.style.display = 'none'
      }
    })
  script>
body>

html>

5.2.2 子节点

1️⃣ ❌childNodes 属性
- 语法：
```
父元素.childNodes
```
- 返回值： 获得 所有子节点、包括文本节点（空格、行换）、注释节点等

2️⃣ ⚠ children 属性

语法：
```
父元素.children
```
⚠ 返回值： 伪数组 （要想得到里面的每一个节点还是要遍历
⚠ 注意：
- 仅获得所有 元素节点（标签）
- 只选亲儿子，只不过是把亲儿子里面包含的所有节点（元素、文本、注释…）拿过来

代码展示：

<ul>
   <li>
        1
        <p>6</p>
        <span>7</span>
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
  // 获取子节点
  // 语法：父元素.children
  // 返回值：伪数组
  // 仅 获得 所有 元素节点（标签）
  console.log(document.querySelector('ul').children);
	// 得到的是一个伪数组
</script>

5.2.3 兄弟节点

1️⃣ 下一个兄弟节点
- nextElementSibling 属性
- 语法：
```
兄弟元素.nextElementSibling
```
- ⚠ 返回值：
  - 有下一个兄弟节点，得到的就是下一个元素
  - 没有就是 null
2️⃣ 上一个兄弟节点
- previousElementSibling 属性
- 语法：
```
兄弟元素.previousElementSibling
```
- ⚠ 返回值：
  - 有上一个兄弟节点，得到就是上一个元素
  - 没有就是 null

代码展示：

<ul>
  <li>
      1
      <p>6</p>
      <span>7</span>
  </li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<script>
  // 上一个兄弟节点
  // 语法：兄弟元素.previousElementSibling
  // 下一个兄弟节点
  // 语法：兄弟元素.nextElementSibling
  console.log(document.querySelector('ul li:nth-child(2)').nextElementSibling)
</script>

5.3 增加节点

先创建再追加

5.3.1 创建节点

语法：

document.createElement('标签名')		// 文档.创建元素

创建的节点是一个正常的DOM对象

⚠ 注意：

document.createElement()  --  创建的是空标签

5.3.2 追加节点

1️⃣ 插入到 父元素 的 最后一个 子元素
- 语法：
```
父元素.appendChild(要插入的元素)	// 追加孩子
```
- ⚠ 注意： 做为 父元素 里面的 最后一个 子元素
- 代码展示：⬇
2️⃣ 插入到 父元素 中 某个子元素 的前面
- 语法：
```
父元素.insertBefore(要插入的元素, 在哪个元素前面)	// 插入在…之前
```
- ⚠ 注意： 插入到 父元素 里面的 指定位置
- 代码展示：⬇
⚠ 注意： appendChild 和 insertBefore 如果插入的是页面上 已经存在 的标签，会有剪切效果（将已经存在的元素从原位置剪切到新位置）

代码展示：

<style>
    div,
    li {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    li:first-child {
      width: 150px;
      height: 50px;
      background-color: #b8f0e8;
    }

    li:last-child {
      width: 150px;
      height: 50px;
      background-color: #a6a6db;
    }

    div {
      width: 150px;
      height: 50px;
      background-color: #c0bfbf;
    }
style>

<body>
  <ul>
    <li>我是老大li>
  ul>

  <script>
    // 增加节点（节点 -> 元素节点）
    //  1.创建节点
    //    语法：document.createElement('标签名称')
    //  2.插入节点
    //    （1）.作为父元素里面的最后一个子元素
    //        语法：父元素.appendChild(要插入的元素)
    //    （2）.插入到父元素里面指定位置（插入到父元素里面某个子元素的前面）
    //        语法：父元素.insertBefore(要插入的元素, 在那个子元素前面)

    // 1.创建节点
    const li = document.createElement('li')
    li.innerHTML = '我是老二'
    // 2.插入节点
    //    2.1获取父元素
    const ul = document.querySelector('ul')
    //    2.2作为父元素里面的最后一个子元素
    ul.appendChild(li)

    // 1.创建节点
    const div = document.createElement('div')
    div.innerHTML = '我是老大的大哥'
    // 2.插入节点
    //    2.1获取父元素
    const body = document.body
    //    2.2插入到父元素指定位置（插入到父元素里面指定元素前面）
    body.insertBefore(div, ul)
    // 将创建的节点始终插入到父元素的最前面
    /*
      body.children  // 包含body下所有的（亲）子节点伪数组
    	body.insertBefore(div, body.children[0])
    */
  script>
body>

5.3.3 克隆节点

特殊情况的新增节点
应用场景：轮播图
步骤：
- 1️⃣ 复制一个原有的节点
- 2️⃣ 把 复制的节点 放入到 指定的 元素内部
语法：
```
元素.cloneNode(布尔值)
```
- clondNode会克隆出一个跟原标签一样的标签（原标签上面有什么，克隆后的标签上面就有什么）（是两个元素，克隆成功后前后两个元素没有任何关系）
- 参数：
  - true - 深克隆： 克隆时包含 后代节点 一起克隆（节点 -> 文本节点、注释节点等所有的节点）
  - false - 浅克隆： 克隆时 不包含 后代节点、
  - 默认值 为 false
- 代码展示：
```
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<script>
    const ul = document.querySelector('ul')
    // const newLi = ul.children[0].cloneNode(true)
    // newLi.innerHTML = 'newLi'
    // ul.appendChild(newLi)
    ul.insertBefore(ul.children[0].cloneNode(true), ul.children[11])
</script>
```

5.4 删除节点

在 JavaScript 原生DOM操作中，要删除元素 ⚠ 必须通过父元素 删除

语法：

父元素.removeChild(要删除的元素)

⚠ 注意：
- 如果不存在父子关系则删除不成功
- 删除节点和隐藏节点（display: none;）有区别
  - 删除节点：从DOM中删除节点
  - 隐藏节点：只是在页面上不显示，DOM节点依然存在
✔ 补充:
- 语法： 自杀式z
```
删除的元素.remove()
```
拓展：
- 替换节点：
- 语法：
```
parentNode.replaceChild(newChild, oldChild);
```
- 方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点
重绘和回流
- 重绘： 由于节点（元素）样式的改变并不会影响它在文档流中的位置和文档布局时，则是重绘
- 回流： 元素的尺寸、结构、布局等发生变化时，浏览器就会重新渲染部分或全部文档的过程称为回流
- 重绘不一定一起回流，但回流一定会引起重绘
- 简单理解，影响到了布局，就会有回流

六、❌ M端事件

常见的触屏事件（touch）

触屏 touch 事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

七、❗ JS插件

熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/
看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
查看基本使用流程 https://www.swiper.com.cn/usage/index.html
查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html
注意: 多个swiper同时使用的时候, 类名需要注意区分
使用步骤：
- 引入资源
  - css文件
  - js文件
- 导入代码
  - 复制html结构
  - 复制css样式
  - 复制js行为

八、❗❗ window对象

window（JS中的顶级对象） > BOM（浏览器对象模型） > DOM（页面文档对象模型）

8.1 BOM（浏览器对象模型）

BOM（Browser Object Model）- 浏览器对象模型
- 由一些列相关的对象构成，并且每个对象都提供了很多方法和属性
- 浏览器的内容被翻译成了对象
window 对象是一个 全局对象，也可以说是 JavaScript 中的 顶级对象
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
⚠ 所有通过 var 定义在 全局作用域 中的变量、函数都会变成 window对象 的属性和方法
⚠ window对象下的属性和方法调用的时候可以省略window
DOM 和 BOM 区别：

8.2 定时器 - 延时函数

定时器 = 间歇函数（setInterval()） + 延时函数（setTimeout()）
让代码延迟执行的函数 - setTimeout()

语法：

setTimeout(回调函数, 等待的毫秒数)

清除延时函数：

let timerId = serTimeout(回调函数, 等待的毫秒数)
clearTimeout(timerId)

⚠ 注意：
- setTimeout 仅仅 只执行 一次，平时省略 window
- 延时函数需要等待，所以后面的代码先执行
- 每一次调用延时器都会产生一个新的延时器
间歇函数和延时函数的区别：
- 间歇函数：每隔一段时间就执行一次，除非手动清除
- 延时函数：执行一次

8.3 JS执行机制

JS代码 从上到下 执行
单线程： 同一时间只能做一件事
- 所有的任务需要排队，前一个任务结束，才会执行后一个任务

8.3.1 同步与异步

1️⃣ 同步
- 前一个任务结束后再执行后一个任务，程序的执行顺序 和 任务的排列顺序 是 一致的
- 同步任务： 都在 主线程 执行栈 上执行
2️⃣ 异步
- 如果执行一个任务需要花费一定的时间，在执行这个任务的同时可以去执行别的任务
- 耗时的都是异步
- JS的异步是通过 回调函数 实现的
- 异步任务的三种类型
  - 普通事件（click、mouseenter、mouseleave、……）
  - 资源加载
  - 定时器（间歇函数（setInterval） + 延时函数（setTimeout））
- 异步任务 添加到 任务队列 （消息队列）中
同步和异步的本质区别：
- 一条流水线上的各个流程 执行顺序不同
3️⃣ 执行机制：
- ① 先执行 任务栈 中的 同步任务
- ② 异步任务 添加到 任务队列 里面
  - 对 异步任务 进行排序（根据每个异步任务所消耗的时间）
- ③ 一旦 执行栈 里面的所有 同步任务 执行完毕，系统就会 按次序 读取 任务队列 中的 异步任务，于是 被读取 的 异步任务 结束 等待状态，进入 执行栈，开始执行。

8.3.2 事件循环 - event loop

由于 主线程 不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为 事件循环（enevt loop）
事件循环： js执行代码时，会把同步任务添加到主线程执行栈中执行，把满足条件的异步任务推到任务队列排队等候执行，事件循环是一种轮询机制，当执行栈中的所有同步任务执行完毕之后，系统就会依次读取任务队列中的异步任务，异步任务结束等待状态，按照次序添加到执行栈中执行。

8.4 location 对象

location 的 数据类型 是对象，它拆分并保存了 URL地址 的 各个组成部分
常用属性和方法：
- 1️⃣ ✔ href： 属性获取 完整的URL地址，对其 赋值时 用于 地址的跳转
  - ```
  const btn = document.querySelector('button');
  btn.addEventListener('click', function () {
      location.href = 'https://www.baidu.com';
  });
```
- 可以后退
- 2️⃣ search： 属性获取地址中 携带的参数，符号 ? 后面部分
  - ```
  console.log(location.search); 	// 字符串
```
- 3️⃣ hash： 属性获取地址中的 哈希值，符号 # 后面部分
  - ```
  console.log(location.hash);		// 字符串
```
- 4️⃣ reload(是否使用缓存)： 方法用来刷新当前新页面，传入参数 true 时表示 强制刷新，默认false使用缓存刷新
  - ```
  const btn = document.querySelector('.reload');
  btn.addEventListener('click', function () {
    // F5 -> 刷新
    //location.reload();
    // F5+Ctrl -> 强制刷新  
    location.reload(true);
  });
```
- 5️⃣ replace(): 方法页面跳转（覆盖旧地址）
  - ```
  const btn = document.querySelector('button');
  btn.addEventListener('click', function () {
      location.replace('https://www.baidu.com');
  });
```
- ⚠ href属性 和 replace()方法 实现页面跳转的区别：
  - href属性： 保留 原地址，具有回退功能
  - replace()方法： 覆盖 原地址，没有回退功能

8.5 navigator 对象

navigator 的 数据类型 是对象，该对象记录了 浏览器 自身的 相关信息

常用属性和方法：

浏览器相关信息：navigator.userAgent

通过 userAgent 检测 浏览器 的版本及平台

// 检测userAgent（浏览器信息）
!(function () {
  const userAgent = navigator.userAgent;
  // 验证是否为Android或iPhone
  const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);
  const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
  // 如果是Android或iPhone，则跳转至移动站点
  if (android || iphone) {
    location.href = 'http://m.itcast.cn';
  }
})();

8.6 history 对象

histroy 的 数据类型 是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应。

常用属性和方法：

back()： 可以后退功能
forward()： 前进功能
go(参数)： 前进后退功能
- 参数：
  - 1：前进一个页面（back()）
  - 0：刷新页面（使用缓存刷新） (reload())
  - -1： 后退一个页面 (forward())

代码展示：

<button>后退button>
<button>前进button>
<script>
    // 获取元素
    const back = document.querySelector('button');
    const forward = back.nextElementSibling;
    // 事件侦听-点击事件
    back.addEventListener('click', function () {
    // 前进一步
    history.go(1);
    });
    forward.addEventListener('click', function () {
    // 后退一步
    history.go(-1);
    });
script>

九、❗❗ 本地存储

数据存储 在用户 浏览器 中（硬盘）
设置、读取方便、甚至 页面刷新 不会丢失 数据
容量较大、sessionStprange 和 localStorage 约5M
为什么要将数据存储到本地存储里？
- 数据持久化（数据不丢失）

9.1 本地存储分类

9.1.1 localStorage

作用： 可以将数据 永久存储 在本地（用户电脑），除非手动清除，否则关闭页面也会存在
生命周期： 什么时候失效，什么时候死掉
特性：
- 可以多窗口（页面）共享（同一浏览器可以共享）（不能跨域（同一个域名）使用）
- 以 键值对 的形式 存储使用

⚠ 语法：

1️⃣ 存储/修改数据：

localStorage.setItem(key, value)		
// 设置每个小项，key和value要加引号，key和value可以是变量

有这个键就是修改，没有就是添加

代码展示：

// 本地存储 - localStorage
// 存储数据 - localStorage.setItem(key, value);
// 要加引号
localStorage.setItem('uname', '邵秋华');

2️⃣ 获取数据：

localStorage.getItem(key)			// 获取里面的项，key必须加引号

返回值：
- 有这个key，就返回对应的值
- 没有这个key，返回 null

代码展示：

// 获取数据 - localStorage.getItem(key)
// 要加引号
console.log(localStorage.getItem('uname'));	// 邵秋华

3️⃣ 删除某项数据：

localStorage.removeItem(key)		// 移除里面的项， key必须加引号

代码展示：

// 删除本地存储
localStorage.removeItem('uname');

4️⃣ 清空数据：
```
localStorage.clear()
```
- 慎用
- 清空全部数据

⚠⚠ 注意：

⚠ 所有的键 必须加 引号
有这个键就是修改，没有就是添加
⚠ 本地存储 只能存储 字符串 类型的数据
得到的值也是字符串型
如果value写的是数值型，存的时候会转换成字符型

代码展示：

const arr = [1, 2, 3, 4];
arr.forEach((item, index) => {
  localStorage.setItem(`id:${index}`, item);
  console.log(localStorage.getItem(`id:${index}`));	// 1 2 3 4（字符串）
  console.log(typeof (localStorage.getItem(`id:${index}`)));// string
});

9.1.2 sessionStprange

特性：
- 生命周期 为 关闭浏览器窗口
- 在同一个窗口（页面）下 数据可以共享
- 以 键值对 的形式使用
- 用法跟localStorage基本相同
⚠ localStorage 与 sessionStorage 的区别
- 他们的作用相同，但是 存储方式 不同，因此应用场景也不同
- localStorage 的数据可以 长期存储，关闭浏览器 数据也 不会消失，除非手动清除
- sessionStorage 的数据时是 临时存储，页面被关闭，存储在sessionStorage里的数据会被清除

9.2 存储复杂数据类型

本地存储 只能存储 字符串，不能存储复杂数据类型
JSON：
- 属性和值都有引号，而且是双引号
- 一种字符串格式的名称
- 把数组/对象转换为结构为 ”数组/对象“ 的字符串
- 只能存：数字、字符串、对项
- 不能存null、undefined、函数
- ⚠ JSON.parse(转换数据)：要转换的数据不是JSON格式的字符串

存储复杂数据类型步骤：

1️⃣ 将 复杂数据类型 ➡ JSON字符串

语法：
```
JSON.stringify(复杂数据类型)
```

代码展示：

// 本地存储只能存储字符串,不能存储复杂数据类型
// 如果要存储复杂数据类型,需要将复杂数据类型转换成 JSON 字符串
// 语法：JSON.stringify(复杂数据类型);
let obj = {
  uname: '邵秋华',
  age: 22,
  gender: '男',
};

localStorage.setItem('obj', JSON.stringify(obj));

2️⃣ 将 JSON字符串 ➡ 复杂数据类型

语法：
```
JSON.parse(JSON字符串)
```

代码展示：

console.log(JSON.parse(localStorage.getItem('obj')));

存：
- 复杂数据类型 -> JSON.stringify() -> JSON字符串 -> 存到本地存储中
取：
- 从本地存储中取 -> JSON字符串 -> JSON.parse() -> 复杂数据类型

十、❗ 正则表达式

正则表达式（Reular Expression）：用于匹配 字符串 中 字符组合 的模式。
- 在 JavaScript 中，正则表达式 也是对象（object ）
- ⚠ 注意： 只能对 字符串 进行匹配
正则表达式的作用：
- 1️⃣ 表单验证（匹配）
- 2️⃣ 过滤敏感词汇（替换）
- 3️⃣ 字符串中提取我们想要的部分（提取 ->-爬虫）

10.1 正则表达式的使用

1️⃣ 定义规则：
- 语法：
```
const regObj = /表达式/	// 正则表达式不改变使用
```
```
const regObj = new RegExp('表达式')	// 正则表达式变化使用
```
- ⚠ 注意：
  - // 正则表达式的 字面量
  - ⚠ // 中间写什么，就查找什么
  - ⚠ // 中间 不要乱加空格
  - 只要涉及到正则表达式不要乱加空格，最好用vs格式化
2️⃣ ✔检测查找是否匹配：
- 语法：
  - test() ：用来查看 正则表达式 与 指定的字符串 是否匹配
  - ```
  regObj.test(被检测的字符串)
```
- ⚠ 返回值：
  - 匹配 ➡ true
  - 不匹配 ➡ false
  - 规则在前面，被检测的就是用户输入的内容
- 注意：

代码展示：

// 正则表达式
// 正则表达式使用
// 1）定义规则
//    语法：const 变量名（regObj） = /表达式/;
//    注意：正则表达式的字面量中间 不要乱加空格
//    字面量中间些什么就匹配什么（不要乱加空格）
// 2）是否匹配
//    语法：regObj（字面量）.test(被检测的字符串);
	const reg = /前端/;
	const str = '我在学习前端，希望学完高薪就业！！！';
	console.log(reg.test(str));		// true

// 注意
	const reg = / 前端 /;
	const str = '我在学习前端，希望学完高薪就业！！！';
	console.log(reg.test(str));		// false

// 注意
	console.log(/哈/.test('哈'));		// true
	console.log(/哈/.test('哈哈'));	// true
	console.log(/哈/.test('二哈'));	// true

3️⃣ ⭕检索符合规则的字符串：
- 语法：
  - exec()：在一个 指定字符串 中执行一个 搜索匹配
  - ```
  regObj.exec(被检测字符串)
```
- 返回值：
  - 匹配 ➡ 数组
  - 不匹配 ➡ null

代码展示：

const reg = /前端/;
const str = '我在学习前端，希望学完高薪就业！！！';
console.log(reg.exec(str));

正则表达式检测查找 test()方法和 exec()方法有什么区别？
- text()： 用于判断是否有符合规则的字符串，返回的是一个布尔值，找到返回 true ，没找到 返回 false；
- exec()： 用于检索（查找）符合规格的字符串，找到返回数组，没找到 为 null

10.2 ❗ 元字符

字符
- 普通字符
  - 大多数的字符仅能够描述它们本身（字母数字）
  - 普通字符 只能够 匹配字符串中与它们 相同的字符
- 元字符
  - 是一些具有特殊含义的字符
  - 优点： 极大提高了 灵活性 和强大的匹配功能
⚠ 边界符、量词、字符类 组合使用

1️⃣ 边界符

表示位置，开头和结尾，必须用什么开头，用什么结尾

用来提示字符所处的位置

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

注意：
- ⚠ ^ $ 在一起，表示必须是 精确匹配

代码展示：

console.log(/哈/.test('哈'));		// true	// 字符串的内容 和 规则相等
console.log(/哈/.test('哈哈'));	// true
console.log(/哈/.test('二哈'));	// true

console.log(/^哈/.test('哈'));	// true
console.log(/^哈/.test('哈哈'));	// true
console.log(/^哈/.test('二哈'));	// flase

console.log(/^哈$/.test('哈'));	   // true
console.log(/^哈$/.test('哈哈'));  // false -- 精确匹配（字符串的内容、长度必须和规则相等）
console.log(/^哈$/.test('二哈'));  // flase

2️⃣ 量词

表示重复次数
设定 某个模式 的出现次数

量词	说明
*****	重复零次或多次 >= 0
+	重复一次或多次 >=1
?	重复零次或一次
{n}	重复 n次
{n,}	重复 n次或更多次 >= n
{n,m}	重复 n 到 m 次 n <= 次数 <= m

⚠注意：
- n,m 之间没有空格
- 离量词 最近的（量词的左边）重复，别的不重复

3️⃣ 字符类

① [] - 匹配字符集合

被检测的数据 只要能和规则匹配到 任意一个字符 就是 true，否则就是false

代码展示：

后面的字符串只要包含abc中任意一个字符，都返回true
console.log(/[abc]/.test('andy'));  // true
console.log(/[abc]/.test('baby'));  // true
console.log(/[abc]/.test('cry'));   // true
console.log(/[abc]/.test('die'));   // false

精确匹配： 被检测的数据 只能和规则 匹配一个字符（n选1），要想多个匹配须和量词配合使用

console.log(/^[abc]$/.test('a'));	  // true
console.log(/^[abc]$/.test('b'));	  // true
console.log(/^[abc]$/.test('c'));	  // true
console.log(/^[abc]$/.test('ab'));	// false
console.log(/^[abc]{1,}$/.test('abc'));	// true

② - 连字符
- 使用连字符 - 表示一个范围
- [a-z] ：表示 a~z 26个英文字母都可以
- [a-zA-Z] ：表示大小写都可以
- [0-9] ：表示 0~9 都可以
- ```
[\u4e00-\u9fa5] 匹配汉字
```
- 代码展示：
```
/^[1-9][0-9]{4,}$/	// 第一个数字：1~9；从第二位开始：0~9；可以重复>=4
```
③ ^ - 取反符号
- [] 里加上 ^ 取反符号
- [^a-z] ：匹配除了小写字母以外的字符
- ⚠ 注意： 写到 [] 里面
④ . 匹配 除了换行符之外的任何单位

⑤ 预定义类：某些常见模式的简写方法

预定义	说明
\d	匹配 0-9之间的任一数字，相当于[0-9]
\D	匹配所有 0-9以外的字符，相当于[ ^0-9]
\w	匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]
\W	除所有字母、数字和下划线以外的字符，相当于[ ^A-Za-z0-9_]
\s	匹配空格（包括换行符、制表符、空格符等），相等于[\t\r\n\v\f]
\S	匹配非空格的字符，相当于[ ^\t\r\n\v\f]

```
日期：^\d{4}-\d{1,2}-\d{1,2}$
```

⑥ （）使用小括号将字符包成一个整体
⑦ | 或

特殊符号写到 [] 里的最后面

10.3 修饰符

修饰符约束正则表达式的某细节行为，如是否区分大小写、是否支持多行匹配
语法：
```
/表达式/修饰符
```
- i：（ignore）正则匹配时 不区分 大小写
- g：（global）匹配所有 满足正则表达式 的结果（全局匹配）
- m：执行多行匹配
- 代码展示：⬇

replace - 替换

语法：

字符串.replace(/正则表达式/, '替换文本')

返回值： 替换好的字符串
代码展示：⬇

替换多个：

字符串.replace(/正则表达式/g, '替换文本')

代码展示：⬇

✔ 替换多个并且不区分大小写：

字符串.replace(/正则表达式/ig, '替换文本')
字符串.replace(/正则表达式/gi, '替换文本')

⚠ g i 不区分 前后
代码展示：⬇

替换多个并且不区分大小写：（用正则表达式里面的或）
```
字符串.replace(/正则表达式|正则表达式/, '替换文本')
```
- ⚠ 或(|) 两侧 不要加 空格
- 如果没有小括号，就是将正则表达式分成多份
- 代码展示：⬇

代码展示：

// 修饰符：约束正则表达式的细节行为
// 语法： /正则表达式/修饰符
// i（不区分大小写） + g（匹配所有满足正则表达式的结果）
// i
console.log(/^java$/.test('JAVA'));   // false
console.log(/^java$/i.test('JAVA'));  // true
console.log(/^java$/i.test('JavA'));  // true

// 替换 - replace
// 语法：字符串.replace(/正则表达式/, '替换文本')
const str = 'java是一门编程语言，学完JAVA工资很高';

// 替换一个
const re1 = str.replace(/java/, '前端');
console.log(re1);		// '前端是一门编程语言，学完JAVA工资很高'

// 替换多个 - g
const re2 = str.replace(/java/ig, '前端');
console.log(re2);		// '前端是一门编程语言，学完前端工资很高'

// 替换多个 - 或(|) （正则表达式里的或）（|两侧不要加空格）
const re3 = str.replace(/java|JAVA/g, '前端');
console.log(re3);		// '前端是一门编程语言，学完前端工资很高'

拓展：
- change - 事件
  - 当鼠标离开表单，并且表单值发生变化触发

JavaScript - 基础+WebAPI（笔记）

前言：

壹、❗❗ JavaScript基础

一、JavaScript书写位置

二、输入输出语法

三、字面量、变量、常量

3.1 字面量

3.2 变量

3.2.1 var 和 let 的区别

3.3 常量

四、❗❗ 数据类型

4.1 数字型 - number

4.2 字符串型 - string

4.2.1 字符串的长度

4.2.2 字符串的拼接

4.2.3 ❗❗ 模板字符串

4.2.4 ❌ 转义字符

4.3 布尔型 - boolean

4.4 未定义类型 - undefined

4.5 空类型 - Null

4.6 null 和 undefined 区别：

4.7 检测数据类型

4.8 数据类型转换

4.8.1 转数字

4.8.2 转字符串

4.8.3 转布尔

五、运算符

5.1 算术运算符

5.2 递增递减运算符

5.2.1 前置++

5.2.2 后置++

5.2.3 前置–

5.2.4 后置–

5.3 比较运算符

5.4 ❗ 逻辑运算符

5.4.1 短路运算（逻辑中断）

5.5 赋值运算符

5.6 ❗ 运算符优先级

六、流程控制 - 分支语句

6.1 if 语句

6.2 三元运算符

6.3 switch 语句

七、流程控制 - 循环语句

7.1 循环成立的条件

7.2 ❗ for 循环

7.3 ❗ 双重for循环

7.4 while循环

7.5 ❗ continue 和 break

7.6 JS标记语法

八、❗❗ 数组 - 基础

8.1 创建数组

8.1.1 字面量创建

8.1.2 内置构造函数创建

8.2 ❗❗ 遍历数组

8.2.1 for

8.2.2 forEach

8.2.3 for of

8.3 数组的增删查改

8.3.1 增

8.3.2 删

8.3.3 查

8.3.4 改

代码展示：

九、❗❗ 函数

9.1 函数的声明和使用

9.1.1 函数的声明

9.1.2 函数的使用

9.1.3 函数传参

9.1.4 函数的返回值：

9.2 作用域基础

9.2.1 全局作用域

9.2.2 局部作用域

9.2.3 特殊

9.3 变量的访问原则

9.4 匿名函数

9.5 具名函数 和 匿名函数 的区别

9.6 函数中的逻辑中断

十、❗❗ 对象 - 基础

10.1 对象 - object

10.2 使用对象

9.5 具名函数和匿名函数的区别

1.1 DOM树和 DOM对象

1.4.1 操作元素属性

1.4.2 控制样式属性

1.4.3❗❗ 操作表单元素属性