JavaScript

2024-05-05 09:49:22   0  举报





AI智能生成

JavaScript是一种高级的编程语言，主要用于创建动态网页。它运行在浏览器中，可以处理HTML和CSS，以及与浏览器和操作系统交互。JavaScript被广泛用于web应用、游戏、移动应用和桌面应用。它的核心内容包括变量、数据类型、操作符、函数、条件和循环等。JavaScript的文件类型通常为.js，可以使用文本编辑器或专业IDE进行编写。这是一种跨平台的语言，可以在不同的操作系统和浏览器上运行。

javascript 笔记

前端开发

作者其他创作

大纲/内容

基础语法

js简介

简介

运行在客户端的编程语言（html和css是标记语言），实现人机交互

网页特效
表单验证
数据交互
服务端编程（node.js）

组成

ECMAScript（JS语言基础）

Web APIs

DOM

页面文档对象模型：
对页面元素进行移动，大小，添加删除等操作

BOM

浏览器对象模型：
页面弹窗，检测窗口宽度，存储数据到浏览器等

书写位置

内部<script></script>

</body>上方
写在底部是因为加载顺序是从上往下

外部<script></script>

1.js文件，内部还是在底部加载
<script src='1.js'></script>

内联直接写在标签内

使用vue或者react框架的时候常用

注释

//
ctrl + /

/* */
shift + alt + a

结束符

;

可以不写，具体看团队约定

输入输出

输出

document.write('文档输出的内容')

document.write('<h1>也可以输出标签</h1>')

alert('xxxxx')

console.log('控制台打印输出')

console.dir（对象）

它可以在 Web 浏览器的控制台中显示一个对象的所有属性和方法。
与 console.log() 相比，console.dir() 提供的是对象属性的分层和可交互的列表，这样可以更容易地浏览对象的不同属性。
它特别有用于调试复杂对象的结构。

输入

prompt('输入的内容')

输入的都是string

代码执行顺序

alert（）和prompt（）会跳过页面渲染被优先执行

字面量

literal，计算机中描述的事或物

数字字面量，100
字符串字面量
数组字面量
等

反引号

用于定义模板字面量（Template Literals）

字符串插值

允许在字符串中直接嵌入变量和表达式，通过${expression}语法实现，使得构建动态字符串更为简便和直观。

let name = "John";
let message = `Hello, ${name}!`;
console.log(message); // 输出: Hello, John!

多行字符串

直接创建跨越多行的字符串，无需使用字符串连接操作符或转义字符\n，极大地简化了多行文本或HTML模板的编写。

let address = `123 Main St.
Anytown, USA`;
console.log(address);
/* 输出:
123 Main St.
Anytown, USA
*/

标签模板

提供了一种机制，允许函数通过特定语法（tag函数名紧跟模板字符串）解析模板字面量，用于自定义字符串处理，增加了模板处理的灵活性。

变量

声明

let 变量名

为什么不用var

块级作用域：
let提供块级作用域（例如在循环或条件语句中），而var提供的是函数作用域或全局作用域。
这有助于减少变量作用域的混淆和意外覆盖的风险。

避免变量提升：
let声明的变量不会发生变量提升，这意味着它们只能在声明后被访问，有助于避免因变量提升导致的错误。
相反，var声明的变量会被提升到作用域顶部，即使在声明之前也可以被访问。

防止重复声明：
在同一作用域内，let不允许重复声明同一个变量，减少了因重复声明导致的错误。
var允许重复声明同一个变量，可能会引起意料之外的覆盖。

循环中的行为：
let在循环中为每次迭代创建一个新的变量实例，使得每个循环迭代都拥有独立的变量实例，
而var在循环中声明的变量在每次迭代中共享同一个作用域，可能导致非预期的行为。

不用关键字声明（别这么用）

在JavaScript中，如果在赋值时没有使用var、let或const关键字声明一个变量，
那么这个变量会被隐式地创建为全局变量（假设它不在任何函数内部），即使是在一个块作用域或函数作用域内部。
但在严格模式下，就会报错
"use strict";
num = 10; // 这会抛出ReferenceError: num is not defined

数组array

let 变量名 = [ ]

let arr = ['刘德华', '张学友', '黎明', '郭富城', '郭德纲']
document.write(arr[4])

arr.length

数组长度

赋值

一般声明的时候赋值（初始化）

let age = 18

let age = prompt('请输入一个值')
document.write(age)

