From a0af1f8bf7b5038afdbebd3375b15737acecbdc7 Mon Sep 17 00:00:00 2001
From: yvnbai <a1987520x@163.com>
Date: Sun, 16 Nov 2025 21:50:18 +0800
Subject: [PATCH 01/13] 1

---
 20251112.html |  47 ++++++++++++++++++
 20251113.html | 109 ++++++++++++++++++++++++++++++++++++++++++
 20251114.HTML | 129 ++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 285 insertions(+)
 create mode 100644 20251112.html
 create mode 100644 20251113.html
 create mode 100644 20251114.HTML
diff --git a/20251112.html b/20251112.html
new file mode 100644
index 00000000..11fe31e5
--- /dev/null
+++ b/20251112.html
@@ -0,0 +1,47 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<script>
+    //第一题
+    let mountain='848.86m';
+    document.write(`<h1>第一题<h1>`);
+     document.write(`<h3>${mountain}<h3>`);
+
+     //第二题
+    let file='E\\123123Java\\code\\demo';
+    document.write(`<h1>第二题<h1>`);
+     document.write(`<h3>${file}<h3>`);
+
+     //第三题
+    let Area ='17 100 000km²';
+    document.write(`<h1>第三题<h1>`);
+     document.write(`<h3>${Area}<h3>`);
+
+     //第四题
+    let name='郭靖';
+    let sex='男';
+    let age='20';
+    let tall='1.77m';
+    let kongFu='九阴真经，降龙十八掌';
+    document.write(`<h1>第四题<h1>`);
+    document.write(`<h3>姓名:${name}<br>性别:${sex}<br>年龄:${age}<br>身高:${tall}<br>武功:${kongFu}</h3>`);
+    
+    //第五题
+    document.write(`<h1>第五题<h1>`);
+    document.write(`<pre>111,111\n222,222\n333,333\n444,444</pre>`);
+
+    //第六题
+    document.write(`<h1>第六题<h1>`);
+    document.write(`<h3>该员工的实际收入为${((6500-500)-(6500-500-5000)*0.03)}元</h3>`);
+
+    //第七题
+    let year=2024;
+    alert(`${year}年2月有${(year%4===0 && year%100!==0)|| year%400==0? 29 :28 }天`);
+</script>
+<body>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/20251113.html b/20251113.html
new file mode 100644
index 00000000..f877152d
--- /dev/null
+++ b/20251113.html
@@ -0,0 +1,109 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .a {
+        height: 25px;
+        width: 35px;
+        margin: 1px;
+        background-color: red;
+        color: white;
+        text-align: center;
+        line-height: 25px;
+    }
+</style>
+<script>
+
+    //第一题
+    document.write('<h1>第一题</h1>');
+    document.write(`<table>`);
+    for (let i = 1; i < 5; i++) {
+        document.write(`<tr>`);
+        for (let j = 1; j < 11; j++) {
+            if (i == 3 && j == 2) {
+                document.write(`<td><div class="a">无</div></td>`);
+
+            }
+            else {
+                document.write(`<td><div class="a">${i},${j}</div></td>`);
+
+            }
+        }
+        document.write(`</tr>`);
+    }
+    document.write(`</table>`);
+
+    //第二题
+    document.write('<h1>第二题</h1>');
+    let man = 23;
+    if (man < 20) {
+        document.write('太轻');
+    }
+    else if (man >= 20 && man <= 25) {
+        document.write('轻');
+    }
+    else if (man > 25 && man <= 30) {
+        document.write('正常');
+    }
+    else if (man > 30 && man <= 35) {
+        document.write('肥');
+    }
+    else if (man > 35) {
+        document.write('太肥');
+    }
+    
+    //第三题
+    document.write('<h1>第三题</h1>');
+    document.write(`<select name="year" id="year">`);
+    for (let i = 2000; i < 2026; i++) {
+        document.write(`<option value="${i}">${i}</option>"`);
+    }
+    document.write(`</select>`);
+    document.write(`<select name="mount" id="month">`);
+    for (let i = 1; i < 13; i++) {
+        document.write(`<option value="${i}">${i}</option>"`);
+    }
+    document.write(`</select>`);
+
+    //第四题
+    document.write('<h1>第四题</h1>');
+    document.write(`<table>`);
+    for (let i = 1; i < 101; i++) {
+        if (i % 10 == 0) {
+            document.write(`<td><div class="a">${i}</div></td>`);
+            document.write(`</tr>`);
+            document.write(`<tr>`);
+        }
+        else if (i == 1) {
+            document.write(`<tr>`);
+            document.write(`<td><div class="a">${i}</div></td>`);
+        }
+        else {
+            document.write(`<td><div class="a">${i}</div></td>`);
+        }
+
+    }
+    document.write(`</table>`);
+
+    //第五题
+    document.write('<h1>第五题</h1>');
+    document.write("银行" + (100000 + (100000 * 0.0275 * 3)) + "元");
+
+    //第六题
+    document.write('<h1>第六题</h1>');
+    let zxx=65;
+    document.write(`${(zxx>60) ? "及格":"不及格"}`);
+
+    //第七题
+    document.write('<h1>第七题</h1>');
+    document.write("面积:"+30*50*30/2+"m");
+</script>
+
+<body>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/20251114.HTML b/20251114.HTML
new file mode 100644
index 00000000..e8e962fe
--- /dev/null
+++ b/20251114.HTML
@@ -0,0 +1,129 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .a {
+        height: 25px;
+        width: 35px;
+        margin: 1px;
+        background-color: red;
+        color: white;
+        text-align: center;
+        line-height: 25px;
+    }
+</style>
+<script>
+    //第一题
+    document.write(`<h1>第一题</h1>`);
+    let ay = new Array(26, 17, 10, 20);
+    let a = ay[0];
+    for (let i = 0; i < 4; i++) {
+        if (ay[i] < a) {
+            a = ay[i];
+        }
+    }
+    document.write(a);
+    //第二题
+    document.write(`<h1>第二题</h1>`);
+    let air = 56;
+    if (0 < air && air < 101) {
+        document.write(`好`);
+    }
+    else if (100 < air && air < 201) {
+        document.write(`中`);
+    }
+    else if (200 < air && air < 301) {
+        document.write(`烂`);
+    }
+
+    //第三题
+    document.write(`<h1>第三题</h1>`);
+    let month = 5;
+    switch (month) {
+        case 1:
+        case 2:
+        case 3:
+            document.write(`春天`);
+            break;
+        case 4:
+        case 5:
+        case 6:
+            document.write(`夏天`);
+            break;
+        case 7:
+        case 8:
+        case 9:
+            document.write(`秋天`);
+            break;
+        case 10:
+        case 11:
+        case 12:
+        document.write(`冬天`);
+        break;
+    }
+    //第四题
+    document.write(`<h1>第四题</h1>`);
+    let salary=3000;
+    let year =0;
+    do{
+        year++;
+        document.write(`<p>他第${year}年的${salary}工资<p>`);
+        salary=salary+50;
+    }
+    while(year<5)
+//第五题
+document.write(`<h1>第五题</h1>`);
+let head=35;
+let chicken=0;
+let rabbit=0;
+
+ for(chicken=0;chicken<=head;chicken++){
+    rabbit=head-chicken;
+    if(chicken*2+rabbit*4==94)
+    document.write(`兔:${rabbit},鸡:${chicken}`);
+ }
+
+ //第六题
+document.write(`<h1>第六题</h1>`);
+let b=65;
+let c=0;
+for(let i=1;i<1000;i++){
+    
+    if (b*i<1000) {
+        c=c+b*i;
+        
+    }
+    else{
+        continue;
+    }
+}
+document.write(`${c}`);
+
+ //第七题
+document.write(`<h1>第七题</h1>`);
+document.write(`<table>`);
+    for (let i = 1; i < 4; i++) {
+        document.write(`<tr>`);
+        for (let j = 1; j < 4; j++) {
+            if (i == 1 && j == 3 || i == 3 && j ==3) {
+                continue;
+            }
+            else {
+                document.write(`<td><div class="a">${i},${j}</div></td>`);
+
+            }
+        }
+        document.write(`</tr>`);
+    }
+    document.write(`</table>`);
+</script>
+
+<body>
+
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee


From 3a47949ed9dad0a8ee434bf8d5cfdb463064221a Mon Sep 17 00:00:00 2001
From: yvnbai <a1987520x@163.com>
Date: Sun, 16 Nov 2025 22:57:03 +0800
Subject: [PATCH 02/13] 1

