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函数名紧跟模板字符串）解析模板字面量，用于自定义字符串处理，增加了模板处理的灵活性。

function highlight(strings, ...values) {     return strings.reduce((prev, current, i) => `${prev}${current}${values[i] || ''}`, ''); } let name = "Sarah"; let order = "extra cheese pizza"; let result = highlight`Hello ${name}, you've ordered an ${order}.`; console.log(result); // 输出: Hello Sarah, you've ordered an extra cheese pizza.

变量

声明

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, '', num2, '', 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

parseFloat（x）

浮点数

12.34px-12.34

布尔型

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匹配时执行的代码 }

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

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

断点调试

循环

while

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

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

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

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} `)     }

起始值只会执行一次

遍历数组

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

for(；；)

死循环

嵌套

乘法表

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

数组

声明

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()获取字符型，+变成数字型