解构赋值
Destructuring Assignment

从数组或对象中提取值，并将这些值赋给变量

数组解构

const arr = [1, 2, 3];

// 传统的赋值方式
const a = arr[0];
const b = arr[1];
const c = arr[2];

// 使用解构赋值
const [x, y, z] = arr; // x = 1, y = 2, z = 3

跳过某些值
const [first, , third] = arr; // first = 1, third = 3

let arr = [1,2,3,4,5];
const [first, ...rest] = arr;
console.log(first); // 1
console.log(rest); // [2,3,4,5]

对象解构

const person = {
name: "Alice",
age: 25,
location: "Paris"
};

// 传统的赋值方式
const name = person.name;
const age = person.age;

// 使用解构赋值
const { name, age } = person; // name = "Alice", age = 25

解构时重命名
const { name: personName, age: personAge } = person; // personName = "Alice", personAge = 25

函数参数解构

function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

greet(person); // 输出: Hello, my name is Alice and I am 25 years old.

默认值

const { name, age, gender = 'Not specified' } = person;
console.log(gender); // 输出: Not specified

为数组或对象中的变量设置默认值，以防数据结构中没有相应的元素或属性
gender 没有在 person 对象中定义，所以使用了默认值 'Not specified'。

more例子

解构不成功为undefined

能拿到的值还是有的，没有的值则是undefined

更新

变量名 = 新值

let name = '这是初始值'
document.write(name)
name = '这是新的变量值'
document.write('<h1>', name, '</h1>')

多个

let age = 18, name = lucas

不推荐这么写，分开写增加可读性

例，交换变量

let num1 = 10
let num2 = 20
let num_temp
num_temp = num1
num1 = num2
num2 = num_temp

document.write(num1, '</br>', num2, '</br>', num_temp)

变量命名的规则和规范

规则

不能用关键字

只能用 _，数字(不能开头)， $，英文

严格区分大小写

规范

语义化起名

js一般用小驼峰

userName

常量

const 名 = 值

常量不可改值

声明的时候必须赋值

数据类型

number

只要是数字都算
js是弱数据类型语言，只有赋值了，才知道是什么数据类型

NaN

计算错误

粘性的，对NaN的任何操作都返回NaN

string

推荐使用单引号

string + string，拼接

模板字符串

外面必须是反引号``

`我今年${age}岁了`

boolean

true or false

undefined

变量只声明，没定义

undefined + 1为NaN

null

赋值了，类型是object，但内容是空

null + 1 = 1

检测数据类型

typeof

typeof x
or
typeof(x)

一般数据类型

Number: 整数和浮点数

typeof 123; // "number"
typeof 98.6; // "number"
typeof Infinity; // "number"
typeof NaN; // "number"（特殊的数字值，表示“不是一个数字”）

String

typeof "hello"; // "string"
typeof 'world'; // "string"

Boolean

typeof true; // "boolean"
typeof false; // "boolean"

Undefined

typeof undefined; // "undefined"
let x;
typeof x; // "undefined"

Function

typeof function() {}; // "function"
typeof Math.sin; // "function"

Symbol（ES6）

创建唯一的标识符

typeof Symbol(); // "symbol"

BigInt

ES2020 引入的一个新的数字类型，用于表示大于 2^53 - 1 的整数

typeof BigInt(12345678901234567890n); // "bigint"

object

普通对象

typeof {name: "Alice", age: 25}; // "object"

array

typeof [1, 2, 3]; // "object"

Date

typeof new Date(); // "object"

正则

typeof /abc/; // "object"

null

typeof null; // "object"

Math 和 JSON 对象

这些内置对象也被视为普通的JavaScript对象。

typeof Math; // "object"
typeof JSON; // "object"

错误

如 Error, TypeError, SyntaxError 等。

typeof new Error("Error message"); // "object"

包装对象

当原始数据类型（如字符串、数字、布尔值）被用作对象时，
它们将被转换为临时的包装对象。

typeof new String("Hello"); // "object"
typeof new Number(100); // "object"
typeof new Boolean(true); // "object"

instanceof

Array.isArray(参数)

object

set（es6）

允许存储唯一值的集合，无论这个值是基本类型还是对象引用。
Set 内的值总是唯一的，没有重复的值。
可以用来去重

map（es6）

键值对的集合，
但是它和普通的对象有所不同，因为Map的键可以是任何类型，
包括函数、对象或任意基本类型。
相比object，key可以接收任何数据类型

