diff --git "a/\351\231\210\346\200\235\345\223\262/20251110.md" "b/\351\231\210\346\200\235\345\223\262/20251110.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2b916d54f15eb4f2f9e2a725f4aaca861610295d
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251110.md"
@@ -0,0 +1,31 @@
+## 认识script
+1. script(三种排列方式)
+- 放在body里最下面(原因：网页先构建后渲染)
+- 放在标签内(相当于行内样式)
+- 放在外部js文件内(需要引用)
+2. 代码
+- script(js祖师爷)
+
+- alert(弹窗)
+
+- function(可重复使用的代码块)
+
+- onclick(事件处理方法)
+
+## 作业
+
+```html
+
+```
+- 效果图
+ - 
+
+### 输出明日学院的官网地址
+- 代码
+ - ```js
+
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251112.md" "b/\351\231\210\346\200\235\345\223\262/20251112.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a6d975a14540c3eaa1a66922782156af1f3b63c9
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251112.md"
@@ -0,0 +1,131 @@
+## 数据类型
+
+### 基本数据类型
+ - 数值型 number
+ - 十进制
+ - 十六进制
+ - 八进制
+ - 浮点型数据
+ - 传统记数法
+ - 1.23
+ - 科学计数法
+ - 123e-3
+ - infinity 无穷
+ - NaN 非数值
+ - 字符串型 string
+ - 单引号
+ - 双引号
+ - 反引号
+ - 转义字符
+ | 转义字符 | 描述 | 转义字符 | 描述 |
+ | -------- | ------------------ | -------- | ------------------------- |
+ | \b | 退格 | \v | 垂直制表符 |
+ | \n | 换行符 | \r | Enter符 |
+ | \t | 水平制表符,Tab空格 | `\\` | 反斜杠 |
+ | \f | 换页 | \OOO | 八进制整数，范围为000~777 |
+ | \' | 单引号 | \xHH | 十六进制整数，范围为00~FF |
+ | \" | 双引号 | \uhhhh | 十六进制编码的Unicode字符 |
+ - 要将其放在``格式化文本中才会起作用
+ - 字符串拼接
+ - 布尔值 boolean
+ - true
+ - false
+ - 空值 null
+ - 空的或者不存在的值
+ - 未定义值 undefined
+ - 变量还没有赋值
+
+## 常量和变量
+ - 常量
+ - const
+ - 变量
+ - var
+ - let
+ - 变量命名规则
+ - 以字母、下划线、$开头
+ - 不能使用关键字
+ - 区分大小写
+ - 不能使用中文
+ - 不能使用特殊字符
+ - 不能使用数字开头
+
+## 运算符
+
+- 算术运算符
+ - `+ - * / % ++ --`
+ - 优先级
+ - `() -> ** -> * / % -> + - -> ++ --`
+ - 从左到右
+ - 优先级相同，从左到右
+ - () 优先级最高
+- 字符串运算符
+ - `+` 连接两个字符
+ - `+=` 连接两个字符并赋值
+- 比较运算符
+ - `== != > < >= <=`
+ - `==` 比较值是否相等
+ - `===` 比较值和类型是否相等
+ - `!=` 比较值是否不相等
+ - `!==` 比较值和类型是否不相等
+ - `> < >= <=` 比较大小
+- 赋值运算符
+ - `=`
+ - `+=`
+ - `-=`
+ - `*=`
+ - `/=`
+ - `%=`
+
+## 作业
+
+```html
+
+
+
+
+ Document
+
+
+
+
+
+
+```
+
+
diff --git "a/\351\231\210\346\200\235\345\223\262/20251113.md" "b/\351\231\210\346\200\235\345\223\262/20251113.md"
new file mode 100644
index 0000000000000000000000000000000000000000..690a64c09f74733ac8ce115d426396ab938284f9
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251113.md"
@@ -0,0 +1,151 @@
+## 逻辑运算符
+ - 逻辑与 &&
+ - 两个都为真则为真
+ - 逻辑或 ||
+ - 其中有一个为真则为真
+ - 逻辑非 !
+ - !true
+
+## 条件运算符
+ - 语法
+ - `条件 ? 表达式1 : 表达式2`
+ - 如果条件为真，则执行表达式1，否则执行表达式2
+
+## 其他运算符
+- 逗号运算符
+ - `a = 1, b = 2`
+ - 则结果为最后一个
+- typeof 运算符
+ - 判断数据类型
+ | 数据类型 | 返回值 | 数据类型 | 返回值 |
+ | --------- | --------- | -------- | -------- |
+ | 数值 | number | null | objec |
+ | 字符串 | string | 对象 | object |
+ | 布尔值 | object | 函数 | function |
+ | undefined | undefined | ----- | ---- |
+- new运算符
+ - 对象实例名称=new 对象类型（参数）
+ - 对象实例名称=new 对象类型
+
+## 表达式
+- 算术表达式
+
+- 逻辑表达式
+
+- 字符串表达式
+
+## 作业
+
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+```
+
+
diff --git "a/\351\231\210\346\200\235\345\223\262/20251114.md" "b/\351\231\210\346\200\235\345\223\262/20251114.md"
new file mode 100644
index 0000000000000000000000000000000000000000..73bdf4c09d00af8a08ad08b677ebe06318947c8f
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251114.md"
@@ -0,0 +1,133 @@
+## 作业
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+```
+
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251117.md" "b/\351\231\210\346\200\235\345\223\262/20251117.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c5446b862a26815b31896586384dbdd05c693a3b
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251117.md"
@@ -0,0 +1,135 @@
+57-62
+# 笔记
+
+## 函数的定义
+- 定义函数的基本语法
+ - ```
+ function 函数名(参数){
+ 语句；
+ return 返回值；
+ }
+ ```
+- 函数的调用
+ - 简单调用
+ - 函数名(参数)
+ - 响应中调用
+ - 放在onclick事件中
+ - 通过超链接
+ - href="JavaScript：函数()";
+
+- 函数的参数
+ - 实参
+ - 形参
+
+- 函数的返回值
+ - 有return
+ - 无return
+ - 会返回undefined
+
+## 作业
+
+### 获取完整的收货地址
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 获取数字的绝对值
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 斐波那契数列
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 判断是否可以享受优惠活动
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 判断考生成绩是否到达本科分数线
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251119.md" "b/\351\231\210\346\200\235\345\223\262/20251119.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c957986836ccdff8e5d9274ef63bd59016200e75
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251119.md"
@@ -0,0 +1,240 @@
+63-73
+# 笔记
+
+## 递归函数
+- 需要两个必要函数
+ - 结束递归的条件
+ - 递归调用语句
+
+## 内置对象
+- parselnt
+ - 首位为数字的字符串转化成数字
+- parseFloat
+ - 首位为数字的字符串转化成浮点型
+- isNaN
+ - 检验是否为NaN
+ - 返回true 或 false
+- isFinite
+ - 检验是否有限
+ - 返回true 或 false
+
+## 字符串处理函数
+- eval
+ - eval("5+7")
+ - 计算字符串表达式
+- encodeUrl
+ - 对URL进行编码
+- decodeUrl
+ - 对URl进行解码
+
+## 匿名函数
+- 语法
+ - ```
+ function(参数){
+ 语句
+ 返回值
+ }
+ ```
+
+## 对象的概念
+- 一个贴了标签的收纳盒
+- 包含两个要素
+ - 方法
+ - 属性
+
+## 对象的增删改查
+- 对象的创建
+ - let 对象名 ={属性名：属性值}
+- 对象的删除
+ - delate 对象名.属性名
+- 对象的修改
+ - 对象名.修改属性名=属性值
+- 对象的添加
+ - 对象名['属性名']=属性值
+ - 对象名.属性名=属性值
+
+## 作业
+
+### 比较两个数字的大小
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 获取3个数字中的最小值
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 判断登录是否成功
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 获取1000以内能同时被3和5整除的正整数
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 判断20岁处在哪个年龄段
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 输出某年某月的天数
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
diff --git "a/\351\231\210\346\200\235\345\223\262/20251120.md" "b/\351\231\210\346\200\235\345\223\262/20251120.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3525c832d0c755eb3125880b0c819821ba11da1b
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251120.md"
@@ -0,0 +1,92 @@
+# 笔记
+
+## 遍历对象
+- 语法
+ - ```
+ for(let key in 对象名){
+ 对象名[key]
+ }
+ ```
+
+## 内部对象
+- Math
+ - 使用
+ - Math.方法属性
+ - .abs() 绝对值
+ - .ceil() 向上取整
+ - .floor() 向下取整
+ - .max() 最大
+ - .min() 最小
+ - .round() 四舍五入
+
+- Date
+ - 创建
+ - let 名=new Date()
+ -
+ | 方法名称 | 语法示例 | 功能描述 | 返回值类型 | 备注 |
+ | -------------------- | --------------------------------- | -------------------------------------------------------------------------------- | ---------- | -------------------------- |
+ | getFullYear() | new Date().getFullYear() | 获取年份（4位数字，如2024） | Number | 区别于 getYear()（已弃用） |
+ | getMonth() | new Date().getMonth() | 获取月份（0-11，0代表1月，11代表12月） | Number | 使用时需+1得到实际月份 |
+ | getDate() | new Date().getDate() | 获取当月日期（1-31） | Number | 注意与 getDay() 区分 |
+ | getDay() | new Date().getDay() | 获取星期几（0-6，0代表周日，6代表周六） | Number | 非“当月第几天” |
+ | getHours() | new Date().getHours() | 获取小时数（0-23，24小时制） | Number | 24小时制无上午/下午区分 |
+ | getMinutes() | new Date().getMinutes() | 获取分钟数（0-59） | Number | - |
+ | getSeconds() | new Date().getSeconds() | 获取秒数（0-59） | Number | - |
+ | getMilliseconds() | new Date().getMilliseconds() | 获取毫秒数（0-999） | Number | 用于高精度时间计算 |
+ | getTime() | new Date().getTime() | 获取从1970-01-01 00:00:00 UTC到当前时间的毫秒数（时间戳） | Number | 常用于时间比较和排序 |
+ | toLocaleDateString() | new Date().toLocaleDateString() | 按本地格式返回日期字符串（如“2024/5/20”或“2024-05-20”） | String | 格式因系统区域设置而异 |
+ | toLocaleTimeString() | new Date().toLocaleTimeString() | 按本地格式返回时间字符串（如“14:30:25”或“下午2:30:25”） | String | 包含时分秒，区域自适应 |
+ | toLocaleString() | new Date().toLocaleString() | 按本地格式返回日期+时间字符串（如“2024/5/20 14:30:25”） | String | 最常用的本地格式化方法 |
+ | toString() | new Date().toString() | 返回完整的日期时间字符串（如“Mon May 20 2024 14:30:25 GMT+0800 (中国标准时间)”） | String | 包含时区信息，格式固定 |
+ | setFullYear() | new Date().setFullYear(2025) | 设置年份，可传入年、月、日参数（如setFullYear(2025, 4, 15)） | Number | 返回设置后的时间戳 |
+ | setMonth() | new Date().setMonth(5) | 设置月份（0-11），可额外传入日期参数（如setMonth(5, 20)） | Number | 月份参数需注意0起始 |
+ | setDate() | new Date().setDate(15) | 设置当月日期（1-31），超出范围会自动进位（如32日会转为下月1日） | Number | 支持日期自动调整 |
+ | setHours() | new Date().setHours(10) | 设置小时数（0-23），可额外传入分、秒、毫秒参数 | Number | 超出范围自动进位 |
+ | setMinutes() | new Date().setMinutes(45) | 设置分钟数（0-59），可额外传入秒、毫秒参数 | Number | - |
+ | setSeconds() | new Date().setSeconds(30) | 设置秒数（0-59），可额外传入毫秒参数 | Number | - |
+ | setMilliseconds() | new Date().setMilliseconds(500) | 设置毫秒数（0-999） | Number | - |
+ | setTime() | new Date().setTime(1716200000000) | 通过时间戳设置日期时间 | Number | 直接覆盖当前日期时间 |
+ | now() | Date.now() | 获取当前时间的时间戳（无需创建Date实例） | Number | 静态方法，性能更优 |
+ | parse() | Date.parse("2024-05-20") | 解析日期字符串为时间戳（格式支持“yyyy-MM-dd”“MM/dd/yyyy”等） | Number | 解析失败返回NaN |
+ | UTC() | Date.UTC(2024, 4, 20) | 按UTC时间创建日期并返回时间戳（月份0-11，日期1-31） | Number | 静态方法，忽略本地时区 |
+
+## 作业
+
+### 计算两个日期的间隔小时数
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 高考倒计时
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+## 转换时间格式
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251121.md" "b/\351\231\210\346\200\235\345\223\262/20251121.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d695b93a9550eeaf94c1708d1ff21be46b931bc9
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251121.md"
@@ -0,0 +1,150 @@
+# 笔记
+
+## Event事件
+- 概念
+ - 定义
+ - 事件发生时，浏览器自动创建的对象，包含该事件的详细信息
+- 常用属性
+ - altKey
+ - 判断alt是否被按下
+ - ctrlKey
+ - 判断ctrl是否被按下
+ - shiftKey
+ - 判断shift是否被按下
+ - 以上三个都是布尔型
+ - true 按下
+ - false 未按下
+ - button
+ - 获取事件发生时用户按的鼠标键
+ - 0左 中1 2右
+ - clientX
+ - 获取鼠标指针在浏览器窗口的X坐标
+ - clientY
+ - 获取鼠标指针在浏览器窗口的Y坐标
+ - x
+ - 设置或获取鼠标指针位置相对于css属性中有position属性的上级元素的X轴坐标
+ - y
+ - 只读属性
+ - 设置或获取鼠标指针位置相对于css属性中有position属性的上级元素的Y轴坐标
+ - 以上x、y如果没有上级元素以body为参考
+ - canceBubble
+ - 可读写的布尔值看，默认false
+ - target
+ - 获取触发事件的对象
+ - 可以读、写该元素的属性，并调用该元素的任何方法
+
+## 数组
+- 数组的定义
+ - let 数组名=["das","sad","sda"];
+- 数组的输入
+ - 创建数组同时传入数据
+ - 数组名[下标]=数据
+ - 利用for循环输入数组数据
+- 数组的输出
+ - 用下标获取指定元素值
+ - 用for循环获取数组
+ - 用for循环全输出
+- 获取数组长度
+ - 数组名.length
+- 数组的方法
+ - concat
+ - 连接两个或更多数组，并返回结果
+ - pop
+ - 删除并返回数组的最后一个元素
+ - push
+ - 向数组的尾部添加一个或多个元素，并返回新的长度
+ - shift
+ - 删除并返回数组中的第一个元素
+ - splice
+ - 删除元素，并向数组中添加新元素
+ - unshift
+ - 向数组的头部添加一个或多个元素，并返回新的长度
+ - reverse
+ - 颠倒数组中元素的顺序
+ - sort
+ - 对数组中的元素进行排序
+ - slice
+ - 从某个已有的数组中返回选定的元素
+ - toSource
+ - 代表对象的源代码
+ - toString
+ - 把数组转换为字符串，并返回结果
+ - toLocaleString
+ - 把数组转换为本地字符串，并返回结果
+ - join
+ - 把数组中的所有元素放入一个字符串，元素间通过指定的分隔符进行分割
+ - value
+ - 返回数组对象的原始值
+
+## 作业
+
+### 判断单击的鼠标按键
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
+
+### 生成指定位数的1~6的随机数
+- 代码
+ - ```js
+
+ 请输入要生成随机数的位数：
+
+
+
+ ```
+- 效果图
+ - 
+
+### 计算从出生到现在度过的时间
+- 代码
+ - ```js
+
+ ```
+- 效果图
+ - 
diff --git "a/\351\231\210\346\200\235\345\223\262/20251124_Array,String.md" "b/\351\231\210\346\200\235\345\223\262/20251124_Array,String.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f4b9eaa08b473d7ae801d3718f1571d72fb253ff
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251124_Array,String.md"
@@ -0,0 +1,210 @@
+# Array，String
+- concat
+```js
+arr.concat(arr1,arr2);//连接多个数组并返回结果
+```
+- pop
+```js
+arr.pop();//删除最后一个数组并返回结果
+```
+- push
+```js
+arr.push(1,2,3,4);//在数组后面添加数并返回结果
+```
+- shift
+```js
+arr.shift();//删除第一个数组并返回结果
+```
+- splice
+```js
+arr.splice(1,2,3,4);//删除最后一个数组并添加元素
+```
+- unshift
+```js
+arr.unshift(1,2,3,4);//在数组头部添加一到多个元素并返回结果
+```
+- reverse
+```js
+arr.reverse();//颠倒数组
+```
+- sort
+
+```js
+arr.sort();//数组排序
+```
+- slice
+
+```js
+arr.slice(0,3);//在数组中返回选定元素
+```
+- toSource
+```js
+arr.toSource();//输出源码
+```
+- toString
+```js
+arr.toString(1,2,3,4);//把数组转换为字符串，并返回结果
+```
+- toLocaleString
+```js
+arr.toLocaleString(1,2,3,4);//把数组转换为本地字符串，并返回结果
+```
+- join
+```js
+arr.join(",");//把数组用字符隔开，并返回结果
+```
+- valueOf
+```js
+arr.valueOf();//返回数组原始结果
+```
+- Map
+```js
+let map = new map(["key","value"],[...]);//字典[键/值]
+```
+
+# 作业
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+```
+
+
diff --git "a/\351\231\210\346\200\235\345\223\262/20251126_\346\255\243\345\210\231.md" "b/\351\231\210\346\200\235\345\223\262/20251126_\346\255\243\345\210\231.md"
new file mode 100644
index 0000000000000000000000000000000000000000..cdcd5ee62aa8f9efd71cd9721550f62d468e9fd2
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251126_\346\255\243\345\210\231.md"
@@ -0,0 +1,26 @@
+# 正则
+
+| 符号 | 含义 | 示例 | | |
+| ------- | -------------------------------------------------- | -------------------------------------- | ---- | ---------------- |
+| `.` | 匹配任意单个字符（除换行） | `a.b` 匹配 `acb`/`aab` | | |
+| `*` | 前一个字符匹配 0 次或多次 | `ab*` 匹配 `a`/`ab`/`abb` | | |
+| `+` | 前一个字符匹配 1 次或多次 | `ab+` 匹配 `ab`/`abb` | | |
+| `?` | 前一个字符匹配 0 次或 1 次 | `ab?` 匹配 `a`/`ab` | | |
+| `{n}` | 前一个字符匹配 n 次 | `a{3}` 匹配 `aaa` | | |
+| `{n,}` | 前一个字符匹配≥n 次 | `a{2,}` 匹配 `aa`/`aaa` | | |
+| `{n,m}` | 前一个字符匹配 n~m 次 | `a{1,3}` 匹配 `a`/`aa`/`aaa` | | |
+| `^` | 匹配字符串开头 | `^abc` 匹配 `abc123` | | |
+| `$` | 匹配字符串结尾 | `abc$` 匹配 `123abc` | | |
+| `[]` | 字符集（匹配任意一个） | `[abc]` 匹配 `a`/`b`/`c` | | |
+| `[^]` | 否定字符集（不匹配任意一个） | `[^abc]` 匹配 `d`/`1` | | |
+| ` | ` | 逻辑或（分隔多个模式） | `ab | cd`匹配`ab`/`cd` |
+| `()` | 分组（提取子匹配 / 改变优先级） | `(ab)+` 匹配 `ab`/`abab` | | |
+| `\` | 转义字符（匹配特殊符号） | `\.` 匹配 `.` | | |
+| `\d` | 匹配数字（等价于 [0-9]） | `\d{3}` 匹配 `123` | | |
+| `\D` | 匹配非数字（等价于 [^0-9]） | `\D` 匹配 `a`/`!` | | |
+| `\w` | 匹配字母 / 数字 / 下划线（等价于 [a-zA-Z0-9_]） | `\w+` 匹配 `user123` | | |
+| `\W` | 匹配非字母 / 数字 / 下划线（等价于 [^a-zA-Z0-9_]） | `\W` 匹配 `@`/ | | |
+| `\s` | 匹配空白字符（空格 / 制表符 / 换行等） | `a\sb` 匹配 `a b` | | |
+| `\S` | 匹配非空白字符 | `\S+` 匹配 `abc123` | | |
+| `\b` | 单词边界（区分单词与非单词） | `\bcat\b` 匹配 `cat` 不匹配 `category` | | |
+| `\B`| 非单词边界| `\Bcat\B` 匹配 `xcatz` 中的 `cat` | | |
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251127.md" "b/\351\231\210\346\200\235\345\223\262/20251127.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c46be4dfb6198cc1304f7c9ea4d849d1ddb34893
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251127.md"
@@ -0,0 +1,153 @@
+## 笔记
+
+### try...catch...finally 语句
+
+```javascript
+try {
+ // 可能抛出异常的代码
+} catch (error) {
+ // 捕获异常并处理
+} finally {
+ // 无论是否有异常都执行
+}
+```
+
+#### try 块
+
+包含可能出错的代码。一旦其中代码抛出异常，程序立即跳转到 `catch` 块，`try` 块后续代码不再执行。
+
+#### 3. catch 块
+
+捕获 `try` 块抛出的异常。`catch` 的参数（常为 `error`）包含异常详细信息，如 `error.message` 为错误信息，`error.name` 是错误类型。
+
+#### 4. finally 块
+
+无论 `try` 块是否抛出异常，都会执行。常用于资源清理，如关闭数据库连接。
+
+### throw 语句
+
+- **作用**：手动抛出异常。当程序遇到不符合预期的条件时，可使用 `throw` 中断正常流程并抛出异常。
+
+```javascript
+function checkAge(age) {
+ if (age < 0) {
+ throw new Error('年龄不能为负数');
+ }
+ return `年龄是 ${age}`;
+}
+
+try {
+ let result = checkAge(-5);
+ console.log(result);
+} catch (error) {
+ console.log('捕获到异常:', error.message);
+}
+```
+
+## 作业
+
+### 第一部分
+
+#### 关键代码
+
+```html
+
+
+ 用户名：
+ 密 码：
+
+
+```
+
+#### 效果展示
+
+
+
+### 第二部分
+
+#### 关键代码
+
+```html
+
+
+```
+
+#### 效果展示
+
+
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251128.md" "b/\351\231\210\346\200\235\345\223\262/20251128.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bc0c958983e8cac07fcc279fd6e6d8002e2df621
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251128.md"
@@ -0,0 +1,435 @@
+## 笔记
+
+# 事件对象（event/e）笔记
+
+## 一、通用属性与方法
+
+| 类别 | 属性 / 方法 | 白话解释 | 返回值 |
+| ------------ | ------------------- | ------------------------------------------------------------ | ------------------------------------------------- |
+| 找触发元素 | `target` | 实际触发事件的 DOM 元素。例如，点击列表中的 `li`，`target` 就是该 `li` 元素。 | 触发事件的 DOM 元素对象 |
+| 认事件类型 | `type` | 事件的名称，以字符串形式呈现，如 `focus`、`click`、`keydown` 等。 | 表示事件类型的字符串 |
+| 阻止默认行为 | `preventDefault()` | 用于取消浏览器的默认动作，比如回车刷新页面、链接跳转、右键菜单弹出等。 | 无返回值。该方法用于阻止浏览器的默认行为。 |
+| 阻止事件冒泡 | `stopPropagation()` | 防止事件向上冒泡到父元素，避免嵌套元素间的事件冲突。 | 无返回值。该方法用于阻止事件在 DOM 树中向上冒泡。 |
+
+### 找触发元素示例
+```javascript
+// 输入框获焦时添加红色边框
+const inputs = document.querySelectorAll('.txt');
+inputs.forEach(item => {
+ item.addEventListener('focus', (e) => {
+ e.target.style.border = '5px solid red';
+ });
+});
+```
+
+### 认事件类型示例
+```javascript
+// 一个函数处理多种事件
+function handleInput(e) {
+ if (e.type === 'focus') {
+ e.target.style.border = 'red';
+ } else if (e.type === 'blur') {
+ e.target.style.border = 'gray';
+ }
+}
+inputs.forEach(item => {
+ item.addEventListener('focus', handleInput);
+ item.addEventListener('blur', handleInput);
+});
+```
+
+### 阻止默认行为示例
+```javascript
+// 输入框按回车不刷新页面，并打印内容
+inputs[0].addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault(); // 阻止默认回车行为
+ console.log('输入内容：', e.target.value);
+ }
+});
+// 禁用页面右键菜单
+document.addEventListener('contextmenu', (e) => {
+ e.preventDefault();
+ alert('禁止右键');
+});
+```
+
+### 阻止事件冒泡示例
+```javascript
+// 点击输入框不触发父元素的 click 事件
+const child = document.querySelector('.txt');
+const parent = document.getElementById('txtBorder');
+child.addEventListener('click', (e) => {
+ e.stopPropagation(); // 阻止冒泡
+ console.log('输入框被点击');
+});
+parent.addEventListener('click', () => {
+ console.log('父元素被点击'); // 点击输入框时此代码不会执行
+});
+```
+
+## 二、专属属性
+
+### 键盘事件（keydown / keyup / keypress）
+
+| 属性 | 白话解释 | 返回值 |
+| ----------------------------- | ------------------------------------------------------------ | ------------------------------------------------------- |
+| `key` | 按键的「语义名称」，区分大小写，功能键也包含其中，`a`、`A`、`Enter`、`Backspace` 等。 | 表示按键语义名称的字符串 |
+| `code` | 按键的「物理位置名称」，不区分大小写，如 `KeyA`、`ArrowLeft`、`Space` 等。 | 表示按键物理位置名称的字符串 |
+| `ctrlKey`/`shiftKey`/`altKey` | 表示是否按住 `ctrl`/`shift`/`alt` 键，返回布尔值。 | `true` 或 `false`，表示是否按住 `ctrl`/`shift`/`alt`键 |
+
+### 键盘事件示例
+```javascript
+// 检测回车、删除、Ctrl + S 操作
+inputs[0].addEventListener('keydown', (e) => {
+ // 按回车提交
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ console.log('提交：', e.target.value);
+ }
+ // 按删除提示
+ if (e.key === 'Backspace') {
+ console.log('正在删除内容');
+ }
+ // Ctrl + S 保存
+ if (e.ctrlKey && e.key ==='s') {
+ e.preventDefault();
+ console.log('执行保存操作');
+ }
+});
+// 检测方向键
+inputs[0].addEventListener('keydown', (e) => {
+ if (e.code === 'ArrowLeft') console.log('按了左箭头');
+ if (e.code === 'Space') console.log('按了空格键');
+});
+// 检测 Shift + A（大写 A）
+if (e.shiftKey && e.key === 'A') console.log('按了大写 A');
+// Mac 下 Command + C
+if (e.metaKey && e.key === 'c') console.log('Mac 复制');
+```
+
+### 鼠标事件（click / mousedown / mousemove / mouseover）
+
+| 属性 | 白话解释 | 返回值 |
+| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| `clientX/Y` | 鼠标相对于「可视窗口」的坐标，不包含滚动条的偏移量。 | 表示鼠标相对于可视窗口的水平（`clientX`）或垂直（`clientY`）坐标的数字 |
+| `pageX/Y` | 鼠标相对于「整个文档」的坐标，包含滚动条的偏移量。 | 表示鼠标相对于整个文档的水平（`pageX`）或垂直（`pageY`）坐标的数字 |
+| `button` | 按下的鼠标按键，`0` 代表左键，`1` 代表滚轮，`2` 代表右键。 | `0`（左键）、`1`（滚轮）、`2`（右键）中的一个数字 |
+| `relatedTarget` | 鼠标移入或移出时的「关联元素」。例如在 `mouseover` 事件中，它表示从哪个元素移过来的。 | 鼠标移入或移出时的关联 DOM 元素对象 |
+
+### 鼠标事件示例
+```javascript
+// 点击页面显示鼠标相对于可视窗口的位置
+document.addEventListener('click', (e) => {
+ console.log('相对于窗口：', e.clientX, e.clientY);
+});
+// 滚动后仍能获取鼠标相对于整个文档的准确位置
+document.addEventListener('click', (e) => {
+ console.log('相对于文档：', e.pageX, e.pageY);
+});
+// 区分左键、右键点击
+document.addEventListener('mousedown', (e) => {
+ if (e.button === 0) console.log('左键点击');
+ if (e.button === 2) {
+ e.preventDefault();
+ console.log('右键点击');
+ }
+});
+// 鼠标移入输入框时，显示从哪个元素移过来的
+inputs[0].addEventListener('mouseover', (e) => {
+ console.log('从', e.relatedTarget.tagName, '移过来');
+});
+```
+
+### 焦点事件（focus / blur / focusin / focusout）
+
+| 属性 | 白话解释 | 返回值 |
+| --------------- | ------------------------------------------------------------ | ----------------------------- |
+| `relatedTarget` | 在焦点切换时的关联元素。在 `focus` 事件中，它是失去焦点的元素；在 `blur` 事件中，它是获得焦点的元素。 | 焦点切换时的关联 DOM 元素对象 |
+
+### 焦点事件示例
+```javascript
+// 焦点切换时提示焦点来源或目标
+inputs.forEach(item => {
+ item.addEventListener('focus', (e) => {
+ console.log('焦点从', e.relatedTarget?.placeholder, '移到当前输入框');
+ });
+ item.addEventListener('blur', (e) => {
+ console.log('焦点从当前输入框移到', e.relatedTarget?.placeholder);
+ });
+});
+```
+
+### 表单事件（change / input / submit）
+
+| 属性 / 操作 | 白话解释 | 返回值 |
+| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| `e.target.value` | 表单元素的当前值，需通过 `target` 获取，并非 `event` 直接属性。 | 表单元素的当前值，具体类型取决于表单元素类型（如输入框为字符串） |
+| `e.target.checked` | 复选框或单选框是否被选中，返回布尔值。 | `true` 或 `false`，表示复选框或单选框是否被选中 |
+| `submit`阻止 | 阻止表单的默认提交行为，避免页面刷新。 | 无返回值。该方法用于阻止表单的默认提交行为。 |
+
+### 表单事件示例
+```javascript
+// 实时监听输入框内容变化
+inputs[0].addEventListener('input', (e) => {
+ console.log('实时输入：', e.target.value);
+});
+// 监听单选框选中状态
+const radio = document.querySelector('input[type="radio"]');
+radio.addEventListener('change', (e) => {
+ console.log('是否选中：', e.target.checked);
+});
+// 表单提交时验证，不刷新页面
+const form = document.querySelector('form');
+form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ console.log('表单提交，内容：', new FormData(form));
+});
+```
+
+## 总结
+
+掌握以下 3 步，可解决 90% 的事件处理场景：
+
+1. **找元素**：利用 `e.target` 获取触发事件的 DOM 元素。
+2. **拿信息**：依据事件类型获取相关上下文信息，如键盘事件用 `key`，鼠标事件用 `clientX`，焦点事件用 `relatedTarget` 等。
+3. **做操作**：根据需求使用 `preventDefault()` 阻止默认行为，或用 `stopPropagation()` 阻止事件冒泡。
+
+## 作业
+```html
+
+
+
+
+
+ Document
+
+
+
+
+ 第一题
+
+
+
+
第二题
+
+ 第三题
+ 当前时间
+
+ 第四题
+
+
+ 第五题
+
+
+
+
+ 第六题
+
+
+ 第七题
+
+
+
+
+ 第八题
+
+
+ 第九题
+
+
+
+
+ 第十题
+
+
+
+
+
+
+
+```
+
+
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251201.md" "b/\351\231\210\346\200\235\345\223\262/20251201.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0517431f707f0b362b1fbb87900c9f14eb25e88c
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251201.md"
@@ -0,0 +1,107 @@
+## 笔记
+
+### 文本编辑事件
+
+#### 核心事件（文本 / 内容操作）
+
+- `copy`：复制操作时触发（快捷键、右键菜单复制）
+- `cut`：剪切操作时触发（快捷键、右键菜单剪切）
+- `paste`：粘贴操作时触发（快捷键、右键菜单粘贴）
+- `select`：文本框（input/textarea）或可编辑元素（contenteditable）中文本被选中时触发
+
+#### 关键操作（Clipboard API）
+
+- 获取剪贴板内容：`event.clipboardData.getData('text')`（paste 事件中使用）
+- 设置剪贴板内容：`event.clipboardData.setData('text', 内容)`（copy/cut 事件中，需先阻止默认行为）
+- 阻止默认操作：`event.preventDefault()`（拦截复制 / 粘贴，自定义处理逻辑）
+
+### 二、拖放对象与放置目标事件
+
+#### 拖放前提
+
+- 拖拽元素需设置 `draggable="true"`（图片、链接默认可拖拽）
+
+#### 拖拽对象事件（源元素）
+
+- `dragstart`：开始拖拽时触发（可设置拖拽数据 `event.dataTransfer.setData()`）
+- `drag`：拖拽过程中持续触发
+- `dragend`：拖拽结束（无论成功与否）触发
+
+#### 放置目标事件（目标元素）
+
+- `dragenter`：拖拽元素进入目标时触发（需阻止默认行为，否则无法成为放置目标）
+- `dragover`：拖拽元素在目标上移动时触发（必须阻止默认行为，否则 `drop` 不触发）
+- `dragleave`：拖拽元素离开目标时触发
+- `drop`：在目标上释放拖拽元素时触发（完成放置，通过 `event.dataTransfer.getData()` 获取拖拽数据）
+
+#### 数据传递（DataTransfer API）
+
+- 设置拖拽数据：`event.dataTransfer.setData('text', 数据)`（dragstart 事件中）
+- 获取拖拽数据：`event.dataTransfer.getData('text')`（drop 事件中）
+- 设置拖拽效果：`event.dataTransfer.effectAllowed = 'copy/move/link'`（限制拖拽行为）
+
+## 作业
+
+### 第一部分
+
+#### 关键代码
+
+```html
+ 
+
+ 拖拽我到下方区域
+
+
+ 请将上方文本拖放到这里
+
+
+
+```
+
+#### 效果展示
+
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251203.md" "b/\351\231\210\346\200\235\345\223\262/20251203.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c5c2f471ff517c39689b28bcf44a8225faf0b335
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251203.md"
@@ -0,0 +1,203 @@
+## 笔记
+
+### Document 对象常用属性
+
+#### 基础结构相关
+
+- `document.documentElement`：获取 HTML 根元素（`` 标签）
+- `document.head`：获取文档的 `` 元素
+- `document.body`：获取文档的 `` 元素
+- `document.title`：获取或设置文档的标题（对应 `` 标签内容）
+- `document.URL`：获取当前文档的完整 URL
+- `document.domain`：获取当前文档的域名（跨域相关场景常用）
+- `document.referrer`：获取跳转至当前文档的前一个页面 URL（来源页面）
+
+#### 元素获取相关（便捷属性）
+
+- `document.forms`：获取文档中所有 `<form>` 元素的集合（HTMLCollection）
+- `document.images`：获取文档中所有 `<img>` 元素的集合（HTMLCollection）
+- `document.links`：获取文档中所有 `<a>` 标签（带 href 属性）和 `<area>` 元素的集合（HTMLCollection）
+- `document.scripts`：获取文档中所有 `<script>` 元素的集合（HTMLCollection）
+- `document.styleSheets`：获取文档中所有样式表（包括 `<style>` 和外部 CSS）的集合
+
+#### 文档状态与元信息
+
+- `document.readyState`：获取文档加载状态（loading：加载中；interactive：DOM 可交互；complete：完全加载完成）
+- `document.characterSet`：获取或设置文档的字符编码（如 UTF-8）
+- `document.doctype`：获取文档的 DOCTYPE 声明
+- `document.documentURI`：与 URL 类似，返回文档的统一资源标识符（部分场景下与 URL 等效）
+
+#### 其他常用属性
+
+- `document.cookie`：获取或设置当前文档的 Cookie（字符串格式，需自行解析/拼接）
+- `document.defaultView`：获取文档所属的窗口对象（即 window，部分浏览器兼容场景使用）
+- `document.activeElement`：获取当前文档中获得焦点的元素（如输入框、按钮等）
+
+### Document 对象常用方法
+
+#### 元素查询方法
+
+- `querySelector(selector)`：根据 CSS 选择器获取第一个匹配的元素（返回单个 DOM 元素，支持复杂选择器）
+- `querySelectorAll(selector)`：根据 CSS 选择器获取所有匹配的元素（NodeList，静态集合，不动态更新）
+
+#### 元素创建与插入/删除
+
+- `createElement(tagName)`：创建一个指定标签名的新 DOM 元素
+- `createTextNode(text)`：创建一个文本节点（包含指定文本内容）
+- `createDocumentFragment()`：创建文档片段（用于批量插入元素，提升性能，不直接属于 DOM 树）
+- `appendChild(child)`：将子元素添加到指定父元素的末尾（若子元素已存在，会移动位置）
+- `insertBefore(newChild, referenceChild)`：在参考子元素之前插入新子元素
+- `removeChild(child)`：删除指定的子元素（需通过父元素调用）
+- `replaceChild(newChild, oldChild)`：用新子元素替换旧子元素
+
+#### 文档操作与加载
+
+- `write(text)`：向文档中写入内容（可写 HTML 字符串，加载期间使用，加载完成后会覆盖文档）
+- `writeln(text)`：与 write 类似，末尾自动添加换行符
+- `open()`：打开文档输出流（配合 write 使用，较少单独使用）
+- `close()`：关闭文档输出流（结束 write 写入操作）
+- `getSelection()`：获取用户在文档中选中的文本内容（返回 Selection 对象）
+
+## 作业
+
+### 第一部分
+
+#### 关键代码
+
+```html
+ <div class="left-section">
+ <h1 class="section-title">训练</h1>
+ <div class="base-card small-card" id="colorSwapCard">
+ 天行健君子以自强不息<br>地势坤君子以厚德载物
+ </div>
+ <div class="btn-group">
+ <input type="button" class="common-btn" id="colorSwapBtn" value="交互颜色">
+ <input type="button" class="common-btn" id="urlFetchBtn" value="获取地址">
+ </div>
+ <div class="base-card small-card" id="textAppendCard"></div>
+ <div class="input-group">
+ <input type="text" class="text-input-box" id="userInputTxt" placeholder="请输入文字">
+ <input type="button" class="common-btn" id="textAppendBtn" value="添加">
+ </div>
+ </div>
+ <div class="right-section">
+ <h1 class="section-title">综合练习</h1>
+ <div class="base-card large-card" id="themeChangeCard">
+ <h2>李白《行路难・其一》</h2>
+ 金樽清酒斗十千，玉盘珍羞直万钱。<br>
+ 停杯投箸不能食，拔剑四顾心茫然。<br>
+ 欲渡黄河冰塞川，将登太行雪满山。<br>
+ 闲来垂钓碧溪上，忽复乘舟梦日边。<br>
+ 行路难！行路难！多歧路，今安在？<br>
+ 长风破浪会有时，直挂云帆济沧海。<br>
+ </div>
+ <input type="button" class="common-btn" id="themeChangeBtn" value="切换主题">
+ <div class="image-container" id="imageDialogArea">
+ <a href="" id="imageOpenLink">打开图片对话框</a>
+ </div>
+ <div class="avatar-container">
+ <input type="button" class="common-btn" id="addAvatarBtn" value="添加用户头像">
+ <div class="avatar-list" id="avatarListContainer"></div>
+ </div>
+ </div>
+ <script>
+ // 训练1
+ const colorSwapBtn = document.querySelector('#colorSwapBtn');
+ const colorSwapCard = document.querySelector('#colorSwapCard');
+ function swapBgTextColor() {
+ // getComputedStyle()获取实参dom元素的全局样式
+ let targetCardStyle = getComputedStyle(colorSwapCard)
+ let currentBgColor = targetCardStyle.backgroundColor
+ let currentTextColor = targetCardStyle.color
+ colorSwapCard.style.backgroundColor = currentTextColor
+ colorSwapCard.style.color = currentBgColor
+ }
+ colorSwapBtn.addEventListener('click', swapBgTextColor)
+
+ // 训练2
+ const urlFetchBtn = document.querySelector('#urlFetchBtn');
+ function fetchPageUrl() {
+ let pageUrl = document.URL
+ console.log(pageUrl);
+
+ }
+ urlFetchBtn.addEventListener("click", fetchPageUrl)
+
+ // 训练3
+ const textAppendCard = document.querySelector('#textAppendCard')
+ const userInputTxt = document.querySelector('#userInputTxt')
+ const textAppendBtn = document.querySelector('#textAppendBtn')
+ function appendInputText() {
+ let textSpan = document.createElement("span")
+ let inputContent = document.createTextNode(userInputTxt.value)
+ // appendChild()将实参的dom节点添加到调用的dom节点列表中的尾部
+ textSpan.appendChild(inputContent);
+ textAppendCard.appendChild(textSpan);
+ }
+ textAppendBtn.addEventListener("click", appendInputText)
+
+ // 综合练习01
+ const themeChangeBtn = document.querySelector('#themeChangeBtn');
+ const themeChangeCard = document.querySelector('#themeChangeCard')
+ let themeIndex = 0
+ function switchCardTheme() {
+ // 数组存储前景色和背景色，省略
+ const foregroundColors = [];
+ const backgroundColor = [];
+ themeChangeCard.style.color = foregroundColors[themeIndex]
+ themeChangeCard.style.backgroundColor = backgroundColor[themeIndex]
+ themeIndex++
+ if (themeIndex == foregroundColors.length) {
+ themeIndex = 0
+ }
+ }
+ themeChangeBtn.addEventListener("click", switchCardTheme)
+
+ // 综合练习02：图片对话框
+ const imageOpenLink = document.querySelector('#imageOpenLink')
+ const imageDialogArea = document.querySelector('#imageDialogArea')
+ let dialogContainer = document.createElement("div")
+ let imageWrapper = document.createElement("div")
+ let deleteLink = document.createElement("a")
+ let deleteText = document.createTextNode("删除")
+ deleteLink.appendChild(deleteText)
+ let imgElement = document.createElement('img')
+ imgElement.src = "https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/chat/static/image/logo-icon-white-bg.72df0b1a.png"
+ function openImageDialog(e) {
+ e.preventDefault();
+ imageWrapper.appendChild(imgElement)
+ dialogContainer.appendChild(deleteLink)
+ dialogContainer.appendChild(imageWrapper)
+ imageDialogArea.appendChild(dialogContainer)
+ }
+ imageOpenLink.addEventListener("click", openImageDialog)
+ function removeImageDialog() {
+ imageDialogArea.removeChild(dialogContainer)
+ }
+ deleteLink.addEventListener("click", removeImageDialog)
+
+ // 综合练习03
+ </script>
+ <script>
+ let addAvatarBtn = document.querySelector("#addAvatarBtn");
+ let avatarListContainer = document.querySelector("#avatarListContainer")
+ let avatarIndex = 0
+ function addUserAvatar() {
+ // 数组存储头像地址，省略
+ const userAvatarUrls = [];
+ let avatarImage = document.createElement("img")
+ avatarImage.src = userAvatarUrls[avatarIndex]
+ avatarImage.className = "avatar-item"
+ avatarImage.alt = `用户头像${avatarIndex + 1}`
+ avatarListContainer.appendChild(avatarImage)
+ avatarIndex++
+ if (avatarIndex == userAvatarUrls.length){
+ alert("头像数量达到上限")
+ }
+ }
+ addAvatarBtn.addEventListener("click", addUserAvatar)
+ </script>
+```
+
+#### 效果展示
+
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251204.md" "b/\351\231\210\346\200\235\345\223\262/20251204.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f375b861c47589fe77497281c433371fe88d16f0
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251204.md"
@@ -0,0 +1,316 @@
+## 笔记
+
+### 节点属性
+
+#### 通用节点属性（所有节点共享）
+
+- `nodeType`：节点类型标识（数字），如元素节点 = 1、文本节点 = 3、属性节点 = 2、文档节点 = 9、注释节点 = 8
+- `nodeName`：节点名称，元素节点为标签名（大写，如 `DIV`），文本节点为 `#text`，注释节点为 `#comment`
+- `nodeValue`：节点值，文本节点为文本内容，属性节点为属性值，元素节点 / 文档节点为 `null`
+- `parentNode`：当前节点的父节点（唯一，文本节点 / 属性节点的父节点为对应元素节点）
+- `childNodes`：当前节点的所有子节点集合（NodeList，包含文本、注释等所有类型节点）
+- `firstChild`/`lastChild`：当前节点的首个 / 最后一个子节点
+- `previousSibling`/`nextSibling`：当前节点的前一个 / 后一个兄弟节点（包含所有类型节点）
+
+#### 元素节点专属属性（Element 特有）
+
+- 结构相关：`children`（仅包含子元素节点的集合，HTMLCollection）、`firstElementChild`/`lastElementChild`（首个 / 最后一个子元素节点）、`previousElementSibling`/`nextElementSibling`（前一个 / 后一个兄弟元素节点）
+- 内置属性：`id` `class` `name` `title` `href` `src` `value`（表单元素）、`disabled` `checked`（表单状态）
+- 样式相关：`style`（行内样式对象，如 `element.style.color`）、`className`（类名字符串，可直接赋值修改）
+- 自定义属性：`dataset`（获取 `data-*` 前缀的自定义属性，如 `data-id` 可通过 `element.dataset.id` 访问）
+
+### 节点
+
+#### 创建节点
+
+- `document.createElement(tagName)`：创建元素节点（如 `document.createElement('div')`）
+- `document.createTextNode(text)`：创建文本节点（含指定文本，如 `document.createTextNode('Hello')`）
+- `document.createComment(comment)`：创建注释节点（如 `document.createComment('这是注释')`）
+- `document.createDocumentFragment()`：创建文档片段节点（虚拟容器，用于批量操作节点，提升性能，不直接插入 DOM 树）
+
+#### 插入节点
+
+- `parent.appendChild(child)`：将子节点添加到父节点的末尾，若子节点已存在于 DOM 树中，会从原位置移动到新位置
+- `parent.insertBefore(newChild, referenceChild)`：在父节点的指定参考子节点（`referenceChild`）之前插入新节点，参考节点不存在则插入到末尾
+- `element.insertAdjacentElement(position, newElement)`：在元素的指定位置插入新元素，`position` 可选值：`beforebegin`（元素前）、`afterbegin`（元素内开头）、`beforeend`（元素内末尾）、`afterend`（元素后）
+- `element.insertAdjacentText(position, text)`：在元素指定位置插入文本节点（用法同 `insertAdjacentElement`）
+
+#### 复制节点
+
+- `node.cloneNode(deep)`：复制节点，`deep` 为布尔值
+ - 浅复制（`deep: false`）：仅复制当前节点，不复制子节点（元素节点仅复制标签结构，不复制子元素 / 文本）
+ - 深复制（`deep: true`）：复制当前节点及所有子节点（包含文本、子元素等完整结构）
+- 注意：复制的节点默认不在 DOM 树中，需通过插入方法添加到文档中；ID 属性会被复制，需手动修改避免重复
+
+#### 删除与替换节点
+
+- `parent.removeChild(child)`：通过父节点删除子节点，返回被删除的节点（需确保子节点是父节点的直接子元素）
+- `element.remove()`：直接删除当前元素（无需通过父节点，IE 不兼容）
+- `parent.replaceChild(newChild, oldChild)`：用新节点替换父节点中的旧节点，返回被替换的旧节点（新节点若已在 DOM 树中，会先从原位置移除）
+
+### innerHTML/Text, outerHTML/Text
+
+#### innerHTML
+
+- 定义：获取或设置元素内的 HTML 内容（包含标签、文本、注释等）
+- 特点：会解析 HTML 标签（如设置 `<p>Hello</p>` 会生成对应元素），可批量修改元素内容，性能优于多次创建 / 插入节点
+- 注意：存在 XSS 风险（若插入不可信 HTML）；设置时会覆盖元素原有所有子节点
+
+#### innerText
+
+- 定义：获取或设置元素内的文本内容（仅保留文本，忽略 HTML 标签和注释）
+- 特点：自动过滤 HTML 标签（如 `<p>Hello</p>` 会显示为 `Hello`），会受 CSS 样式影响（如 `display: none` 的元素文本不会被获取）
+- 兼容：Firefox 早期版本使用 `textContent`，现代浏览器已统一支持 `innerText`
+
+#### outerHTML
+
+- 定义：获取或设置包含当前元素本身的 HTML 内容（元素 + 内部 HTML）
+- 特点：获取时返回当前元素的标签 + 内部内容（如 `<div><p>Hello</p></div>`）；设置时会替换当前元素本身（包括标签）
+- 注意：设置后原元素会被新 HTML 结构替换，原元素的事件绑定会失效
+
+#### outerText
+
+- 定义：获取或设置包含当前元素本身的文本内容（替换元素为文本节点）
+- 特点：获取时与 `innerText` 效果一致（仅返回元素内文本）；设置时会删除当前元素，替换为指定文本节点（原元素及子节点全部被替换）
+- 使用场景：极少使用，通常用 `innerText` 或 `textContent` 操作文本
+
+#### 核心区别
+
+- `innerHTML` vs `innerText`：是否解析 HTML 标签（前者解析，后者过滤）
+- `outerHTML` vs `innerHTML`：是否包含当前元素本身（前者包含元素标签，后者仅包含内部内容）
+- `textContent` vs `innerText`：`textContent` 是 W3C 标准，不受 CSS 影响，性能更优；`innerText` 受 CSS 样式影响，兼容性更广泛
+
+## 作业
+
+### 第一部分
+
+#### 关键代码
+
+```html
+<div class="item01">
+ <input type="text" name="" id="item01-txt" placeholder="请输入文字">
+ <select name="" id="item01-select">
+ <option value="red">红</option>
+ <option value="green">绿</option>
+ <option value="yellow">黄</option>
+ <option value="blue">蓝</option>
+ </select>
+ <input type="button" name="" id="item01-add-btn" value="添加">
+ </div>
+ <div class="item02">
+ <div class="lyric">
+ <p>向前方！我们的血气方刚！崭锋芒，震虎狼！</p>
+ <p>向前方！我们的步伐铿锵！风雨里，我挺起胸膛！</p>
+ <p>向前方！我们的热血滚烫！将使命责任扛在肩上！</p>
+ <p>向前方！铁流滚滚向前方！乘风破浪，威震八方，势不可挡！</p>
+ </div>
+ <input type="text" name="" id="item02-txt" placeholder="请输入歌名">
+ <input type="button" name="" id="item02-sure-btn" value="确认">
+ </div>
+ <div class="item03">
+ <ul id="movie-list">
+ <li class="movie" data-number="1">1</li>
+ <li class="movie" data-number="2">2</li>
+ <li class="movie" data-number="3">3</li>
+ <li class="movie" data-number="4">4</li>
+ </ul>
+ <input type="text" name="" id="item03-number" placeholder="请输入编号">
+ <input type="button" name="" id="item03-delete-btn" value="确认">
+ </div>
+ <div class="item04">
+ <ul id="vegetable-list">
+ <li class="vegetable">黄瓜</li>
+ <li class="vegetable">茄子</li>
+ <li class="fruit">芒果</li>
+ </ul>
+ <ul id="fruit-list">
+ <li class="fruit">西瓜</li>
+ <li class="fruit">蜜橘</li>
+ <li class="vegetable">萝卜</li>
+ </ul>
+ <input type="button" name="" id="item04-move-btn" value="移动">
+ </div>
+ <div class="item05">
+ <h3>在《倚天屠龙记》中，张三丰是_____派的掌门</h3>
+ <input type="radio" name="choose" id="a">A.少林
+ <input type="radio" name="choose" id="b">B.武当
+ <input type="radio" name="choose" id="c">A.昆仑
+ <input type="radio" name="choose" id="d">A.峨眉<br>
+ <input type="button" name="" id="item04-submit-btn" value="提交">
+ </div>
+ <script>
+ // 训练01
+ let item01Div = document.querySelector('.item01')
+ let item01Txt = document.querySelector('#item01-txt')
+ let item01Select = document.querySelector('#item01-select')
+ let item01AddBtn = document.querySelector('#item01-add-btn')
+ function myItem01Add() {
+ let item01TxtSpan = document.createElement('span')
+ let setTxt = document.createTextNode(item01Txt.value)
+ let index = item01Select.selectedIndex;
+ let fgc = item01Select.options[index].value
+ item01TxtSpan.style.color = fgc
+ item01TxtSpan.appendChild(setTxt);
+ item01Div.appendChild(item01TxtSpan)
+ }
+ item01AddBtn.addEventListener("click", myItem01Add)
+
+ // 训练02
+ let item02Div = document.querySelector('.item02')
+ let item02Txt = document.querySelector('#item02-txt')
+ let item02SureBtn = document.querySelector('#item02-sure-btn')
+ let item02TxtP = document.createElement('p')
+ let item02Judge01 = true
+ function myItem02Add() {
+ let getTxt = document.createTextNode(item02Txt.value)
+ if ("钢铁洪流进行曲" == item02Txt.value && item02Judge01) {
+ let setTxt = document.createTextNode(getTxt.textContent)
+ item02TxtP.appendChild(setTxt)
+ item02Div.insertBefore(item02TxtP, document.querySelector('.lyric'))
+ item02Judge01 = false
+ } else if ("钢铁洪流进行曲" != item02Txt.value) {
+ if (!item02Judge01) {
+ item02Div.removeChild(item02TxtP)
+ }
+ item02Judge01 = true
+ }
+ }
+ item02SureBtn.addEventListener("click", myItem02Add)
+
+ // 训练03
+ let item03Div = document.querySelector('.item03')
+ let item03MovieList = document.querySelector('#movie-list')
+ let item03Movie = document.getElementsByClassName('movie')
+ let item03Number = document.querySelector('#item03-number')
+ let item03DeleteBtn = document.querySelector('#item03-delete-btn')
+ let item03TxtP = document.createElement('p')
+ function myItem03Delete() {
+ let item03Judge01 = true
+ let number = item03Number.value;
+ Array.from(item03Movie).forEach(item => {
+ if (item.dataset.number == number) {
+ item03Judge01 = false
+ item03MovieList.removeChild(item)
+ item03TxtP.textContent = ''
+ }
+ })
+ if (item03Judge01 && item03TxtP.textContent == '') {
+ item03TxtP.appendChild(document.createTextNode('该编号不存在，请重新输入'))
+ item03Div.appendChild(item03TxtP)
+ item03Number.value = ''
+ }
+ }
+ item03DeleteBtn.addEventListener("click", myItem03Delete)
+
+ // 训练04
+ let item04Vegetable = document.querySelector('#vegetable-list')
+ let item04Fruit = document.querySelector('#fruit-list')
+ let item04Radish = document.querySelector('#fruit-list>.vegetable')
+ let item04Mango = document.querySelector('#vegetable-list>.fruit')
+ let item04MoveBtn = document.querySelector('#item04-move-btn')
+ function myItem04Change() {
+ let temporary01 = item04Mango;
+ let temporary02 = item04Radish;
+ item04Vegetable.replaceChild(temporary02, item04Mango);
+
+ item04Fruit.appendChild(temporary01);
+ }
+ item04MoveBtn.addEventListener("click", myItem04Change)
+
+ // 训练05
+ let item05Div = document.querySelector('.item05')
+ let item05Choose = Array.from(document.querySelectorAll('[name="choose"]'))
+ let item05SubmitBtn = document.querySelector('#item04-submit-btn')
+ function myItem05Submit() {
+ for (let i = 0; i < item05Choose.length; i++) {
+ if (item05Choose[i].checked && item05Choose[i].id == 'b') {
+ console.log(true);
+ break
+ }
+ }
+
+ }
+ item05SubmitBtn.addEventListener("click", myItem05Submit)
+ </script>
+```
+
+#### 效果展示
+
+### 第一部分
+
+#### 关键代码
+```html
+<div class="item01">
+ <p>一生只爱一人</p>
+ <a href="">将粗体改为斜体</a>
+ </div>
+ <!-- <div class="item02"> -->
+ <!-- <select name="" id="year"></select> -->
+ <!-- <select name="" id="month"></select> -->
+ <!-- <select name="" id="day"></select> -->
+ <!-- </div> -->
+ <div class="item03">
+ 请选择表情：<select name="" id="emoji-list"></select>
+ </div>
+ <script>
+ // 综合练习01
+ let item01TxtP = document.querySelector('.item01>p')
+ let item01TxtA = document.querySelector('.item01>a');
+ let item01Div = document.querySelector('.item01');
+ let item01ChangeP = document.createElement('p')
+ item01ChangeP.appendChild(document.createTextNode('一生只爱一人'))
+ let item01Judge01 = true
+ function myItem01Change(e) {
+ if (!item01Judge01) {
+ return
+ }
+ item01Judge01 = false
+ e.preventDefault()
+ item01Div.replaceChild(item01ChangeP, item01TxtP)
+ item01ChangeP.style.fontWeight = 'normal';
+ item01ChangeP.style.fontStyle = 'italic';
+ item01TxtA.textContent = "将斜体改为粗体"
+ }
+ item01TxtA.addEventListener("click", myItem01Change)
+
+ // 综合练习02
+ let item02Year = document.querySelector('#year')
+ let item02Month = document.querySelector('#month')
+ let item02Day = document.querySelector('#day')
+
+ //综合练习03
+ const emojiUrls = [
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f600.png", // 微笑
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f601.png", // 大笑
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f602.png", // 笑哭
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f603.png", // 憨笑
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f604.png", // 得意
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f605.png", // 害羞
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f606.png", // 眨眼
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f607.png", // 得意
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f608.png", // 坏笑
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f609.png" // 挑眉
+ ];
+ const emojiNames = ["微笑", "大笑", "笑哭", "憨笑", "得意", "害羞", "眨眼", "得意", "坏笑", "挑眉"];
+ let item03EmojiSelect = document.querySelector('#emoji-list')
+ let item03EmojiItemName = document.createElement("option")
+ let item03Div = document.querySelector('.item03');
+ let item03EmojiItemImage = document.createElement("img")
+ emojiNames.forEach(name => {
+ let item03EmojiItemName = document.createElement("option")
+ let item03EmojiName = document.createTextNode(`${name}`)
+ item03EmojiItemName.appendChild(item03EmojiName)
+ item03EmojiSelect.appendChild(item03EmojiItemName)
+ })
+ function myItem03Select() {
+ let item03index = item03EmojiSelect.selectedIndex;
+
+ item03EmojiItemImage.src = emojiUrls[item03index]
+ item03Div.appendChild(item03EmojiItemImage)
+ }
+ item03EmojiSelect.addEventListener("change", myItem03Select)
+ </script>
+```
+#### 效果展示
+
+
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251205.md" "b/\351\231\210\346\200\235\345\223\262/20251205.md"
new file mode 100644
index 0000000000000000000000000000000000000000..73d0ded3037aa32e88094ae4f00b9d38712714f6
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251205.md"
@@ -0,0 +1,195 @@
+## 笔记
+
+window 是浏览器全局对象，代表浏览器窗口。包含全局属性（如 document、location）、方法（如 alert、setTimeout），以及事件（如 load、resize）。全局变量 / 函数默认挂载其上，是 DOM 和 BOM 的核心访问入口。
+
+## 作业
+
+### 第一部分
+
+#### 关键代码
+
+```html
+<audio src="https://samplelib.com/sounds/mp3/sample-3s.mp3" controls id="item01"></audio>
+ <div class="item02">
+ <a href="">退出</a>
+ </div>
+ <div class="item03">
+ <ul id="movie-list">
+ <li class="movie">1.影片详情</li>
+ <li class="movie">2.影片详情</li>
+ <li class="movie">3.影片详情</li>
+ <li class="movie">4.影片详情</li>
+ </ul>
+ </div>
+ <div class="item04">
+ <input type="button" name="" id="item04-open-btn" value="广告">
+ </div>
+ <button id="item05-btn">打开窗口</button><br>
+ <input type="text" id="timer-input" readonly>
+ <button id="start-btn">开始计时</button>
+ <button id="pause-btn">暂停</button>
+ <script>
+ // 训练01
+ function myItem01Play() {
+ alert('只有会员才能播放歌曲，请登录')
+ }
+ document.querySelector('#item01').addEventListener("play", myItem01Play)
+
+ // 训练02
+ function myItem02Quit(e) {
+ e.preventDefault()
+ let item02Result = window.confirm('您确定退出登录吗')
+ if (item02Result) {
+ console.log('退出成功');
+ } else {
+ console.log('退出失败');
+
+ }
+ }
+ document.querySelector('.item02>a').addEventListener("click", myItem02Quit)
+
+ // 训练03
+ function myItem03Particulars() {
+ window.open("", 'particulars', "height=500,width=800,top=200,left=200")
+ }
+ document.querySelector('#movie-list').addEventListener("click", myItem03Particulars)
+
+ // 训练04
+ function myItem04Close() {
+ let advertising = window.open("", 'particulars', "height=500,width=800,top=200,left=200")
+ setTimeout(function () {
+ advertising.close()
+ }, 5000)
+ }
+ document.querySelector('#item04-open-btn').addEventListener("click", myItem04Close)
+
+ function myItem05OpenWindow() {
+ let dropWindow = window.open("", "dropWindow", "height=200,width=300,top=0,left=0");
+ const moveStep = 10;
+ const moveTimer = setInterval(() => {
+
+ let currentTop = parseInt(dropWindow.screenTop);
+ if (currentTop >= (window.screen.height - 200)) {
+ clearInterval(moveTimer);
+ return;
+ }
+ dropWindow.moveTo(0, currentTop + moveStep);
+ }, 100);
+ }
+ document.querySelector('#item05-btn').addEventListener("click", myItem05OpenWindow);
+
+ // 训练06
+ let timerInterval = null;
+ let count = 0;
+ function myItem06Start() {
+ if (timerInterval) return;
+ timerInterval = setInterval(() => {
+ count++;
+ document.querySelector('#timer-input').value = count;
+ }, 1000);
+ }
+ function myItem06Pause() {
+ clearInterval(timerInterval);
+ timerInterval = null;
+ }
+ document.querySelector('#start-btn').addEventListener("click", myItem06Start);
+ document.querySelector('#pause-btn').addEventListener("click", myItem06Pause);
+ </script>
+```
+
+#### 效果展示
+
+
+
+### 第二部分
+
+#### 关键代码
+
+```html
+<div class="exercise" id="exercise01">
+ <button id="item01-calc-btn">开始答题</button>
+ <div id="item01-result"></div>
+ </div>
+
+ <div class="exercise" id="exercise02">
+ <button id="item02-ques-btn">开始答题</button>
+ <div id="item02-result"></div>
+ </div>
+
+ <div class="exercise" id="exercise03">
+ <button id="item03-start-btn">开始播放</button>
+ <button id="item03-stop-btn">停止播放</button>
+ <div id="img-container"></div>
+ </div>
+
+ <script>
+ function myItem01CalcSum() {
+ let num1 = Math.floor(Math.random() * 9) + 1;
+ let num2 = Math.floor(Math.random() * 9) + 1;
+ let correctSum = num1 + num2;
+ let userAnswer = window.prompt(`${num1} + ${num2} = ?`, "");
+ if (userAnswer === null) {
+ document.getElementById('item01-result').innerText = "你取消了答题";
+ return;
+ }
+ if (isNaN(userAnswer) || userAnswer === "") {
+ window.alert("请输入有效的数字！");
+ myItem01CalcSum();
+ return;
+ }
+ let userNum = parseInt(userAnswer);
+ let isCorrect = userNum === correctSum;
+ let tipMsg = isCorrect ? "正确！" : `错误！正确答案是${correctSum}`;
+ let isContinue = window.confirm(`${tipMsg} 是否继续答题？`);
+ document.getElementById('item01-result').innerText = tipMsg;
+ if (isContinue) {
+ myItem01CalcSum();
+ }
+ }
+ document.getElementById('item01-calc-btn').addEventListener('click', myItem01CalcSum);
+
+ function myItem02SelectCity() {
+ let question = "2024年奥运会在哪座城市举办？\nA.罗马\nB.北京\nC.伦敦\nD.巴黎";
+ let correctAnswer = "D";
+ let userAnswer = window.prompt(question, "");
+ if (userAnswer === null) {
+ document.getElementById('item02-result').innerText = "你取消了答题";
+ return;
+ }
+ userAnswer = userAnswer.toUpperCase();
+ let resultMsg = userAnswer === correctAnswer ? "答案正确！" : `答案错误！正确答案是${correctAnswer}`;
+ document.getElementById('item02-result').innerText = resultMsg;
+ }
+ document.getElementById('item02-ques-btn').addEventListener('click', myItem02SelectCity);
+
+ const imgList = [
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f600.png",
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f601.png",
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f602.png",
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f603.png",
+ "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/1f604.png"
+ ];
+ let imgTimer = null;
+ let currentImgIndex = 0;
+
+ function myItem03StartShowImg() {
+ if (imgTimer) return;
+ imgTimer = window.setInterval(() => {
+ let imgContainer = document.getElementById('img-container');
+ imgContainer.innerHTML = `<img src="${imgList[currentImgIndex]}" alt="图片${currentImgIndex + 1}">`;
+ currentImgIndex = (currentImgIndex + 1) % imgList.length;
+ }, 1000);
+ }
+
+ function myItem03StopShowImg() {
+ window.clearInterval(imgTimer);
+ imgTimer = null;
+ }
+
+ document.getElementById('item03-start-btn').addEventListener('click', myItem03StartShowImg);
+ document.getElementById('item03-stop-btn').addEventListener('click', myItem03StopShowImg);
+ </script>
+```
+
+#### 效果展示
+
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251208.md" "b/\351\231\210\346\200\235\345\223\262/20251208.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7e683f0de752e88984695bea28703c98ea75a1bf
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251208.md"
@@ -0,0 +1,55 @@
+## 笔记
+
+BOM（浏览器对象模型）用于操作浏览器窗口，无统一标准但核心 API 通用。核心对象包括：window（顶层对象，全局作用域）、document（文档对象，操作 DOM）、location（控制 URL，如 href 跳转、reload 刷新）、history（浏览器历史，back/forward/go 导航）、navigator（获取浏览器信息）、screen（屏幕相关数据）。
+
+关键特性：跨文档通信、窗口大小 / 位置控制、定时器（setTimeout/setInterval）。注意：BOM 依赖浏览器环境，无 DOM 独立存在，需区分 BOM（操作浏览器）与 DOM（操作页面内容）的边界，兼容性需适配不同浏览器差异。
+
+### 常用方法
+BOM（浏览器对象模型）用于操作浏览器窗口，无统一标准但核心 API 通用。以下按核心对象分类，以表格形式整理各对象的常用方法/属性，结构清晰且贴合实际开发场景：
+
+#### location（控制 URL）
+`location` 用于操作当前页面的 URL，实现跳转、刷新等核心导航功能。
+
+| 方法/属性 | 作用说明 | 示例代码 |
+|--------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------|
+| location.href | 获取/设置当前页面 URL（最常用的跳转方式） | `console.log(location.href); location.href = 'https://example.com';` |
+| location.reload() | 重新加载页面，参数 `true` 强制从服务器加载（跳过缓存） | `location.reload(); // 普通刷新` <br> `location.reload(true); // 强制刷新` |
+| location.host | 获取 URL 中的主机名 + 端口号（如 `example.com:8080`） | `console.log(location.host);` |
+| location.pathname | 获取 URL 中的路径部分（如 `/index.html`） | `console.log(location.pathname);` |
+| location.search | 获取 URL 中的查询参数（如 `?id=1&name=test`） | `console.log(location.search);` |
+| location.hash | 获取/设置 URL 中的哈希值（如 `#top`） | `location.hash = '#footer'; // 跳转到页面锚点` |
+
+#### history（浏览器历史）
+`history` 用于操作浏览器的历史记录，实现前进、后退、跳转等导航操作。
+
+| 方法/属性 | 作用说明 | 示例代码 |
+|--------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------|
+| history.back() | 回退到历史记录上一页（等同于浏览器后退按钮） | `history.back();` |
+| history.forward() | 前进到历史记录下一页（等同于浏览器前进按钮） | `history.forward();` |
+| history.go(n) | 跳转到历史记录指定页：n=0 刷新，正数前进，负数后退 | `history.go(-2); // 后退 2 页` <br> `history.go(1); // 前进 1 页` |
+| history.length | 获取历史记录的总条数（只读） | `console.log(history.length); // 查看当前会话的历史记录数` |
+
+#### navigator（获取浏览器信息）
+`navigator` 用于获取浏览器及客户端设备的相关信息，常用于浏览器兼容判断。
+
+| 方法/属性 | 作用说明 | 示例代码 |
+|--------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------|
+| navigator.userAgent | 获取浏览器用户代理字符串（判断浏览器类型/版本、设备等） | `console.log(navigator.userAgent); // 如 Chrome/120.0.0.0 Safari/537.36` |
+| navigator.language | 获取浏览器的首选语言（如 `zh-CN`、`en-US`） | `console.log(navigator.language);` |
+| navigator.platform | 获取浏览器运行的操作系统平台（如 `Win32`、`MacIntel`） | `console.log(navigator.platform);` |
+| navigator.onLine | 判断浏览器是否联网（返回布尔值，仅供参考） | `if(navigator.onLine) { console.log('已联网'); }` |
+
+#### screen（屏幕相关数据）
+`screen` 用于获取客户端屏幕的分辨率、可用区域等硬件相关信息。
+
+| 方法/属性 | 作用说明 | 示例代码 |
+|--------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------|
+| screen.width/height | 获取屏幕物理分辨率的宽/高（只读，不含任务栏等） | `const screenW = screen.width; const screenH = screen.height;` |
+| screen.availWidth/availHeight | 获取屏幕可用宽/高（排除任务栏、系统边框等，只读）| `const availW = screen.availWidth; const availH = screen.availHeight;` |
+| screen.colorDepth | 获取屏幕的颜色深度（通常为 24 或 32） | `console.log(screen.colorDepth); // 输出 24` |
+
+### 核心注意事项
+1. `window` 作为顶层对象，其属性/方法可省略 `window.` 直接调用（如 `alert()` 等同于 `window.alert()`）；
+2. 窗口操作（`open()`/`close()`/`moveTo()`）受浏览器安全策略限制，无用户交互触发时易被拦截；
+3. `location.href` 跳转与 `history.go()` 导航的区别：前者会新增历史记录，后者仅操作已有记录；
+4. `navigator.userAgent` 可被篡改，仅作为浏览器判断的参考，不可作为唯一依据。
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251210.md" "b/\351\231\210\346\200\235\345\223\262/20251210.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4af2db8e7ad3ea30209b990bd03ebc95b763c342
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251210.md"
@@ -0,0 +1,156 @@
+## 笔记
+
+### Style 对象常用属性
+
+| 类别 | 属性名 | 说明 | 示例 |
+| -------- | ----------------------- | ---------------------------------------------------------- | ------------------------------------------------------------ |
+| 尺寸布局 | `width` | 设置 / 获取元素宽度（需带单位，如 px/em） | `elem.style.width = '200px'` |
+| 尺寸布局 | `height` | 设置 / 获取元素高度（需带单位） | `const h = elem.style.height` |
+| 尺寸布局 | `margin` | 外边距简写属性（可拆分 marginTop/marginLeft 等） | `elem.style.margin = '10px 20px'` |
+| 尺寸布局 | `padding` | 内边距简写属性（可拆分 paddingTop/paddingRight 等） | `elem.style.padding = '8px'` |
+| 尺寸布局 | `overflow` | 内容溢出处理方式（visible/hidden/scroll/auto） | `elem.style.overflow = 'hidden'` |
+| 视觉样式 | `color` | 文本颜色（支持十六进制、RGB、颜色名） | `elem.style.color = '#ff0000'` |
+| 视觉样式 | `backgroundColor` | 元素背景颜色 | `elem.style.backgroundColor = 'rgb(255,255,0)'` |
+| 视觉样式 | `opacity` | 元素透明度（0-1 数值，1 为不透明） | `elem.style.opacity = '0.8'` |
+| 视觉样式 | `border` | 边框简写属性（可拆分 borderWidth/borderColor/borderStyle） | `elem.style.border = '1px solid #ccc'` |
+| 视觉样式 | `cursor` | 鼠标指针样式（pointer/default/help 等） | `elem.style.cursor = 'pointer'` |
+| 文本样式 | `fontSize` | 字体大小（需带单位） | `elem.style.fontSize = '16px'` |
+| 文本样式 | `textAlign` | 文本对齐方式（left/center/right/justify） | `elem.style.textAlign = 'center'` |
+| 文本样式 | `lineHeight` | 行高（可带单位或纯数值） | `elem.style.lineHeight = '1.5'` |
+| 定位相关 | `position` | 定位方式（static/relative/absolute/fixed/sticky） | `elem.style.position = 'absolute'` |
+| 定位相关 | `top/left/right/bottom` | 定位元素偏移量（需带单位，非 static 定位生效） | `elem.style.left = '50%'` |
+| 定位相关 | `zIndex` | 元素堆叠顺序（整数，定位元素生效） | `elem.style.zIndex = '999'` |
+| 显示控制 | `display` | 元素显示方式（none/block/inline/flex 等） | `elem.style.display = 'flex'` |
+| 批量操作 | `cssText` | 批量设置 / 获取所有内联样式（高效替代逐个设置） | `elem.style.cssText = 'width:100px; height:50px;'` |
+| 遍历相关 | `length` | 返回内联样式的属性数量（用于遍历所有样式） | `for(let i=0; i<elem.style.length; i++) { console.log(elem.style[i]) }` |
+
+### Style 对象常用方法
+
+| 方法名 | 说明 | 示例 |
+| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------ |
+| `setProperty()` | 按属性名设置样式值，支持自定义属性，可指定 `important` 优先级 | `elem.style.setProperty('color', 'blue', 'important')` |
+| `getPropertyValue()` | 按属性名获取内联样式值（返回字符串） | `const color = elem.style.getPropertyValue('color')` |
+| `removeProperty()` | 移除指定内联样式属性，恢复元素默认样式 | `elem.style.removeProperty('display')` |
+| `getPropertyPriority()` | 获取样式属性的优先级（返回 'important' 或空字符串） | `const prio = elem.style.getPropertyPriority('color')` |
+
+## 补充说明
+
+1. `style` 对象仅操作**内联样式**（元素 `style` 属性），无法获取 CSS 类 / 样式表中的样式；
+2. 样式属性名采用驼峰命名（如 `backgroundColor`），对应 CSS 中的短横线命名（`background-color`）；
+3. 批量设置样式时，`cssText` 比逐个设置属性更高效，但会覆盖原有内联样式。
+
+## 作业
+
+### 第一部分
+
+#### 关键代码
+```html
+ .laohu {
+ width: 200px;
+ height: 50px;
+ background-color: orange;
+ margin-bottom: 20px;
+ border-radius: 0 10px 10px 0;
+ line-height: 50px;
+ text-align: center;
+ font-size: 24px;
+ color: #FFF;
+ transition: 0.3s linear;
+ }
+
+ .xiaohu {
+ width: 300px;
+ height: 80px;
+ line-height: 80px;
+ font-size: 40px;
+ }
+ <div class="item01">
+ <div class="txt">哈基米哦南北绿豆</div><input type="button" name="" id="amplification" value="放大">
+ </div>
+ <div class="item02">
+ </div>
+ <div class="item03">
+ <div class="laohu">老胡来了</div>
+ <div class="laohu">老胡来也</div>
+ <div class="laohu">老胡去了</div>
+ <div class="laohu">老胡去也</div>
+ <div class="laohu">老胡来去</div>
+ <div class="laohu">老胡去来</div>
+ </div>
+ <script>
+ // 训练01
+ let item01Txt = document.querySelector('.txt')
+ let item01Btn = document.querySelector('#amplification')
+ let txtSize = Number(getComputedStyle(item01Txt).fontSize.replace(/px$/, ''));
+ function myItme01Click() {
+ console.log(txtSize);
+ txtSize += 2
+ item01Txt.style.fontSize = `${txtSize}px`
+ item01Txt.style.color = getRandomHexColor()
+ }
+ function getRandomHexColor() {
+ const randomColor = Math.floor(Math.random() * 0xffffff).toString(16);
+ return '#' + randomColor.padStart(6, '0');
+ }
+ item01Btn.addEventListener("click", myItme01Click);
+
+ // 训练02
+ let item02Div = document.querySelector('.item02')
+ function myItme02MoveCome() {
+ item02Div.style.border = "5px double blue"
+ }
+ function myItme02MoveOut() {
+ item02Div.style.removeProperty('border');
+ }
+ item02Div.addEventListener("mousemove", myItme02MoveCome)
+ item02Div.addEventListener("mouseout", myItme02MoveOut)
+
+ // 综合训练01
+ let laohu = document.getElementsByClassName('laohu')
+ function myItme03Move(e) {
+ e.target.classList.add('xiaohu')
+ }
+ function myItme03Out(e) {
+ e.target.classList.remove('xiaohu')
+ }
+ Array.from(laohu).forEach(xiaohu => {
+ xiaohu.addEventListener("mousemove", myItme03Move)
+ xiaohu.addEventListener("mouseout", myItme03Out)
+ })
+ </script>
+```
+
+#### 效果展示
+
+### 第二部分
+
+#### 关键代码
+
+```html
+ <div class="image01"></div>
+ <div class="image02"></div>
+ <div class="image03"></div>
+ <script>
+ let draggingElement = null
+ let image = document.getElementsByTagName("div");
+ function imageActivate(e) {
+ draggingElement = e.target
+ }
+ function imageMove(e) {
+ if (!draggingElement) return
+ draggingElement.style.top = `${e.clientY}px`
+ draggingElement.style.left = `${e.clientX}px`
+ }
+ document.addEventListener("mousemove", imageMove)
+ function imageUnactivate() {
+ draggingElement = null
+ }
+ Array.from(image).forEach(picture => {
+ picture.addEventListener("mousedown", imageActivate)
+ picture.addEventListener("mouseup", imageUnactivate)
+ });
+ </script>
+```
+
+#### 效果展示
+
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251211.md" "b/\351\231\210\346\200\235\345\223\262/20251211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d43a3d854f73bd3468242ed99075d4866ae3c9a5
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251211.md"
@@ -0,0 +1,246 @@
+## 笔记
+
+### Form 对象属性
+
+| 属性名 | 类型 | 描述 | 示例 |
+| --------------- | -------------------------- | ------------------------------------------------------------ | ----------------------------------------------- |
+| `action` | String | 获取 / 设置表单提交的目标 URL | `form.action = "/api/submit";` |
+| `method` | String | 表单提交的 HTTP 方法（GET/POST/PUT/DELETE 等） | `form.method = "POST";` |
+| `enctype` | String | 表单数据编码类型- 默认：`application/x-www-form-urlencoded`- 文件上传：`multipart/form-data` | `form.enctype = "multipart/form-data";` |
+| `target` | String | 提交后响应的展示目标- `_self`（当前窗口）、`_blank`（新窗口）- `_parent`/`_top`（父 / 顶级窗口） | `form.target = "_blank";` |
+| `elements` | HTMLFormControlsCollection | 表单内所有控件的集合（操作控件的核心入口） | `const usernameInput = form.elements.username;` |
+| `length` | Number | 表单内控件的数量（等同于 `elements.length`） | `console.log(form.length); // 输出控件总数` |
+| `name` | String | 表单名称（对应 `<form name="">` 属性） | `form.name = "userForm";` |
+| `autocomplete` | String | 表单整体自动完成功能（on/off） | `form.autocomplete = "off";` |
+| `noValidate` | Boolean | 是否禁用表单默认验证（对应 `novalidate` 属性） | `form.noValidate = true;` |
+| `acceptCharset` | String | 表单提交的字符编码（如 UTF-8/GBK） | `form.acceptCharset = "UTF-8";` |
+
+### Form 对象方法
+
+| 方法名 | 参数 | 返回值 | 描述 | 示例 |
+| ------------------ | ------------------------ | --------- | ------------------------------------------------------------ | ------------------------------------------ |
+| `submit()` | 无 | undefined | 手动提交表单（不会触发 `onsubmit` 事件） | `form.submit();` |
+| `reset()` | 无 | undefined | 重置表单到初始状态（触发 `onreset` 事件） | `form.reset();` |
+| `checkValidity()` | 无 | Boolean | 检查所有控件是否通过验证（合法返回 true，否则 false） | `if (form.checkValidity()) form.submit();` |
+| `reportValidity()` | 无 | Boolean | 检查验证并显示浏览器默认的错误提示（合法返回 true） | `form.reportValidity();` |
+| `requestSubmit()` | [submitter: HTMLElement] | undefined | 模拟点击提交按钮提交（触发 `onsubmit` 事件），可指定提交按钮 | `form.requestSubmit(btnSubmit);` |
+
+### 表单控件通用属性
+
+| 属性名 | 类型 | 描述 | 适用控件 | 示例 |
+| -------------- | ------- | ----------------------------------------- | --------------------------------------- | -------------------------------------------------------- |
+| `value` | String | 获取 / 设置控件的输入值（核心） | 所有输入类控件（input/select/textarea） | `input.value = "默认内容"; console.log(textarea.value);` |
+| `name` | String | 控件名称（表单提交时的键名） | 所有控件 | `input.name = "username";` |
+| `id` | String | 控件唯一标识 | 所有控件 | `input.id = "user-name";` |
+| `type` | String | 控件类型（text/radio/checkbox/button 等） | input/button | `console.log(input.type); // "text"` |
+| `disabled` | Boolean | 是否禁用控件（禁用后不可交互、不提交值） | 所有控件 | `input.disabled = true;` |
+| `readOnly` | Boolean | 是否只读（仅输入类控件，可提交值） | input/textarea | `textarea.readOnly = true;` |
+| `required` | Boolean | 是否为必填项（表单验证用） | 输入类控件 | `input.required = true;` |
+| `checked` | Boolean | 是否选中（单选 / 复选框专属） | radio/checkbox | `checkbox.checked = true;` |
+| `maxLength` | Number | 最大输入长度限制 | input/textarea | `input.maxLength = 20;` |
+| `pattern` | String | 输入内容的正则验证规则 | input | `input.pattern = "^[a-z0-9]+$";` |
+| `placeholder` | String | 输入框占位提示文本 | input/textarea | `input.placeholder = "请输入用户名";` |
+| `defaultValue` | String | 控件的初始值（页面加载时的 value） | input/textarea | `console.log(input.defaultValue);` |
+
+### 表单控件方法
+
+| 方法名 | 参数 | 返回值 | 描述 | 适用控件 | 示例 |
+| --------------------- | --------------- | --------- | ---------------------------------------- | ---------------- | -------------------------------------------------- |
+| `focus()` | 无 | undefined | 让控件获取焦点 | 所有可交互控件 | `input.focus();` |
+| `blur()` | 无 | undefined | 让控件失去焦点 | 所有可交互控件 | `input.blur();` |
+| `select()` | 无 | undefined | 选中输入框内的所有文本 | input/textarea | `input.select();` |
+| `checkValidity()` | 无 | Boolean | 检查当前控件是否通过验证 | 所有带验证的控件 | `if (!input.checkValidity()) alert("输入不合法");` |
+| `reportValidity()` | 无 | Boolean | 检查验证并显示浏览器默认错误提示 | 所有带验证的控件 | `input.reportValidity();` |
+| `setCustomValidity()` | message: String | undefined | 设置自定义验证错误提示（清空传空字符串） | 所有带验证的控件 | `input.setCustomValidity("用户名不能少于6位");` |
+| `click()` | 无 | undefined | 模拟点击控件（如按钮、单选框） | | |
+
+## 作业
+
+### 第一部分
+
+#### 关键代码
+
+```html
+ <div class="item01">
+ <label for="movieCDKEY">兑换码：</label>
+ <input type="text" name="movieCDKEY" id="movieCDKEY" placeholder="请输入兑换码">
+ <input type="button" name="" id="ticket-btn" value="取票">
+ </div>
+ <div class="item02">
+ <textarea name="" id="agreement" cols="30"
+ rows="10">本协议由用户与本平台共同缔结，用户注册、登录、使用本平台服务，即视为同意并遵守本协议全部条款。用户享有平台提供的各项服务权益，需保证注册信息真实合法，不得发布违法侵权内容、不得实施危害平台系统安全的行为；平台为用户提供稳定安全的服务，有权对违规用户采取警告、限制功能、账号封禁等措施，同时将依法保护用户个人信息，非法定或约定情形不向第三方泄露。平台对因不可抗力、用户自身原因导致的服务异常不承担责任，双方争议协商不成，可向平台所在地有管辖权的人民法院提起诉讼。平台可根据业务调整更新协议，更新后将通过平台公告通知，用户继续使用服务即视为接受新协议。</textarea>
+ <div class="btn">
+ <input type="button" name="" id="rows-add-btn" value="+">
+ <input type="button" name="" id="rows-delete-btn" value="-">
+ </div>
+ </div>
+ <div class="item03">
+ <input type="checkbox" name="hobby" id="hobby1" value="reading">阅读
+ <input type="checkbox" name="hobby" id="hobby2" value="sports">运动
+ <input type="checkbox" name="hobby" id="hobby3" value="cooking">烹饪
+ <input type="checkbox" name="hobby" id="hobby4" value="painting">绘画
+ <input type="checkbox" name="hobby" id="hobby5" value="travel">旅行
+ <input type="checkbox" name="hobby" id="hobby6" value="music">听音乐
+ <input type="checkbox" name="hobby" id="hobby7" value="photography">摄影<br>
+ <input type="checkbox" name="hobby" id="hobby8" value="writing">写作
+ <input type="checkbox" name="hobby" id="hobby9" value="dancing">跳舞
+ <input type="checkbox" name="hobby" id="hobby10" value="gaming">游戏
+ <input type="checkbox" name="hobby" id="hobby11" value="planting">养花
+ <input type="checkbox" name="hobby" id="hobby12" value="handwork">手工
+ <input type="checkbox" name="hobby" id="hobby13" value="petraising">养宠物
+ <input type="checkbox" name="hobby" id="hobby14" value="slackoff">摸鱼
+ </div>
+ <script>
+ // 训练01
+ let Item01Btn = document.getElementById('ticket-btn')
+ let myItem01GertTicket = () => {
+ let myCDKEY = Number(document.querySelector('[name = movieCDKEY]').value);
+ if (myCDKEY == 1433223) {
+ console.log('取票成功，兑换码已核销');
+ }
+ else {
+ console.log('兑换码不存在，请重新输入');
+ document.querySelector('[name = movieCDKEY]').value = ""
+
+ }
+ }
+ Item01Btn.addEventListener("click", myItem01GertTicket)
+
+ // 训练02
+ let Item02Txt = document.getElementById('agreement')
+ let Item02Add = document.getElementById('rows-add-btn')
+ let Item02Delete = document.getElementById('rows-delete-btn')
+ let row = Item02Txt.rows;
+ Item02Add.addEventListener("click", () => {
+ row += 1
+ Item02Txt.rows = row
+ })
+ Item02Delete.addEventListener("click", () => {
+ row -= 1
+ Item02Txt.rows = row
+ })
+
+ // 训练03
+ let Item03OptionsArr = Array.from(document.querySelectorAll("[name=hobby]"))
+ let hobbyArr = []
+ Item03OptionsArr.forEach(hobby => {
+ hobby.addEventListener("change", () => {
+ if (hobby.checked) {
+ if (hobbyArr.length < 6) {
+ hobbyArr.push(hobby)
+ console.log(hobbyArr);
+
+ } else {
+ hobby.checked = false
+ alert("超出")
+ }
+ } else {
+ hobbyArr = hobbyArr.filter(item => item !== hobby);
+ }
+ })
+ })
+ </script>
+```
+
+#### 效果展示
+
+### 第二部分
+
+#### 关键代码
+
+```html
+ <div class="item01">
+ <p>请选择C</p>
+ <input type="radio" name="option" id="" value="A">A.
+ <input type="radio" name="option" id="" value="B">B.
+ <input type="radio" name="option" id="" value="C">C.
+ <input type="radio" name="option" id="" value="D">D.
+ <input type="button" id="item01-submit-btn" value="提交答案">
+ </div>
+ <div class="item02">
+ <input type="checkbox" name="hobby" id="hobby01">摸鱼
+ <input type="checkbox" name="hobby" id="hobby02">追剧
+ <input type="checkbox" name="hobby" id="hobby03">听歌
+ <input type="checkbox" name="hobby" id="hobby04">逛街
+ <input type="checkbox" name="hobby" id="hobby05">发呆
+ <input type="checkbox" name="hobby" id="hobby06">撸猫
+ <input type="checkbox" name="hobby" id="hobby07">喝茶
+ <input type="checkbox" name="hobby" id="hobby08">爬山
+ <input type="checkbox" name="hobby" id="hobby09">下棋
+ <input type="checkbox" name="hobby" id="hobby10">练字<br>
+ <input type="button" id="item02-all-btn" value="全选">
+ <input type="button" id="item02-notall-btn" value="全不选">
+ <input type="button" id="item02-lnvert-btn" value="反选">
+ </div>
+ <div class="item03">
+ 选择城市：<select name="province" id="province">
+ <option value="Fujian" checked>福建</option>
+ <option value="Hunan">湖南</option>
+ <option value="Hubei">湖北</option>
+ </select>
+ <select name="city" id="city">
+ <option value="Xiamen">厦门</option>
+ <option value="Fuzhou">福州</option>
+ </select>
+ </div>
+ <script>
+ // 综合训练01
+ let item01SubmitBtn = document.querySelector('#item01-submit-btn')
+ let item01OptionsArr = Array.from(document.querySelectorAll('[name=option]'))
+ let item01Judge = false;
+ function myItem01Submit() {
+ item01OptionsArr.forEach(option => {
+ if (option.checked) {
+ if (option.value == "C")item01Judge = true
+ }}
+ })
+ if (!item01Judge) {
+ console.log('false');
+ }
+ else {
+ console.log('true');
+ }
+ }
+ item01SubmitBtn.addEventListener("click", myItem01Submit)
+
+ // 综合训练02
+ let item02AllBtn = document.querySelector('#item02-all-btn')
+ let item02NotallBtn = document.querySelector('#item02-notall-btn')
+ let item02lnvertBtn = document.querySelector('#item02-lnvert-btn')
+ let item02OptionsArr = Array.from(document.querySelectorAll('[name=hobby]'))
+ function myItme02CheckedAll() {
+ item02OptionsArr.forEach(option => option.checked = true)
+ }
+ item02AllBtn.addEventListener("click", myItme02CheckedAll)
+ item02NotallBtn.addEventListener("click", () => {
+ item02OptionsArr.forEach(option => {
+ option.checked = false
+ })
+ })
+ item02lnvertBtn.addEventListener("click", () => {
+ item02OptionsArr.forEach(option => option.checked = !option.checked)
+ })
+
+ // 综合训练03
+ let province = document.querySelector("#province")
+ let city = document.querySelector("#city")
+ province.addEventListener("change", () => {
+ let cityList = ''
+ switch (province.value) {
+ case "Fujian":
+ cityList += `<option value="Xiamen">厦门</option><option value="Fuzhou">福州</option>`;
+ break;
+ case "Hunan":
+ cityList += `<option value="Yueyang">岳阳</option><option value="Changsha">长沙</option>`;
+ break;
+ case "Hubei":
+ cityList += `<option value=Jingzhou">荆州</option><option value="Wuhan">武汉</option>`;
+ break;
+ }
+ city.innerHTML = cityList
+ })
+ </script>
+```
+
+#### 效果展示
+
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251212.md" "b/\351\231\210\346\200\235\345\223\262/20251212.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5d9df0ca46133ac904efb32701a66f81c3563416
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251212.md"
@@ -0,0 +1,69 @@
+## 笔记
+
+### JSON 基础格式
+
+#### 对象
+
+- 结构：花括号 `{}` 包裹，内部是唯一字符串键 + 值的键值对，键值用 `:` 分隔，键值对间用 `,` 分隔
+- 示例：
+
+```json
+{
+ "name": "张三",
+ "age": 25,
+ "isMember": true,
+ "address": {"city": "北京", "area": "朝阳"}
+}
+```
+
+#### 数组
+
+- 结构：方括号 `[]` 包裹，值为任意合法 JSON 类型，值之间用 `,` 分隔
+- 示例：
+
+```json
+[123, "测试", false, null, ["a", "b"], {"key": "value"}]
+```
+
+#### 简单数据类型
+
+| 类型 | 规则 | 示例 |
+| ------ | --------------------- | ------------- |
+| 字符串 | 双引号包裹 | `"JSON 笔记"` |
+| 数字 | 整数 / 浮点数，无引号 | `99`、`1.68` |
+| 布尔值 | 仅 `true`/`false` | `false` |
+| null | 表示空值，无引号 | `null` |
+
+### JSON的转换
+
+#### 序列化（JS 对象 → JSON 字符串）
+
+- 方法：`JSON.stringify(value[, replacer[, space]])`
+- 作用：将 JS 对象 / 数组 / 基本类型转为标准 JSON 字符串
+- 示例：
+
+```javascript
+const jsObj = { name: "李四", age: 30, hobbies: ["跑步", "听歌"] };
+// 基础转换
+const jsonStr = JSON.stringify(jsObj);
+// 格式化输出（2个空格缩进）
+const prettyStr = JSON.stringify(jsObj, null, 2);
+```
+
+- 注意：函数、undefined 会被忽略，循环引用对象会报错
+
+#### 反序列化（JSON 字符串 → JS 对象）
+
+- 方法：`JSON.parse(text[, reviver])`
+- 作用：将合法 JSON 字符串转为 JS 对象 / 数组
+- 示例：
+
+```javascript
+const jsonStr = '{"name":"李四","age":30}';
+// 基础解析
+const jsObj = JSON.parse(jsonStr);
+// 解析时处理数据（如年龄+1）
+const handledObj = JSON.parse(jsonStr, (key, val) => key === "age" ? val + 1 : val);
+```
+
+- 注意：JSON 字符串必须合法（如键为双引号），否则报错
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251215.md" "b/\351\231\210\346\200\235\345\223\262/20251215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..48a9745e3c7e8e526fd5f798e391c3be812c4290
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251215.md"
@@ -0,0 +1,7 @@
+## 笔记
+
+什么都没有......
+
+## 作业
+
+什么都没有......
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251217-jsjQuery\345\272\22301.md" "b/\351\231\210\346\200\235\345\223\262/20251217-jsjQuery\345\272\22301.md"
new file mode 100644
index 0000000000000000000000000000000000000000..21e29732e1e901e3eb2836862900e14e70e46e95
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251217-jsjQuery\345\272\22301.md"
@@ -0,0 +1,565 @@
+## 笔记
+
+jQuery 是基于 JavaScript 的轻量级 DOM 操作类库，核心宗旨是 **Write Less, Do More**，简化了 DOM 操作、事件处理、动画、AJAX 等常见开发场景。以下是 jQuery 高频操作的系统整理：
+
+### 核心基础
+
+#### 引入 jQuery
+
+- CDN 引入（推荐）
+
+ ```javascript
+ <!-- 最新版（生产环境建议指定版本） -->
+ <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+ <!-- 国内CDN -->
+ <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+ ```
+
+- **本地引入**：下载 jQuery 文件后，通过相对路径引入。
+
+#### 入口函数（DOM 加载完成）
+
+替代原生 `window.onload`，执行时机更早（DOM 渲染完成即执行，无需等待资源加载）：
+
+```javascript
+// 写法1（推荐）
+$(function() {
+ // DOM 操作代码
+});
+
+// 写法2（完整写法）
+$(document).ready(function() {
+ // DOM 操作代码
+});
+```
+
+#### jQuery 对象与原生 DOM 转换
+
+- jQuery 对象是类数组对象，不能直接调用原生 DOM 方法，需转换：
+
+ ```javascript
+ // jQuery 对象转原生 DOM
+ const $div = $('#myDiv');
+ const divDom = $div[0]; // 方式1：通过索引
+ const divDom2 = $div.get(0); // 方式2：get() 方法
+
+ // 原生 DOM 转 jQuery 对象
+ const dom = document.getElementById('myDiv');
+ const $dom = $(dom);
+ ```
+
+
+
+### DOM 选择器
+
+jQuery 兼容 CSS 所有选择器，且扩展了专属选择器，核心语法：`$(selector)`。
+
+#### 基础选择器
+
+| 选择器 | 语法 | 说明 |
+| ------------ | -------------- | ----------------------- |
+| ID 选择器 | `$('#id')` | 匹配单个元素（ID 唯一） |
+| 类选择器 | `$('.class')` | 匹配多个类名相同的元素 |
+| 标签选择器 | `$('tag')` | 匹配所有指定标签的元素 |
+| 通配符选择器 | `$('*')` | 匹配所有元素（慎用） |
+| 组合选择器 | `$('div.box')` | 同时满足多个条件 |
+
+#### 层级选择器
+
+| 选择器 | 语法 | 说明 |
+| -------------- | ---------------------- | ---------------------------------- |
+| 后代选择器 | `$('parent child')` | 匹配父元素下所有后代元素 |
+| 子元素选择器 | `$('parent > child')` | 匹配父元素直接子元素 |
+| 相邻兄弟选择器 | `$('prev + next')` | 匹配 prev 后紧邻的 next 元素 |
+| 通用兄弟选择器 | `$('prev ~ siblings')` | 匹配 prev 后所有同级 siblings 元素 |
+
+#### 过滤选择器（重点）
+
+以 `:` 开头，筛选已有结果集：
+
+```javascript
+// 基本过滤
+$('li:first'); // 第一个 li
+$('li:last'); // 最后一个 li
+$('li:eq(2)'); // 索引为 2 的 li（从 0 开始）
+$('li:gt(1)'); // 索引大于 1 的 li
+$('li:lt(3)'); // 索引小于 3 的 li
+$('li:not(.active)'); // 排除含 active 类的 li
+$(':visible'); // 可见元素
+$(':hidden'); // 隐藏元素（display:none/input type="hidden"）
+
+// 内容过滤
+$('div:contains("文本")'); // 包含指定文本的 div
+$('div:empty'); // 空元素（无内容/子元素）
+$('div:has(p)'); // 包含 p 标签的 div
+
+// 属性过滤
+$('input[name="username"]'); // name 为 username 的 input
+$('input[name!="username"]'); // name 不为 username 的 input
+$('input[name^="user"]'); // name 以 user 开头的 input
+$('input[name$="name"]'); // name 以 name 结尾的 input
+$('input[name*="user"]'); // name 包含 user 的 input
+
+// 表单过滤（简化表单元素选择）
+$(':input'); // 所有表单元素（input/select/textarea/button）
+$(':text'); // 文本框（type="text"）
+$(':password'); // 密码框
+$(':radio'); // 单选框
+$(':checkbox'); // 复选框
+$(':submit'); // 提交按钮
+$(':reset'); // 重置按钮
+$(':button'); // 普通按钮
+$(':checked'); // 选中的单选/复选框
+$(':selected'); // 选中的下拉选项
+```
+
+### DOM 操作
+
+#### 内容操作
+
+| 方法 | 说明 |
+| -------- | ------------------------------------- |
+| `html()` | 获取 / 设置元素的 HTML 内容（含标签） |
+| `text()` | 获取 / 设置元素的文本内容（纯文本） |
+| `val()` | 获取 / 设置表单元素的 value 值 |
+
+示例：
+
+```javascript
+// 获取
+$('#div1').html(); // 获取 div1 的 HTML 内容
+$('#div1').text(); // 获取 div1 的文本内容
+$('#input1').val(); // 获取输入框的值
+
+// 设置
+$('#div1').html('<p>新内容</p>'); // 设置 HTML 内容
+$('#div1').text('新文本'); // 设置文本内容
+$('#input1').val('默认值'); // 设置输入框值
+```
+
+#### 属性操作
+
+| 方法 | 说明 |
+| -------------- | ------------------------------------------------------------ |
+| `attr()` | 获取 / 设置元素的**自定义属性**（或原生属性） |
+| `prop()` | 获取 / 设置元素的**原生属性 / 状态**（如 checked、selected） |
+| `removeAttr()` | 移除属性 |
+| `removeProp()` | 移除属性（极少用） |
+
+示例：
+
+```javascript
+// attr 示例
+$('img').attr('src'); // 获取 img 的 src 属性
+$('img').attr('title', '图片'); // 设置 title 属性
+$('img').attr({src: '1.jpg', alt: '图片'}); // 批量设置属性
+$('img').removeAttr('title'); // 移除 title 属性
+
+// prop 示例（单选/复选框必用）
+$(':checkbox').prop('checked'); // 获取是否选中（返回 true/false）
+$(':checkbox').prop('checked', true); // 设置选中
+```
+
+⚠️ 注意：`attr` 返回属性的**初始值**（字符串），`prop` 返回**实时状态**（布尔值），表单状态（checked/selected）优先用 `prop`。
+
+#### 样式操作
+
+| 方法 | 说明 |
+| --------------- | ---------------------------------- |
+| `css()` | 获取 / 设置行内样式 |
+| `addClass()` | 添加类名 |
+| `removeClass()` | 移除类名 |
+| `toggleClass()` | 切换类名（有则移除，无则添加） |
+| `hasClass()` | 判断是否包含指定类名（返回布尔值） |
+
+示例：
+
+```javascript
+// css 操作
+$('#div1').css('color'); // 获取颜色
+$('#div1').css('color', 'red'); // 设置单个样式
+$('#div1').css({ // 批量设置样式
+ color: 'red',
+ fontSize: '16px', // 驼峰命名（或 'font-size'）
+ background: '#fff'
+});
+
+// 类操作
+$('#div1').addClass('active'); // 添加 active 类
+$('#div1').removeClass('active'); // 移除 active 类
+$('#div1').toggleClass('active'); // 切换 active 类
+$('#div1').hasClass('active'); // 判断是否有 active 类
+```
+
+#### 元素增删改
+
+##### 创建元素
+
+```javascript
+const $newDiv = $('<div class="box">新元素</div>'); // 创建 jQuery 对象
+```
+
+##### 添加元素
+
+| 方法 | 说明 |
+| ----------- | ---------------------------- |
+| `append()` | 父元素末尾添加子元素（父调） |
+| `prepend()` | 父元素开头添加子元素（父调） |
+| `after()` | 元素后添加同级元素（自身调） |
+| `before()` | 元素前添加同级元素（自身调） |
+
+示例：
+
+```javascript
+// 子元素添加
+$('ul').append('<li>末尾项</li>'); // ul 末尾加 li
+$('ul').prepend('<li>开头项</li>'); // ul 开头加 li
+
+// 同级元素添加
+$('div').after('<p>div 后面的 p</p>'); // div 后加 p
+$('div').before('<p>div 前面的 p</p>'); // div 前加 p
+```
+
+##### 删除元素
+
+| 方法 | 说明 |
+| ---------- | ------------------------------------ |
+| `remove()` | 删除元素（含自身及所有子元素、事件） |
+| `empty()` | 清空元素内容（保留自身） |
+
+示例：
+
+```javascript
+$('li').remove(); // 删除所有 li
+$('li').eq(0).remove(); // 删除第一个 li
+$('div').empty(); // 清空 div 内容
+```
+
+##### 替换元素
+
+```javascript
+$('p').replaceWith('<span>替换后的内容</span>'); // 替换所有 p 为 span
+```
+
+##### 遍历元素
+
+```javascript
+$('li').each(function(index, domEle) {
+ // index：索引（从 0 开始）
+ // domEle：原生 DOM 元素（需转 jQuery 对象）
+ console.log(index, $(domEle).text());
+ // 终止遍历：return false;
+});
+```
+
+##### 查找相关元素
+
+| 方法 | 说明 |
+| ------------ | -------------------------------------- |
+| `parent()` | 父元素（直接父级） |
+| `parents()` | 所有祖先元素（可传选择器过滤） |
+| `children()` | 所有子元素（直接子级，可传选择器过滤） |
+| `siblings()` | 所有同级元素（可传选择器过滤） |
+| `find()` | 后代元素（必须传选择器） |
+| `eq()` | 根据索引获取元素 |
+
+示例：
+
+```javascript
+$('li').parent(); // li 的直接父元素
+$('li').parents('ul'); // li 的所有 ul 祖先
+$('ul').children('li.active'); // ul 中类为 active 的直接子 li
+$('li').siblings('.active'); // li 的同级 active 元素
+$('div').find('p'); // div 下所有 p 元素
+$('li').eq(2); // 索引为 2 的 li
+```
+
+### 事件处理
+
+#### 基础事件绑定
+
+##### 快捷绑定（常用事件）
+
+```javascript
+$('button').click(function() { // 点击事件
+ console.log('点击了按钮');
+});
+
+$('input').blur(function() { // 失焦事件
+ console.log('输入框失焦');
+});
+
+// 其他快捷事件：mouseover/mouseout/hover/keydown/keyup/change/submit 等
+```
+
+##### `on()` 绑定（推荐，支持动态元素）
+
+```js
+// 单个事件
+$('ul').on('click', 'li', function() {
+ // 委托 ul 下的 li 绑定点击（支持动态添加的 li）
+ console.log($(this).text());
+});
+
+// 多个事件
+$('input').on({
+ focus: function() {
+ $(this).css('border', '1px solid red');
+ },
+ blur: function() {
+ $(this).css('border', '1px solid #ccc');
+ }
+});
+```
+
+##### 事件解绑
+
+```javascript
+$('button').off('click'); // 解绑点击事件
+$('button').off(); // 解绑所有事件
+```
+
+#### 事件触发
+
+```javascript
+$('button').click(); // 手动触发点击事件
+$('button').trigger('click'); // 等效上面
+```
+
+#### 事件对象
+
+```javascript
+$('button').click(function(e) {
+ e.preventDefault(); // 阻止默认行为（如a标签跳转）
+ e.stopPropagation(); // 阻止事件冒泡
+ console.log(e.target); // 触发事件的原生 DOM 元素
+});
+```
+
+## 作业
+
+### 第一部分（数组1-7）
+
+#### 关键代码
+
+```html
+ <script>
+ //2.1
+ let arr01 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
+ let sum01 = null
+ arr01.forEach(num => sum01 += num)
+ console.log(sum01);
+
+ //2.2
+ let arr02A = [1, 2, 3, 4, 5]
+ let arr02B = ['a', 'b', 'c', 'd', 'e']
+ let arr02C = arr02A.concat(arr02B)
+ console.log(arr02A, arr02B, arr02C);
+
+ //2.3
+ let findNumber03 = 6 //出现3次
+ let arr03 = [6, 2, 'a', 6, 45, 66, 1, 0, 'for', 9, 2, 8, 4, 6, '6']
+ let count = arr03.filter(num => num === 6).length
+ console.log(count);
+
+ //2.4
+ let arr04A = [1, 2, 4, 4, 3, 3, 1, 5, 3]
+ let arr04B = []
+ arr04A.forEach((num, index) => {
+ let lr = arr04A.indexOf(num)
+ let rl = arr04A.lastIndexOf(num)
+ if (lr !== rl) {
+ arr04B.push(num)
+ }
+ })
+ let set04 = new Set(arr04B)
+ console.log(set04);
+
+ //2.5
+ let arr05A = [1, 2, 3, 4, 2, 5, 'a', 6, 2, 9, 0, 23, 5, '2', 7]
+ let removeNumber05 = 2
+ let arr05B = arr05A.filter(num => num !== 2)
+ console.log(arr05A, arr05B);
+
+ //2.6
+ let arr06A = [{ name: "小明", score: 85 }, { name: "小红", score: 55 }, { name: "小刚", score: 90 }]
+ let arr06B = arr06A.filter(obj => obj.score >= 60).map(obj => obj.name)
+ console.log(arr06A,arr06B);
+ </script>
+```
+
+### 第二部分（数组7-24）
+
+#### 关键代码
+
+```html
+ <script>
+ //2.7
+ const arr07A = [1, 2, 3, 4, 5]
+ let arr07B = arr07A.map(num => num * 2)
+ console.log(arr07B);
+
+ //2.8
+ const arr08A = [1, 2, 3, 4, 5, 6, 7, 8, 9]
+ let arr08B = arr08A.filter(num => num % 2 !== 0)
+ console.log(arr08B);
+
+ //2.9
+ const arr09A = [10, 20, 30, 40, 50]
+ let arr09B = arr09A.reduce((sum, num) => sum + num, 0)
+ console.log(arr09B);
+
+ //2.10
+ const arr10 = [3, 7, 2, 9, 1, 5]
+ let result10 = arr10.reduce((acc, cur) => Math.max(acc,cur), arr10[0])
+ console.log(result10);
+
+ //2.11
+ const arr11 = [2, 5, 8, 12, 15, 7]
+ let result11 = arr11.find(num => num > 10)
+ console.log(result11);
+
+ //2.12
+ const arr12 = [1, 5, 3, -2, 8, -5]
+ let result12 = arr12.findIndex(num => num < 0)
+ console.log(result12);
+
+ //2.13
+ const arr13 = [1, 3, 5, 7, 8]
+ let result13 = arr13.some(sum => sum % 2 == 0)
+ console.log(result13);
+
+ //2.14
+ const arr14 = [1, 2, 3, 4, 5]
+ let result14 = arr14.every(sum => sum > 0)
+ console.log(result14);
+
+ //2.15
+ const arr15A = [40, 100, 1, 5, 25, 10]
+ let arr15B = arr15A.sort((o1, o2) => o1 - o2)
+ console.log(arr15B);
+
+ //2.16
+ const arr16A = [
+ { name: "小明", age: 20 },
+ { name: "小红", age: 18 },
+ { name: "小刚", age: 22 },
+ { name: "小胡", age: 11 }
+ ]
+ let arr16B = arr16A.sort((o1, o2) => o1.age - o2.age)
+ console.log(arr16B);
+
+ //2.17
+ const arr17A = ['apple', 'banana', 'orange']
+ let arr17B = arr17A.forEach((str, strIndex) => console.log(`索引${strIndex}:${str}`))
+
+ //2.18
+ const arr18A = [[1, 2], [3, 4], [5, 6]]
+ let arr18B = arr18A.flat(2)
+ console.log(arr18B);
+
+ //2.19
+ const arr19 = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']
+ arr19.reduce((acc, cur) =>acc[cur] = (acc[cur] || 0) + 1,{})
+
+ //2.20
+ const arr20A = [
+ { name: "鼠标", price: 29 },
+ { name: "键盘", price: 89 },
+ { name: "显示器", price: 899 },
+ { name: "耳机", price: 199 }
+ ]
+ let arr20B = arr20A.filter(obj => obj.price > 50).
+ sort((o1, o2) => o1.price - o2.price).
+ map(obj => obj.name)
+ console.log(arr20B);
+
+ //2.21
+ const arr21A = [2, 5, 8, 3, 9]
+ let arr21B = arr21A.map(sum => sum * 2).filter(sum => sum > 10)
+ console.log(arr21B);
+
+ //2.22
+ const arr22A = [1, 2, 2, 3, 4, 4, 5, 1]
+ let arr22B = arr22A.reduce((acc, cur) => {
+ if (acc.indexOf(cur) == -1) acc.push(cur)
+ return acc
+ }, []
+ )
+ console.log(arr22B);
+
+ //2.23
+ const arr23 = [
+ { name: "小明", score: 85 },
+ { name: "小红", score: 92 },
+ { name: "小刚", score: 78 },
+ { name: "小丽", score: 88 }
+ ]
+ let result23 = arr23.reduce((acc, num) => acc + num.score, 0) / arr23.length
+ console.log(result23);
+
+ //2.24
+ const arr24 = [
+ { name: "张三", age: 17 },
+ { name: "李四", age: 20 },
+ { name: "王五", age: 25 },
+ { name: "赵六", age: 16 }
+ ]
+ arr24.filter(obj => obj.age >= 18).map(obj => console.log(`"${obj.name}"(${obj.age}岁)`));
+ </script>
+```
+
+### 第三部分（jQuery基础）
+
+#### 关键代码
+
+```html
+ <script>
+ // 5.1.1
+ $(document).ready(() => {console.log('jQuery已就绪');})
+
+ //5.1.2
+ console.log($ === jQuery);
+
+ //5.1.3
+ console.log($('#demo')[0]);
+
+ //5.1.4
+ let jQueryObj04 = $('#demo')
+ let domObj = jQueryObj04[0]
+ jQueryObj04 = $(domObj)
+ console.log(jQueryObj04);
+ console.log(domObj);
+
+ //5.1.5
+ $('#demo').css({
+ backgroundColor: 'red',
+ width: '200px',
+ height: '200px'
+ }).addClass('box').fadeIn()
+ </script>
+```
+
+### 第四部分（jQuery选择器与操作）
+
+#### 关键代码
+
+```html
+ <script>
+ // 5.2.1
+ $('.item').css({color:'red'})
+
+ // 5.2.2
+ $('li:first').css('backgroundColor','blue')
+ $('li:last').css('backgroundColor','green')
+
+ //5.2.3
+ $('#container').find('span').text('hahahaha')
+
+ //5.2.4
+ $('table td:odd').css('backgroundColor','blue')
+
+ //5.2.5
+ $('.item').each((index,domObj)=>{return $(domObj).text(`第${index+1}个item`)})
+ </script>
+```
diff --git "a/\351\231\210\346\200\235\345\223\262/20251218-jsjQuery\345\272\22302.md" "b/\351\231\210\346\200\235\345\223\262/20251218-jsjQuery\345\272\22302.md"
new file mode 100644
index 0000000000000000000000000000000000000000..cc7ea85337703eea5df4a2426bd396fca20c5dda
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251218-jsjQuery\345\272\22302.md"
@@ -0,0 +1,332 @@
+## 笔记
+
+### 动画效果
+
+#### 基础显示隐藏
+
+| 方法 | 说明 |
+| ---------- | -------------------------------------- |
+| `show()` | 显示元素（可传时长：ms/'slow'/'fast'） |
+| `hide()` | 隐藏元素 |
+| `toggle()` | 切换显示 / 隐藏 |
+
+示例：
+
+```javascript
+$('div').show(500); // 500ms 显示
+$('div').hide('slow'); // 慢速隐藏
+$('div').toggle(); // 切换
+```
+
+#### 滑动效果
+
+| 方法 | 说明 |
+| --------------- | ------------ |
+| `slideDown()` | 下滑显示 |
+| `slideUp()` | 上滑隐藏 |
+| `slideToggle()` | 切换滑动效果 |
+
+示例：
+
+```javascript
+$('div').slideDown(300); // 300ms 下滑
+$('div').slideToggle(); // 切换滑动
+```
+
+#### 淡入淡出
+
+| 方法 | 说明 |
+| -------------- | --------------------- |
+| `fadeIn()` | 淡入 |
+| `fadeOut()` | 淡出 |
+| `fadeToggle()` | 切换淡入淡出 |
+| `fadeTo()` | 淡到指定透明度（0-1） |
+
+示例：
+
+```javascript
+$('div').fadeIn(); // 淡入
+$('div').fadeTo(500, 0.5); // 500ms 淡到 50% 透明度
+```
+
+#### 自定义动画
+
+`animate()`：自定义 CSS 动画（仅支持数值型样式，如宽高、位置、透明度）
+
+```javascript
+$('div').animate({
+ left: '200px',
+ width: '300px',
+ opacity: 0.8
+}, 1000, function() {
+ // 动画完成回调
+ console.log('动画结束');
+});
+```
+
+#### 动画控制
+
+```javascript
+$('div').stop(); // 停止当前动画（立即）
+$('div').delay(500); // 延迟 500ms 执行后续动画
+```
+
+### AJAX 操作
+
+jQuery 封装了 AJAX，简化请求流程，核心方法：
+
+#### 通用方法 `$.ajax()`
+
+```javascript
+$.ajax({
+ url: 'https://api.example.com/data', // 请求地址
+ type: 'GET', // 请求方式（GET/POST）
+ dataType: 'json', // 响应数据类型（json/text/html/xml）
+ data: { // 请求参数（GET 拼在 URL，POST 放请求体）
+ id: 1,
+ name: 'test'
+ },
+ async: true, // 是否异步（默认 true）
+ timeout: 5000, // 超时时间（ms）
+ beforeSend: function(xhr) {
+ // 请求发送前执行（如设置请求头）
+ xhr.setRequestHeader('Token', '123456');
+ },
+ success: function(res) {
+ // 请求成功回调
+ console.log(res);
+ },
+ error: function(xhr, status, error) {
+ // 请求失败回调
+ console.log('失败：', error);
+ },
+ complete: function() {
+ // 请求完成（无论成败）回调
+ }
+});
+```
+
+#### 简化方法
+
+| 方法 | 说明 |
+| ------------- | ---------------------------- |
+| `$.get()` | GET 请求（简化版 $.ajax） |
+| `$.post()` | POST 请求 |
+| `$.getJSON()` | GET 请求，自动解析 JSON 数据 |
+
+示例：
+
+```javascript
+// GET 请求
+$.get('https://api.example.com/data', {id: 1}, function(res) {
+ console.log(res);
+}, 'json');
+
+// POST 请求
+$.post('https://api.example.com/add', {name: 'test'}, function(res) {
+ console.log(res);
+});
+
+// 获取 JSON
+$.getJSON('https://api.example.com/json', function(res) {
+ console.log(res);
+});
+```
+
+### 常用工具方法
+
+jQuery 提供了独立于 DOM 的工具方法，前缀 `$`：
+
+```javascript
+// 1. 数组/对象遍历
+$.each([1,2,3], function(index, val) {
+ console.log(index, val);
+});
+
+// 2. 数组去重
+$.unique([1,2,2,3]); // [1,2,3]
+
+// 3. 类型判断
+$.type('abc'); // "string"
+$.type([]); // "array"
+$.isArray([]); // true
+$.isFunction(function(){}); // true
+
+// 4. 合并对象/数组
+$.extend({}, {a:1}, {b:2}); // {a:1, b:2}
+
+// 5. 解析 JSON
+$.parseJSON('{"name":"test"}'); // {name: "test"}
+```
+
+### 注意事项
+
+**版本兼容**：jQuery 3.x 移除了 1.x/2.x 的部分旧特性（如 `bind()`/`live()`），优先用 `on()` 绑定事件。
+
+**避免重复引入**：多次引入 jQuery 会导致$被覆盖，可通过 jQuery.noConflict()解决：
+
+```javascript
+const jq = jQuery.noConflict(); // 自定义别名
+jq('#div1').text('新内容');
+```
+
+**性能优化：**
+
+- 缓存 jQuery 对象：`const $li = $('li');`（避免重复选择）
+- 减少 DOM 操作：批量修改先隐藏元素，操作后再显示
+- 避免使用通配符选择器 `$('*')`
+
+**动态元素事件**：动态添加的元素需用事件委托（`on()` 第二个参数传选择器）。
+
+**与原生 JS 结合**：复杂逻辑可结合原生 JS，jQuery 侧重 DOM 操作，原生侧重业务逻辑。
+
+## 作业
+
+### 第一部分（jQuery 事件处理）
+
+#### 关键代码
+
+```html
+ <script>
+ //5.3.1
+ $('#changeBtn').on({
+ click: () => {
+ $('#title').text('新标题')
+ }
+ })
+
+ //5.3.2
+ $('#box').hover(function () {
+ $(this).css({
+ 'background-color': 'yellow'
+ })
+ }, function () {
+ $(this).css({
+ 'background-color': 'gray'
+ })
+ })
+
+ //5.3.3
+ $('#addBtn').on('click', function () { $('#list').append('<li>项目</li>') })
+ $('#list').on('click', function () { console.log(`被点击了`); })
+
+ //5.3.4
+ $('form>button').on({
+ click: function (e) {
+ console.log($('#username').val());
+ e.preventDefault()
+ }
+ })
+
+ //5.3.5
+ $('#btn').on('click',function(){
+ console.log('被点击了');
+ })
+ $('#removeBtn').on('click',function(){
+ $('#btn').off('click')
+ console.log('移除事件');
+ })
+ </script>
+```
+
+### 第二部分（jQuery DOM 操作）
+
+#### 关键代码
+
+```html
+<script>
+ //5.5.1
+ $('#addBtn').on('click', function () {$('#list').append(`<li>项目${$('#list li').length + 1}</li>`)})
+
+ //5.5.2
+ $('#removeBtn').on('click', function () {$('.special').remove()})
+
+ //5.5.3
+ $('#cloneBtn').on('click', function () { $('#original').after($('#original').clone(true)) })
+
+ //5.5.4
+ $('p').wrap('<div class="wrapper"></div>')
+
+ //5.5.5
+ $('#updateBtn').on('click',function(){$('#photo').attr({width:'200px',border :'1px solid black'})})
+ </script>
+```
+
+### 第三部分（函数）
+
+#### 关键代码
+
+```html
+ <script>
+ //2.2.1
+ function greet(name) { console.log(`你好，${name}！`); }
+ greet('老胡胡')
+
+ //2.2.2
+ function max(num01, num02) { console.log(Math.max(num01, num02)); }
+ max(15, 23)
+
+ //2.2.3
+ function calculateArea(...args) {
+ if (args.length == 2) console.log(args[0] * args[1]);
+ else if (args.length == 1) console.log(args[0] * args[0]);
+ else console.log(`请输入一或二个参数`);
+ }
+ calculateArea(5)
+ calculateArea(5, 10)
+ calculateArea(5, 5, 5)
+
+ //2.2.4
+ function filterEven(arr) { console.log(arr.filter(num => num % 2 == 0)); }
+ filterEven([1, 2, 3, 4, 5, 6])
+
+ //2.2.5
+ function sumAll(...args) { console.log(args.reduce((acc, cur) => acc += cur, 0)); }
+ sumAll(1, 2, 3, 4, 5)
+
+ //2.2.6
+ fn08()
+
+ //2.2.7
+ //没讲过
+
+ //2.2.8
+ function fn08() {
+ var item08A = `young胡`
+ let item08B = `old胡`
+ console.log(item08A, item08B);
+
+ }
+ // console.log(item08A);
+ // console.log(item08B);
+
+ //2.2.9
+ //没讲过
+
+ //2.2.10
+ function factorial(n) { }
+
+ //2.2.11
+ function fibonacci(n) { }
+
+ //2.2.12
+ //没讲过
+ (function () {let private = "私有";}())
+ // console.log(private);
+
+ //2.2.13-2.2.17
+ //没讲过
+
+ //2.2.18
+ //没讲过
+ let obj18 = {
+ name: '老胡',
+ age: 41,
+ city:'龙岩',
+ job:'老师'
+ }
+ function getUser({ name, age, city }) {console.log(name,age,city);}
+ getUser(obj18)
+ </script>
+```
+
diff --git "a/\351\231\210\346\200\235\345\223\262/20251219-js\346\225\260\347\273\204\351\253\230\347\272\247\346\226\271\346\263\225.md" "b/\351\231\210\346\200\235\345\223\262/20251219-js\346\225\260\347\273\204\351\253\230\347\272\247\346\226\271\346\263\225.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b83e5043b76cbf84e970134debec121f69fb26e5
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251219-js\346\225\260\347\273\204\351\253\230\347\272\247\346\226\271\346\263\225.md"
@@ -0,0 +1,129 @@
+## 笔记
+
+### 数组核心属性
+
+| 属性名 | 说明 | 示例 |
+| ----------------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `length` | 表示数组元素的个数，可读写（修改会截断 / 扩展数组） | `const arr = [1,2,3]; arr.length = 2; // arr变为[1,2]` |
+| `constructor` | 指向数组构造函数 `Array` | `arr.constructor === Array // true` |
+| `prototype` | 数组原型（用于扩展方法，非实例属性） | `Array.prototype.myMethod = () => {}` |
+| `Symbol.iterator` | 迭代器接口（支持`for...of`遍历） | `for (let item of arr) {}` |
+
+### 二、数组方法分类基础版本（是否修改原数组）
+
+#### 2.1 会修改原数组的方法
+
+这类方法直接操作原数组，执行后原数组的内容 / 结构会发生变化。
+
+| 方法名 | 功能 | 示例 |
+| -------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| `push()` | 向数组末尾添加一个 / 多个元素，返回新长度 | `const arr = [1,2]; arr.push(3); // arr变为[1,2,3]` |
+| `pop()` | 删除数组最后一个元素，返回被删除的元素 | `const arr = [1,2,3]; arr.pop(); // arr变为[1,2]` |
+| `unshift()` | 向数组开头添加一个 / 多个元素，返回新长度 | `const arr = [2,3]; arr.unshift(1); // arr变为[1,2,3]` |
+| `shift()` | 删除数组第一个元素，返回被删除的元素 | `const arr = [1,2,3]; arr.shift(); // arr变为[2,3]` |
+| `splice(start, deleteCount, ...items)` | 增 / 删 / 改数组元素，返回被删除的元素数组 | `const arr = [1,2,3]; arr.splice(1,1,4); // arr变为[1,4,3]` |
+| `sort((a,b) => {})` | 对数组元素排序（默认按字符串 Unicode 码点），返回排序后的数组 | `const arr = [3,1,2]; arr.sort(); // arr变为[1,2,3]` |
+| `reverse()` | 反转数组元素顺序，返回反转后的数组 | `const arr = [1,2,3]; arr.reverse(); // arr变为[3,2,1]` |
+| `fill(value, start, end)` | 用指定值填充数组（覆盖指定范围），返回填充后的数组 | `const arr = [1,2,3]; arr.fill(0,1,2); // arr变为[1,0,3]` |
+| `copyWithin(target, start, end)` | 复制数组指定范围元素到目标位置，返回修改后的数组 | `const arr = [1,2,3,4]; arr.copyWithin(0,2); // arr变为[3,4,3,4]` |
+
+#### 2.2 不修改原数组的方法
+
+这类方法不会改变原数组，而是返回新数组（或其他类型值），原数组保持原样。
+
+##### （1）返回新数组的方法
+
+| 方法名 | 功能 | 示例 |
+| -------------------------- | ---------------------------------------------- | ------------------------------------------------------------ |
+| `slice(start, end)` | 截取数组指定范围元素，返回新数组（含头不含尾） | `const arr = [1,2,3]; const newArr = arr.slice(1); // newArr=[2,3]，arr仍为[1,2,3]` |
+| `concat(...arrays/values)` | 拼接数组 / 值，返回新数组 | `const arr1 = [1,2]; const arr2 = arr1.concat(3,[4]); // arr2=[1,2,3,4]，arr1不变` |
+| `map((item) => {})` | 遍历数组，对每个元素处理后返回新数组 | `const arr = [1,2]; const newArr = arr.map(i => i*2); // newArr=[2,4]，arr仍为[1,2]` |
+| `filter((item) => {})` | 过滤数组元素，返回符合条件的新数组 | `const arr = [1,2,3]; const newArr = arr.filter(i => i>1); // newArr=[2,3]，arr不变` |
+| `flat(depth)` | 扁平化数组，返回新数组（depth 为扁平化深度） | `const arr = [1,[2,[3]]]; const newArr = arr.flat(2); // newArr=[1,2,3]，arr不变` |
+| `flatMap((item) => {})` | `map + flat(1)` 结合，返回新数组 | `const arr = [1,2]; const newArr = arr.flatMap(i => [i,i*2]); // newArr=[1,2,2,4]` |
+| `with(index, value)` | 替换数组指定索引的元素，返回新数组（ES2023） | `const arr = [1,2]; const newArr = arr.with(0, 3); // newArr=[3,2]，arr仍为[1,2]` |
+
+##### （2）返回非数组值的方法
+
+| 方法名 | 功能 | 示例 |
+| -------------------------------------- | ------------------------------------------ | ------------------------------------------------------ |
+| `forEach((item) => {})` | 遍历数组（无返回值，仅执行回调） | `arr.forEach(i => console.log(i)); // 原数组不变` |
+| `find((item) => {})` | 返回第一个符合条件的元素（无则 undefined） | `arr.find(i => i>1); // 原数组不变` |
+| `findIndex((item) => {})` | 返回第一个符合条件的元素索引（无则 - 1） | `arr.findIndex(i => i>1); // 原数组不变` |
+| `includes(value, start)` | 判断数组是否包含指定值，返回布尔值 | `arr.includes(2); // 原数组不变` |
+| `indexOf(value, start)` | 返回指定值首次出现的索引（无则 - 1） | `arr.indexOf(2); // 原数组不变` |
+| `lastIndexOf(value, start)` | 返回指定值最后出现的索引（无则 - 1） | `arr.lastIndexOf(2); // 原数组不变` |
+| `every((item) => {})` | 判断所有元素是否符合条件，返回布尔值 | `arr.every(i => i>0); // 原数组不变` |
+| `some((item) => {})` | 判断是否有元素符合条件，返回布尔值 | `arr.some(i => i>1); // 原数组不变` |
+| `reduce((acc, item) => {}, init)` | 累加 / 归并数组，返回最终归并值 | `arr.reduce((sum, i) => sum+i, 0); // 原数组不变` |
+| `reduceRight((acc, item) => {}, init)` | 从右到左归并数组，返回最终归并值 | `arr.reduceRight((sum, i) => sum+i, 0); // 原数组不变` |
+| `join(separator)` | 将数组转为字符串，返回拼接后的字符串 | `arr.join(','); // 原数组不变` |
+| `toString()` | 将数组转为字符串（默认用逗号分隔） | `arr.toString(); // 原数组不变` |
+| `toLocaleString()` | 按本地化规则转为字符串 | `arr.toLocaleString(); // 原数组不变` |
+| `entries()` | 返回迭代器（包含索引和值） | `for (let [i, v] of arr.entries()) {} // 原数组不变` |
+| `keys()` | 返回索引迭代器 | `for (let i of arr.keys()) {} // 原数组不变` |
+| `values()` | 返回值迭代器 | `for (let v of arr.values()) {} // 原数组不变` |
+
+我已为你优化表格中「完整语法（标注必选 / 可选参数）」和「参数说明」字段的排版，通过换行让内容更易读，同时保留原有的逻辑和格式：
+
+### 三、数组方法分类完整版本（是否修改原数组）
+
+#### 3.1修改原数组的方法
+
+这类方法直接操作原数组，执行后原数组的内容 / 结构会发生变化，返回值标注在说明中。
+
+| 方法名 | 功能 | 完整语法（标注必选 / 可选参数） | 参数说明 | 示例 |
+| -------------- | ----------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| `push()` | 向数组末尾添加 1 + 元素，返回新长度 | `array.push(...items)`<br>✅ `items`：要添加的元素（1 个或多个） | `items`：<br>- 必选<br>- 任意类型的元素，数量不限 | `const arr = [1,2]; arr.push(3,4); // arr变为[1,2,3,4]，返回4` |
+| `pop()` | 删除数组最后一个元素，返回被删除的元素 | `array.pop()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.pop(); // arr变为[1,2]，返回3` |
+| `unshift()` | 向数组开头添加 1 + 元素，返回新长度 | `array.unshift(...items)`<br>✅ `items`：要添加的元素（1 个或多个） | `items`：<br>- 必选<br>- 任意类型的元素，数量不限 | `const arr = [2,3]; arr.unshift(1); // arr变为[1,2,3]，返回3` |
+| `shift()` | 删除数组第一个元素，返回被删除的元素 | `array.shift()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.shift(); // arr变为[2,3]，返回1` |
+| `splice()` | 增 / 删 / 改数组元素，返回被删除的元素数组 | `array.splice(start, deleteCount, ...items)`<br>✅ `start`：起始索引<br>❓ `deleteCount`：删除数量（默认删到末尾）<br>❓ `items`：要添加的元素（可选） | - `start`：<br> 必选，整数，指定操作起始位置（负数表示倒数）<br>- `deleteCount`：<br> 可选，非负整数，要删除的元素数量（0 则不删除）<br>- `items`：<br> 可选，要插入到数组中的元素 | `const arr = [1,2,3]; arr.splice(1,1,4); // arr变为[1,4,3]，返回[2]` |
+| `sort()` | 排序数组元素（默认按字符串 Unicode 码点），返回排序后的数组 | `array.sort(compareFn)`<br>❓ `compareFn(a, b)`：排序对比函数（可选） | - `compareFn`：<br> 可选，回调函数，接收两个参数：<br> ✅ `a`：第一个用于比较的元素<br> ✅ `b`：第二个用于比较的元素<br> 返回值：<0 则 a 排 b 前，=0 则位置不变，>0 则 b 排 a 前 | `const arr = [3,1,2]; arr.sort((a,b) => a-b); // arr变为[1,2,3]，返回[1,2,3]` |
+| `reverse()` | 反转数组元素顺序，返回反转后的数组 | `array.reverse()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.reverse(); // arr变为[3,2,1]，返回[3,2,1]` |
+| `fill()` | 用指定值填充数组（覆盖指定范围），返回填充后的数组 | `array.fill(value, start, end)`<br>✅ `value`：填充值<br>❓ `start`：起始索引（默认 0）<br>❓ `end`：结束索引（默认数组长度，不含） | - `value`：<br> 必选，任意类型，填充到数组的值<br>- `start`：<br> 可选，整数，填充起始位置（负数表示倒数）<br>- `end`：<br> 可选，整数，填充结束位置（不含） | `const arr = [1,2,3]; arr.fill(0,1,2); // arr变为[1,0,3]，返回[1,0,3]` |
+| `copyWithin()` | 复制数组指定范围元素到目标位置，返回修改后的数组 | `array.copyWithin(target, start, end)`<br>✅ `target`：目标位置索引<br>❓ `start`：复制起始索引（默认 0）<br>❓ `end`：复制结束索引（默认数组长度，不含） | - `target`：<br> 必选，整数，复制元素要粘贴到的位置<br>- `start`：<br> 可选，整数，复制起始位置（负数表示倒数）<br>- `end`：<br> 可选，整数，复制结束位置（不含） | `const arr = [1,2,3,4]; arr.copyWithin(0,2); // arr变为[3,4,3,4]，返回[3,4,3,4]` |
+
+#### 3.2不修改原数组的方法
+
+这类方法不会改变原数组，返回新数组 / 非数组值，原数组保持原样。
+
+##### （1）返回新数组的方法
+
+| 方法名 | 功能 | 完整语法（标注必选 / 可选参数） | 参数说明 | 示例 |
+| ----------- | ---------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| `slice()` | 截取数组指定范围元素，返回新数组（含头不含尾） | `array.slice(start, end)`<br>❓ `start`：起始索引（默认 0）<br>❓ `end`：结束索引（默认数组长度，不含） | - `start`：<br> 可选，整数，截取起始位置（负数表示倒数）<br>- `end`：<br> 可选，整数，截取结束位置（不含） | `const arr = [1,2,3]; const newArr = arr.slice(1); // newArr=[2,3]，arr仍为[1,2,3]` |
+| `concat()` | 拼接数组 / 值，返回新数组 | `array.concat(...arrays/values)`<br>❓ `arrays/values`：要拼接的数组或值（可选） | `arrays/values`：<br>- 可选<br>- 任意数量的数组或单个值（任意类型） | `const arr1 = [1,2]; const arr2 = arr1.concat(3,[4]); // arr2=[1,2,3,4]，arr1不变` |
+| `map()` | 遍历数组，对每个元素处理后返回新数组 | `array.map(callback(currentValue, index, array), thisArg)`<br>✅ `callback`：处理函数<br>❓ `thisArg`：执行 callback 时的 this 指向（可选）<br>callback 参数：<br>✅ `currentValue`：当前处理的元素<br>❓ `index`：当前元素索引（可选）<br>❓ `array`：调用 map 的原数组（可选） | - `callback`：<br> 必选，对每个元素的处理逻辑，返回处理后的值<br>- `thisArg`：<br> 可选，指定 callback 内 this 的指向<br>- `currentValue`：<br> 必选，数组中正在处理的当前元素<br>- `index`：<br> 可选，当前元素在数组中的索引<br>- `array`：<br> 可选，调用 map 的原数组 | `const arr = [1,2]; const newArr = arr.map((item, idx) => item*2); // newArr=[2,4]，arr不变` |
+| `filter()` | 过滤数组元素，返回符合条件的新数组 | `array.filter(callback(currentValue, index, array), thisArg)`<br>✅ `callback`：筛选函数<br>❓ `thisArg`：执行 callback 时的 this 指向（可选）<br>callback 参数：<br>✅ `currentValue`：当前处理的元素<br>❓ `index`：当前元素索引（可选）<br>❓ `array`：调用 filter 的原数组（可选） | - `callback`：<br> 必选，返回布尔值（true 保留元素，false 过滤）<br>- `thisArg`：<br> 可选，指定 callback 内 this 的指向<br>- `currentValue`：<br> 必选，数组中正在处理的当前元素<br>- `index`：<br> 可选，当前元素在数组中的索引<br>- `array`：<br> 可选，调用 filter 的原数组 | `const arr = [1,2,3]; const newArr = arr.filter((item) => item>1); // newArr=[2,3]，arr不变` |
+| `flat()` | 扁平化数组，返回新数组 | `array.flat(depth)`<br>❓ `depth`：扁平化深度（默认 1） | `depth`：<br>- 可选<br>- 非负整数，指定扁平化的层级（Infinity 表示无限层级） | `const arr = [1,[2,[3]]]; const newArr = arr.flat(2); // newArr=[1,2,3]，arr不变` |
+| `flatMap()` | `map + flat(1)`结合，返回新数组 | `array.flatMap(callback(currentValue, index, array), thisArg)`<br>✅ `callback`：处理函数（同 map）<br>❓ `thisArg`：执行 callback 时的 this 指向（可选）<br>callback 参数：<br>✅ `currentValue`：当前处理的元素<br>❓ `index`：当前元素索引（可选）<br>❓ `array`：调用 flatMap 的原数组（可选） | - `callback`：<br> 必选，返回单个值或数组（最终会被扁平化 1 层）<br>- 其他参数同 map | `const arr = [1,2]; const newArr = arr.flatMap(i => [i,i*2]); // newArr=[1,2,2,4]` |
+| `with()` | 替换数组指定索引的元素，返回新数组（ES2023） | `array.with(index, value)`<br>✅ `index`：要替换的索引<br>✅ `value`：新值 | - `index`：<br> 必选，整数，要替换的元素索引（负数表示倒数）<br>- `value`：<br> 必选，任意类型，替换后的新值 | `const arr = [1,2]; const newArr = arr.with(0, 3); // newArr=[3,2]，arr仍为[1,2]` |
+
+##### （2）返回非数组值的方法
+
+| 方法名 | 功能 | 完整语法（标注必选 / 可选参数） | 参数说明 | 示例 |
+| ------------------ | ------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| `forEach()` | 遍历数组（无返回值，仅执行回调） | `array.forEach(callback(currentValue, index, array), thisArg)`<br>✅ `callback`：遍历执行的函数<br>❓ `thisArg`：执行 callback 时的 this 指向（可选）<br>callback 参数：<br>✅ `currentValue`：当前处理的元素<br>❓ `index`：当前元素索引（可选）<br>❓ `array`：调用 forEach 的原数组（可选） | - `callback`：<br> 必选，无返回值（返回值会被忽略）<br>- `thisArg`：<br> 可选，指定 callback 内 this 的指向<br>- `currentValue`：<br> 必选，数组中正在处理的当前元素<br>- `index`：<br> 可选，当前元素在数组中的索引<br>- `array`：<br> 可选，调用 forEach 的原数组 | `arr.forEach((item, idx) => console.log(idx, item)); // 原数组不变` |
+| `find()` | 返回第一个符合条件的元素（无则 undefined） | `array.find(callback(currentValue, index, array), thisArg)`<br>✅ `callback`：查找条件函数<br>❓ `thisArg`：执行 callback 时的 this 指向（可选）<br>callback 参数：<br>✅ `currentValue`：当前处理的元素<br>❓ `index`：当前元素索引（可选）<br>❓ `array`：调用 find 的原数组（可选） | - `callback`：<br> 必选，返回布尔值（true 则返回当前元素）<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.find(item => item>1); // 返回2，arr不变` |
+| `findIndex()` | 返回第一个符合条件的元素索引（无则 - 1） | `array.findIndex(callback(currentValue, index, array), thisArg)`<br>✅ `callback`：查找条件函数<br>❓ `thisArg`：执行 callback 时的 this 指向（可选）<br>callback 参数：<br>✅ `currentValue`：当前处理的元素<br>❓ `index`：当前元素索引（可选）<br>❓ `array`：调用 findIndex 的原数组（可选） | - `callback`：<br> 必选，返回布尔值（true 则返回当前索引）<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.findIndex(item => item>1); // 返回1，arr不变` |
+| `includes()` | 判断数组是否包含指定值，返回布尔值 | `array.includes(value, start)`<br>✅ `value`：要查找的值<br>❓ `start`：起始查找索引（默认 0） | - `value`：<br> 必选，任意类型，要查找的目标值<br>- `start`：<br> 可选，整数，查找起始位置（负数表示倒数） | `const arr = [1,2,3]; arr.includes(2); // 返回true，arr不变` |
+| `indexOf()` | 返回指定值首次出现的索引（无则 - 1） | `array.indexOf(value, start)`<br>✅ `value`：要查找的值<br>❓ `start`：起始查找索引（默认 0） | - `value`：<br> 必选，任意类型，要查找的目标值<br>- `start`：<br> 可选，整数，查找起始位置（负数表示倒数） | `const arr = [1,2,3]; arr.indexOf(2); // 返回1，arr不变` |
+| `lastIndexOf()` | 返回指定值最后出现的索引（无则 - 1） | `array.lastIndexOf(value, start)`<br>✅ `value`：要查找的值<br>❓ `start`：起始查找索引（默认数组长度 - 1） | - `value`：<br> 必选，任意类型，要查找的目标值<br>- `start`：<br> 可选，整数，反向查找的起始位置（负数表示倒数） | `const arr = [1,2,2,3]; arr.lastIndexOf(2); // 返回2，arr不变` |
+| `every()` | 判断所有元素是否符合条件，返回布尔值 | `array.every(callback(currentValue, index, array), thisArg)`<br>✅ `callback`：判断函数<br> ❓ `thisArg`：执行 callback 时的 this 指向（可选）<br>callback 参数：<br>✅ `currentValue`：当前处理的元素<br>❓ `index`：当前元素索引（可选）<br>❓ `array`：调用 every 的原数组（可选） | - `callback`：<br> 必选，返回布尔值（所有元素返回 true 则最终为 true）<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.every(item => item>0); // 返回true，arr不变` |
+| `some()` | 判断是否有元素符合条件，返回布尔值 | `array.some(callback(currentValue, index, array), thisArg)`<br>✅ `callback`：判断函数<br>❓ `thisArg`：执行 callback 时的 this 指向（可选）<br>callback 参数：<br>✅ `currentValue`：当前处理的元素<br>❓ `index`：当前元素索引（可选）<br>❓ `array`：调用 some 的原数组（可选） | - `callback`：<br> 必选，返回布尔值（任意元素返回 true 则最终为 true）<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.some(item => item>2); // 返回true，arr不变` |
+| `reduce()` | 累加 / 归并数组，返回最终归并值 | `array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`<br>✅ `callback`：归并函数<br>❓ `initialValue`：累加器初始值（可选）<br>callback 参数：<br>✅ `accumulator`：累加器（累计结果）<br>✅ `currentValue`：当前处理的元素<br>❓ `currentIndex`：当前元素索引（可选）<br>❓ `array`：调用 reduce 的原数组（可选） | - `callback`：<br> 必选，返回累计结果（会作为下一次的 accumulator）<br>- `initialValue`：<br> 可选，累加器初始值（无则用数组第一个元素）<br>- `accumulator`：<br> 必选，累计的结果值<br>- `currentValue`：<br> 必选，当前处理的元素<br>- `currentIndex`：<br> 可选，当前元素索引<br>- `array`：<br> 可选，调用 reduce 的原数组 | `const arr = [1,2,3]; arr.reduce((sum, item) => sum+item, 0); // 返回6，arr不变` |
+| `reduceRight()` | 从右到左归并数组，返回最终归并值 | `array.reduceRight(callback(accumulator, currentValue, currentIndex, array), initialValue)`<br>✅ `callback`：归并函数（同 reduce）<br>❓ `initialValue`：累加器初始值（可选）<br>callback 参数：同 reduce | 同 reduce，仅遍历顺序为从右到左 | `const arr = [1,2,3]; arr.reduceRight((sum, item) => sum+item, 0); // 返回6，arr不变` |
+| `join()` | 将数组转为字符串，返回拼接后的字符串 | `array.join(separator)`<br>❓ `separator`：分隔符（默认逗号） | `separator`：<br>- 可选<br>- 字符串，元素之间的分隔符（空字符串则无分隔） | `const arr = [1,2,3]; arr.join(','); // 返回"1,2,3"，arr不变` |
+| `toString()` | 将数组转为字符串（默认用逗号分隔） | `array.toString()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.toString(); // 返回"1,2,3"，arr不变` |
+| `toLocaleString()` | 按本地化规则转为字符串 | `array.toLocaleString(locales, options)`<br>❓ `locales`：语言 / 地区代码（可选）<br>❓ `options`：格式化选项（可选） | - `locales`：<br> 可选，如 "zh-CN"、"en-US"<br>- `options`：<br> 可选，对象，配置格式化规则 | `const arr = [1234, new Date()]; arr.toLocaleString(); // 按本地格式返回字符串` |
+| `entries()` | 返回迭代器（包含索引和值） | `array.entries()`<br>无参数 | 无 | `for (let [i, v] of arr.entries()) {} // 原数组不变` |
+| `keys()` | 返回索引迭代器 | `array.keys()`<br>无参数 | 无 | `for (let i of arr.keys()) {} // 原数组不变` |
+| `values()` | 返回值迭代器 | `array.values()`<br>无参数 | 无 | `for (let v of arr.values()) {} // 原数组不变` |
+
+#### 标注说明
+
+- ✅：参数为**必选**
+- ❓：参数为**可选**
+- 回调函数的返回值：除标注外，`map`返回处理后的值、`filter`返回布尔值、`find/findIndex`返回布尔值、`every/some`返回布尔值、`reduce/reduceRight`返回累计值，`forEach`无返回值（返回 undefined）。
+- `thisArg`参数：所有带`thisArg`的方法，若省略则 callback 内的`this`指向：非严格模式下为全局对象，严格模式下为 undefined
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251222-js\345\215\232\345\256\242CRUD01.md" "b/\351\231\210\346\200\235\345\223\262/20251222-js\345\215\232\345\256\242CRUD01.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bf3d67d3b0e78aaef3053ac447467981542c842c
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251222-js\345\215\232\345\256\242CRUD01.md"
@@ -0,0 +1,442 @@
+
+
+## 笔记：罗老师手把手教你搓模态框
+
+实现一个可控制显隐、遮挡底层操作、承载交互内容的模态框组件，核心是**遮罩层隔离底层操作** + **内容容器承载交互** + **类名控制显隐 / 内容切换**。
+
+### 实现步骤（核心三步）
+
+#### 构建全屏遮罩层（隔离底层操作）
+
+##### 核心要求
+
+创建 100vw*100vh （全屏）的半透明遮罩层，模态框显示时阻止用户操作底层的 “数据渲染 / 交互层”。
+
+##### 具体实现
+
+**HTML 结构**：创建遮罩层容器，作为模态框的外层容器：
+
+```html
+<!-- 模态框遮罩层（核心容器） -->
+<div class="modal-mask" id="modalMask">
+ <!-- 模态框内容容器（步骤2实现） -->
+ <div class="modal-content"></div>
+</div>
+```
+
+
+
+**CSS 样式**：设置全屏、半透明、固定定位，初始隐藏，阻止点击穿透：
+
+```css
+/* 遮罩层核心样式 */
+.modal-mask {
+ /* 全屏覆盖 */
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ /* 半透明黑色背景，遮挡底层 */
+ background: rgba(0, 0, 0, 0.7);
+ /* 层级高于底层（根据实际调整z-index） */
+ z-index: 999;
+}
+```
+
+#### 构建模态框内容容器（承载交互内容）
+
+##### 核心要求
+
+在遮罩层内定义合适大小的盒子作为交互消息容器，通过定位确定位置（通常居中）。
+
+##### 具体实现
+
+**CSS 样式**：给内容容器设置尺寸、背景、圆角等样式，绝对 / 弹性定位居中：
+
+```css
+/* 模态框内容容器 */
+.modal-content {
+ /* 绝对定位 */
+ position: absolute;
+ /* 水平垂直居中 */
+ /* 还可通过 position: absolute + top: 50% + left: 50%
+ transform: translate(-50%, -50%)实现居中。 */
+ left: 50%;
+ top: 50%;
+ margin-left: calc(-400px /2);
+ margin-top: calc(-250px /2);
+ /* 交互消息容器大小 */
+ width: 400px;
+ height: 250px;
+ /* 其余美化样式 */
+ background-color: rgb(255, 255, 255);
+ border-radius: 5px;
+ z-index: 1000;
+}
+```
+
+#### 类名控制显隐与内容切换
+
+##### 核心要求
+
+- 初始化（onload）时给模态框加 `hide` 类隐藏；
+- 触发事件（如点击按钮）时移除 `hide` 类显示；
+- 通过 `show` 类（或多类名）控制模态框内不同交互内容的显示。
+
+##### 具体实现
+
+**定义显隐类名**：
+
+```css
+/* 显示模态框的类 */
+.show {
+ display: block;
+}
+
+/* 隐藏模态框的类（初始默认） */
+.hide {
+ display: none;
+}
+```
+
+**JS 控制显隐与内容切换**：开发中往往只需要.hide和.show其中一个类就可以达到隐藏或显示的效果，以下是只使用.hide类的示例
+
+```javascript
+ // 1. 初始化：给遮罩层加hide类隐藏
+ document.addEventListener('DOMContentLoaded', () => {
+ const modalMask = document.getElementById('modalMask');
+ modalMask.classList.add('hide');
+ });
+
+ // 2. 打开模态框：移除hide类即可显示
+ const openModalBtn = document.getElementById('显示开关');
+ openModalBtn.addEventListener('click', () => {
+ const modalMask = document.getElementById('modalMask');
+ modalMask.classList.remove('hide');
+ // 如果有内部内容切换，同理：移除hide类显示
+ document.querySelector('.content-item.login').classList.remove('hide');
+ });
+
+ // 3. 关闭模态框：添加hide类即可隐藏
+ function closeModal() {
+ const modalMask = document.getElementById('modalMask');
+ modalMask.classList.add('hide');
+ // 内部内容如需隐藏，加hide类即可
+ document.querySelector('.content-item.login').classList.add('hide');
+ }
+
+ // 4.绑定关闭事件
+ const closeModalBtn = document.getElementById('关闭开关');
+ const modalMask = document.getElementById('modalMask');
+ closeModalBtn.addEventListener('click', closeModal);
+ modalMask.addEventListener('click', (e) => {
+ if (e.target === modalMask) closeModal();
+ });
+```
+
+### 关键细节与最佳实践
+
+**层级控制**：遮罩层 `z-index` 需高于页面所有底层内容（建议 999+），内容容器 `z-index` 高于遮罩层，避免被遮挡。
+
+**阻止底层滚动**：模态框显示时，给 `body` 添加 `overflow: hidden`，防止底层页面滚动：关闭时移除该类
+
+```css
+body.modal-open {
+ overflow: hidden;
+}
+```
+
+## 作业
+
+### 一个用于渲染页面的前端与其样式
+
+#### HTML
+
+```html
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale = 1.0">
+ <title>博客
+
+
+
+
+
+
+
+
+
+
+
博客列表
+
+
+
+
+
+
+ | 序号 |
+ 标题 |
+ 内容摘要 |
+ 作者 |
+ 发布日期 |
+ 操作 |
+
+
+
+
+
+
+
+ | ${item.id} |
+ ${item.title} |
+ ${item.summary} |
+ ${item.author} |
+ ${item.published_at} |
+
+
+ |
+
`
+ });
+ $('#blog-table-body').append(str)
+ console.log(data);
+ })
+ .catch(err => console.error(err));
+})
+
+//删除数据
+$('#blog-table-body').on('click', '.delete-button', function () {
+ const postId = $(this).closest('tr').attr('id').replace('blog', '')
+ let urlDelete = `https://api.9ihub.com/api/posts/${postId}`
+ console.log(postId);
+ fetch(urlDelete, {
+ method: 'DELETE'
+ })
+ .then(res => {
+ if (res.ok) {
+ console.log('deleted');
+ $(`#blog${postId}`).remove()
+ }
+ else console.error('delete failed');
+ })
+ .catch(err => console.error(err));
+})
+
+//添加数据
+$('.add-button').on('click', function () {
+ $('#mask-layer').addClass('show')
+ $('.add').addClass('show')
+ $('body').addClass('hidden')
+})
+$('#add-sure').on('click', function () {
+ let newTitle = $('#add-title').val()
+ let newSummary = $('#add-summary').val()
+ let newAuthor = $('#add-author').val()
+ let addObj = ''
+ fetch(url, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ title: newTitle,
+ summary: newSummary,
+ author: newAuthor,
+ published_at: '2025-12-18T09:37:00Z'
+ })
+ })
+ .then(res => res.json())
+ .then(created => {
+ addObj = `
+ | ${created.id} |
+ ${newTitle} |
+ ${newSummary} |
+ ${newAuthor} |
+ ${created.published_at} |
+
+
+ |
+
`;
+ $('#blog-table-body').append(addObj);
+ }
+ )
+ .catch(err => console.error(err));
+ closeAddModalBox()
+ $('#add-title').val('')
+ $('#add-summary').val('')
+ $('#add-author').val('')
+})
+$('#add-cancel').on('click', function() {
+ $('#mask-layer').removeClass('show')
+ $('.add').removeClass('show')
+ $('body').removeClass('hidden')
+})
+
+//编辑数据
+$('#blog-table-body').on('click', '.edit-button', function () {
+ $('#mask-layer').addClass('show')
+ $('.update').addClass('show')
+ $('body').addClass('hidden')
+})
+let updateId = null
+function blogId(obj, id) {
+ updateId = id
+ console.log($(obj).data('id'));
+}
+$('#update-sure').on('click', function () {
+ let postId = updateId
+ let urlPut = `https://api.9ihub.com/api/posts/${postId}`
+ let newTitle = $('#update-title').val()
+ let newSummary = $('#update-summary').val()
+ let newAuthor = $('#update-author').val()
+ fetch(urlPut, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ title: newTitle,
+ summary: newSummary,
+ author: newAuthor,
+ published_at: new Date().toISOString()
+ })
+ })
+ .then(res => res.json())
+ .then(updated => {
+ let putObj = `
+ | ${updated.id} |
+ ${newTitle} |
+ ${newSummary} |
+ ${newAuthor} |
+ ${updated.published_at} |
+
+
+ |
+
`;
+ $(`#blog${postId}`).replaceWith(putObj)
+ })
+ .catch(err => console.error(err));
+ closeUpdateModalBox()
+})
+$('#update-cancel').on('click', function() {
+ $('#mask-layer').removeClass('show')
+ $('.update').removeClass('show')
+ $('body').removeClass('hidden')
+})
+
+
+
+
+
+```
+
diff --git "a/\351\231\210\346\200\235\345\223\262/20251225-js\346\234\215\345\212\241\351\203\250\347\275\26201.md" "b/\351\231\210\346\200\235\345\223\262/20251225-js\346\234\215\345\212\241\351\203\250\347\275\26201.md"
new file mode 100644
index 0000000000000000000000000000000000000000..94f2d7f8ae8126708f963073fd33cdf210400ef8
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251225-js\346\234\215\345\212\241\351\203\250\347\275\26201.md"
@@ -0,0 +1,142 @@
+## 笔记
+
+### 一、部署前的核心准备
+
+#### 1. 服务器准备
+
+- 要求：带公网 IP 的 Linux 服务器（如 Ubuntu/CentOS）
+- 核心作用：存放网站程序、运行服务的硬件载体
+
+#### 2. 域名准备
+
+- 要求：已完成备案的域名（国内服务器必需）
+- 核心作用：让用户通过易记的域名访问网站，而非复杂的 IP 地址
+
+### 二、服务器基础操作（Linux 常用命令）
+
+#### 1. 登录服务器
+
+| 方式 | 说明 |
+| ------ | ------------------------------------------------- |
+| telnet | 上古时期协议，安全性低，不推荐 |
+| SSH | 现代主流方式，命令示例：`ssh 用户名@服务器公网IP` |
+
+#### 2. 文件 / 目录管理
+
+| 操作 | 命令 | 说明 |
+| --------------- | ---------------- | ---------------------------------------------------- |
+| 创建空文件 | `touch 文件名` | 例：`touch index.html` |
+| 创建 / 编辑文件 | `vim 文件名` | 例：`vim index.html`（按 i 编辑，Esc+:+wq 保存退出） |
+| 创建文件夹 | `mkdir 文件夹名` | 例：`mkdir /var/www/abc.liing.top` |
+| 切换目录 | `cd 目录路径` | 例：`cd /var/www/abc.liing.top` |
+| 列出目录内容 | `ls` | 查看当前目录文件；`ls -l`查看详细信息 |
+
+#### 3. 软件管理（apt 命令）
+
+| 操作 | 命令 | 说明 |
+| ---------- | ------------------------- | --------------------------------------------- |
+| 更新软件源 | `apt update` | 同步最新软件包列表（操作前先执行） |
+| 安装软件 | `apt install 软件名 -y` | 例：`apt install nginx -y`（-y 自动确认安装） |
+| 更新软件 | `apt upgrade -y` | 更新已安装的软件包 |
+| 卸载软件 | `apt uninstall 软件名 -y` | 例：`apt uninstall nginx -y` |
+
+#### 4. 服务管理（systemctl 命令）
+
+| 操作 | 命令 | 说明 |
+| ------------ | -------------------------- | ---------------------------------------------------- |
+| 查看服务状态 | `systemctl status 服务名` | 例：`systemctl status nginx` |
+| 启动服务 | `systemctl start 服务名` | 例：`systemctl start nginx` |
+| 停止服务 | `systemctl stop 服务名` | 例：`systemctl stop nginx` |
+| 重启服务 | `systemctl restart 服务名` | 例：`systemctl restart nginx` |
+| 设置自启动 | `systemctl enable 服务名` | 例：`systemctl enable nginx`（服务器重启后自动运行） |
+
+### 三、域名解析（域名绑定）
+
+#### 1. 核心概念
+
+- 域名解析：将易记的域名指向服务器公网 IP 的过程（让用户输入域名能找到对应服务器）
+- IP 地址：网络中服务器的唯一标识，是解析的核心目标
+
+#### 2. 操作步骤
+
+1. 登录域名服务商后台（如阿里云、腾讯云）
+2. 找到 “域名解析” 模块，添加解析记录
+3. 记录类型选 “A 记录”，主机记录填二级域名（如www），记录值填服务器公网 IP
+4. 保存解析，等待生效（通常 5-10 分钟）
+
+### 四、Nginx 部署网站（核心步骤）
+
+#### 1. 安装 Nginx
+
+```bash
+# 更新软件源
+apt update
+# 安装Nginx
+apt install nginx -y
+# 验证安装（查看状态）
+systemctl status nginx
+```
+
+#### 2. 配置 Nginx
+
+##### （1）配置文件位置
+
+- 核心目录：`/etc/nginx/conf.d/`（推荐在此目录创建自定义配置文件）
+- 文件名规范：建议以域名命名，例：`www.lhchen.asia.conf`
+
+##### （2）创建配置文件
+
+```bash
+# 新建配置文件
+vim /etc/nginx/conf.d/www.lhchen.asia.conf
+```
+
+##### （3）配置文件内容（基础版）
+
+```nginx
+server {
+ # 监听80端口（HTTP协议）
+ listen 80;
+ # 绑定的域名
+ server_name www.lhchen.asia;
+
+ # 网站根目录配置
+ location / {
+ # 网站文件存放路径
+ root /var/www/www.lhchen.asia;
+ # 默认首页文件
+ index index.html;
+ }
+}
+```
+
+#### 3. 准备网站文件
+
+```bash
+# 创建网站根目录
+mkdir -p /var/www/www.lhchen.asia
+# 创建测试首页文件
+touch /var/www/www.lhchen.asia/index.html
+# 编辑首页内容（示例）
+echo "Hello, My Website!
" > /var/www/www.lhchen.asia/index.html
+```
+
+#### 4. 重启 Nginx 生效配置
+
+```bash
+systemctl restart nginx
+```
+
+### 五、可选配置：SSL 证书（HTTPS）
+
+- 作用：加密网站通信，提升安全性，浏览器显示 “锁” 图标
+- 部署方式：
+ 1. 申请免费证书（如 Let's Encrypt）
+ 2. 将证书文件上传至服务器
+ 3. 修改 Nginx 配置，监听 443 端口并配置证书路径
+
+### 总结
+
+1. 部署网站核心流程：服务器准备 → 域名解析 → 安装 Web 服务（Nginx） → 配置站点 → 上传网站文件 → 验证访问。
+2. Linux 核心操作：掌握 SSH 登录、文件 / 目录管理、apt 软件安装、systemctl 服务管理是基础。
+3. Nginx 关键：配置文件需绑定域名和网站根目录，修改后必须重启服务才能生效。
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251226-js\346\234\215\345\212\241\351\203\250\347\275\26202.md" "b/\351\231\210\346\200\235\345\223\262/20251226-js\346\234\215\345\212\241\351\203\250\347\275\26202.md"
new file mode 100644
index 0000000000000000000000000000000000000000..56a921dbce1f1ea109a9ad6f7f61a3823e11c2bd
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251226-js\346\234\215\345\212\241\351\203\250\347\275\26202.md"
@@ -0,0 +1,7 @@
+## 笔记
+
+ 俄罗斯方块
+
+## 作业
+
+ 俄罗斯方块
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\345\223\262/20251229-\347\273\203\344\271\240.md" "b/\351\231\210\346\200\235\345\223\262/20251229-\347\273\203\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\351\231\210\346\200\235\345\223\262/20251231-\347\273\203\344\271\240.md" "b/\351\231\210\346\200\235\345\223\262/20251231-\347\273\203\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391