JavaScript
2024-05-05 09:49:22 0 举报AI智能生成
登录查看完整内容
JavaScript是一种高级的编程语言，主要用于创建动态网页。它运行在浏览器中，可以处理HTML和CSS，以及与浏览器和操作系统交互。JavaScript被广泛用于web应用、游戏、移动应用和桌面应用。它的核心内容包括变量、数据类型、操作符、函数、条件和循环等。JavaScript的文件类型通常为.js，可以使用文本编辑器或专业IDE进行编写。这是一种跨平台的语言，可以在不同的操作系统和浏览器上运行。
作者其他创作
大纲/内容
运行在客户端的编程语言（html和css是标记语言），实现人机交互
网页特效表单验证数据交互服务端编程（node.js）
简介
ECMAScript（JS语言基础）
页面文档对象模型：对页面元素进行移动，大小，添加删除等操作
DOM
浏览器对象模型：页面弹窗，检测窗口宽度，存储数据到浏览器等
BOM
Web APIs
组成
</body>上方写在底部是因为加载顺序是从上往下
内部<script></script>
1.js文件，内部还是在底部加载<script src='1.js'></script>
外部<script></script>
使用vue或者react框架的时候常用
内联直接写在标签内
书写位置
//ctrl + /
/* */shift + alt + a
注释
可以不写，具体看团队约定
;
结束符
document.write('文档输出的内容')
document.write('<h1>也可以输出标签</h1>')
alert('xxxxx')
console.log('控制台打印输出')
它可以在 Web 浏览器的控制台中显示一个对象的所有属性和方法。与 console.log() 相比，console.dir() 提供的是对象属性的分层和可交互的列表，这样可以更容易地浏览对象的不同属性。它特别有用于调试复杂对象的结构。
console.dir（对象）
输出
输入的都是string
prompt('输入的内容')
输入
输入输出
alert（）和prompt（）会跳过页面渲染被优先执行
代码执行顺序
数字字面量，100字符串字面量数组字面量等
literal，计算机中描述的 事或物
字面量
js简介
用于定义模板字面量（Template Literals）
let name = \"John\
允许在字符串中直接嵌入变量和表达式，通过${expression}语法实现，使得构建动态字符串更为简便和直观。
字符串插值
直接创建跨越多行的字符串，无需使用字符串连接操作符或转义字符\，极大地简化了多行文本或HTML模板的编写。
多行字符串
提供了一种机制，允许函数通过特定语法（tag函数名紧跟模板字符串）解析模板字面量，用于自定义字符串处理，增加了模板处理的灵活性。
标签模板
``
反引号
块级作用域：let提供块级作用域（例如在循环或条件语句中），而var提供的是函数作用域或全局作用域。这有助于减少变量作用域的混淆和意外覆盖的风险。
避免变量提升：let声明的变量不会发生变量提升，这意味着它们只能在声明后被访问，有助于避免因变量提升导致的错误。相反，var声明的变量会被提升到作用域顶部，即使在声明之前也可以被访问。
防止重复声明：在同一作用域内，let不允许重复声明同一个变量，减少了因重复声明导致的错误。var允许重复声明同一个变量，可能会引起意料之外的覆盖。
循环中的行为：let在循环中为每次迭代创建一个新的变量实例，使得每个循环迭代都拥有独立的变量实例，而var在循环中声明的变量在每次迭代中共享同一个作用域，可能导致非预期的行为。
为什么不用var
在JavaScript中，如果在赋值时没有使用var、let或const关键字声明一个变量，那么这个变量会被隐式地创建为全局变量（假设它不在任何函数内部），即使是在一个块作用域或函数作用域内部。但在严格模式下，就会报错\"use strict\";num = 10; // 这会抛出ReferenceError: num is not defined
不用关键字声明（别这么用）
font color=\"#e74f4c\
数组长度
arr.length
let 变量名 = [ ]
数组array
let 变量名
声明
let age = 18
let age = prompt('请输入一个值')document.write(age)
一般声明的时候赋值（初始化）
赋值
数组解构
const person = { name: \"Alice\
对象解构
函数参数解构
为数组或对象中的变量设置默认值，以防数据结构中没有相应的元素或属性gender 没有在 person 对象中定义，所以使用了默认值 'Not specified'。
默认值
more例子
从数组或对象中提取值，并将这些值赋给变量
能拿到的值还是有的，没有的值则是undefined
解构不成功为undefined
解构赋值Destructuring Assignment
变量名 = 新值
更新
不推荐这么写，分开写增加可读性
多个
例，交换变量
不能用关键字
只能用 _， 数字(不能开头)， $， 英文
严格区分大小写
规则
语义化起名
userName
js一般用小驼峰
规范
变量命名的规则和规范
变量
常量不可改值
声明的时候必须赋值
const 名 = 值
常量
只要是数字都算js是弱数据类型语言，只有赋值了，才知道是什么数据类型
计算错误
粘性的，对NaN的任何操作都返回NaN
NaN
number
推荐使用单引号
string + string，拼接
`我今年${age}岁了`
外面必须是反引号``
模板字符串
string
true or false
boolean
undefined + 1为NaN
变量只声明，没定义
undefined
null + 1 = 1
赋值了，类型是object，但内容是空
null
typeof xortypeof(x)
typeof 123; // \"number\"typeof 98.6; // \"number\"typeof Infinity; // \"number\"typeof NaN; // \"number\"（特殊的数字值，表示“不是一个数字”）
Number: 整数和浮点数
typeof \"hello\"; // \"string\"typeof 'world'; // \"string\"
String
typeof true; // \"boolean\"typeof false; // \"boolean\"
Boolean
typeof undefined; // \"undefined\"let x;typeof x; // \"undefined\"
Undefined
typeof function() {}; // \"function\"typeof Math.sin; // \"function\"
Function
创建唯一的标识符
typeof Symbol(); // \"symbol\"
Symbol（ES6）
ES2020 引入的一个新的数字类型，用于表示大于 2^53 - 1 的整数
typeof BigInt(12345678901234567890n); // \"bigint\"
BigInt
一般数据类型
typeof {name: \"Alice\
普通对象
array
typeof new Date(); // \"object\"
Date
typeof /abc/; // \"object\"
正则
typeof null; // \"object\"
这些内置对象也被视为普通的JavaScript对象。
typeof Math; // \"object\"typeof JSON; // \"object\"
Math 和 JSON 对象
typeof new Error(\"Error message\"); // \"object\"
错误
当原始数据类型（如字符串、数字、布尔值）被用作对象时，它们将被转换为临时的包装对象。
typeof new String(\"Hello\"); // \"object\"typeof new Number(100); // \"object\"typeof new Boolean(true); // \"object\"
包装对象
object
typeof
instanceof
Array.isArray(参数)
检测数据类型
允许存储唯一值的集合，无论这个值是基本类型还是对象引用。Set 内的值总是唯一的，没有重复的值。可以用来去重
set（es6）
键值对的集合，但是它和普通的对象有所不同，因为Map的键可以是任何类型，包括函数、对象或任意基本类型。相比object，key可以接收任何数据类型
map（es6）
数据类型
也可以+'123'，把它转换成number次数+是正号的意思
+号两边只要有一个是string，就都是string
‘’和null都转换成0
除+外的其他运算符，都把数据转换成number型
隐式转换
5px - NaN
Number(x)
12px-12
12.34px-12
abc12.34px-NaN
整数
parseInt（x）
12.34px-12.34
浮点数
parseFloat（x）
数字型
Boolean（）
布尔型
显式转换
数据类型的转换
算术运算符
console.log(0.1+0.2)>>0.30000000000000004浮点数会先转换成二进制，
（0.1*10+0.2*10）/10
num精确到小数点后一位
num.toFIxed(1)
解决方法
浮点数不要直接计算
容器 = 值
num = num + 1
num += 1
+=-=*=/=%=
赋值运算符
let num=10;console.log(num++ + 10); //20因为参与运算的时候用的是当前值console.log(num); //11结束后+1
先返回num的当前值，然后再+1
num++；
num--;
开发中多用后置，并单独一行
num++
单独使用都一样
先num+1，然后再返回num的新值（即+完1的值）
++num
++--
一元运算符
尽量不要比较小数，涉及精度
[] == ![]
关于==
><>=<===(比较少用)!====!==，值or数据类型
比较运算符
false - 布尔值false。0 - 数字0（包括正0和负0）。-0 - 负零。\"\" - 空字符串（包括双引号和单引号中的空字符串）。null - 表示“没有值”的特殊关键字。undefined - 表示未定义的特殊值。NaN - 表示“不是一个数字”的特殊值。
值为false的
&&，与||，或!，非
逻辑运算符
复杂的运算表达式用（）来区分
优先级
可以用来合并数组，或在数组字面量中任意位置插入另一个数组的所有元素。
在数组中使用
可以用于对象字面量，用于合并对象或将一个对象的属性复制到另一个新对象中。在ES2018及以后版本中，对象展开运算符成为标准功能。
在对象中使用
当调用函数时，可以用于传递数组元素作为独立的参数。
函数调用
使用场景和好处- **简化数组操作**：如合并数组，或在数组构建时插入额外的元素。- **克隆数组和对象**：可以快速克隆现有的数组或对象，同时保证原始数据的安全。- **函数参数的扩展**：将数组转换为参数序列，简化函数调用过程。- **替代函数的 `apply` 方法**：在将数组作为函数参数时，可以使用展开运算符代替 `Function.prototype.apply` 方法。
扩展操作符
...
运算符
if (condition) { // 代码块: 当条件为真时执行}
if (condition) { // 当条件为真时执行这段代码} else { // 当条件为假时执行这段代码}
if (condition1) { // 条件1为真时执行} else if (condition2) { // 条件1为假且条件2为真时执行} else { // 条件1和条件2都为假时执行}
JavaScript 社区中常见的风格是不换行，} else放一起
if
这个运算符包括三个部分：条件（condition）：一个返回布尔值（true或false）的表达式。这个条件会被首先评估。表达式1（expression1）：如果条件为true，将执行并返回这个表达式的结果。表达式2（expression2）：如果条件为false，将执行并返回这个表达式的结果。
let sum = 3 < 5 ? 3 : 5
一般用于条件赋值
condition ? expression1 : expression2
三元
5个以上分支效率比if快分支值确定也用switch
expression: 这是switch语句中要评估的表达式。case value: 这些是与expression的结果进行比较的值。如果匹配，执行相应的case下的代码。break: 关键字用于退出switch语句。如果不使用break，程序将继续执行下一个case，而不管其条件是否匹配。default: 这是当没有一个case匹配expression的结果时执行的代码块。它是可选的。
注意事项在每个case后面使用break来防止执行流落入下一个case。如果多个case应该执行相同的代码，可以将它们顺序排列，直到最后一个执行break。default子句不是必需的，但它可以用来处理未匹配到任何case的情况。switch语句中的比较是严格的（使用===），意味着值和类型都必须匹配。
switch (expression) { case value1: // 当expression的结果===value1时执行的代码 break case value2: // 当expression的结果===value2时执行的代码 break ... default: // 当没有任何case匹配时执行的代码}
switch
条件语句
断点调试
condition: 这是每次循环开始前评估的表达式。如果条件的值为真（true），则执行代码块。每执行一次循环体，条件都会被重新评估。循环体内的代码：如果条件为真，则执行这些代码。
while (condition) { // 当条件为真时执行的代码块}
三要素：变量起始值+终止条件+变量变化量
while
很少用到
do { // 代码块至少执行一次} while (condition)
do while
let i = 0while (i < 10) { if (i === 5) { break // 当i等于5时，退出循环 } console.log(i) i++}// 输出将是：// 0// 1// 2// 3// 4
break退出整个循环
如果有continue，确保在判断之前，已经执行过变量增加不然continue会跳过本次循环，那么continue下面的代码就不会执行，会死循环
let i = 0while (i < 10) { i++ if (i === 5) { continue // 当i等于5时，跳过当前迭代的剩余部分 } console.log(i)}// 输出将是：// 1// 2// 3// 4// 6// 7// 8// 9// 10
continue跳过本次循环
break和continue
起始值只会执行一次
for (let i = 1; i <= 3; i++) { document.write(`${i}<br>`) }
for(起始值；终止条件；变化量){}
遍历数组
死循环
for(；；)
for (row = 1; row <= 9; row++) { for (col = 1; col <= row; col++) { document.write(`|${col} x ${row} = ${row * col}|`) } document.write(`<br>`) }
乘法表
嵌套
for
循环
arr[2] // 3
取值
长度
声明sum遍历数组，每个元素加入sum
求和
设置一个max，初始值是无穷小设置一个min，初始值是无穷大然后遍历数组和max，min比较
最大最小
数组[下标]
查
有返回值，返回新数组长度
末尾添加1或多个元素
arr.push（新值）
有返回值，返回新数组的长度
头部添加1或多个元素
arr.unshift（新值）
增
删除最后一个元素，返回该元素
arr.pop（）
删除第一个元素，返回该元素
arr.shift（）
（起始位置，删除几个元素）
arr.splice（start，deleteCount）
删
数组[下标] = 新值
改
arr.forEach（）
遍历
从头开始找，找到返回index找不到返回-1
arr.indexOf()
从尾开始找，找到返回index找不到返回-1
arr.lastIndexOf()
筛选
arr.filter()
arr.reduce（）
遍历数组每个元素判断符合条件放入新数组
筛选数组中符合条件的元素
冒泡排序
案例
默认升序
降序
arr.sort()
排序
操作
数组
function 函数名（）{}
函数名（）
调用
使用
形参多于实参，后面的都是undefined
实参多余形参，后面的忽略
声明的时候是形参调用的时候是实参
function 函数名（参数1，参数2）{}
默认参数
function 函数名（参数1 = 0，参数2 = 0）{}
数组求和
例子
参数
计算结果：函数用于执行计算或数据处理，需要返回结果。
条件判断：函数根据输入返回true或false来指示条件是否满足。
获取数据：函数用于从数据源检索数据，需要返回这些数据。
API调用结果：进行API调用或异步操作时，函数返回操作的状态码或数据对象。
重用和模块化：通过返回值，函数的输出可以被其他部分重用，促进代码模块化。
链式调用：某些编程范式中，函数返回其实例或对象以支持链式调用。
错误处理：函数返回错误代码或值来通知调用者发生了错误。
需要返回值的几种情况
return只返回一个值return num1，num2只会返回最后一个值
没return的默认undefined
求和函数
可以用数组[ ]或者对象{ }来返回多个值
return
返回值
全局
局部
但是这时候在外面console.log（num），就还是20
打印的是20
局部变量和全局变量冲突时，就近原则
let的块级作用于
作用域
function（）{}
可以避免全局变量之间的污染
子主题
立即执行函数后面要加；
立即执行函数
匿名函数
false && 后面就不执行了true || 后面就不执行了
true && true，返回最后一个truefalse || false，返回第一个false
只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
逻辑中断
指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
普通函数里，this指向window
一般：谁调用函数，this指向谁
左边：普通function里，谁调用this指向谁this的这个function是传递给setTimeout的，而在浏览器下，setTimeout是由window管的，也就是说this指向类window，所以结果是NaN。
右边：箭头函数里，谁包裹它this指向谁this的箭头函数包含在setTimeout里，而setTimeout又包含在普通函数nextDay里，而nextDay是calendar在调用，所以this可以指向calendar。结果为7
对象自身不引入一个新的作用域，无论是块级作用域还是函数作用域。对象内部的函数（包括箭头函数）在查找变量或 this 上下文时，不会将对象视为一个单独的作用域。
2，Hello world，因为object调用的greet Hello undefined，因为farewell是箭头函数，this被包裹其中，而farewell是全局作用域的，所以this指向的是window
3，Hello undefined，因为最终是foo在调用，foo里没有whoHello mason，这个是object在调用
4，Hello undefined，object调用cb，cb调用foo，所以是cb在调用this，cb里没有who
环境对象
因为箭头函数中的this，是指向包裹它的作用域的，所以现在一般写函数都写=>函数
不过一行的函数可读性和可维护性差，不要这么写
箭头函数
函数
let 对象名 = {}let 对象名 = new Object（）
对象名.属性
适合于属性名是字符串的
对象名['属性名']
对象名.属性 = 新值
对象名.新属性 = 新值
delete 对象名.属性
属性的增删改
动态属性
对象.方法()
方法
for in获取的下标是string，一般用于遍历对象
for in
obj里的所有key，放入一个array
Object.keys(obj)
obj里所有值，，放入一个array
Object.values(obj)
Object.entries(obj)
遍历对象
document.write（）console.log（）
https://www.runoob.com/jsref/jsref-obj-math.html
Math.random（），随机生成font color=\"#e74f4c\
//生成N-M之间的随机整数Math.floor(Math.random() * (M - N + 1)) + N
Math
内置对象
对象
只拷贝地址
浅拷贝
深拷贝
拷贝
简单数据类型
复杂数据类型
存储方式
处理异步操作的一种机制，可以避免callback hell（多层嵌套的回调函数）
pending：初始状态，既不是成功，也不是失败。
fulfilled：意味着操作成功完成。
rejected：意味着操作失败。
三种状态
创建
用法
promises
基础语法
常量一般用大写，const MAX_NUMBER = 100;
const优先，后面发现要修改，再改成let
复杂数据类型，指向的是地址，只要地址不修改，都可以用const
数组和对象使用const声明
（思想转变）变量声明
作用: 就是使用 JS 去操作 html 和浏览器分类：DOM (文档对象模型)、BOM（浏览器对象模型）
作用和分类
Document Object ModelDOM是浏览器提供的一套专门用来 操作网页内容 的功能可以开发网页内容特效和实现用户交互
文档树直观的体现了标签与标签之间的关系
描述HTML文档的结构
DOM树
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
浏览器根据html标签生成的 JS对象（有属性和方法）
把网页内容当做对象来处理
DOM的核心思想
是 DOM 里提供的一个对象所以它提供的属性和方法都是用来访问和操作网页内容的例：document.write()
网页所有内容都在document里面
document 对象
DOM对象
概念
查找元素DOM元素就是利用 JS 选择页面中标签元素
document.querySelector('div')
document.querySelector('.box')
document.querySelector('#nav')
document.querySelector('ul li:first-child')
const 常量名 = document.querySelector('css选择器')
获取后可以直接修改（类似对象的属性）
选择匹配的第一个元素
const 名 = document.querySelectorAll('ul li')
获取后要遍历才能修改
CSS选择器匹配的NodeList 对象集合，数组形式展示（伪数组）
有长度，有索引号的数组但是没有 pop() push() 等数组方法
用for遍历
选择匹配的多个元素
通过css选择器
页面只有一个body，所以可以直接获取body标签，
document.body
看得懂就行，现在不用这个
其他方法
获取DOM对象
<div class=\"box\"> 我是文字的内容 </div>
将文本内容添加/更新到任意标签位置显示纯文本，不解析标签
对象.innerText 属性
将文本内容添加/更新到任意标签位置会解析标签，多标签建议使用模板字符
对象.innerHTML 属性（用这个）
操作元素内容
对象.属性 = 值（有就是改，没有就是增）
刷新页面，图片随机更换1. 获取图片元素2. 随机得到图片序号3. 图片.src = 图片随机路径
例
常用属性
对象.style.样式属性 = ‘值’
刷新页面，随机更换背景图片①： 随机函数②： css页面背景图片 background-image③： 标签选择body， 因为body是唯一的标签，可以直接写 document.body.style
通过 style 属性操作CSS（这么写太长了，适合修改少的）
元素.className = ‘要修成的类名’
操作类名(className) 操作CSS(但这种容易覆盖之前的类)
//添加一个类元素.classList.add（'类名'）
//删除一个类元素.classList.remove（'类名'）
//切换一个类元素.classList.toggle（'类名'）
元素.classList.方法（‘类名’）
轮播图随机版需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式模块：①：图片会随机变换②：底部盒子背景颜色和文字内容会变换③：小圆点随机一个高亮显示
通过 classList 操作类控制CSS（优先用这种）
样式属性
表单.value = ‘新值’
表单内容
表单.type = ‘新type’
表单type
获取：DOM对象.属性名设置：DOM对象.属性名 = 新值
表单属性
在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取
自定义属性（H5新增）
作用：每隔一段时间调用这个函数间隔时间单位是毫秒（1000毫秒=1秒）
开启
定时器返回的是一个id数字
clearInterval()
关闭
用let，因为定时器会重复开关，会变
code
需求：按钮60秒之后才可以使用分析：①：开始先把按钮禁用（disabled 属性）②：一定要获取元素③：函数内处理逻辑 秒数开始减减 按钮里面的文字跟着一起变化 如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击
阅读注册协议
定时器-间歇函数
操作元素属性
DOM获取&属性操作
什么是事件：事件是在编程时系统内发生的动作或者发生的事情比如用户在网页上单击一个按钮
事件源： 那个dom元素被事件触发了，要获取dom元素 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等事件调用的函数： 要做什么事
元素对象.addEventListener（‘事件类型’，要执行的函数）
需求： 点击了按钮，弹出一个对话框1. 事件源 按钮 2.事件类型 点击鼠标 click 字符串3. 事件处理程序 弹出对话框
事件源.on事件 = function() { }
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
几种版本
事件监听
click
mouseenter鼠标经过
mouseleave鼠标离开
鼠标事件
focus获得焦点
blur失去焦点
焦点事件
Keydown键盘按下
Keyup键盘抬起
键盘事件
input用户输入
后去用户输入的内容
获取用户输入字数
文本事件
事件类型
参数为event、ev、e
事件对象是什么也是个对象，这个对象里有事件触发时的相关信息例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
获取当前的事件类型
type
获取光标相对于浏览器可见窗口左上角的位置
clientX/clientY
获取光标相对于当前DOM元素左上角的位置
offsetX/offsetY
用户按下的键盘键的值现在不提倡使用keyCode
key
常用事件对象属性
事件对象
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
里面的函数，每点一次，调用一次
fn这个函数一秒回头调用一次
回调函数
DOM事件基础
事件流指的是事件完整执行过程中的流动路径
简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父实际工作都是使用事件冒泡为主
事件流与两个阶段说明（捕获，冒泡）
从DOM的根元素开始去执行对应的事件 (从外到里)
事件捕获
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
事件冒泡是默认存在的L2事件监听第三个参数是 false，或者默认都是冒泡
mouseover 和 mouseout 会有冒泡效果mouseenter 和 mouseleave 没有冒泡效果 (推荐)
事件冒泡
问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
事件对象.stopPropagation（）
阻止冒泡
比如，阻止链接跳转，阻止表单提交（关键信息没有填好）
e.prevenDefault()
阻止默认行为
on事件方式，直接使用null覆盖偶就可以实现事件的解绑
L0的
匿名函数无法解绑，因为removeEventListener这个方法无法获取函数名
L2的
解绑事件
事件流
它利用了事件冒泡原理，在父元素上设置单个事件监听器来管理多个子元素的事件，以提高性能并避免重复代码。
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
原理
实现
事件委托
Ø 有些时候需要等页面资源全部处理完了做一些事情Ø 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
给window添加load事件
等图片加载
load
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
给document添加DOMContentLoaded事件
DOMContentLoaded
页面加载事件
很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
window.addEventListener('font color=\"#e74f4c\
给 window 或 document 添加 scroll 事件监听某个元素的内部滚动直接给某个元素加即可
document.documentElement
获取页面HTML元素（包括head和body）
尽量在scroll事件里面获取被卷去的距离（比如滚动条是再div里，就在div里添加一个scroll监听）
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
可读写
scrollLeft和scrollTop （属性）
scrollTo()
scroll
元素滚动事件
会在窗口尺寸改变的时候触发事件
获取元素的可见部分宽高（不包含边框，margin，滚动条等）
一个跟随窗口尺寸调整内容的案例
clientWidth和clientHeight
resize
页面尺寸事件
其他事件
就是通过js的方式，得到元素在页面中的位置这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了
获取元素的自身宽高font color=\"#e74f4c\
检测盒子的位置 最近一级带有定位的祖先元素的距离如果都没有则以 文档左上角 为准
offsetLeft和offsetTop（只读）
元素尺寸和位置
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.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()
只能返回当前时间戳
Date.now()
一般用于计算倒计时
时间戳
日期对象
DOM树里每一个内容都称之为节点
类型：元素节点属性节点文本节点等
DOM节点
返回最近一级的父节点（DOM对象）找不到返回null
子元素.parentNode
父节点查找
获得所有子节点、包括文本节点（空格、换行）、注释节点等
父节点.childNodes（没啥用）
仅获得所有元素节点（标签）返回的还是一个伪数组
父节点.children
子节点查找
nextElementSibling
下一个
previousElementSibling
上一个
兄弟节点
查找节点
创建一个新的节点把创建的新的节点放入到指定的元素内部
很多情况下，我们需要在页面中增加元素比如，点击发布按钮，可以新增一条信息
document.createElement('标签名')
创建节点
父元素.appendChild（要插入的元素） 没引号，因为这里是变量
插入到父元素的最后一个子元素
父元素.insertBefore（要插入的元素，在哪个元素前面）
插入到父元素中某个子元素的前面
追加节点
true，则代表克隆时会包含后代节点一起克隆，所有内容
false（默认），则代表克隆时不包含后代节点，只有标签
先克隆，再追加
元素.cloneNode（布尔值）
克隆节点
增加节点
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
父元素.removeChild（要删除的元素）
删除节点
节点操作
触屏事件 touch
M端事件
DOM节点&移动端滑动
web API
JavaScript
0 条评论
回复 删除
下一页