数据类型的转换

隐式转换

+号两边只要有一个是string，就都是string

也可以+'123'，把它转换成number
次数+是正号的意思

除+外的其他运算符，都把数据转换成number型

‘’和null都转换成0

显式转换

数字型

Number(x)

5px - NaN

parseInt（x）

整数

12px-12

12.34px-12

~~abc12.34px-NaN~~

parseFloat（x）

浮点数

12.34px-12.34

~~abc12.34px-NaN~~

布尔型

Boolean（）

运算符

算术运算符

+
-
*
/
%,取余

浮点数不要直接计算

console.log(0.1+0.2)
>>0.30000000000000004
浮点数会先转换成二进制，

解决方法

（0.1*10+0.2*10）/10

num.toFIxed(1)

num精确到小数点后一位

赋值运算符

容器 = 值

+=
-=
*=
/=
%=

num += 1

num = num + 1

一元运算符

++
--

num++

先返回num的当前值，然后再+1

let num=10;
console.log(num++ + 10); //20
因为参与运算的时候用的是当前值
console.log(num); //11
结束后+1

开发中多用后置，并单独一行

num++；

num--;

单独使用都一样

++num

先num+1，然后再返回num的新值（即+完1的值）

比较运算符

>
<
>=
<=
==(比较少用)
!=
===
!==，值or数据类型

尽量不要比较小数，涉及精度

关于==

[] == ![]

逻辑运算符

&&，与
||，或
!，非

值为false的

false - 布尔值false。
0 - 数字0（包括正0和负0）。
-0 - 负零。
"" - 空字符串（包括双引号和单引号中的空字符串）。
null - 表示“没有值”的特殊关键字。
undefined - 表示未定义的特殊值。
NaN - 表示“不是一个数字”的特殊值。

优先级

复杂的运算表达式用（）来区分

...

扩展操作符

在数组中使用

可以用来合并数组，
或在数组字面量中任意位置插入另一个数组的所有元素。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

const newArr = [0, ...arr1, 7]; // [0, 1, 2, 3, 7]

在对象中使用

可以用于对象字面量，用于合并对象或将一个对象的属性复制到另一个新对象中。
在ES2018及以后版本中，对象展开运算符成为标准功能。

函数调用

当调用函数时，可以用于传递数组元素作为独立的参数。

function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 等同于 sum(1, 2, 3)

使用场景和好处
- **简化数组操作**：如合并数组，或在数组构建时插入额外的元素。
- **克隆数组和对象**：可以快速克隆现有的数组或对象，同时保证原始数据的安全。
- **函数参数的扩展**：将数组转换为参数序列，简化函数调用过程。
- **替代函数的 `apply` 方法**：在将数组作为函数参数时，可以使用展开运算符代替 `Function.prototype.apply` 方法。

条件语句

if (condition) {
// 代码块: 当条件为真时执行
}

if (condition) {
// 当条件为真时执行这段代码
} else {
// 当条件为假时执行这段代码
}

if (condition1) {
    // 条件1为真时执行
} else if (condition2) {
    // 条件1为假且条件2为真时执行
} else {
    // 条件1和条件2都为假时执行
}

JavaScript 社区中常见的风格是不换行，} else放一起

condition 表达式中可以使用比较运算符（如 ==, !=, ===, !==, <, >, <=, >=）
和逻辑运算符（如 &&, ||, !）来构建复杂的条件。

三元

condition ? expression1 : expression2

这个运算符包括三个部分：

条件（condition）：一个返回布尔值（true或false）的表达式。这个条件会被首先评估。
表达式1（expression1）：如果条件为true，将执行并返回这个表达式的结果。
表达式2（expression2）：如果条件为false，将执行并返回这个表达式的结果。

一般用于条件赋值

let sum = 3 < 5 ? 3 : 5

switch

5个以上分支效率比if快
分支值确定也用switch

switch (expression) {
  case value1:
    // 当expression的结果===value1时执行的代码
    break
  case value2:
    // 当expression的结果===value2时执行的代码
    break
  ...
  default:
    // 当没有任何case匹配时执行的代码
}

expression: 这是switch语句中要评估的表达式。
case value: 这些是与expression的结果进行比较的值。如果匹配，执行相应的case下的代码。
break: 关键字用于退出switch语句。如果不使用break，程序将继续执行下一个case，而不管其条件是否匹配。
default: 这是当没有一个case匹配expression的结果时执行的代码块。它是可选的。