---
 .../20251110.md"                              |  31 ++++
 .../20251112.md"                              | 131 +++++++++++++++
 .../20251113.md"                              | 151 ++++++++++++++++++
 .../20251114.md"                              | 133 +++++++++++++++
 4 files changed, 446 insertions(+)
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251110.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251112.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251113.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251114.md"

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 00000000..2b916d54
--- /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
+<script>
+            document.write("千里之行，始于足下。")
+        </script>
+```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116171346470.png)
+
+### 输出明日学院的官网地址
+- 代码
+    - ```js
+        <script>
+            let a=('http://www.mingrisoft.com');
+            alert(a);
+        </script>
\ 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 00000000..a6d975a1
--- /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字符 |
+          - 要将其放在`<pre>`格式化文本中才会起作用
+      - 字符串拼接 
+  - 布尔值 boolean
+    - true 
+    - false
+  - 空值 null
+    - 空的或者不存在的值
+  - 未定义值 undefined
+    - 变量还没有赋值
+
+## 常量和变量
+  -  常量
+    - const
+  - 变量
+    - var
+    - let
+  - 变量命名规则
+    - 以字母、下划线、$开头
+    - 不能使用关键字
+    - 区分大小写
+    - 不能使用中文
+    - 不能使用特殊字符
+    - 不能使用数字开头
+
+## 运算符
+
+- 算术运算符
+  - `+ - * / % ++ --`
+  - 优先级
+    - `() -> ** -> * / % -> + - -> ++ --`
+    - 从左到右
+    - 优先级相同，从左到右
+    - () 优先级最高
+- 字符串运算符 
+  -  `+` 连接两个字符
+  -  `+=` 连接两个字符并赋值
+- 比较运算符
+  - `== != > < >= <=`
+  - `==` 比较值是否相等
+  - `===` 比较值和类型是否相等
+  - `!=` 比较值是否不相等
+  - `!==` 比较值和类型是否不相等
+  - `> < >= <=` 比较大小
+- 赋值运算符
+  - `=` 
+  - `+=`
+  - `-=`
+  - `*=`
+  - `/=`
+  - `%=`
+
+## 作业
+
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<script>
+    //第一题
+    let mountain='848.86m';
+    document.write(`<h1>第一题<h1>`);
+     document.write(`<h3>${mountain}<h3>`);
+
+     //第二题
+    let file='E\\123123Java\\code\\demo';
+    document.write(`<h1>第二题<h1>`);
+     document.write(`<h3>${file}<h3>`);
+
+     //第三题
+    let Area ='17 100 000km²';
+    document.write(`<h1>第三题<h1>`);
+     document.write(`<h3>${Area}<h3>`);
+
+     //第四题
+    let name='郭靖';
+    let sex='男';
+    let age='20';
+    let tall='1.77m';
+    let kongFu='九阴真经，降龙十八掌';
+    document.write(`<h1>第四题<h1>`);
+    document.write(`<h3>姓名:${name}<br>性别:${sex}<br>年龄:${age}<br>身高:${tall}<br>武功:${kongFu}</h3>`);
+    
+    //第五题
+    document.write(`<h1>第五题<h1>`);
+    document.write(`<pre>111,111\n222,222\n333,333\n444,444</pre>`);
+
+    //第六题
+    document.write(`<h1>第六题<h1>`);
+    document.write(`<h3>该员工的实际收入为${((6500-500)-(6500-500-5000)*0.03)}元</h3>`);
+
+    //第七题
+    let year=2024;
+    alert(`${year}年2月有${(year%4===0 && year%100!==0)|| year%400==0? 29 :28 }天`);
+</script>
+<body>
+    
+</body>
+</html>
+```
+
+![](https://gitee.com/yvnbai/figurebed/raw/master/image/20251112-1.png)
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 00000000..690a64c0
--- /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
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .a {
+        height: 25px;
+        width: 35px;
+        margin: 1px;
+        background-color: red;
+        color: white;
+        text-align: center;
+        line-height: 25px;
+    }
+</style>
+<script>
+
+    //第一题
+    document.write('<h1>第一题</h1>');
+    document.write(`<table>`);
+    for (let i = 1; i < 5; i++) {
+        document.write(`<tr>`);
+        for (let j = 1; j < 11; j++) {
+            if (i == 3 && j == 2) {
+                document.write(`<td><div class="a">无</div></td>`);
+
+            }
+            else {
+                document.write(`<td><div class="a">${i},${j}</div></td>`);
+
+            }
+        }
+        document.write(`</tr>`);
+    }
+    document.write(`</table>`);
+
+    //第二题
+    document.write('<h1>第二题</h1>');
+    let man = 23;
+    if (man < 20) {
+        document.write('太轻');
+    }
+    else if (man >= 20 && man <= 25) {
+        document.write('轻');
+    }
+    else if (man > 25 && man <= 30) {
+        document.write('正常');
+    }
+    else if (man > 30 && man <= 35) {
+        document.write('肥');
+    }
+    else if (man > 35) {
+        document.write('太肥');
+    }
+    
+    //第三题
+    document.write('<h1>第三题</h1>');
+    document.write(`<select name="year" id="year">`);
+    for (let i = 2000; i < 2026; i++) {
+        document.write(`<option value="${i}">${i}</option>"`);
+    }
+    document.write(`</select>`);
+    document.write(`<select name="mount" id="month">`);
+    for (let i = 1; i < 13; i++) {
+        document.write(`<option value="${i}">${i}</option>"`);
+    }
+    document.write(`</select>`);
+
+    //第四题
+    document.write('<h1>第四题</h1>');
+    document.write(`<table>`);
+    for (let i = 1; i < 101; i++) {
+        if (i % 10 == 0) {
+            document.write(`<td><div class="a">${i}</div></td>`);
+            document.write(`</tr>`);
+            document.write(`<tr>`);
+        }
+        else if (i == 1) {
+            document.write(`<tr>`);
+            document.write(`<td><div class="a">${i}</div></td>`);
+        }
+        else {
+            document.write(`<td><div class="a">${i}</div></td>`);
+        }
+
+    }
+    document.write(`</table>`);
+
+    //第五题
+    document.write('<h1>第五题</h1>');
+    document.write("银行" + (100000 + (100000 * 0.0275 * 3)) + "元");
+
+    //第六题
+    document.write('<h1>第六题</h1>');
+    let zxx=65;
+    document.write(`${(zxx>60) ? "及格":"不及格"}`);
+
+    //第七题
+    document.write('<h1>第七题</h1>');
+    document.write("面积:"+30*50*30/2+"m");
+</script>
+
+<body>
+</body>
+
+</html>
+```
+
+![](https://gitee.com/yvnbai/figurebed/raw/master/image/20251113-1.png)
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 00000000..73bdf4c0
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251114.md"
@@ -0,0 +1,133 @@
+## 作业
+```html
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .a {
+        height: 25px;
+        width: 35px;
+        margin: 1px;
+        background-color: red;
+        color: white;
+        text-align: center;
+        line-height: 25px;
+    }
+</style>
+<script>
+    //第一题
+    document.write(`<h1>第一题</h1>`);
+    let ay = new Array(26, 17, 10, 20);
+    let a = ay[0];
+    for (let i = 0; i < 4; i++) {
+        if (ay[i] < a) {
+            a = ay[i];
+        }
+    }
+    document.write(a);
+    //第二题
+    document.write(`<h1>第二题</h1>`);
+    let air = 56;
+    if (0 < air && air < 101) {
+        document.write(`好`);
+    }
+    else if (100 < air && air < 201) {
+        document.write(`中`);
+    }
+    else if (200 < air && air < 301) {
+        document.write(`烂`);
+    }
+
+    //第三题
+    document.write(`<h1>第三题</h1>`);
+    let month = 5;
+    switch (month) {
+        case 1:
+        case 2:
+        case 3:
+            document.write(`春天`);
+            break;
+        case 4:
+        case 5:
+        case 6:
+            document.write(`夏天`);
+            break;
+        case 7:
+        case 8:
+        case 9:
+            document.write(`秋天`);
+            break;
+        case 10:
+        case 11:
+        case 12:
+        document.write(`冬天`);
+        break;
+    }
+    //第四题
+    document.write(`<h1>第四题</h1>`);
+    let salary=3000;
+    let year =0;
+    do{
+        year++;
+        document.write(`<p>他第${year}年的${salary}工资<p>`);
+        salary=salary+50;
+    }
+    while(year<5)
+//第五题
+document.write(`<h1>第五题</h1>`);
+let head=35;
+let chicken=0;
+let rabbit=0;
+
+ for(chicken=0;chicken<=head;chicken++){
+    rabbit=head-chicken;
+    if(chicken*2+rabbit*4==94)
+    document.write(`兔:${rabbit},鸡:${chicken}`);
+ }
+
+ //第六题
+document.write(`<h1>第六题</h1>`);
+let b=65;
+let c=0;
+for(let i=1;i<1000;i++){
+    
+    if (b*i<1000) {
+        c=c+b*i;
+        
+    }
+    else{
+        continue;
+    }
+}
+document.write(`${c}`);
+
+ //第七题
+document.write(`<h1>第七题</h1>`);
+document.write(`<table>`);
+    for (let i = 1; i < 4; i++) {
+        document.write(`<tr>`);
+        for (let j = 1; j < 4; j++) {
+            if (i == 1 && j == 3 || i == 3 && j ==3) {
+                continue;
+            }
+            else {
+                document.write(`<td><div class="a">${i},${j}</div></td>`);
+
+            }
+        }
+        document.write(`</tr>`);
+    }
+    document.write(`</table>`);
+</script>
+
+<body>
+
+</body>
+
+</html>
+```
+![20251114-1](D:\a1987\pictures\Screenshots\20251114-1.png)
\ No newline at end of file
-- 
Gitee


From 76cf7b491af3cc3e704567d32431b3571afd4618 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=80=9D=E5=93=B2?= <a1987520x@163.com>
Date: Sun, 16 Nov 2025 14:57:45 +0000
Subject: [PATCH 03/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=2020?=
 =?UTF-8?q?251112.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 20251112.html | 47 -----------------------------------------------
 1 file changed, 47 deletions(-)
 delete mode 100644 20251112.html

diff --git a/20251112.html b/20251112.html
deleted file mode 100644
index 11fe31e5..00000000
--- a/20251112.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<script>
-    //第一题
-    let mountain='848.86m';
-    document.write(`<h1>第一题<h1>`);
-     document.write(`<h3>${mountain}<h3>`);
-
-     //第二题
-    let file='E\\123123Java\\code\\demo';
-    document.write(`<h1>第二题<h1>`);
-     document.write(`<h3>${file}<h3>`);
-
-     //第三题
-    let Area ='17 100 000km²';
-    document.write(`<h1>第三题<h1>`);
-     document.write(`<h3>${Area}<h3>`);
-
-     //第四题
-    let name='郭靖';
-    let sex='男';
-    let age='20';
-    let tall='1.77m';
-    let kongFu='九阴真经，降龙十八掌';
-    document.write(`<h1>第四题<h1>`);
-    document.write(`<h3>姓名:${name}<br>性别:${sex}<br>年龄:${age}<br>身高:${tall}<br>武功:${kongFu}</h3>`);
-    
-    //第五题
-    document.write(`<h1>第五题<h1>`);
-    document.write(`<pre>111,111\n222,222\n333,333\n444,444</pre>`);
-
-    //第六题
-    document.write(`<h1>第六题<h1>`);
-    document.write(`<h3>该员工的实际收入为${((6500-500)-(6500-500-5000)*0.03)}元</h3>`);
-
-    //第七题
-    let year=2024;
-    alert(`${year}年2月有${(year%4===0 && year%100!==0)|| year%400==0? 29 :28 }天`);
-</script>
-<body>
-    
-</body>
-</html>
\ No newline at end of file
-- 
Gitee


From c80940af2822be078f6ae4002cd19b64cd25b855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=80=9D=E5=93=B2?= <a1987520x@163.com>
Date: Sun, 16 Nov 2025 14:57:51 +0000
Subject: [PATCH 04/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=2020?=
 =?UTF-8?q?251113.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 20251113.html | 109 --------------------------------------------------
 1 file changed, 109 deletions(-)
 delete mode 100644 20251113.html

diff --git a/20251113.html b/20251113.html
deleted file mode 100644
index f877152d..00000000
--- a/20251113.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<style>
-    .a {
-        height: 25px;
-        width: 35px;
-        margin: 1px;
-        background-color: red;
-        color: white;
-        text-align: center;
-        line-height: 25px;
-    }
-</style>
-<script>
-
-    //第一题
-    document.write('<h1>第一题</h1>');
-    document.write(`<table>`);
-    for (let i = 1; i < 5; i++) {
-        document.write(`<tr>`);
-        for (let j = 1; j < 11; j++) {
-            if (i == 3 && j == 2) {
-                document.write(`<td><div class="a">无</div></td>`);
-
-            }
-            else {
-                document.write(`<td><div class="a">${i},${j}</div></td>`);
-
-            }
-        }
-        document.write(`</tr>`);
-    }
-    document.write(`</table>`);
-
-    //第二题
-    document.write('<h1>第二题</h1>');
-    let man = 23;
-    if (man < 20) {
-        document.write('太轻');
-    }
-    else if (man >= 20 && man <= 25) {
-        document.write('轻');
-    }
-    else if (man > 25 && man <= 30) {
-        document.write('正常');
-    }
-    else if (man > 30 && man <= 35) {
-        document.write('肥');
-    }
-    else if (man > 35) {
-        document.write('太肥');
-    }
-    
-    //第三题
-    document.write('<h1>第三题</h1>');
-    document.write(`<select name="year" id="year">`);
-    for (let i = 2000; i < 2026; i++) {
-        document.write(`<option value="${i}">${i}</option>"`);
-    }
-    document.write(`</select>`);
-    document.write(`<select name="mount" id="month">`);
-    for (let i = 1; i < 13; i++) {
-        document.write(`<option value="${i}">${i}</option>"`);
-    }
-    document.write(`</select>`);
-
-    //第四题
-    document.write('<h1>第四题</h1>');
-    document.write(`<table>`);
-    for (let i = 1; i < 101; i++) {
-        if (i % 10 == 0) {
-            document.write(`<td><div class="a">${i}</div></td>`);
-            document.write(`</tr>`);
-            document.write(`<tr>`);
-        }
-        else if (i == 1) {
-            document.write(`<tr>`);
-            document.write(`<td><div class="a">${i}</div></td>`);
-        }
-        else {
-            document.write(`<td><div class="a">${i}</div></td>`);
-        }
-
-    }
-    document.write(`</table>`);
-
-    //第五题
-    document.write('<h1>第五题</h1>');
-    document.write("银行" + (100000 + (100000 * 0.0275 * 3)) + "元");
-
-    //第六题
-    document.write('<h1>第六题</h1>');
-    let zxx=65;
-    document.write(`${(zxx>60) ? "及格":"不及格"}`);
-
-    //第七题
-    document.write('<h1>第七题</h1>');
-    document.write("面积:"+30*50*30/2+"m");
-</script>
-
-<body>
-</body>
-
-</html>
\ No newline at end of file
-- 
Gitee


