diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.10 - \345\210\235\350\257\206 JavaScript.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.10 - \345\210\235\350\257\206 JavaScript.md" new file mode 100644 index 0000000000000000000000000000000000000000..3b2c6e7859691e625db6b6e01339c9cef5d21f58 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.10 - \345\210\235\350\257\206 JavaScript.md" @@ -0,0 +1,98 @@ +# 2025.11.10_课堂笔记 - 初识 JavaScript + +## 基础关系 + +**HTML**：结构 +**CSS**：样式 +**JavaScript**：功能 +> 注意：JavaScrip 在语法上区分大小写 + +## 引入方式 + +- 常见方式 + + 1. 页面内部写法 (Inline Script) + > `` + 2. 引入外部 JS 文件 (External Script) + > `` + > 这是目前主流的方法，代码整洁且可复用 + 3. 标签内部事件写法 (Inline Event) + > `` + > 直观，但混杂 + +- 位置示例 + + ```html + + + + + + Document + + + + + + + + ``` + +## 练习 + +### 练习一：输出老子的名言 + +**页面预览：** + +**代码示例：** + +```html + + + + + + + 名言 + + + + + + + + +``` + +### 练习二：明日学院官网地址 + +**页面预览：** + +**代码示例：** + +```html + + + + + + + 明日学院 + + + + + + + +``` + +```JS +alert("http://www.mingrisoft.com"); +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.12 - \345\217\230\351\207\217\344\270\216\345\270\270\351\207\217 & \350\277\220\347\256\227\347\254\246.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.12 - \345\217\230\351\207\217\344\270\216\345\270\270\351\207\217 & \350\277\220\347\256\227\347\254\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..44b10e1bc8370e20b3fbf247c59f8014674fd45c --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.12 - \345\217\230\351\207\217\344\270\216\345\270\270\351\207\217 & \350\277\220\347\256\227\347\254\246.md" @@ -0,0 +1,158 @@ +# 2025.11.12_课堂笔记 - 变量与常量 & 运算符 + +## 变量与常量 + +1. **变量 ``let``**：赋值过一次之后可以二次赋值**覆盖**，最常用。 +2. **常量 ``const``**：不能重新赋值，存放不会/不容许改变的数据 +3. ``var``：老古董，没有块级作用域经常产生问题，不推荐使用。 + +## 数据类型 + +1. **数字 Number：**``let age = 18;`` +2. **字符串 String（文本）：**``let name = "Joy";`` +3. **布尔 Boolean（true / false）：** ``let isLogin = false;`` +4. **空值 null（故意留空的盒子）：**``let car = null;`` +5. **未定义 undefined（没放东西）：**``let x;`` + +## 运算符 + +### 常见运算符：``+ - * / %`` + +例如： + +```js +let a = 10; +let b = 3; +console.log(a % b); // 取余：10 除以 3 余 1 +``` + +### 自增、自减 + +```js +n++; // 等于 n = n + 1; +n--; // 等于 n = n - 1; +``` + +### 复合赋值 + +```js +n += 1; // 等于 n = n + 1 +n -= 2; // 等于 n = n - 2 +n *= 3; // 等于 n = n * 3 +``` + +## 练习 + +### 练习一：珠穆朗玛峰 + +**页面预览：** + +**代码示例：** + +```JS +document.writeln("珠穆朗玛峰的高度是8848.86m"); +``` + +### 练习二：转义路径 + +**页面预览：** + +**代码示例：** + +```JS +document.writeln("E:\\JavaScript\\Code\\demo"); +``` + +### 练习三：俄罗斯国土面积 + +**页面预览：** + +**代码示例：** + +```JS +let mianJi = 17100000; +document.writeln("俄罗斯是世界上国土面积最大的国家，其面积为" + mianJi + "km2"); +``` + +### 练习四：个人信息 + +**页面预览：** + +**代码示例：** + +```JS +let name = "郭靖"; +let sex = "男"; +let old = 20; +let height = 1.77; +let wuGong = "九阳真经、降龙十八掌"; +document.writeln("个人信息
") +document.writeln("姓名：" + name + "
") +document.writeln("性别：" + sex + "
") +document.writeln("年龄：" + old + "
") +document.writeln("身高：" + height + "m
") +document.writeln("武功：" + wuGong + "
") +``` + +### 练习五：计算本息合计 + +**页面预览：** + +**代码示例：** + +```JS +let year = 3; +let liLv = 2.75; +let cunKuan = 10000; +document.writeln(`存款${year}年后的本息合计为${cunKuan + cunKuan * 2.75 * 3}`) +``` + +### 练习六：成绩 + +**页面预览：** + +**代码示例：** + +```JS +let score = 65; +console.log(score >= 60 ? "及格" : "不及格") +``` + +### 练习七：面积 + +**页面预览：** + +**代码示例：** + +```JS +console.log((30 + 50) * 30 / 2) +``` + +## 综合测试 + +**页面预览：** + +### 综测一：输出九阳神功心法 + +```JS +console.log("他强由他强，清风拂山冈\n他横任他横，明月照大江\n他自狠来他自恶，我自一口真气足\n ————《九阳神功》") +``` + +### 综测二：计算员工实际收入 + +```JS +let xing = 6500 +shoru = (xing - 500) - (xing - 500 - 5000) * 0.03 +document.write("

该员工的实际收入为" + shoru + "元") +``` + +### 综测三：判断2024年2月的天数 + +```JS +let year = 2024; +if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) { + document.write(`

${year} 的 2 月有 29 天

`); +} else { + document.write(`

${year} 的 2 月有 28 天