注意事项

在每个case后面使用break来防止执行流落入下一个case。
如果多个case应该执行相同的代码，可以将它们顺序排列，直到最后一个执行break。
default子句不是必需的，但它可以用来处理未匹配到任何case的情况。
switch语句中的比较是严格的（使用===），意味着值和类型都必须匹配。

断点调试

循环

while

while (condition) {
// 当条件为真时执行的代码块
}

condition: 这是每次循环开始前评估的表达式。如果条件的值为真（true），则执行代码块。每执行一次循环体，条件都会被重新评估。
循环体内的代码：如果条件为真，则执行这些代码。

三要素：变量起始值+终止条件+变量变化量

do while

do {
// 代码块至少执行一次
} while (condition)

很少用到

break和continue

break退出整个循环

let i = 0
while (i < 10) {
    if (i === 5) {
        break // 当i等于5时，退出循环
    }
    console.log(i)
    i++
}

// 输出将是：
// 0
// 1
// 2
// 3
// 4

continue跳过本次循环

let i = 0

while (i < 10) {
    i++
    if (i === 5) {
        continue // 当i等于5时，跳过当前迭代的剩余部分
    }
    console.log(i)
}

// 输出将是：
// 1
// 2
// 3
// 4
// 6
// 7
// 8
// 9
// 10

如果有continue，确保在判断之前，已经执行过变量增加
不然continue会跳过本次循环，那么continue下面的代码就不会执行，会死循环

for

for(起始值；终止条件；变化量){

}

for (let i = 1; i <= 3; i++) {
document.write(`${i}<br>`)
}

起始值只会执行一次

遍历数组

let arr = ['lucas', 'bill', 'matte', 'pepper']
    for (let arr_index = 0; arr_index < arr.length; arr_index++) {
      document.write(`${arr_index}: ${arr[arr_index]}<br>`)
    }

for(；；)

死循环

嵌套

乘法表

for (row = 1; row <= 9; row++) {
      for (col = 1; col <= row; col++) {
        document.write(`|${col} x ${row} = ${row * col}|`)
      }
      document.write(`<br>`)
    }

数组

声明

let arr = [1, 2, 3, 4]
let arr1 = new Array(1, 2, 3, 4)

操作

取值

arr[2] // 3

长度

arr.length

求和

声明sum
遍历数组，每个元素加入sum

let arr = [1, 2, 3, 4]
let sum = 0
for (index = 0; index < +arr.length; index++) {
sum += arr[index]
}
document.write(sum)

最大最小

设置一个max，初始值是无穷小
设置一个min，初始值是无穷大
然后遍历数组和max，min比较

查

数组[下标]

增

arr.push（新值）

末尾添加1或多个元素

有返回值，返回新数组长度

arr.unshift（新值）

头部添加1或多个元素

有返回值，返回新数组的长度

删

arr.pop（）

删除最后一个元素，返回该元素

arr.shift（）

删除第一个元素，返回该元素

arr.splice（start，deleteCount）

（起始位置，删除几个元素）

改

数组[下标] = 新值

遍历

arr.forEach（）

arr.indexOf()

从头开始找，找到返回index
找不到返回-1

let arr = [2, 5, 9, 2];
console.log(arr.indexOf(2)); // 输出：0
console.log(arr.indexOf(7)); // 输出：-1，表示未找到

arr.lastIndexOf()

从尾开始找，找到返回index
找不到返回-1

let arr = [2, 5, 9, 2];
console.log(arr.lastIndexOf(2)); // 输出：3
console.log(arr.lastIndexOf(7)); // 输出：-1，表示未找到

arr.filter()

筛选

let numbers = [1, 2, 3, 4];
let evens = numbers.filter(num => num % 2 === 0); // [2, 4]

arr.reduce（）

案例

筛选数组中符合条件的元素

遍历数组
每个元素判断
符合条件放入新数组

冒泡排序

排序

arr.sort()

默认升序

或者也可以这么写
arr.sort(function(a,b){
return a-b
})

降序

arr.sort(function(a,b){
return b-a
})

函数

使用

声明

function 函数名（）{
}

调用

函数名（）

参数

function 函数名（参数1，参数2）{
}

声明的时候是形参
调用的时候是实参

形参多于实参，后面的都是undefined

实参多余形参，后面的忽略