From 1937fd0c1daa929c2eed276b9528d0e51634a5ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=80=9D=E5=93=B2?= <a1987520x@163.com>
Date: Sun, 16 Nov 2025 14:57:56 +0000
Subject: [PATCH 05/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=2020?=
 =?UTF-8?q?251114.HTML?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 20251114.HTML | 129 --------------------------------------------------
 1 file changed, 129 deletions(-)
 delete mode 100644 20251114.HTML

diff --git a/20251114.HTML b/20251114.HTML
deleted file mode 100644
index e8e962fe..00000000
--- a/20251114.HTML
+++ /dev/null
@@ -1,129 +0,0 @@
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<style>
-    .a {
-        height: 25px;
-        width: 35px;
-        margin: 1px;
-        background-color: red;
-        color: white;
-        text-align: center;
-        line-height: 25px;
-    }
-</style>
-<script>
-    //第一题
-    document.write(`<h1>第一题</h1>`);
-    let ay = new Array(26, 17, 10, 20);
-    let a = ay[0];
-    for (let i = 0; i < 4; i++) {
-        if (ay[i] < a) {
-            a = ay[i];
-        }
-    }
-    document.write(a);
-    //第二题
-    document.write(`<h1>第二题</h1>`);
-    let air = 56;
-    if (0 < air && air < 101) {
-        document.write(`好`);
-    }
-    else if (100 < air && air < 201) {
-        document.write(`中`);
-    }
-    else if (200 < air && air < 301) {
-        document.write(`烂`);
-    }
-
-    //第三题
-    document.write(`<h1>第三题</h1>`);
-    let month = 5;
-    switch (month) {
-        case 1:
-        case 2:
-        case 3:
-            document.write(`春天`);
-            break;
-        case 4:
-        case 5:
-        case 6:
-            document.write(`夏天`);
-            break;
-        case 7:
-        case 8:
-        case 9:
-            document.write(`秋天`);
-            break;
-        case 10:
-        case 11:
-        case 12:
-        document.write(`冬天`);
-        break;
-    }
-    //第四题
-    document.write(`<h1>第四题</h1>`);
-    let salary=3000;
-    let year =0;
-    do{
-        year++;
-        document.write(`<p>他第${year}年的${salary}工资<p>`);
-        salary=salary+50;
-    }
-    while(year<5)
-//第五题
-document.write(`<h1>第五题</h1>`);
-let head=35;
-let chicken=0;
-let rabbit=0;
-
- for(chicken=0;chicken<=head;chicken++){
-    rabbit=head-chicken;
-    if(chicken*2+rabbit*4==94)
-    document.write(`兔:${rabbit},鸡:${chicken}`);
- }
-
- //第六题
-document.write(`<h1>第六题</h1>`);
-let b=65;
-let c=0;
-for(let i=1;i<1000;i++){
-    
-    if (b*i<1000) {
-        c=c+b*i;
-        
-    }
-    else{
-        continue;
-    }
-}
-document.write(`${c}`);
-
- //第七题
-document.write(`<h1>第七题</h1>`);
-document.write(`<table>`);
-    for (let i = 1; i < 4; i++) {
-        document.write(`<tr>`);
-        for (let j = 1; j < 4; j++) {
-            if (i == 1 && j == 3 || i == 3 && j ==3) {
-                continue;
-            }
-            else {
-                document.write(`<td><div class="a">${i},${j}</div></td>`);
-
-            }
-        }
-        document.write(`</tr>`);
-    }
-    document.write(`</table>`);
-</script>
-
-<body>
-
-</body>
-
-</html>
\ No newline at end of file
-- 
Gitee


From fd0ca5d1f3cc3e7d29823d228887e48f43210d95 Mon Sep 17 00:00:00 2001
From: yvnbai <a1987520x@163.com>
Date: Mon, 24 Nov 2025 00:01:47 +0800
Subject: [PATCH 06/13] 1

---
 .../20251117.md"                              | 135 ++++++++++
 .../20251119.md"                              | 240 ++++++++++++++++++
 .../20251120.md"                              |  92 +++++++
 .../20251121.md"                              | 150 +++++++++++
 4 files changed, 617 insertions(+)
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251117.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251119.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251120.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251121.md"

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 00000000..c5446b86
--- /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
+        <script>
+            function address(province,city,district,detailedAddress){
+                let res= province+city+district+detailedAddress;
+                return res;
+            }
+            let sul= address("福建省","福安市","锦鸡路","学府佳苑1栋1203室");
+            document.write(sul);
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181351411.png)
+
+### 获取数字的绝对值
+- 代码
+    - ```js
+        <script>
+        function absoluteValue(number){
+            if(number>0){
+                return number;
+            }else{
+                return number*-1;
+            }    
+        }
+        let a=absoluteValue(-30); 
+        document.write(a);
+    </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181412000.png)
+
+### 斐波那契数列
+- 代码
+    - ```js
+      <script>
+        function f(n){
+            if(n===1){
+                return 0;
+            }
+            if(n===2){
+                return 1;
+            }
+            return f(n-1)+f(n-2);//fn(2)+fn(1)
+            // fn(3)+fn(2)= fn(2)+fn(1)+fn(2)
+        }
+        function fbnq(n){
+                if(n===1){
+                    return 0;
+                }else{
+                    return fbnq(n-1)+" "+f(n);
+                }    
+        }
+        alert(fbnq(4));
+      </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181431514.png)
+
+### 判断是否可以享受优惠活动
+- 代码
+    - ```js
+        <script>
+                function sum(a,b,c){
+                    let sum=a+b+c;
+                    return sum;
+                }
+            let res=sum(199,156,165);
+                function f(a,b,c){
+                    if(res>=500){
+                        let money=res*0.9;
+                        return money;
+                    }else{
+                        return res;
+                    }
+                }
+                alert(`他可以享受优惠,原价：${res},优惠后为${f(199,156,165)}`);
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181448178.png)
+
+### 判断考生成绩是否到达本科分数线
+- 代码
+    - ```js
+        <script>
+        function get(a,b,c,d){
+            let sum=a+b+c+d;
+            return sum;
+        }
+        let res=get(108,115,126,237);
+        function f(a,b,c,d){
+            let str=`该考生总成绩为${res}`;
+            if(res>=550){
+                alert(`${str}这分数到达了本科线，超出了${res-550}`);
+            }else{
+                alert(`${str}这分数没到达本科线，还差${res-550}到达本科线`);
+            }
+        }
+        f();
+         </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181503666.png)
\ 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 00000000..c9579868
--- /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
+         <script>
+        function f(a,b){
+            if(a>=b){
+                return a;
+            }else{
+                return b;
+            }
+        }
+        alert(`这两个数${f(9,10)}比较大`);
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181525587.png)
+
+### 获取3个数字中的最小值
+- 代码
+    - ```js
+        <script>
+            function f(a, b, c) {
+                let sum = a;
+
+                if (sum >= b) {
+                    sum = b;
+                    return sum
+                }
+
+                if (sum >= c) {
+                    sum = c;
+                    return sum
+                }
+            }
+            alert(`这三个数${f(16,12,17)}是最小值`);
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181544299.png)
+
+### 判断登录是否成功
+- 代码
+    - ```js
+        <script>
+        // function f(userName,passWord){
+        //     let a="mr";
+        //     let b="mrsort";
+        //     if((userName==a)&&(passWord==b)){
+        //         alert("恭喜你登录成功");
+        //     }else{
+        //         alert("账号或者密码错误");
+        //     }
+        // }
+        // f("mr","mrsort");
+
+        let sum=function(userName,passWord){
+            let a="mr";
+            let b="mrsort";
+            if((userName==a)&&(passWord==b)){
+                alert("恭喜你登录成功");
+            }else{
+                alert("账号或者密码错误");
+            }
+        }
+        sum("mr","mrsort");
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181601741.png)
+
+### 获取1000以内能同时被3和5整除的正整数
+- 代码
+    - ```js
+        <script>
+        let str = function (n) {
+            return n;
+        };
+        let res = function (n) {
+            let k = 0;
+            function recursive(n) {
+                if (n === 0) {
+                    return "";
+                }
+                let prev = recursive(n - 1);
+                if (n % 3 == 0 && n % 5 == 0) {
+                    if (n >= 0 && n < 100) {
+                        k++;
+                        let space = prev && k % 7 !== 1 ? " " : "";
+                        let hh = k % 7 === 0 ? "\n" : " ";
+                        return prev +" "+ space + str(n) + hh;
+                    } else {
+                        k++;
+                        let space = prev && k % 7 !== 1 ? " " : "";
+                        let hh = k % 7 === 0 ? "\n" : "";
+                        return prev + space + str(n) + hh;
+                    }
+                } else {
+                    return prev;
+                }
+            }
+            return recursive(n);
+        };
+        alert(res(1000));
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181618768.png)
+
+### 判断20岁处在哪个年龄段
+- 代码
+    - ```js
+        <script>
+            function f(n) {
+                if (n < 18) {
+                    return "未成年";
+                } else {
+                    return "成年人";
+                }
+            }
+            function age(n) {
+                let res = f(n);
+                let str = "";
+                
+                if (n >= 0 && n <= 6) {
+                    str = `${n}岁正处于童年时期，是${res}`;
+                    return str;
+                }
+                if (n >= 7 && n <= 17) {
+                    str = `${n}岁正处于少年时期，是${res}`;
+                    return str;
+                }
+                if (n >= 18 && n <= 40) {
+                    str = `${n}岁正处于青年时期，是${res}`;
+                    return str;
+                }
+                if (n >= 41 && n <= 65) {
+                    str = `${n}岁正处于中年时期，是${res}`;
+                    return str;
+                }
+                if (n >= 66) {
+                    str = `${n}岁正处于老年时期，是${res}`;
+                    return str;
+                }
+            }
+            alert(age(20));
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181634826.png)
+
+### 输出某年某月的天数
+- 代码
+    - ```js
+        <script>
+            function fnian(year, month) {
+                if (month == 2) {
+                    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
+                        return "闰年";
+                    } else {
+                        return "平年";
+                    }
+                }
+            }
+            function f(year, month) {
+                if (month == 2) {
+                    if (fnian(year, month) == "闰年") {
+                        return `${year}年2月有29天`;
+                    } else {
+                        return `${year}年2月有28天`;
+                    }
+                }
+                if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
+                    return `${year}年${month}月有31天`;
+                }
+                if (month == 4 || month == 6 || month == 9 || month == 11) {
+                    return `${year}年${month}月有30天`;
+                }
+            }
+            alert(f(2024, 6));
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181650477.png)
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 00000000..3525c832
--- /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
+        <script>
+          let startDate = new Date(2023, 4, 1); 
+          let endDate = new Date(2023, 5, 1);  
+          let getTime=endDate.getTime()-startDate.getTime();
+          let hous=getTime/3600000;
+          alert("这之间间隔了"+hous+"小时");
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181712353.png)
+
+### 高考倒计时
+- 代码
+    - ```js
+         <script>
+        let start=new Date(2023,0,1);
+        let end=new Date(2023,5,7);
+        let getTime=end.getTime()-start.getTime();
+        let day=(getTime/(60*60*1000))/24;
+        alert("距离高考还有"+day+"天");
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181727953.png)
+
+## 转换时间格式
+- 代码
+    - ```js
+        <script>
+        let newDate=new Date();
+        document.write(newDate.toLocaleString());
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181746114.png)
\ 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 00000000..d695b93a
--- /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
+        <script>
+        function example(e) {
+            if (e.button == 2) {
+                alert('右键');
+            }
+            if (e.button == 1) {
+                alert('中键');
+            }
+            if (e.button == 0) {
+                alert('左键');
+            }
+        }
+        document.onmousedown = example;
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/screenshots.gif)
+
+### 生成指定位数的1~6的随机数
+- 代码
+    - ```js
+        <body>
+            <p>请输入要生成随机数的位数：</p>
+            <form name="form">
+                <input type="text" name="digit">
+                <input type="button" value="生成" onclick="ran(form.digit.value)">
+            </form>
+            <script>
+                function getran() {
+                    let num = Math.floor(Math.random() * 6 + 1);
+                    return num;
+                }
+                function ran(digit) {
+                    let res = "";
+                    for (let i = 0; i < digit; i++) {
+                        let str = getran();
+                        res = res + str;
+                    }
+                    alert(res);
+                }
+            </script>
+        </body>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/screenshotsds)
+
+### 计算从出生到现在度过的时间
+- 代码
+    - ```js
+        <script>
+            function day(){
+                let startDay=new Date(1996,5,9);
+                let endDay=new Date();
+                let res=endDay.getTime()-startDay.getTime();
+                let toDay=Math.floor(res/(60*60*1000*24)-1);
+                let hours=endDay.getHours();
+                let minutes=endDay.getMinutes();
+                let time=endDay.getSeconds();
+                let str=`<br>${toDay}天>>>${hours}小时>>>${minutes}分>>>${time}秒`;
+                document.write("周星星从出生到现在已度过了");
+                document.write(str);
+            }
+            day();
+        </script>
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123182011532.png)
-- 
Gitee


From 1095a1781e2862e1f8bfa65549b3e39c11f18910 Mon Sep 17 00:00:00 2001
From: yvnbai <a1987520x@163.com>
Date: Sun, 30 Nov 2025 23:06:04 +0800
Subject: [PATCH 07/13] 1

---
 .../20251124_Array,String.md"                 | 210 +++++++++
 .../20251126_\346\255\243\345\210\231.md"     |  26 ++
 .../20251127.md"                              | 153 ++++++
 .../20251128.md"                              | 435 ++++++++++++++++++
 4 files changed, 824 insertions(+)
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251124_Array,String.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251126_\346\255\243\345\210\231.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251127.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251128.md"

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 00000000..f4b9eaa0
--- /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
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+</body>
+<script>
+    //第一题
+    document.write(`<h1>第一题</h1>`);
+    let now = new Date();
+    let day = [`${now.getFullYear()}年`, `${now.getMonth()}月`, `${now.getDate()}日`, `星期${now.getDay()}`];
+    day.forEach((a) => {
+        document.write(a);
+    })
+
+    //第二题
+    document.write(`<h1>第二题</h1>`);
+    let num = [5, 7, 6, 3, 9, 2];
+    Array.prototype.qqq = function () {
+        this.sort();
+        return this.pop();
+    }
+    document.write(num.qqq());
+
+    //第三题
+    document.write(`<h1>第三题</h1>`);
+    let num1 = [1, 2, 3, 4, 5, 6];
+    document.write(num1.slice(1, num1.length - 1));
+
+    //第四题
+    document.write(`<h1>第四题</h1>`);
+    let train = ["长春", "昌图西", "铁岭西", "沈阳北", "栾中北", "北京"];
+    document.write(`途径站:${train}<br>反向站:${train.reverse()}`);
+
+    //第五题
+    document.write(`<h1>第五题</h1>`);
+
+    document.write(` 
+    <style>
+            table,tr{
+            width: 250px;
+            height: 50px;
+            border: 1px black solid;
+            border-collapse: collapse;
+            text-align: center;
+        }
+    </style>`);
+    let phone = new Map([["vivo", "19.2%"], ["iphone", "18%"], ["OPPO", "17.5%"], ["小米", "13.9%"], ["荣耀", "16.7%"]]);
+
+    let arr = Array.from(phone);
+
+    arr.sort((a, b) => a[1].slice(0, -1) - b[1].slice(0, -1));
+
+    phone = new Map(arr);
+
+    document.write(`<table>`);
+
+    document.write(`<tr><td>排名</td><td class="a">品牌</td><td>市场份额</td></tr>`);
+
+    let num_i = 1;
+    phone.forEach((a, b) => {
+        document.write(`<tr><td>${num_i++}</td><td class="a">${b}</td><td>${a}</td></tr>`);
+    })
+
+    document.write(`</table>`);
+
+    //第六题
+    document.write(`<h1>第六题</h1>`);
+    let book = ["雪山飞狐", "连城诀", "天龙八部", "射雕英雄传", "鹿鼎记", "笑傲江湖", "书剑恩仇录", "神雕侠侣", "倚天屠龙记", "碧血剑"];
+    let book_4 = "";
+    book.forEach(element => {
+
+        if (element.length == 4) {
+            book_4 = book_4 + "《" + element + "》";
+
+        }
+
+    });
+    document.write(book_4);
+
+    //第七题
+    document.write(`<h1>第七题</h1>`);
+    let tele_num = ["1330431****", "1567766****", "1304316****", "1526567****", "1580433****", "139****0431"]
+    tele_num.forEach(element => {
+        if (element.indexOf("0431") != -1) {
+            document.write(element + " | ");
+        }
+    });
+
+    //第八题
+    document.write(`<h1>第八题</h1>`);
+    let QQ = "4006****66@qq.com";
+    document.write(QQ.substr(0, 10));
+
+    //第九题
+    document.write(`<h1>第九题</h1>`);
+    let email = "abc@sina.com";
+    if (email.indexOf("@") < email.indexOf(".")) {
+        document.write("符合");
+    }
+    else {
+        document.write("不符合");
+    }
+
+    //第十题
+    document.write(`<h1>第十题</h1>`);
+    let v_code="0123456789ABCDEFG";
+    let v_code_arr=v_code.split(",");
+    let v="";
+    for(let i=0;i<6;i++){
+        v=v+v_code[(Math.floor(Math.random() * 17))];
+
+    }
+    document.write(v);
+
+    //第十一题
+    document.write(`<h1>第十一题</h1>`);
+    let numbers= "13625966";
+    let srebmun=(numbers.split("")).reverse();
+    let n_i=1;
+    let a="";
+    srebmun.forEach(element => {
+       
+        if(n_i==3){
+            a=a+","+element;
+            n_i=1;
+        }
+        else{
+            a=a+element; 
+            n_i++;
+        }
+    });
+    document.write(a.split("").reverse().join(""));
+</script>
+
+</html>
+```
+
+![](https://gitee.com/yvnbai/figurebed/raw/master/image/20251124_01.png)
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 00000000..cdcd5ee6
--- /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 00000000..c46be4df
--- /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
+<input type="text" name="index" id="index" value="1"><input type="button" name="" id="found" value="查找"><br>
+    <input type="text" name="letter" id="letter" value=""><br>
+    用户名：<input type="text" name="" id="username" placeholder="请输入用户名"><br>
+    密&emsp;码：<input type="password" name="" id="password" placeholder="请输入密码"><br>
+    <input type="button" name="" id="test" value="测试">
+    <script>
+        // 训练1、2
+        let str01 = '我喜欢JavaScript'
+        try {
+            console.log(str01.subStrTest());
+        } catch (e) {
+            console.log(e);
+            console.log('对象不支持此方法');
+        }
+
+        // 综合练习1
+        let arr = ['A', 'B', 'C', 'D', 'E']
+        function myException() {
+            const index = document.getElementById('index').value - 1;
+            try {
+                if (index > arr.length) {
+                    throw new Error("arrayIndexOverflowException");
+                }
+            } catch (e) {
+                console.log(e);
+            }
+            document.getElementById('letter').value = arr[index]
+        }
+        document.getElementById('found').addEventListener("click", myException)
+
+        // 综合练习2
+        function judge() {
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            let judgeUsername = username.match(/^[a-zA-Z][a-zA-Z0-9_-]{3,19}$/);
+            let judgePassword = password.match(/^[a-zA-Z0-9]{6,16}$/);
+            try {
+                if (!judgeUsername) {
+                    throw new Error("用户名不符合要求");
+
+                }
+            } catch (e) {
+                console.log(e);
+                return
+            }
+            try {
+                if (!judgePassword) {
+                    throw new Error("密码不符合要求");
+
+                }
+            } catch (e) {
+                console.log(e);
+                return
+            }
+            console.log('注册成功');
+        }
+        const test = document.getElementById('test');
+        test.addEventListener("click", judge);
+    </script>
+```
+
+#### 效果展示
+
+![](./Image/20251127_Image/show01.gif)
+
+### 第二部分
+
+#### 关键代码
+
+```html
+<div class="form-box">
+        <h2>联系方式</h2>
+        <form id="myForm">
+            <div class="form-item">
+                <label>姓名</label>
+                <input type="text" name="name" placeholder="请输入姓名">
+            </div>
+            <div class="form-item">
+                <label>邮箱</label>
+                <input type="email" name="email" placeholder="请输入邮箱">
+            </div>
+            <div class="form-item">
+                <label>留言</label>
+                <textarea name="message" rows="4" placeholder="请输入留言内容"></textarea>
+            </div>
+            <input type="button" name="" id="submitForm" value="提交">
+        </form>
+    </div>
+    <script>
+        function mySubmit(e) {
+            e.key == 'Enter' || (e.type == "click" && e.button == 0) ? console.log('提交成功') : false;
+        }
+        document.getElementById('submitForm').addEventListener("click", mySubmit)
+        document.getElementById('myForm').addEventListener("keydown", mySubmit)
+    </script>
+```
+
+#### 效果展示
+
+![](./Image/20251127_Image/show02.gif)
\ 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 00000000..bc0c9589
--- /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
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=
+    , initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    img {
+        width: 100px;
+        height: auto;
+    }
+    #div9{
+        width: 100px;
+        height: 100px;
+    }
+</style>
+
+<body>
+    <h1>第一题</h1>
+    <div id="div1">
+        <img src="./20251124_01.png" alt="" onmouseover="img(this,1)" onmouseout="img(this,0)">
+
+    </div>
+    <h1>第二题</h1>
+    <div id="div2" tabindex="0">
+        <span>中国的国球是</span>
+        <form action="" name="">
+            <input type="radio" name="radio" id="a1">篮球
+            <input type="radio" name="radio" id="a2">排球
+            <input type="radio" name="radio" id="a3">乒乓球
+            <input type="radio" name="radio" id="a4">羽毛球
+            <p id="radio_p">答</p>
+        </form>
+
+    </div>
+    <h1>第三题</h1>
+    <div id="div3"><span>当前时间</span></div>
+
+    <h1>第四题</h1>
+    <div id="div4">
+        <p>宽度:</p>
+        <p>高度:</p>
+    </div>
+
+    <h1>第五题</h1>
+    <div id="div5">
+        <input type="text" tabindex="0">
+    </div>
+
+    <h1>第六题</h1>
+    <div id="div6">
+        <div class="select-container"></div>
+        <div class="result" style="margin-top: 10px;"></div>
+    </div>
+
+    <h1> 第七题</h1>
+    <div id="div7">
+        <form onreset="reset1()">
+            <input type="text">
+            <input type="reset">
+        </form>
+    </div>
+
+    <h1>第八题</h1>
+    <div id="div8">
+        <p>123456</p>
+    </div>
+
+    <h1>第九题</h1>
+    <div id="div9">
+        <input type="button" value="关灯">
+    </div>
+
+    <h1>第十题</h1>
+    <div id="div10">
+        <input type="button" value="测试">
+    </div>
+</body>
+<script>
+    //第一题
+    function img(mouth, n) {
+        if (n == 1) {
+            mouth.style.border = "2px solid black";
+        }
+        else {
+            mouth.style.border = "none";
+
+        }
+    }
+
+    //第二题
+    function radio(event) {
+        const radios = document.getElementsByName('radio');
+        const radio_p = document.getElementById('radio_p');
+
+        if (event.keyCode == 65 || radios[0].checked == true) {
+            radios[0].checked = true;
+            radio_p.innerHTML = "答戳啦";
+        }
+        if (event.keyCode == 66 || radios[1].checked == true) {
+            radios[1].checked = true;
+            radio_p.innerHTML = "答戳啦";
+
+        }
+        if (event.keyCode == 67 || radios[2].checked == true) {
+            radios[2].checked = true;
+            radio_p.innerHTML = "答对啦";
+
+        }
+        if (event.keyCode == 68 || radios[3].checked == true) {
+            radios[3].checked = true;
+            radio_p.innerHTML = "答戳啦";
+        }
+
+    }
+    document.getElementById('div2').addEventListener("keydown", radio);
+    document.getElementById('div2').addEventListener("click", radio);
+
+    //第三题
+    window.onload = () => {
+
+        document.querySelector('#div3 span').innerHTML = Date();
+
+    }
+
+    //第四题
+    window.onresize = () => {
+        let body = document.querySelector('body');
+        document.querySelector('#div4 p').innerHTML = "宽度:" + body.offsetWidth;
+        document.querySelector('#div4 p:nth-child(2)').innerHTML = "高度:" + body.offsetHeight;
+    }
+    //第五题
+    document.querySelector('#div5 input').addEventListener('focus', function () {
+        this.style.border = '2px solid red';
+        this.style.outline = 'none';
+    });
+    document.querySelector('#div5 input').addEventListener('blur', function () {
+        this.style.border = '';
+        this.style.outline = '';
+    });
+
+    //第六题
+    let div6 = document.querySelector('#div6');
+    let year = "", month = "";
+
+    function write() {
+
+        year = "";
+        month = "";
+
+        for (let i = 2000; i < 2026; i++) {
+            year = year + `<option value="${i}">${i}</option>`;
+        }
+        for (let i = 1; i < 13; i++) {
+            month = month + `<option value="${i}">${i}</option>`;
+        }
+        const selectContainer = div6.querySelector('.select-container');
+        selectContainer.innerHTML = `
+    <select name="" id="year1">${year}</select>
+    <select name="" id="mouth1">${month}</select>
+  `;
+
+        bindSelectEvents();
+    }
+
+    function bindSelectEvents() {
+        const yearSelect = document.getElementById('year1');
+        const monthSelect = document.getElementById('mouth1');
+        const resultContainer = div6.querySelector('.result');
+
+        // 年份选中事件（用 change 事件，更符合下拉框交互逻辑）
+        yearSelect.addEventListener('change', function () {
+            const monthValue = monthSelect.value.padStart(2, '0'); // 月份补零
+            resultContainer.textContent = `年:${this.value} 月:${monthValue}`;
+        });
+
+        // 月份选中事件
+        monthSelect.addEventListener('change', function () {
+            const yearValue = yearSelect.value;
+            const monthValue = this.value.padStart(2, '0');
+            resultContainer.textContent = `年:${yearValue} 月:${monthValue}`;
+        });
+    }
+
+    write();
+
+    //第七题
+    function reset1() {
+        alert("重置");
+    }
+
+    //第八题
+    document.querySelector('#div8 p').addEventListener('mouseover', function () {
+        this.style.fontSize='14px';
+    });
+
+        document.querySelector('#div8 p').addEventListener('mouseout', function () {
+        this.style.fontSize='19px';
+    });
+
+    //第九题
+    let bottom = document.querySelector('#div9 input');
+    let div9 = document.querySelector('#div9');
+    let light=1;
+    
+    bottom.addEventListener("click",()=>{
+        if(light==1){
+            bottom.value="开灯";
+            light=0;
+            div9.style.backgroundColor= 'black';
+        }
+        else{
+            bottom.value="关灯";
+            light=1;
+            div9.style.backgroundColor= 'white';
+
+        }
+    })
+
+    //第十题
+    let test =document.querySelector('#div10 input');
+    test.addEventListener('mousedown',function (){
+        this.style.backgroundColor="black";
+    })
+    test.addEventListener('mouseup',function (){
+        this.style.backgroundColor="white";
+    })
+
+</script>
+
+</html>
+```
+
+![](https://gitee.com/yvnbai/figurebed/raw/master/image/20251130230530495.png)
\ No newline at end of file
-- 
Gitee


From b75bd75a46284c7e2be7159c13d8cfa644236b92 Mon Sep 17 00:00:00 2001
From: yvnbai <a1987520x@163.com>
Date: Sun, 7 Dec 2025 23:14:07 +0800
Subject: [PATCH 08/13] 1

---
 .../20251201.md"                              | 107 ++++++
 .../20251203.md"                              | 203 +++++++++++
 .../20251204.md"                              | 316 ++++++++++++++++++
 .../20251205.md"                              | 195 +++++++++++
 4 files changed, 821 insertions(+)
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251201.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251203.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251204.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251205.md"

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 00000000..0517431f
--- /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
+	<img src="https://picsum.photos/300/200" class="drag-img" draggable="true" ondragover="handleImgDragOver(event)"
+        ondragleave="handleImgDragLeave(event)" ondrop="handleImgDrop(event)">
+    <div class="drag-text" draggable="true" ondragstart="handleTextDragStart(event, '这是自定义拖放文本内容～')">
+        拖拽我到下方区域
+    </div>
+    <div class="drop-area" ondragover="handleAreaDragOver(event)" ondragleave="handleAreaDragLeave(event)"
+        ondrop="handleAreaDrop(event)">
+        请将上方文本拖放到这里
+    </div>
+
+    <script>
+        function handleImgDragOver(e) {
+            e.preventDefault(); // 必须阻止默认行为，否则 drop 不触发
+            console.log('图片 ondragover 事件：拖拽元素在图片上移动');
+            console.log('事件目标：', e.target.tagName);
+        }
+
+        function handleImgDragLeave(e) {
+            console.log('图片 ondragleave 事件：拖拽元素离开图片区域');
+        }
+
+        function handleImgDrop(e) {
+            e.preventDefault();
+            console.log('图片 ondrop 事件：在图片上释放拖拽元素');
+            console.log('拖拽数据（文本格式）：', e.dataTransfer.getData('text'));
+        }
+
+        // 文本开始拖拽：设置拖拽数据
+        function handleTextDragStart(e, text) {
+            e.dataTransfer.setData('text', text); // 存储自定义文本
+        }
+
+        // 目标区域 dragover：允许放置
+        function handleAreaDragOver(e) {
+            e.preventDefault(); // 关键：阻止默认行为（默认不允许放置）
+            e.target.style.borderColor = '#42b983'; // 视觉反馈：边框变绿
+        }
+
+        // 目标区域 dragleave：离开时恢复样式
+        function handleAreaDragLeave(e) {
+            e.target.style.borderColor = '#666'; // 边框恢复默认颜色
+        }
+
+        // 目标区域 drop：接收拖拽文本
+        function handleAreaDrop(e) {
+            e.preventDefault();
+            e.target.style.borderColor = '#666'; // 恢复边框样式
+            // 获取拖拽的文本数据
+            const dragText = e.dataTransfer.getData('text');
+            // 将文本插入目标区域（替换原有提示或追加）
+            e.target.innerText = dragText;
+            console.log('拖放成功：', dragText);
+        }
+    </script>
+```
+
+#### 效果展示
+![20251201Show01](https://qiniu.lhchen.asia//20251201Show01.gif)
\ 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 00000000..c5c2f471
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251203.md"
@@ -0,0 +1,203 @@
+## 笔记
+
+### Document 对象常用属性
+
+#### 基础结构相关
+
+- `document.documentElement`：获取 HTML 根元素（`<html>` 标签）
+- `document.head`：获取文档的 `<head>` 元素
+- `document.body`：获取文档的 `<body>` 元素
+- `document.title`：获取或设置文档的标题（对应 `<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>
+```
+
+#### 效果展示
+![20251203Show01](https://qiniu.lhchen.asia//20251203Show01.gif)
\ 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 00000000..f375b861
--- /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>
+```
+
+#### 效果展示
+![20251204Show01](https://qiniu.lhchen.asia//20251204Show01.gif)
+### 第一部分
+
+#### 关键代码
+```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>
+```
+#### 效果展示
+
+![20251204Show02](https://qiniu.lhchen.asia//20251204Show02.gif)
\ 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 00000000..73d0ded3
--- /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>
+```
+
+#### 效果展示
+![20251205Show01](https://qiniu.lhchen.asia//20251205Show01.gif)
+
+
+### 第二部分
+
+#### 关键代码
+
+```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>
+```
+
+#### 效果展示
+![20251205Show02](https://qiniu.lhchen.asia//20251205Show02.gif)
\ No newline at end of file
-- 
Gitee


From 3718f0bbb59a7da306912b4923661564b41996ee Mon Sep 17 00:00:00 2001
From: yvnbai <a1987520x@163.com>
Date: Sun, 14 Dec 2025 22:13:07 +0800
Subject: [PATCH 09/13] 1

---
 .../20251208.md"                              |  55 ++++
 .../20251210.md"                              | 156 +++++++++++
 .../20251211.md"                              | 246 ++++++++++++++++++
 .../20251212.md"                              |  69 +++++
 4 files changed, 526 insertions(+)
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251208.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251210.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251211.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251212.md"

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 00000000..7e683f0d
--- /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 00000000..4af2db8e
--- /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>
+```
+
+#### 效果展示
+![20251210Show01](https://qiniu.lhchen.asia//20251210Show01.gif)
+### 第二部分
+
+#### 关键代码
+
+```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>
+```
+
+#### 效果展示
+![20251210Show02](https://qiniu.lhchen.asia//20251210Show02.gif)
\ 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 00000000..d43a3d85
--- /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>
+```
+
+#### 效果展示
+![20251211Show01](https://qiniu.lhchen.asia//20251211Show01.gif)
+### 第二部分
+
+#### 关键代码
+
+```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>
+```
+
+#### 效果展示
+![20251211Show02](https://qiniu.lhchen.asia//20251211Show02.gif)
\ 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 00000000..5d9df0ca
--- /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
-- 
Gitee


From cd81e9d33492f4191db11dfa3fe1cdf6872fa14e Mon Sep 17 00:00:00 2001
From: yvnbai <a1987520x@163.com>
Date: Sun, 21 Dec 2025 20:54:55 +0800
Subject: [PATCH 10/13] 1

---
 .../20251217-jsjQuery\345\272\22301.md"       | 565 ++++++++++++++++++
 .../20251218-jsjQuery\345\272\22302.md"       | 332 ++++++++++
 ...30\347\272\247\346\226\271\346\263\225.md" | 129 ++++
 3 files changed, 1026 insertions(+)
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251217-jsjQuery\345\272\22301.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251218-jsjQuery\345\272\22302.md"
 create mode 100644 "\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"

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 00000000..21e29732
--- /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 00000000..cc7ea853
--- /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 00000000..b83e5043
--- /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
-- 
Gitee


From 067b6426def20fbd0320e393d0815c31f9877c8d Mon Sep 17 00:00:00 2001
From: yvnbai <a1987520x@163.com>
Date: Sun, 21 Dec 2025 22:54:46 +0800
Subject: [PATCH 11/13] 1

---
 "\351\231\210\346\200\235\345\223\262/20251215.md" | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251215.md"

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 00000000..48a9745e
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251215.md"
@@ -0,0 +1,7 @@
+## 笔记
+
+什么都没有......
+
+## 作业
+
+什么都没有......
\ No newline at end of file
-- 
Gitee


From 83acd8caa9f8d272e4c0b9d3075d6da28c9c26a0 Mon Sep 17 00:00:00 2001
From: yvnbai <a1987520x@163.com>
Date: Sun, 28 Dec 2025 17:47:13 +0800
Subject: [PATCH 12/13] 1

---
 ...51222-js\345\215\232\345\256\242CRUD01.md" | 442 ++++++++++++++++++
 ...51224-js\345\215\232\345\256\242CRUD02.md" | 170 +++++++
 ...\345\212\241\351\203\250\347\275\26201.md" | 142 ++++++
 ...\345\212\241\351\203\250\347\275\26202.md" |   7 +
 4 files changed, 761 insertions(+)
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251222-js\345\215\232\345\256\242CRUD01.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251224-js\345\215\232\345\256\242CRUD02.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251225-js\346\234\215\345\212\241\351\203\250\347\275\26201.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251226-js\346\234\215\345\212\241\351\203\250\347\275\26202.md"

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 00000000..bf3d67d3
--- /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>博客</title>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <link rel="stylesheet" href="./实践星球.css">
+</head>
+
+<body>
+    <div id="mask-layer">
+        <div id="modal-box">
+            <div class="add operate">
+                <div class="add-blog-table modal-table">
+                    <p>新增博客</p>
+                    <table>
+                        <tr>
+                            <td>请输入标题：</td>
+                            <td><input type="text" name="" id="add-title"></td>
+                        </tr>
+                        <tr>
+                            <td>请输入内容摘要：</td>
+                            <td><input type="text" name="" id="add-summary"></td>
+                        </tr>
+                        <tr>
+                            <td>请输入作者：</td>
+                            <td><input type="text" name="" id="add-author"></td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <input type="button" name="" id="add-sure" value="确认">
+                                <input type="button" name="" id="add-cancel" value="取消">
+                            </td>
+                            
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            <div class="update operate">
+                <div class="update-blog-table modal-table">
+                    <p>编辑博客</p>
+                    <table>
+                        <tr>
+                            <td>请输入新标题：</td>
+                            <td><input type="text" name="" id="update-title"></td>
+                        </tr>
+                        <tr>
+                            <td>请输入新内容摘要：</td>
+                            <td><input type="text" name="" id="update-summary"></td>
+                        </tr>
+                        <tr>
+                            <td>请输入新作者：</td>
+                            <td><input type="text" name="" id="update-author"></td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <input type="button" name="" id="update-sure" value="确认">
+                                <input type="button" name="" id="update-cancel" value="取消">
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="blog-container">
+            <div class="blog-title">
+                <h2>博客列表</h2>
+            </div>
+            <div class="search-section">
+                <input type="text" name="search" id="searchInput" placeholder=" 输入标题关键字搜索">
+                <div id="findButton" class="action-button find-button">查找</div>
+                <div id="addButton" class="action-button add-button">新增</div>
+            </div>
+            <div class="blog-list">
+                <table id="blog-table">
+                    <thead>
+                        <tr>
+                            <th>序号</th>
+                            <th>标题</th>
+                            <th>内容摘要</th>
+                            <th>作者</th>
+                            <th>发布日期</th>
+                            <th>操作</th>
+                        </tr>
+                    </thead>
+                    <tbody id="blog-table-body">
+                </table>
+            </div>
+        </div>
+    </div>
+    <script src="./实践星球.js"></script>
+</body>
+
+</html>
+```
+#### CSS
+
+```css
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  background-color: rgb(245, 245, 245);
+}
+
+.container {
+  height: auto;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.blog-container {
+  height: auto;
+  width: 800px;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: 5px;
+}
+
+.blog-title {
+  line-height: 40px;
+  margin-top: 10px;
+  margin-left: 20px;
+}
+
+.search-section {
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 20px;
+}
+
+#searchInput {
+  width: 660px;
+  height: 30px;
+  border-radius: 5px;
+  border: 1px solid grey;
+  padding-left: 5px;
+}
+
+.action-button {
+  background-color: rgb(238, 238, 238);
+  text-align: center;
+  line-height: 30px;
+  width: 42px;
+  border-radius: 3px;
+  user-select: none;
+  border: 1px solid grey;
+  cursor: pointer;
+  transition: 0.3s ease-in-out
+}
+
+.action-button:hover {
+  transform: translateY(-1px);
+  background-color: rgb(200, 200, 200);
+}
+
+.blog-list {
+  padding-top: 10px;
+  margin: 0 20px;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.container td,
+th {
+  border: 1px solid rgb(220, 220, 220) !important;
+  padding: 0 5px;
+  text-align: center;
+}
+
+td {
+  line-height: 28px;
+}
+
+th {
+  background-color: #f0f0f0;
+  line-height: 40px;
+  font-size: 20px;
+}
+
+.action-group {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.action-item {
+  text-align: center;
+  line-height: 26px;
+  width: 38px;
+  border-radius: 3px;
+  user-select: none;
+  color: #fff;
+  cursor: pointer;
+  transition: 0.3s ease-in-out;
+}
+
+.edit-button {
+  background-color: rgb(0, 128, 0);
+}
+
+.delete-button {
+  background-color: rgb(255, 0, 0);
+}
+
+.edit-button:hover {
+  background-color: rgb(0, 100, 0);
+}
+
+.delete-button:hover {
+  background-color: rgb(200, 0, 0);
+}
+
+
+#mask-layer {
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  position: fixed;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+#modal-box {
+  position: absolute;
+  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;
+}
+
+.modal-table>p {
+  padding-bottom: 20px;
+  font-size: 30px;
+  font-weight: 800;
+  text-align: center;
+
+}
+#mask-layer table,tr,td{
+  border: none;
+}
+
+.operate {
+  padding: 20px;
+}
+
+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
+.hidden {
+  overflow: hidden;
+}
+```
+
diff --git "a/\351\231\210\346\200\235\345\223\262/20251224-js\345\215\232\345\256\242CRUD02.md" "b/\351\231\210\346\200\235\345\223\262/20251224-js\345\215\232\345\256\242CRUD02.md"
new file mode 100644
index 00000000..22baed41
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251224-js\345\215\232\345\256\242CRUD02.md"
@@ -0,0 +1,170 @@
+## 笔记
+
+老虎来也！！！老虎到此一游！！！
+
+## 作业
+
+### 实现增删改
+
+```js
+const url = 'https://api.9ihub.com/api/posts'
+
+// 初始化数据
+$(function () {
+    $('#mask-layer').addClass('hide')
+    $('.add').addClass('hide')
+    $('.update').addClass('hide')
+    let str = ``
+    fetch(url)
+        .then(res => res.json())
+        .then(data => {
+            data.sort((o1, o2) => o1.id - o2.id);
+            data.forEach(item => {
+                str += `<tr id="blog${item.id}">
+                      <td>${item.id}</td>
+                      <td class="title" >${item.title}</td>
+                      <td class="summary" >${item.summary}</td>
+                      <td class="author" >${item.author}</td>
+                      <td>${item.published_at}</td>
+                      <td>
+                          <div class="action-group">
+                              <div class="action-item edit-button" data-id=${item.id} onclick="blogId(this,${item.id})">编辑</div>
+                              <div class="action-item delete-button">删除</div>
+                          </div>
+                      </td>
+                  </tr>`
+            });
+            $('#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 = `<tr id="blog${created.id}">
+                      <td>${created.id}</td>
+                      <td class="title">${newTitle}</td>
+                      <td class="summary" >${newSummary}</td>
+                      <td class="author">${newAuthor}</td>
+                      <td>${created.published_at}</td>
+                      <td>
+                          <div class="action-group">
+                              <div class="action-item edit-button" data-id=${created.id} onclick="blogId(${created.id})">编辑</div>
+                              <div class="action-item delete-button">删除</div>
+                          </div>
+                      </td>
+                  </tr>`;
+            $('#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 = `<tr id="blog${updated.id}">
+                      <td>${updated.id}</td>
+                      <td class="title">${newTitle}</td>
+                      <td class="summary" >${newSummary}</td>
+                      <td class="author">${newAuthor}</td>
+                      <td>${updated.published_at}</td>
+                      <td>
+                          <div class="action-group">
+                              <div class="action-item edit-button" data-id=${updated.id} onclick="blogId(${updated.id})">编辑</div>
+                              <div class="action-item delete-button">删除</div>
+                          </div>
+                      </td>
+                  </tr>`;
+            $(`#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 00000000..94f2d7f8
--- /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 "<h1>Hello, My Website!</h1>" > /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 00000000..56a921db
--- /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 @@
+## 笔记
+
+<a href="http://www.lhchen.asia/"> 俄罗斯方块</a>
+
+## 作业
+
+<a href="http://www.lhchen.asia/"> 俄罗斯方块</a>
\ No newline at end of file
-- 
Gitee


From 593d920e0089c51dc0664f41de37babbf3363cf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=80=9D=E5=93=B2?= <a1987520x@163.com>
Date: Sun, 11 Jan 2026 21:36:59 +0800
Subject: [PATCH 13/13] 1

---
 .../20251229-\347\273\203\344\271\240.md"                         | 0
 .../20251231-\347\273\203\344\271\240.md"                         | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251229-\347\273\203\344\271\240.md"
 create mode 100644 "\351\231\210\346\200\235\345\223\262/20251231-\347\273\203\344\271\240.md"

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 00000000..e69de29b
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 00000000..e69de29b
-- 
Gitee


请输入标题：
请输入内容摘要：
请输入作者：
+ + +
请输入新标题：
请输入新内容摘要：
请输入新作者：
+ + +