`); +} +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.13 - \346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.13 - \346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..0956a21a83ff8c72009c251bb64c64a3e5ac525b --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.13 - \346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,151 @@ +# 2025.11.13_课堂笔记 - 流程控制语句 + +## 条件判断语句 (``if`` / ``else if`` / ``else``) + +**当程序需要“根据条件决定走哪条路”时，就会用到它们。** + +```JS +if (条件1) { + // 条件1为 true 时执行 +} else if (条件2) { + // 条件2为 true 时执行 +} else { + // 上面都不满足就执行这里 +} +``` + +```JS +let score = 85; + +if (score >= 90) { + console.log("优秀"); +} else if (score >= 60) { + console.log("及格"); +} else { + console.log("不及格"); +} +``` + +## switch 语句（大量多选一的情况） + +**当有多个相等值要比较时，switch 更清晰。** + +```JS +switch (变量) { + case 值1: + 执行代码; + break; + case 值2: + 执行代码; + break; + default: + 执行默认代码; +} +``` + +```JS +let day = 3; + +switch (day) { + case 1: + console.log("星期一"); + break; + case 2: + console.log("星期二"); + break; + case 3: + console.log("星期三"); + break; + default: + console.log("未知日期"); +} +``` + +## for 循环（重复执行固定次数） + +**最常见的循环结构，用于“执行某件事 N 次”。** + +```JS +for (初始化; 条件; 每次循环执行的操作) { + // 循环体 +} +``` + +```JS +for (let i = 1; i <= 5; i++) { + console.log(i); // 打印 1-5 +} +``` + +## while 循环（条件满足就一直执行） + +**只要条件成立，就一直执行下去，适合次数不确定的情况。** + +```JS +while (条件) { + // 循环体 +} +``` + +```JS +let i = 1; +while (i <= 5) { + console.log(i); + i++; + // 打印 1-5 +} +``` + +### 变体：do...while（至少执行一次） + +**与 while 的区别：先执行一次，再判断条件。** + +```JS +do { + // 先执行 +} while (条件); +``` + +```JS +let i = 1; + +do { + console.log(i); + i++; +} while (i <= 5); +// 不管怎样，至少输出一次。 +``` + +## break 和 continue + +### break：直接跳出整个循环 + +**例如找到了目标，就不想继续循环了：** + +```JS +for (let i = 1; i <= 10; i++) { + if (i === 5) break; // 输出到 4 就停 + console.log(i); +} +``` + +### continue：跳过当前这一圈，继续下一圈 + +```JS +for (let i = 1; i <= 5; i++) { + if (i === 3) continue; // 跳过 3 + console.log(i); +} +``` + +## 总结 + +| 语句 | 用途 | +| ---------- | ---------------- | +| if / else | 选择“哪条路” | +| switch | 处理多个相等情况 | +| for | 循环固定次数 | +| while | 条件驱动的循环 | +| do...while | 至少执行一次 | +| break | 结束循环 | +| continue | 跳过当前循环 | \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.14 - \346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.14 - \346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..6514aa1f0a43a151eb2bbec9d718686d54213e16 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.14 - \346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,223 @@ +## 笔记 +无 + +## 代码 +![](./imgs/20251114-效果1.png) +``` + + + + + + + +``` +![](./imgs/20251114-效果2.png) +``` + + + + + + +``` +![](./imgs/20251114-效果3.png) +``` + + + + + + +``` +![](./imgs/20251114-效果4.png) +``` + let pay=3000; + let pay1=50; + let year=1; + let sum; + do{ + + + sum=pay+(year-1)*pay1; + document.write("第"+year+"年的实际工资为："+sum+"元"+"
"); + year++; + + }while(year<=5); + + +``` +![](./imgs/20251114-效果5.png) +``` + + +``` +![](./imgs/20251114-效果6.png) +``` + + + + + + Document + + + + + + +``` +![](./imgs/20251114-效果7.pngg) +``` + + + + + Document + + + + + + +``` +![](./imgs/20251114-效果8.png) +``` + + + + + Document + + + + + + + + ``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.19 - \345\207\275\346\225\260.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.19 - \345\207\275\346\225\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..8e0f2a491913e7528dda5286b446988bf6855228 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.19 - \345\207\275\346\225\260.md" @@ -0,0 +1,115 @@ +## 笔记 + +- 1. 函数写法 + function square(number) { + + } + + +## 代码 + +1. + +![](./imgs/20251119-效果1.png) +``` + + + + + Document + + + + + + + + +``` + +2. +![](./imgs/20251119-效果2.png) +``` + + + + + Document + + + + + + + +``` +3. +![](./imgs/20251119-效果3.png) + +``` + + + + + + Document + + + + + + + +``` + +4. +![](./imgs/20251119-效果4.png) + +``` + + + + + + Document + + + + + + +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.20 - \345\207\275\346\225\260.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.20 - \345\207\275\346\225\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..8f884c2139da672728ed277ecb74c6d87d9163b2 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.20 - \345\207\275\346\225\260.md" @@ -0,0 +1,216 @@ +## 笔记 + - 1. 函数的嵌套调用 + - 2. 函数内部调用其他函数，按顺序执行 + + + ## 代码 + + 5. + + ！[](./imgs/20251120-效果1.png) + ``` + + + + + Document + + + + + + + ``` + + 6. + ![](./imgs/20251110-效果2.png) + + ``` + + + + + Document + + + + + + + + ``` + + 7. + ![](./imgs/20251120-效果3.png) + ``` + + + + + Document + + + + + + + + ``` + + 8. + ![](./imgs/20251120-效果4.png) + + + ``` + + + + + Document + + + + + + + + ``` + + + 9. + ![](./imgs/20251120-效果5.png) + + ``` + + + + + Document + + + + + + + + ``` + 10. + + ![](./imgs/20251120-效果6.png) + + + ``` + + + + + Document + + + + + + + ``` + + 11. + ![](./imgs/20251120-效果7.png) + +``` + + + + + Document + + + + + + + + +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.21 - \345\257\271\350\261\241.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.21 - \345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..e56a6a503f18a4cbec810ce1b93d134c6109a8a1 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.21 - \345\257\271\350\261\241.md" @@ -0,0 +1,217 @@ +## 笔记 + +- 1. 创建： new Date() （当前时间）、 new Date(年,月,日[,时,分,秒]) 、 new Date("日期串") +- 2. 方法： getFullYear() / getMonth()+1 等（获取时间）； setXXX() （设置）； toLocaleString() （本地格式） + + + +## 代码 + +1. +![](./imgs/20251121-效果1.png) + +``` + + + + + Document + + + +

日期小时差计算器

+

开始日期:2023年5月1日

+

结束日期:2023年6月1日

+

两个日期之间的间隔小时数为:

+ + + + + + ``` +2. + ![](./imgs/20251121-效果2.png) + + ``` + + + + + + + Document + + + + +

高考倒计时

+

+ + + + + + + + ``` +3. + ![](./imgs/20251121-效果3.png) + ``` + + + + + + Document + + + + +
+ + + + + + + ``` + + 4. + ![](./imgs/20251121-效果4.png) + ``` + + + + + + Document + + + + +
+ + + + + + + + + ``` +5. +![](./imgs/20251121-效果5.png) + +``` + + + + + Document + + + +
+ + + + + +``` diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.24 - js\346\225\260\347\273\204.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.24 - js\346\225\260\347\273\204.md" new file mode 100644 index 0000000000000000000000000000000000000000..20dd5185ca5ab21a1868417929fe7ec45d4a25e2 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.24 - js\346\225\260\347\273\204.md" @@ -0,0 +1,72 @@ +## 笔记 +数组的增删改查 +```bash +- 增加元素 +尾部添加：push() +头部添加：unshift() +指定位置插入：splice() + +- 删除元素 +尾部删除：pop() +头部删除：shift() +指定位置删除：splice() +清空数组：修改 length 为 0 或 splice(0) + +- 修改元素 +通过索引直接赋值，或使用 splice() 替换指定位置元素。 + +- 查找元素 +按值查找索引：indexOf()、lastIndexOf() +按条件查找元素：find() +按条件查找索引：findIndex() +判断是否包含元素：includes() +``` + +## 练习 + +第一题 +```html + + + + + + + Document + + + + + + + + +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.26 - js\351\233\206\345\220\210.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.26 - js\351\233\206\345\220\210.md" new file mode 100644 index 0000000000000000000000000000000000000000..f838e71b174108d40f8a6b9d655aa669d345c189 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.26 - js\351\233\206\345\220\210.md" @@ -0,0 +1,63 @@ +## 笔记 +Set 集合 +```bash +- 创建方式 +通过 new Set() 构造函数创建，可传入数组或类数组对象初始化。 +- 常用属性 +size：返回 Set 中元素的数量。 +- 核心方法 +add(value)：添加元素，若已存在则不操作，返回 Set 本身。 +has(value)：判断是否包含指定元素，返回布尔值。 +delete(value)：删除指定元素，成功返回 true，失败返回 false。 +clear()：清空所有元素。 +keys()：返回包含所有元素的迭代器对象（与 values() 相同）。 +values()：返回包含所有元素的迭代器对象。 +entries()：返回包含所有元素的迭代器对象（每个元素为 [value, value]）。 +forEach(callback, thisArg])：遍历每个元素，执行回调函数。 +``` + +## 练习 + +第一题 +```html + + + + + + 国内手机销量排行榜 + + +
+ + + +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.27 - string\345\257\271\350\261\241.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.27 - string\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..7fc3aa03bf7cfdef4c411d931be8f448dfd91d5e --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.27 - string\345\257\271\350\261\241.md" @@ -0,0 +1,131 @@ +## 笔记 + +```bash + +- charAt()方法 +-- 可以返回字符串中指定位置的字符。 +-- stringObject.charAt(index) +- indexOf()方法 +-- 可以返回某个子字符串在字符串中首次出现的位置 +-- stringObject.indexOf(substring,startindex) +- lastIndexOf()方法 +-- 可以返回某个子字符串在字符串中最后出现的位置 +-- stringObject.lastIndexOf(substring,startindex) + +``` + +## 练习 + +第一题 +```html + + + + + + + Document + + + + + + + +``` + +第二题 +```html + + + + + + + Document + + + + + + + +``` + +第三题 +```html + + + + + + + Document + + + + + + + +``` + +第四题 +```html + + + + + + + Document + + + + + + + +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.11.28 - js\345\274\202\345\270\270.md" "b/\346\235\216\345\256\266\345\222\214/2025.11.28 - js\345\274\202\345\270\270.md" new file mode 100644 index 0000000000000000000000000000000000000000..46b3c7494d7b7b1cba3d57d6fc857c54054552cd --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.11.28 - js\345\274\202\345\270\270.md" @@ -0,0 +1,65 @@ +## 笔记 + +- 错误类型 +```bash +- JavaScript 中的错误主要分为以下几类： +- SyntaxError：语法错误（如少写分号、括号不匹配） +- ReferenceError：引用未定义的变量 +- TypeError：类型错误（如调用非函数的变量） +- RangeError：范围错误（如数组长度为负数） +- URIError：URI 处理错误（如 decodeURI 传入无效参数） +- EvalError：eval () 函数执行错误（ES5 后很少见） +- 自定义错误：通过 Error 类扩展 + +``` +## 练习 + +第一题 +```html + + + + + + + Document + + + + + + + +``` + +第二题 +```html + + + + + + + Document + + + + + + + +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.01 - js\344\272\213\344\273\266\345\237\272\347\241\200.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.01 - js\344\272\213\344\273\266\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..059377e593f830fde419a1f377c730512494e767 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.01 - js\344\272\213\344\273\266\345\237\272\347\241\200.md" @@ -0,0 +1,37 @@ +## 笔记 +- 鼠标事件 +```js +// 单击 +element.onclick = function() { + console.log('元素被点击了'); +}; + +// 双击 +element.ondblclick = function() { + console.log('元素被双击了'); +}; + +// 右键菜单 +element.oncontextmenu = function(event) { + event.preventDefault(); // 阻止浏览器右键菜单 + console.log('右键被点击了'); + return false; +}; +// 鼠标移入（会冒泡，进入子元素也会触发） +element.onmouseover = function() { + console.log('鼠标移入元素'); +}; + +// 鼠标移出（会冒泡，离开子元素也会触发） +element.onmouseout = function() { + console.log('鼠标移出元素'); +}; + +// 鼠标移入（不冒泡，只对本元素有效） +element.onmouseenter = function() { + console.log('鼠标进入元素'); +}; + +``` + +## 练习 \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.03 - js\344\272\213\344\273\266\345\237\272\347\241\2002.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.03 - js\344\272\213\344\273\266\345\237\272\347\241\2002.md" new file mode 100644 index 0000000000000000000000000000000000000000..36df649ed5d9edfbdc1b6ac9645885748bdae1a1 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.03 - js\344\272\213\344\273\266\345\237\272\347\241\2002.md" @@ -0,0 +1,139 @@ +## 笔记 + +``` bash +- 一次性事件 +element.addEventListener('click', handler, { once: true }); + +- 自动移除的事件委托 +element.addEventListener('click', handler, { capture: true, passive: true }); + +- 可中止的事件监听 +const controller = new AbortController(); +element.addEventListener('click', handler, { signal: controller.signal }); +controller.abort(); + +``` + +## 练习 + +第一题 +```js +const answer = 'C'; +const resultBox = document.getElementById('result'); + +document.addEventListener('keydown', e => { + const key = e.key.toUpperCase(); + if (['A','B','C','D'].includes(key)) { + if (key === answer) { + resultBox.textContent = '答对了！'; + resultBox.style.color = 'green'; + } else { + resultBox.textContent = '答错了，正确答案是 ' + answer; + resultBox.style.color = 'red'; + } + } +}); + +``` + +第二题 +```js + + window.onload = function () { + const now = new Date(); + const currentTime = now.toLocaleString('zh-CN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + hour12: false + }); + console.log('当前时间：', currentTime); + document.body.innerText = currentTime; + } +``` + +第三题 +```js + +const inputFields = document.querySelectorAll('.input-field') + inputFields.forEach(input => { + input.addEventListener('focus', function () { + this.style.borderColor = 'green' + + }) + + input.addEventListener('blur', function () { + this.style.borderColor = '' + }) + }) + +``` + + +第四题 +```js + +const yearSel = document.getElementById('yearSel'); + const currentYear = new Date().getFullYear(); + for (let y = 1900; y <= currentYear; y++) { + yearSel.add(new Option(y + ' 年', y)); + } + yearSel.value = currentYear; + + const monthSel = document.getElementById('monthSel'); + for (let m = 1; m <= 12; m++) { + monthSel.add(new Option(m + ' 月', m)); + } + monthSel.value = 1; + function showBirth() { + const y = yearSel.value; + const m = monthSel.value.padStart(2, '0'); + document.getElementById('result').textContent = + `您的出生年月是 ${y} 年 ${m} 月`; + } + +``` + + +第五题 + + +```js + + const box = document.getElementById('box'); + + + function setTitle(msg) { + document.title = msg; + } + + + box.ondragover = (e) => { + e.preventDefault(); + setTitle('ondragover：拖动元素正在目标上方'); + box.classList.add('dragover'); + }; + + box.ondragleave = () => { + setTitle('ondragleave：拖动元素已离开目标'); + box.classList.remove('dragover'); + }; + + box.ondrop = (e) => { + e.preventDefault(); + box.classList.remove('dragover'); + + const files = e.dataTransfer.files; + if (files.length && files[0].type.startsWith('image/')) { + setTitle('ondrop：图片已放下 → ' + files[0].name); + } else { + setTitle('ondrop：放下的不是图片'); + } + }; + + setTitle('等待拖放图片…'); + +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.04 - js\344\270\255Document\345\257\271\350\261\241.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.04 - js\344\270\255Document\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..cfad3e23d14eee82c64dfdc708cecc62db5995aa --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.04 - js\344\270\255Document\345\257\271\350\261\241.md" @@ -0,0 +1,153 @@ +## 笔记 +```bash +//1. 修改样式 +const element = document.getElementById("myElement"); + +// 直接修改style属性 +element.style.color = "red"; +element.style.backgroundColor = "#f0f0f0"; + +// 添加/移除/切换CSS类 +element.classList.add("active"); +element.classList.remove("inactive"); +element.classList.toggle("hidden"); +element.classList.contains("active"); // 检查是否包含类 + +// 获取计算样式 +const computedStyle = window.getComputedStyle(element); +console.log(computedStyle.color); + +//2. 修改属性和内容 +const link = document.querySelector("a"); +``` +## 练习 + + +第一题 +```js + + + + +训练1：背景色前景色互换 + + + +
山不在高，有仙则名。
+ + + + + + +``` + +第二题 + +```js + + + + + +训练2：逐个添加文字 + + + +
+ + + + + + +``` +第三题 + +```js + + + + + +综合练习2：弹出和关闭图片对话框 + + + +打开图片对话框 + +
+
+ 示例图 + +
+
+ + + + + +``` diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.05 - js\347\273\203\344\271\240.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.05 - js\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..8dd47cebccde1b7ce14521c73271c8bf962ec61f --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.05 - js\347\273\203\344\271\240.md" @@ -0,0 +1,93 @@ +## 笔记 + + + +## 练习 + + +第一题 +```js +let inputs = document.getElementsByTagName("input"); +for (let i = 0; i < inputs.length; i++) { + inputs[i].onfocus = function() { + this.style.border = "2px solid blue"; + }; + inputs[i].onblur = function() { + this.style.border = "1px solid gray"; + }; +} +``` + +第二题 +```js + +let dragImg = document.getElementById("dragImg"); +dragImg.ondragover = function(event) { + event.preventDefault(); + document.title = "ondragover: 经过目标区域"; +}; +dragImg.ondragleave = function() { + document.title = "ondragleave: 离开目标区域"; +}; +dragImg.ondrop = function(event) { + event.preventDefault(); + document.title = "ondrop: 放置到目标区域"; +}; + +``` + +第三题 +```js +function allowDrop(event) { + event.preventDefault(); +} +function drag(event) { + event.dataTransfer.setData("text", event.target.id); +} +function drop(event) { + event.preventDefault(); + let data = event.dataTransfer.getData("text"); + event.target.appendChild(document.getElementById(data)); +} + +``` + +第四题 +```js + +let btn = document.getElementById("testBtn"); +btn.onmousedown = function() { + this.style.backgroundColor = "green"; + this.style.color = "white"; +}; +btn.onmouseup = function() { + this.style.backgroundColor = ""; + this.style.color = ""; +}; +``` + + +第五题 +```js + + + +
+ + function getFileName() { + let fullURL = window.location.href; + let fileName = fullURL.substring(fullURL.lastIndexOf("/") + 1); + if (fileName.indexOf("?") !== -1) { + fileName = fileName.substring(0, fileName.indexOf("?")); + } + if (fileName === "") { + fileName = "index.html (默认首页)"; + } + let resultDiv = document.getElementById("result"); + resultDiv.innerHTML = + "完整URL: " + fullURL + "

" + + "文件名: " + fileName + ""; + } + window.onload = getFileName; + +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.10 - \346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.10 - \346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..11134fc10ff55578f0d9290e2b3ee2c3c43dfd65 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.10 - \346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" @@ -0,0 +1 @@ +\# JavaScript 文档对象模型（DOM）核心笔记 ## 一、DOM 基础概念 ### 1. 什么是 DOM DOM（Document Object Model）是浏览器将 HTML/XML 文档解析成的**树形结构**，把文档中的每个节点（标签、属性、文本等）转化为可被 JS 操作的对象，是 JS 操作网页内容的核心接口。 - 核心特点：跨平台、语言无关，浏览器内置实现，无需额外引入。 - 核心树结构：Document（根节点）→ Element（元素节点）→ Attribute（属性节点）→ Text（文本节点）。 ### 2. DOM 节点分类 | 节点类型 | 说明 | 示例 | |----------|---------------------|-----------------------| | 元素节点 | HTML 标签 | `
`、`` | | 文本节点 | 标签内的文本内容 | `div` 中的 `hello` | | 属性节点 | 标签的属性 | `id="txt"`、`class="box"` | | 文档节点 | 整个文档的根节点 | `document` 对象 | ## 二、DOM 核心操作 ### 1. 获取 DOM 元素（查询） #### （1）基础获取方法（常用） | 方法 | 说明 | 示例 | |-------------------------------|---------------------------------------|-------------------------------| | `getElementById(id)` | 通过 ID 获取唯一元素（返回单个元素）| `document.getElementById("txt")` | | `getElementsByTagName(tag)` | 通过标签名获取元素集合（HTMLCollection） | `document.getElementsByTagName("div")` | | `getElementsByClassName(cls)` | 通过类名获取元素集合（HTMLCollection） | `document.getElementsByClassName("box")` | | `querySelector(selector)` | 通过 CSS 选择器获取第一个匹配元素 | `document.querySelector("#txt .item")` | | `querySelectorAll(selector)` | 通过 CSS 选择器获取所有匹配元素（NodeList） | `document.querySelectorAll("input")` | #### （2）注意事项 - `getElementById` 是 `document` 专属方法，元素节点无此方法； - `querySelectorAll` 返回的 NodeList 是静态集合（不会随 DOM 变化自动更新），`getElementsByTagName` 返回的是动态集合； - 未找到元素时，返回 `null`（单个获取）或空集合（批量获取）。 ### 2. 创建/添加 DOM 节点 #### （1）创建节点 ```javascript // 创建元素节点 const div = document.createElement("div"); // 创建文本节点 const text = document.createTextNode("Hello DOM"); // 设置元素属性/内容 div.id = "newDiv"; div.className = "content"; div.textContent = "Hello DOM"; // 推荐（仅文本） div.innerHTML = "Hello DOM"; // 可解析 HTML（注意 XSS 风险） ``` #### （2）添加节点 | 方法 | 说明 | 示例 | |---------------------|-------------------------------|-----------------------| | `appendChild(node)` | 将节点添加到父元素末尾 | `parent.appendChild(div)` | | `insertBefore(new, old)` | 在指定节点前插入新节点 | `parent.insertBefore(div, oldNode)` | ### 3. 修改 DOM 节点 #### （1）修改元素属性 ```javascript const input = document.getElementById("txt"); // 直接修改内置属性 input.value = "新内容"; // 输入框值 input.src = "img.jpg"; // 图片地址 // 修改自定义属性（推荐用 dataset） input.dataset.id = "123"; // 对应 HTML 的 data-id="123" // 通用属性操作 input.setAttribute("class", "active"); // 设置属性 input.getAttribute("id"); // 获取属性 input.removeAttribute("disabled"); // 删除属性 ``` #### （2）修改样式 ```javascript // 行内样式（优先级高） input.style.color = "red"; input.style.border = "1px solid blue"; // 类名样式（推荐，分离样式与逻辑） input.classList.add("active"); // 添加类 input.classList.remove("active"); // 删除类 input.classList.toggle("active"); // 切换类 ``` #### （3）修改文本/HTML 内容 ```javascript const div = document.getElementById("box"); div.textContent = "纯文本内容"; // 仅文本，不解析 HTML div.innerHTML = "加粗文本"; // 解析 HTML 标签 ``` ### 4. 删除/替换 DOM 节点 ```javascript const parent = document.getElementById("parent"); const child = document.getElementById("child"); // 删除节点 parent.removeChild(child); // 替换节点 const newNode = document.createElement("p"); parent.replaceChild(newNode, child); // 直接删除自身（ES6+） child.remove(); ``` ## 三、DOM 事件处理 ### 1. 事件绑定方式 #### （1）内联绑定（HTML 标签内） ```html ``` - 缺点：HTML 与 JS 耦合，不利于维护。 #### （2）DOM 0 级绑定（元素属性） ```javascript const btn = document.getElementById("btn"); btn.onclick = function() { console.log("DOM 0 级事件"); }; // 移除事件 btn.onclick = null; ``` - 特点：一个元素同一事件只能绑定一个处理函数，后绑定会覆盖前一个。 #### （3）DOM 2 级绑定（事件监听） ```javascript const btn = document.getElementById("btn"); // 绑定事件 btn.addEventListener("click", handleClick); btn.addEventListener("click", () => { console.log("第二个点击事件"); }); // 移除事件（必须传同一个函数引用） btn.removeEventListener("click", handleClick); function handleClick() { console.log("DOM 2 级事件"); } ``` - 特点：支持绑定多个事件处理函数，可指定事件捕获/冒泡（第三个参数，默认 false 冒泡）。 ### 2. 事件对象（Event） 事件触发时自动传入处理函数的参数，核心属性/方法： | 属性/方法 | 说明 | |---------------------|---------------------------------------| | `target` | 触发事件的**原始元素**（最底层节点）| | `currentTarget` | 绑定事件的元素（this 指向）| | `preventDefault()` | 阻止事件默认行为（如表单提交、a 标签跳转） | | `stopPropagation()` | 阻止事件冒泡/捕获 | 示例： ```javascript const form = document.getElementById("form"); form.onsubmit = function(event) { event.preventDefault(); // 阻止表单默认提交 console.log(event.target); // 触发事件的元素（如提交按钮） }; ``` ### 3. 常见 DOM 事件 | 事件类型 | 示例 | 说明 | |----------|-----------------------|-----------------------| | 鼠标事件 | `click`、`mouseover` | 点击、鼠标悬浮 | | 表单事件 | `submit`、`reset`、`focus`、`blur` | 提交、重置、聚焦、失焦 | | 窗口事件 | `load`、`resize` | 页面加载、窗口大小调整 | ## 四、DOM 常用技巧与避坑 ### 1. 核心避坑点 #### （1）获取元素时机 JS 代码需在 DOM 加载完成后执行，否则获取不到元素： ```html
``` #### （2）避免滥用 innerHTML `innerHTML` 会解析 HTML 标签，存在 XSS 安全风险；纯文本内容优先用 `textContent`。 #### （3）循环操作 DOM 优化 批量创建节点时，先用 `DocumentFragment` 暂存，避免频繁操作 DOM 导致性能损耗： ```javascript const frag = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const li = document.createElement("li"); li.textContent = `选项 ${i}`; frag.appendChild(li); } document.getElementById("list").appendChild(frag); ``` ### 2. 常用技巧 #### （1）表单重置/提交控制 ```javascript // 重置确认（阻止默认重置） function confirmReset() { if (confirm("是否重置？")) { document.getElementById("txt").value = ""; return true; } return false; } // 表单提交验证 form.onsubmit = function(event) { event.preventDefault(); // 阻止默认提交 // 验证逻辑... }; ``` #### （2）动态生成下拉选项 ```javascript const select = document.getElementById("year"); // 循环生成年份选项 for (let i = 1999; i <= 2025; i++) { select.innerHTML += ``; } ``` #### （3）窗口大小监听 ```javascript // 实时获取窗口宽高 function getWindowSize() { console.log("宽度：", window.innerWidth); console.log("高度：", window.innerHeight); } window.addEventListener("resize", getWindowSize); getWindowSize(); // 初始化执行 ``` ## 五、DOM 核心总结 1. DOM 是 JS 操作网页的核心，核心是「获取-修改-添加-删除」节点； 2. 事件处理的核心是 `event` 对象，`preventDefault()` 阻止默认行为，`stopPropagation()` 阻止冒泡； 3. 性能优化：减少频繁 DOM 操作，优先用 `DocumentFragment`、`classList` 替代行内样式； 4. 安全注意：避免 `innerHTML` 处理用户输入，防止 XSS 攻击。 \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.11 - windows\345\257\271\350\261\241.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.11 - windows\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..b1273a7cb6b9ab440d6948ddcb18e72ab8ce043c --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.11 - windows\345\257\271\350\261\241.md" @@ -0,0 +1 @@ +\# JavaScript window 对象核心笔记 ## 一、window 基础概念 ### 1. 什么是 window 对象 `window` 是浏览器环境的**全局顶级对象**，代表当前浏览器窗口/标签页，所有浏览器内置的全局变量、函数、DOM 相关接口都挂载在 `window` 上。 - 核心特点： - 无需声明即可直接访问（如 `window.alert()` 可简写为 `alert()`）； - 每个浏览器标签页对应一个独立的 `window` 对象，互不干扰； - 既是全局作用域的顶层对象，也是 DOM 树的根节点 `document` 的宿主对象。 ### 2. window 与全局作用域的关系 在浏览器中，**全局变量/函数会自动成为 window 的属性/方法**： ```javascript // 声明全局变量 let name = "张三"; console.log(window.name); // 输出：张三 // 声明全局函数 function sayHi() { console.log("Hi"); } window.sayHi(); // 输出：Hi ``` > 注意：用 `let/const` 声明的全局变量虽在全局作用域，但不会成为 `window` 的可枚举属性（`var` 声明的会）。 ## 二、window 核心属性 ### 1. 文档相关 | 属性 | 说明 | 示例 | |-------------|---------------------------------------|-------------------------------| | `document` | 指向当前窗口的 DOM 根节点（核心）| `window.document.getElementById("txt")` | | `location` | 包含当前页面的 URL 信息，可修改实现跳转 | `window.location.href = "https://www.baidu.com"` | | `history` | 管理浏览器会话历史（前进/后退）| `window.history.back()`（后退一页） | | `screen` | 包含用户屏幕的尺寸信息 | `window.screen.width`（屏幕宽度） | ### 2. 窗口尺寸/位置 | 属性 | 说明 | 备注 | |---------------------|---------------------------------------|-------------------------------| | `innerWidth` | 窗口可视区域宽度（含滚动条）| 常用：获取当前窗口宽度 | | `innerHeight` | 窗口可视区域高度（含滚动条）| 常用：获取当前窗口高度 | | `outerWidth` | 浏览器窗口整体宽度（含边框/工具栏）| 区分：inner 是可视区，outer 是整个窗口 | | `outerHeight` | 浏览器窗口整体高度（含边框/工具栏）| | 示例：实时获取窗口尺寸 ```javascript function getWindowSize() { console.log("可视区宽度：", window.innerWidth); console.log("可视区高度：", window.innerHeight); } // 窗口大小变化时触发 window.addEventListener("resize", getWindowSize); ``` ### 3. 其他常用属性 | 属性 | 说明 | 示例 | |-------------|---------------------------------------|-------------------------------| | `navigator` | 包含浏览器/系统信息（如浏览器类型、版本） | `window.navigator.userAgent`（获取浏览器UA） | | `localStorage` | 本地存储（永久存储，除非手动删除）| `window.localStorage.setItem("name", "张三")` | | `sessionStorage` | 会话存储（仅当前标签页有效，关闭即清空） | `window.sessionStorage.getItem("name")` | | `console` | 控制台对象（调试用）| `window.console.log("调试信息")` | | `event` | 全局事件对象（非标准，推荐事件函数参数获取） | 不推荐直接用：`window.event.target` | ## 三、window 核心方法 ### 1. 弹窗类方法（常用交互） | 方法 | 说明 | 示例 | |---------------------|---------------------------------------|-------------------------------| | `alert(message)` | 弹出提示框（无返回值）| `window.alert("操作成功！")` | | `confirm(message)` | 弹出确认框（返回布尔值：确认→true，取消→false） | `const res = window.confirm("是否删除？")` | | `prompt(message, default)` | 弹出输入框（返回输入内容，取消→null） | `const val = window.prompt("请输入姓名", "张三")` | > 注意：弹窗方法会阻塞代码执行，直到用户操作完成；移动端体验差，尽量少用。 ### 2. 窗口控制方法 | 方法 | 说明 | 示例 | |---------------------|---------------------------------------|-------------------------------| | `open(url, name, params)` | 打开新窗口/标签页 | `window.open("https://baidu.com", "_blank", "width=500,height=300")` | | `close()` | 关闭当前窗口（仅对 `open` 打开的窗口有效） | `const newWin = window.open(); newWin.close()` | | `scrollTo(x, y)` | 滚动到页面指定位置 | `window.scrollTo(0, 0)`（回到顶部） | | `scrollBy(x, y)` | 相对当前位置滚动指定距离 | `window.scrollBy(0, 100)`（向下滚100px） | ### 3. 定时器方法（核心异步操作） #### （1）一次性定时器（setTimeout） ```javascript // 语法：setTimeout(回调函数, 延迟时间(ms), 回调参数) const timer = window.setTimeout((msg) => { console.log(msg); }, 1000, "延迟1秒执行"); // 取消定时器 window.clearTimeout(timer); ``` #### （2）周期性定时器（setInterval） ```javascript // 语法：setInterval(回调函数, 间隔时间(ms), 回调参数) let count = 0; const timer = window.setInterval(() => { count++; console.log("计数：", count); if (count >= 5) { window.clearInterval(timer); // 取消定时器 } }, 1000); ``` > 注意：定时器回调函数的 `this` 指向 `window`（严格模式下为 `undefined`）。 ### 4. 其他常用方法 | 方法 | 说明 | 示例 | |---------------------|---------------------------------------|-------------------------------| | `encodeURI/encodeURIComponent` | URL 编码（处理中文/特殊字符） | `window.encodeURI("https://百度.com")` | | `decodeURI/decodeURIComponent` | URL 解码 | `window.decodeURI(encodedUrl)` | | `parseInt/parseFloat` | 字符串转数字（全局方法，挂载在window） | `window.parseInt("123px")` // 123 | ## 四、window 常用事件 ### 1. 窗口生命周期事件 | 事件 | 说明 | 示例 | |---------------|---------------------------------------|-------------------------------| | `load` | 页面所有资源（图片、JS、CSS）加载完成 | `window.onload = () => { console.log("页面加载完成") }` | | `DOMContentLoaded` | DOM 解析完成（资源未加载完也触发） | `window.addEventListener("DOMContentLoaded", () => {})` | | `beforeunload` | 窗口关闭/刷新前触发（可提示用户）| `window.onbeforeunload = (e) => { e.returnValue = "确定离开？" }` | | `unload` | 窗口关闭时触发（仅执行简单操作）| `window.onunload = () => { console.log("窗口关闭") }` | ### 2. 窗口交互事件 | 事件 | 说明 | 示例 | |---------------|---------------------------------------|-------------------------------| | `resize` | 窗口大小调整时触发 | `window.addEventListener("resize", getWindowSize)` | | `scroll` | 页面滚动时触发 | `window.onscroll = () => { console.log("页面滚动了") }` | | `focus` | 窗口获得焦点时触发（点击标签页）| `window.onfocus = () => { console.log("窗口激活") }` | | `blur` | 窗口失去焦点时触发（切其他标签页）| `window.onblur = () => { console.log("窗口失活") }` | ## 五、window 避坑与技巧 ### 1. 核心避坑点 #### （1）全局变量污染 避免随意声明全局变量（会挂载到 `window`），推荐用模块化/闭包封装： ```javascript // 不良写法：污染window let username = "张三"; // 推荐写法：闭包封装 (function() { let username = "张三"; // 仅暴露需要的接口 window.getUser = () => username; })(); ``` #### （2）定时器的 this 指向 定时器回调中 `this` 默认指向 `window`，如需指向当前对象，用箭头函数/绑定 this： ```javascript const obj = { name: "张三", sayHi: function() { // 错误：this 指向 window setTimeout(function() { console.log(this.name); // undefined }, 1000); // 正确：箭头函数继承外层 this setTimeout(() => { console.log(this.name); // 张三 }, 1000); } }; ``` #### （3）resize/scroll 事件防抖 频繁触发的事件（如 resize）需加防抖，避免性能损耗： ```javascript let timer; window.addEventListener("resize", () => { clearTimeout(timer); timer = setTimeout(() => { console.log("窗口大小稳定了"); }, 100); }); ``` ### 2. 实用技巧 #### （1）判断当前环境是否为浏览器 ```javascript if (typeof window !== "undefined") { console.log("浏览器环境"); } else { console.log("非浏览器环境（如Node.js）"); } ``` #### （2）回到页面顶部（平滑滚动） ```javascript window.scrollTo({ top: 0, behavior: "smooth" // 平滑滚动（可选） }); ``` #### （3）获取浏览器类型（简易版） ```javascript const userAgent = window.navigator.userAgent; if (userAgent.includes("Chrome")) { console.log("Chrome浏览器"); } else if (userAgent.includes("Firefox")) { console.log("Firefox浏览器"); } ``` ## 六、核心总结 1. `window` 是浏览器全局顶级对象，所有全局变量/方法都挂载其上； 2. 核心能力：窗口控制、弹窗交互、定时器、存储（localStorage/sessionStorage）、URL 处理； 3. 事件重点：`load/DOMContentLoaded`（页面加载）、`resize/scroll`（窗口交互）； 4. 优化要点：定时器及时清除、高频事件加防抖、避免全局变量污染； 5. 区别：`innerWidth`（可视区）≠ `outerWidth`（整个窗口），`load`（资源全加载）≠ `DOMContentLoaded`（DOM解析完）。 \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.12 - \346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.12 - \346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..c93e920b2e98dacbf5aa421b1f40d3f8fa7b1aaa --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.12 - \346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" @@ -0,0 +1 @@ +\# JavaScript 浏览器对象模型（BOM）核心笔记 ## 一、BOM 基础概念 ### 1. 什么是 BOM BOM（Browser Object Model）即浏览器对象模型，是用于操作浏览器窗口及组件的一套 API，**无官方标准**（由各浏览器厂商实现，核心功能基本一致），以 `window` 为顶级对象，整合了控制浏览器窗口、导航、存储、网络等能力。 ### 2. BOM 与 DOM 的关系 | 维度 | BOM（浏览器对象模型）| DOM（文档对象模型）| |--------------|---------------------------------------|---------------------------------------| | 核心对象 | `window`（顶级）| `document`（挂载在 `window` 下）| | 操作目标 | 浏览器窗口/组件（标签页、地址栏、历史记录等） | 网页内容（HTML 标签、文本、属性等）| | 标准规范 | 无统一标准，依赖浏览器实现 | W3C 标准，跨浏览器一致性高 | | 核心能力 | 窗口控制、导航、存储、定时器、网络等 | 节点增删改查、事件处理、样式修改 | ### 3. BOM 核心构成 BOM 以 `window` 为核心，包含以下核心子对象： ``` window ├── document（DOM 根节点，归属 BOM 范畴） ├── location（地址栏/URL 信息） ├── history（浏览历史） ├── navigator（浏览器/系统信息） ├── screen（屏幕信息） ├── localStorage/sessionStorage（存储） ├── 定时器（setTimeout/setInterval） └── 弹窗/窗口控制方法（alert/open 等） ``` ## 二、BOM 核心子对象详解 ### 1. location 对象（URL 操作核心） #### （1）核心属性（URL 拆解） 假设当前 URL 为：`https://www.baidu.com:8080/search?kw=js#top` | 属性 | 说明 | 示例值 | |--------------|-----------------------|---------------------------------| | `href` | 完整 URL | `https://www.baidu.com:8080/search?kw=js#top` | | `protocol` | 协议（含 `://`）| `https:` | | `host` | 主机名 + 端口 | `www.baidu.com:8080` | | `hostname` | 主机名（不含端口）| `www.baidu.com` | | `port` | 端口号 | `8080` | | `pathname` | 路径 | `/search` | | `search` | 查询参数（含 `?`）| `?kw=js` | | `hash` | 哈希锚点（含 `#`）| `#top` | #### （2）核心方法 | 方法 | 说明 | 示例 | |---------------------|---------------------------------------|-------------------------------| | `assign(url)` | 跳转到新 URL，保留历史记录（可后退）| `location.assign("https://baidu.com")` | | `replace(url)` | 跳转到新 URL，替换当前历史记录（不可后退） | `location.replace("https://google.com")` | | `reload(force)` | 刷新页面，`force=true` 强制从服务器刷新 | `location.reload(true)` | #### （3）常用操作 ```javascript // 跳转页面（最常用） location.href = "https://baidu.com"; // 修改查询参数（示例：添加/修改 kw 参数） location.search = "?kw=bom"; // 修改哈希锚点（页面内滚动） location.hash = "#footer"; // 解析查询参数（实用技巧） function getQueryParam(key) { const params = new URLSearchParams(location.search); return params.get(key); } console.log(getQueryParam("kw")); // 输出：js ``` ### 2. history 对象（浏览历史控制） #### （1）核心属性 | 属性 | 说明 | 示例 | |--------------|-----------------------|-------------------------------| | `length` | 历史记录条数 | `window.history.length` | | `state` | 当前历史记录的状态值 | `window.history.state` | #### （2）核心方法 | 方法 | 说明 | 示例 | |---------------------|---------------------------------------|-------------------------------| | `back()` | 后退一页（等同于浏览器后退按钮）| `history.back()` | | `forward()` | 前进一页（等同于浏览器前进按钮）| `history.forward()` | | `go(n)` | 跳转 n 页（n 为正数前进，负数后退）| `history.go(-2)`（后退2页）| | `pushState(state, title, url)` | 添加新历史记录（不跳转） | `history.pushState({id:1}, "", "/page1")` | | `replaceState(state, title, url)` | 替换当前历史记录 | `history.replaceState({id:2}, "", "/page2")` | > 注意：`pushState/replaceState` 仅修改 URL 不触发页面跳转，常配合前端路由使用。 ### 3. navigator 对象（浏览器/系统信息） #### （1）常用属性 | 属性 | 说明 | 示例 | |---------------------|---------------------------------------|-------------------------------| | `userAgent` | 浏览器 UA 字符串（识别浏览器/系统）| `navigator.userAgent` | | `language` | 浏览器默认语言 | `navigator.language` // "zh-CN" | | `platform` | 操作系统平台 | `navigator.platform` // "Win32" | | `onLine` | 浏览器是否联网（布尔值）| `navigator.onLine` | #### （2）实用示例：识别浏览器类型 ```javascript const ua = navigator.userAgent; if (ua.includes("Chrome") && !ua.includes("Edge")) { console.log("Chrome 浏览器"); } else if (ua.includes("Firefox")) { console.log("Firefox 浏览器"); } else if (ua.includes("Edg")) { console.log("Edge 浏览器"); } ``` ### 4. screen 对象（屏幕信息） #### （1）常用属性 | 属性 | 说明 | 示例 | |---------------------|---------------------------------------|-------------------------------| | `width/height` | 屏幕总宽度/高度（像素）| `screen.width` // 1920 | | `availWidth/availHeight` | 屏幕可用宽/高（不含任务栏） | `screen.availHeight` // 1080 | | `colorDepth` | 屏幕颜色深度（通常 24/32）| `screen.colorDepth` // 24 | #### （2）实用场景：适配屏幕尺寸 ```javascript // 判断是否为移动端屏幕 function isMobile() { return screen.width < 768; } console.log(isMobile()); // 移动端返回 true ``` ### 5. 存储对象（localStorage/sessionStorage） #### （1）核心区别 | 特性 | localStorage | sessionStorage | |--------------|--------------------|--------------------| | 存储周期 | 永久存储（除非手动删除） | 会话存储（标签页关闭即清空） | | 共享范围 | 同域名下所有标签页共享 | 仅当前标签页有效 | | 存储大小 | 约 5MB | 约 5MB | #### （2）核心方法（两者通用） ```javascript // 存储数据（仅支持字符串，复杂数据需序列化） localStorage.setItem("name", "张三"); localStorage.setItem("user", JSON.stringify({id:1, age:20})); // 获取数据 const name = localStorage.getItem("name"); const user = JSON.parse(localStorage.getItem("user")); // 删除数据 localStorage.removeItem("name"); // 清空所有数据 localStorage.clear(); ``` ## 三、BOM 核心方法（window 挂载） ### 1. 弹窗交互方法 | 方法 | 说明 | 返回值/特点 | |---------------------|---------------------------------------|-------------------------------| | `alert(msg)` | 提示框（无交互）| 无返回值，阻塞代码执行 | | `confirm(msg)` | 确认框（确认/取消）| 确认→true，取消→false | | `prompt(msg, def)` | 输入框（可输入内容）| 输入内容→字符串，取消→null | > 注意：弹窗会阻塞代码执行，移动端体验差，仅用于简单调试/提示。 ### 2. 窗口控制方法 | 方法 | 说明 | 示例 | |---------------------|---------------------------------------|-------------------------------| | `open(url, name, params)` | 打开新窗口/标签页 | `window.open("https://baidu.com", "_blank", "width=500,height=300")` | | `close()` | 关闭当前窗口（仅对 open 打开的窗口有效） | `const newWin = window.open(); newWin.close()` | | `moveTo(x, y)` | 移动窗口到指定坐标（部分浏览器禁用）| `window.moveTo(100, 100)` | | `resizeTo(w, h)` | 调整窗口尺寸（部分浏览器禁用）| `window.resizeTo(800, 600)` | ### 3. 定时器方法（异步核心） #### （1）一次性定时器（setTimeout） ```javascript // 语法：setTimeout(回调, 延迟ms, 参数1, 参数2...) const timer = setTimeout((msg) => { console.log(msg); // 输出：延迟1秒 }, 1000, "延迟1秒"); // 取消定时器 clearTimeout(timer); ``` #### （2）周期性定时器（setInterval） ```javascript // 语法：setInterval(回调, 间隔ms, 参数...) let count = 0; const timer = setInterval(() => { count++; if (count >= 5) clearInterval(timer); // 执行5次后取消 }, 1000); ``` > 注意：定时器回调的 `this` 指向 `window`（严格模式下为 `undefined`）。 ## 四、BOM 常用事件 ### 1. 窗口生命周期事件 | 事件 | 说明 | 触发时机 | |---------------------|---------------------------------------|-------------------------------| | `load` | 页面所有资源加载完成（图片/JS/CSS）| 最后触发，等待资源加载 | | `DOMContentLoaded` | DOM 解析完成（资源未加载完也触发）| 提前触发，性能更优 | | `beforeunload` | 窗口关闭/刷新前 | 可提示用户是否离开 | | `unload` | 窗口关闭时 | 仅执行简单操作（如埋点）| 示例： ```javascript // DOM 解析完成即可执行（推荐） window.addEventListener("DOMContentLoaded", () => { console.log("DOM 加载完成，可操作节点"); }); // 窗口关闭前提示 window.addEventListener("beforeunload", (e) => { e.returnValue = "确定要离开吗？"; // 兼容各浏览器 return "确定要离开吗？"; }); ``` ### 2. 窗口交互事件 | 事件 | 说明 | 示例 | |---------------------|---------------------------------------|-------------------------------| | `resize` | 窗口大小调整时 | 监听响应式布局 | | `scroll` | 页面滚动时 | 监听滚动位置（如回到顶部）| | `focus` | 窗口获得焦点（点击标签页）| `window.onfocus = () => {}` | | `blur` | 窗口失去焦点（切其他标签页）| `window.onblur = () => {}` | 示例：滚动监听（防抖优化） ```javascript let timer; window.addEventListener("scroll", () => { clearTimeout(timer); timer = setTimeout(() => { // 获取滚动距离 const scrollTop = window.scrollY || document.documentElement.scrollTop; console.log("滚动位置：", scrollTop); }, 100); // 防抖延迟100ms }); ``` ## 五、BOM 避坑与最佳实践 ### 1. 核心避坑点 #### （1）全局变量污染 `window` 是全局对象，随意声明变量会挂载到 `window` 上，导致污染： ```javascript // 不良写法：污染 window var age = 20; console.log(window.age); // 20 // 推荐写法：模块化/闭包封装 const myModule = (() => { let age = 20; return { getAge: () => age }; })(); ``` #### （2）定时器的精度问题 定时器延迟时间不是“绝对准确”，受浏览器任务队列影响，延迟时间≥设置值： ```javascript // 实际执行时间可能略大于1000ms setTimeout(() => { console.log("延迟1秒执行"); }, 1000); ``` #### （3）localStorage 存储限制 - 仅支持字符串，存储对象需用 `JSON.stringify` 序列化； - 跨域无法共享，同域名下不同端口/协议也不共享； - 避免存储敏感信息（明文存储，易被篡改）。 #### （4）窗口操作权限 现代浏览器对 `open/resizeTo/moveTo` 等方法做了限制： - 仅能在用户交互（如点击）中触发 `open`； - 无法调整主窗口尺寸，仅能调整 `open` 打开的子窗口。 ### 2. 最佳实践 #### （1）优先使用 DOMContentLoaded 替代 load `DOMContentLoaded` 触发更早，无需等待图片/视频加载，提升代码执行效率： ```javascript window.addEventListener("DOMContentLoaded", init); // 推荐 // window.onload = init; // 仅需等待资源加载时使用 ``` #### （2）高频事件（resize/scroll）加防抖 避免频繁触发事件导致性能损耗： ```javascript function debounce(fn, delay = 100) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; } // 使用防抖函数 window.addEventListener("resize", debounce(getWindowSize)); ``` #### （3）URL 操作优先用 location.href 修改 `location.href` 是最通用的跳转方式，兼容性优于 `assign/replace`： ```javascript // 推荐（可后退） location.href = "https://baidu.com"; // 仅需替换历史记录时用 // location.replace("https://baidu.com"); ``` #### （4）存储复杂数据时做好序列化/反序列化 ```javascript // 存储对象 const user = { id: 1, name: "张三" }; localStorage.setItem("user", JSON.stringify(user)); // 获取对象（需反序列化） const savedUser = JSON.parse(localStorage.getItem("user")) || {}; ``` ## 六、BOM 核心总结 1. BOM 以 `window` 为顶级对象，整合了浏览器窗口、导航、存储、定时器等能力，无统一标准但核心功能通用； 2. 核心子对象：`location`（URL 操作）、`history`（历史记录）、`navigator`（浏览器信息）、`screen`（屏幕信息）； 3. 存储优先用 `localStorage/sessionStorage`，注意序列化和存储限制； 4. 定时器需及时清除，高频事件加防抖，避免性能问题； 5. 窗口操作受浏览器权限限制，优先保证用户交互触发； 6. BOM 与 DOM 协同工作：DOM 操作页面内容，BOM 控制浏览器环境。 diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.15.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.15.md" new file mode 100644 index 0000000000000000000000000000000000000000..a46b2efbf729314876a733e5e6cc750555b58f18 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.15.md" @@ -0,0 +1,81 @@ +# 笔记 + +## 1 题目描述： 声明三个变量分别存储一个学生的姓名（字符串）、年龄（数字）、是否及格（布尔值），然后分别输出这三个变量的值和类型 +```html + + +``` + +## 17 完成如下任务 题目描述： 比较 $ 和 jQuery 的使用，验证它们是同一个对象 +```html + + +``` + +## 18 完成如下任务 题目描述： 使用 jQuery 获取 id 为 "demo" 的元素，并输出该元素的 jQuery 对象 +```html +//
演示内容
+ +$(function(){ + let demo=$("#demo"); + console.log(demo); +}) + +``` + +## 19 完成如下任务 题目描述： 理解 jQuery 对象和原生 DOM 对象的区别，实现两者之间的转换 +```html + + + +
初始内容
+ + + +``` + +## 20 完成如下任务 题目描述： 使用 jQuery 的链式调用，一次性完成多个操作 +```html +//
内容
+// 输出示例： $('#box').css('color', 'red').addClass('active').fadeIn() + + + + +
内容
+ + +``` diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.22.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.22.md" new file mode 100644 index 0000000000000000000000000000000000000000..9b149629fcef35b34dd78ed6ef132fce695c5bb9 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.22.md" @@ -0,0 +1,50 @@ +- 16 + +``` +console.log(+'123'); +console.log(-'45'); +console.log(!!'hello'); +``` +- 17 + +``` +const val = NaN; + + console.log('NaN === NaN ', val === val); + console.log('isNaN(NaN) ', isNaN(val)); + console.log('Number.isNaN(NaN) ', Number.isNaN(val)); +``` +- 18 + +``` +const a = 5.8; +const b = 7; + +console.log(`~~${a} = ${~~a} (取整)`); +console.log(`${b} & 1 = ${b & 1} (奇偶，1为奇)`); +``` +- 19 + +``` +const score = 85; +const level = score >= 60 ? '及格' : '不及格'; +console.log('level:', level); + +``` +- 20 + +``` +function cj(score) { + if (score >= 90) { + return '优秀'; + } else if (score >= 80) { + return '良好'; + } else if (score >= 60) { + return '及格'; + } else { + return '不及格'; + } +} + +console.log(cj(85)); +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.24.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.24.md" new file mode 100644 index 0000000000000000000000000000000000000000..160d124f0d14d296c7a495fb4e7e42d85b9e19d6 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.24.md" @@ -0,0 +1,143 @@ +21 + +``` + + + + + + + + + + +``` +- 22 + +``` + + + + + + + + + + + + + +``` +- 23 + +``` + + + + + + + + + + + + + +``` +- 24 + +``` + + + + + + + + + + + + + +``` +- 25 + +``` + + + + + + + + + + + + + +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.25.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.25.md" new file mode 100644 index 0000000000000000000000000000000000000000..144d2ac3e7535d3ae0dedb0587c63dbb4db05a90 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.25.md" @@ -0,0 +1,135 @@ + 26 + +``` + + + + + + + + + + + + + +``` +- 27 + +``` + + + + + + + + + + + + + +``` +- 28 + +``` + + + + + + + + + + + + + +``` +- 29 + +``` + + + + + + + + + + + + + +``` +- 30 + +``` + + + + + + + + + + + + + +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/2025.12.26.md" "b/\346\235\216\345\256\266\345\222\214/2025.12.26.md" new file mode 100644 index 0000000000000000000000000000000000000000..13767c0bbb6f81b14c8bacd597f818f3cfcbf4b0 --- /dev/null +++ "b/\346\235\216\345\256\266\345\222\214/2025.12.26.md" @@ -0,0 +1,122 @@ + +- 31 + +``` + + + + + + 猜数字游戏 + + + + + + + +``` +- 32 + +``` + + + + + + + + + + + + + +``` +- 33 + +``` + + + + + + + + + + + + + +``` +- 34 + +``` + + + + + + + + + + + + + +``` +- 35 + +``` +function findDuplicates(arr) { + const seen = new Set(); + const dup = new Set(); + for (const v of arr) { + if (seen.has(v)) dup.add(v); + else seen.add(v); + } + return [...dup]; +} + + +console.log(findDuplicates([1, 2, 4, 4, 3, 3, 1, 5, 3])); +``` \ No newline at end of file diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251110-\346\225\210\346\236\2341.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251110-\346\225\210\346\236\2341.png" new file mode 100644 index 0000000000000000000000000000000000000000..37e2c3e2967c9a0b0b4d47d1e55649da3f69ef15 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251110-\346\225\210\346\236\2341.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251110-\346\225\210\346\236\2342.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251110-\346\225\210\346\236\2342.png" new file mode 100644 index 0000000000000000000000000000000000000000..b287de4b746ce7ae832f73f9976f8449ca705919 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251110-\346\225\210\346\236\2342.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251112-\346\225\210\346\236\2341.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251112-\346\225\210\346\236\2341.png" new file mode 100644 index 0000000000000000000000000000000000000000..f4b6125bad75a136d94f96005a141ef1565c494c Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251112-\346\225\210\346\236\2341.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2341.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2341.png" new file mode 100644 index 0000000000000000000000000000000000000000..d83dc74492dfa1e3ebd6fc8e6ca39c8a3f9a4933 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2341.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2342.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2342.png" new file mode 100644 index 0000000000000000000000000000000000000000..90e7bac13276101c43f2edc4c3779283412e23d2 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2342.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2343.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2343.png" new file mode 100644 index 0000000000000000000000000000000000000000..78d590888b9c920ac03aee6bd97b15f86ad8b459 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2343.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2344.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2344.png" new file mode 100644 index 0000000000000000000000000000000000000000..3361023bca570c59d27644e6f9f55f7fd805222c Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2344.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2345.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2345.png" new file mode 100644 index 0000000000000000000000000000000000000000..b5ff5b6178fbbc3ba2c2194d1f937a50fe8d4550 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251113-\346\225\210\346\236\2345.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2341.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2341.png" new file mode 100644 index 0000000000000000000000000000000000000000..0a0bc3bedf1ebcc441a0772bfaa62d9ad121be36 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2341.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2342.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2342.png" new file mode 100644 index 0000000000000000000000000000000000000000..137678b54f09a5dd380f2f9d2112364ce44a1458 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2342.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2343.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2343.png" new file mode 100644 index 0000000000000000000000000000000000000000..2105bcbc6ec4917422dc30aea1218372ad525b79 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2343.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2344.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2344.png" new file mode 100644 index 0000000000000000000000000000000000000000..0390a9e5a0e3bc22787a182559c5c008883c20d8 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2344.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2345.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2345.png" new file mode 100644 index 0000000000000000000000000000000000000000..9e04856b9eef36b6f07bd0bf6bc01d947d003927 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2345.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2346.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2346.png" new file mode 100644 index 0000000000000000000000000000000000000000..9d6fe7c4807389967f4d720fb240af937d5790e5 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2346.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2347.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2347.png" new file mode 100644 index 0000000000000000000000000000000000000000..edb93c8500bbf1df8194471a0f0925b29693b457 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2347.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2348.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2348.png" new file mode 100644 index 0000000000000000000000000000000000000000..149b806ecdf6191121cfcce8afc50f06948c3dab Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251114-\346\225\210\346\236\2348.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2341.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2341.png" new file mode 100644 index 0000000000000000000000000000000000000000..763b61ab45276aa72e40ffcdbc22d47e46490c6f Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2341.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2342.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2342.png" new file mode 100644 index 0000000000000000000000000000000000000000..7777507d8dcb8614e9d3adce5a4094b9bf62c96b Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2342.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2343.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2343.png" new file mode 100644 index 0000000000000000000000000000000000000000..ea7b6632168d359a2faff06a85b576fa535bae88 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2343.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2344.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2344.png" new file mode 100644 index 0000000000000000000000000000000000000000..96002dd67e6a338e638d5f3613a62240e429aec3 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251119-\346\225\210\346\236\2344.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2341.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2341.png" new file mode 100644 index 0000000000000000000000000000000000000000..4fb830aa0bba577f4e6671353a605ab3e49636e3 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2341.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2342.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2342.png" new file mode 100644 index 0000000000000000000000000000000000000000..4dcdec56eadcfe53b884d6e7e79132545ea48642 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2342.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2343.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2343.png" new file mode 100644 index 0000000000000000000000000000000000000000..1c4cc216f6bfb358cd13511f7b6b7c27659d76a2 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2343.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2344.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2344.png" new file mode 100644 index 0000000000000000000000000000000000000000..28e3c0e27c600b0dd5f179cf870577feebd231c2 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2344.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2345.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2345.png" new file mode 100644 index 0000000000000000000000000000000000000000..715e338a65e1e6108096ebfe7a5eff5724797f50 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2345.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2346.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2346.png" new file mode 100644 index 0000000000000000000000000000000000000000..b618390604b48c481967972b30866d1727f51b0f Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2346.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2347.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2347.png" new file mode 100644 index 0000000000000000000000000000000000000000..f16f6123da88adbb0e2b490502849236a3384dcb Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251120-\346\225\210\346\236\2347.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2341.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2341.png" new file mode 100644 index 0000000000000000000000000000000000000000..590f8a142dc08dee53717f64ba5e6f28b4a34614 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2341.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2342.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2342.png" new file mode 100644 index 0000000000000000000000000000000000000000..b0c90a80239b1f61cc728767c5a50419e534d6ea Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2342.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2343.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2343.png" new file mode 100644 index 0000000000000000000000000000000000000000..0aa43a8d9b5afbabaeca16da42e4917788300f44 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2343.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2344.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2344.png" new file mode 100644 index 0000000000000000000000000000000000000000..03598d015a95af8bbf25e45fe15aa182e2c1df06 Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2344.png" differ diff --git "a/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2345.png" "b/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2345.png" new file mode 100644 index 0000000000000000000000000000000000000000..7efa35fa844591198c3188477f89f60c19029c7d Binary files /dev/null and "b/\346\235\216\345\256\266\345\222\214/imgs/20251121-\346\225\210\346\236\2345.png" differ