function 函数名（参数1 = 0，参数2 = 0）{
}

默认参数

例子

数组求和

返回值

需要返回值的几种情况

计算结果：函数用于执行计算或数据处理，需要返回结果。

条件判断：函数根据输入返回true或false来指示条件是否满足。

获取数据：函数用于从数据源检索数据，需要返回这些数据。

API调用结果：进行API调用或异步操作时，函数返回操作的状态码或数据对象。

重用和模块化：通过返回值，函数的输出可以被其他部分重用，促进代码模块化。

链式调用：某些编程范式中，函数返回其实例或对象以支持链式调用。

错误处理：函数返回错误代码或值来通知调用者发生了错误。

return

return只返回一个值
return num1，num2只会返回最后一个值

没return的默认undefined

求和函数

可以用数组[ ]或者对象{ }来返回多个值

作用域

全局

局部

局部变量和全局变量冲突时，就近原则

打印的是20

但是这时候在外面console.log（num），就还是20

let的块级作用于

匿名函数

function（）{
}

立即执行函数

可以避免全局变量之间的污染

立即执行函数后面要加；

子主题

逻辑中断

只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

false && 后面就不执行了
true || 后面就不执行了

true && true，返回最后一个true
false || false，返回第一个false

箭头函数

不过一行的函数可读性和可维护性差，不要这么写

因为箭头函数中的this，是指向包裹它的作用域的，
所以现在一般写函数都写=>函数

环境对象

指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

普通函数里，this指向window

一般：谁调用函数，this指向谁

左边：普通function里，谁调用this指向谁
this的这个function是传递给setTimeout的，
而在浏览器下，setTimeout是由window管的，
也就是说this指向类window，所以结果是NaN。

右边：箭头函数里，谁包裹它this指向谁
this的箭头函数包含在setTimeout里，
而setTimeout又包含在普通函数nextDay里，
而nextDay是calendar在调用，
所以this可以指向calendar。结果为7

1,hello world，因为是object在调用

2，Hello world，因为object调用的greet
Hello undefined，因为farewell是箭头函数，this被包裹其中，而farewell是全局作用域的，所以this指向的是window

对象自身不引入一个新的作用域，无论是块级作用域还是函数作用域。
对象内部的函数（包括箭头函数）在查找变量或 this 上下文时，不会将对象视为一个单独的作用域。

3，Hello undefined，因为最终是foo在调用，foo里没有who
Hello mason，这个是object在调用

4，Hello undefined，object调用cb，cb调用foo，所以是cb在调用this，cb里没有who

对象

声明

let 对象名 = {}
let 对象名 = new Object（）

属性的增删改

查

对象名.属性

对象名['属性名']

适合于属性名是字符串的

改

对象名.属性 = 新值

增

对象名.新属性 = 新值

删

delete 对象名.属性

动态属性

方法

调用

对象.方法()

遍历对象

for in

for in获取的下标是string，一般用于遍历对象

Object.keys(obj)

obj里的所有key，放入一个array

Object.values(obj)

obj里所有值，，放入一个array

Object.entries(obj)

obj里所有[key, value]，返回一个array，每个元素是[key, value]形式的小array

内置对象

document.write（）
console.log（）

Math

https://www.runoob.com/jsref/jsref-obj-math.html

Math.random（），随机生成[0, 1)之间的数

//生成N-M之间的随机整数
Math.floor(Math.random() * (M - N + 1)) + N

拷贝

浅拷贝

只拷贝地址

数组

对象

深拷贝

存储方式

简单数据类型

复杂数据类型

promises

处理异步操作的一种机制，
可以避免callback hell（多层嵌套的回调函数）

三种状态

pending：初始状态，既不是成功，也不是失败。

fulfilled：意味着操作成功完成。

rejected：意味着操作失败。

用法

创建

使用

web API

（思想转变）变量声明

const优先，后面发现要修改，再改成let

常量一般用大写，const MAX_NUMBER = 100;

复杂数据类型，指向的是地址，只要地址不修改，都可以用const

数组和对象使用const声明

作用和分类

作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）

DOM获取&属性操作

概念

Document Object Model
DOM是浏览器提供的一套专门用来 操作网页内容 的功能
可以开发网页内容特效和实现用户交
互

DOM树

描述HTML文档的结构

文档树直观的体现了标签与标签之间的关系

DOM对象

浏览器根据html标签生成的 JS对象（有属性和方法）

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

DOM的核心思想

把网页内容当做对象来处理

document 对象

是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()

网页所有内容都在document里面

获取DOM对象

查找元素DOM元素就是利用 JS 选择页面中标签元素

通过css选择器

选择匹配的第一个元素

const 常量名 = document.querySelector('css选择器')

document.querySelector('div')

document.querySelector('.box')

document.querySelector('#nav')

document.querySelector('ul li:first-child')

获取后可以直接修改（类似对象的属性）

返回值

CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。

选择匹配的多个元素

const 名 = document.querySelectorAll('ul li')

获取后要遍历才能修改

返回值

CSS选择器匹配的NodeList 对象集合，数组形式展示（伪数组）

有长度，有索引号的数组
但是没有 pop() push() 等数组方法

用for遍历

document.body

页面只有一个body，所以可以直接获取body标签，

其他方法

看得懂就行，现在不用这个

操作元素内容

对象.innerText 属性

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

<div class="box">
我是文字的内容
</div>

对象.innerHTML 属性（用这个）

将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

操作元素属性

常用属性

对象.属性 = 值（有就是改，没有就是增）

例

刷新页面，图片随机更换
1. 获取图片元素
2. 随机得到图片序号
3. 图片.src = 图片随机路径

样式属性

通过 style 属性操作CSS
（这么写太长了，适合修改少的）

对象.style.样式属性 = ‘值’

例

刷新页面，随机更换背景图片
①：随机函数
②： css页面背景图片 background-image
③：标签选择body，因为body是唯一的标签，可以直接写 document.body.style

操作类名(className) 操作CSS
(但这种容易覆盖之前的类)

元素.className = ‘要修成的类名’

通过 classList 操作类控制CSS
（优先用这种）

元素.classList.方法（‘类名’）

//添加一个类
元素.classList.add（'类名'）

//删除一个类
元素.classList.remove（'类名'）

//切换一个类
元素.classList.toggle（'类名'）

例子

轮播图随机版
需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式
模块：
①：图片会随机变换
②：底部盒子背景颜色和文字内容会变换
③：小圆点随机一个高亮显示

表单属性

获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值

表单内容

表单.value = ‘新值’

表单type

表单.type = ‘新type’

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示
如果为true 代表添加了该属性如果是false 代表移除了该属性

自定义属性（H5新增）

在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

定时器-间歇函数

开启

setInterval(函数, 间隔时间)

作用：每隔一段时间调用这个函数
间隔时间单位是毫秒（1000毫秒=1秒）

定时器返回的是一个id数字

关闭

clearInterval()

code

用let，因为定时器会重复开关，会变

例子

阅读注册协议

需求：按钮60秒之后才可以使用
分析：
①：开始先把按钮禁用（disabled 属性）
②：一定要获取元素
③：函数内处理逻辑
秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0 停止定时器里面文字变为同意最后按钮可以点击

DOM事件基础

事件监听

什么是事件：
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮

元素对象.addEventListener（‘事件类型’，要执行的函数）

事件源： 那个dom元素被事件触发了，要获取dom元素
事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数： 要做什么事

例子

需求：点击了按钮，弹出一个对话框
1. 事件源按钮
2.事件类型点击鼠标 click 字符串
3. 事件处理程序弹出对话框

几种版本

事件源.on事件 = function() { }

on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

事件类型

鼠标事件

click

mouseenter鼠标经过

mouseleave鼠标离开

焦点事件

focus获得焦点

blur失去焦点

键盘事件

Keydown键盘按下

Keyup键盘抬起

文本事件

input用户输入

后去用户输入的内容

获取用户输入字数

事件对象

事件对象是什么
也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

参数为event、ev、e

常用事件对象属性

type

获取当前的事件类型

clientX/clientY

获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY

获取光标相对于当前DOM元素左上角的位置

key

用户按下的键盘键的值
现在不提倡使用keyCode

环境对象

指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

普通函数里，this指向window

一般：谁调用函数，this指向谁

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

fn这个函数一秒回头调用一次

里面的函数，每点一次，调用一次

DOM事件进阶

事件流

事件流与两个阶段说明（捕获，冒泡）

事件流指的是事件完整执行过程中的流动路径

简单来说：捕获阶段是从父到子 冒泡阶段是从子到父
实际工作都是使用事件冒泡为主

事件捕获

从DOM的根元素开始去执行对应的事件 (从外到里)

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件

事件冒泡是默认存在的
L2事件监听第三个参数是 false，或者默认都是冒泡

mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)

阻止冒泡

问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡

事件对象.stopPropagation（）

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

阻止默认行为

比如，阻止链接跳转，阻止表单提交（关键信息没有填好）

e.prevenDefault()

解绑事件

L0的

on事件方式，直接使用null覆盖偶就可以实现事件的解绑

L2的

匿名函数无法解绑，因为removeEventListener这个方法无法获取函数名

两种注册事件的区别
l 传统on注册（L0）
Ø 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
Ø 直接使用null覆盖偶就可以实现事件的解绑
Ø 都是冒泡阶段执行的
l 事件监听注册（L2）
Ø 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获) Ø 后面注册的事件不会覆盖前面注册的事件(同一个事件)
Ø 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
Ø 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段) Ø 匿名函数无法被解绑

事件委托

它利用了事件冒泡原理，
在父元素上设置单个事件监听器来管理多个子元素的事件，
以提高性能并避免重复代码。

原理

给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事
件

实现

其他事件

页面加载事件

Ø 有些时候需要等页面资源全部处理完了做一些事情
Ø 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

load

给window添加load事件

window.addEventListener('load', function () {
}

等图片加载

img.addEventListener('load', function () {
//等待图片加载完毕，再去执行里面的代码
})

DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

给document添加DOMContentLoaded事件

元素滚动事件

很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

scroll

window.addEventListener('scroll', function () {
console.log('我滚了')
})

给 window 或 document 添加 scroll 事件
监听某个元素的内部滚动直接给某个元素加即可

获取页面HTML元素（包括head和body）

document.documentElement

scrollLeft和scrollTop （属性）

尽量在scroll事件里面获取被卷去的距离
（比如滚动条是再div里，就在div里添加一个scroll监听）

开发中，我们经常检测页面滚动的距离，
比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

可读写

scrollTo()

元素.scrollTo(x, y)

页面尺寸事件

resize

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

clientWidth和clientHeight

获取元素的可见部分宽高（不包含边框，margin，滚动条等）

一个跟随窗口尺寸调整内容的案例

元素尺寸和位置

就是通过js的方式，得到元素在页面中的位置
这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了

offsetLeft和offsetTop（只读）

获取元素的自身宽高
包含元素自身设置的宽高、padding、border
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

检测盒子的位置 最近一级带有定位的祖先元素的距离
如果都没有则以文档左上角为准

DOM节点&移动端滑动

日期对象

实例化

const date = new Date()

时间对象方法

获取日期和时间
date.getFullYear()：获取年份（4位数）。
date.getMonth()：获取月份，从0开始计数，所以1月是0，12月是11。
date.getDate()：获取月份中的第几天（1-31）。
date.getDay()：获取星期几，从0（周日）到6（周六）。
date.getHours()：获取小时（0-23）。
date.getMinutes()：获取分钟（0-59）。
date.getSeconds()：获取秒数（0-59）。
date.getMilliseconds()：获取毫秒数（0-999）。
date.getTime()：获取自1970年1月1日以来的毫秒数。

设置日期和时间
date.setFullYear(year, [month], [date])：设置年份。
date.setMonth(month, [date])：设置月份（0-11）。
date.setDate(day)：设置月份中的第几天（1-31）。
date.setHours(hours, [min], [sec], [ms])：设置小时（0-23）。
date.setMinutes(min, [sec], [ms])：设置分钟（0-59）。
date.setSeconds(sec, [ms])：设置秒数（0-59）。
date.setMilliseconds(ms)：设置毫秒数（0-999）。
date.setTime(milliseconds)：以毫秒为单位设置日期，自1970年1月1日起。

格式化和转换
date.toString()：将日期转换为字符串，包含完整的日期和时间信息。
date.toDateString()：仅将日期部分转换为易读的字符串。
date.toTimeString()：仅将时间部分转换为易读的字符串。
date.toISOString()：将日期转换为ISO 8601格式的字符串。
date.toUTCString()：将日期转换为UTC格式的字符串。
date.toLocaleDateString()：根据本地习惯，将日期部分转换为字符串。
date.toLocaleTimeString()：根据本地习惯，将时间部分转换为字符串。

例

格式化显示

定时器版本

显示星期几

时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

一般用于计算倒计时

getTime()

需要先实例化

获得指定时间戳

+new Date()

new Date()获取字符型，+变成数字型