diff --git "a/\351\231\210\346\226\271\346\227\255/readme.md" b/readme.md similarity index 74% rename from "\351\231\210\346\226\271\346\227\255/readme.md" rename to readme.md index 6dd49285fa5191a368689a2549021f21a13f884b..c0d5809c7b7a0ca903fbf260c1e7c8d5a28896f0 100644 --- "a/\351\231\210\346\226\271\346\227\255/readme.md" +++ b/readme.md @@ -161,4 +161,68 @@ ### 本地存储 ### 错误处理 ### 模块化(选修) -### 综合实战项目 \ No newline at end of file +### 综合实战项目 + + + +# 部署一个网站需要了解东西 + +## 域名(备案过的域名) +### 解析 +- 也叫域名绑定,是指将域名指向一个IP地址的过程 +- 在网络世界中,能找到服务器及其资源的唯一地址是IP地址 +### ssl证书(可选) + +## 服务器(带公网IP的linux服务器) +### 常用命令 +- 登录服务器 + - telnet 上古时期 + - SSH 现代时期 +- 创建文件 + - touch xxx 创建一个新的空文件 + - vim xxx.txt 打开/创建一个文件 +- 创建文件夹 + - mkdir +- 切换目录 + - cd +- 列出目录清单 + - ls 列出指定目录下的内容(如果未指定则指列出当前目录) +- 安装软件 + - apt install nginx -y +- 更新软件 + - apt upgrade -y +- 卸载软件 + - apt uninstall nginx -y +- 重启服务 +- 停止服务 +- 开启服务 +- 服务自启动 +- 管理软件命令 apt + - 更新软件源 apt update + - 更新软件 apt upgrade -y +### nginx +- 安装命令 + - apt install nginx -y + - 会被安装为一个服务 + - 检测服务状态 systemctl status nginx + - 启用nginx systemctl start nginx + - 禁用nginx systemctl stop nginx + - 重启nginx systemctl restart nginx + - 自启动nginx systemctl enable nginx +- 配置 + - 配置文件放在哪 + - /etc/nginx/conf.d + - 配置文件内容 + - ` + server { + listen 80; + server_name abc.liing.top; + + location / { + root /var/www/abc.liing.top; + index index.html; + } + } + ` +- 保证相应路径中有指定文件 + - /var/www/abc.liing.top \ No newline at end of file diff --git "a/\344\270\245\345\201\245\345\256\207/20251110-\345\210\235\350\257\206JS.md" "b/\344\270\245\345\201\245\345\256\207/20251110-\345\210\235\350\257\206JS.md" deleted file mode 100644 index 804b16cce8891d28a93f3bc0a3020be385fd727f..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251110-\345\210\235\350\257\206JS.md" +++ /dev/null @@ -1,141 +0,0 @@ -# JavaScript 引入 HTML 的三种方式 - -## 1. 行内引入(嵌入式) - -直接在 HTML 标签的事件属性中写入 JavaScript 代码。 - -```html - - - - 行内引入示例 - - - - - - -
- 悬停变色 -
- - - - - - - -``` - -## 2. 内部引入(内嵌式) - -在 HTML 文件内的 ` - - -``` - -## 3. 外部引入(文件式) - -将 JavaScript 代码写在单独的 `.js` 文件中,通过 `src` 属性引入。 - -### HTML 文件 (index.html) - -```html - - - - 外部引入示例 - - - - -

- - - - - -``` - -### JavaScript 文件 (script.js) - -```javascript -// 等待DOM加载完成 -document.addEventListener("DOMContentLoaded", function () { - const btn = document.getElementById("btn"); - const input = document.getElementById("textInput"); - const output = document.getElementById("output"); - - btn.addEventListener("click", function () { - output.textContent = "你点击了按钮!"; - }); - - input.addEventListener("input", function () { - output.textContent = "输入内容: " + this.value; - }); -}); -``` - -## 总结对比 - -| 方式 | 优点 | 缺点 | 适用场景 | -| ------------ | ------------------ | ------------------ | -------------------- | -| **行内引入** | 简单快速,易于测试 | 代码混乱,难以维护 | 简单测试,小功能 | -| **内部引入** | 代码集中,易于管理 | 只能在当前页面使用 | 单页面应用,简单项目 | -| **外部引入** | 代码复用,易于维护 | 需要额外 HTTP 请求 | 中大型项目,团队开发 | - -## 老子名言 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/老子名义.png) - -## 明日学院官网地址 - -- js 代码 - -```js -alert("http://www.mingrisoft.com"); -``` - -- html 代码 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/明日地址.png) diff --git "a/\344\270\245\345\201\245\345\256\207/20251112-js\347\232\204\346\225\260\346\215\256\347\261\273\345\236\213\357\274\214\345\270\270\351\207\217\345\222\214\345\217\230\351\207\217.md" "b/\344\270\245\345\201\245\345\256\207/20251112-js\347\232\204\346\225\260\346\215\256\347\261\273\345\236\213\357\274\214\345\270\270\351\207\217\345\222\214\345\217\230\351\207\217.md" deleted file mode 100644 index 665109335484a803e76e919b8979c538d4107121..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251112-js\347\232\204\346\225\260\346\215\256\347\261\273\345\236\213\357\274\214\345\270\270\351\207\217\345\222\214\345\217\230\351\207\217.md" +++ /dev/null @@ -1,175 +0,0 @@ -# JavaScript 基础语法详解 - -## 一、数据类型 - -### 基本类型(原始类型) - -1. **number** - 数字类型 - - - 整数:`42`、`-10` - - 浮点数:`3.14`、`0.5` - - 特殊值:`Infinity`、`-Infinity`、`NaN` - - 范围:±(2^53 - 1) - -2. **string** - 字符串类型 - - - 表示文本数据 - - 引号:`"双引号"`、`'单引号'`、`` `模板字符串` `` - - 转义字符:`\n`、`\t`、`\\` - -3. **boolean** - 布尔类型 - - - 只有两个值:`true`、`false` - - 用于逻辑判断 - -4. **undefined** - 未定义 - - - 变量声明但未赋值时的默认值 - - `let a;` → `a` 为 `undefined` - -5. **null** - 空值 - - - 表示空或不存在的对象引用 - - 需要显式赋值 - -6. **symbol** - 唯一值(ES6) - - - 创建唯一标识符:`Symbol('description')` - - 主要用于对象属性名 - -7. **bigint** - 大整数(ES2020) - - 表示任意精度的整数 - - 后缀 n:`123n`、`9007199254740991n` - -### 引用类型 - -1. **object** - 对象类型 - - 普通对象:`{ key: 'value' }` - - 数组:`[1, 2, 3]` - - 函数:`function() {}` - - 日期:`new Date()` - - 正则表达式:`/pattern/` - -## 二、变量与常量 - -### 声明方式 - -1. **var**(已淘汰) - - ```javascript - var name = "张三"; - ``` - - - 函数作用域 - - 存在变量提升 - - 可重复声明 - -2. **let**(推荐) - - ```javascript - let age = 25; - let score; // 可只声明不赋值 - ``` - - - 块级作用域(`{}` 内有效) - - 不存在变量提升 - - 不可重复声明 - - 可重新赋值 - -3. **const**(推荐) - ```javascript - const PI = 3.14159; - const user = { name: "李四" }; - ``` - - 块级作用域 - - 声明时必须赋值 - - 不可重新赋值(但对象属性可修改) - -### 命名规则 - -- 字母、数字、下划线、$ 组成 -- 不能以数字开头 -- 区分大小写 -- 不能使用保留字 - -## 编程训练 - -```html - -
- -
- -
- -
- -
- -
- -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/编程训练.png) - -## 实践与练习 - -```html - - - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/实践练习.png) diff --git "a/\344\270\245\345\201\245\345\256\207/20251113-js\347\232\204\350\241\250\350\276\276\345\274\217\345\222\214\350\277\220\347\256\227\347\254\246.md" "b/\344\270\245\345\201\245\345\256\207/20251113-js\347\232\204\350\241\250\350\276\276\345\274\217\345\222\214\350\277\220\347\256\227\347\254\246.md" deleted file mode 100644 index 819b0fa6e929792afe5154cde12918e59e9b57ff..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251113-js\347\232\204\350\241\250\350\276\276\345\274\217\345\222\214\350\277\220\347\256\227\347\254\246.md" +++ /dev/null @@ -1,460 +0,0 @@ -## 三、运算符 - -### 算术运算符 - -```javascript -10 + 5; // 15 加法 -10 - 5; // 5 减法 -10 * 5; // 50 乘法 -10 / 5; // 2 除法 -10 % 3; // 1 取余 -10 ** 2; // 100 指数 -``` - -### 赋值运算符 - -```javascript -let x = 10; -x += 5; // x = 15 -x -= 3; // x = 12 -x *= 2; // x = 24 -x /= 4; // x = 6 -``` - -### 比较运算符 - -```javascript -// 严格相等(推荐) -5 === 5; // true -5 === "5"; // false - -// 宽松相等 -5 == 5; // true -5 == "5"; // true - -// 其他比较 -5 !== 3; // true -5 > 3; // true -5 <= 10; // true -``` - -### 逻辑运算符 - -```javascript -// 与运算 -true && false; // false -5 > 3 && 2 < 4; // true - -// 或运算 -true || false; // true -5 > 3 || 2 > 4; // true - -// 非运算 -!true; // false -!(5 > 3); // false -``` - -### 其他运算符 - -```javascript -// 三元运算符 -age >= 18 ? "成年" : "未成年"; - -// 类型运算符 -typeof 42; // "number" -typeof "hello"; // "string" - -// 空值合并运算符(ES2020) -null ?? "默认值"; // "默认值" -``` - -## 四、表达式 - -### 定义 - -- 任何能产生值的代码单元 -- 由操作数和运算符组成 - -### 常见表达式类型 - -```javascript -// 算术表达式 -(10 + 5) * 2; // 30 - -// 字符串表达式 -"Hello " + "World"; // "Hello World" - -// 逻辑表达式 -age >= 18 && hasID; // 布尔值 - -// 赋值表达式 -x = 10 + 5; // 15 - -// 函数调用表达式 -Math.max(1, 2, 3); // 3 - -// 对象属性访问 -user.name; // 属性值 -``` - -## 五、数据类型转换 - -### 显式转换(强制转换) - -#### 转为数字 - -```javascript -Number("123"); // 123 -Number("123abc"); // NaN -Number(true); // 1 -Number(false); // 0 -Number(null); // 0 -Number(undefined); // NaN - -parseInt("123px"); // 123 -parseFloat("3.14cm"); // 3.14 -``` - -#### 转为字符串 - -```javascript -String(123); // "123" -String(true); // "true" -String(null); // "null" -String(undefined)( - // "undefined" - - 123 -).toString(); // "123" -``` - -#### 转为布尔值 - -```javascript -Boolean(0); // false -Boolean(""); // false -Boolean(null); // false -Boolean(undefined); // false -Boolean(NaN); // false -Boolean(1); // true -Boolean("hello"); // true -Boolean([]); // true -Boolean({}); // true -``` - -### 隐式转换(自动转换) - -#### 字符串拼接 - -```javascript -"5" + 2; // "52" -"5" + true; // "5true" -"5" + null; // "5null" -"5" + undefined; // "5undefined" -``` - -#### 算术运算 - -```javascript -"5" - 2; // 3 -"5" * "2"; // 10 -"5" / "2"; // 2.5 -"abc" - 1; // NaN -``` - -#### 逻辑上下文 - -```javascript -if (0) { -} // false -if ("hello") { -} // true -if (null) { -} // false - -!!0; // false -!!"hello"; // true -``` - -#### 相等比较 - -```javascript -"5" == 5; // true -"0" == false; // true -null == undefined; // true -``` - -### 特殊转换规则 - -#### 对象转原始值 - -```javascript -// 对象转字符串 -String({}); // "[object Object]" -String([1, 2]); // "1,2" - -// 对象转数字 -Number({}); // NaN -Number([1]); // 1 -Number([]); // 0 -``` - -#### 布尔转换的 falsy 值 - -- `false` -- `0`、`-0`、`0n` -- `""`、`''`、` ` `` -- `null` -- `undefined` -- `NaN` - -所有其他值都为 truthy。 - -### 最佳实践 - -1. 使用 `===` 和 `!==` 代替 `==` 和 `!=` -2. 显式转换优于隐式转换 -3. 使用 `Number()`、`String()`、`Boolean()` 进行明确转换 - -## 实践与练习 - -```html - - - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/循环训练.png) - -## 电影院 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/电影院.png) - -## 第三章训练 - -```html - - - - - - Document - - - - - - - - - - - - -``` - -- 效果图 - -![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/训练三.png) diff --git "a/\344\270\245\345\201\245\345\256\207/20251117-\345\207\275\346\225\260\347\232\204\345\256\232\344\271\211\357\274\214\350\260\203\347\224\250\357\274\214\345\217\202\346\225\260.md" "b/\344\270\245\345\201\245\345\256\207/20251117-\345\207\275\346\225\260\347\232\204\345\256\232\344\271\211\357\274\214\350\260\203\347\224\250\357\274\214\345\217\202\346\225\260.md" deleted file mode 100644 index 4161ff7b4f91097c3891f1d7583f90c7de9f27c3..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251117-\345\207\275\346\225\260\347\232\204\345\256\232\344\271\211\357\274\214\350\260\203\347\224\250\357\274\214\345\217\202\346\225\260.md" +++ /dev/null @@ -1,238 +0,0 @@ -# JavaScript 函数笔记 - -## 1. 函数定义 - -### 1.1 函数声明 - -**说明:** 使用 function 关键字定义函数,存在函数提升 - -```javascript -function greet() { - console.log("Hello!"); -} -``` - -### 1.2 函数表达式 - -**说明:** 将函数赋值给变量,不存在函数提升 - -```javascript -const greet = function () { - console.log("Hello!"); -}; -``` - -### 1.3 箭头函数 - -**说明:** ES6 新语法,简洁的函数写法 - -```javascript -const greet = () => { - console.log("Hello!"); -}; -``` - -### 1.4 构造函数 - -**说明:** 使用 Function 构造函数创建函数(不推荐) - -```javascript -const greet = new Function('console.log("Hello!")'); -``` - -## 2. 函数调用 - -### 2.1 直接调用 - -**说明:** 使用函数名加括号调用 - -```javascript -function sayHello() { - console.log("Hello World!"); -} -sayHello(); // 输出: Hello World! -``` - -### 2.2 方法调用 - -**说明:** 作为对象的方法调用 - -```javascript -const person = { - name: "张三", - introduce: function () { - console.log("我叫" + this.name); - }, -}; -person.introduce(); // 输出: 我叫张三 -``` - -### 2.3 构造函数调用 - -**说明:** 使用 new 关键字调用构造函数 - -```javascript -function Person(name) { - this.name = name; -} -const person = new Person("李四"); -``` - -### 2.4 间接调用 - -**说明:** 使用 call、apply 方法调用 - -```javascript -function introduce(greeting) { - console.log(greeting + this.name); -} -const person = { name: "王五" }; -introduce.call(person, "你好,"); // 输出: 你好,王五 -``` - -## 3. 函数参数 - -### 3.1 形参和实参 - -**说明:** 形参是定义时的参数,实参是调用时传入的值 - -```javascript -function add(a, b) { - // a, b 是形参 - return a + b; -} -add(5, 3); // 5, 3 是实参 -``` - -### 3.2 默认参数 - -**说明:** ES6 支持为参数设置默认值 - -```javascript -function greet(name = "游客") { - console.log("你好," + name); -} -greet(); // 输出: 你好,游客 -greet("张三"); // 输出: 你好,张三 -``` - -### 3.3 剩余参数 - -**说明:** 使用 ... 语法接收多个参数为数组 - -```javascript -function sum(...numbers) { - return numbers.reduce((total, num) => total + num, 0); -} -sum(1, 2, 3, 4); // 返回: 10 -``` - -### 3.4 参数解构 - -**说明:** 直接解构对象或数组参数 - -```javascript -function printUser({ name, age }) { - console.log(`${name} 今年 ${age} 岁`); -} -printUser({ name: "张三", age: 25 }); // 输出: 张三 今年 25 岁 -``` - -### 3.5 arguments 对象 - -**说明:** 函数内置的类数组对象,包含所有参数 - -```javascript -function showArgs() { - console.log(arguments); -} -showArgs(1, 2, 3); // 输出: [1, 2, 3] -``` - -### 3.6 参数传递方式 - -**说明:** 基本类型按值传递,对象类型按引用传递 - -```javascript -// 基本类型(按值传递) -function changeValue(x) { - x = 10; -} -let num = 5; -changeValue(num); -console.log(num); // 输出: 5 - -// 对象类型(按引用传递) -function changeObj(obj) { - obj.name = "修改后"; -} -let person = { name: "原始" }; -changeObj(person); -console.log(person.name); // 输出: 修改后 -``` - -## 4. 返回值 - -### 4.1 return 语句 - -**说明:** 使用 return 返回函数结果,不写 return 返回 undefined - -```javascript -function multiply(a, b) { - return a * b; -} -const result = multiply(4, 5); // result = 20 - -function noReturn() { - // 没有 return 语句 -} -const value = noReturn(); // value = undefined -``` - -## 5. 综合示例 - -```javascript -// 函数定义 -function calculate(operation, ...numbers) { - switch (operation) { - case "add": - return numbers.reduce((sum, num) => sum + num, 0); - case "multiply": - return numbers.reduce((product, num) => product * num, 1); - default: - return 0; - } -} - -// 函数调用 -const sum = calculate("add", 1, 2, 3, 4); // 返回: 10 -const product = calculate("multiply", 2, 3, 4); // 返回: 24 -``` - -## 练习题 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/函数训练12.png) diff --git "a/\344\270\245\345\201\245\345\256\207/20251119-js\345\207\275\346\225\260\347\232\204\345\265\214\345\245\227\350\260\203\347\224\250\357\274\214\351\200\222\345\275\222\345\207\275\346\225\260\357\274\214\345\206\205\347\275\256\345\207\275\346\225\260\345\214\277\345\220\215\345\207\275\346\225\260.md" "b/\344\270\245\345\201\245\345\256\207/20251119-js\345\207\275\346\225\260\347\232\204\345\265\214\345\245\227\350\260\203\347\224\250\357\274\214\351\200\222\345\275\222\345\207\275\346\225\260\357\274\214\345\206\205\347\275\256\345\207\275\346\225\260\345\214\277\345\220\215\345\207\275\346\225\260.md" deleted file mode 100644 index ecc236238d900a54bbb508e4e9a83473ee7e5c61..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251119-js\345\207\275\346\225\260\347\232\204\345\265\214\345\245\227\350\260\203\347\224\250\357\274\214\351\200\222\345\275\222\345\207\275\346\225\260\357\274\214\345\206\205\347\275\256\345\207\275\346\225\260\345\214\277\345\220\215\345\207\275\346\225\260.md" +++ /dev/null @@ -1,496 +0,0 @@ -# JavaScript 高级函数笔记 - -## 1. 函数嵌套调用 - -### 1.1 基本嵌套调用 - -**说明:** 在一个函数内部调用另一个函数 - -```javascript -function add(a, b) { - return a + b; -} - -function multiply(a, b) { - return a * b; -} - -function calculate(a, b) { - const sum = add(a, b); // 嵌套调用 add 函数 - const product = multiply(a, b); // 嵌套调用 multiply 函数 - return { sum, product }; -} - -console.log(calculate(3, 4)); // 输出: {sum: 7, product: 12} -``` - -### 1.2 链式嵌套 - -**说明:** 一个函数的返回值作为另一个函数的参数 - -```javascript -function double(x) { - return x * 2; -} - -function square(x) { - return x * x; -} - -const result = square(double(5)); // double(5)返回10,然后square(10)返回100 -console.log(result); // 输出: 100 -``` - -### 1.3 多层嵌套 - -**说明:** 多个函数层层嵌套调用 - -```javascript -function formatText(text) { - return text.trim(); -} - -function toUpperCase(text) { - return text.toUpperCase(); -} - -function addExclamation(text) { - return text + "!"; -} - -function processText(text) { - return addExclamation(toUpperCase(formatText(text))); -} - -console.log(processText(" hello ")); // 输出: "HELLO!" -``` - -## 2. 递归函数 - -### 2.1 基本递归 - -**说明:** 函数调用自身,必须有终止条件 - -```javascript -function factorial(n) { - if (n === 1) { - // 终止条件 - return 1; - } - return n * factorial(n - 1); // 递归调用 -} - -console.log(factorial(5)); // 输出: 120 (5*4*3*2*1) -``` - -### 2.2 斐波那契数列 - -**说明:** 经典的递归案例,每个数是前两个数之和 - -```javascript -function fibonacci(n) { - if (n <= 1) return n; // 终止条件 - return fibonacci(n - 1) + fibonacci(n - 2); // 递归调用 -} - -console.log(fibonacci(6)); // 输出: 8 (0,1,1,2,3,5,8) -``` - -### 2.3 递归遍历数组 - -**说明:** 使用递归处理数组元素 - -```javascript -function sumArray(arr, index = 0) { - if (index >= arr.length) return 0; // 终止条件 - return arr[index] + sumArray(arr, index + 1); // 递归调用 -} - -console.log(sumArray([1, 2, 3, 4, 5])); // 输出: 15 -``` - -### 2.4 递归注意事项 - -**说明:** 递归必须有基线条件,否则会栈溢出 - -```javascript -// 错误的递归:缺少终止条件 -function infiniteRecursion() { - return infiniteRecursion(); // 栈溢出! -} - -// 正确的递归:有明确的终止条件 -function countdown(n) { - if (n <= 0) { - console.log("结束!"); - return; - } - console.log(n); - countdown(n - 1); -} - -countdown(3); // 输出: 3, 2, 1, 结束! -``` - -## 3. JavaScript 内置函数 - -### 3.1 数学函数 - -**说明:** Math 对象提供的数学计算函数 - -```javascript -console.log(Math.abs(-5)); // 输出: 5 (绝对值) -console.log(Math.max(1, 5, 3)); // 输出: 5 (最大值) -console.log(Math.round(3.7)); // 输出: 4 (四舍五入) -console.log(Math.random()); // 输出: 0-1之间的随机数 -``` - -### 3.2 字符串函数 - -**说明:** 字符串处理相关函数 - -```javascript -const str = "Hello World"; -console.log(str.length); // 输出: 11 (字符串长度) -console.log(str.toUpperCase()); // 输出: "HELLO WORLD" (转大写) -console.log(str.indexOf("World")); // 输出: 6 (查找子串位置) -console.log(str.split(" ")); // 输出: ["Hello", "World"] (分割字符串) -``` - -### 3.3 数组函数 - -**说明:** 数组操作相关函数 - -```javascript -const arr = [1, 2, 3]; -console.log(arr.push(4)); // 输出: 4 (添加元素,返回新长度) -console.log(arr.pop()); // 输出: 4 (删除最后一个元素) -console.log(arr.map((x) => x * 2)); // 输出: [2, 4, 6] (映射新数组) -console.log(arr.filter((x) => x > 1)); // 输出: [2, 3] (过滤元素) -``` - -### 3.4 类型转换函数 - -**说明:** 数据类型转换函数 - -```javascript -console.log(Number("123")); // 输出: 123 (转数字) -console.log(String(123)); // 输出: "123" (转字符串) -console.log(Boolean(0)); // 输出: false (转布尔值) -console.log(parseInt("100px")); // 输出: 100 (解析整数) -``` - -### 3.5 时间函数 - -**说明:** 日期和时间相关函数 - -```javascript -const now = new Date(); -console.log(now.getFullYear()); // 输出: 当前年份 -console.log(now.getMonth() + 1); // 输出: 当前月份 (0-11) -console.log(now.getDate()); // 输出: 当前日期 -console.log(Date.now()); // 输出: 时间戳 -``` - -## 4. 匿名函数 - -### 4.1 函数表达式 - -**说明:** 没有函数名的函数,赋值给变量 - -```javascript -const greet = function (name) { - return "Hello, " + name; -}; -console.log(greet("Alice")); // 输出: "Hello, Alice" -``` - -### 4.2 立即执行函数 (IIFE) - -**说明:** 定义后立即执行的匿名函数 - -```javascript -(function () { - console.log("立即执行!"); -})(); // 输出: "立即执行!" - -const result = (function (a, b) { - return a + b; -})(5, 3); -console.log(result); // 输出: 8 -``` - -### 4.3 回调函数 - -**说明:** 作为参数传递给其他函数的匿名函数 - -```javascript -// setTimeout 回调 -setTimeout(function () { - console.log("3秒后执行"); -}, 3000); - -// 数组方法回调 -const numbers = [1, 2, 3, 4]; -const doubled = numbers.map(function (num) { - return num * 2; -}); -console.log(doubled); // 输出: [2, 4, 6, 8] -``` - -### 4.4 箭头函数作为匿名函数 - -**说明:** 使用箭头语法定义匿名函数 - -```javascript -// 箭头函数表达式 -const multiply = (a, b) => a * b; -console.log(multiply(4, 5)); // 输出: 20 - -// 箭头函数作为回调 -const numbers = [1, 2, 3]; -const squares = numbers.map((x) => x * x); -console.log(squares); // 输出: [1, 4, 9] - -// 立即执行的箭头函数 -(() => { - console.log("箭头函数立即执行!"); -})(); // 输出: "箭头函数立即执行!" -``` - -### 4.5 事件处理匿名函数 - -**说明:** 作为事件处理器的匿名函数 - -```javascript -// 假设有HTML按钮: -document.getElementById("myBtn").addEventListener("click", function () { - console.log("按钮被点击了!"); -}); - -// 箭头函数版本 -document.getElementById("myBtn").addEventListener("click", () => { - console.log("按钮被点击了!"); -}); -``` - -## 5. 综合示例 - -```javascript -// 综合使用:递归 + 嵌套 + 匿名函数 -function processData(data, callback) { - // 递归处理嵌套数据 - function traverse(obj) { - if (typeof obj === "object" && obj !== null) { - Object.keys(obj).forEach((key) => { - obj[key] = traverse(obj[key]); // 递归调用 - }); - return obj; - } - // 使用回调函数处理值 - return callback ? callback(obj) : obj; - } - - return traverse(data); -} - -// 使用匿名函数作为回调 -const result = processData( - { a: 1, b: { c: 2, d: 3 } }, - function (x) { - return x * 2; - } // 匿名回调函数 -); -console.log(result); // 输出: {a: 2, b: {c: 4, d: 6}} -``` - -## 训练 3~8 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/微信图片_20251123122432_261_54.png) - -## 综合练习 - -```css - -``` - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/屏幕录制 2025-11-23 122412.gif) - -## 斐波那契数列 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/微信图片_20251123122310_260_54.png) diff --git "a/\344\270\245\345\201\245\345\256\207/20251120-math,date,event\345\257\271\350\261\241.md" "b/\344\270\245\345\201\245\345\256\207/20251120-math,date,event\345\257\271\350\261\241.md" deleted file mode 100644 index 5801364822a680dd8200db28ea00688f7a49c4ad..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251120-math,date,event\345\257\271\350\261\241.md" +++ /dev/null @@ -1,322 +0,0 @@ -# JavaScript 内置对象用法总结 - -## 1. Math 对象 - -### 1.1 数学常数 - -```javascript -Math.PI; // 圆周率 π ≈ 3.14159 -Math.E; // 自然常数 e ≈ 2.718 -Math.SQRT2; // 2的平方根 ≈ 1.414 -``` - -### 1.2 取整方法 - -```javascript -Math.round(4.7); // 5 - 四舍五入 -Math.floor(4.7); // 4 - 向下取整 -Math.ceil(4.3); // 5 - 向上取整 -Math.trunc(4.7); // 4 - 去除小数部分 -``` - -### 1.3 随机数生成 - -```javascript -Math.random(); // 0-1之间的随机数 -Math.floor(Math.random() * 100); // 0-99的随机整数 -``` - -### 1.4 最大值最小值 - -```javascript -Math.max(1, 5, 3); // 5 - 返回最大值 -Math.min(1, 5, 3); // 1 - 返回最小值 -``` - -### 1.5 幂和平方根 - -```javascript -Math.pow(2, 3); // 8 - 2的3次方 -Math.sqrt(16); // 4 - 平方根 -Math.cbrt(8); // 2 - 立方根 -``` - -### 1.6 三角函数 - -```javascript -Math.sin(Math.PI / 2); // 1 - 正弦函数 -Math.cos(Math.PI); // -1 - 余弦函数 -Math.tan(Math.PI / 4); // 1 - 正切函数 -``` - -## 2. Date 对象 - -### 2.1 创建日期对象 - -```javascript -new Date(); // 当前时间 -new Date("2024-01-15"); // 指定日期字符串 -new Date(2024, 0, 15); // 指定年月日(月份0-11) -``` - -### 2.2 获取日期时间 - -```javascript -const now = new Date(); -now.getFullYear(); // 2024 - 年份 -now.getMonth(); // 0 - 月份(0-11) -now.getDate(); // 15 - 日期(1-31) -now.getDay(); // 1 - 星期(0-6) -now.getHours(); // 10 - 小时(0-23) -now.getMinutes(); // 30 - 分钟(0-59) -``` - -### 2.3 设置日期时间 - -```javascript -const date = new Date(); -date.setFullYear(2025); // 设置年份 -date.setMonth(5); // 设置月份(0-11) -date.setDate(20); // 设置日期 -date.setHours(15, 30, 0); // 设置小时、分钟、秒 -``` - -### 2.4 日期格式化 - -```javascript -const now = new Date(); -now.toString(); // "Mon Jan 15 2024 10:30:25 GMT+0800" -now.toDateString(); // "Mon Jan 15 2024" -now.toTimeString(); // "10:30:25 GMT+0800" -now.toLocaleString(); // "2024/1/15 10:30:25" -``` - -### 2.5 时间戳 - -```javascript -const now = new Date(); -now.getTime(); // 1705309825123 - 毫秒时间戳 -Date.now(); // 1705309825123 - 当前时间戳 -``` - -### 2.6 日期计算 - -```javascript -const date1 = new Date("2024-01-01"); -const date2 = new Date("2024-01-15"); -const diff = date2 - date1; // 1209600000 - 毫秒差 -const days = diff / (1000 * 60 * 60 * 24); // 14 - 天数差 -``` - -## 3. Event 对象 - -### 3.1 事件监听 - -```javascript -// 添加事件监听 -element.addEventListener("click", function (event) { - console.log("元素被点击了"); -}); - -// 移除事件监听 -function handleClick(event) { - console.log("点击事件"); -} -element.removeEventListener("click", handleClick); -``` - -### 3.2 事件对象属性 - -```javascript -element.addEventListener("click", function (e) { - e.target; // 触发事件的元素 - e.currentTarget; // 绑定事件的元素 - e.type; // "click" - 事件类型 - e.clientX; // 50 - 鼠标X坐标 - e.clientY; // 100 - 鼠标Y坐标 - e.key; // "Enter" - 按键名称 -}); -``` - -### 3.3 阻止默认行为 - -```javascript -// 阻止链接跳转 -link.addEventListener("click", function (e) { - e.preventDefault(); - console.log("阻止了默认跳转行为"); -}); - -// 阻止表单提交 -form.addEventListener("submit", function (e) { - e.preventDefault(); - console.log("阻止了表单提交"); -}); -``` - -### 3.4 阻止事件冒泡 - -```javascript -child.addEventListener("click", function (e) { - e.stopPropagation(); - console.log("子元素点击,阻止冒泡到父元素"); -}); - -parent.addEventListener("click", function () { - console.log("父元素点击"); // 不会执行 -}); -``` - -### 3.5 鼠标事件 - -```javascript -element.addEventListener("click", function (e) { - console.log("单击事件"); -}); - -element.addEventListener("dblclick", function (e) { - console.log("双击事件"); -}); - -element.addEventListener("mouseover", function (e) { - console.log("鼠标移入"); -}); - -element.addEventListener("mouseout", function (e) { - console.log("鼠标移出"); -}); -``` - -### 3.6 键盘事件 - -```javascript -document.addEventListener("keydown", function (e) { - console.log(`按下按键: ${e.key}, 键码: ${e.keyCode}`); -}); - -document.addEventListener("keyup", function (e) { - console.log(`释放按键: ${e.key}`); -}); -``` - -### 3.7 表单事件 - -```javascript -input.addEventListener("focus", function (e) { - console.log("输入框获得焦点"); -}); - -input.addEventListener("blur", function (e) { - console.log("输入框失去焦点"); -}); - -input.addEventListener("input", function (e) { - console.log("输入内容:", e.target.value); -}); - -input.addEventListener("change", function (e) { - console.log("内容改变:", e.target.value); -}); -``` - -### 3.8 事件委托 - -```javascript -// 使用事件委托处理动态元素 -list.addEventListener("click", function (e) { - if (e.target.tagName === "LI") { - console.log("点击了列表项:", e.target.textContent); - } -}); -``` - -## 训练 1~3 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/微信图片_20251123122538_262_54.png) - -## 综合练习 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/微信图片_20251123122603_263_54.png) diff --git "a/\344\270\245\345\201\245\345\256\207/20251121-\346\225\260\347\273\204.md" "b/\344\270\245\345\201\245\345\256\207/20251121-\346\225\260\347\273\204.md" deleted file mode 100644 index 3d3e1545aa08c320613f64de8c426a8a547b6838..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251121-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,208 +0,0 @@ -# JavaScript 数组用法总结 - -## 1. 创建数组 - -### 1.1 字面量创建 -```javascript -const arr = [1, 2, 3, 4, 5] -``` - -### 1.2 构造函数创建 -```javascript -const arr = new Array(1, 2, 3) -``` - -### 1.3 创建空数组 -```javascript -const empty = [] -const withSize = new Array(5) // 创建长度为5的空数组 -``` - -## 2. 访问和修改元素 - -### 2.1 访问元素 -```javascript -const arr = ['a', 'b', 'c'] -console.log(arr[0]) // 'a' - 访问第一个元素 -``` - -### 2.2 修改元素 -```javascript -arr[1] = 'x' // ['a', 'x', 'c'] -``` - -### 2.3 数组长度 -```javascript -console.log(arr.length) // 3 -``` - -## 3. 添加和删除元素 - -### 3.1 末尾添加(push) -```javascript -arr.push('d') // ['a', 'b', 'c', 'd'] -``` - -### 3.2 末尾删除(pop) -```javascript -arr.pop() // ['a', 'b'] - 返回删除的元素 -``` - -### 3.3 开头添加(unshift) -```javascript -arr.unshift('z') // ['z', 'a', 'b', 'c'] -``` - -### 3.4 开头删除(shift) -```javascript -arr.shift() // ['a', 'b', 'c'] - 返回删除的元素 -``` - -## 4. 数组遍历 - -### 4.1 for循环 -```javascript -for (let i = 0; i < arr.length; i++) { - console.log(arr[i]) -} -``` - -### 4.2 forEach方法 -```javascript -arr.forEach(item => console.log(item)) -``` - -### 4.3 for...of循环 -```javascript -for (const item of arr) { - console.log(item) -} -``` - -## 5. 数组转换方法 - -### 5.1 map - 映射新数组 -```javascript -const doubled = [1, 2, 3].map(x => x * 2) // [2, 4, 6] -``` - -### 5.2 filter - 过滤元素 -```javascript -const evens = [1, 2, 3, 4].filter(x => x % 2 === 0) // [2, 4] -``` - -### 5.3 reduce - 累计计算 -```javascript -const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0) // 6 -``` - -## 6. 查找和判断 - -### 6.1 find - 查找元素 -```javascript -const found = [1, 2, 3].find(x => x > 1) // 2 -``` - -### 6.2 includes - 包含检查 -```javascript -const hasTwo = [1, 2, 3].includes(2) // true -``` - -### 6.3 indexOf - 查找索引 -```javascript -const index = [1, 2, 3].indexOf(2) // 1 -``` - -## 7. 数组操作 - -### 7.1 slice - 切片 -```javascript -const arr = [1, 2, 3, 4, 5] -const part = arr.slice(1, 3) // [2, 3] - 不改变原数组 -``` - -### 7.2 splice - 删除/添加 -```javascript -arr.splice(1, 2, 'a', 'b') // 从索引1删除2个元素,添加'a','b' -``` - -### 7.3 concat - 合并数组 -```javascript -const newArr = [1, 2].concat([3, 4]) // [1, 2, 3, 4] -``` - -## 8. 排序和反转 - -### 8.1 sort - 排序 -```javascript -const sorted = [3, 1, 2].sort() // [1, 2, 3] -``` - -### 8.2 reverse - 反转 -```javascript -const reversed = [1, 2, 3].reverse() // [3, 2, 1] -``` - -## 9. 数组判断 - -### 9.1 Array.isArray -```javascript -Array.isArray([1, 2, 3]) // true -Array.isArray('hello') // false -``` - -### 9.2 every - 所有元素满足条件 -```javascript -const allPositive = [1, 2, 3].every(x => x > 0) // true -``` - -### 9.3 some - 至少一个元素满足条件 -```javascript -const hasNegative = [1, -2, 3].some(x => x < 0) // true -``` - -## 10. 字符串转换 - -### 10.1 join - 数组转字符串 -```javascript -const str = ['a', 'b', 'c'].join('-') // 'a-b-c' -``` - -### 10.2 split - 字符串转数组 -```javascript -const arr = 'a,b,c'.split(',') // ['a', 'b', 'c'] -``` - -## 11. 其他实用方法 - -### 11.1 fill - 填充数组 -```javascript -const filled = new Array(3).fill(0) // [0, 0, 0] -``` - -### 11.2 flat - 数组扁平化 -```javascript -const flattened = [1, [2, 3]].flat() // [1, 2, 3] -``` - -### 11.3 findIndex - 查找索引 -```javascript -const index = [1, 2, 3].findIndex(x => x > 1) // 1 -``` - -## 12. 数组解构 - -### 12.1 基本解构 -```javascript -const [first, second] = [1, 2, 3] // first=1, second=2 -``` - -### 12.2 跳过元素 -```javascript -const [first, , third] = [1, 2, 3] // first=1, third=3 -``` - -### 12.3 剩余元素 -```javascript -const [first, ...rest] = [1, 2, 3, 4] // first=1, rest=[2,3,4] -``` \ No newline at end of file diff --git "a/\344\270\245\345\201\245\345\256\207/20251124-String\345\257\271\350\261\241.md" "b/\344\270\245\345\201\245\345\256\207/20251124-String\345\257\271\350\261\241.md" deleted file mode 100644 index febdaf3cf43649390b7863244e6106258e77ab09..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251124-String\345\257\271\350\261\241.md" +++ /dev/null @@ -1,367 +0,0 @@ -# JavaScript String 对象总结 - -## 字符串创建 - -### 字面量创建 - -```javascript -const str1 = "Hello World"; -const str2 = "Hello World"; -const str3 = `Hello World`; -``` - -### 构造函数创建 - -```javascript -const str = new String("Hello World"); -``` - -## 字符串属性 - -### length - 字符串长度 - -```javascript -const str = "Hello"; -console.log(str.length); // 5 -``` - -## 字符串访问方法 - -### charAt() - 获取指定位置字符 - -```javascript -const str = "Hello"; -console.log(str.charAt(1)); // 'e' -``` - -### charCodeAt() - 获取字符编码 - -```javascript -const str = "Hello"; -console.log(str.charCodeAt(1)); // 101 -``` - -### 方括号索引 - -```javascript -const str = "Hello"; -console.log(str[1]); // 'e' -``` - -## 字符串查找方法 - -### indexOf() - 查找子串位置 - -```javascript -const str = "Hello World"; -console.log(str.indexOf("World")); // 6 -``` - -### lastIndexOf() - 从后往前查找 - -```javascript -const str = "Hello World World"; -console.log(str.lastIndexOf("World")); // 12 -``` - -### includes() - 是否包含子串 - -```javascript -const str = "Hello World"; -console.log(str.includes("World")); // true -``` - -### startsWith() - 是否以指定字符串开头 - -```javascript -const str = "Hello World"; -console.log(str.startsWith("Hello")); // true -``` - -### endsWith() - 是否以指定字符串结尾 - -```javascript -const str = "Hello World"; -console.log(str.endsWith("World")); // true -``` - -## 字符串截取方法 - -### slice() - 截取子串 - -```javascript -const str = "Hello World"; -console.log(str.slice(0, 5)); // 'Hello' -console.log(str.slice(-5)); // 'World' -``` - -### substring() - 截取子串 - -```javascript -const str = "Hello World"; -console.log(str.substring(0, 5)); // 'Hello' -``` - -### substr() - 从指定位置截取指定长度 - -```javascript -const str = "Hello World"; -console.log(str.substr(6, 5)); // 'World' -``` - -## 字符串修改方法 - -### toUpperCase() - 转为大写 - -```javascript -const str = "Hello"; -console.log(str.toUpperCase()); // 'HELLO' -``` - -### toLowerCase() - 转为小写 - -```javascript -const str = "HELLO"; -console.log(str.toLowerCase()); // 'hello' -``` - -### replace() - 替换字符串 - -```javascript -const str = "Hello World"; -console.log(str.replace("World", "JavaScript")); // 'Hello JavaScript' -``` - -### replaceAll() - 替换所有匹配项 - -```javascript -const str = "apple banana apple"; -console.log(str.replaceAll("apple", "orange")); // 'orange banana orange' -``` - -### trim() - 去除两端空格 - -```javascript -const str = " Hello World "; -console.log(str.trim()); // 'Hello World' -``` - -### trimStart() / trimEnd() - 去除首尾空格 - -```javascript -const str = " Hello World "; -console.log(str.trimStart()); // 'Hello World ' -console.log(str.trimEnd()); // ' Hello World' -``` - -## 字符串分割和连接 - -### split() - 分割字符串 - -```javascript -const str = "apple,banana,orange"; -console.log(str.split(",")); // ['apple', 'banana', 'orange'] -``` - -### concat() - 连接字符串 - -```javascript -const str1 = "Hello"; -const str2 = "World"; -console.log(str1.concat(" ", str2)); // 'Hello World' -``` - -## 字符串比较 - -### localeCompare() - 本地化比较 - -```javascript -const str1 = "apple"; -const str2 = "banana"; -console.log(str1.localeCompare(str2)); // -1 (表示str1在str2之前) -``` - -## 字符串重复和填充 - -### repeat() - 重复字符串 - -```javascript -const str = "Hello"; -console.log(str.repeat(3)); // 'HelloHelloHello' -``` - -### padStart() - 头部填充 - -```javascript -const str = "5"; -console.log(str.padStart(3, "0")); // '005' -``` - -### padEnd() - 尾部填充 - -```javascript -const str = "5"; -console.log(str.padEnd(3, "0")); // '500' -``` - -## 模板字符串 - -### 基本用法 - -```javascript -const name = "John"; -const age = 30; -console.log(`My name is ${name} and I'm ${age} years old.`); -// 'My name is John and I'm 30 years old.' -``` - -### 多行字符串 - -```javascript -const multiLine = ` - This is - a multi-line - string -`; -``` - -### 标签模板 - -```javascript -function highlight(strings, ...values) { - return strings.reduce( - (result, str, i) => `${result}${str}${values[i] || ""}`, - "" - ); -} - -const name = "John"; -const age = 30; -console.log(highlight`Hello ${name}, you are ${age} years old.`); -``` - -## 原始字符串 - -### String.raw - 原始字符串 - -```javascript -const path = String.raw`C:\Development\profile\aboutme.html`; -console.log(path); // 'C:\Development\profile\aboutme.html' -``` - -## 字符串迭代 - -### for...of 循环 - -```javascript -const str = "Hello"; -for (const char of str) { - console.log(char); // H, e, l, l, o -} -``` - -### 扩展运算符 - -```javascript -const str = "Hello"; -console.log([...str]); // ['H', 'e', 'l', 'l', 'o'] -``` - -## 训练 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第七章训练.png) - -## 综合 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第七章综合.gif) diff --git "a/\344\270\245\345\201\245\345\256\207/20251124-\346\225\260\347\273\204\357\274\214\351\233\206\345\220\210\357\274\214\350\277\255\344\273\243\345\231\250.md" "b/\344\270\245\345\201\245\345\256\207/20251124-\346\225\260\347\273\204\357\274\214\351\233\206\345\220\210\357\274\214\350\277\255\344\273\243\345\231\250.md" deleted file mode 100644 index 06b4a67060028fefc2629e81dc62411081e85b57..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251124-\346\225\260\347\273\204\357\274\214\351\233\206\345\220\210\357\274\214\350\277\255\344\273\243\345\231\250.md" +++ /dev/null @@ -1,182 +0,0 @@ -# JavaScript 中数组、Map、Set 和迭代器总结 - -## 数组 (Array) - -### 基本迭代方法 - -```javascript -const arr = [1, 2, 3]; - -// forEach - 遍历每个元素 -arr.forEach((item) => console.log(item)); - -// map - 映射新数组 -const doubled = arr.map((item) => item * 2); // [2, 4, 6] - -// filter - 过滤元素 -const filtered = arr.filter((item) => item > 1); // [2, 3] - -// reduce - 累积计算 -const sum = arr.reduce((acc, cur) => acc + cur, 0); // 6 -``` - -## Map 集合 - -### 基本操作和迭代 - -```javascript -const map = new Map(); -map.set("name", "John"); -map.set("age", 30); - -// 遍历键值对 -for (let [key, value] of map) { - console.log(key, value); -} - -// 获取所有键 -for (let key of map.keys()) { - console.log(key); // 'name', 'age' -} - -// 获取所有值 -for (let value of map.values()) { - console.log(value); // 'John', 30 -} -``` - -## Set 集合 - -### 基本操作和迭代 - -```javascript -const set = new Set([1, 2, 3, 3, 4]); - -// 添加元素 -set.add(5); - -// 遍历集合 -set.forEach((value) => console.log(value)); - -// 使用 for...of 迭代 -for (let item of set) { - console.log(item); // 1, 2, 3, 4, 5 -} - -// 转换为数组 -const arrayFromSet = [...set]; // [1, 2, 3, 4, 5] -``` - -## 迭代器 (Iterator) - -### 自定义迭代器 - -```javascript -const myIterable = { - [Symbol.iterator]: function* () { - yield 1; - yield 2; - yield 3; - }, -}; - -for (let value of myIterable) { - console.log(value); // 1, 2, 3 -} -``` - -### 内置迭代器使用 - -```javascript -const arr = ["a", "b", "c"]; - -// 获取数组迭代器 -const iterator = arr[Symbol.iterator](); - -console.log(iterator.next()); // {value: 'a', done: false} -console.log(iterator.next()); // {value: 'b', done: false} -console.log(iterator.next()); // {value: 'c', done: false} -console.log(iterator.next()); // {value: undefined, done: true} -``` - -### 生成器函数 - -```javascript -function* numberGenerator() { - let num = 1; - while (num <= 3) { - yield num++; - } -} - -const gen = numberGenerator(); -console.log(gen.next().value); // 1 -console.log(gen.next().value); // 2 -console.log(gen.next().value); // 3 -``` - -## 训练 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第六章训练.png) - -## 综合 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第六章综合.png) diff --git "a/\344\270\245\345\201\245\345\256\207/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\344\270\245\345\201\245\345\256\207/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 519ce3f7cd3e0fc1d1bc4cb5b20451ca34da033b..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,325 +0,0 @@ -# JavaScript 正则表达式总结 - -## 正则表达式创建 - -### 字面量创建 - -```javascript -const regex = /pattern/flags; -const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; -``` - -### 构造函数创建 - -```javascript -const regex = new RegExp("pattern", "flags"); -const emailRegex = new RegExp("^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$"); -``` - -## 正则表达式标志 - -### 常用标志 - -```javascript -// g - 全局匹配 -const regex1 = /a/g; - -// i - 忽略大小写 -const regex2 = /hello/i; - -// m - 多行匹配 -const regex3 = /^start/m; - -// s - dotAll 模式(点号匹配换行) -const regex4 = /a.b/s; - -// u - Unicode 模式 -const regex5 = /\u{1F600}/u; -``` - -## 正则表达式方法 - -### test() - 测试是否匹配 - -```javascript -const regex = /hello/i; -console.log(regex.test("Hello World")); // true -``` - -### exec() - 执行匹配搜索 - -```javascript -const regex = /hello/i; -const result = regex.exec("Hello World"); -console.log(result[0]); // 'Hello' -``` - -## 字符串的正则方法 - -### match() - 匹配字符串 - -```javascript -const str = "Hello World"; -const result = str.match(/hello/i); -console.log(result[0]); // 'Hello' -``` - -### matchAll() - 匹配所有结果 - -```javascript -const str = "test1 test2 test3"; -const matches = str.matchAll(/test(\d)/g); -for (const match of matches) { - console.log(match[1]); // '1', '2', '3' -} -``` - -### replace() - 替换匹配内容 - -```javascript -const str = "Hello World"; -const newStr = str.replace(/world/i, "JavaScript"); -console.log(newStr); // 'Hello JavaScript' -``` - -### search() - 搜索匹配位置 - -```javascript -const str = "Hello World"; -const position = str.search(/world/i); -console.log(position); // 6 -``` - -### split() - 按正则分割 - -```javascript -const str = "apple,banana;orange"; -const arr = str.split(/[,;]/); -console.log(arr); // ['apple', 'banana', 'orange'] -``` - -## 字符类 - -### 基本字符类 - -```javascript -// \d - 数字 -const digitRegex = /\d/; -console.log(digitRegex.test("123")); // true - -// \w - 单词字符 -const wordRegex = /\w/; -console.log(wordRegex.test("hello")); // true - -// \s - 空白字符 -const spaceRegex = /\s/; -console.log(spaceRegex.test(" ")); // true -``` - -### 否定字符类 - -```javascript -// \D - 非数字 -const nonDigitRegex = /\D/; -console.log(nonDigitRegex.test("abc")); // true - -// \W - 非单词字符 -const nonWordRegex = /\W/; -console.log(nonWordRegex.test("!")); // true - -// \S - 非空白字符 -const nonSpaceRegex = /\S/; -console.log(nonSpaceRegex.test("a")); // true -``` - -### 自定义字符类 - -```javascript -// [abc] - 匹配 a、b 或 c -const customClass = /[abc]/; -console.log(customClass.test("apple")); // true - -// [^abc] - 匹配非 a、b、c 的字符 -const negatedClass = /[^abc]/; -console.log(negatedClass.test("dog")); // true - -// [a-z] - 字符范围 -const rangeClass = /[a-z]/; -console.log(rangeClass.test("hello")); // true -``` - -## 量词 - -### 基本量词 - -```javascript -// * - 0次或多次 -const zeroOrMore = /a*/; -console.log(zeroOrMore.test("")); // true - -// + - 1次或多次 -const oneOrMore = /a+/; -console.log(oneOrMore.test("aaa")); // true - -// ? - 0次或1次 -const zeroOrOne = /a?/; -console.log(zeroOrOne.test("")); // true - -// {n} - 恰好n次 -const exact = /a{3}/; -console.log(exact.test("aaa")); // true - -// {n,} - 至少n次 -const atLeast = /a{2,}/; -console.log(atLeast.test("aaa")); // true - -// {n,m} - n到m次 -const range = /a{2,4}/; -console.log(range.test("aaa")); // true -``` - -## 位置匹配 - -### 锚点字符 - -```javascript -// ^ - 字符串开始 -const start = /^hello/; -console.log(start.test("hello world")); // true - -// $ - 字符串结束 -const end = /world$/; -console.log(end.test("hello world")); // true - -// \b - 单词边界 -const wordBoundary = /\bhello\b/; -console.log(wordBoundary.test("hello world")); // true - -// \B - 非单词边界 -const nonWordBoundary = /\Bhell\B/; -console.log(nonWordBoundary.test("hello")); // true -``` - -## 分组和捕获 - -### 捕获分组 - -```javascript -const regex = /(\d{4})-(\d{2})-(\d{2})/; -const match = regex.exec("2024-01-15"); -console.log(match[1]); // '2024' - 年 -console.log(match[2]); // '01' - 月 -console.log(match[3]); // '15' - 日 -``` - -### 非捕获分组 - -```javascript -const regex = /(?:\d{4})-\d{2}-\d{2}/; -const match = regex.exec("2024-01-15"); -console.log(match[1]); // undefined (非捕获分组) -``` - -### 命名捕获组 - -```javascript -const regex = /(?\d{4})-(?\d{2})-(?\d{2})/; -const match = regex.exec("2024-01-15"); -console.log(match.groups.year); // '2024' -console.log(match.groups.month); // '01' -``` - -## 断言 - -### 前瞻断言 - -```javascript -// 正向前瞻 - 后面跟着特定模式 -const positiveLookahead = /hello(?= world)/; -console.log(positiveLookahead.test("hello world")); // true - -// 负向前瞻 - 后面不跟着特定模式 -const negativeLookahead = /hello(?! world)/; -console.log(negativeLookahead.test("hello javascript")); // true -``` - -### 后瞻断言 - -```javascript -// 正向后瞻 - 前面是特定模式 -const positiveLookbehind = /(?<=say )hello/; -console.log(positiveLookbehind.test("say hello")); // true - -// 负向后瞻 - 前面不是特定模式 -const negativeLookbehind = /(? response.json()) - .then((data) => console.log(data)) - .catch((error) => console.error("请求失败:", error)); -``` - -### async/await 错误处理 - -```javascript -async function fetchData() { - try { - const response = await fetch("/api/data"); - const data = await response.json(); - return data; - } catch (error) { - console.error("获取数据失败:", error); - throw error; // 重新抛出错误 - } -} - -// 调用async函数 -fetchData().catch((error) => { - console.log("外部错误处理:", error); -}); -``` - -### Promise.all 错误处理 - -```javascript -const promises = [ - fetch("/api/users"), - fetch("/api/posts"), - fetch("/api/comments"), -]; - -Promise.all(promises.map((p) => p.catch((e) => e))).then((results) => { - results.forEach((result, index) => { - if (result instanceof Error) { - console.log(`请求 ${index} 失败:`, result.message); - } else { - console.log(`请求 ${index} 成功`); - } - }); -}); -``` - -## 全局错误处理 - -### window.onerror - -```javascript -window.onerror = function (message, source, lineno, colno, error) { - console.log("全局错误:", message); - console.log("错误文件:", source); - console.log("错误位置:", lineno, ":", colno); - return true; // 阻止浏览器默认错误处理 -}; -``` - -### unhandledrejection 事件 - -```javascript -window.addEventListener("unhandledrejection", function (event) { - console.log("未处理的Promise拒绝:", event.reason); - event.preventDefault(); // 阻止浏览器默认错误提示 -}); -``` - -## 性能调试 - -### 性能测量 - -```javascript -// 使用 performance API -performance.mark("start"); - -// 执行需要测量的代码 -for (let i = 0; i < 1000000; i++) {} - -performance.mark("end"); -performance.measure("循环执行时间", "start", "end"); - -const measure = performance.getEntriesByName("循环执行时间")[0]; -console.log(`执行时间: ${measure.duration}ms`); -``` - -### 内存使用检查 - -```javascript -// 检查内存使用情况 -const memory = performance.memory; -console.log("已使用内存:", memory.usedJSHeapSize); -console.log("内存限制:", memory.jsHeapSizeLimit); -console.log("总堆大小:", memory.totalJSHeapSize); -``` - -## 最佳实践 - -### 具体的错误信息 - -```javascript -// 不好的做法 -throw new Error("操作失败"); - -// 好的做法 -throw new Error("用户注册失败: 邮箱已被使用"); -``` - -### 适当的错误层级 - -```javascript -function processUserData(userData) { - try { - validateUserData(userData); - saveToDatabase(userData); - } catch (error) { - if (error instanceof ValidationError) { - // 处理验证错误 - showUserError(error.message); - } else { - // 处理系统错误 - logSystemError(error); - showGenericError(); - } - } -} -``` - -### 错误日志记录 - -```javascript -function logError(error, context = {}) { - const errorLog = { - timestamp: new Date().toISOString(), - message: error.message, - stack: error.stack, - type: error.name, - context: context, - }; - - // 发送到错误监控服务 - sendToErrorService(errorLog); - - // 开发环境下在控制台显示 - if (process.env.NODE_ENV === "development") { - console.error("错误详情:", errorLog); - } -} -``` - -## 训练 - -```html - -``` - -- 效果图 - -![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第九章训练.gif) - -## 综合 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第九章综合.gif) diff --git "a/\344\270\245\345\201\245\345\256\207/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\344\270\245\345\201\245\345\256\207/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 7d4094b43444cb93b88478ce9db32dff260dfc29..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,504 +0,0 @@ -# JavaScript 时间处理总结 - -## Date 对象创建 - -### 当前时间 - -```javascript -const now = new Date(); -console.log(now); // 当前日期时间 -``` - -### 指定时间创建 - -```javascript -// 指定日期时间 -const date1 = new Date("2024-01-15"); -const date2 = new Date("2024-01-15T10:30:00"); -const date3 = new Date(2024, 0, 15); // 月份从0开始 -const date4 = new Date(2024, 0, 15, 10, 30, 0); -``` - -### 时间戳创建 - -```javascript -// 从时间戳创建 -const timestamp = 1705296600000; -const dateFromTimestamp = new Date(timestamp); - -// 当前时间戳 -const currentTimestamp = Date.now(); -console.log(currentTimestamp); // 毫秒时间戳 -``` - -## 时间获取方法 - -### 获取日期组件 - -```javascript -const date = new Date("2024-01-15T10:30:45"); - -console.log(date.getFullYear()); // 2024 -console.log(date.getMonth()); // 0 (0-11) -console.log(date.getDate()); // 15 -console.log(date.getDay()); // 1 (星期几,0-6) -console.log(date.getHours()); // 10 -console.log(date.getMinutes()); // 30 -console.log(date.getSeconds()); // 45 -console.log(date.getMilliseconds()); // 0 -``` - -### UTC 时间获取 - -```javascript -const date = new Date("2024-01-15T10:30:45Z"); - -console.log(date.getUTCFullYear()); // 2024 -console.log(date.getUTCHours()); // 10 (UTC时间) -``` - -## 时间设置方法 - -### 设置日期时间 - -```javascript -const date = new Date(); - -date.setFullYear(2024); -date.setMonth(0); // 一月 -date.setDate(15); -date.setHours(10); -date.setMinutes(30); -date.setSeconds(45); - -console.log(date); // 2024-01-15T10:30:45 -``` - -### 时间运算 - -```javascript -const date = new Date("2024-01-15"); - -// 增加天数 -date.setDate(date.getDate() + 7); -console.log(date); // 2024-01-22 - -// 减少月份 -date.setMonth(date.getMonth() - 1); -console.log(date); // 2023-12-22 -``` - -## 时间格式化 - -### 转字符串方法 - -```javascript -const date = new Date("2024-01-15T10:30:45"); - -console.log(date.toString()); // "Mon Jan 15 2024 10:30:45 GMT+0800" -console.log(date.toDateString()); // "Mon Jan 15 2024" -console.log(date.toTimeString()); // "10:30:45 GMT+0800" -console.log(date.toISOString()); // "2024-01-15T02:30:45.000Z" -console.log(date.toLocaleDateString()); // "2024/1/15" (根据地区) -console.log(date.toLocaleTimeString()); // "上午10:30:45" (根据地区) -``` - -### 自定义格式化 - -```javascript -function formatDate(date) { - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, "0"); - const day = String(date.getDate()).padStart(2, "0"); - return `${year}-${month}-${day}`; -} - -console.log(formatDate(new Date())); // "2024-01-15" -``` - -## 时间比较 - -### 直接比较 - -```javascript -const date1 = new Date("2024-01-15"); -const date2 = new Date("2024-01-20"); - -console.log(date1 < date2); // true -console.log(date1 > date2); // false -console.log(date1.getTime() === date2.getTime()); // 比较时间戳 -``` - -### 时间差计算 - -```javascript -const start = new Date("2024-01-15T10:00:00"); -const end = new Date("2024-01-15T11:30:00"); - -const diffMs = end - start; // 毫秒差 -const diffMinutes = Math.floor(diffMs / (1000 * 60)); -const diffHours = diffMs / (1000 * 60 * 60); - -console.log(`相差 ${diffMinutes} 分钟`); // 相差 90 分钟 -console.log(`相差 ${diffHours} 小时`); // 相差 1.5 小时 -``` - -## 相对时间 - -### 相对时间格式化 - -```javascript -function formatRelativeTime(date) { - const now = new Date(); - const diffMs = now - date; - const diffMinutes = Math.floor(diffMs / (1000 * 60)); - const diffHours = Math.floor(diffMs / (1000 * 60 * 60)); - const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); - - if (diffMinutes < 1) return "刚刚"; - if (diffMinutes < 60) return `${diffMinutes}分钟前`; - if (diffHours < 24) return `${diffHours}小时前`; - if (diffDays < 7) return `${diffDays}天前`; - - return date.toLocaleDateString(); -} - -console.log(formatRelativeTime(new Date(Date.now() - 300000))); // "5分钟前" -``` - -## 时区处理 - -### 时区转换 - -```javascript -const date = new Date("2024-01-15T10:30:45Z"); - -// 本地时间 -console.log(date.toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" })); -// "2024/1/15 18:30:45" - -// 其他时区 -console.log(date.toLocaleString("en-US", { timeZone: "America/New_York" })); -// "1/15/2024, 5:30:45 AM" -``` - -### 时区偏移 - -```javascript -const date = new Date(); -const timezoneOffset = date.getTimezoneOffset(); // 分钟偏移 -const timezoneHours = -timezoneOffset / 60; - -console.log(`时区偏移: UTC${timezoneHours >= 0 ? "+" : ""}${timezoneHours}`); -// "时区偏移: UTC+8" -``` - -## 日期验证 - -### 有效日期检查 - -```javascript -function isValidDate(date) { - return date instanceof Date && !isNaN(date); -} - -console.log(isValidDate(new Date())); // true -console.log(isValidDate(new Date("invalid"))); // false -``` - -### 日期范围验证 - -```javascript -function isDateInRange(date, start, end) { - return date >= start && date <= end; -} - -const testDate = new Date("2024-01-15"); -const startDate = new Date("2024-01-01"); -const endDate = new Date("2024-01-31"); - -console.log(isDateInRange(testDate, startDate, endDate)); // true -``` - -## 实用工具函数 - -### 日期加减 - -```javascript -function addDays(date, days) { - const result = new Date(date); - result.setDate(result.getDate() + days); - return result; -} - -function addMonths(date, months) { - const result = new Date(date); - result.setMonth(result.getMonth() + months); - return result; -} - -const today = new Date(); -console.log(addDays(today, 7)); // 一周后 -console.log(addMonths(today, 1)); // 一月后 -``` - -### 获取月份第一天和最后一天 - -```javascript -function getFirstDayOfMonth(date) { - return new Date(date.getFullYear(), date.getMonth(), 1); -} - -function getLastDayOfMonth(date) { - return new Date(date.getFullYear(), date.getMonth() + 1, 0); -} - -const date = new Date("2024-01-15"); -console.log(getFirstDayOfMonth(date)); // 2024-01-01 -console.log(getLastDayOfMonth(date)); // 2024-01-31 -``` - -### 计算工作日 - -```javascript -function isWeekend(date) { - const day = date.getDay(); - return day === 0 || day === 6; -} - -function addWorkDays(startDate, days) { - let result = new Date(startDate); - let count = 0; - - while (count < days) { - result.setDate(result.getDate() + 1); - if (!isWeekend(result)) { - count++; - } - } - - return result; -} - -const start = new Date("2024-01-15"); // 周一 -console.log(addWorkDays(start, 3)); // 2024-01-18 (周四) -``` - -## 性能测量 - -### 执行时间测量 - -```javascript -// 方法1: Date对象 -const start = new Date(); -// 执行一些操作 -for (let i = 0; i < 1000000; i++) {} -const end = new Date(); -console.log(`执行时间: ${end - start}ms`); - -// 方法2: performance.now() (更高精度) -const startTime = performance.now(); -// 执行一些操作 -for (let i = 0; i < 1000000; i++) {} -const endTime = performance.now(); -console.log(`高精度执行时间: ${(endTime - startTime).toFixed(2)}ms`); -``` - -## 第三方库推荐 - -### 使用 date-fns (示例) - -```javascript -// 需要先安装: npm install date-fns -import { format, addDays, differenceInDays } from "date-fns"; - -const date = new Date(); -console.log(format(date, "yyyy-MM-dd")); // "2024-01-15" -console.log(addDays(date, 7)); // 一周后的日期 -console.log(differenceInDays(date, new Date("2024-01-01"))); // 14 -``` - -### 使用 Day.js (示例) - -```javascript -// 需要先安装: npm install dayjs -import dayjs from "dayjs"; - -const now = dayjs(); -console.log(now.format("YYYY-MM-DD")); // "2024-01-15" -console.log(now.add(7, "day").format()); // 一周后的日期 -console.log(now.diff("2024-01-01", "day")); // 14 -``` - -## 最佳实践 - -### 使用 ISO 格式存储和传输 - -```javascript -// 存储和传输使用ISO格式 -const date = new Date(); -const isoString = date.toISOString(); -console.log(isoString); // "2024-01-15T02:30:45.000Z" - -// 从ISO格式解析 -const parsedDate = new Date(isoString); -console.log(parsedDate); // 正确的日期对象 -``` - -### 避免时区问题 - -```javascript -// 明确指定时区 -function formatDateForDisplay(date, timezone = "Asia/Shanghai") { - return date.toLocaleString("zh-CN", { - timeZone: timezone, - year: "numeric", - month: "2-digit", - day: "2-digit", - }); -} - -const utcDate = new Date("2024-01-15T10:30:45Z"); -console.log(formatDateForDisplay(utcDate)); // "2024/01/15" -``` - -## 训练 - -```html -

第一题

-
- -
- -

第二题

-中国的“国球”是( )
-篮球 -排球 -乒乓球 -羽毛球 - -

第三题

- - -

欢迎访问本网站当前时间为:

- - - -

第四题

- - -

宽度:

-

高度:

- - - -

第五题

-
- - - -
- - -

第六题

-
- - -

第七题

-
- 用户名:
- 密 码:
-
-
- -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第十一章训练.gif) diff --git "a/\344\270\245\345\201\245\345\256\207/20251201-\345\233\276\345\203\217\346\213\226\346\224\276\344\272\213\344\273\266.md" "b/\344\270\245\345\201\245\345\256\207/20251201-\345\233\276\345\203\217\346\213\226\346\224\276\344\272\213\344\273\266.md" deleted file mode 100644 index 4f6fb3ebab80f85c4dcc7fca1dfe8ff235fc4bb6..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251201-\345\233\276\345\203\217\346\213\226\346\224\276\344\272\213\344\273\266.md" +++ /dev/null @@ -1,450 +0,0 @@ -# JavaScript 对象拖放知识点总结 - -## 📋 目录 - -1. [基础概念](#基础概念) -2. [拖放事件](#拖放事件) -3. [数据传递](#数据传递) -4. [视觉效果](#视觉效果) -5. [完整示例](#完整示例) - ---- - -## 基础概念 - -### 1. 使元素可拖放 - -**知识点**:使用 `draggable="true"` 属性使元素可拖放。 - -```javascript -// 使元素可拖放 -const draggableElement = document.getElementById("draggable"); -draggableElement.setAttribute("draggable", "true"); -``` - -### 2. 拖放事件生命周期 - -**知识点**:拖放操作涉及两个对象的事件:被拖元素(drag source)和目标区域(drop target)。 - -```javascript -// 被拖元素事件 -element.addEventListener("dragstart", handleDragStart); -element.addEventListener("dragend", handleDragEnd); - -// 目标区域事件 -target.addEventListener("dragover", handleDragOver); -target.addEventListener("drop", handleDrop); -``` - ---- - -## 拖放事件 - -### 3. dragstart 事件 - -**知识点**:开始拖动时触发,用于设置拖拽数据。 - -```javascript -function handleDragStart(e) { - e.dataTransfer.setData("text/plain", e.target.id); - e.target.classList.add("dragging"); -} -``` - -### 4. dragend 事件 - -**知识点**:拖放操作结束时触发,无论成功与否。 - -```javascript -function handleDragEnd(e) { - e.target.classList.remove("dragging"); - console.log("拖放操作结束"); -} -``` - -### 5. dragover 事件 - -**知识点**:当元素被拖到有效目标上时持续触发,必须阻止默认行为以允许放置。 - -```javascript -function handleDragOver(e) { - e.preventDefault(); // 必须调用 - e.target.classList.add("drag-over"); -} -``` - -### 6. dragenter 事件 - -**知识点**:被拖元素进入目标区域时触发。 - -```javascript -function handleDragEnter(e) { - e.preventDefault(); - e.target.classList.add("drag-enter"); -} -``` - -### 7. dragleave 事件 - -**知识点**:被拖元素离开目标区域时触发。 - -```javascript -function handleDragLeave(e) { - e.target.classList.remove("drag-enter", "drag-over"); -} -``` - -### 8. drop 事件 - -**知识点**:在目标区域释放被拖元素时触发。 - -```javascript -function handleDrop(e) { - e.preventDefault(); - const id = e.dataTransfer.getData("text/plain"); - const element = document.getElementById(id); - e.target.appendChild(element); - e.target.classList.remove("drag-enter", "drag-over"); -} -``` - ---- - -## 数据传递 - -### 9. 设置拖拽数据 - -**知识点**:使用 `dataTransfer.setData()` 存储拖拽数据。 - -```javascript -function handleDragStart(e) { - // 存储不同类型的数据 - e.dataTransfer.setData("text/plain", e.target.textContent); - e.dataTransfer.setData("text/html", e.target.innerHTML); - e.dataTransfer.setData( - "application/json", - JSON.stringify({ id: e.target.id, type: "element" }) - ); -} -``` - -### 10. 获取拖拽数据 - -**知识点**:使用 `dataTransfer.getData()` 获取存储的数据。 - -```javascript -function handleDrop(e) { - e.preventDefault(); - const text = e.dataTransfer.getData("text/plain"); - const json = e.dataTransfer.getData("application/json"); - - if (json) { - const data = JSON.parse(json); - console.log("拖拽的元素ID:", data.id); - } -} -``` - -### 11. 自定义拖拽类型 - -**知识点**:可以使用自定义 MIME 类型传递特定数据。 - -```javascript -function handleDragStart(e) { - e.dataTransfer.setData( - "application/myapp-item", - JSON.stringify({ id: "item123", name: "示例项目" }) - ); -} -``` - ---- - -## 视觉效果 - -### 12. 设置拖拽图像 - -**知识点**:使用 `setDragImage()` 自定义拖拽时显示的图像。 - -```javascript -function handleDragStart(e) { - const dragIcon = document.createElement("div"); - dragIcon.textContent = "📦"; - dragIcon.style.fontSize = "24px"; - - // 设置自定义拖拽图像(元素,x偏移,y偏移) - e.dataTransfer.setDragImage(dragIcon, 10, 10); -} -``` - -### 13. 拖拽效果 - -**知识点**:使用 `effectAllowed` 和 `dropEffect` 控制拖拽效果。 - -```javascript -function handleDragStart(e) { - // 定义源元素允许的效果 - e.dataTransfer.effectAllowed = "copyMove"; -} - -function handleDragOver(e) { - e.preventDefault(); - // 定义目标区域的显示效果 - e.dataTransfer.dropEffect = "move"; -} -``` - -### 14. 文件拖放 - -**知识点**:处理文件拖放时需要检查 `dataTransfer.files`。 - -```javascript -function handleDrop(e) { - e.preventDefault(); - - if (e.dataTransfer.files.length > 0) { - const files = e.dataTransfer.files; - console.log(`拖放了 ${files.length} 个文件`); - } -} -``` - ---- - -## 完整示例 - -### 15. 简单的拖放实现 - -```javascript -// HTML结构 -//
可拖拽项目
-//
放置区域
- -const dragItem = document.getElementById("drag-item"); -const dropZone = document.getElementById("drop-zone"); - -// 拖拽开始 -dragItem.addEventListener("dragstart", (e) => { - e.dataTransfer.setData("text/plain", e.target.id); - e.target.style.opacity = "0.5"; -}); - -// 拖拽结束 -dragItem.addEventListener("dragend", (e) => { - e.target.style.opacity = "1"; -}); - -// 拖拽到目标上方 -dropZone.addEventListener("dragover", (e) => { - e.preventDefault(); - e.target.style.border = "2px dashed #4CAF50"; -}); - -// 离开目标 -dropZone.addEventListener("dragleave", (e) => { - e.target.style.border = "2px dashed #ccc"; -}); - -// 放置 -dropZone.addEventListener("drop", (e) => { - e.preventDefault(); - e.target.style.border = "2px solid #4CAF50"; - - const id = e.dataTransfer.getData("text/plain"); - const element = document.getElementById(id); - - if (element) { - e.target.appendChild(element); - element.style.opacity = "1"; - } -}); -``` - -### 16. 多元素拖放排序 - -```javascript -// HTML:
  • 项目1
  • ...
- -const list = document.getElementById("sortable-list"); - -list.addEventListener("dragstart", (e) => { - if (e.target.tagName === "LI") { - e.dataTransfer.setData("text/plain", e.target.id); - e.dataTransfer.effectAllowed = "move"; - } -}); - -list.addEventListener("dragover", (e) => { - e.preventDefault(); - e.dataTransfer.dropEffect = "move"; - - const afterElement = getDragAfterElement(list, e.clientY); - const draggable = document.querySelector(".dragging"); - - if (afterElement == null) { - list.appendChild(draggable); - } else { - list.insertBefore(draggable, afterElement); - } -}); - -function getDragAfterElement(container, y) { - const draggableElements = [ - ...container.querySelectorAll("li:not(.dragging)"), - ]; - - return draggableElements.reduce( - (closest, child) => { - const box = child.getBoundingClientRect(); - const offset = y - box.top - box.height / 2; - - if (offset < 0 && offset > closest.offset) { - return { offset: offset, element: child }; - } else { - return closest; - } - }, - { offset: Number.NEGATIVE_INFINITY } - ).element; -} -``` - ---- - -## ⚠️ 注意事项 - -1. **浏览器兼容性**:大部分现代浏览器都支持 HTML5 拖放 API,但某些旧版本可能需要前缀 -2. **移动设备**:拖放 API 在移动设备上支持有限 -3. **安全性**:出于安全考虑,某些数据类型(如文件)只能在特定场景下传输 -4. **性能**:频繁的`dragover`事件可能影响性能,建议进行节流处理 - ---- - -## 📚 总结要点 - -| 事件 | 触发元素 | 描述 | -| ----------- | -------- | -------------------------- | -| `dragstart` | 被拖元素 | 开始拖动时触发 | -| `drag` | 被拖元素 | 拖动过程中持续触发 | -| `dragend` | 被拖元素 | 拖动结束时触发 | -| `dragenter` | 目标元素 | 进入目标区域时触发 | -| `dragover` | 目标元素 | 在目标区域上移动时持续触发 | -| `dragleave` | 目标元素 | 离开目标区域时触发 | -| `drop` | 目标元素 | 在目标区域释放时触发 | - -**核心方法**: - -- `dataTransfer.setData()` - 存储拖拽数据 -- `dataTransfer.getData()` - 获取拖拽数据 -- `dataTransfer.setDragImage()` - 设置拖拽图像 -- `event.preventDefault()` - 允许放置(在`dragover`和`drop`中必须调用) - ---- - -# 训练 - -```html - - - - -
-
-
- -
定义的文本
- -
- -``` - -# 实践练习 - -```html - -

第一题

-
- 欢迎购买明日科技图书 -
- -

第二题

- - -

第三题

- - - -``` diff --git "a/\344\270\245\345\201\245\345\256\207/20251203-document\345\257\271\350\261\241.md" "b/\344\270\245\345\201\245\345\256\207/20251203-document\345\257\271\350\261\241.md" deleted file mode 100644 index c9cf35ef859e1df162193e198a8bef8eed424750..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251203-document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,844 +0,0 @@ -# JavaScript Document 对象知识点总结 - -## 📋 文档概述 - -Document 对象代表整个 HTML 文档,是 DOM 树的根节点,提供了访问和操作页面内容的接口。 - ---- - -## 🔧 文档属性 - -### 1. 基础文档信息 - -**知识点**:获取文档基本信息如标题、URL、字符集等。 - -```javascript -// 获取文档标题 -console.log(document.title); // "页面标题" - -// 获取文档URL -console.log(document.URL); // "https://example.com" - -// 获取文档字符集 -console.log(document.characterSet); // "UTF-8" - -// 获取文档最后修改时间 -console.log(document.lastModified); -``` - -### 2. 文档结构访问 - -**知识点**:访问文档的根元素和 body 元素。 - -```javascript -// 获取文档根元素(HTML) -console.log(document.documentElement); // 元素 - -// 获取文档头部 -console.log(document.head); // 元素 - -// 获取文档主体 -console.log(document.body); // 元素 - -// 获取所有样式表 -console.log(document.styleSheets); -``` - -### 3. 文档状态 - -**知识点**:检查文档加载状态。 - -```javascript -// 检查文档是否加载完成 -if (document.readyState === "complete") { - console.log("文档已完全加载"); -} - -// 监听文档状态变化 -document.onreadystatechange = function () { - if (document.readyState === "interactive") { - console.log("DOM已加载完成"); - } -}; -``` - ---- - -## 🔍 元素选择 - -### 4. getElementById() - -**知识点**:通过 ID 获取单个元素。 - -```javascript -// 获取ID为"header"的元素 -const header = document.getElementById("header"); -header.style.backgroundColor = "blue"; -``` - -### 5. getElementsByClassName() - -**知识点**:通过类名获取元素集合(HTMLCollection)。 - -```javascript -// 获取所有class包含"item"的元素 -const items = document.getElementsByClassName("item"); -console.log(items.length); // 元素数量 -``` - -### 6. getElementsByTagName() - -**知识点**:通过标签名获取元素集合。 - -```javascript -// 获取所有
元素 -const divs = document.getElementsByTagName("div"); -for (let div of divs) { - console.log(div.tagName); -} -``` - -### 7. querySelector() - -**知识点**:使用 CSS 选择器获取第一个匹配元素。 - -```javascript -// 获取第一个类名为"btn"的按钮 -const button = document.querySelector("button.btn"); -button.addEventListener("click", handleClick); -``` - -### 8. querySelectorAll() - -**知识点**:使用 CSS 选择器获取所有匹配元素(NodeList)。 - -```javascript -// 获取所有类名为"item"的
  • 元素 -const listItems = document.querySelectorAll("li.item"); -listItems.forEach((item) => { - item.style.color = "red"; -}); -``` - ---- - -## ✨ 元素创建与操作 - -### 9. createElement() - -**知识点**:创建新的 HTML 元素。 - -```javascript -// 创建一个新的
    元素 -const newDiv = document.createElement("div"); -newDiv.textContent = "新创建的元素"; -newDiv.className = "custom-div"; -``` - -### 10. createTextNode() - -**知识点**:创建文本节点。 - -```javascript -// 创建文本节点 -const textNode = document.createTextNode("这是一段文本"); -document.body.appendChild(textNode); -``` - -### 11. appendChild() - -**知识点**:将节点添加到父节点的子节点列表末尾。 - -```javascript -// 将新元素添加到body中 -const newElement = document.createElement("p"); -newElement.textContent = "新段落"; -document.body.appendChild(newElement); -``` - -### 12. removeChild() - -**知识点**:从父节点中移除子节点。 - -```javascript -// 移除ID为"old-element"的元素 -const parent = document.getElementById("container"); -const child = document.getElementById("old-element"); -parent.removeChild(child); - -// 现代写法(不需要获取父元素) -// child.remove(); -``` - -### 13. insertBefore() - -**知识点**:在指定节点前插入新节点。 - -```javascript -// 在某个元素前插入新元素 -const newItem = document.createElement("li"); -newItem.textContent = "新项目"; -const list = document.getElementById("my-list"); -const firstItem = list.firstElementChild; -list.insertBefore(newItem, firstItem); -``` - -### 14. cloneNode() - -**知识点**:克隆节点,可选择是否克隆子节点。 - -```javascript -// 克隆元素 -const original = document.getElementById("template"); -const clone = original.cloneNode(true); // true表示深克隆(包括子节点) -clone.id = "template-clone"; -document.body.appendChild(clone); -``` - ---- - -## 📝 内容操作 - -### 15. innerHTML - -**知识点**:获取或设置元素的 HTML 内容。 - -```javascript -// 设置元素HTML内容 -document.getElementById("content").innerHTML = "

    新标题

    新内容

    "; - -// 获取元素HTML内容 -const htmlContent = document.getElementById("content").innerHTML; -console.log(htmlContent); -``` - -### 16. textContent - -**知识点**:获取或设置元素的文本内容(忽略 HTML 标签)。 - -```javascript -// 设置文本内容(安全,不会解析HTML) -document.getElementById("title").textContent = ''; - -// 获取文本内容 -const text = document.getElementById("title").textContent; -``` - -### 17. innerText - -**知识点**:获取或设置元素的可见文本内容。 - -```javascript -// 设置可见文本 -const element = document.getElementById("message"); -element.innerText = "这是一条消息"; - -// innerText与textContent的区别 -// innerText考虑CSS样式(如display:none),textContent不考虑 -``` - ---- - -## 🎯 属性操作 - -### 18. setAttribute() - -**知识点**:设置元素属性。 - -```javascript -// 设置元素属性 -const img = document.querySelector("img"); -img.setAttribute("src", "new-image.jpg"); -img.setAttribute("alt", "新图片描述"); -img.setAttribute("data-custom", "自定义数据"); -``` - -### 19. getAttribute() - -**知识点**:获取元素属性值。 - -```javascript -// 获取元素属性 -const link = document.querySelector("a"); -const href = link.getAttribute("href"); -const target = link.getAttribute("target"); -console.log(`链接地址: ${href}, 打开方式: ${target}`); -``` - -### 20. removeAttribute() - -**知识点**:移除元素属性。 - -```javascript -// 移除元素属性 -const input = document.querySelector("input"); -input.removeAttribute("disabled"); // 启用输入框 -input.removeAttribute("readonly"); // 移除只读属性 -``` - -### 21. dataset - -**知识点**:访问 data-\* 自定义属性。 - -```javascript -// HTML:
    -const userDiv = document.getElementById("user"); -console.log(userDiv.dataset.userId); // "123" -console.log(userDiv.dataset.userRole); // "admin" - -// 设置data属性 -userDiv.dataset.userStatus = "active"; -``` - ---- - -## 🎨 样式操作 - -### 22. style 属性 - -**知识点**:通过 style 属性直接操作内联样式。 - -```javascript -const box = document.getElementById("box"); - -// 设置单个样式 -box.style.backgroundColor = "blue"; -box.style.width = "200px"; -box.style.height = "200px"; - -// 使用cssText设置多个样式 -box.style.cssText = "color: red; font-size: 20px; border: 1px solid black;"; - -// 移除样式 -box.style.backgroundColor = ""; -``` - -### 23. classList - -**知识点**:操作元素的 class 属性。 - -```javascript -const element = document.getElementById("my-element"); - -// 添加类 -element.classList.add("active", "highlight"); - -// 移除类 -element.classList.remove("inactive"); - -// 切换类 -element.classList.toggle("visible"); - -// 检查是否包含类 -if (element.classList.contains("active")) { - console.log("元素处于活跃状态"); -} - -// 替换类 -element.classList.replace("old-class", "new-class"); -``` - ---- - -## 📄 表单操作 - -### 24. 访问表单元素 - -**知识点**:通过 document.forms 访问页面中的表单。 - -```javascript -// 通过索引访问表单 -const firstForm = document.forms[0]; - -// 通过name访问表单 -const loginForm = document.forms["login"]; - -// 获取表单元素 -const emailInput = loginForm.elements["email"]; -const passwordInput = loginForm["password"]; - -// 获取表单值 -console.log(emailInput.value); -``` - -### 25. 表单提交与重置 - -**知识点**:控制表单的提交和重置。 - -```javascript -const form = document.getElementById("my-form"); - -// 提交表单 -form.submit(); - -// 重置表单 -form.reset(); - -// 阻止表单提交 -form.addEventListener("submit", function (event) { - event.preventDefault(); // 阻止默认提交行为 - // 自定义提交逻辑 - console.log("表单数据:", new FormData(form)); -}); -``` - ---- - -## 🎭 事件处理 - -### 26. addEventListener() - -**知识点**:为元素添加事件监听器。 - -```javascript -const button = document.getElementById("my-button"); - -// 添加点击事件监听 -button.addEventListener("click", function (event) { - console.log("按钮被点击了", event.target); - event.stopPropagation(); // 阻止事件冒泡 -}); - -// 添加带选项的事件监听 -button.addEventListener("click", handleClick, { - once: true, // 只执行一次 - capture: false, // 冒泡阶段 - passive: true, // 不会调用preventDefault() -}); -``` - -### 27. removeEventListener() - -**知识点**:移除事件监听器。 - -```javascript -function handleClick(event) { - console.log("点击处理"); -} - -// 添加事件监听 -button.addEventListener("click", handleClick); - -// 移除事件监听 -button.removeEventListener("click", handleClick); -``` - -### 28. 事件委托 - -**知识点**:利用事件冒泡处理动态元素事件。 - -```javascript -// 为父元素添加事件监听,处理动态子元素 -document.getElementById("list").addEventListener("click", function (event) { - // 检查点击的是否是列表项 - if (event.target.tagName === "LI") { - console.log("点击了列表项:", event.target.textContent); - event.target.classList.toggle("selected"); - } -}); -``` - ---- - -## 🔗 文档遍历 - -### 29. 节点关系 - -**知识点**:访问节点的父节点、子节点和兄弟节点。 - -```javascript -const element = document.getElementById("current"); - -// 父节点 -console.log(element.parentNode); - -// 所有子节点(包括文本节点) -console.log(element.childNodes); - -// 元素子节点 -console.log(element.children); - -// 第一个子节点 -console.log(element.firstChild); - -// 最后一个子节点 -console.log(element.lastChild); - -// 前一个兄弟节点 -console.log(element.previousSibling); - -// 后一个兄弟节点 -console.log(element.nextSibling); -``` - -### 30. 元素遍历 - -**知识点**:只关注元素节点的遍历方法。 - -```javascript -const element = document.getElementById("current"); - -// 父元素 -console.log(element.parentElement); - -// 第一个子元素 -console.log(element.firstElementChild); - -// 最后一个子元素 -console.log(element.lastElementChild); - -// 前一个兄弟元素 -console.log(element.previousElementSibling); - -// 后一个兄弟元素 -console.log(element.nextElementSibling); -``` - ---- - -## 🚀 性能优化 - -### 31. 文档片段 - -**知识点**:使用 DocumentFragment 提高批量 DOM 操作性能。 - -```javascript -// 创建文档片段 -const fragment = document.createDocumentFragment(); - -// 向片段中添加多个元素 -for (let i = 0; i < 100; i++) { - const item = document.createElement("li"); - item.textContent = `项目 ${i + 1}`; - fragment.appendChild(item); -} - -// 一次性添加到DOM中 -document.getElementById("list").appendChild(fragment); -``` - -### 32. 批量操作 - -**知识点**:减少 DOM 操作次数以提高性能。 - -```javascript -// 不推荐的写法(多次重排重绘) -const list = document.getElementById("list"); -for (let i = 0; i < 10; i++) { - const item = document.createElement("li"); - item.textContent = `项目 ${i}`; - list.appendChild(item); // 每次添加都触发重排 -} - -// 推荐的写法(一次操作) -const items = []; -for (let i = 0; i < 10; i++) { - const item = document.createElement("li"); - item.textContent = `项目 ${i}`; - items.push(item); -} -list.append(...items); // 一次添加所有元素 -``` - ---- - -## 🛡️ 安全相关 - -### 33. 防止 XSS 攻击 - -**知识点**:安全地操作 DOM 内容。 - -```javascript -// 不安全:可能执行恶意脚本 -element.innerHTML = userInput; // ❌ 危险! - -// 安全方法1:使用textContent -element.textContent = userInput; // ✅ 安全 - -// 安全方法2:使用innerHTML但先转义 -function escapeHTML(text) { - const div = document.createElement("div"); - div.textContent = text; - return div.innerHTML; -} - -element.innerHTML = escapeHTML(userInput); // ✅ 安全 -``` - ---- - -## 📊 完整示例 - -### 34. 动态表格生成 - -```javascript -function createTable(data, containerId) { - const container = document.getElementById(containerId); - const table = document.createElement("table"); - table.className = "data-table"; - - // 创建表头 - const thead = document.createElement("thead"); - const headerRow = document.createElement("tr"); - - Object.keys(data[0]).forEach((key) => { - const th = document.createElement("th"); - th.textContent = key; - headerRow.appendChild(th); - }); - - thead.appendChild(headerRow); - table.appendChild(thead); - - // 创建表格主体 - const tbody = document.createElement("tbody"); - - data.forEach((item) => { - const row = document.createElement("tr"); - - Object.values(item).forEach((value) => { - const td = document.createElement("td"); - td.textContent = value; - row.appendChild(td); - }); - - tbody.appendChild(row); - }); - - table.appendChild(tbody); - container.appendChild(table); -} - -// 使用示例 -const users = [ - { id: 1, name: "张三", email: "zhangsan@example.com" }, - { id: 2, name: "李四", email: "lisi@example.com" }, -]; - -createTable(users, "table-container"); -``` - -### 35. 模态框组件 - -```javascript -class Modal { - constructor(content) { - this.modal = document.createElement("div"); - this.modal.className = "modal"; - this.modal.innerHTML = ` - - `; - - this.setupEvents(); - } - - setupEvents() { - // 关闭按钮事件 - this.modal.querySelector(".close").addEventListener("click", () => { - this.hide(); - }); - - // 点击模态框外部关闭 - this.modal.addEventListener("click", (event) => { - if (event.target === this.modal) { - this.hide(); - } - }); - - // ESC键关闭 - document.addEventListener("keydown", (event) => { - if (event.key === "Escape" && this.isVisible) { - this.hide(); - } - }); - } - - show() { - document.body.appendChild(this.modal); - this.isVisible = true; - } - - hide() { - this.modal.remove(); - this.isVisible = false; - } -} - -// 使用示例 -const modal = new Modal("

    标题

    这是一段内容

    "); -modal.show(); -``` - ---- - -## 📌 实用技巧 - -### 36. 检查元素存在 - -```javascript -// 检查元素是否存在 -if (document.getElementById("element-id")) { - // 元素存在 -} - -// 检查多个元素是否存在 -const elementsExist = document.querySelectorAll(".my-class").length > 0; -``` - -### 37. 获取计算样式 - -```javascript -// 获取元素计算后的样式 -const element = document.getElementById("my-element"); -const computedStyle = window.getComputedStyle(element); -console.log("宽度:", computedStyle.width); -console.log("背景颜色:", computedStyle.backgroundColor); -``` - -### 38. 检查元素可见性 - -```javascript -function isElementVisible(element) { - const rect = element.getBoundingClientRect(); - const windowHeight = - window.innerHeight || document.documentElement.clientHeight; - - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= windowHeight && - rect.right <= (window.innerWidth || document.documentElement.clientWidth) - ); -} - -// 使用示例 -const element = document.getElementById("target"); -console.log("元素是否在视口中:", isElementVisible(element)); -``` - ---- - -## 📚 总结要点 - -| 方法/属性 | 描述 | 返回值类型 | -| -------------------- | ------------------------ | ------------------- | -| `getElementById()` | 通过 ID 获取元素 | Element | -| `querySelector()` | CSS 选择器获取第一个元素 | Element | -| `querySelectorAll()` | CSS 选择器获取所有元素 | NodeList | -| `createElement()` | 创建新元素 | Element | -| `appendChild()` | 添加子节点 | Node | -| `removeChild()` | 移除子节点 | Node | -| `addEventListener()` | 添加事件监听 | - | -| `innerHTML` | 获取/设置 HTML 内容 | String | -| `textContent` | 获取/设置文本内容 | String | -| `classList` | 操作 CSS 类 | DOMTokenList | -| `style` | 操作内联样式 | CSSStyleDeclaration | - ---- - -## ⚠️ 注意事项 - -1. **性能**:避免频繁的 DOM 操作,使用文档片段或批量操作 -2. **内存泄漏**:及时移除不再需要的事件监听器 -3. **兼容性**:注意不同浏览器对某些 API 的支持差异 -4. **安全性**:谨慎使用 `innerHTML` 处理用户输入,防止 XSS 攻击 -5. **异步加载**:确保 DOM 完全加载后再执行操作(使用 `DOMContentLoaded` 事件) - ---- - -# 练习 - -```html - - -

    第一题

    - -
    -

    李白《行路难 其一》

    - 金樽清酒斗十千,玉盘珍羞直万钱。
    - 停杯投箸不能食,拔剑四顾心茫然。
    - 欲渡黄河冰塞川,将登太行雪满山。
    - 闲来垂钓碧溪上,忽复乘舟梦日边。
    - 行路难!行路难!多岐路,今安在?
    - 长风破浪会有时,直挂云帆济沧海。
    -
    - -

    第二题

    - - 打开图片对话框 - -
    - 删除 -
    - -

    第三题

    - -
    - -``` diff --git "a/\344\270\245\345\201\245\345\256\207/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\344\270\245\345\201\245\345\256\207/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 97a9b8edc7449a8b00f262e4b1f5a6e9c203e83d..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,1205 +0,0 @@ -# JavaScript DOM 全面知识点总结 - -## 📋 目录 - -1. [DOM 概述](#dom-概述) -2. [DOM 节点属性](#dom-节点属性) -3. [DOM 节点类型](#dom-节点类型) -4. [获取文档指定元素](#获取文档指定元素) -5. [与 DHTML 对应的 DOM 操作](#与-dhtml-对应的-dom-操作) -6. [DOM 核心方法总结](#dom-核心方法总结) - ---- - -## DOM 概述 - -### 1. 什么是 DOM? - -**知识点**:DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,它将文档表示为节点树,允许程序访问和操作文档的内容、结构和样式。 - -```javascript -// 访问整个文档 -console.log(document); // Document对象 - -// 查看DOM树结构 -console.log(document.documentElement); // 元素 -``` - -### 2. DOM 树结构 - -**知识点**:DOM 将文档表示为树形结构,每个部分(元素、属性、文本)都是树上的节点。 - -```javascript -// 简单的HTML结构示例 -// -// -// 页面标题 -// -// -//

    标题

    -//

    段落

    -// -// - -console.log(document.documentElement); // 根节点 -console.log(document.head); // 节点 -console.log(document.body); // 节点 -``` - -### 3. DOM 标准化 - -**知识点**:DOM 由 W3C 标准化,分为不同级别,现代浏览器支持 DOM Level 3。 - -```javascript -// 检查DOM特性支持 -console.log("DOM Level 1:", !!document.getElementById); -console.log("DOM Level 2:", !!document.addEventListener); -console.log("DOM Level 3:", !!document.createEvent); -``` - ---- - -## DOM 节点属性 - -### 4. 通用节点属性 - -**知识点**:所有 DOM 节点都有的通用属性。 - -```javascript -const element = document.getElementById("myElement"); - -// 节点基本信息 -console.log("节点名称:", element.nodeName); // 标签名(如"DIV") -console.log("节点类型:", element.nodeType); // 1表示元素节点 -console.log("节点值:", element.nodeValue); // 对于元素节点为null - -// 父子关系 -console.log("父节点:", element.parentNode); -console.log("子节点数量:", element.childNodes.length); -console.log("第一个子节点:", element.firstChild); -console.log("最后一个子节点:", element.lastChild); -``` - -### 5. 元素节点属性 - -**知识点**:元素节点特有的属性。 - -```javascript -const div = document.querySelector("div"); - -// 元素标签相关 -console.log("标签名:", div.tagName); // "DIV" -console.log("标签名小写:", div.tagName.toLowerCase()); // "div" - -// 内容相关 -console.log("HTML内容:", div.innerHTML); -console.log("文本内容:", div.textContent); -console.log("内部文本:", div.innerText); // 考虑CSS可见性 - -// 属性相关 -console.log("所有属性:", div.attributes); -console.log("类名:", div.className); -console.log("ID:", div.id); -``` - -### 6. 属性节点属性 - -**知识点**:属性节点的特殊属性。 - -```javascript -const element = document.getElementById("myElement"); -const attr = element.attributes[0]; // 获取第一个属性节点 - -if (attr) { - console.log("属性名称:", attr.name); // 属性名 - console.log("属性值:", attr.value); // 属性值 - console.log("是否指定:", attr.specified); // 是否显式指定 - console.log("节点类型:", attr.nodeType); // 2表示属性节点 -} -``` - -### 7. 文本节点属性 - -**知识点**:文本节点的属性。 - -```javascript -const textNode = document.createTextNode("示例文本"); - -console.log("节点类型:", textNode.nodeType); // 3表示文本节点 -console.log("节点名称:", textNode.nodeName); // "#text" -console.log("节点值:", textNode.nodeValue); // "示例文本" -console.log("文本长度:", textNode.length); // 4(字符数) -``` - -### 8. 样式相关属性 - -**知识点**:与 CSS 样式相关的 DOM 属性。 - -```javascript -const element = document.getElementById("styled-element"); - -// 内联样式 -console.log("内联样式:", element.style); -element.style.color = "red"; -element.style.fontSize = "16px"; - -// 计算样式(最终应用的样式) -const computedStyle = window.getComputedStyle(element); -console.log("计算后的颜色:", computedStyle.color); -console.log("计算后的字体大小:", computedStyle.fontSize); - -// 类名操作 -console.log("类列表:", element.classList); -element.classList.add("active"); -element.classList.remove("inactive"); -``` - ---- - -## DOM 节点类型 - -### 9. 节点类型常量 - -**知识点**:DOM 定义了 12 种节点类型,使用常量值表示。 - -```javascript -// 节点类型常量 -console.log("元素节点:", Node.ELEMENT_NODE); // 1 -console.log("属性节点:", Node.ATTRIBUTE_NODE); // 2 -console.log("文本节点:", Node.TEXT_NODE); // 3 -console.log("CDATA节点:", Node.CDATA_SECTION_NODE); // 4 -console.log("实体引用:", Node.ENTITY_REFERENCE_NODE); // 5 -console.log("实体节点:", Node.ENTITY_NODE); // 6 -console.log("处理指令:", Node.PROCESSING_INSTRUCTION_NODE); // 7 -console.log("注释节点:", Node.COMMENT_NODE); // 8 -console.log("文档节点:", Node.DOCUMENT_NODE); // 9 -console.log("文档类型:", Node.DOCUMENT_TYPE_NODE); // 10 -console.log("文档片段:", Node.DOCUMENT_FRAGMENT_NODE); // 11 -console.log("符号节点:", Node.NOTATION_NODE); // 12 - -// 检查节点类型 -const element = document.createElement("div"); -console.log("元素节点类型:", element.nodeType); // 1 -console.log("类型匹配:", element.nodeType === Node.ELEMENT_NODE); // true -``` - -### 10. 文档节点 - -**知识点**:文档节点是 DOM 树的根节点,表示整个文档。 - -```javascript -console.log("文档节点类型:", document.nodeType); // 9 -console.log("文档节点名称:", document.nodeName); // "#document" -console.log("文档元素:", document.documentElement); // 元素 -console.log("文档头部:", document.head); -console.log("文档主体:", document.body); -``` - -### 11. 元素节点 - -**知识点**:元素节点表示 HTML 标签。 - -```javascript -const div = document.createElement("div"); - -console.log("元素节点类型:", div.nodeType); // 1 -console.log("元素节点名称:", div.nodeName); // "DIV" - -// 创建带属性的元素 -const img = document.createElement("img"); -img.src = "image.jpg"; -img.alt = "图片"; -img.className = "thumbnail"; - -// 创建带文本内容的元素 -const p = document.createElement("p"); -p.textContent = "这是一个段落"; -``` - -### 12. 文本节点 - -**知识点**:文本节点包含元素的文本内容。 - -```javascript -// 创建文本节点 -const textNode = document.createTextNode("Hello World"); - -console.log("文本节点类型:", textNode.nodeType); // 3 -console.log("文本节点名称:", textNode.nodeName); // "#text" -console.log("文本内容:", textNode.nodeValue); // "Hello World" - -// 操作文本内容 -textNode.nodeValue = "修改后的文本"; - -// 拆分文本节点 -const secondPart = textNode.splitText(5); -console.log("第一部分:", textNode.nodeValue); // "Hello" -console.log("第二部分:", secondPart.nodeValue); // " World" -``` - -### 13. 属性节点 - -**知识点**:属性节点表示元素的属性,但现代 API 通常不直接使用属性节点。 - -```javascript -const element = document.createElement("div"); -element.setAttribute("data-id", "123"); - -// 获取属性节点(传统方式) -const attrNode = element.attributes[0]; -console.log("属性节点类型:", attrNode.nodeType); // 2 -console.log("属性名称:", attrNode.name); // "data-id" -console.log("属性值:", attrNode.value); // "123" - -// 现代方式(推荐) -console.log("属性值:", element.getAttribute("data-id")); -``` - -### 14. 注释节点 - -**知识点**:注释节点表示 HTML 注释。 - -```javascript -// 创建注释节点 -const comment = document.createComment("这是一个注释"); - -console.log("注释节点类型:", comment.nodeType); // 8 -console.log("注释节点名称:", comment.nodeName); // "#comment" -console.log("注释内容:", comment.nodeValue); // "这是一个注释" - -// 添加到文档 -document.body.appendChild(comment); -``` - -### 15. 文档片段节点 - -**知识点**:文档片段是轻量级的文档节点,用于批量操作 DOM。 - -```javascript -// 创建文档片段 -const fragment = document.createDocumentFragment(); - -console.log("文档片段类型:", fragment.nodeType); // 11 -console.log("文档片段名称:", fragment.nodeName); // "#document-fragment" - -// 向片段中添加元素 -for (let i = 0; i < 10; i++) { - const li = document.createElement("li"); - li.textContent = `项目 ${i + 1}`; - fragment.appendChild(li); -} - -// 一次性添加到DOM -document.getElementById("list").appendChild(fragment); -``` - ---- - -## 获取文档指定元素 - -### 16. 传统获取方法 - -**知识点**:DOM Level 1 提供的基本获取方法。 - -```javascript -// 通过ID获取 -const byId = document.getElementById("header"); - -// 通过标签名获取(返回HTMLCollection) -const byTag = document.getElementsByTagName("div"); - -// 通过类名获取(返回HTMLCollection) -const byClass = document.getElementsByClassName("item"); - -// 通过name属性获取(返回NodeList) -const byName = document.getElementsByName("username"); -``` - -### 17. querySelector 方法 - -**知识点**:现代的选择器 API,支持 CSS 选择器。 - -```javascript -// 获取第一个匹配元素 -const firstMatch = document.querySelector(".container"); -const firstButton = document.querySelector('button[type="submit"]'); - -// 获取所有匹配元素(返回NodeList) -const allMatches = document.querySelectorAll(".item"); -const allInputs = document.querySelectorAll("input[required]"); - -// 复杂选择器 -const complex = document.querySelector("div.content > p:first-child"); -``` - -### 18. 选择器示例 - -**知识点**:各种 CSS 选择器的 DOM 应用。 - -```javascript -// 基本选择器 -document.querySelector("#id"); // ID选择器 -document.querySelector(".class"); // 类选择器 -document.querySelector("element"); // 元素选择器 - -// 属性选择器 -document.querySelector("[href]"); // 有href属性 -document.querySelector('[href="#"]'); // href="#" -document.querySelector('[href^="https"]'); // href以https开头 -document.querySelector('[href$=".pdf"]'); // href以.pdf结尾 -document.querySelector('[href*="example"]'); // href包含example - -// 伪类选择器 -document.querySelector(":hover"); // 鼠标悬停 -document.querySelector("input:checked"); // 选中的输入框 -document.querySelector("li:nth-child(odd)"); // 奇数子元素 -document.querySelector("tr:nth-of-type(2n)"); // 偶数行 - -// 组合选择器 -document.querySelector("div.warning"); // 同时满足 -document.querySelector("h1, h2, h3"); // 或关系 -document.querySelector("ul > li"); // 直接子元素 -document.querySelector("p + img"); // 相邻兄弟 -document.querySelector("h1 ~ p"); // 后续兄弟 -``` - -### 19. 遍历节点树 - -**知识点**:通过节点关系获取元素。 - -```javascript -const element = document.getElementById("current"); - -// 向上遍历 -console.log("父元素:", element.parentElement); -console.log("父节点:", element.parentNode); - -// 向下遍历 -console.log("所有子节点:", element.childNodes); -console.log("所有子元素:", element.children); -console.log("第一个子节点:", element.firstChild); -console.log("最后一个子节点:", element.lastChild); -console.log("第一个子元素:", element.firstElementChild); -console.log("最后一个子元素:", element.lastElementChild); - -// 水平遍历 -console.log("前一个兄弟节点:", element.previousSibling); -console.log("后一个兄弟节点:", element.nextSibling); -console.log("前一个兄弟元素:", element.previousElementSibling); -console.log("后一个兄弟元素:", element.nextElementSibling); -``` - -### 20. 节点集合类型 - -**知识点**:理解不同返回类型的区别。 - -```javascript -// HTMLCollection - 动态集合 -const htmlCollection = document.getElementsByTagName("div"); -console.log("HTMLCollection长度:", htmlCollection.length); -// 注意:HTMLCollection是实时的,DOM变化会自动更新 - -// NodeList - 可能是静态或动态的 -const nodeListStatic = document.querySelectorAll(".item"); // 静态 -const nodeListDynamic = document.getElementsByName("email"); // 动态 - -// 转换类型 -const arrayFromHTMLCollection = Array.from(htmlCollection); -const arrayFromNodeList = [...nodeListStatic]; - -// 遍历方法 -// NodeList有forEach方法 -nodeListStatic.forEach((item) => console.log(item)); - -// HTMLCollection没有forEach,需要转换 -Array.from(htmlCollection).forEach((item) => console.log(item)); -``` - ---- - -## 与 DHTML 对应的 DOM 操作 - -### 21. DHTML 概念 - -**知识点**:DHTML(Dynamic HTML)是使用 HTML、CSS 和 JavaScript 创建交互式网页的技术。 - -```javascript -// DHTML 三要素 -const html = document.getElementById("content").innerHTML; // HTML -const css = document.styleSheets[0].cssRules; // CSS -const js = document.querySelector("script").textContent; // JavaScript -``` - -### 22. 动态内容修改 - -**知识点**:动态改变 HTML 内容。 - -```javascript -// 传统DHTML方式 -document.getElementById("output").innerHTML = - "动态内容已更新"; - -// 现代DOM方式(更安全) -const output = document.getElementById("output"); -output.textContent = ""; // 清空内容 - -const strong = document.createElement("strong"); -strong.textContent = "动态内容"; -output.appendChild(strong); - -const em = document.createElement("em"); -em.textContent = "已更新"; -output.appendChild(em); -``` - -### 23. 动态样式修改 - -**知识点**:动态改变元素样式。 - -```javascript -const element = document.getElementById("dynamic-style"); - -// DHTML方式(直接设置style属性) -element.style.color = "red"; -element.style.fontSize = "20px"; -element.style.backgroundColor = "yellow"; - -// 现代方式(使用classList) -element.classList.add("highlight", "animated"); -element.classList.remove("hidden"); - -// 切换样式 -element.classList.toggle("active"); - -// 批量修改样式 -element.style.cssText = "color: blue; font-size: 18px; border: 1px solid;"; -``` - -### 24. 动态定位和大小 - -**知识点**:动态改变元素位置和尺寸。 - -```javascript -const box = document.getElementById("movable-box"); - -// 设置位置 -box.style.position = "absolute"; -box.style.left = "100px"; -box.style.top = "50px"; - -// 设置尺寸 -box.style.width = "200px"; -box.style.height = "150px"; - -// 获取元素位置和尺寸 -const rect = box.getBoundingClientRect(); -console.log("位置:", rect.left, rect.top); -console.log("尺寸:", rect.width, rect.height); -console.log("视口相对位置:", rect.x, rect.y); -``` - -### 25. 显示/隐藏元素 - -**知识点**:动态控制元素的可见性。 - -```javascript -const element = document.getElementById("toggle-element"); - -// 显示元素 -element.style.display = "block"; -element.style.visibility = "visible"; -element.classList.remove("hidden"); - -// 隐藏元素 -element.style.display = "none"; // 不占位 -element.style.visibility = "hidden"; // 占位但不可见 -element.classList.add("hidden"); // CSS类控制 - -// 切换显示状态 -function toggleVisibility() { - element.style.display = element.style.display === "none" ? "block" : "none"; -} - -// 检查是否可见 -const isVisible = element.offsetWidth > 0 && element.offsetHeight > 0; -``` - -### 26. 动态创建和插入 - -**知识点**:动态创建和插入元素。 - -```javascript -// 创建新元素 -const newDiv = document.createElement("div"); -newDiv.id = "new-element"; -newDiv.className = "box highlight"; -newDiv.textContent = "动态创建的元素"; - -// 插入到不同位置 -const container = document.getElementById("container"); - -// 添加到末尾 -container.appendChild(newDiv); - -// 添加到开头 -const firstChild = container.firstElementChild; -container.insertBefore(newDiv, firstChild); - -// 替换元素 -const oldElement = document.getElementById("old"); -container.replaceChild(newDiv, oldElement); - -// 插入到指定元素之后 -const reference = document.getElementById("reference"); -reference.parentNode.insertBefore(newDiv, reference.nextSibling); -``` - -### 27. 事件处理 - -**知识点**:DHTML 的事件处理模型。 - -```javascript -const button = document.getElementById("action-button"); - -// 传统DHTML事件处理 -button.onclick = function (event) { - console.log("按钮被点击了"); - alert("传统事件处理"); -}; - -// 现代DOM事件处理 -button.addEventListener("click", function (event) { - console.log("事件类型:", event.type); - console.log("目标元素:", event.target); - console.log("当前元素:", event.currentTarget); - - // 阻止默认行为 - event.preventDefault(); - - // 停止事件传播 - event.stopPropagation(); -}); - -// 事件委托(DHTML常用模式) -document.getElementById("list").onclick = function (event) { - if (event.target.tagName === "LI") { - event.target.classList.toggle("selected"); - } -}; -``` - -### 28. 表单动态操作 - -**知识点**:动态操作表单元素。 - -```javascript -const form = document.forms["user-form"]; - -// 动态修改表单字段 -form.elements["username"].value = "新用户名"; -form.elements["email"].disabled = false; - -// 动态添加选项 -const select = document.getElementById("city-select"); -const newOption = document.createElement("option"); -newOption.value = "beijing"; -newOption.textContent = "北京"; -select.appendChild(newOption); - -// 动态设置单选/复选框 -document.querySelector('input[name="gender"][value="female"]').checked = true; -document.getElementById("subscribe").checked = false; - -// 动态验证 -form.onsubmit = function (event) { - if (!form.elements["username"].value) { - alert("用户名不能为空"); - event.preventDefault(); - return false; - } - return true; -}; -``` - -### 29. 动态表格操作 - -**知识点**:动态创建和操作表格。 - -```javascript -// 创建表格 -const table = document.createElement("table"); -table.className = "data-table"; -table.border = "1"; - -// 创建表头 -const thead = table.createTHead(); -const headerRow = thead.insertRow(); -["ID", "姓名", "年龄"].forEach((text) => { - const th = document.createElement("th"); - th.textContent = text; - headerRow.appendChild(th); -}); - -// 创建表格主体 -const tbody = table.createTBody(); - -// 添加数据行 -const data = [ - { id: 1, name: "张三", age: 25 }, - { id: 2, name: "李四", age: 30 }, -]; - -data.forEach((item) => { - const row = tbody.insertRow(); - row.insertCell().textContent = item.id; - row.insertCell().textContent = item.name; - row.insertCell().textContent = item.age; - - // 添加行点击事件 - row.onclick = function () { - this.classList.toggle("selected"); - }; -}); - -// 添加到页面 -document.getElementById("table-container").appendChild(table); -``` - -### 30. 动态内容过滤和搜索 - -**知识点**:实现 DHTML 常见的过滤和搜索功能。 - -```javascript -// 实时搜索过滤 -function filterList(searchTerm) { - const items = document.querySelectorAll(".list-item"); - const term = searchTerm.toLowerCase(); - - items.forEach((item) => { - const text = item.textContent.toLowerCase(); - const isVisible = text.includes(term); - item.style.display = isVisible ? "block" : "none"; - }); -} - -// 动态排序 -function sortList(sortBy) { - const container = document.getElementById("item-list"); - const items = Array.from(container.children); - - items.sort((a, b) => { - const aValue = a.getAttribute(`data-${sortBy}`); - const bValue = b.getAttribute(`data-${sortBy}`); - return aValue.localeCompare(bValue); - }); - - // 重新添加排序后的元素 - items.forEach((item) => container.appendChild(item)); -} - -// 分页功能 -function showPage(pageNumber, pageSize) { - const allItems = document.querySelectorAll(".data-item"); - const startIndex = (pageNumber - 1) * pageSize; - const endIndex = startIndex + pageSize; - - allItems.forEach((item, index) => { - item.style.display = - index >= startIndex && index < endIndex ? "block" : "none"; - }); -} -``` - -### 31. 动画效果 - -**知识点**:使用 DOM 操作实现动画效果。 - -```javascript -// 简单动画函数 -function animate(element, property, targetValue, duration) { - const startValue = parseFloat(getComputedStyle(element)[property]); - const change = targetValue - startValue; - const startTime = performance.now(); - - function update(currentTime) { - const elapsed = currentTime - startTime; - const progress = Math.min(elapsed / duration, 1); - - // 缓动函数 - const easeProgress = - progress < 0.5 - ? 2 * progress * progress - : -1 + (4 - 2 * progress) * progress; - - const currentValue = startValue + change * easeProgress; - element.style[property] = currentValue + "px"; - - if (progress < 1) { - requestAnimationFrame(update); - } - } - - requestAnimationFrame(update); -} - -// 使用动画 -const box = document.getElementById("animated-box"); -animate(box, "left", 300, 1000); // 1秒内移动到300px -``` - -### 32. 拖放功能 - -**知识点**:实现 DHTML 拖放效果。 - -```javascript -// 简单拖放实现 -let draggedElement = null; - -document.addEventListener("mousedown", function (event) { - if (event.target.classList.contains("draggable")) { - draggedElement = event.target; - draggedElement.style.opacity = "0.5"; - } -}); - -document.addEventListener("mousemove", function (event) { - if (draggedElement) { - draggedElement.style.position = "absolute"; - draggedElement.style.left = event.pageX + "px"; - draggedElement.style.top = event.pageY + "px"; - } -}); - -document.addEventListener("mouseup", function (event) { - if (draggedElement) { - draggedElement.style.opacity = "1"; - - // 检查是否拖放到目标区域 - const dropZone = document.elementFromPoint(event.clientX, event.clientY); - if (dropZone.classList.contains("drop-zone")) { - dropZone.appendChild(draggedElement); - } - - draggedElement = null; - } -}); -``` - ---- - -## DOM 核心方法总结 - -### 33. 创建方法 - -```javascript -// 创建元素 -const element = document.createElement("div"); - -// 创建文本节点 -const textNode = document.createTextNode("文本内容"); - -// 创建注释 -const comment = document.createComment("注释"); - -// 创建文档片段 -const fragment = document.createDocumentFragment(); - -// 创建属性节点(不常用) -const attr = document.createAttribute("data-custom"); -``` - -### 34. 查找方法 - -```javascript -// 精确查找 -getElementById(id) // 通过ID -getElementsByName(name) // 通过name属性 -getElementsByClassName(class) // 通过类名 -getElementsByTagName(tag) // 通过标签名 - -// 选择器查找 -querySelector(selector) // 第一个匹配元素 -querySelectorAll(selector) // 所有匹配元素 - -// 遍历查找 -parentNode / parentElement // 父节点/父元素 -childNodes / children // 子节点/子元素 -firstChild / firstElementChild // 第一个子节点/元素 -lastChild / lastElementChild // 最后一个子节点/元素 -previousSibling / previousElementSibling // 前一个兄弟 -nextSibling / nextElementSibling // 后一个兄弟 -``` - -### 35. 操作方法 - -```javascript -// 添加和插入 -appendChild(node); // 添加子节点 -insertBefore(newNode, refNode); // 在指定节点前插入 - -// 移除和替换 -removeChild(node); // 移除子节点 -replaceChild(newNode, oldNode); // 替换子节点 - -// 克隆 -cloneNode(deep); // 克隆节点 - -// 包含检查 -contains(node); // 检查是否包含指定节点 -compareDocumentPosition(node); // 比较节点位置关系 -``` - -### 36. 属性方法 - -```javascript -// 属性操作 -setAttribute(name, value); // 设置属性 -getAttribute(name); // 获取属性值 -removeAttribute(name); // 移除属性 -hasAttribute(name); // 检查是否有属性 - -// 类名操作 -classList.add(className); // 添加类 -classList.remove(className); // 移除类 -classList.toggle(className); // 切换类 -classList.contains(className); // 检查类 -``` - -### 37. 事件方法 - -```javascript -// 事件监听 -addEventListener(type, handler, options) // 添加事件监听 -removeEventListener(type, handler, options) // 移除事件监听 - -// 事件触发 -dispatchEvent(event) // 触发事件 - -// 事件属性 -onclick / onmouseover 等 // 传统事件处理属性 -``` - -### 38. 样式方法 - -```javascript -// 内联样式 -element.style.property = value; // 设置样式 -element.style.cssText; // 批量设置样式 - -// 计算样式 -getComputedStyle(element); // 获取计算后的样式 - -// 类样式 -element.className; // 获取/设置类名 -element.classList; // 类列表操作 -``` - ---- - -## 📌 最佳实践总结 - -### 39. 性能优化 - -```javascript -// 1. 批量操作DOM -const fragment = document.createDocumentFragment(); -for (let i = 0; i < 100; i++) { - const item = document.createElement("div"); - fragment.appendChild(item); -} -container.appendChild(fragment); - -// 2. 缓存DOM查询结果 -const element = document.getElementById("my-element"); -// 多次使用element,而不是重复查询 - -// 3. 使用事件委托 -document.getElementById("list").addEventListener("click", function (event) { - if (event.target.tagName === "LI") { - // 处理列表项点击 - } -}); -``` - -### 40. 兼容性处理 - -```javascript -// 检查方法是否存在 -if (document.addEventListener) { - // 标准方法 - element.addEventListener("click", handler); -} else if (document.attachEvent) { - // IE8及以下 - element.attachEvent("onclick", handler); -} - -// 使用polyfill -if (!Element.prototype.classList) { - // 实现classList的polyfill -} -``` - ---- - -## 🎯 DOM 核心要点速查表 - -| 类别 | 常用方法/属性 | 描述 | -| -------- | ----------------------- | -------------- | -| **创建** | `createElement()` | 创建元素节点 | -| | `createTextNode()` | 创建文本节点 | -| **查找** | `getElementById()` | ID 查找 | -| | `querySelector()` | CSS 选择器查找 | -| **遍历** | `parentNode` | 父节点 | -| | `children` | 子元素集合 | -| **操作** | `appendChild()` | 添加子节点 | -| | `removeChild()` | 移除子节点 | -| **属性** | `setAttribute()` | 设置属性 | -| | `classList` | 类名操作 | -| **样式** | `style` | 内联样式 | -| | `getComputedStyle()` | 计算样式 | -| **事件** | `addEventListener()` | 添加事件监听 | -| | `removeEventListener()` | 移除事件监听 | - ---- - -# 训练 - -```html - - - - -

    训练一

    - - - -
    - -

    训练二

    -
    - 故事的小黄花
    - 从出生那年就飘着
    - 童年的荡秋千
    - 随记忆一直晃到现在
    - Re So So Si Do Si La
    - So La Si Si Si Si La Si La So
    - 吹着前奏望着天空
    - 我想起花瓣试着掉落
    - 为你翘课的那一天
    - 花落的那一天
    - 教室的那一间
    - 我怎么看不见
    - 消失的下雨天
    - 我好想再淋一遍
    -
    - - - -

    第三题

    -

    最新电影资讯

    -
      -
    • 1.《金蝉脱壳》
    • -
    • 2.《阿甘正传》
    • -
    • 3.《爱乐之城》
    • -
    • 4.《头号玩家》
    • -
    - 输入影片资讯编号: - - - -

    第四题

    -
    -
      -
    • 黄瓜
    • -
    • 茄子
    • -
    • 芒果
    • -
    -
      -
    • 西瓜
    • -
    • 蜜橘
    • -
    • 萝卜
    • -
    -
    - - -

    第五题

    -

    在《倚天屠龙记》中,张三丰是_____派的掌门?

    - A.少林 - B.武当 - C.峨眉 - D.昆仑 - - -

    第六题

    - 原超链接文本 - - - -``` - -# 练习 - -```html -
    -

    一生只爱一人

    - 将粗体改为斜体 -
    - - - - - -
    请选择表情:
    - -``` diff --git "a/\344\270\245\345\201\245\345\256\207/20251205-window\345\257\271\350\261\241.md" "b/\344\270\245\345\201\245\345\256\207/20251205-window\345\257\271\350\261\241.md" deleted file mode 100644 index dcdd31e8821acedf56a9e4c0c465a29e86964c5c..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251205-window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,1623 +0,0 @@ -# JavaScript Window 对象全面知识点总结 - -## 📋 目录 - -1. [Window 对象简介](#window-对象简介) -2. [对话框方法](#对话框方法) -3. [窗口的打开与关闭](#窗口的打开与关闭) -4. [控制窗口](#控制窗口) -5. [窗口事件](#窗口事件) -6. [窗口导航与历史](#窗口导航与历史) -7. [窗口尺寸与位置](#窗口尺寸与位置) -8. [定时器与动画](#定时器与动画) - ---- - -## Window 对象简介 - -### 1. Window 对象是什么? - -**知识点**:Window 对象代表浏览器窗口,是 JavaScript 的全局对象,包含所有全局变量、函数和对象。 - -```javascript -// Window 对象是全局对象 -console.log(window === this); // 在全局作用域中为 true - -// 全局变量自动成为 window 的属性 -var globalVar = "全局变量"; -console.log(window.globalVar); // "全局变量" - -// 全局函数也是 window 的方法 -function sayHello() { - return "Hello"; -} -console.log(window.sayHello()); // "Hello" -``` - -### 2. Window 对象与其他对象的关系 - -**知识点**:Window 对象包含 document、location、history、navigator 等子对象。 - -```javascript -// Window 的子对象 -console.log(window.document); // Document 对象 -console.log(window.location); // Location 对象 -console.log(window.history); // History 对象 -console.log(window.navigator); // Navigator 对象 -console.log(window.screen); // Screen 对象 -console.log(window.localStorage); // Storage 对象 - -// 访问时可以省略 window 前缀 -console.log(document === window.document); // true -console.log(location === window.location); // true -``` - -### 3. 全局作用域 - -**知识点**:在浏览器中,全局作用域就是 Window 对象。 - -```javascript -// 检查变量是否在全局作用域中 -var x = 10; -let y = 20; // let/const 声明的变量不会成为 window 的属性 -const z = 30; - -console.log(window.x); // 10 -console.log(window.y); // undefined -console.log(window.z); // undefined - -// 在严格模式下,this 在全局作用域中为 undefined -("use strict"); -console.log(this); // undefined (非严格模式下为 window) -``` - ---- - -## 对话框方法 - -### 4. alert() 方法 - -**知识点**:显示一个警告对话框,包含指定的消息和一个"确定"按钮。 - -```javascript -// 基本用法 -alert("这是一个警告信息"); - -// 显示变量值 -let userName = "张三"; -alert(`欢迎, ${userName}!`); - -// 显示对象信息 -let user = { name: "李四", age: 25 }; -alert(JSON.stringify(user, null, 2)); - -// 注意:alert 会阻塞代码执行 -console.log("这行代码在 alert 关闭后执行"); -``` - -### 5. confirm() 方法 - -**知识点**:显示一个确认对话框,包含指定的消息和"确定"/"取消"按钮,返回布尔值。 - -```javascript -// 基本用法 -let result = confirm("您确定要删除此项吗?"); -console.log("用户选择:", result); // true 或 false - -// 根据选择执行不同操作 -if (confirm("是否继续?")) { - console.log("用户选择了继续"); - // 执行继续操作 -} else { - console.log("用户选择了取消"); - // 执行取消操作 -} - -// 使用在三元表达式中 -let action = confirm("启用高级功能?") ? "启用" : "禁用"; -console.log("操作:", action); -``` - -### 6. prompt() 方法 - -**知识点**:显示一个提示对话框,包含输入框和"确定"/"取消"按钮,返回输入值或 null。 - -```javascript -// 基本用法 -let name = prompt("请输入您的姓名:"); -console.log("输入的姓名:", name); - -// 带默认值 -let age = prompt("请输入您的年龄:", "25"); -console.log("输入的年龄:", age); - -// 验证输入 -let input; -do { - input = prompt("请输入一个数字(1-10):"); -} while (input === null || isNaN(input) || input < 1 || input > 10); - -console.log("有效的输入:", input); - -// 处理取消操作 -let email = prompt("请输入邮箱:"); -if (email === null) { - console.log("用户取消了输入"); -} else if (email.trim() === "") { - console.log("用户输入了空字符串"); -} else { - console.log("用户输入:", email); -} -``` - -### 7. 自定义对话框 - -**知识点**:使用 DOM 创建更灵活的自定义对话框。 - -```javascript -// 创建自定义确认对话框 -function customConfirm(message, callback) { - // 创建对话框元素 - const dialog = document.createElement("div"); - dialog.style.cssText = ` - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: white; - padding: 20px; - border: 2px solid #333; - border-radius: 5px; - z-index: 1000; - `; - - dialog.innerHTML = ` -

    ${message}

    - - - `; - - document.body.appendChild(dialog); - - // 添加事件处理 - document.getElementById("confirmOk").onclick = function () { - document.body.removeChild(dialog); - callback(true); - }; - - document.getElementById("confirmCancel").onclick = function () { - document.body.removeChild(dialog); - callback(false); - }; -} - -// 使用自定义对话框 -customConfirm("是否确认操作?", function (result) { - console.log("用户选择:", result); -}); -``` - ---- - -## 窗口的打开与关闭 - -### 8. window.open() 方法 - -**知识点**:打开一个新的浏览器窗口或标签页。 - -```javascript -// 基本用法 - 在新标签页中打开 -const newWindow = window.open("https://www.example.com"); - -// 指定窗口名称(可用于 target 属性) -window.open("page.html", "myWindow"); - -// 在新窗口中打开(不是新标签页) -const popup = window.open("popup.html", "popup", "width=400,height=300"); - -// 控制是否显示浏览器控件 -const minimalWindow = window.open( - "minimal.html", - "minimal", - "menubar=no,toolbar=no,location=no,status=no" -); - -// 获取打开的窗口引用 -const myWindow = window.open("", "myWindow"); -if (myWindow) { - myWindow.document.write("

    Hello from opener!

    "); -} -``` - -### 9. 窗口打开参数 - -**知识点**:window.open() 的第三个参数控制窗口特性。 - -```javascript -// 完整的窗口特性参数 -const features = [ - "width=800", // 窗口宽度 - "height=600", // 窗口高度 - "left=100", // 距离屏幕左边缘 - "top=100", // 距离屏幕上边缘 - "resizable=yes", // 是否可调整大小 - "scrollbars=yes", // 是否显示滚动条 - "toolbar=no", // 是否显示工具栏 - "menubar=no", // 是否显示菜单栏 - "location=no", // 是否显示地址栏 - "status=no", // 是否显示状态栏 - "fullscreen=no", // 是否全屏(需要用户交互) -].join(","); - -const configuredWindow = window.open("config.html", "config", features); - -// 检查窗口是否成功打开 -if (!configuredWindow) { - alert("弹出窗口被浏览器阻止了!请允许弹出窗口。"); -} -``` - -### 10. window.close() 方法 - -**知识点**:关闭当前窗口或指定的窗口。 - -```javascript -// 关闭当前窗口 -function closeCurrentWindow() { - if (confirm("确定要关闭窗口吗?")) { - window.close(); - } -} - -// 关闭由 window.open() 打开的窗口 -let openedWindow = null; - -function openAndClose() { - // 打开新窗口 - openedWindow = window.open("", "testWindow", "width=400,height=300"); - - // 在新窗口中写入内容 - openedWindow.document.write("

    这个窗口将在5秒后关闭

    "); - - // 5秒后关闭窗口 - setTimeout(() => { - if (openedWindow && !openedWindow.closed) { - openedWindow.close(); - console.log("窗口已关闭"); - } - }, 5000); -} - -// 检查窗口是否已关闭 -if (openedWindow && openedWindow.closed) { - console.log("窗口已经关闭了"); -} -``` - -### 11. 窗口状态检测 - -**知识点**:检测窗口的打开和关闭状态。 - -```javascript -let childWindow = null; - -// 打开子窗口 -function openChildWindow() { - childWindow = window.open("child.html", "child", "width=400,height=300"); - - // 定期检查子窗口是否关闭 - const checkInterval = setInterval(() => { - if (childWindow.closed) { - console.log("子窗口已关闭"); - clearInterval(checkInterval); - // 执行清理操作 - childWindow = null; - } - }, 1000); -} - -// 与子窗口通信 -function sendMessageToChild() { - if (childWindow && !childWindow.closed) { - // 向子窗口传递数据 - childWindow.postMessage("Hello from parent!", "*"); - - // 调用子窗口的函数(如果同源) - try { - childWindow.someFunction(); - } catch (e) { - console.log("跨域限制或函数不存在"); - } - } else { - console.log("子窗口未打开或已关闭"); - } -} -``` - ---- - -## 控制窗口 - -### 12. 移动窗口 - -**知识点**:移动窗口到指定位置。 - -```javascript -// 移动当前窗口 -function moveWindowTo(x, y) { - // 注意:现代浏览器出于安全考虑,通常不允许脚本移动主窗口 - // 但可以移动由 window.open() 打开的窗口 - - if (window.opener) { - // 如果这是由其他窗口打开的 - window.moveTo(x, y); - } -} - -// 移动由脚本打开的窗口 -let movableWindow = null; - -function createMovableWindow() { - movableWindow = window.open("", "movable", "width=300,height=200"); - - // 添加控制按钮 - movableWindow.document.write(` -

    可移动窗口

    - - - `); -} - -// 相对移动 -function moveWindowRelative(dx, dy) { - if (movableWindow && !movableWindow.closed) { - movableWindow.moveBy(dx, dy); - } -} -``` - -### 13. 调整窗口大小 - -**知识点**:调整窗口的尺寸。 - -```javascript -// 调整当前窗口大小 -function resizeCurrentWindow(width, height) { - // 注意:通常不能调整主窗口大小 - // 但可以调整由 window.open() 打开的窗口 - window.resizeTo(width, height); -} - -// 调整由脚本打开的窗口 -let resizableWindow = null; - -function createResizableWindow() { - resizableWindow = window.open( - "", - "resizable", - "width=400,height=300,resizable=yes" - ); - - // 添加控制按钮 - resizableWindow.document.write(` -

    可调整大小的窗口

    - - - - `); -} - -// 检查窗口是否可以调整大小 -function checkIfResizable() { - if (resizableWindow) { - // 注意:没有直接的方法检查,但可以尝试调整 - try { - resizableWindow.resizeBy(1, 1); - resizableWindow.resizeBy(-1, -1); // 恢复 - console.log("窗口可以调整大小"); - return true; - } catch (e) { - console.log("窗口不能调整大小"); - return false; - } - } - return false; -} -``` - -### 14. 窗口滚动控制 - -**知识点**:控制窗口的滚动位置。 - -```javascript -// 滚动到指定位置 -function scrollToPosition(x, y) { - window.scrollTo(x, y); - - // 或使用选项对象 - window.scrollTo({ - top: y, - left: x, - behavior: "smooth", // 'auto' 或 'smooth' - }); -} - -// 滚动到元素 -function scrollToElement(elementId) { - const element = document.getElementById(elementId); - if (element) { - element.scrollIntoView({ - behavior: "smooth", - block: "start", // 'start', 'center', 'end', 'nearest' - }); - } -} - -// 相对滚动 -function scrollByAmount(dx, dy) { - window.scrollBy(dx, dy); - - // 平滑滚动 - window.scrollBy({ - top: dy, - left: dx, - behavior: "smooth", - }); -} - -// 获取当前滚动位置 -function getScrollPosition() { - return { - x: window.pageXOffset || document.documentElement.scrollLeft, - y: window.pageYOffset || document.documentElement.scrollTop, - }; -} - -// 滚动到页面顶部 -function scrollToTop() { - window.scrollTo({ top: 0, behavior: "smooth" }); -} - -// 滚动到页面底部 -function scrollToBottom() { - window.scrollTo({ - top: document.documentElement.scrollHeight, - behavior: "smooth", - }); -} -``` - -### 15. 窗口焦点控制 - -**知识点**:控制窗口的焦点状态。 - -```javascript -// 将焦点设置到当前窗口 -function focusWindow() { - window.focus(); - console.log("窗口已获得焦点"); -} - -// 使窗口失去焦点 -function blurWindow() { - window.blur(); - console.log("窗口已失去焦点"); -} - -// 检查窗口是否有焦点 -function checkWindowFocus() { - if (document.hasFocus()) { - console.log("当前窗口有焦点"); - return true; - } else { - console.log("当前窗口没有焦点"); - return false; - } -} - -// 焦点变化示例 -let lastFocusTime = Date.now(); - -window.addEventListener("focus", () => { - const now = Date.now(); - const awayTime = now - lastFocusTime; - console.log(`窗口重新获得焦点,离开时间:${awayTime}ms`); -}); - -window.addEventListener("blur", () => { - lastFocusTime = Date.now(); - console.log("窗口失去焦点"); -}); - -// 自动聚焦输入框 -function autoFocusInput() { - const input = document.getElementById("myInput"); - if (input) { - input.focus(); - // 选中文本(可选) - input.select(); - } -} -``` - ---- - -## 窗口事件 - -### 16. load 事件 - -**知识点**:当整个页面及所有依赖资源(如图片、样式表)已完全加载时触发。 - -```javascript -// 使用 addEventListener -window.addEventListener("load", function () { - console.log("所有资源已完全加载"); - // 可以安全地操作DOM和资源 - const images = document.getElementsByTagName("img"); - console.log(`页面包含 ${images.length} 张图片`); -}); - -// 传统方式 -window.onload = function () { - console.log("页面加载完成(传统方式)"); - // 初始化应用 - initApp(); -}; - -// 图片加载完成后执行 -const img = new Image(); -img.src = "large-image.jpg"; -img.onload = function () { - console.log("大图片加载完成"); - document.body.appendChild(img); -}; -``` - -### 17. DOMContentLoaded 事件 - -**知识点**:当初始 HTML 文档完全加载和解析完成(不等待样式表、图片等)时触发。 - -```javascript -// 推荐使用 - 比 load 事件更快 -document.addEventListener("DOMContentLoaded", function () { - console.log("DOM 已完全加载和解析"); - // DOM 已就绪,可以操作元素 - const buttons = document.querySelectorAll("button"); - console.log(`找到 ${buttons.length} 个按钮`); - - // 添加事件监听器等 - buttons.forEach((btn) => { - btn.addEventListener("click", handleClick); - }); -}); - -// 传统方式 -document.onreadystatechange = function () { - if (document.readyState === "interactive") { - console.log("DOM 准备就绪(readystatechange)"); - } -}; -``` - -### 18. beforeunload 事件 - -**知识点**:在窗口、文档即将卸载时触发,可用于提示用户保存更改。 - -```javascript -// 提示用户离开前保存数据 -window.addEventListener("beforeunload", function (event) { - // 如果有未保存的更改 - if (hasUnsavedChanges) { - // 标准方式 - event.preventDefault(); - // Chrome 需要设置 returnValue - event.returnValue = "您有未保存的更改,确定要离开吗?"; - return "您有未保存的更改,确定要离开吗?"; - } -}); - -// 传统方式 -window.onbeforeunload = function () { - if (hasUnsavedChanges) { - return "您有未保存的更改,确定要离开吗?"; - } -}; - -// 清除 beforeunload 处理程序 -function clearBeforeUnload() { - window.onbeforeunload = null; - // 或使用 removeEventListener -} -``` - -### 19. unload 事件 - -**知识点**:当文档或子资源正在被卸载时触发,用于清理操作。 - -```javascript -// 在页面卸载时执行清理 -window.addEventListener("unload", function () { - // 发送统计数据 - if (navigator.sendBeacon) { - const data = new FormData(); - data.append("event", "page_unload"); - data.append("time", Date.now()); - navigator.sendBeacon("/analytics", data); - } - - // 清理资源 - cleanupResources(); - - console.log("页面正在卸载"); -}); - -// 注意:unload 事件中不能使用同步的 alert/confirm/prompt -// 也不能阻止页面卸载 -``` - -### 20. resize 事件 - -**知识点**:当窗口大小改变时触发。 - -```javascript -// 监听窗口大小变化 -let resizeTimeout; -window.addEventListener("resize", function () { - // 防抖处理,避免频繁触发 - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(() => { - console.log("窗口大小已改变"); - console.log("新尺寸:", window.innerWidth, "x", window.innerHeight); - - // 根据窗口大小调整布局 - adjustLayoutForScreenSize(); - }, 250); // 250ms 防抖延迟 -}); - -// 获取窗口尺寸 -function getWindowSize() { - return { - width: window.innerWidth || document.documentElement.clientWidth, - height: window.innerHeight || document.documentElement.clientHeight, - outerWidth: window.outerWidth, - outerHeight: window.outerHeight, - }; -} - -// 响应式设计检查 -function checkResponsiveBreakpoint() { - const width = window.innerWidth; - - if (width >= 1200) { - console.log("超大屏幕"); - } else if (width >= 992) { - console.log("大屏幕"); - } else if (width >= 768) { - console.log("中等屏幕"); - } else if (width >= 576) { - console.log("小屏幕"); - } else { - console.log("超小屏幕"); - } -} -``` - -### 21. scroll 事件 - -**知识点**:当窗口滚动时触发。 - -```javascript -// 监听滚动事件 -let lastScrollTop = 0; -window.addEventListener("scroll", function () { - const scrollTop = window.pageYOffset || document.documentElement.scrollTop; - - // 检查滚动方向 - if (scrollTop > lastScrollTop) { - console.log("向下滚动"); - } else { - console.log("向上滚动"); - } - - lastScrollTop = scrollTop; - - // 无限滚动示例 - if (isNearBottom()) { - loadMoreContent(); - } - - // 固定导航栏 - toggleFixedNavbar(scrollTop); -}); - -// 检查是否接近底部 -function isNearBottom() { - const scrollTop = window.pageYOffset || document.documentElement.scrollTop; - const scrollHeight = document.documentElement.scrollHeight; - const clientHeight = document.documentElement.clientHeight; - - // 距离底部 200px 时触发 - return scrollTop + clientHeight >= scrollHeight - 200; -} - -// 节流滚动事件(性能优化) -function throttleScroll(callback, delay) { - let isThrottled = false; - - return function () { - if (!isThrottled) { - callback(); - isThrottled = true; - setTimeout(() => { - isThrottled = false; - }, delay); - } - }; -} - -window.addEventListener( - "scroll", - throttleScroll(() => { - console.log("节流后的滚动处理"); - }, 100) -); // 每100ms最多执行一次 -``` - -### 22. focus 和 blur 事件 - -**知识点**:当窗口获得或失去焦点时触发。 - -```javascript -// 窗口获得焦点 -window.addEventListener("focus", function () { - console.log("窗口获得焦点"); - - // 恢复应用状态 - if (isAppPaused) { - resumeApp(); - } - - // 更新页面标题 - document.title = document.title.replace(" [未激活]", ""); -}); - -// 窗口失去焦点 -window.addEventListener("blur", function () { - console.log("窗口失去焦点"); - - // 暂停应用活动 - pauseApp(); - - // 更新页面标题提示 - if (!document.title.includes("[未激活]")) { - document.title += " [未激活]"; - } -}); - -// 检查当前焦点状态 -function checkFocusStatus() { - if (document.hasFocus()) { - console.log("当前窗口处于活动状态"); - return true; - } else { - console.log("当前窗口处于非活动状态"); - return false; - } -} - -// 页面可见性 API(更现代的替代方案) -document.addEventListener("visibilitychange", function () { - if (document.hidden) { - console.log("页面隐藏"); - } else { - console.log("页面可见"); - } -}); -``` - -### 23. hashchange 事件 - -**知识点**:当 URL 的哈希部分(#后面)改变时触发。 - -```javascript -// 监听哈希变化 -window.addEventListener("hashchange", function (event) { - console.log("哈希已改变"); - console.log("旧URL:", event.oldURL); - console.log("新URL:", event.newURL); - console.log("当前哈希:", window.location.hash); - - // 根据哈希更新页面内容 - const hash = window.location.hash.substring(1); // 去掉 # - if (hash) { - loadContent(hash); - } else { - loadDefaultContent(); - } -}); - -// 手动触发哈希变化 -function navigateToSection(sectionId) { - window.location.hash = sectionId; - // 或使用 history.pushState(不触发 hashchange) - // history.pushState(null, '', '#' + sectionId); -} - -// 初始化时检查哈希 -if (window.location.hash) { - const section = window.location.hash.substring(1); - loadContent(section); -} -``` - -### 24. message 事件 - -**知识点**:当窗口收到来自其他窗口的消息时触发(跨文档通信)。 - -```javascript -// 接收来自其他窗口的消息 -window.addEventListener("message", function (event) { - // 安全检查:检查消息来源 - const allowedOrigin = "https://trusted-site.com"; - if (event.origin !== allowedOrigin) { - console.warn("收到来自不受信任来源的消息:", event.origin); - return; - } - - console.log("收到消息:", event.data); - console.log("来源:", event.origin); - console.log("来源窗口:", event.source); - - // 处理消息 - if (event.data.type === "updateData") { - updateData(event.data.payload); - } - - // 可选:发送回复 - event.source.postMessage( - { - type: "acknowledge", - message: "消息已收到", - }, - event.origin - ); -}); - -// 向其他窗口发送消息 -function sendMessageToIframe() { - const iframe = document.getElementById("myIframe"); - if (iframe && iframe.contentWindow) { - iframe.contentWindow.postMessage( - { - type: "command", - action: "refresh", - }, - "https://iframe-origin.com" - ); - } -} - -// 向父窗口发送消息(如果在 iframe 中) -if (window.parent !== window) { - window.parent.postMessage( - { - type: "ready", - content: "iframe 已加载完成", - }, - "*" - ); // 注意:使用 '*' 有安全风险,生产环境应指定具体来源 -} -``` - -### 25. storage 事件 - -**知识点**:当 localStorage 或 sessionStorage 发生变化时触发(仅在同源的其他窗口中)。 - -```javascript -// 监听存储变化 -window.addEventListener("storage", function (event) { - console.log("存储发生变化:"); - console.log("键:", event.key); - console.log("旧值:", event.oldValue); - console.log("新值:", event.newValue); - console.log("URL:", event.url); - console.log("存储区域:", event.storageArea); - - // 更新应用状态 - if (event.key === "userPreferences") { - updatePreferences(JSON.parse(event.newValue)); - } -}); - -// 示例:在一个标签页中设置,在另一个标签页中监听 -function saveUserSettings(settings) { - localStorage.setItem("userPreferences", JSON.stringify(settings)); - console.log("设置已保存"); -} - -// 当前窗口的变化不会触发自己的 storage 事件 -// 只会在同源的其他窗口中触发 -``` - ---- - -## 窗口导航与历史 - -### 26. location 对象 - -**知识点**:window.location 对象包含当前 URL 的信息,并可用于导航。 - -```javascript -// 获取当前URL信息 -console.log("完整URL:", window.location.href); -console.log("协议:", window.location.protocol); // https: -console.log("主机:", window.location.host); // example.com:8080 -console.log("主机名:", window.location.hostname); // example.com -console.log("端口:", window.location.port); // 8080 -console.log("路径:", window.location.pathname); // /path/to/page -console.log("搜索参数:", window.location.search); // ?id=123 -console.log("哈希:", window.location.hash); // #section -console.log("来源:", window.location.origin); // https://example.com:8080 - -// 导航到新页面 -function navigateTo(url) { - window.location.href = url; // 最常用 - // 或 window.location = url; - // 或 window.location.assign(url); -} - -// 重定向到新页面(替换当前历史记录) -function redirectTo(url) { - window.location.replace(url); // 当前页面不会留在历史记录中 -} - -// 重新加载页面 -function reloadPage() { - window.location.reload(); // 重新加载 - // window.location.reload(true); // 强制从服务器重新加载(忽略缓存) -} - -// 获取URL参数 -function getUrlParams() { - const params = new URLSearchParams(window.location.search); - const id = params.get("id"); // 获取id参数 - const name = params.get("name"); // 获取name参数 - - console.log("ID:", id); - console.log("所有参数:", Object.fromEntries(params)); - return { id, name }; -} -``` - -### 27. history 对象 - -**知识点**:window.history 对象允许操作浏览器会话历史记录。 - -```javascript -// 前进和后退 -function goBack() { - window.history.back(); // 等同于点击后退按钮 - // 或 window.history.go(-1); -} - -function goForward() { - window.history.forward(); // 等同于点击前进按钮 - // 或 window.history.go(1); -} - -// 跳转到历史记录中的特定位置 -function goToHistory(index) { - window.history.go(index); // 正数前进,负数后退 -} - -// 添加历史记录(不会加载新页面) -function addHistoryState(state, title, url) { - window.history.pushState(state, title, url); - console.log("历史记录已添加:", url); -} - -// 替换当前历史记录 -function replaceHistoryState(state, title, url) { - window.history.replaceState(state, title, url); - console.log("历史记录已替换:", url); -} - -// 监听历史记录变化 -window.addEventListener("popstate", function (event) { - console.log("位置变化:", window.location.href); - console.log("状态:", event.state); - - // 根据状态更新页面内容 - if (event.state) { - loadContentBasedOnState(event.state); - } -}); - -// 单页应用(SPA)路由示例 -function navigateToPage(page) { - const state = { page: page, timestamp: Date.now() }; - const url = `/${page}`; - - // 添加历史记录 - history.pushState(state, "", url); - - // 加载页面内容(不刷新页面) - loadPageContent(page); -} -``` - -### 28. navigator 对象 - -**知识点**:window.navigator 对象包含有关浏览器的信息。 - -```javascript -// 浏览器信息 -console.log("用户代理:", navigator.userAgent); -console.log("平台:", navigator.platform); -console.log("语言:", navigator.language); -console.log("浏览器语言:", navigator.languages); -console.log("Cookie 启用:", navigator.cookieEnabled); -console.log("在线状态:", navigator.onLine); - -// 检测设备类型 -function detectDevice() { - const ua = navigator.userAgent; - - if (/mobile/i.test(ua)) { - return "mobile"; - } else if (/tablet/i.test(ua)) { - return "tablet"; - } else { - return "desktop"; - } -} - -// 检测浏览器 -function detectBrowser() { - const ua = navigator.userAgent; - - if (/chrome/i.test(ua) && !/edge/i.test(ua)) { - return "Chrome"; - } else if (/firefox/i.test(ua)) { - return "Firefox"; - } else if (/safari/i.test(ua) && !/chrome/i.test(ua)) { - return "Safari"; - } else if (/edge/i.test(ua)) { - return "Edge"; - } else if (/msie/i.test(ua) || /trident/i.test(ua)) { - return "IE"; - } else { - return "Unknown"; - } -} - -// 检查网络状态 -function checkNetworkStatus() { - if (navigator.onLine) { - console.log("设备在线"); - return true; - } else { - console.log("设备离线"); - return false; - } -} - -// 监听网络状态变化 -window.addEventListener("online", () => { - console.log("设备已连接到网络"); - // 重新同步数据 -}); - -window.addEventListener("offline", () => { - console.log("设备已断开网络"); - // 显示离线提示 -}); -``` - ---- - -## 窗口尺寸与位置 - -### 29. 获取窗口尺寸 - -**知识点**:获取窗口和屏幕的尺寸信息。 - -```javascript -// 获取视口尺寸(显示网页的区域) -function getViewportSize() { - return { - width: window.innerWidth, - height: window.innerHeight, - // 兼容性处理 - widthAlt: document.documentElement.clientWidth, - heightAlt: document.documentElement.clientHeight, - }; -} - -// 获取整个窗口尺寸(包括浏览器界面) -function getWindowOuterSize() { - return { - width: window.outerWidth, - height: window.outerHeight, - }; -} - -// 获取屏幕尺寸 -function getScreenSize() { - return { - width: screen.width, - height: screen.height, - availWidth: screen.availWidth, // 可用宽度(不包括任务栏等) - availHeight: screen.availHeight, // 可用高度 - colorDepth: screen.colorDepth, // 颜色深度 - pixelDepth: screen.pixelDepth, // 像素深度 - }; -} - -// 获取文档尺寸(整个页面内容) -function getDocumentSize() { - return { - width: document.documentElement.scrollWidth, - height: document.documentElement.scrollHeight, - }; -} - -// 响应式设计辅助函数 -function getBreakpoint() { - const width = window.innerWidth; - - if (width >= 1400) return "xxl"; - if (width >= 1200) return "xl"; - if (width >= 992) return "lg"; - if (width >= 768) return "md"; - if (width >= 576) return "sm"; - return "xs"; -} - -// 监听窗口尺寸变化 -function watchWindowSize(callback) { - let lastSize = getViewportSize(); - - window.addEventListener("resize", () => { - const newSize = getViewportSize(); - - if ( - newSize.width !== lastSize.width || - newSize.height !== lastSize.height - ) { - callback(newSize, lastSize); - lastSize = newSize; - } - }); -} -``` - -### 30. 获取窗口位置 - -**知识点**:获取窗口在屏幕上的位置。 - -```javascript -// 获取窗口相对于屏幕的位置 -function getWindowPosition() { - return { - screenX: window.screenX, // 窗口左上角X坐标 - screenY: window.screenY, // 窗口左上角Y坐标 - screenLeft: window.screenLeft, // 兼容性别名 - screenTop: window.screenTop, // 兼容性别名 - }; -} - -// 获取滚动位置 -function getScrollPosition() { - return { - x: window.pageXOffset || document.documentElement.scrollLeft, - y: window.pageYOffset || document.documentElement.scrollTop, - }; -} - -// 元素相对于视口的位置 -function getElementViewportPosition(element) { - const rect = element.getBoundingClientRect(); - return { - top: rect.top, - right: rect.right, - bottom: rect.bottom, - left: rect.left, - width: rect.width, - height: rect.height, - }; -} - -// 检查元素是否在视口中 -function isElementInViewport(element) { - const rect = element.getBoundingClientRect(); - const windowHeight = - window.innerHeight || document.documentElement.clientHeight; - const windowWidth = window.innerWidth || document.documentElement.clientWidth; - - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= windowHeight && - rect.right <= windowWidth - ); -} - -// 检查元素是否部分可见 -function isElementPartiallyVisible(element) { - const rect = element.getBoundingClientRect(); - const windowHeight = - window.innerHeight || document.documentElement.clientHeight; - const windowWidth = window.innerWidth || document.documentElement.clientWidth; - - const vertInView = rect.top <= windowHeight && rect.bottom >= 0; - const horInView = rect.left <= windowWidth && rect.right >= 0; - - return vertInView && horInView; -} -``` - ---- - -## 定时器与动画 - -### 31. setTimeout() - -**知识点**:在指定的毫秒数后执行一次函数。 - -```javascript -// 基本用法 -setTimeout(() => { - console.log("3秒后执行"); -}, 3000); - -// 带参数的函数 -function greet(name) { - console.log(`Hello, ${name}!`); -} -setTimeout(greet, 2000, "张三"); - -// 清除定时器 -const timeoutId = setTimeout(() => { - console.log("这个不会执行"); -}, 5000); - -// 在2秒后清除定时器 -setTimeout(() => { - clearTimeout(timeoutId); - console.log("定时器已清除"); -}, 2000); - -// 模拟异步操作 -function simulateAsyncTask(duration) { - console.log(`任务开始,需要 ${duration}ms`); - - return new Promise((resolve) => { - setTimeout(() => { - console.log("任务完成"); - resolve("结果"); - }, duration); - }); -} -``` - -### 32. setInterval() - -**知识点**:按照指定的周期(毫秒)重复执行函数。 - -```javascript -// 基本用法 -let counter = 0; -const intervalId = setInterval(() => { - counter++; - console.log(`计数器: ${counter}`); - - if (counter >= 10) { - clearInterval(intervalId); - console.log("定时器已停止"); - } -}, 1000); // 每秒执行一次 - -// 时钟示例 -function startClock() { - const clockElement = document.getElementById("clock"); - - const updateClock = () => { - const now = new Date(); - const timeString = now.toLocaleTimeString(); - clockElement.textContent = timeString; - }; - - // 立即更新一次 - updateClock(); - - // 每秒更新一次 - return setInterval(updateClock, 1000); -} - -// 动画示例(简单实现) -function animateElement(element, duration) { - const start = Date.now(); - const startPosition = 0; - const endPosition = 300; - - const intervalId = setInterval(() => { - const elapsed = Date.now() - start; - const progress = Math.min(elapsed / duration, 1); - - // 线性动画 - const currentPosition = - startPosition + (endPosition - startPosition) * progress; - element.style.left = currentPosition + "px"; - - if (progress >= 1) { - clearInterval(intervalId); - console.log("动画完成"); - } - }, 16); // 约60fps -} - -// 轮询示例 -function pollServer() { - const pollInterval = 5000; // 5秒 - - const poll = () => { - fetch("/api/status") - .then((response) => response.json()) - .then((data) => { - console.log("服务器状态:", data); - // 处理数据 - }) - .catch((error) => { - console.error("轮询错误:", error); - }); - }; - - // 立即执行一次 - poll(); - - // 然后每5秒执行一次 - return setInterval(poll, pollInterval); -} -``` - -### 33. requestAnimationFrame() - -**知识点**:为动画优化的定时器,在浏览器重绘之前执行。 - -```javascript -// 基本用法 -function animate() { - // 动画逻辑 - updateAnimation(); - - // 请求下一帧 - requestAnimationFrame(animate); -} - -// 启动动画 -requestAnimationFrame(animate); - -// 平滑动画示例 -function smoothAnimate(element, property, startValue, endValue, duration) { - const startTime = performance.now(); - - function animateFrame(currentTime) { - const elapsed = currentTime - startTime; - const progress = Math.min(elapsed / duration, 1); - - // 使用缓动函数 - const easeProgress = easeInOutCubic(progress); - const currentValue = startValue + (endValue - startValue) * easeProgress; - - element.style[property] = currentValue + "px"; - - if (progress < 1) { - requestAnimationFrame(animateFrame); - } - } - - requestAnimationFrame(animateFrame); -} - -// 缓动函数 -function easeInOutCubic(t) { - return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; -} - -// FPS计数器 -function createFPSCounter() { - let frameCount = 0; - let lastTime = performance.now(); - let fps = 0; - - function countFrame() { - frameCount++; - const currentTime = performance.now(); - - if (currentTime - lastTime >= 1000) { - fps = frameCount; - frameCount = 0; - lastTime = currentTime; - console.log(`FPS: ${fps}`); - } - - requestAnimationFrame(countFrame); - } - - requestAnimationFrame(countFrame); -} - -// 取消动画帧 -let animationFrameId; - -function startCustomAnimation() { - let position = 0; - - function animate() { - position += 1; - element.style.left = position + "px"; - - if (position < 300) { - animationFrameId = requestAnimationFrame(animate); - } - } - - animationFrameId = requestAnimationFrame(animate); -} - -function stopAnimation() { - if (animationFrameId) { - cancelAnimationFrame(animationFrameId); - console.log("动画已停止"); - } -} -``` - ---- - -## 📌 最佳实践总结 - -### 34. 窗口操作安全注意事项 - -```javascript -// 1. 弹出窗口通常会被浏览器阻止 -function safeOpenWindow(url) { - const newWindow = window.open(url); - - if ( - !newWindow || - newWindow.closed || - typeof newWindow.closed === "undefined" - ) { - // 弹出窗口被阻止 - console.warn("弹出窗口被浏览器阻止"); - // 提供备用方案 - window.location.href = url; // 在当前窗口打开 - return null; - } - - return newWindow; -} - -// 2. 用户交互后才能打开弹出窗口 -document.getElementById("openBtn").addEventListener("click", function () { - // 只有响应用户点击事件,弹出窗口才不会被阻止 - window.open("popup.html"); -}); - -// 3. 检查是否支持某些窗口特性 -function checkWindowFeaturesSupport() { - const features = { - localStorage: !!window.localStorage, - sessionStorage: !!window.sessionStorage, - geolocation: !!navigator.geolocation, - notifications: !!window.Notification, - serviceWorker: "serviceWorker" in navigator, - webSocket: "WebSocket" in window, - }; - - console.log("浏览器特性支持:", features); - return features; -} -``` - -### 35. 性能优化建议 - -```javascript -// 1. 防抖和节流窗口事件 -function debounce(func, wait) { - let timeout; - return function executedFunction(...args) { - const later = () => { - clearTimeout(timeout); - func(...args); - }; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - }; -} - -// 使用防抖的resize事件 -window.addEventListener( - "resize", - debounce(() => { - console.log("窗口大小已稳定"); - }, 250) -); - -// 2. 使用requestAnimationFrame替代setTimeout做动画 -function smoothAnimation() { - let start = null; - - function step(timestamp) { - if (!start) start = timestamp; - const progress = timestamp - start; - - // 更新动画 - element.style.left = Math.min(progress / 10, 200) + "px"; - - if (progress < 2000) { - requestAnimationFrame(step); - } - } - - requestAnimationFrame(step); -} - -// 3. 清理定时器防止内存泄漏 -class TimerManager { - constructor() { - this.timers = new Set(); - } - - setTimeout(callback, delay, ...args) { - const id = setTimeout( - () => { - this.timers.delete(id); - callback(...args); - }, - delay, - ...args - ); - - this.timers.add(id); - return id; - } - - clearAll() { - this.timers.forEach((id) => clearTimeout(id)); - this.timers.clear(); - } -} -``` - ---- - -## 🎯 Window 对象核心要点速查表 - -| 类别 | 方法/属性/事件 | 描述 | -| ------------ | ------------------------- | -------------- | -| **对话框** | `alert()` | 警告对话框 | -| | `confirm()` | 确认对话框 | -| | `prompt()` | 提示输入对话框 | -| **窗口控制** | `open()` | 打开新窗口 | -| | `close()` | 关闭窗口 | -| | `resizeTo()` | 调整窗口大小 | -| | `moveTo()` | 移动窗口 | -| **事件** | `load` | 页面完全加载 | -| | `DOMContentLoaded` | DOM 加载完成 | -| | `resize` | 窗口大小改变 | -| | `scroll` | 窗口滚动 | -| | `beforeunload` | 页面卸载前 | -| **定时器** | `setTimeout()` | 延迟执行 | -| | `setInterval()` | 间隔执行 | -| | `requestAnimationFrame()` | 动画帧 | -| **导航** | `location` | URL 操作 | -| | `history` | 历史记录 | -| | `navigator` | 浏览器信息 | -| **尺寸** | `innerWidth/Height` | 视口尺寸 | -| | `outerWidth/Height` | 窗口尺寸 | -| | `screen` | 屏幕信息 | - ---- diff --git "a/\344\270\245\345\201\245\345\256\207/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\344\270\245\345\201\245\345\256\207/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 7be3f2f20b6de5e64d875f9d2194e95c4dd025ad..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,283 +0,0 @@ -# JavaScript 浏览器对象知识点总结 - -## 📍 location 对象 - -### 知识点 -1. **作用**:包含当前URL的信息,可用于获取和设置URL -2. **属性**: - - `href`:完整的URL - - `protocol`:协议(http:、https:) - - `host`:主机名和端口号 - - `hostname`:主机名 - - `port`:端口号 - - `pathname`:路径部分 - - `search`:查询字符串(?之后的部分) - - `hash`:锚点部分(#之后的部分) - - `origin`:协议+主机名+端口号 -3. **方法**: - - `assign(url)`:加载新文档 - - `replace(url)`:替换当前文档(不产生历史记录) - - `reload(force)`:重新加载当前页面 - - `toString()`:返回完整的URL - -### 示例 -```javascript -// 获取当前URL信息 -console.log('完整URL:', location.href); -console.log('协议:', location.protocol); -console.log('主机:', location.host); -console.log('路径:', location.pathname); -console.log('查询参数:', location.search); -console.log('锚点:', location.hash); -console.log('源:', location.origin); - -// 操作URL -// 1. 跳转到新页面(会产生历史记录) -location.assign('https://www.example.com'); - -// 2. 替换当前页面(不会产生历史记录) -location.replace('https://www.example.com'); - -// 3. 重新加载页面 -location.reload(); // 可能从缓存加载 -location.reload(true); // 强制从服务器重新加载 - -// 4. 修改URL的部分内容 -// 只修改hash,不会重新加载页面 -location.hash = '#section1'; - -// 只修改search,会重新加载页面 -location.search = '?page=2'; - -// 完整URL修改,会跳转到新页面 -location.href = 'https://newdomain.com/path'; -``` - ---- - -## 🧭 navigator 对象 - -### 知识点 -1. **作用**:包含浏览器的信息和状态 -2. **常用属性**: - - `userAgent`:用户代理字符串 - - `platform`:操作系统平台 - - `language`:浏览器主语言 - - `languages`:用户偏好的语言数组 - - `cookieEnabled`:是否启用cookie - - `onLine`:是否联网 - - `geolocation`:地理位置API - - `mediaDevices`:媒体设备API - - `hardwareConcurrency`:CPU核心数 -3. **常用方法**: - - `sendBeacon()`:异步发送数据到服务器 - - `clipboard`:剪贴板API - - `vibrate()`:设备振动(移动端) - -### 示例 -```javascript -// 浏览器信息检测 -console.log('用户代理:', navigator.userAgent); -console.log('操作系统:', navigator.platform); -console.log('主语言:', navigator.language); -console.log('支持语言:', navigator.languages); -console.log('Cookie启用:', navigator.cookieEnabled); -console.log('在线状态:', navigator.onLine); -console.log('CPU核心数:', navigator.hardwareConcurrency); - -// 特性检测(推荐方式) -if ('geolocation' in navigator) { - navigator.geolocation.getCurrentPosition(position => { - console.log('纬度:', position.coords.latitude); - console.log('经度:', position.coords.longitude); - }); -} - -if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) { - // 可以访问摄像头/麦克风 -} - -// 发送数据到服务器(适合页面卸载时) -navigator.sendBeacon('/api/log', JSON.stringify({ - event: 'page_unload', - time: Date.now() -})); - -// 剪贴板操作 -if (navigator.clipboard) { - // 写入剪贴板 - navigator.clipboard.writeText('要复制的文本').then(() => { - console.log('复制成功'); - }); - - // 读取剪贴板 - navigator.clipboard.readText().then(text => { - console.log('剪贴板内容:', text); - }); -} - -// 设备振动(移动设备) -if ('vibrate' in navigator) { - // 振动200ms - navigator.vibrate(200); - // 模式:振动200ms,暂停100ms,振动300ms - navigator.vibrate([200, 100, 300]); -} -``` - ---- - -## 🖥️ screen 对象 - -### 知识点 -1. **作用**:包含屏幕/显示器的信息 -2. **属性**: - - `width` / `height`:屏幕的总宽度/高度 - - `availWidth` / `availHeight`:可用宽度/高度(减去任务栏等) - - `colorDepth`:颜色深度(位) - - `pixelDepth`:像素深度(位) - - `orientation`:屏幕方向 - - `availLeft` / `availTop`:可用空间的左边/上边坐标 - -### 示例 -```javascript -// 获取屏幕信息 -console.log('屏幕分辨率:', screen.width + 'x' + screen.height); -console.log('可用区域:', screen.availWidth + 'x' + screen.availHeight); -console.log('可用区域起点:', 'left=' + screen.availLeft + ', top=' + screen.availTop); -console.log('颜色深度:', screen.colorDepth + '位'); -console.log('像素深度:', screen.pixelDepth + '位'); - -// 屏幕方向检测 -if ('orientation' in screen) { - console.log('当前方向:', screen.orientation.type); - console.log('角度:', screen.orientation.angle); - - // 监听方向变化 - screen.orientation.addEventListener('change', () => { - console.log('方向变为:', screen.orientation.type); - }); -} - -// 响应式设计应用 -function checkScreenSize() { - if (screen.width < 768) { - console.log('小屏幕设备(手机)'); - } else if (screen.width < 1024) { - console.log('中等屏幕设备(平板)'); - } else { - console.log('大屏幕设备(桌面)'); - } -} - -// 检测是否高DPI屏幕(Retina) -const isRetina = window.devicePixelRatio > 1; -console.log('设备像素比:', window.devicePixelRatio); -console.log('是否高DPI:', isRetina); -``` - ---- - -## 📜 history 对象 - -### 知识点 -1. **作用**:操作浏览器会话历史 -2. **属性**: - - `length`:历史记录栈中的URL数量 - - `state`:当前历史记录状态对象 -3. **方法**: - - `back()`:后退到上一个页面 - - `forward()`:前进到下一个页面 - - `go(n)`:前进或后退n个页面 - - `pushState(state, title, url)`:添加历史记录 - - `replaceState(state, title, url)`:替换当前历史记录 - -### 示例 -```javascript -// 获取历史记录信息 -console.log('历史记录数量:', history.length); -console.log('当前状态:', history.state); - -// 基本导航 -// 后退一页(等价于点击后退按钮) -history.back(); - -// 前进一页(等价于点击前进按钮) -history.forward(); - -// 前进/后退多页 -history.go(-2); // 后退2页 -history.go(1); // 前进1页 -history.go(0); // 刷新当前页 - -// HTML5 History API -// 1. pushState - 添加新历史记录(不会加载页面) -const state1 = { page: 'home', data: { title: '首页' } }; -history.pushState(state1, '首页', '/home'); - -const state2 = { page: 'about', data: { title: '关于我们' } }; -history.pushState(state2, '关于我们', '/about'); - -// 2. replaceState - 替换当前历史记录 -const state3 = { page: 'contact', data: { title: '联系我们' } }; -history.replaceState(state3, '联系我们', '/contact'); - -// 监听popstate事件(用户点击前进/后退按钮时触发) -window.addEventListener('popstate', (event) => { - console.log('位置变化:', event.state); - console.log('当前URL:', location.href); - - // 根据state更新页面内容 - if (event.state) { - updateContent(event.state); - } -}); - -// 监听hashchange事件(hash变化时) -window.addEventListener('hashchange', () => { - console.log('Hash变为:', location.hash); -}); - -// 单页应用(SPA)路由示例 -function navigateTo(page, stateData) { - const state = { page, data: stateData }; - const title = stateData?.title || page; - const url = `/${page}`; - - history.pushState(state, title, url); - renderPage(page, stateData); -} - -function updateContent(state) { - switch(state.page) { - case 'home': - document.title = '首页 - 我的网站'; - document.getElementById('content').innerHTML = '

    欢迎来到首页

    '; - break; - case 'about': - document.title = '关于我们 - 我的网站'; - document.getElementById('content').innerHTML = '

    关于我们

    公司简介...

    '; - break; - case 'contact': - document.title = '联系我们 - 我的网站'; - document.getElementById('content').innerHTML = '

    联系我们

    联系方式...

    '; - break; - } -} - -// 初始化:处理直接访问或刷新 -window.addEventListener('load', () => { - const path = location.pathname.replace(/^\//, '') || 'home'; - navigateTo(path, { title: path === 'home' ? '首页' : path }); -}); -``` - ---- - -## 📌 注意事项 - -1. **兼容性**:部分API需要检查浏览器支持 -2. **隐私**:某些信息(如地理位置)需要用户授权 -3. **安全**:跨域访问有限制 -4. **SPA路由**:使用History API时需配置服务器支持 -5. **移动端**:注意移动设备的特性和限制 \ No newline at end of file diff --git "a/\344\270\245\345\201\245\345\256\207/20251210-style\345\261\236\346\200\247.md" "b/\344\270\245\345\201\245\345\256\207/20251210-style\345\261\236\346\200\247.md" deleted file mode 100644 index 7c988f5529bfec3da80c64247ac9736180849280..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251210-style\345\261\236\346\200\247.md" +++ /dev/null @@ -1,480 +0,0 @@ -# JavaScript Style 对象知识点总结 - -## 🎨 style 对象简介 - -### 知识点 - -1. **作用**:用于操作 HTML 元素的样式 -2. **访问方式**: - - `element.style`:访问元素的**内联样式** - - 注意:只能获取和设置内联样式,不能获取 CSS 样式表中的样式 -3. **命名规则转换**: - - CSS 属性名:`background-color` - - JavaScript 属性名:`backgroundColor`(驼峰命名法) -4. **读取和设置**: - - 读取:`element.style.propertyName` - - 设置:`element.style.propertyName = value` - -### 示例 - -```javascript -// 获取元素 -const div = document.getElementById("myDiv"); - -// 设置单个样式属性 -div.style.backgroundColor = "red"; -div.style.fontSize = "16px"; - -// 读取样式(仅限内联样式) -console.log("背景色:", div.style.backgroundColor); -console.log("字体大小:", div.style.fontSize); - -// CSS属性名到JS属性名的转换示例 -const cssToJs = { - "background-color": "backgroundColor", - "font-size": "fontSize", - "border-radius": "borderRadius", - "z-index": "zIndex", - "margin-top": "marginTop", -}; - -// 批量设置样式的辅助函数 -function setStyles(element, styles) { - for (const [cssProp, value] of Object.entries(styles)) { - // 将CSS属性名转换为JS属性名 - const jsProp = cssProp.replace(/-([a-z])/g, (match, letter) => - letter.toUpperCase() - ); - element.style[jsProp] = value; - } -} - -// 使用辅助函数 -setStyles(div, { - "background-color": "blue", - "font-size": "20px", - "border-radius": "5px", -}); -``` - ---- - -## 🏷️ 样式标签属性和样式属性 - -### 知识点 - -1. **style 属性与 class 属性的区别**: - - `style`属性:直接设置内联样式 - - `class`属性:引用 CSS 类选择器 -2. **获取计算样式**: - - `window.getComputedStyle(element)`:获取元素最终应用的所有样式(包括 CSS 表和内联样式) - - `element.currentStyle`:IE8 及以下(已废弃) -3. **获取样式的方法对比**: - - `element.style.property`:仅内联样式 - - `window.getComputedStyle(element).property`:所有计算后的样式 - - `element.className`:获取 class 属性 - - `element.classList`:操作 class 列表的现代 API - -### 示例 - -```html - - - - - - -
    - Hello World -
    - - -``` - -```javascript -const element = document.getElementById("myElement"); - -// 1. 通过style属性获取(仅内联样式) -console.log("内联margin:", element.style.margin); // "20px" -console.log("内联color:", element.style.color); // ""(空,因为color来自CSS) - -// 2. 通过getComputedStyle获取(所有计算后的样式) -const computedStyle = window.getComputedStyle(element); -console.log("计算后的color:", computedStyle.color); // "rgb(0, 0, 255)" 或 "blue" -console.log("计算后的font-size:", computedStyle.fontSize); // "18px" -console.log("计算后的margin:", computedStyle.margin); // "20px" - -// 3. 操作class属性 -console.log("className:", element.className); // "highlight" - -// 添加类 -element.className += " extra-class"; - -// 更好的方式:使用classList -element.classList.add("new-class"); // 添加类 -element.classList.remove("highlight"); // 删除类 -element.classList.toggle("active"); // 切换类 -element.classList.contains("highlight"); // 检查是否包含类 - -// 4. 批量设置样式(使用cssText) -element.style.cssText = "color: red; font-size: 24px; padding: 15px;"; - -// 或在原有基础上添加 -element.style.cssText += " margin-bottom: 10px;"; - -// 5. 获取所有内联样式 -console.log("所有内联样式:", element.style.cssText); - -// 6. 移除单个样式 -element.style.margin = ""; // 设置为空字符串 - -// 7. 移除所有内联样式 -element.style.cssText = ""; -``` - ---- - -## 🔧 常用样式属性操作 - -### 知识点 - -1. **常用样式分类**: - - - 尺寸相关:width, height, margin, padding - - 位置相关:position, top, left, z-index - - 颜色背景:color, backgroundColor, backgroundImage - - 字体文本:fontSize, fontFamily, textAlign - - 边框轮廓:border, borderRadius, boxShadow - - 显示隐藏:display, visibility, opacity - - 变换动画:transform, transition - -2. **重要方法**: - - `style.setProperty(property, value, priority)`:设置 CSS 属性 - - `style.getPropertyValue(property)`:获取 CSS 属性值 - - `style.removeProperty(property)`:移除 CSS 属性 - -### 示例 - -```javascript -const box = document.getElementById("box"); - -// ============ 尺寸相关操作 ============ -box.style.width = "200px"; -box.style.height = "150px"; -box.style.margin = "20px auto"; -box.style.padding = "10px 15px"; - -// 使用setProperty方法(支持CSS原始属性名) -box.style.setProperty("width", "300px"); -box.style.setProperty("height", "200px"); - -// ============ 位置相关操作 ============ -box.style.position = "relative"; -box.style.top = "50px"; -box.style.left = "100px"; -box.style.zIndex = "10"; - -// ============ 颜色背景操作 ============ -box.style.backgroundColor = "#f0f0f0"; -box.style.color = "#333"; -box.style.backgroundImage = "linear-gradient(to right, #ff7e5f, #feb47b)"; - -// 透明度和渐变动画 -box.style.opacity = "0.8"; -box.style.transition = "all 0.3s ease"; - -// ============ 字体文本操作 ============ -box.style.fontSize = "16px"; -box.style.fontFamily = "Arial, sans-serif"; -box.style.fontWeight = "bold"; -box.style.textAlign = "center"; -box.style.lineHeight = "1.5"; - -// ============ 边框轮廓操作 ============ -box.style.border = "2px solid #ccc"; -box.style.borderRadius = "8px"; -box.style.boxShadow = "2px 2px 10px rgba(0,0,0,0.1)"; -box.style.outline = "none"; // 移除焦点轮廓 - -// ============ 显示隐藏操作 ============ -// 方法1: display(完全从文档流中移除) -box.style.display = "none"; // 隐藏 -box.style.display = "block"; // 显示(块级元素) - -// 方法2: visibility(保留位置) -box.style.visibility = "hidden"; // 隐藏但保留空间 -box.style.visibility = "visible"; // 显示 - -// 方法3: opacity(渐变隐藏) -box.style.opacity = "0"; // 完全透明 -box.style.opacity = "0.5"; // 半透明 -box.style.opacity = "1"; // 完全不透明 - -// ============ 变换动画操作 ============ -box.style.transform = "translateX(100px) rotate(45deg) scale(1.2)"; -box.style.transition = "transform 0.5s ease, opacity 0.3s ease"; - -// 动态添加动画 -setTimeout(() => { - box.style.transform = "translateX(0) rotate(0) scale(1)"; -}, 1000); - -// ============ 使用getPropertyValue ============ -console.log("获取宽度:", box.style.getPropertyValue("width")); -console.log("获取背景色:", box.style.getPropertyValue("background-color")); - -// ============ 使用removeProperty ============ -box.style.removeProperty("border"); // 移除边框 -box.style.removeProperty("box-shadow"); // 移除阴影 - -// ============ 响应式样式操作 ============ -function updateStylesForScreenSize() { - const width = window.innerWidth; - - if (width < 768) { - // 移动端样式 - box.style.width = "100%"; - box.style.padding = "10px"; - box.style.fontSize = "14px"; - } else if (width < 1024) { - // 平板端样式 - box.style.width = "80%"; - box.style.padding = "15px"; - box.style.fontSize = "16px"; - } else { - // 桌面端样式 - box.style.width = "60%"; - box.style.padding = "20px"; - box.style.fontSize = "18px"; - } -} - -// 监听窗口变化 -window.addEventListener("resize", updateStylesForScreenSize); - -// ============ 批量样式操作函数 ============ -function applyStyles(element, styles) { - for (const [property, value] of Object.entries(styles)) { - if (value === null || value === undefined) { - element.style.removeProperty(property); - } else { - element.style.setProperty(property, value); - } - } -} - -// 使用批量操作函数 -applyStyles(box, { - "--custom-property": "red", // CSS自定义属性 - width: "250px", - height: null, // 移除高度 - "background-color": "#e3f2fd", - border: "1px solid #90caf9", -}); - -// ============ CSS自定义变量操作 ============ -// 设置CSS变量 -box.style.setProperty("--primary-color", "#1976d2"); -box.style.setProperty("--border-radius", "10px"); - -// 使用CSS变量 -box.style.backgroundColor = "var(--primary-color)"; -box.style.borderRadius = "var(--border-radius)"; - -// ============ 动态样式类切换 ============ -// 根据条件应用不同的样式类 -function toggleTheme(isDarkMode) { - if (isDarkMode) { - box.classList.remove("light-theme"); - box.classList.add("dark-theme"); - } else { - box.classList.remove("dark-theme"); - box.classList.add("light-theme"); - } -} - -// ============ 性能优化建议 ============ -// 不好的做法:频繁修改单个样式 -for (let i = 0; i < 10; i++) { - box.style.left = `${i * 10}px`; // 触发10次重排 -} - -// 好的做法:批量修改,使用cssText或class -box.style.cssText = ` - left: 100px; - top: 50px; - transform: scale(1.5); -`; - -// 或使用requestAnimationFrame进行动画 -function animateElement() { - let position = 0; - - function step() { - position += 1; - box.style.transform = `translateX(${position}px)`; - - if (position < 100) { - requestAnimationFrame(step); - } - } - - requestAnimationFrame(step); -} -``` - ---- - -## 📌 注意事项 - -1. **性能优化**: - - - 避免频繁修改 style 属性(会引起重排和重绘) - - 批量修改使用 cssText 或 class 切换 - - 动画使用 transform 和 opacity(触发合成层) - -2. **兼容性**: - - - 旧版 IE 支持 currentStyle 而不是 getComputedStyle - - 某些 CSS 属性需要浏览器前缀(-webkit-, -moz-等) - -3. **最佳实践**: - - - 尽量使用 class 而不是直接修改 style - - 使用 getComputedStyle 获取计算后的样式 - - 使用 CSS 变量实现主题切换 - - 优先使用 CSS 动画而非 JavaScript 动画 - -4. **单位注意**: - - - 设置数值时需要包含单位(px, %, em 等) - - 获取值时是带单位的字符串 - -5. **只读属性**: - - 某些计算样式是只读的,不能通过 style 设置 - - 如:offsetWidth, offsetHeight, scrollTop 等 - -## 训练 - -```html -

    第一题

    -
    定义一行文本,每次变大2px,改变颜色
    - - -

    第二题

    - - -``` - -## 综合训练 - -```html - - - - -

    第一题

    -
    HTML/CSS讨论区
    -
    JavaScript讨论区
    -
    C语言讨论区
    - -

    第二题

    -
    - -``` diff --git "a/\344\270\245\345\201\245\345\256\207/20251211-Form\345\257\271\350\261\241.md" "b/\344\270\245\345\201\245\345\256\207/20251211-Form\345\257\271\350\261\241.md" deleted file mode 100644 index 4eb60db56fe60a63ceb4ff506dfea928e5dba7b2..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251211-Form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,563 +0,0 @@ -# JavaScript Form 对象知识点总结 - -## 🔍 访问表单与表单元素的方法 - -### 知识点 - -1. **访问 Form 对象**: - - - `document.forms`:获取页面所有表单 - - `document.forms[index]`:按索引获取 - - `document.forms['formName']`:按 name 获取 - - `document.getElementById('formId')`:按 id 获取 - -2. **访问表单元素**: - - `form.elements`:获取表单所有元素 - - `form.elements['elementName']`:按 name 获取 - - `form.elements[index]`:按索引获取 - - `form.elementName`:直接通过 name 访问 - -### 示例 - -```html -
    - - - - -
    -``` - -```javascript -// 1. 访问Form对象 -const forms = document.forms; // 所有表单的集合 -const form1 = document.forms[0]; // 第一个表单 -const form2 = document.forms["userForm"]; // 按name -const form3 = document.getElementById("myForm"); // 按id - -// 2. 访问表单元素 -const form = document.getElementById("myForm"); - -// 方法1:elements集合 -const elements = form.elements; -console.log("元素数量:", elements.length); - -// 方法2:按name访问 -const usernameInput = form.elements["username"]; -const emailInput = form.elements.email; // 点语法也可以 - -// 方法3:直接通过form对象访问 -console.log(form.username); // 等价于 form.elements['username'] -console.log(form.country); // select元素 - -// 方法4:通过id访问(如果元素有id) -const emailById = document.getElementById("email"); - -// 3. 遍历表单元素 -for (let i = 0; i < form.elements.length; i++) { - const element = form.elements[i]; - console.log(`${i}: ${element.name} - ${element.type}`); -} -``` - ---- - -## 📋 Form 对象的属性 - -### 知识点 - -1. **基础属性**: - - `elements`:表单中所有控件的集合 - - `length`:表单中控件的数量 - - `name`:表单名称 - - `id`:表单 ID - - `className`:CSS 类名 - - `action`:表单提交的 URL - - `method`:HTTP 方法(GET/POST) - - `enctype`:编码类型 - - `target`:提交后的目标窗口 - - `acceptCharset`:字符集 - -### 示例 - -```javascript -const form = document.forms[0]; - -// 访问属性 -console.log("表单名称:", form.name); -console.log("表单ID:", form.id); -console.log("元素数量:", form.length); -console.log("提交地址:", form.action); -console.log("提交方法:", form.method); -console.log("编码类型:", form.enctype); -console.log("目标窗口:", form.target); - -// 修改属性 -form.action = "/api/submit"; -form.method = "POST"; -form.enctype = "multipart/form-data"; // 文件上传 -form.target = "_blank"; // 新窗口打开 -``` - ---- - -## ⚙️ Form 对象的方法 - -### 知识点 - -1. **提交相关**: - - - `submit()`:提交表单 - - `reset()`:重置表单 - -2. **验证相关**: - - `checkValidity()`:检查表单是否有效 - - `reportValidity()`:显示验证信息 - -### 示例 - -```javascript -const form = document.getElementById("myForm"); - -// 1. 提交表单 -form.submit(); // 触发提交 - -// 拦截默认提交 -form.addEventListener("submit", function (event) { - event.preventDefault(); // 阻止默认提交 - // 自定义处理逻辑 - if (validateForm()) { - this.submit(); // 手动提交 - } -}); - -// 2. 重置表单 -form.reset(); // 重置所有字段为默认值 - -// 3. 表单验证 -if (form.checkValidity()) { - console.log("表单验证通过"); -} else { - form.reportValidity(); // 显示验证错误信息 -} - -// 4. 自定义验证函数 -function validateForm() { - const email = form.email.value; - if (!email.includes("@")) { - alert("请输入有效的邮箱地址"); - return false; - } - return true; -} -``` - ---- - -## 🎯 Form 对象的事件 - -### 知识点 - -1. **主要事件**: - - `submit`:表单提交时触发 - - `reset`:表单重置时触发 - - `input`:输入框内容变化时触发 - - `change`:表单元素值改变时触发 - - `focus`:获得焦点时触发 - - `blur`:失去焦点时触发 - -### 示例 - -```javascript -const form = document.getElementById("myForm"); - -// 1. submit事件 - 表单提交 -form.addEventListener("submit", function (event) { - console.log("表单即将提交"); - // 可以在这里进行数据验证 -}); - -// 2. reset事件 - 表单重置 -form.addEventListener("reset", function (event) { - console.log("表单已重置"); -}); - -// 3. 表单元素事件 -const username = form.username; - -username.addEventListener("focus", function () { - console.log("用户名输入框获得焦点"); -}); - -username.addEventListener("blur", function () { - console.log("用户名输入框失去焦点"); -}); - -username.addEventListener("input", function () { - console.log("输入内容:", this.value); -}); - -username.addEventListener("change", function () { - console.log("内容已改变:", this.value); -}); - -// 4. 事件委托 - 监听所有输入框 -form.addEventListener("input", function (event) { - if (event.target.tagName === "INPUT") { - console.log(`${event.target.name}: ${event.target.value}`); - } -}); -``` - ---- - -## 💡 Form 对象的应用 - -### 知识点 - -1. **表单数据获取**: - - - 逐个获取元素值 - - 使用 FormData 对象 - - 序列化为查询字符串 - -2. **表单验证**: - - - HTML5 内置验证 - - 自定义 JavaScript 验证 - - 实时验证反馈 - -3. **动态表单操作**: - - 添加/删除表单元素 - - 表单字段联动 - - 条件显示/隐藏字段 - -### 示例 - -```javascript -// 1. 获取表单数据 -function getFormData(form) { - // 方法1:逐个获取 - const data = { - username: form.username.value, - email: form.email.value, - country: form.country.value, - }; - - // 方法2:使用FormData(支持文件) - const formData = new FormData(form); - console.log("FormData:", formData.get("username")); - - // 方法3:转换为对象 - const dataObj = Object.fromEntries(formData); - console.log("数据对象:", dataObj); - - // 方法4:转换为URL查询字符串 - const params = new URLSearchParams(formData); - console.log("查询字符串:", params.toString()); - - return data; -} - -// 2. 表单验证示例 -function validateUserForm() { - const form = document.forms["userForm"]; - let isValid = true; - - // 验证用户名 - if (!form.username.value.trim()) { - showError("username", "用户名不能为空"); - isValid = false; - } - - // 验证邮箱 - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - if (!emailRegex.test(form.email.value)) { - showError("email", "邮箱格式不正确"); - isValid = false; - } - - return isValid; -} - -function showError(fieldName, message) { - const field = document.getElementsByName(fieldName)[0]; - field.style.borderColor = "red"; - - // 显示错误信息 - let errorDiv = field.nextElementSibling; - if (!errorDiv || !errorDiv.classList.contains("error")) { - errorDiv = document.createElement("div"); - errorDiv.className = "error"; - field.parentNode.insertBefore(errorDiv, field.nextSibling); - } - errorDiv.textContent = message; -} - -// 3. 动态表单操作 -function addFormField() { - const form = document.getElementById("myForm"); - const newInput = document.createElement("input"); - newInput.type = "text"; - newInput.name = "extraField"; - newInput.placeholder = "附加字段"; - form.insertBefore(newInput, form.lastElementChild); -} - -// 4. 表单字段联动 -const countrySelect = document.querySelector('select[name="country"]'); -const citySelect = document.querySelector('select[name="city"]'); - -countrySelect.addEventListener("change", function () { - const country = this.value; - citySelect.innerHTML = ""; // 清空城市选项 - - if (country === "CN") { - addOption(citySelect, "beijing", "北京"); - addOption(citySelect, "shanghai", "上海"); - } else if (country === "US") { - addOption(citySelect, "newyork", "纽约"); - addOption(citySelect, "losangeles", "洛杉矶"); - } -}); - -function addOption(select, value, text) { - const option = document.createElement("option"); - option.value = value; - option.textContent = text; - select.appendChild(option); -} - -// 5. Ajax表单提交 -form.addEventListener("submit", async function (event) { - event.preventDefault(); - - const formData = new FormData(this); - - try { - const response = await fetch(this.action, { - method: this.method, - body: formData, - }); - - if (response.ok) { - const result = await response.json(); - console.log("提交成功:", result); - } else { - console.error("提交失败"); - } - } catch (error) { - console.error("网络错误:", error); - } -}); -``` - ---- - -## 📌 注意事项 - -1. **表单元素类型**: - - - 单选框:同一 name 为一组,使用`form.elements['name']`获取集合 - - 复选框:可以多个同 name,需要单独处理每个 - - 下拉框:select.value 获取选中值 - -2. **性能考虑**: - - - 避免频繁访问 DOM - - 使用事件委托减少事件处理器 - - 合理使用防抖/节流 - -3. **兼容性**: - - - FormData 在 IE10+支持 - - HTML5 验证在老浏览器可能需要 polyfill - -4. **安全**: - - - 始终在服务端验证数据 - - 防止 XSS 攻击,转义用户输入 - - 使用 CSRF 令牌 - -5. **用户体验**: - - 提供清晰的错误提示 - - 实时验证反馈 - - 合理的表单布局和引导 - -## 训练 - -```html -

    第一题

    -
    - - -
    - -

    第二题

    -
    - -
    - - -
    - -

    第三题

    -
    -

    请选择课程

    - 阅读 - 运动 - 烹饪 - 绘画 - 旅行 - 听音乐 - 摄影
    - 写作 - 跳舞 - 游戏 - 养花 - 手工 - 养宠物 - 摸鱼 -
    - -
    -``` - -## 练习 - -```html -

    第一题

    -
    - 答案 - 不是答案 - -
    - -

    第二题

    -
    - 摸鱼 - 追剧 - 听歌 - 逛街 - 发呆 - 撸猫 - 喝茶 - 爬山 - 下棋 - 练字
    - - - -
    - -

    第三题

    -
    - 选择城市: - -
    - -``` diff --git "a/\344\270\245\345\201\245\345\256\207/20251212-JSON.md" "b/\344\270\245\345\201\245\345\256\207/20251212-JSON.md" deleted file mode 100644 index 35d530ef1b7ace98f26c2e1b16b11db8f7a27a3e..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251212-JSON.md" +++ /dev/null @@ -1,194 +0,0 @@ -# JavaScript 中的 JSON - -## 基本概念 - -### 什么是 JSON - -- **JSON**(JavaScript Object Notation)是一种轻量级数据交换格式 -- 基于 JavaScript 对象语法,但独立于语言 -- 使用文本格式存储和传输数据 - -## 核心方法 - -### 1. JSON.parse() - -将 JSON 字符串转换为 JavaScript 对象 - -```javascript -// 解析 JSON 字符串 -const jsonStr = '{"name": "张三", "age": 25}'; -const obj = JSON.parse(jsonStr); -console.log(obj.name); // "张三" -``` - -### 2. JSON.stringify() - -将 JavaScript 对象转换为 JSON 字符串 - -```javascript -// 转换为 JSON 字符串 -const obj = { name: "张三", age: 25 }; -const jsonStr = JSON.stringify(obj); -console.log(jsonStr); // '{"name":"张三","age":25}' -``` - -## JSON 语法规则 - -### 数据类型支持 - -- 字符串(必须双引号) -- 数字 -- 布尔值(true/false) -- 数组 -- 对象 -- null - -### 示例 - -```javascript -// 有效的 JSON 示例 -{ - "name": "张三", - "age": 25, - "isStudent": false, - "hobbies": ["阅读", "游泳"], - "address": { - "city": "北京", - "street": "长安街" - }, - "score": null -} -``` - -## 常见应用场景 - -### 1. 解析 API 响应 - -```javascript -// 从 API 获取数据 -fetch("https://api.example.com/data") - .then((response) => response.json()) // 转换为对象 - .then((data) => console.log(data)); -``` - -### 2. 本地存储数据 - -```javascript -// 存储到 localStorage -const user = { id: 1, name: "李四" }; -localStorage.setItem("user", JSON.stringify(user)); - -// 从 localStorage 读取 -const storedUser = JSON.parse(localStorage.getItem("user")); -``` - -### 3. 对象深拷贝 - -```javascript -// 通过 JSON 实现简单深拷贝 -const original = { a: 1, b: { c: 2 } }; -const copy = JSON.parse(JSON.stringify(original)); -``` - -## 注意事项 - -### 1. JSON 字符串必须用双引号 - -```javascript -// ❌ 错误 -'{name: "张三"}'; - -// ✅ 正确 -'{"name": "张三"}'; -``` - -### 2. 不支持的数据类型 - -```javascript -// 以下类型会被忽略或转换 -const obj = { - date: new Date(), // 转换为字符串 - func: function () {}, // 被忽略 - undefined: undefined, // 被忽略 - infinity: Infinity, // 转换为 null - nan: NaN, // 转换为 null -}; -JSON.stringify(obj); // '{"date":"2023-10-01T...","infinity":null,"nan":null}' -``` - -### 3. 解析错误处理 - -```javascript -// 使用 try-catch 处理解析错误 -try { - const obj = JSON.parse("无效的 JSON"); -} catch (error) { - console.error("JSON 解析错误:", error.message); -} -``` - -## 高级用法 - -### 1. 格式化输出 - -```javascript -const obj = { name: "张三", age: 25 }; -const formatted = JSON.stringify(obj, null, 2); // 缩进2空格 -console.log(formatted); -``` - -### 2. 自定义序列化 - -```javascript -// 使用 replacer 函数过滤属性 -const user = { name: "张三", age: 25, password: "123456" }; -const safeUser = JSON.stringify(user, (key, value) => { - return key === "password" ? undefined : value; -}); -// 结果: '{"name":"张三","age":25}' -``` - -### 3. 自定义解析 - -```javascript -// 使用 reviver 函数转换值 -const jsonStr = '{"name": "张三", "birthDate": "1998-05-20"}'; -const obj = JSON.parse(jsonStr, (key, value) => { - if (key === "birthDate") return new Date(value); - return value; -}); -``` - -## 最佳实践 - -1. **始终验证**:解析前验证 JSON 字符串格式 -2. **错误处理**:使用 try-catch 包裹 JSON.parse() -3. **避免循环引用**:JSON.stringify() 不支持循环引用 -4. **性能注意**:大对象序列化/反序列化可能影响性能 - -## 快速参考 - -| 操作 | 方法 | 示例 | -| ------------- | ------------------ | ------------------------------ | -| 字符串 → 对象 | `JSON.parse()` | `JSON.parse('{"x":1}')` | -| 对象 → 字符串 | `JSON.stringify()` | `JSON.stringify({x:1})` | -| 格式化输出 | 第三个参数 | `JSON.stringify(obj,null,2)` | -| 过滤属性 | 第二个参数 | `JSON.stringify(obj,replacer)` | - -## 常用工具函数 - -```javascript -// 安全解析 JSON -function safeParse(jsonStr, defaultValue = null) { - try { - return JSON.parse(jsonStr); - } catch { - return defaultValue; - } -} - -// 深度比较两个对象(通过 JSON) -function isEqual(obj1, obj2) { - return JSON.stringify(obj1) === JSON.stringify(obj2); -} -``` diff --git "a/\344\270\245\345\201\245\345\256\207/20251215-jQuery.md" "b/\344\270\245\345\201\245\345\256\207/20251215-jQuery.md" deleted file mode 100644 index 31a4723ca27046fd9d068d8d3f1a9c82f2b00529..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251215-jQuery.md" +++ /dev/null @@ -1,850 +0,0 @@ -# jQuery 学习笔记 - -## 一、简介 - -jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。 - -### 特点: - -- 链式操作 -- 隐式迭代 -- 丰富的插件生态 -- 浏览器兼容性好 - -## 二、基本使用 - -### 1. 引入 jQuery - -```html - - - - - -``` - -### 2. 文档就绪事件 - -```javascript -// 标准写法 -$(document).ready(function () { - // 代码在这里执行 -}); - -// 简写 -$(function () { - // 代码在这里执行 -}); -``` - -## 三、选择器 - -### 1. 基本选择器 - -```javascript -// ID选择器 -$("#myId"); - -// 类选择器 -$(".myClass"); - -// 元素选择器 -$("div"); - -// 通配符选择器 -$("*"); - -// 并集选择器 -$("div, p, .class"); - -// 交集选择器 -$("div.className"); -``` - -### 2. 层级选择器 - -```javascript -// 后代选择器 -$("ul li"); - -// 子元素选择器 -$("ul > li"); - -// 相邻兄弟选择器 -$("h2 + p"); - -// 通用兄弟选择器 -$("h2 ~ p"); -``` - -### 3. 过滤选择器 - -```javascript -// :first -$("li:first"); - -// :last -$("li:last"); - -// :even 偶数 -$("tr:even"); - -// :odd 奇数 -$("tr:odd"); - -// :eq(index) -$("li:eq(2)"); - -// :gt(index) -$("li:gt(2)"); - -// :lt(index) -$("li:lt(2)"); - -// :not(selector) -$("input:not(:checked)"); - -// :contains(text) -$("div:contains('hello')"); -``` - -### 4. 表单选择器 - -```javascript -// :input -$(":input"); - -// :text -$(":text"); - -// :password -$(":password"); - -// :radio -$(":radio"); - -// :checkbox -$(":checkbox"); - -// :submit -$(":submit"); - -// :checked -$(":checked"); - -// :selected -$(":selected"); - -// :disabled -$(":disabled"); - -// :enabled -$(":enabled"); -``` - -### 5. 属性选择器 - -```javascript -// [attribute] -$("div[id]"); - -// [attribute=value] -$("input[name='username']"); - -// [attribute!=value] -$("input[name!='username']"); - -// [attribute^=value] -$("a[href^='https']"); - -// [attribute$=value] -$("img[src$='.jpg']"); - -// [attribute*=value] -$("a[href*='google']"); -``` - -## 四、DOM 操作 - -### 1. 创建元素 - -```javascript -// 创建元素 -var $div = $("
    "); -var $p = $("

    Hello World

    "); -``` - -### 2. 添加元素 - -```javascript -// 内部添加 -$("ul").append("
  • 新项目
  • "); // 末尾添加 -$("ul").prepend("
  • 新项目
  • "); // 开头添加 - -// 外部添加 -$("div").after("

    新段落

    "); // 之后添加 -$("div").before("

    新段落

    "); // 之前添加 -``` - -### 3. 删除元素 - -```javascript -// 删除元素 -$("div").remove(); // 删除元素本身 -$("div").empty(); // 清空元素内容 -$("div").detach(); // 删除但保留数据 -``` - -### 4. 修改元素 - -```javascript -// 替换元素 -$("p").replaceWith("
    新内容
    "); - -// 包裹元素 -$("span").wrap("
    "); // 单独包裹 -$("span").wrapAll("
    "); // 整体包裹 -$("span").wrapInner(""); // 包裹内容 -``` - -### 5. 遍历元素 - -```javascript -// 父级元素 -$("li").parent(); -$("li").parents(); -$("li").parentsUntil("div"); - -// 子级元素 -$("ul").children(); -$("ul").find("li"); - -// 兄弟元素 -$("li").siblings(); -$("li").next(); -$("li").prev(); -$("li").nextAll(); -$("li").prevAll(); -``` - -## 五、CSS 操作 - -### 1. 获取和设置 CSS - -```javascript -// 获取CSS -var color = $("div").css("color"); - -// 设置单个CSS -$("div").css("color", "red"); - -// 设置多个CSS -$("div").css({ - color: "red", - "font-size": "16px", - "background-color": "#f0f0f0", -}); -``` - -### 2. 类操作 - -```javascript -// 添加类 -$("div").addClass("active"); - -// 删除类 -$("div").removeClass("active"); - -// 切换类 -$("div").toggleClass("active"); - -// 检查类 -if ($("div").hasClass("active")) { - // 执行操作 -} - -// 替换类 -$("div").removeClass("oldClass").addClass("newClass"); -``` - -### 3. 尺寸和位置 - -```javascript -// 尺寸 -$("div").width(); // 内容宽度 -$("div").innerWidth(); // 包含内边距 -$("div").outerWidth(); // 包含边框 -$("div").outerWidth(true); // 包含外边距 - -// 位置 -$("div").offset(); // 相对于文档 -$("div").position(); // 相对于父元素 -$("div").scrollTop(); // 滚动条位置 -$("div").scrollLeft(); -``` - -## 六、属性操作 - -### 1. 通用属性 - -```javascript -// 获取属性 -var href = $("a").attr("href"); - -// 设置属性 -$("a").attr("href", "http://example.com"); - -// 设置多个属性 -$("img").attr({ - src: "image.jpg", - alt: "描述", - title: "标题", -}); - -// 删除属性 -$("img").removeAttr("alt"); -``` - -### 2. 表单属性 - -```javascript -// 获取值 -var value = $("input").val(); - -// 设置值 -$("input").val("新值"); - -// 获取选中状态 -var isChecked = $("checkbox").prop("checked"); - -// 设置选中状态 -$("checkbox").prop("checked", true); - -// 获取HTML内容 -var html = $("div").html(); - -// 设置HTML内容 -$("div").html("

    新内容

    "); - -// 获取文本内容 -var text = $("div").text(); - -// 设置文本内容 -$("div").text("新文本"); -``` - -## 七、事件处理 - -### 1. 事件绑定 - -```javascript -// 直接绑定 -$("button").click(function () { - alert("按钮被点击"); -}); - -// on()方法 -$("button").on("click", function () { - // 处理点击 -}); - -// 绑定多个事件 -$("input").on({ - focus: function () { - /* 聚焦处理 */ - }, - blur: function () { - /* 失焦处理 */ - }, - keyup: function () { - /* 按键处理 */ - }, -}); - -// 事件委托 -$("ul").on("click", "li", function () { - // 处理li点击 -}); -``` - -### 2. 常用事件 - -```javascript -// 鼠标事件 -.click() -.dblclick() -.mouseenter() -.mouseleave() -.mousedown() -.mouseup() -.mousemove() - -// 键盘事件 -.keydown() -.keypress() -.keyup() - -// 表单事件 -.focus() -.blur() -.change() -.submit() -.select() - -// 窗口事件 -.resize() -.scroll() -.load() -.unload() -``` - -### 3. 事件对象 - -```javascript -$("a").click(function (event) { - event.preventDefault(); // 阻止默认行为 - event.stopPropagation(); // 阻止事件冒泡 - - var target = event.target; // 触发元素 - var type = event.type; // 事件类型 - var pageX = event.pageX; // 鼠标X坐标 - var pageY = event.pageY; // 鼠标Y坐标 - var which = event.which; // 按键代码 -}); -``` - -### 4. 其他事件方法 - -```javascript -// 解除绑定 -$("button").off("click"); - -// 触发事件 -$("button").trigger("click"); - -// 一次性事件 -$("button").one("click", function () { - // 只执行一次 -}); - -// hover方法 -$("div").hover( - function () { - /* 鼠标进入 */ - }, - function () { - /* 鼠标离开 */ - } -); -``` - -## 八、动画效果 - -### 1. 显示和隐藏 - -```javascript -// 基本显示隐藏 -$("div").show(); -$("div").hide(); -$("div").toggle(); - -// 带效果的显示隐藏 -$("div").show(1000); // 1秒显示 -$("div").hide("slow"); // 慢速隐藏 -$("div").toggle("fast", function () { - // 动画完成回调 -}); - -// 淡入淡出 -$("div").fadeIn(1000); // 淡入 -$("div").fadeOut(500); // 淡出 -$("div").fadeToggle(); // 切换 -$("div").fadeTo(1000, 0.5); // 淡入到指定透明度 -``` - -### 2. 滑动效果 - -```javascript -$("div").slideDown(1000); // 滑下 -$("div").slideUp(500); // 滑上 -$("div").slideToggle(); // 切换滑动 -``` - -### 3. 自定义动画 - -```javascript -// 简单动画 -$("div").animate( - { - left: "+=50", - opacity: 0.5, - }, - 1000 -); - -// 带回调的动画 -$("div").animate( - { - width: "300px", - height: "300px", - }, - { - duration: 1000, - complete: function () { - alert("动画完成"); - }, - step: function (now, fx) { - // 每一步执行 - }, - } -); - -// 停止动画 -$("div").stop(); // 停止当前动画 -$("div").stop(true); // 清除队列 -$("div").stop(true, true); // 立即完成 -$("div").finish(); // 完成所有动画 -``` - -## 九、Ajax - -### 1. 基本方法 - -```javascript -// $.ajax()方法 -$.ajax({ - url: "data.php", - type: "POST", - data: { name: "John", age: 30 }, - dataType: "json", - success: function (response) { - // 成功处理 - }, - error: function (xhr, status, error) { - // 错误处理 - }, - complete: function () { - // 完成处理 - }, -}); - -// 简写方法 -$.get( - "data.php", - { id: 1 }, - function (data) { - // 处理数据 - }, - "json" -); - -$.post("data.php", { name: "John" }, function (data) { - // 处理数据 -}); - -$.getJSON("data.json", function (data) { - // 处理JSON数据 -}); - -$.getScript("script.js", function () { - // 脚本加载完成 -}); -``` - -### 2. 全局 Ajax 事件 - -```javascript -// 全局事件处理 -$(document).ajaxStart(function () { - // 显示加载提示 -}); - -$(document).ajaxStop(function () { - // 隐藏加载提示 -}); - -$(document).ajaxError(function (event, xhr, settings, error) { - // 全局错误处理 -}); - -$(document).ajaxSuccess(function (event, xhr, settings) { - // 全局成功处理 -}); -``` - -### 3. 加载 HTML - -```javascript -// 加载HTML片段 -$("#content").load("fragment.html"); - -// 加载HTML片段的部分内容 -$("#content").load("page.html #section"); - -// 带回调的加载 -$("#content").load("data.html", function (response, status, xhr) { - if (status == "error") { - // 错误处理 - } -}); -``` - -## 十、工具方法 - -### 1. 数组操作 - -```javascript -// 遍历数组 -$.each(array, function (index, value) { - console.log(index + ": " + value); -}); - -// 过滤数组 -var filtered = $.grep(array, function (value, index) { - return value > 10; -}); - -// 映射数组 -var mapped = $.map(array, function (value, index) { - return value * 2; -}); - -// 检查数组是否包含 -var exists = $.inArray(value, array); -``` - -### 2. 对象操作 - -```javascript -// 合并对象 -var obj = $.extend({}, obj1, obj2); - -// 深度合并 -var obj = $.extend(true, {}, obj1, obj2); - -// 遍历对象 -$.each(object, function (key, value) { - console.log(key + ": " + value); -}); -``` - -### 3. 其他工具 - -```javascript -// 类型判断 -$.isArray(obj); -$.isFunction(obj); -$.isNumeric(value); -$.isEmptyObject(obj); -$.isPlainObject(obj); - -// 字符串修剪 -var str = $.trim(" hello "); - -// 解析JSON -var obj = $.parseJSON(jsonString); - -// 解析XML -var xml = $.parseXML(xmlString); - -// 延迟对象 -var deferred = $.Deferred(); -``` - -## 十一、插件开发 - -### 1. 基本插件结构 - -```javascript -(function ($) { - $.fn.myPlugin = function (options) { - // 默认配置 - var settings = $.extend( - { - color: "red", - fontSize: "14px", - }, - options - ); - - // 遍历每个匹配的元素 - return this.each(function () { - var $this = $(this); - - // 插件逻辑 - $this.css({ - color: settings.color, - fontSize: settings.fontSize, - }); - }); - }; -})(jQuery); - -// 使用插件 -$("div").myPlugin({ - color: "blue", - fontSize: "16px", -}); -``` - -### 2. 链式调用支持 - -```javascript -(function ($) { - $.fn.chainablePlugin = function () { - return this.each(function () { - // 插件逻辑 - }); - }; -})(jQuery); - -// 链式调用 -$("div").chainablePlugin().addClass("active").fadeIn(); -``` - -## 十二、最佳实践 - -### 1. 性能优化 - -```javascript -// 缓存jQuery对象 -var $div = $("#myDiv"); - -// 使用ID选择器最快 -$("#id"); - -// 减少DOM操作 -var html = ""; -for (var i = 0; i < 100; i++) { - html += "
  • 项目" + i + "
  • "; -} -$("ul").append(html); - -// 事件委托优于直接绑定 -$("ul").on("click", "li", function () { - // 处理点击 -}); -``` - -### 2. 代码组织 - -```javascript -// 使用命名空间 -var MyApp = { - init: function () { - // 初始化 - }, - - events: { - // 事件处理 - }, - - utils: { - // 工具方法 - }, -}; - -// 页面加载后初始化 -$(document).ready(function () { - MyApp.init(); -}); -``` - -## 十三、与原生 JS 互操作 - -### 1. jQuery 对象转 DOM 对象 - -```javascript -// jQuery对象转DOM对象 -var $div = $("#myDiv"); -var div = $div[0]; // 方法一 -var div = $div.get(0); // 方法二 - -// 遍历转换 -$("div").each(function (index) { - var domElement = this; // this是DOM元素 - var $element = $(this); // 转回jQuery对象 -}); -``` - -### 2. DOM 对象转 jQuery 对象 - -```javascript -// DOM对象转jQuery对象 -var div = document.getElementById("myDiv"); -var $div = $(div); -``` - ---- - -## 练习 - -```html -
    演示对象
    -
    内容
    -

    项目1

    -

    项目2

    -

    项目3

    -
      -
    • 项1
    • -
    • 项2
    • -
    • 项3
    • -
    • 项4
    • -
    -
    -

    段落 文本1

    -

    段落 文本2

    -
    - - - - - - - - - - - - - -
    第1行
    第2行
    第3行
    第4行
    -
    -
    -
    - -``` diff --git "a/\344\270\245\345\201\245\345\256\207/20251217-JSON\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\344\270\245\345\201\245\345\256\207/20251217-JSON\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 1645c4b01287c681ff9819f7906e4d755f9015eb..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251217-JSON\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,50 +0,0 @@ -```html -

    原标题

    - -
    悬停我
    -
      -
    • 项目1
    • -
    - -
    - - -
    - - - -``` diff --git "a/\344\270\245\345\201\245\345\256\207/20251218-\347\273\203\344\271\240200\351\242\230\346\225\260\347\273\204.md" "b/\344\270\245\345\201\245\345\256\207/20251218-\347\273\203\344\271\240200\351\242\230\346\225\260\347\273\204.md" deleted file mode 100644 index 105f6bb3fc80a27969f488479130a03cbfdd606e..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251218-\347\273\203\344\271\240200\351\242\230\346\225\260\347\273\204.md" +++ /dev/null @@ -1,49 +0,0 @@ -```javascript -// 数组; -// 第一题; -let arr = [1, 2, 3, 4]; -let a = 0; -for (let i = 0; i < arr.length; i++) { - a = a + arr[i]; -} -console.log(a); -// 第二题; -let arr1 = [1, 2, 3, 4]; -let arr2 = ["a", "b", "c", 1]; -let arr3 = arr1.concat(arr2); -console.log(arr3); -// 第三题; -let arr = [1, 2, 4, 4, 3, 4, 3]; -function a(sum, num) { - return arr.reduce((a, b) => { - return a + (b === num ? 1 : 0); - }, 0); -} -console.log(a(arr, 4)); -// 第四题; -let arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]; -function a(b) { - return arr.reduce((result, item, index) => { - if (arr.indexOf(item) !== index && !result.includes(item)) { - result.push(item); - } - return result; - }, []); -} -console.log(a(arr)); -// 第五题; -let t = [1, 2, 3, 4, 2, 5]; -function removeItem(arr, item) { - return arr.filter((value) => value !== item); -} -console.log(removeItem(t, 2)); -// 第六题; -let con = [ - { name: "小明", score: 85 }, - { name: "小红", score: 55 }, - { name: "小刚", score: 90 }, -]; -let a = con.filter((item) => item.score >= 60); -let b = a.map((item) => item.name); -console.log(b); -``` diff --git "a/\344\270\245\345\201\245\345\256\207/20251219-\347\273\203\344\271\240200\351\242\230\346\225\260\347\273\204\351\253\230\351\230\266\345\207\275\346\225\260(\351\207\215\347\202\271).md" "b/\344\270\245\345\201\245\345\256\207/20251219-\347\273\203\344\271\240200\351\242\230\346\225\260\347\273\204\351\253\230\351\230\266\345\207\275\346\225\260(\351\207\215\347\202\271).md" deleted file mode 100644 index 58535e680c504c42e991de5bf3ce446cf746a3ea..0000000000000000000000000000000000000000 --- "a/\344\270\245\345\201\245\345\256\207/20251219-\347\273\203\344\271\240200\351\242\230\346\225\260\347\273\204\351\253\230\351\230\266\345\207\275\346\225\260(\351\207\215\347\202\271).md" +++ /dev/null @@ -1,64 +0,0 @@ -```javascript -//数组高阶函数(重点) -//第七题 -let arr = [1, 2, 3, 4, 5]; -let a = arr.map((num) => num * 2); -console.log(a); -//第八题 -let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; -let x = arr.filter((item) => item % 2 !== 0); -console.log(x); -//第九题 -let arr = [10, 20, 30, 40, 50]; -function a(b) { - return b.reduce((sum, value) => { - return sum + value; - }, 0); -} -console.log(a(arr)); -//第十题 -let arr = [3, 7, 2, 9, 1, 5]; -let c = 0; -function a(b) { - return b.reduce((sum, item) => { - if (c < item) { - return (c = item); - } - }, 0); -} -a(arr); -console.log(c); -//第十一题 -let arr = [2, 5, 8, 12, 15, 7]; -let a = arr.find((item) => item > 10); -console.log(a); -//第十二题 -let arr = [1, 5, 3, -2, 8, -5]; -let a = arr.findIndex((item) => item < 0); -console.log(a); -//第十三题 -let arr = [1, 3, 5, 7, 8]; -let a = arr.some((item) => item % 2 == 0); -console.log(a); -//第十四题 -let arr = [1, 2, 3, 4, 5]; -let a = arr.every((item) => item > 0); -console.log(a); -//第十五题 -let arr = [40, 100, 1, 5, 25, 10]; -let a = arr.sort((a, b) => a - b); -console.log(a); -//第十六题 -let arr = [ - { name: "小明", age: 20 }, - { name: "小红", age: 18 }, - { name: "小刚", age: 22 }, -]; -arr.sort((a, b) => a.age - b.age); -console.log(arr); -//第十七题 -let arr = ["apple", "banana", "orange"]; -arr.forEach((a, b) => { - console.log(`索引${b}:${a}`); -}); -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251110-\345\205\250\346\240\210.md" "b/\344\275\225\345\204\204\346\210\220/20251110-\345\205\250\346\240\210.md" deleted file mode 100644 index e4d4f4751d8e473904a52fba4f76b8b10acbe7c0..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251110-\345\205\250\346\240\210.md" +++ /dev/null @@ -1,38 +0,0 @@ -## 全栈(全干工程师)-前端+后端 -1.前端 - - vue3 - - react - -2.后端 - - C# asp.net core - - java springboot springcloud springmvc - - python Django - - C/C++ - - 汇编语言 - - nodejs - - 二进制 - - go - - php - - vb - - dephi - - 易语言 - - lisp - - rust - - ruby - - lua - -## 学习内容 -![](./图片imgs/20251110-笔记.png) - -## 练习题 -![](./图片imgs/20251110-练习.png) - -```html - - - - - -``` \ No newline at end of file diff --git "a/\344\275\225\345\204\204\346\210\220/20251112-js\345\217\230\351\207\217\347\255\211.md" "b/\344\275\225\345\204\204\346\210\220/20251112-js\345\217\230\351\207\217\347\255\211.md" deleted file mode 100644 index d397defd5e19c1968dc4873c997b81d590c13a48..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251112-js\345\217\230\351\207\217\347\255\211.md" +++ /dev/null @@ -1,77 +0,0 @@ -## 学习内容 -![](./图片imgs/20251112-笔记.png) - - 转义字符让双引号单引号不混乱:"/'包含单引号内容" - - a++先用再加;++a先加再用 - - 与运算找false,或运算找true - -## 练习题 - -### 练习1 -![](./图片imgs/20251112-练习.png) -```html - -``` - -### 练习2 -![](./图片imgs/20251112-练习2.png) -```html - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251113-\346\225\260\346\215\256\347\261\273\345\236\213.md" "b/\344\275\225\345\204\204\346\210\220/20251113-\346\225\260\346\215\256\347\261\273\345\236\213.md" deleted file mode 100644 index 4444d22d0916460153ad0a4205063569a7ab34ca..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251113-\346\225\260\346\215\256\347\261\273\345\236\213.md" +++ /dev/null @@ -1,133 +0,0 @@ -## 学习内容 - - 语句包含表达式 - - 表达式:一串数据间输出结果:5+3<3+8等 - - '' "" O null undefind都当成false去运算 - -## 练习题 -![](图片imgs/20251113-练习.png) - -```html - - - - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251114-\346\265\201\347\250\213\346\216\247\345\210\266.md" "b/\344\275\225\345\204\204\346\210\220/20251114-\346\265\201\347\250\213\346\216\247\345\210\266.md" deleted file mode 100644 index 9867ad346ce871be0577a117706d82345f55f615..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251114-\346\265\201\347\250\213\346\216\247\345\210\266.md" +++ /dev/null @@ -1,88 +0,0 @@ -## 练习题 -![](图片imgs/20251114-练习.png) -```html - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251117-\345\207\275\346\225\260.md" "b/\344\275\225\345\204\204\346\210\220/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index 24a7f391af15aa3a33ad6146bef175a93a90b4f5..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,28 +0,0 @@ -## 学习内容 - - If else等语句 用的很多时,使用逻辑引擎。 - - arguments获取调用函数时传入的实参 - - js更新最快,准确内容以实际效果为准 - -### 函数 - - 定义可指定形参 - - 调用的时候可任意指定实参,也可不指定 - - - 有return,则有返回值,而且通常不为undefined - - 无return,总是私下返回一个undefined - -## 练习题 - -```html - (function address(省,市,区,详细地址){ - document.write(省,市,区,详细地址); - }("广东省","深圳市","龙岗区","闽西",)) - - - - (function 获取数字绝对值(a){ - let 绝对值 = Math.abs(a); - - document.write(绝对值); - return 绝对值; - }(30)) -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251119-\345\207\275\346\225\26002.md" "b/\344\275\225\345\204\204\346\210\220/20251119-\345\207\275\346\225\26002.md" deleted file mode 100644 index b65583809279214359ffe2d57d42e9e3a3c1d7fc..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251119-\345\207\275\346\225\26002.md" +++ /dev/null @@ -1,204 +0,0 @@ -## 学习内容 - - js中两大数据结构:对象和数组。 - - parseInt:参数值拿不到时可用于调试值,如:输出NaN说明该字符串不可转成数值(NaN不是数值) - - 程序中,执行代码/逻辑有两大种: - - 自上而下执行一次 - - 执行制定函数 - -## 练习题 -![](图片imgs/20251119-练习.gif) -```html - - - - - - Document - - - - - - - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251120-\345\257\271\350\261\241.md" "b/\344\275\225\345\204\204\346\210\220/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index bda4a0e49c2b5c5b11bf5b4f32254f6857046eb1..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,131 +0,0 @@ - ## 学习内容 - - - window是js中唯一的全局变量(在下学期第一门课的nodeis中,会学习在nodeis下另外一个全局变量global) - - Math[用法:Math.方法] - - ceil向上取整 - - floor向下取整 - - max(x,y,...) - - min(x,y) - - round()四舍五入 - - Date[用法:new Date()] - - Event - -## 练习题 -![](图片imgs/20251120-练习.gif) -```html - - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251121-event\345\222\214\346\225\260\347\273\204.md" "b/\344\275\225\345\204\204\346\210\220/20251121-event\345\222\214\346\225\260\347\273\204.md" deleted file mode 100644 index 5064a157690877d2e16c702b5c3e5b746a0f282f..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251121-event\345\222\214\346\225\260\347\273\204.md" +++ /dev/null @@ -1,46 +0,0 @@ -## 学习内容 -- onclick等可绑定多个处理函数,处理不同事情。[不限数量,触发即执行全部函数] -- JS操作DOM元素很原始,只需搞定数据(无需关心怎么操纵DOM),后续有JQuery库,或者vue3的使用。 - -## 数组 -```html - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251124-\351\233\206\345\220\210.md" "b/\344\275\225\345\204\204\346\210\220/20251124-\351\233\206\345\220\210.md" deleted file mode 100644 index 2fe9f9353b1e199632819c038afe231d5a63cc87..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251124-\351\233\206\345\220\210.md" +++ /dev/null @@ -1,75 +0,0 @@ -## 学习内容 - - Ts是js的一个超集(在大型,长期维护的项目起大作用【可以减少许多基础错误】) - - map,set集合的特性在一些高级场景很实用,除此之外,Map的key可以是非string,set用于形成唯一值集合。 -## String对象 -用let str ='';代替new来创建。 -方法:charAt,indexof,substring,格式化字符串 -可当成数组遍历。 -## 练习题 -![](图片imgs/20251124-练习1.png) -```html - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251126-\347\273\203\344\271\240\351\242\230\350\241\245\345\205\205.md" "b/\344\275\225\345\204\204\346\210\220/20251126-\347\273\203\344\271\240\351\242\230\350\241\245\345\205\205.md" deleted file mode 100644 index b964f0bf1f23777922d7287309416304681c2157..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251126-\347\273\203\344\271\240\351\242\230\350\241\245\345\205\205.md" +++ /dev/null @@ -1,152 +0,0 @@ -## - - ![](图片imgs/20251126-练习1.png) - - - 字符串.match(正则)返回匹配到的字符串 - - 字符串.replace(正则,要替换的字符串')返回替换后的完整字符串 - - 正则.exec(字符串)返回匹配到的字符串、所在的位置,完整字符串 - - 正则.test(字符串)返回匹配字符串的结果:true false - -![](图片imgs/20251126-练习2.png) - - -```html - -``` \ No newline at end of file diff --git "a/\344\275\225\345\204\204\346\210\220/20251127-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\344\275\225\345\204\204\346\210\220/20251127-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 407ed3f0091a0def43e1584350be126ef7d47c5d..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251127-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,135 +0,0 @@ - - - ## 学习内容 - - 控制台中可找问题,而不希望结果显示在控制台,用try catche - - js(Node.js等)通常不写复杂业务 - - 关注鼠标,键盘,表单常用事件 - - 对事件冒泡的阻止:event.stopPropagation(); - - 取消浏览器的”默认动作”(点击会跳转、提交按钮会刷新页面等):preventDefault(); - - onload:是在页面基础元素加载后才执行 - -## 练习题 - -![](图片imgs/20251127-练习.gif) -```html - -
    - - - - -
    - - -``` - -```html - -

    数字转字母查询

    - - - - -

    - - - - - - -``` - -```html - -

    用户注册验证

    - -
    - - -

    - - - -

    - - -
    - - - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251128-\347\254\224\350\256\260.md" "b/\344\275\225\345\204\204\346\210\220/20251128-\347\254\224\350\256\260.md" deleted file mode 100644 index 7a68e55a3914f4194235e012130adc695e504bf2..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251128-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,67 +0,0 @@ - -## 学习内容 - - 40%-60%:开发所有功能只占20%;剩下用于完善处理可能的需求/麻烦。 - - 剩下的是一些会议(设计(扯皮),研讨,培训 - -## 练习题 -![](图片imgs/20251128-练习1.gif) -```html - - - -
    中国的国球是?
    -
    - -
    - - -
    - - -
    - - -
    -
    -
    -
    - - - - -``` - diff --git "a/\344\275\225\345\204\204\346\210\220/20251201-\346\213\226\346\213\275.md" "b/\344\275\225\345\204\204\346\210\220/20251201-\346\213\226\346\213\275.md" deleted file mode 100644 index 3cd18c8833348f0ba7b23f837a1143faf4e39ccf..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251201-\346\213\226\346\213\275.md" +++ /dev/null @@ -1,57 +0,0 @@ -## 学习内容 - - 添加很多个事件(纠正:事件本就存在,实际是添加n个处理函数) - - // 开始拖拽(按鼠标时)dragstart - - // 拖拽过程中(移动时连续触发)drag - - // 拖拽结束(松开鼠标时)dragend - - // 进入放置区域dragenter - - // 在放置区域上方移动(必须 event.preventDefault())dragover - - // 离开放置区域dragleave - - // 在放置区域释放(必须 event.preventDefault())drop -## 练习题 -![](图片imgs/20251201-练习.gif) -```html - -
    拖拽我
    -
    放置到这里
    -
    - - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251203-\350\216\267\345\217\226DOM\345\205\203\347\264\240.md" "b/\344\275\225\345\204\204\346\210\220/20251203-\350\216\267\345\217\226DOM\345\205\203\347\264\240.md" deleted file mode 100644 index 98283c9d4b52fa88000c67eb5d53e080242c4fc2..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251203-\350\216\267\345\217\226DOM\345\205\203\347\264\240.md" +++ /dev/null @@ -1,126 +0,0 @@ -## 学习内容 - - getElementById()返回指定ID对象 - - querySelector():它返回文档中与指定的css选择器匹配的第一个元素。如果没有找到匹配项,则返回null - - createEiement():根据指定名称创建元素 - - appendchild():将一个节点(元素)作为最后个子元素添加到别一个元素中 - -## 练习题 -![](图片imgs/20251203-练习1.gif) -```html - -

    训练1:颜色互换

    - -

    - -

    训练2:获取文件名

    - -

    - -

    训练3:动态添加文字

    - - -
    - - -``` - -![](图片imgs/20251203-练习2.gif) -```html - - -

    李白《行路难·其一》

    -

    金樽清酒斗十千,玉盘珍羞直万钱。

    -

    停杯投箸不能食,拔剑四顾心茫然。

    -

    欲渡黄河冰塞川,将登太行雪满山。

    -

    闲来垂钓碧溪上,忽复乘舟梦日边。

    -

    行路难!行路难!多歧路,今安在?

    -

    长风破浪会有时,直挂云帆济沧海。

    - - - - - - -
    -
    - -

    - -
    - - -
    - - - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251204-\345\244\204\347\220\206DOM\350\212\202\347\202\271.md" "b/\344\275\225\345\204\204\346\210\220/20251204-\345\244\204\347\220\206DOM\350\212\202\347\202\271.md" deleted file mode 100644 index 3fdb99b1f76ae61d2d5db68f7ae99022ef369863..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251204-\345\244\204\347\220\206DOM\350\212\202\347\202\271.md" +++ /dev/null @@ -1,383 +0,0 @@ -## 学习内容 - - - 获取DOM元素。--返回集合或单个元素 - - getElementById()-给Id用 - - getElementsByClassName() -给class用(通过类名) - - getElementsByTagName() -给标签用 - - querySelector() -给class选择器用(通过.类名) - - querySelectorAll() -给class选择器用 - - - 处理DOM节点的方法 - - 增:创建 - - appendChild()--插入节点末尾 - - createElement() --创建标签 - - createTextNode() --添加文本 - - insertBefore()- 插入标签 - - cloneNode()-复制标签 - - 删: - - removeChild() - - 替换节点replaceChild() - -## 练习题 -### 练1~3 -```html - - -

    训练1:添加带颜色的文字

    - - - 添加 -
    - -
    - - -

    训练2:猜歌名游戏

    -

    请输入这首歌的歌名:

    - - 提交 -
    - -
    - - -

    训练3:删除影片资讯

    -
      -
    • 1.《金蝉脱壳》两大动作巨星联手
    • -
    • 2.《阿甘正传》励志而传奇的一生
    • -
    • 3.《爱尔兰梦》爱情与梦想的交织
    • -
    • 4.《头号玩家》游戏梦想照进现实
    • -
    -

    输入影片资讯编号:

    - - - -``` - -### 练4~7 -```html - - -

    训练4:移动列表元素

    -
    -

    蔬菜:

    -
      -
    • 番茄
    • -
    • 黄瓜
    • -
    • 土豆
    • -
    • 香蕉
    • -
    -
    -
    -

    水果:

    -
      -
    • 苹果
    • -
    • 橙子
    • -
    • 葡萄
    • -
    • 胡萝卜
    • -
    -
    - - -
    - - -

    训练5:判断选择的答案

    -

    在《倚天屠龙记》中,张三丰是______派的掌门?

    - A 少林
    - B 武当
    - C 峨眉
    - D 昆仑
    - -
    - -
    - - -

    训练6:修改超链接

    - 百度一下

    - - -
    - - -

    训练7:动态添加图片

    - - -
    - - - -``` - -### 综合练习 - -```html - - -

    综合练习1:将粗体字改为斜体字

    -

    一生只爱一个人,一世只怀一种愁。

    - - -
    - - -

    综合练习2:年、月、日的联动

    - - - - -
    - - -

    综合练习3:选择表情图片

    - -
    😊
    - - - -``` - \ No newline at end of file diff --git "a/\344\275\225\345\204\204\346\210\220/20251205-window\345\257\271\350\261\241.md" "b/\344\275\225\345\204\204\346\210\220/20251205-window\345\257\271\350\261\241.md" deleted file mode 100644 index 6642171ce4f3a568d06a6762187fe48fe60bc21b..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251205-window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,262 +0,0 @@ -## 学习内容 - - Window属性:document,location; - - 方法:alert-点击确定前,后续代码不执行。confirm(),prompt() - -## 练习题 - -### 练习1~4 -```html - -

    训练1:弹出警告对话框

    -

    播放歌曲:

    - - - - -
    - -

    训练2:弹出确认对话框

    -

    当前用户:游客

    - 退出登录 - -
    - -

    训练3:打开影片详情页面

    -

    点击图片查看详情:

    - 影片海报 -

    《流浪地球》

    - -
    - -

    训练4:自动关闭广告窗口

    - - - - -``` - -### 练习5~6 -```html - - -

    简单计时器

    -
    00:00
    - - - -

    下降的窗口

    - - - - - - -``` - -### 综合练习 -```html - -

    综合练习1:计算两个数的和并判断结果

    - -
    - -
    - -

    综合练习2:选择选项并输出结果

    - -
    - -
    - -

    综合练习3:循环显示图片

    - - -
    - - - -``` - - - diff --git "a/\344\275\225\345\204\204\346\210\220/20251208-DOM\347\273\203\344\271\240\351\242\230\350\241\245\345\205\205.md" "b/\344\275\225\345\204\204\346\210\220/20251208-DOM\347\273\203\344\271\240\351\242\230\350\241\245\345\205\205.md" deleted file mode 100644 index 034c62fa05f2b18b62adeb58ac02b2bd3fb3006c..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251208-DOM\347\273\203\344\271\240\351\242\230\350\241\245\345\205\205.md" +++ /dev/null @@ -1,55 +0,0 @@ -## 学习内容 - - navigator对象 - - userAgent - - platform - - 无头浏览器:抢票,爬取数据等 -## 练习题 -```html - -

    综合练习2:年、月、日的联动

    - - - - - -``` - diff --git "a/\344\275\225\345\204\204\346\210\220/20251210-\347\273\203\344\271\240\351\242\230\350\241\245\345\205\205.md" "b/\344\275\225\345\204\204\346\210\220/20251210-\347\273\203\344\271\240\351\242\230\350\241\245\345\205\205.md" deleted file mode 100644 index 25fba9bbf141319cb2a13baa4043cace39593eaf..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251210-\347\273\203\344\271\240\351\242\230\350\241\245\345\205\205.md" +++ /dev/null @@ -1,4 +0,0 @@ -## 学习内容 -图片拖拽: -![](图片imgs/20251210-拖拽.png) - diff --git "a/\344\275\225\345\204\204\346\210\220/20251211-Form.md" "b/\344\275\225\345\204\204\346\210\220/20251211-Form.md" deleted file mode 100644 index ba0abba8e34649d6fd36de0d84eb5cd42903602b..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251211-Form.md" +++ /dev/null @@ -1,97 +0,0 @@ -## 学习内容 - - Form提交的数据后续可以通过ajax与jqury来处理。 - - 下面是DOM元素操作的代码演示: - - ![](图片imgs/20251211-课程.png) -## 练习题 - -```html - -

    训练1:模拟自动取票机取票

    -

    电影:《勇敢者游戏》

    -

    兑换码:99632570063166

    - - -

    - -
    - -

    训练2:调整多行文本框高度

    -
    - - - -
    - -

    训练3:限制选择课程个数

    -

    最多选择6门课程

    -
    - 数学 - 语文 - 英语 - 物理 - 化学 - 生物 - 历史 - 地理
    -
    -

    - - - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251212-json.md" "b/\344\275\225\345\204\204\346\210\220/20251212-json.md" deleted file mode 100644 index 26e5f7c0f84e605fd67af5c348d589fdabc02865..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251212-json.md" +++ /dev/null @@ -1,151 +0,0 @@ -## 学习内容\ - - for(;i<10;){}类似while(i<10){} - - isNaN(NaN):NaN只有在这才为true - - json:字符串用双引号包裹;结尾不可以是逗号;以key-value出现 - - 插件:REST client;然后创建api.http文件。可以查看请求内容 -![](图片imgs/2025-12-12%20内容.JPG) - -## 练习题 - -```html - -

    综合练习1:选择题

    -

    HTML 是什么?

    - A. 编程语言
    - B. 标记语言
    - C. 样式语言
    - D. 数据库语言
    - -

    - -
    - -

    综合练习2:复选框操作

    -

    选择食物:

    - 苹果 - 香蕉 - 橙子 - 西瓜
    - - - -

    - -
    - -

    综合练习3:省市联动

    - - -

    - - - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251215-\347\254\224\350\256\260.md" "b/\344\275\225\345\204\204\346\210\220/20251215-\347\254\224\350\256\260.md" deleted file mode 100644 index 75dbe54e64b90586a15ba5d86597108673c720a6..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251215-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,8 +0,0 @@ -## 学习内容 -数组:![](图片imgs/20251215-内容1.png) - -## 练习题 -![](图片imgs/20251011-练习.png) -```html - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251217-jQuerty.md" "b/\344\275\225\345\204\204\346\210\220/20251217-jQuerty.md" deleted file mode 100644 index 573df081193191b1029157cc8593d011193075a2..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251217-jQuerty.md" +++ /dev/null @@ -1,113 +0,0 @@ -## 学习内容 - - jq基础 - - 一个js库,为了方便dom操作,在body结束标签之前引用,放其他js文件前 - - 使用$来使用jQuery库的能力,$符号实际是一个方法,当然方法在js中是一个对象,所以其也有一些属性可以使用 - - jquery获取到的是jQuery,和原生js掌到的don对象不同,但它们间可以相互转换 - - let div=$('div')拿到jquery对象,div[0]拿到dom对象,$(div[0])又可以重新转换为jquery象 - - jq DOM操作 - - 新增append给拿到的元素增加一个下级元素 - - 移除remove移除拿到的元素 - - text()拿到文本内容,text(要设置的内容)可以修改纯文本内容 - - html()拿到包含标签的内容,html(要设置的内容)可以修改包含标签的内容 - - -## 练习题 - -```html - -
    验收内容
    -
    内容
    -

    项目1

    -

    项目2

    -

    项目3

    -
      -
    • 项1
    • -
    • 项2
    • -
    • 项3
    • -
    • 项4
    • -
    -
    -

    段落 文本1

    -

    段落 文本2

    -
    - - - - - - - - - - - - - -
    第1行
    第2行
    第3行
    第4行
    -
    -
    -
    - - - - - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251218-jQuerty02 copy.md" "b/\344\275\225\345\204\204\346\210\220/20251218-jQuerty02 copy.md" deleted file mode 100644 index 80d5dd58e1bc57d05335a0263dece1525e8927f0..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251218-jQuerty02 copy.md" +++ /dev/null @@ -1,88 +0,0 @@ -## 学习内容 -### jQuery事件处理 - - jQuery对象.on(click',function(){} - - jQuery对象.click(function(){}) - - jQuery对象.trigger(‘click',function()) - - $(function(){})) -### jQuery动画与效果 - - 基础效果:显示、隐藏show()、hide() - - 进阶效果:淡入、淡出fadeIn()、fadeOut() - - 高级效果: animate() - -## 练习题 -```html - - -

    原标题

    - - - -
    悬停我
    - -
      -
    • 项目1
    • -
    - - -
    - - -
    - - - - - - - -``` \ No newline at end of file diff --git "a/\344\275\225\345\204\204\346\210\220/20251219-\346\200\273\347\273\223.md" "b/\344\275\225\345\204\204\346\210\220/20251219-\346\200\273\347\273\223.md" deleted file mode 100644 index df822612226cbcd66784c4ddb0e4092ed7615f9d..0000000000000000000000000000000000000000 --- "a/\344\275\225\345\204\204\346\210\220/20251219-\346\200\273\347\273\223.md" +++ /dev/null @@ -1,107 +0,0 @@ -## 学习内容 - - 开发跨平台,性能不高,响应不太可快:选Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。(js开发的不太快) -## 变量、常量和基础数据类型 -- var let定义变量,请忘记var,后后续只使用let -- const定义常量,常量名全大写 - - 数据类型 - - 基础数据类型 - - string - - number - - boolean - - underfined - - null - - 复合数据类型 - - 数组 - - 对象 - - 函数 -### 运算符和数据类型转换 - - `+ - * / %` - - 逻辑运算 - -nullundefinede这些字面量参与逻辑运算时,作为false,其余的值作为true - -短路运算trueI表达式false&&表达式 - - 赋值运算- + = -+ ++ --等 - -### 流程控制 - - if - - if...else if() - - if...else - - -if...else if()...else - - switch - - 循环 - - for - - while - - do...while - - 三元运算:`a?"够了":(b?'有':'无')` -## 核心数据结构及用法 -### 数组 - - 改变数组本身的方法 - - sort - - push pop - - unshift shift - - splice - - reverse - - fill - - 不改变数组本身的方法 - - concat - - slice - - map - - filter - - reduce - - forEach - - find - - findIndex - - every - - some - - includes - - indexof - - lastIndexof - - join - - 高阶函数 - - 一个函数f,接受另外一个函数作为其参数,则称函数f为高阶函数 -### 函数 -- 唯一确定一个函数:三要素(函数的签名,就是函数的三要素:函数名称、函数参数和函数返回值) - - -函数定义 :三种定义方式 - - -函数参数:可传可不传,不会因为没有参数而报错 - - -函数返回值:如果没有返回值,则默认返回undefined -### 对象 - - 包含在一对大括号中的内容 - - 键值对,键也就是属性,值也就属性值 - - 也可以使用类似于数组的形式访问某个值,或者为其添加新的属性: - - ![](图片imgs/20251219-内容1.png) -## 练习题 - -```html - - - - -``` diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/2025-12-12 \345\206\205\345\256\271.JPG" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/2025-12-12 \345\206\205\345\256\271.JPG" deleted file mode 100644 index a005c2c250f55718e1f53f3efb7a595e91a36599..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/2025-12-12 \345\206\205\345\256\271.JPG" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\254\224\350\256\260.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\254\224\350\256\260.png" deleted file mode 100644 index 8781b5bc084980143c83e67b31ed5fea410fdbb9..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\254\224\350\256\260.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\273\203\344\271\240.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\273\203\344\271\240.png" deleted file mode 100644 index 57b579db141f1f3a70c8b32af437ec19e2612a83..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\273\203\344\271\240.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\254\224\350\256\260.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\254\224\350\256\260.png" deleted file mode 100644 index 644d76da243f6b78620482ab8823c412889bfb4a..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\254\224\350\256\260.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\240.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\240.png" deleted file mode 100644 index e996fe792933c8f145c1c0b52cbd126ea8a2421c..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\240.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\2402.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\2402.png" deleted file mode 100644 index fd02a75b5767bfebbf151b256d357382c9a0b6f4..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\2402.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251113-\347\273\203\344\271\240.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251113-\347\273\203\344\271\240.png" deleted file mode 100644 index 125553fd376a6c54d602ab7436727ce42b74aba4..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251113-\347\273\203\344\271\240.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251114-\347\273\203\344\271\240.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251114-\347\273\203\344\271\240.png" deleted file mode 100644 index b3ca8ff8e48c2c438e1160a18b313058c0e18075..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251114-\347\273\203\344\271\240.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251119-\347\273\203\344\271\240.gif" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251119-\347\273\203\344\271\240.gif" deleted file mode 100644 index 0447cc9aae6a4c09169470217b9da4a00ec9415f..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251119-\347\273\203\344\271\240.gif" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251120-\347\273\203\344\271\240.gif" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251120-\347\273\203\344\271\240.gif" deleted file mode 100644 index af97da7bcdbd7f7c66384405fc01463de3018723..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251120-\347\273\203\344\271\240.gif" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251124-\347\273\203\344\271\2401.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251124-\347\273\203\344\271\2401.png" deleted file mode 100644 index 2915657e041018955699e37c1f6c1285b90cffa1..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251124-\347\273\203\344\271\2401.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251126-\347\273\203\344\271\2401.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251126-\347\273\203\344\271\2401.png" deleted file mode 100644 index 4154f45a8c4942d066f261366bd0c32c105ded02..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251126-\347\273\203\344\271\2401.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251126-\347\273\203\344\271\2402.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251126-\347\273\203\344\271\2402.png" deleted file mode 100644 index 8752596392f6fda11c75d231bb241ae32bb5f2dc..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251126-\347\273\203\344\271\2402.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251127-\347\273\203\344\271\240.gif" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251127-\347\273\203\344\271\240.gif" deleted file mode 100644 index e1243b57a73143926763f7392e70c0620548f470..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251127-\347\273\203\344\271\240.gif" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251128-\347\273\203\344\271\2401.gif" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251128-\347\273\203\344\271\2401.gif" deleted file mode 100644 index 9ed9deedad0834e7134fc2d3b41ca113ebc3c2e8..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251128-\347\273\203\344\271\2401.gif" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251201-\347\273\203\344\271\240.gif" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251201-\347\273\203\344\271\240.gif" deleted file mode 100644 index 0931f070486d0afa0386e42476fd50240ce633c2..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251201-\347\273\203\344\271\240.gif" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251203-\347\273\203\344\271\2401.gif" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251203-\347\273\203\344\271\2401.gif" deleted file mode 100644 index dd2bdca4971c2e4a814412ab359ebf2f4022c7f7..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251203-\347\273\203\344\271\2401.gif" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251203-\347\273\203\344\271\2402.gif" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251203-\347\273\203\344\271\2402.gif" deleted file mode 100644 index 7653706d03285cddc85a71f8ac6a4ef59b61c899..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251203-\347\273\203\344\271\2402.gif" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251210-\346\213\226\346\213\275.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251210-\346\213\226\346\213\275.png" deleted file mode 100644 index 029eaf2e18444bea05bd6f20f034306ab5a7a759..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251210-\346\213\226\346\213\275.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251211-\350\257\276\347\250\213.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251211-\350\257\276\347\250\213.png" deleted file mode 100644 index 1a6e057b03d6c2ee4bb54bf1560013f51c83927e..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251211-\350\257\276\347\250\213.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251215-\345\206\205\345\256\2711.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251215-\345\206\205\345\256\2711.png" deleted file mode 100644 index 17cecc24f38da0e3ff5e985d4949aed2e118af4a..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251215-\345\206\205\345\256\2711.png" and /dev/null differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251219-\345\206\205\345\256\2711.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251219-\345\206\205\345\256\2711.png" deleted file mode 100644 index 0d74c103faf73f376487260b5e27d0a569907feb..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251219-\345\206\205\345\256\2711.png" and /dev/null differ diff --git "a/\344\275\225\347\220\263/20251110-js\345\234\250\351\241\265\351\235\242\344\270\255\345\265\214\345\205\245js\351\223\276\346\216\245\346\210\226\345\244\226\351\203\250\346\226\207\344\273\266.md" "b/\344\275\225\347\220\263/20251110-js\345\234\250\351\241\265\351\235\242\344\270\255\345\265\214\345\205\245js\351\223\276\346\216\245\346\210\226\345\244\226\351\203\250\346\226\207\344\273\266.md" deleted file mode 100644 index 856bfe360879fbe3c811ef93a7043654c581bfd7..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251110-js\345\234\250\351\241\265\351\235\242\344\270\255\345\265\214\345\205\245js\351\223\276\346\216\245\346\210\226\345\244\226\351\203\250\346\226\207\344\273\266.md" +++ /dev/null @@ -1,33 +0,0 @@ -## 在页面中嵌入js链接或外部文件 -### 一、直接嵌入 JS 代码(页面内执行) -#### 用 ` -``` - - ### 效果图 1 - - - ```js - alert("http://www.mingrisoft.com") - ``` - ```html - - ``` - - ### 效果图 2 - \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251112-js\346\225\260\346\215\256\347\261\273\345\236\213\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\344\275\225\347\220\263/20251112-js\346\225\260\346\215\256\347\261\273\345\236\213\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 5b054e07bf353d36eaaa19423cc0fb868cc5ff7e..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251112-js\346\225\260\346\215\256\347\261\273\345\236\213\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,54 +0,0 @@ -## 一、JS 数据类型 -### JS 数据类型分为基本数据类型和引用数据类型,核心区别在于存储方式和访问机制。 -### 1. 基本数据类型(值类型) -### 直接存储值,占用空间小,复制时传递值本身: -### Number:数字类型(整数、小数、NaN、Infinity),如123、3.14; -### String:字符串类型,单 / 双引号包裹,如'hello'、"JS"; -### Boolean:布尔类型,仅true(真)和false(假)两个值; -### Undefined:未定义类型,变量声明未赋值时默认值,如let a;则a为undefined; -### Null:空值类型,主动表示 “空”,typeof 检测返回object(历史遗留 bug); -### Symbol(ES6+):唯一标识符,避免属性名冲突,如Symbol('key'); -### BigInt(ES6+):大整数类型,解决 Number 精度限制,后缀n,如9999999999999999n。 -### 2. 引用数据类型(引用类型) -### 存储内存地址,值存于堆内存,复制时传递地址: -### Object:对象类型,键值对集合,如{name: '张三', age: 20}; -### Array:数组类型,有序数据集合,如[1, 2, 3]; -### Function:函数类型,可执行代码块,如function fn() {}; -### 其他:Date(日期)、RegExp(正则)等。 -### 二、常量与变量 -### 1. 变量(可变值) -### 定义:用let(ES6+)或var声明,值可修改; -### 特点:let块级作用域,无变量提升,不能重复声明;var函数级作用域,有变量提升,可重复声明; -### 2. 常量(不可变值) -### 定义:用const声明,必须初始化,值不可直接修改; -### 特点:块级作用域,不可重复声明;引用类型常量,地址不可改,内部属性可改; - -## 作业 -```html - - - - -``` - -### 效果图 - diff --git "a/\344\275\225\347\220\263/20251113-js\350\277\220\347\256\227\347\254\246\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\344\275\225\347\220\263/20251113-js\350\277\220\347\256\227\347\254\246\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 3ded55325df76cd0bc53db2967426fa4d38df047..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251113-js\350\277\220\347\256\227\347\254\246\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,129 +0,0 @@ -## 笔记 -### 1.算术运算符:用于数值计算,包括 +(加)、-(减)、*(乘)、/(除)、%(取余)、++(自增)、--(自减)。注意 + 也可用于字符串拼接,++/-- 放在变量前(先运算后赋值)或后(先赋值后运算)结果不同。 - -### 2.赋值运算符:给变量赋值,基础是 =,还有复合形式如 +=(a += b 即 a = a + b)、-=、*= 等,简化运算与赋值结合的操作。 - -### 3.比较运算符:比较两个值,返回布尔值。包括 ==(宽松相等,可能类型转换)、===(严格相等,类型和值都需相同)、!=、!==、>、<、>=、<=。 - -### 4.逻辑运算符:处理布尔值运算,&&(与,两边都为真才真)、||(或,一边为真就真)、!(非,取反)。会短路求值,即前半部分可确定结果时,后半部分不执行。 - -### 5.条件运算符(三目运算符):条件 ? 表达式1 : 表达式2,条件为真执行表达式 1,否则执行表达式 2,用于简化简单的条件判断。 - -### 6.其他:如 typeof(返回值的类型字符串)、,(逗号运算符,返回最后一个表达式结果)等,用于特定场景的操作。 - - -## 作业 -```html - - - - - - -``` - - -### 效果图 - - - - -```html - - - - - - -``` -### 效果图 - - - - diff --git "a/\344\275\225\347\220\263/20251114-jsif\350\257\255\345\217\245\344\275\234\344\270\232.md" "b/\344\275\225\347\220\263/20251114-jsif\350\257\255\345\217\245\344\275\234\344\270\232.md" deleted file mode 100644 index b3f0b0a7221124fcf753b92f0491246010925023..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251114-jsif\350\257\255\345\217\245\344\275\234\344\270\232.md" +++ /dev/null @@ -1,79 +0,0 @@ -```html - - - - - -``` - -### 效果图 - \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251117-\346\265\201\347\250\213\346\216\247\345\210\266and\345\207\275\346\225\260\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\344\275\225\347\220\263/20251117-\346\265\201\347\250\213\346\216\247\345\210\266and\345\207\275\346\225\260\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index fc92cc57a17ce85d6a9e21779650ca2ca8d74549..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251117-\346\265\201\347\250\213\346\216\247\345\210\266and\345\207\275\346\225\260\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,83 +0,0 @@ -## JavaScript笔记 - -### 流程控制语句 - -1.条件控制语句 - -- if语句 - -- if...else语句 - -- if...else if语句 - -- switch语句 - -2.循环控制语句 - -- while循环语句 - -- do-while循环语句 - -- for循环语句 - -3.跳转语句 - -- continue语句 - -- break语句 - -### 函数 - -1.函数的定义与调用 - -- 定义可指定形参 - -- 调用的时候可任意制定实参,也可不指定 - -```js -//第一种定义方式:传统、原始方式 -function getNameByid(){ - //arguments关键字用于捕获调用函数时传入的参数(实际参数) - console.log(arguments); - } - -//匿名函数 -let getNameByid = function (name,age){ - -} - -//箭头函数 -let getNameByid = (name,age) => { - console.log(name); - console.log(age); -} -``` -2.返回值 -- 有return,则有返回值,而且通常不为undefined。 -- 无return,总是私下返回一个undefined。 - -## 练习 -训练1.获取完整的收货地址 在电子商城网站收货人信息的收货地址栏中,地址由省、市、区和详细地址组成,试着定义一个address()函数,该函数包含省、市、区和详细地址4个参数,在调用函数时,传递的参数可以拼接成一个完整的收货地址。 -```html - -``` -训练2.获取数字的绝对值 定义一个获取数字绝对值的函数,将数字作为参数进行传递,输出-30的绝对值。 -```html - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251119-js\345\207\275\346\225\260\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\344\275\225\347\220\263/20251119-js\345\207\275\346\225\260\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index f7737a4741daf24097f422395a2aae0258288e49..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251119-js\345\207\275\346\225\260\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,200 +0,0 @@ -### 一、什么是 JS 函数? -#### 函数是可重复使用的代码块,用来完成特定功能(比如计算、处理数据、触发事件),本质是 “包装好的工具”,调用时才执行。 -### 二、函数的基本写法(3 种常用) -#### 1. 声明式函数(最常用) -#### // 语法:function 函数名(参数1, 参数2) { 函数体 } -#### function add(a, b) { - #### return a + b; // return 返回结果(没有则返回undefined) -#### } -#### // 调用:函数名(实参) -#### let result = add(2, 3); // 结果:5 - -#### 2. 表达式函数(匿名 / 命名) -#### // 匿名表达式 -#### let multiply = function(a, b) { -#### return a * b; -#### }; -#### // 调用 -#### let res = multiply(4, 5); // 20 - -#### // 命名表达式(方便调试) -#### let divide = function div(a, b) { - #### return a / b; -#### }; - -#### 3. 箭头函数(ES6+,简洁) -#### // 语法:(参数) => { 函数体 } (单个参数可省略括号,单句返回可省略大括号和return) -#### let subtract = (a, b) => a - b; // 等价于 function(a,b){return a-b} -#### let res2 = subtract(10, 3); // 7 - -### 三、核心概念(简单记) -#### 参数:函数的 “输入”,声明时写的是 “形参”,调用时传的是 “实参”(实参可少传 / 多传,多余的忽略)。 -#### 返回值:函数的 “输出”,用return带出,执行到return后函数立即结束。 -#### 作用域:函数内部声明的变量,外部不能直接访问(局部变量);外部变量内部可访问(全局变量)。 -## 作业 -```html - -``` - -```html - -``` - ```html - - ``` - ```html - - ``` - - ```html - - -``` -```html - - ``` - ```html - - ``` - ```html - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251120-js\345\257\271\350\261\241\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\344\275\225\347\220\263/20251120-js\345\257\271\350\261\241\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 4122b426d9a76c13cdf3377d0f495a8800cc4e0a..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251120-js\345\257\271\350\261\241\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,157 +0,0 @@ -### 一、什么是 JS 对象? -- 对象是存储数据和功能的集合,本质是 “键值对的容器”(键 = 属性名,值 = 属性值,值可以是变量、函数等),用来描述一个具体的事物(比如人、商品)。 -### 二、对象的创建方式(3 种常用) -- 1. 字面量方式(最常用) -- // 语法:let 对象名 = { 键1: 值1, 键2: 值2, ... } -- 2. 构造函数方式(创建多个同类对象) -- // 用Object构造函数 -```html - let car = new Object(); - car.brand = "特斯拉"; - car.price = 300000; - car.run = () => console.log("汽车在行驶"); -``` -- 3. 简化写法(ES6+,属性 / 方法简写) -- let name = "小红"; -- let eat = () => console.log("吃饭啦"); - -- // 属性名和变量名一致时,可简写 -```html -let person2 = { - name, // 等价于 name: name - eat // 等价于 eat: eat -}; -``` -### 三、对象的核心操作(增删改查) -- 1. 查(访问属性 / 方法) -```html -let person = { name: "小明", age: 20, sayHi: () => console.log("你好") }; -``` -- // 方式1:点语法(推荐,简洁) -```html -console.log(person.name); // 输出:小明 -person.sayHi(); // 输出:你好 -``` -```html -// 方式2:方括号语法(适合属性名带特殊字符/变量) -console.log(person["age"]); // 输出:20 -let key = "name"; -console.log(person[key]); // 输出:小明 -``` -- 2. 增(添加新属性 / 方法) -```html -let person = { name: "小明" }; -person.gender = "男"; // 添加属性 -person.study = () => console.log("学习中"); // 添加方法 -``` - -- 3. 改(修改已有属性 / 方法) -```html -let person = { name: "小明", age: 20 }; -person.age = 21; // 修改属性 -person.sayHi = () => console.log("Hi~"); // 修改方法 -``` - -- 4. 删(删除属性) -```html -let person = { name: "小明", age: 20 }; -delete person.age; // 删除age属性 -console.log(person.age); // 输出:undefined -``` - -### 四、核心概念(简单记) -- 属性:对象的 “特征”(比如 name、age)。 -- 方法:对象的 “功能”(函数类型的属性,比如 sayHi、run)。 -- 键名:属性名,默认是字符串(可省略引号,特殊字符需加引号,比如 "user-name")。 -- this:对象内部的方法中,this指向当前对象(箭头函数无 this,指向外部环境)。 -```html -let person = { - name: "小明", - sayName: function() { - console.log(this.name); // this指向person,输出:小明 - } -}; -``` -```html - - - - 点击页面任意位置,检测鼠标按键 - -

    生成 1-6 组成的随机数

    - - -
    - - -``` - diff --git "a/\344\275\225\347\220\263/20251121-js\346\225\260\347\273\204\347\254\224\350\256\260.md" "b/\344\275\225\347\220\263/20251121-js\346\225\260\347\273\204\347\254\224\350\256\260.md" deleted file mode 100644 index 9f168c15c17cce27a70a4d772437cb5d52ce7cf3..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251121-js\346\225\260\347\273\204\347\254\224\350\256\260.md" +++ /dev/null @@ -1,62 +0,0 @@ -#### 一、什么是 JS 数组? -- 数组是有序的集合,专门用来存储多个数据(可以是不同类型:数字、字符串、对象等),本质是 “带索- 引的容器”,索引从 0 开始(第 1 个元素索引为 0,第 2 个为 1,以此类推)。 -#### 二、数组的创建方式(2 种常用) -- 1. 字面量方式(最常用) -- // 语法:let 数组名 = [元素1, 元素2, ...] -- 2. 构造函数方式 -- let numbers = new Array(1, 2, 3, 4); // 结果:[1,2,3,4] - -#### 三、数组的核心操作(增删改查) -- 1. 查(访问元素 / 长度) -```html -let fruits = ["苹果", "香蕉", "橙子"]; - -// 访问元素:数组名[索引] -console.log(fruits[0]); // 输出:苹果(第1个元素) -console.log(fruits[2]); // 输出:橙子(第3个元素) - -// 访问长度:数组名.length -console.log(fruits.length); // 输出:3(数组有3个元素) -``` -- 2. 改(修改元素) -```html -let fruits = ["苹果", "香蕉", "橙子"]; -fruits[1] = "葡萄"; // 把索引1的元素改成“葡萄” -console.log(fruits); // 结果:["苹果", "葡萄", "橙子"] -``` -- 3. 增(添加元素) -```html -let fruits = ["苹果", "香蕉"]; -``` -- // 1. 末尾添加(push,常用) -```html -fruits.push("橙子", "梨"); // 可添加多个元素 -console.log(fruits); // 结果:["苹果", "香蕉", "橙子", "梨"] -``` -- // 2. 开头添加(unshift) -```html -fruits.unshift("草莓"); -console.log(fruits); // 结果:["草莓", "苹果", "香蕉", "橙子", "梨"] -``` -- 4. 删(删除元素) -- let fruits = ["草莓", "苹果", "香蕉", "橙子"]; - --// 1. 末尾删除(pop,常用) -```html -fruits.pop(); // 无参数,删除最后1个元素 -console.log(fruits); // 结果:["草莓", "苹果", "香蕉"] -``` -- // 2. 开头删除(shift) -```html -fruits.shift(); // 无参数,删除第1个元素 -console.log(fruits); // 结果:["苹果", "香蕉"] -``` - -#### 五、核心概念(简单记) -- 索引:元素的位置编号,从 0 开始,最大索引 = 数组长度 - 1。 -- 长度:length属性,不仅能获取长度,还能修改(比如arr.length = 0可清空数组)。 -- 动态性:JS 数组长度不固定,添加 / 删除元素会自动调整长度,无需提前声明。 -#### 六、简单注意点 -- 数组索引不能越界,访问不存在的索引(比如arr[10],数组只有 3 个元素)会返回undefined。 -- 数组可以存储任意类型数据,但建议尽量存储同类型(方便遍历和处理)。 -- 常用方法中,push/pop(操作末尾)比unshift/shift(操作开头)效率更高。 diff --git "a/\344\275\225\347\220\263/20251124-js\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\344\275\225\347\220\263/20251124-js\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index d2881f7ba69f1b2657243cae56b375c72015cefb..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251124-js\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,118 +0,0 @@ -## 一、数组(Array)​ -- 定义:有序、可重复的元素集合,支持索引访问(下标从 0 开始)。​ -- 创建方式:​ -- 字面量:const arr = [1, 2, 3]​ -- 构造函数:const arr = new Array(1, 2, 3)​ -- 核心特性:有序、可重复、可存任意类型(数字、字符串、对象等)。​ -- 常用方法:​ -- 增删:push()(尾增)、pop()(尾删)、shift()(头删)、unshift()(头增)​ -- 遍历:forEach()、map()、filter()​ -- 查找:find()、indexOf()​ -- 注意:通过索引操作高效,查找非索引元素需遍历。​ -## 二、集合(Set)​ -- 定义:ES6 新增,无序、不可重复的元素集合,无索引。​ -- 创建方式:const set = new Set([1, 2, 3])(参数为可迭代对象)​ -- 核心特性:无序、去重、可存任意类型(引用类型按地址去重)。​ -- 常用方法:​ -- 增删查:add()、delete()、has()、clear()​ -- 遍历:forEach()、for...of​ -- 长度:size 属性(无 length)​ -- 注意:去重高效,无索引无法通过下标访问,需转数组([...set])后操作。 - - -## 练习 -```html - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\347\254\224\350\256\260.md" "b/\344\275\225\347\220\263/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\347\254\224\350\256\260.md" deleted file mode 100644 index 7e6410abac88feb16967f23d47adb202b971b8cf..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\347\254\224\350\256\260.md" +++ /dev/null @@ -1,16 +0,0 @@ -## 一、正则表达式(RegExp)​ -- 定义:描述字符模式的对象,用于匹配、查找、替换字符串中的特定字符组合。​ -- 创建方式:​ -- 字面量:const reg = /pattern/flags(如 /abc/g,pattern 为匹配模式,flags 为修饰符)​ -- 构造函数:const reg = new RegExp('pattern', 'flags')(如 new RegExp('abc', 'g'))​ -- 核心修饰符(flags):​ -- g:全局匹配(不匹配一次后停止)​ -- i:忽略大小写(匹配时不区分字母大小写)​ -- m:多行匹配(将 ^ 和 $ 视为每行的开头和结尾)​ -- 常用元字符(pattern 核心):​ -- 基础:.(匹配任意单个字符,除换行)、\d(匹配数字)、\w(匹配字母 / 数字 / 下划线)​ -- 边界:^(匹配字符串开头)、$(匹配字符串结尾)​ -- 量词:*(匹配 0 次或多次)、+(匹配 1 次或多次)、?(匹配 0 次或 1 次)、{n}(匹配 n - 次)​ -- 常用方法:​ -- 正则对象方法:test(str)(判断字符串是否匹配,返回布尔值)、exec(str)(返回匹配结果数- 组,无匹配则为 null)​ -- 字符串方法:match(reg)(返回匹配结果数组)、replace(reg, newStr)(替换匹配的字符)、- split(reg)(按匹配规则分割字符串) \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251127-js\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\347\250\213\345\272\217\350\260\203\350\257\225\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\344\275\225\347\220\263/20251127-js\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\347\250\213\345\272\217\350\260\203\350\257\225\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index ff1d18cfd4bce4a171dbb5310f782ef3a40d1add..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251127-js\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\347\250\213\345\272\217\350\260\203\350\257\225\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,86 +0,0 @@ -## 一、异常处理(Error Handling)​ -- 异常定义:代码执行中出现的错误(如语法错误、逻辑错误、引用错误),会中断程序默认执行流程。​ -- 核心处理语句:​ -- try...catch:捕获并处理异常​ -- try:包裹可能抛出异常的代码块​ -- catch(err):捕获 try 中抛出的异常,err 为异常对象(含 message 错误信息、name 错误类型)​ -- finally:无论 try 中是否抛出异常,都会执行的代码块(常用于释放资源,如关闭请求)​ -- throw:主动抛出自定义异常(可抛字符串、对象等),触发 catch 捕获​ -- 示例:if (num < 0) throw new Error('数字不能为负');​ -- 常见错误类型:​ -- SyntaxError:语法错误(如括号不闭合)​ -- ReferenceError:引用未定义的变量​ -- TypeError:类型错误(如对非函数变量调用)​ -- RangeError:范围错误(如数组长度设为负数)​ -## 二、程序调试(Debugging)​ -- 核心目的:定位代码中的错误,验证逻辑正确性。​ -- 常用调试方法:​ -- console 方法:​ -- console.log():输出普通信息(最常用)​ -- console.error():输出错误信息(标红显示,便于区分)​ -- console.warn():输出警告信息(黄色提示)​ -- console.table():以表格形式输出数组 / 对象(清晰展示结构化数据) - -## 练习 -```html - - - - - -

    查找数组对应字母

    - -
    - - - -

    注册验证

    - 用户名:
    - 密码:
    - - - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251128-js\350\241\250\345\215\225\344\272\213\344\273\266\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\344\275\225\347\220\263/20251128-js\350\241\250\345\215\225\344\272\213\344\273\266\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index b57dcc16737301d58bc2c4b7353015d9fc4e13f1..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251128-js\350\241\250\345\215\225\344\272\213\344\273\266\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,164 +0,0 @@ -## 一、核心表单事件(常用优先) -- submit -- 触发:点击提交按钮( -
    - - - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251204-js\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\346\213\237\347\254\224\350\256\260.md" "b/\344\275\225\347\220\263/20251204-js\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\346\213\237\347\254\224\350\256\260.md" deleted file mode 100644 index 2c1e8d2b36c9c76b71300f2cb6538325170aee80..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251204-js\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\346\213\237\347\254\224\350\256\260.md" +++ /dev/null @@ -1,343 +0,0 @@ -## 文档对象模拟笔记 -- 核心概念:在非浏览器环境(如 Node.js)或测试场景中,模拟document对象的行为,实现 DOM 操作逻辑的兼容 / 测-- 试。 -- 常见场景: -- 服务端渲染(SSR)中模拟 DOM API; -- 单元测试中模拟页面元素交互; -- 非浏览器环境下运行依赖 DOM 的代码。 -- 模拟方式: -- 手动实现:创建对象,模拟getElementById、createElement等核心方法; -- 工具库:使用jsdom(Node.js 中模拟浏览器环境)、domino等库快速生成模拟document。 -- 核心模拟内容: -- 元素选择方法(如querySelector); -- 节点操作方法(如appendChild); -- 事件绑定 / 触发逻辑; -- 文档属性(如title、body)。 - -```html - - - - - - -
    - -
    -
    -        两只老虎,
    -        两只老虎,
    -        跑得快,跑得快
    -    
    - - - -

    最新电影资讯

    -
      - - 输入影片资讯编号: - - - -
      -
      -
        -
      • 白菜
      • -
      • 黄瓜
      • -
      • 香蕉
      • -
      -
      - -
      -
        -
      • 苹果
      • -
      • 橙子
      • -
      • 土豆
      • -
      -
      -
      - - - - - - - - 金庸武侠题 - - - - -
      -
      在《倚天屠龙记》中,张三丰是____派的掌门?
      - - - - -

      - -
      - - - - - - - - 百度 - - - - - -
      - - - - - -一生只爱一个人 -

      - 将粗体改为斜体 - - - 年 - 月 - 日 - - - - - - -
      - - - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251205-jswindow\345\257\271\350\261\241\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\344\275\225\347\220\263/20251205-jswindow\345\257\271\350\261\241\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 8269b5fe1a6693247a3db042571efb8245d124da..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251205-jswindow\345\257\271\350\261\241\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,201 +0,0 @@ -## Window 对象笔记 -- Window 是浏览器全局对象,所有浏览器窗口相关操作都基于它,也是 - - - ECMAScript 的 Global 对象(全局变量 / 函数的宿主)。 -- 1. 核心特性 -- 无需声明可直接使用(全局上下文); -- 所有全局变量 / 函数都是 Window 的属性 / 方法; -- 一个浏览器标签页对应一个 Window 实例。 -- 2. 常用子对象 -- document:操作 DOM(页面文档); -- location:控制 URL(跳转、刷新、获取参数); -- history:操作浏览器历史记录(前进 / 后退); -- screen:获取屏幕尺寸 / 分辨率; -- navigator:获取浏览器 / 设备信息(如 userAgent); -- localStorage/sessionStorage:本地存储。 -- 3. 窗口控制方法 -- open(url, name, params):打开新窗口(指定尺寸 / 位置); -- close():关闭当前 / 指定窗口; -- moveTo(x, y)/moveBy(x, y):移动窗口; -- resizeTo(w, h)/resizeBy(w, h):调整窗口大小; -- focus()/blur():窗口获焦 / 失焦。 -- 4. 弹窗交互 -- alert(msg):警告弹窗(仅确认); -- confirm(msg):确认弹窗(返回布尔值); -- prompt(msg, default):输入弹窗(返回输入值 /null)。 -- 5. 定时器 -- setTimeout(fn, ms):延迟执行(返回定时器 ID); -- setInterval(fn, ms):循环执行(返回定时器 ID); -- clearTimeout(id)/clearInterval(id):清除定时器。 -- 6. 尺寸 / 位置属性 -- innerWidth/innerHeight:视口宽高(不含边框); -- outerWidth/outerHeight:窗口整体宽高; -- screenX/screenY:窗口相对屏幕的坐标; -- scrollX/scrollY:页面滚动偏移量。 -- 7. 页面加载 / 事件 -- onload:页面所有资源加载完成触发; -- onunload:窗口关闭 / 刷新触发; -- addEventListener('resize', fn):监听窗口大小变化; -- addEventListener('scroll', fn):监听页面滚动。 -- 8. 其他常用 -- scrollTo(x, y)/scrollBy(x, y):滚动页面; -- print():触发浏览器打印; -- alert()/console.log():调试输出(console 归 Window); -- encodeURI()/decodeURI():URL 编码解码(全局方法)。 - - - - - -```html - - - - -退出登录 - - -影片详情 - - - - - - - - - - - - - -
      - - -循环图片 - - - - - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251208-js\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\346\213\237\347\254\224\350\256\260.md" "b/\344\275\225\347\220\263/20251208-js\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\346\213\237\347\254\224\350\256\260.md" deleted file mode 100644 index 94d5b36c0d22a9a0a02951a4db1e77127c87337c..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251208-js\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\346\213\237\347\254\224\350\256\260.md" +++ /dev/null @@ -1,14 +0,0 @@ -## 浏览器对象模拟 -- location 对象(URL 信息与跳转):模拟核心属性 href(完整 URL)、protocol(协议)、host(主机 + 端口)、- - -pathname-路径)、search(查询参数)、hash(锚点),核心方法 assign()(跳转)、replace()(替换历史跳转)、reload() - -(刷新),需同步 href 变更与历史记录关联。​ - -- history 对象(浏览历史管理):模拟 length(历史记录条数)、pushState()(添加历史记录)、replaceState()(替换当前 - -- 记录)、go()(前进 / 后退),核心是维护历史状态栈,不触发实际页面刷新。​ - -- navigator 对象(浏览器环境信息):模拟 userAgent(浏览器标识)、language(语言)、platform(系统平台),用于环境 - -- 判断场景的模拟。 \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251210-jsstyle\345\257\271\350\261\241\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\344\275\225\347\220\263/20251210-jsstyle\345\257\271\350\261\241\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 4ede8e46716467236781497a3dc4a4905914a877..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251210-jsstyle\345\257\271\350\261\241\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,132 +0,0 @@ -## Style 对象笔记 - 一、核心概念 -- style 对象是 HTMLElement 节点的内置属性,仅用于操作元素的行- 内样式,不涵盖样式表、继承等来源的样式。 - - 二、基础操作 -1. 设置样式 - - 通过元素.style.样式属性名赋值实现,CSS 带连字符的属性需转换为驼峰命名形式。 -2. 获取样式 -- 仅能获取通过 style 对象设置的行内样式,未通过行内设置的样式无法通过此方式获取。 - -三、关键要点 -- 设置数值型样式(如尺寸、字体大小)时必须附带单位。 -- 如需获取元素最终生效的所有样式,需使用window.getComputedStyle(元素),该方法返回只读的计算样式对象。 -- 将 style 属性值设为空字符串,可清除对应行内样式。 -- cssText 属性支持批量设置或获取行内样式的完整字符串。 -```html - - - - - 张婧仪好美好美好美 - - - 示例图片 - - 图片1 - 图片2 - 图片3 - - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251211-jsform\345\257\271\350\261\241\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\344\275\225\347\220\263/20251211-jsform\345\257\271\350\261\241\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 7e86febfd2bdf34a348b589580b58647224ac485..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251211-jsform\345\257\271\350\261\241\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,168 +0,0 @@ -## Form 对象笔记 -- 1. 核心概念 -- Form 对象对应 HTML 中的
      元素,是 JS 操作表单的核心入口,可通过 document.forms、document.getElementById() 等方式获取。 -- 2. 基本获取方式 -- 通过表单名称:document.forms['表单name属性'] -- 通过索引:document.forms[0](页面第一个表单) -- 通过 ID:document.getElementById('表单id') -- 3. 常用属性 -- action:表单提交的 URL -- method:提交方式(GET/POST) -- elements:表单内所有控件的集合(可通过索引 /name 获取控件) -- enctype:表单数据编码类型(如 - multipart/form-data 用于文件上传) -- 4. 核心方法 -- submit():手动触发表单提交(不会触发 onsubmit 事件) -- reset():重置表单至初始状态 -- 5. 关键事件 -- onsubmit:表单提交前触发,返回 false 可阻止提交(常用于表单验证) -- onreset:表单重置前触发,可阻止重置 -- 6. 操作表单控件 -- 通过 form.elements.控件name 获取单个控件(如 input、select) -- 控件常用属性:value(获取 / 设置值)、checked(复选框 / 单选框选中状态)、disabled(禁用状态) -- 7. 注意事项 -- 避免表单控件 name 与 Form 对象属性 / 方法重名(如 name="submit" 会覆盖 submit () 方法) -- 提交前验证优先用 onsubmit 事件,而非仅点击按钮验证 -- GET 提交参数拼接在 URL,POST 放在请求体,文件上传需设置 enctype 且用 POST - - -```html -

      取票系统

      - 请输入您的取票码: - - -

      - - - - -

      请选择课程

      - C语言
      - 机械制图
      - 单片机
      - 自动控制
      - 传感器
      - 高等数学
      - 计算机基础
      - Oracle数据库
      - 商务英语
      - PLC设计基础
      - - -

      电影《变相怪杰》的主演是谁?

      - A.布拉
      - B.亚当
      - C.金
      - D.杰尼
      - - - - -

      请选择你的兴趣爱好

      - 读书
      - 运动
      - 听歌
      - 编程
      - 旅游
      - - - - - -

      请选择所在省市

      - - - - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251212-jsJson-FetchApi\347\254\224\350\256\260.md" "b/\344\275\225\347\220\263/20251212-jsJson-FetchApi\347\254\224\350\256\260.md" deleted file mode 100644 index cc04b41ed4e4199e2b12ed55546a64cf450f3d9f..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251212-jsJson-FetchApi\347\254\224\350\256\260.md" +++ /dev/null @@ -1,20 +0,0 @@ -## JSON & Fetch API 笔记 -一、JSON -- 1. 概念 -- JSON(JavaScript Object Notation)是轻量级的数据交换格式,独立于语言,易读易解析。 -- 2. 核心方法 -- JSON.parse():将 JSON 字符串转换为 JavaScript 对象 / 数组,用于处理后端返回的 JSON 数据。 -- 例:const obj = JSON.parse('{"name":"张三","age":20}'); -- JSON.stringify():将 JavaScript 对象 / 数组转换为 JSON 字符串,用于向后端发送数据。 -- 例:const str = JSON.stringify({name:"张三",age:20}); -- 3. 注意点 -- 键名必须用双引号包裹,不能用单引号或无引号; -- 不能包含函数、undefined 等类型,序列化时会被忽略。 -二、Fetch API -- 1. 概念 -- Fetch API 是现代浏览器提供的异步网络请求接口,替代传统的 XMLHttpRequest,基于 Promise 实现。 -- 3. 关键要点 -- Fetch 的响应(Response 对象)需要手动解析(json ()/text () 等),这是一个异步操作; -- 只有网络错误或请求无法完成时才会触发 catch,HTTP 错误(如 404、500)不会直接触发,需通过response.ok判断; -- 默认不携带 Cookie,若需要则配置credentials: 'include'; -- 支持 AbortController 中断请求 \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251215-js\347\273\203\344\271\240.md" "b/\344\275\225\347\220\263/20251215-js\347\273\203\344\271\240.md" deleted file mode 100644 index 59242d32ef16ce76bf2e9c0d0a55ad324d11dfa1..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251215-js\347\273\203\344\271\240.md" +++ /dev/null @@ -1,58 +0,0 @@ -```html - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251217-jsjQuery1.md" "b/\344\275\225\347\220\263/20251217-jsjQuery1.md" deleted file mode 100644 index a676f02df752a7dd77eff251a4f47d78f595c056..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251217-jsjQuery1.md" +++ /dev/null @@ -1,156 +0,0 @@ -## jQuery笔记 -### 一、基础 -- ‌引入‌:通过 CDN 或本地 -‌- 语法‌:$(selector).action() 结构 -‌- 就绪事件‌:$(document).ready(function(){}) 确保 DOM 加载后执行 -### 二、选择器 -- 基本选择器 -- 元素选择器:$("p") 选择所有段落 -- ID 选择器:$("#header") 选择 ID 为 header 的元素 -- 类选择器:$(".btn") 选择所有类名为 btn 的元素 -- 层级选择器 -- 父子关系:$("ul > li") 选择 ul 的直接子 li -- 后代关系:$("div p") 选择 div 内的所有 p -- 过滤选择器 -- 位置过滤::first-child 选择第一个子元素 -- 内容过滤::contains("文本") 选择包含文本的元素 -- 表单过滤::input:enabled 选择启用状态的表单元素 -### 三、DOM 操作 -- 属性操作 -- 获取属性:$("img").attr("alt") -- 设置属性:$("img").attr("src", "new.jpg") -- 内容操作 -- 文本内容:$(".text").text("新内容") -- HTML 内容:$(".box").html("HTML") -- CSS 操作 -- 行内样式:$("p").css("color", "blue") -- 添加/移除类:.addClass("active") / .removeClass("old") -- 元素操作 -- 创建元素:$("
      ") -- 插入元素: -- .append() 内部追加 -- .after() 外部追加 -- 删除元素:.remove() - -```html - -
      jQuery 已就绪
      -
      123
      -
      23333
      -
      23
      -
      朱惠惠
      -

      项目1

      -

      项目2

      -

      项目3

      -
        -
      • 项1
      • -
      • 项2
      • -
      • 项3
      • -
      • 项4
      • -
      -
      -

      段落 文本1

      -

      段落 文本2

      -
      - - - - - - - - - - - - - -
      第1行
      第2行
      第3行
      第4行
      -
      -
      -
      -
        -
      • 项目1
      • -
      • 项目2
      • -
      - -
      -

      段落1

      -

      段落2

      -

      特殊段落

      -
      - -
      原始盒子
      - -

      段落1

      -

      段落2

      -

      段落3

      - - - - - -``` \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251218-jsjQuery2.md" "b/\344\275\225\347\220\263/20251218-jsjQuery2.md" deleted file mode 100644 index 8aea4a67a33989442a5885da9e78f45877e7c00b..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251218-jsjQuery2.md" +++ /dev/null @@ -1,49 +0,0 @@ -## jQuery动画与事件处理笔记 -### 一、动画效果 -- 1. 基本动画 -‌- 显示/隐藏‌: -- show():显示元素(默认从左向右展开) -- hide():隐藏元素(默认从左向右收起) -- toggle():切换显示/隐藏状态 -- 可接受参数:speed(速度)、easing(缓动效果)、callback(回调函数) -- ‌淡入淡出‌: -- fadeIn():淡入显示(透明度0→1) -- fadeOut():淡出隐藏(透明度1→0) -- fadeToggle():切换淡入/淡出 -- fadeTo():淡入到指定透明度 -- ‌滑动效果‌: -- slideDown():从上向下展开 -- slideUp():从下向上收起 -- slideToggle():切换展开/收起 -- 参数:speed(速度)、easing(缓动效果)、callback(回调函数) -- 2. 自定义动画 -‌- animate()方法‌: -- 通过CSS属性变化创建动画 -- 语法:$("element").animate({styles}, duration, easing, callback); -- 支持属性:width、height、opacity、left、top等 -- 特殊值:+=/-=(相对值)、%(百分比) -- ‌队列控制‌: -- .stop():停止当前动画 -- .delay():延迟后续动画 -- .queue():管理动画队列 -### 二、事件处理 -- 1. 基本事件 -- ‌常用事件‌: -- click():点击事件 -- mouseenter()/mouseleave():鼠标悬停/离开 -- hover():悬停组合事件(mouseenter + mouseleave) -- focus()/blur():表单元素焦点 -- keydown()/keyup():键盘事件 -- submit():表单提交 -- load():资源加载完成 -- ‌事件绑定‌: -- 直接绑定:$("element").on("click", handler); -- 事件对象访问:event参数包含事件信息 -- 2. 事件对象 -- ‌常用属性‌: -- event.target:触发事件的元素 -- event.currentTarget:绑定事件的元素 -- event.pageX/event.pageY:鼠标位置 -- event.keyCode:键盘按键码 -- event.preventDefault():阻止默认行为 -- event.stopPropagation():阻止事件冒泡 \ No newline at end of file diff --git "a/\344\275\225\347\220\263/20251219-js\345\244\215\344\271\240.md" "b/\344\275\225\347\220\263/20251219-js\345\244\215\344\271\240.md" deleted file mode 100644 index a58f9d613fd1746b293a00c2f3ebce7d700d099b..0000000000000000000000000000000000000000 --- "a/\344\275\225\347\220\263/20251219-js\345\244\215\344\271\240.md" +++ /dev/null @@ -1,67 +0,0 @@ -## JavaScript基础梳理笔记 -### 一、数据类型 -‌- 基本类型‌:number、string、boolean、null、undefined、symbol(ES6) -‌- 引用类型‌:object(包括Array、Function、Date等) -### 二、变量声明 -- var:函数作用域,可提升 -- let:块级作用域,不可重复声明 -- const:块级作用域,常量声明 -### 三、运算符 -‌- 算术运算符‌:+、-、*、/、%、++、-- -- ‌比较运算符‌:==(值相等)、===(值和类型相等)、>、<、>=、<= -- ‌逻辑运算符‌:&&(与)、||(或)、!(非) -- ‌赋值运算符‌:=、+=、-=、*=、/=、%=、**=(幂运算) -### 四、控制结构 -‌- 条件语句‌: -- if/else if/else -- switch:多分支选择 -- ‌循环语句‌: -- for:计数循环 -- while/do...while:条件循环 -- break/continue:控制循环流程 -### 五、函数 -‌- 声明方式‌: -- 函数声明:function name(){} -- 函数表达式:const func = function(){} -- 箭头函数:const arrow = () => {} -‌- 参数‌: -- 默认参数:function func(a=1, b=2){} -- 剩余参数:function sum(...args){} -- ‌返回值‌:return语句 -### 六、对象 -‌- 创建方式‌: -- 字面量:let obj = {key:value} -- 构造函数:let obj = new Object() -### 七、数组 -‌- 创建‌:let arr = [1,2,3] -‌- 操作‌: -- 访问:arr[index] -- 添加:push()、unshift() -- 删除:pop()、shift() -- 遍历:for...of、forEach() -- ‌方法‌:map()、filter()、reduce()(高阶函数) -### 八、作用域 -- ‌全局作用域‌:在函数外声明 -- ‌函数作用域‌:var声明 -- ‌块级作用域‌:let/const声明 -‌- 闭包‌:函数访问外部变量 -### 九、原型与继承 -‌- 原型链‌:对象继承属性和方法 -‌- 构造函数‌:prototype属性 -### 十、异步编程 -‌- 回调函数‌:异步操作完成时调用 -‌- Promise‌:状态(pending、fulfilled、rejected) -‌- async/await‌:基于Promise的语法糖 -### 十一、错误处理 -‌- try...catch‌:捕获异常 -‌- throw‌:抛出错误 -‌- Error对象‌:标准错误类型 -### 十二、DOM操作 -‌- 选择器‌:document.querySelector()、document.getElementById() -‌- 属性操作‌:element.setAttribute()、element.getAttribute() -‌- 事件监听‌:element.addEventListener() -‌- 节点操作‌:appendChild()、removeChild() -### 十四、事件模型 -‌- 事件流‌:捕获阶段、目标阶段、冒泡阶段 -‌- 事件对象‌:event.target、event.preventDefault() -- ‌事件委托‌:利用事件冒泡机制 \ No newline at end of file diff --git "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071111-1.png" "b/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071111-1.png" deleted file mode 100644 index 5187ba8617f57888296d34b60a4ccc3a704b1aa0..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071111-1.png" and /dev/null differ diff --git "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071111-2.png" "b/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071111-2.png" deleted file mode 100644 index 59950134653bac8a449f9707bcb689568dc0b574..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071111-2.png" and /dev/null differ diff --git "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071112.png" "b/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071112.png" deleted file mode 100644 index 4ffee9a4b8964aa16eecf5d8d3017ea842ed987a..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071112.png" and /dev/null differ diff --git "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-1.png" "b/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-1.png" deleted file mode 100644 index 59b572f1c71c8b200e7ed250be32a180e692f36d..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-1.png" and /dev/null differ diff --git "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-2.png" "b/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-2.png" deleted file mode 100644 index f889ae1d00a187c94bdc290ac8827c7ba93823ac..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-2.png" and /dev/null differ diff --git "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-3.png" "b/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-3.png" deleted file mode 100644 index 29d1c91496a6f46803d95d94b547a6fb83cc1643..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-3.png" and /dev/null differ diff --git "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-4.png" "b/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-4.png" deleted file mode 100644 index d2e4bc023349169a18ea2bc13f7257d185f8160b..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071113-4.png" and /dev/null differ diff --git "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071114.png" "b/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071114.png" deleted file mode 100644 index 0b13ec7db6839b938b5370e49453f8030b441bc1..0000000000000000000000000000000000000000 Binary files "a/\344\275\225\347\220\263/\345\233\276\347\211\207img/\345\233\276\347\211\2071114.png" and /dev/null differ diff --git "a/\345\206\211\345\275\254\347\222\220/20251110-\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251110-\347\254\224\350\256\260.md" deleted file mode 100644 index f04e8d7b86fc79c25e08648b3733fe04c4ff91f2..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251110-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,59 +0,0 @@ -## 笔记 - - **核心作用**: - - - 动态修改网页内容(HTML/CSS) - - - 处理用户交互(点击、输入等) - - - 发送网络请求(AJAX/fetch) - - - 操作浏览器存储(Cookie、LocalStorage) - - 2. 运行环境 - - - 浏览器端:嵌入 HTML 中执行,每个浏览器都有 JavaScript 引擎(如 Chrome 的 V8 引擎)。 - - - 服务器端:通过 Node.js 运行,脱离浏览器独立执行。 - - - - - - - -## 作业 -1. - -``` - -``` - -2. - -- html文件 - -``` - - - - - 显示明日学院官网 - - - - - - -``` - -- 外部JavaScript文件(showUrl.js) - -``` -// 弹出对话框显示官网地址(alert() 是浏览器内置弹窗方法) -alert("明日学院官网地址:http://www.mingrisoft.com"); -``` - - diff --git "a/\345\206\211\345\275\254\347\222\220/20251112-\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251112-\347\254\224\350\256\260.md" deleted file mode 100644 index 2298c4485a6ee2f06cd044ef3c8c83dbda56238c..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251112-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,154 +0,0 @@ -## 笔记 - -**一、声明方式 ** - -3 种声明方式: - -```javascript -let a = 10; -let b = 20; -``` - -命名规则:字母、数字、_、$ 组成,不能以数字开头,区分大小写,避免关键字(let、var、if 等) - -二、**运算符** - -- 算术运算符:+、-、*、/、%(取余)、++(自增)、--(自减) - -- 赋值运算符:=、+=、-=、*=、/= - -- 比较运算符:==(值相等)、===(值和类型都相等,推荐)、>、<、>=、<= - -- 逻辑运算符:&&(与)、||(或)、!(非) - -- 三元运算符:条件 ? 表达式1 : 表达式2(简洁的 if-else) - -(2)基本数据类型 - -| 类型 | 描述 | 示例 | -| :-------: | --------------------- | -------------- | -| Number | 数字(整数 / 浮点数 | 123、3.14、NaN | -| String | 字符串(单 / 双引号) | 'hello'、"JS" | -| Boolean | 布尔值(真 / 假) | true、false | -| Undefined | 未定义(声明未赋值) | let x; | -| Null | 空值(主动赋值为空) | let y = null; | -| Symbol | 唯一标识(ES6+) | Symbol('id') | - -**三、转义字符** - -#### 常用转义字符列表 - -| 转义字符 | 描述 | 示例 | 输出结果 | -| -------- | ----------------- | -------------------------------- | --------------------------- | -| `\'` | 单引号 | `console.log('It\'s a cat')` | `It's a cat` | -| `\"` | 双引号 | `console.log("He said \"Hi\"")` | `He said "Hi"` | -| `\\` | 反斜杠本身 | `console.log("Path: C:\\Users")` | `Path: C:\Users` | -| `\n` | 换行符(LF) | `console.log("Line 1\nLine 2")` | Line 1Line 2 | -| `\r` | 回车符(CR) | `console.log("Hello\rWorld")` | `World`(覆盖前半部分) | -| `\t` | 水平制表符(Tab) | `console.log("Name:\tTom")` | `Name: Tom` | -| `\b` | 退格符 | `console.log("abc\bd")` | `abd`(删除前一个字符 `c`) | -| `\f` | 换页符 | 较少使用,用于分页场景 | | -| `\v` | 垂直制表符 | 较少使用,用于垂直对齐 | | - -## 作业 - - -1. - -```javascript - document.write('珠穆朗玛峰的高度≈8848.86m
      '); -``` - -2. - -```javascript -p>文件夹demo路径:

      - -``` - - - -3. - -```javascript - let area = 17100000 + 'km' + '\u00B2'; - document.write(`俄罗斯的国土面积 ≈ ${area}`); -``` - -4. - -```javascript -

      个人信息:

      - -``` - - - - - -综合练习1 - -```javascript - -``` - - - -综合练习2 - -```javascript - -``` - -综合练习3 - -```javascript - -``` - diff --git "a/\345\206\211\345\275\254\347\222\220/20251113\344\275\234\344\270\232.md" "b/\345\206\211\345\275\254\347\222\220/20251113\344\275\234\344\270\232.md" deleted file mode 100644 index fdf8ca6ea0bc5d8efbe9ca7ebfd8c46d64c95547..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251113\344\275\234\344\270\232.md" +++ /dev/null @@ -1,446 +0,0 @@ -## 笔记 - -# JavaScript 核心子知识点笔记:typeof、数据类型转换、表达式 - -## 一、typeof 语法与使用规则 - -### 1. 核心作用 - -判断变量 / 值的数据类型,返回一个 **字符串**(表示类型名称),是前端调试和类型判断的基础工具。 - -### 2. 语法格式 - -```javascript -// 语法1:判断变量 -typeof 变量名; - -// 语法2:判断直接值(字面量) -typeof 直接值; -``` - -### 3. 完整返回值对照表(含特殊情况) - -| 被判断的值 / 变量 | typeof 返回结果(字符串) | 说明 | -| ----------------- | ------------------------- | ---------------------------------- | -| 字符串(String) | `"string"` | 含单引号、双引号、模板字符串 | -| 数字(Number) | `"number"` | 整数、小数、`NaN`、`Infinity` | -| 布尔值(Boolean) | `"boolean"` | 仅 `true`/`false` | -| undefined | `"undefined"` | 变量声明未赋值或直接写 `undefined` | -| null | `"object"` | 历史遗留 bug(重点注意!) | -| 对象(Object) | `"object"` | 普通对象、数组、日期对象等 | -| 数组(Array) | `"object"` | 数组本质是 “类对象” 结构 | -| 函数(Function) | `"function"` | 唯一能被 typeof 区分的对象子类型 | -| Symbol | `"symbol"` | ES6+ 唯一标识类型 | -| BigInt | `"bigint"` | ES10+ 大整数类型 | - -### 4. 实用示例(含易错点) - -```javascript -// 1. 基本类型判断(正常情况) -typeof "abc"; // "string" -typeof 123; // "number" -typeof NaN; // "number"(NaN 是“非数字的数字类型”) -typeof true; // "boolean" -typeof undefined; // "undefined" -let x; -typeof x; // "undefined"(变量声明未赋值) - -// 2. 特殊情况(重点记) -typeof null; // "object"(bug,需单独判断 null) -typeof []; // "object"(数组需用 Array.isArray() 判断) -typeof {}; // "object" -typeof function() {}; // "function"(唯一例外的对象类型) - -// 3. 正确判断 null 和数组(补充方法) -let a = null; -a === null; // true(判断 null 必须用 ===) - -let b = [1,2,3]; -Array.isArray(b); // true(专门判断数组的方法) -``` - -### 5. 注意事项 - -- typeof 是 **运算符**,不是函数,无需加括号(`typeof(x)` 也能运行,但非必需)。 - -- 无法区分 `null`、普通对象、数组(需配合其他方法,如 `=== null`、`Array.isArray()`)。 - -- 对未声明的变量使用 typeof 不会报错,返回"undefined"(特殊特性): - - ```javascript - typeof unDeclaredVar; // "undefined"(未声明变量,不报错) - // unDeclaredVar; // 直接访问会报错:ReferenceError - ``` - -## 二、数据类型转换规则(核心重点) - -JS 是弱类型语言,变量类型会**自动转换**(隐式转换),也可通过方法**手动转换**(显式转换),转换核心围绕 “基本类型之间的转换”。 - -### 1. 显式转换(主动控制,推荐使用) - -手动调用内置方法转换,结果可预期,避免隐式转换的陷阱。 - -#### (1)转换为字符串(String) - -| 转换方法 | 示例 | 结果 | -| ---------------- | --------------------------- | ------------- | -| String (值) | String(123)、String(true) | "123"、"true" | -| 变量.toString () | let num=456; num.toString() | "456" | - -- 注意:undefined和null不能用toString()(会报错),需用String(): - - ```javascript - String(undefined); // "undefined" - String(null); // "null" - // undefined.toString(); // 报错:TypeError - ``` - -#### (2)转换为数字(Number) - -| 转换方法 | 示例 | 结果 | -| ----------------------- | --------------------------------------- | -------------------- | -| Number (值) | Number("123")、Number("123abc") | 123、NaN | -| parseInt (字符串,进制) | parseInt("123")、parseInt("123.45") | 123、123(只取整数) | -| parseFloat (字符串) | parseFloat("123.45")、parseFloat("abc") | 123.45、NaN | - -- 关键规则: - - - 字符串纯数字(含正负号、小数点)→ 正常转换(如 `"123.45"` → 123.45)。 - - 字符串含非数字字符 → 转换为 `NaN`(如 `"123abc"` → NaN)。 - - 空字符串 `""`、空格字符串 `" "` → 0(`Number("")` → 0)。 - - `true` → 1,`false` → 0;`undefined` → NaN;`null` → 0。 - -- 示例: - - ```javascript - Number("100"); // 100 - Number("100.5"); // 100.5 - Number("100a"); // NaN - Number(""); // 0 - Number(null); // 0 - Number(undefined); // NaN - - parseInt("123.89"); // 123(忽略小数部分) - parseInt("abc123"); // NaN(非数字开头) - parseFloat("3.1415"); // 3.1415 - ``` - -#### (3)转换为布尔值(Boolean) - -| 转换方法 | 示例 | 结果 | -| ------------ | -------------------------- | ----------- | -| Boolean (值) | Boolean(0)、Boolean("abc") | false、true | - -- 核心规则: - - 只有 6 个值转换为 false( falsy 值),其余全为 true: - - - falsy 值:`0`、`NaN`、`""`(空字符串)、`undefined`、`null`、`false`。 - - - 示例: - - ```javascript - Boolean(0); // false - Boolean(""); // false - Boolean(NaN); // false - Boolean(null); // false - Boolean(undefined); // false - Boolean(" "); // true(空格字符串非空) - Boolean(123); // true - Boolean({}); // true(对象/数组转换为布尔值都是 true) - Boolean([]); // true - ``` - -### 2. 隐式转换(自动触发,需避坑) - -JS 在特定场景下自动转换类型,常见触发场景: - -#### (1)算术运算(`+`、`-`、`*`、`/`、`%`) - -- 规则:除 `+` 外,其他运算符会自动将操作数转为数字。 - -- `+` 运算符:只要有一个操作数是字符串,就会触发**字符串拼接**;否则转为数字相加。 - -- 示例: - - ```javascript - // 非 + 运算符:转为数字运算 - 10 - "5"; // 5("5" → 5) - "12" * 3; // 36("12" → 12) - "10" / "2"; // 5 - "abc" - 2; // NaN("abc" → NaN,NaN 参与运算结果还是 NaN) - - // + 运算符:字符串拼接 vs 数字相加 - "10" + 20; // "1020"(有字符串,拼接) - 10 + true; // 11(true → 1,数字相加) - 10 + null; // 10(null → 0,数字相加) - 10 + undefined; // NaN(undefined → NaN) - ``` - -#### (2)比较运算(`==`、`>`、`<` 等) - -- 规则: - - - `==`(非全等):会先自动转换类型,再比较值(尽量不用,优先用 `===`)。 - - `>`、`<`:会将操作数转为数字再比较。 - -- 示例: - - ```javascript - // == 隐式转换 - 10 == "10"; // true("10" → 10) - 0 == ""; // true("" → 0) - false == 0; // true(false → 0) - null == undefined; // true(特殊规则,无类型转换) - NaN == NaN; // false(NaN 不等于任何值,包括自己) - - // >、< 转换为数字 - "20" > 15; // true("20" → 20) - "abc" > 10; // false("abc" → NaN,NaN 与任何值比较都是 false) - ``` - -#### (3)逻辑运算(`&&`、`||`、`!`) - -- 规则:`!`(非运算)会先将操作数转为布尔值,再取反;`&&`、`||` 会判断操作数的 “真值 / 假值”,返回原始值(而非布尔值)。 - -- 示例: - - ```javascript - !""; // true("" → false,取反为 true) - !0; // true - !"abc"; // false("abc" → true,取反为 false) - - // &&:找第一个假值,无则返回最后一个真值 - "" && "hello"; // ""(第一个假值) - 10 && 20; // 20(无假值,返回最后一个) - - // ||:找第一个真值,无则返回最后一个假值 - "" || "hello"; // "hello"(第一个真值) - 0 || null; // null(无真值,返回最后一个) - ``` - -### 3. 转换总结 - -- 优先使用**显式转换**(`String()`、`Number()`、`Boolean()`),代码更易读。 -- 避免使用 `==`,用 `===`(全等)判断(不转换类型,直接比较值和类型)。 -- 记住 6 个 falsy 值,避免隐式转换踩坑。 - -## 三、表达式(代码执行的基本单元) - -### 1. 定义 - -由**操作数**(变量、字面量、函数调用等)和**运算符**组成的代码片段,最终会计算出一个**结果**(值)。 - -### 2. 表达式分类(按功能) - -#### (1)算术表达式(结果为数字) - -由算术运算符组成,用于计算数值。 - -```javascript -10 + 20 * 3; // 70(先乘后加,遵循运算符优先级) -(10 + 20) * 3; // 90(括号改变优先级) -100 / 25; // 4 -5 % 2; // 1(取余) -``` - -#### (2)字符串表达式(结果为字符串) - -由字符串拼接运算符 `+` 组成。 - -```javascript -"Hello" + " " + "World"; // "Hello World" -let name = "张三"; -"你好," + name; // "你好,张三" -``` - -#### (3)比较表达式(结果为布尔值) - -由比较运算符组成,用于判断条件。 - -```javascript -10 > 5; // true -"123" === 123; // false(类型不同) -age >= 18; // 取决于 age 的值(true/false) -``` - -#### (4)逻辑表达式(结果为真值 / 假值的原始值) - -由逻辑运算符组成,用于组合条件。 - -```javascript -true && false; // false -10 > 5 || 3 > 10; // true -!(age < 18); // 对 age < 18 的结果取反 -``` - -#### (5)赋值表达式(结果为赋值后的值) - -由赋值运算符组成,用于给变量赋值(可链式赋值)。 - -```javascript -let a = 10; // 表达式结果为 10,变量 a 被赋值为 10 -let b = c = 20; // 链式赋值,先给 c 赋 20,再给 b 赋 20,结果为 20 -let x = 5 + 3; // 先计算 5+3=8,再赋值给 x,表达式结果为 8 -``` - -#### (6)函数调用表达式(结果为函数的返回值) - -调用函数时组成的表达式,结果是函数的返回值(无 return 则为 undefined)。 - -```javascript -function add(a, b) { - return a + b; -} -add(10, 20); // 30(表达式结果为 30) -console.log("Hello"); // undefined(console.log 无返回值) -``` - -### 3. 表达式与语句的区别(关键) - -| 特性 | 表达式 | 语句 | -| ------------ | ------------------------- | ------------------------------- | -| 核心功能 | 计算结果 | 执行操作(如声明、循环、判断) | -| 是否有返回值 | 有(必须算出一个值) | 无(或返回 undefined) | -| 示例 | `1+2`、`a=10`、`add(3,4)` | `let a;`、`if(...)`、`for(...)` | - -- 注意:赋值表达式(`a=10`)是表达式(有返回值 10),而变量声明(`let a=10`)是语句(无返回值)。 - -### 4. 运算符优先级(简化版,需牢记) - -表达式中运算符的执行顺序(优先级高的先执行,同优先级从左到右): - -1. 括号 `()` → 最高优先级(优先计算括号内的内容)。 -2. 一元运算符:`!`(非)、`++`(自增)、`--`(自减)、`typeof`。 -3. 算术运算符:`*`(乘)、`/`(除)、`%`(取余) → 高于 `+`(加)、`-`(减)。 -4. 比较运算符:`>`、`<`、`>=`、`<=` → 高于 `==`、`===`、`!=`、`!==`。 -5. 逻辑运算符:`&&`(与) → 高于 `||`(或)。 -6. 赋值运算符:`=`、`+=`、`-=` 等 → 最低优先级。 - - - - -## 四、核心易错点总结 - -1. `typeof null` 返回 `"object"`,需用 `=== null` 单独判断。 -2. `NaN` 不等于任何值(包括自己),判断是否为 NaN 需用 `isNaN(值)` 或 `Number.isNaN(值)`(后者更严格)。 -3. 隐式转换中,`+` 既可能是数字相加,也可能是字符串拼接,需注意操作数类型。 -4. 表达式有返回值,语句无返回值,避免混淆(如 `a=10` 是表达式,`let a=10` 是语句)。 -5. 优先级:括号 > 一元运算符 > 算术 > 比较 > 逻辑 > 赋值。 - - - -## 作业: - -```javascript - -``` - - -```javascript - -``` - - - -```javascript - -``` - - - -例.3.10 - -```javascript - -``` - - - -综合练习1 - -```javascript - -``` - -综合练习2 - -```html - let year; - let month; - document.write('请选择您的出生年月:'); - document.write(''); - document.write(''); -``` - -综合练习3 - -```javascript -let row; - document.write(''); - document.write(''); - for (row = 1; row <= 100; row++) { - if (row % 10 == 0) { - document.write(``); - document.writeln("") - } - else{ - document.write(``); - } - } - document.write(''); - document.write('
      ${row}
      ${row}
      '); -``` - diff --git "a/\345\206\211\345\275\254\347\222\220/20251114-\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251114-\347\254\224\350\256\260.md" deleted file mode 100644 index 3addee92b5e67c64b63f3994b23453afd1391d65..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251114-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,137 +0,0 @@ - -```javascript - let API = '1000'; - - let numAPI = Number(API); - -switch (true) { - case (numAPI >= 0 && numAPI <= 100): - console.log("空气质量良好"); - break; - - case (numAPI >= 101 && numAPI <= 200): - console.log("空气质量轻度污染"); - break; - - case (numAPI >= 201 && numAPI <= 300): - console.log("空气质量中度污染"); - break; - - case (numAPI >= 301): - console.log("空气质量重度污染"); - break; - - default: - console.log("无效的API值"); -} - - - -```javascript - let month = 5; - - let season; - - switch(month) { - case 12: case 1: case 2: - season = "冬季"; - break; - case 3: case 4: case 5: - season = "春季"; - break; - case 6: case 7: case 8: - season = "夏季"; - break; - case 9: case 10: case 11: - season = "秋季"; - break; - default: - season = "无效月份"; -} - - console.log(`${month}月属于${season}`); -``` - - - -```javascript - - -``` - - - -```javascript - - -``` - - - -```javascript - - - - -```javascript - - -``` - diff --git "a/\345\206\211\345\275\254\347\222\220/20251117-\345\207\275\346\225\260.md" "b/\345\206\211\345\275\254\347\222\220/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index e93aa6a1074e7a7ac0adbb39623c88559531ddcb..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,126 +0,0 @@ -## 笔记 - -# 函数的定义 -- 在JavaScript中,函数是由关键字function、函数名加一组参数以及置于花括号中需要执行的一段代码定义的 -``` -function functionName([parameter1,parameter2,...]){ - statements; - [return expression;] -} -``` - -1. 形参跟实参 - -- 形参是在函数定义时列出的变量,作为函数预期接收输入的占位符。在函数未被调用时,形参不占用存储单元,只有在函数调用时才会分配内存,调用结束后自动释放 - -- 实参是在函数调用时传递给函数的实际值,用于替换形参并执行函数。实参可以是常量、变量、表达式或函数返回值,但要求有确定的值。 - - - -2. 函数的定义 - -- 第一种:传统、原始方式 - -```html - - - -``` - -- 第二种:匿名函数定义 - -```html - - - -``` - -- 第三种:箭头函数 - -```html - - - -``` - - -3. argunmet:其length属性用获取实际传入的参数个数 - -```html - - - -``` - -4. 返回值 - -- 有return,则有返回值,而且通常不为underfined -- 无return,总是私下返回一个underfined -- 函数可以返回函数 - -```html - - - -``` - - -P61训练一 -``` - -``` - -P61训练二 -``` - -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251119-\345\207\275\346\225\260.md" "b/\345\206\211\345\275\254\347\222\220/20251119-\345\207\275\346\225\260.md" deleted file mode 100644 index e8164f234937a6be7025f5ddb53a90b2db27eb38..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251119-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,351 +0,0 @@ -## 函数的嵌套 -- 在一个函数的函数体中对另一个函数进行调用。下列就是在函数b( )中对函数a( )进行调用: -``` - -``` - -## 递归函数 -- 函数在自身的函数体内调用自身。只在特定情况下使用,如处理阶乘问题 -- 注意:处理不当会使程序陷入死循环 - - -## js中的内置函数 - -函数 | 描述 | -:---: | :---: | -parseInt() | 将字符型转换为整型 | -parseFolat() | 将字符型转换为浮点型 | -isNaN() | 判断一个数值是否为NaN | -isFinite() | 判断一个数值是否有限 | -eval | 求字符串中表达式的值 | -encodeURL | 将URL字符串进行编码 | -decodeURL | 对已编码的URL字符串进行解码 | - - -## 匿名函数 -- 没有名字的函数表达式 - - -## 对象:属性和方法 -- 对象是键值对的集合,用于描述现实世界中的事物 - -### 操作对象 -- 访问属性——两种方法 -1.对象名.属性名 2.对象名[属性名] -- 添加属性 -- 删除属性 -- 添加方法 -- 遍历对象 - - - - -## 作业 - -斐波那契数列: - -```html - - - -``` - -### 训练 - - -3. - -```html - - - -``` - - -4. - -```html - - - -``` - - -6. - -```html - - - -``` - -7. - - -```html - - - -``` - -8. - -```html - - - -``` - -### 综合训练 - -1. - -```html - - - -``` - -3. - - - -```html - - - -``` - - - - - - - - - - - - - - - - - - diff --git "a/\345\206\211\345\275\254\347\222\220/20251120-\345\206\205\351\203\250\357\274\214Math\357\274\214Dete.md" "b/\345\206\211\345\275\254\347\222\220/20251120-\345\206\205\351\203\250\357\274\214Math\357\274\214Dete.md" deleted file mode 100644 index fa60293b1bce3ca4fa05bbbe94e2b969854df138..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251120-\345\206\205\351\203\250\357\274\214Math\357\274\214Dete.md" +++ /dev/null @@ -1,162 +0,0 @@ -## 笔记 - -1. 操作对象 - -- 访问属性:对象名[属性名] - - -- 添加属性 - -```html - - - -``` - -- 删除属性:delete goods.number; - -- 添加方法 - -2. 遍历对象 - -- 语句:for...in -- 此循环语句用于遍历对象 - - -3. Math对象 - -- 提供大量的数学函数和数学常量 - - -4. Date对象 - -- 实现对日期跟时间的控制 -- 获取本地时间的月份时,通常会少一个月,记得+1 - -- 创建Date - -```html - - - -``` - - -## 作业 - -### 练习 - - -1. - -```html - - - -``` - - -2. - -```html - - - -``` - - -3. - -```html - - - -``` - -### 综合题 - - -1. - -```html - - - -``` - - -2. - -```html - - let date1 = new Date('1996-06-09'); - let date2 = new Date(); - - let timesDiff = date2.getTime() - date1.getTime(); - - let daysDiff = timesDiff / 86400000; - - document.write('周星星距离出生到现在已经过了:
      ') - - document.write( - `${Math.floor(daysDiff)}天${Math.floor( - (daysDiff % 1) * 24 - )}小时${Math.floor((((daysDiff % 1) * 24) % 1) * 60)}分钟${Math.floor( - (((((daysDiff % 1) * 24) % 1) * 60) % 1) * 60 - )}秒` - ); - -``` - diff --git "a/\345\206\211\345\275\254\347\222\220/20251121-Event\344\272\213\344\273\266.md" "b/\345\206\211\345\275\254\347\222\220/20251121-Event\344\272\213\344\273\266.md" deleted file mode 100644 index 8bb1428ddade6a24174b71d374a1d0ef1390dde7..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251121-Event\344\272\213\344\273\266.md" +++ /dev/null @@ -1,126 +0,0 @@ -# JavaScript 事件系统 - 精简笔记 - -## 基本概念 -事件是发生在HTML元素上的"事情",如点击、输入、加载等。 - -## 三种事件处理方式 - -### 1. HTML属性(不推荐) -```html - -``` - -### 2. DOM属性 -```javascript -btn.onclick = function() { - console.log('点击'); -}; -``` - -### 3. 事件监听器(推荐) -```javascript -// 添加 -element.addEventListener('click', function(event) { - console.log('点击事件'); -}); - -// 移除 -element.removeEventListener('click', handler); -``` - -## 事件对象常用属性和方法 -```javascript -element.addEventListener('click', function(event) { - event.target; // 触发事件的元素 - event.currentTarget; // 绑定事件的元素 - event.type; // 事件类型 - event.preventDefault(); // 阻止默认行为 - event.stopPropagation(); // 阻止事件传播 -}); -``` - -## 事件传播三个阶段 -1. **捕获阶段**:从window向下到目标元素 -2. **目标阶段**:到达目标元素 -3. **冒泡阶段**:从目标元素向上到window - -```javascript -// 捕获阶段(第三个参数为true) -element.addEventListener('click', handler, true); - -// 冒泡阶段(默认) -element.addEventListener('click', handler); -``` - -## 常用事件类型 - -### 鼠标事件 -- `click` - 点击 -- `dblclick` - 双击 -- `mouseenter/mouseleave` - 鼠标进入/离开 -- `mousemove` - 鼠标移动 - -### 键盘事件 -- `keydown` - 按键按下 -- `keyup` - 按键释放 - -### 表单事件 -- `submit` - 表单提交 -- `change` - 值改变 -- `input` - 输入时实时触发 -- `focus/blur` - 获得/失去焦点 - -### 窗口事件 -- `load` - 页面加载完成 -- `resize` - 窗口大小改变 -- `scroll` - 页面滚动 - -## 事件委托(重要) -利用事件冒泡,在父元素处理子元素事件: - -```javascript -// 传统方式(低效) -document.querySelectorAll('.item').forEach(item => { - item.addEventListener('click', handler); -}); - -// 事件委托(高效) -document.getElementById('list').addEventListener('click', function(e) { - if (e.target.classList.contains('item')) { - // 处理点击事件 - } -}); -``` - -## 最佳实践 - -1. **优先使用事件委托** - 提高性能,支持动态内容 -2. **合理阻止默认行为** - `event.preventDefault()` -3. **必要时阻止传播** - `event.stopPropagation()` -4. **及时移除监听器** - 避免内存泄漏 - -## 简单示例 -```javascript -// 点击按钮改变颜色 -document.getElementById('myBtn').addEventListener('click', function() { - this.style.backgroundColor = 'red'; -}); - -// 表单提交阻止默认行为 -document.getElementById('myForm').addEventListener('submit', function(e) { - e.preventDefault(); - console.log('表单提交被阻止'); -}); -``` - -记住核心:**事件监听器 > 事件委托 > 合理使用事件对象方法 - - - -# 数组 - - 可以把数组看作一张单行表格,该表格的每一个单元格都可以储存一个数据,而且各单元格中储存的数据类型可以不同。这些单元格被称为数组元素,每个数组元素都要有一个索引号,可以方便的引用数组元素。 -- 数组是js中唯一用来储存和操作有序数据的数据结构 - -``` - -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251124-\344\275\234\344\270\232.md" "b/\345\206\211\345\275\254\347\222\220/20251124-\344\275\234\344\270\232.md" deleted file mode 100644 index 8866d1f0e48061178fad567164dbdc9aecb218b2..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251124-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,123 +0,0 @@ -# 数组 - -## 数组对象的方法及其说明 - - 方法 | 说明 - :---: | :---: - concat() | 连接两个或更多的数组,并返回结果 - pop() | 删除并返回数组中的最后一个元素 - push() | 向数组的尾部添加一个或多个元素,并返回新的长度 - shift() | 删除并返回数组中的第一个元素 - splice() | 删除元素,并向数组中添加新元素 - unshift() |向数组的头部添加一个或多个元素,并返回新的长度 - reverse() |颠倒数组中元素的顺序 - sort() |对数组中的元素进行排序 - slice() |从某个已有的数组中返回选定的元素 - toSource() |代表对象的源代码 - toString() |把数组转换为字符串,并返回结果 - toLocaleString() |把数组转换为本地字符串,并返回结果 - join() |把数组中的所有元素放入一个字符串,元素间通过指定的分隔符进行分隔 - valueOf() |返回数组对象的原始值 - - -P104:1 -``` - -``` - -P104:2 -``` - -``` - -P104:3 -``` - -``` - -P116:1 -``` - -``` - -P116:2 -``` - -

      2022年国内手机销量排行榜(前五名)

      -
      - - - -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\345\206\211\345\275\254\347\222\220/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index b02a9856871c2d2c43663f5210658b0561e98539..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,124 +0,0 @@ -# 正则表达式 - -## 元字符 -- `.` - 匹配任意单个字符(除换行符) -- `\d` - 匹配数字,等价于 `[0-9]` -- `\w` - 匹配字母、数字、下划线 -- `\s` - 匹配空白字符(空格、制表符等) -- `\D`、`\W`、`\S` - 匹配对应的非字符 - -## 量词 -- `*` - 0次或多次 -- `+` - 1次或多次 -- `?` - 0次或1次 -- `{n}` - 恰好n次 -- `{n,}` - 至少n次 -- `{n,m}` - n到m次 - -## 字符类 -- `[abc]` - 匹配a、b或c中的任意一个 -- `[a-z]` - 匹配a到z的任意小写字母 -- `[^abc]` - 匹配除了a、b、c之外的任意字符 - -## 锚点 -- `^` - 匹配字符串开始 -- `$` - 匹配字符串结束 -- `\b` - 匹配单词边界 - -## 分组和捕获 -- `()` - 创建捕获组 -- `(?:)` - 非捕获组 -- `|` - 或操作,如 `a|b` 匹配a或b - -## 转义 -- `\` - 转义特殊字符,如 `\.` 匹配实际的点号 - -## 常用示例 -- 邮箱:`\w+@\w+\.\w+` -- 手机号:`1\d{10}` -- 中文:`[\u4e00-\u9fa5]` -- 空白行:`^\s*$` - -## 修饰符 -- `i` - 忽略大小写 -- `g` - 全局匹配 -- `m` - 多行模式 - -P127:1 -``` - -``` - -P127:2 -``` - -``` - -P127:3 -``` - -``` - -P128:1 -``` - - -``` - -P128:2 -``` - -``` - -P128:3 -``` - -``` diff --git "a/\345\206\211\345\275\254\347\222\220/20251127-\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251127-\347\254\224\350\256\260.md" deleted file mode 100644 index 9a7718b7991d0a64deb7caf97b631755d8a52d0a..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251127-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,46 +0,0 @@ -# 事件处理 -``` -基本结构 -try { - // 可能发生异常的代码(核心执行逻辑) -} catch (error) { - // 异常发生时执行(捕获错误,处理异常) -} finally { - // 无论是否发生异常,都会执行(可选,用于清理资源) -} -``` - - - - -P155:1 -``` - - -``` - -P155:2 -``` - - -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251128-\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251128-\347\254\224\350\256\260.md" deleted file mode 100644 index 9ef85227aaee3893d54e450d0f7e2be6c5a988ad..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251128-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,189 +0,0 @@ -## -- DOM 属性绑定 -```通过DOM元素属性赋值,简单但不支持多处理器: - -const btn = document.querySelector('button'); -btn.onclick = function() { - console.log('点击事件触发'); -}; -// 覆盖前一个事件 -btn.onclick = () => console.log('新的点击事件'); -``` - -### 常见事件类型 -1. 鼠标事件 -- click:点击(左键) -- dblclick:双击 -- mousedown/mouseup:鼠标按下/松开 -- mouseover/mouseout:鼠标移入/移出(含子元素) -- mouseenter/mouseleave:鼠标移入/移出(不含子元素,无冒泡) -2. 键盘事件 -- keydown/keyup:键盘按下/松开 -- keypress:字符键按下(已废弃) -3. 表单事件 -- submit:表单提交 -- change:表单元素值改变(失焦后触发) -- input:输入实时触发 -- focus/blur:获取/失去焦点 -4. 文档/窗口事件 -- load:页面/资源加载完成 -- DOMContentLoaded:DOM解析完成(无需等待资源) -- resize:窗口大小改变 -- scroll:页面滚动 - - - -P183:1 -``` - -``` - -P183:2 -``` - - -``` - -P185:3 -``` - -``` - -P185:4 -``` -

      调整浏览器窗口大小

      -
      - -``` - -P189:5 -``` - - - - - -``` - -P189:6 -``` - - - - -

      - -``` - -P189:7 -``` - -

      -

      - - -
      - -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" "b/\345\206\211\345\275\254\347\222\220/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" deleted file mode 100644 index 660c76fad3d342b798aea20222812b6f9fd67b0b..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" +++ /dev/null @@ -1,242 +0,0 @@ -# 编辑事件 - -``` -复制:onbeforcopy复制到剪切板触发 oncopy复制页面内容触发 -剪切:onbeforecut oncut -粘贴:onbeforepaste onpaste -选择:onseletc 文本选中「完成后」 onselectstart 元素的文本开始被选中前触发的事件「开始前」 -``` -``` -拖放事件 -dragstart 用户开始拖拽元素时 -drag 拖拽过程中持续触发 -dragenter 拖拽元素进入目标容器时 -dragover 拖拽元素在目标容器内悬停时 -dragleave 拖拽元素离开目标容器时 -drop 用户在目标容器内释放鼠标时 - - - -``` -# 练习 -``` - - - - - -
      - 可拖动图片 -
      - -``` - - - - -``` - - - - -
      拖拽我到矩形里
      -
      - -``` - - - -``` - - - -
      鼠标移到我身上看看
      - -``` - - - - -``` - - - - - - -``` - - - - -``` - - - - - - - -``` - - - - - - diff --git "a/\345\206\211\345\275\254\347\222\220/20251203-ducument\345\257\271\350\261\241.md" "b/\345\206\211\345\275\254\347\222\220/20251203-ducument\345\257\271\350\261\241.md" deleted file mode 100644 index 82c9682faa3e1bd6a08a0a5beff8b0d99741abda..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251203-ducument\345\257\271\350\261\241.md" +++ /dev/null @@ -1,183 +0,0 @@ -# 笔记 - -### 常用属性 - 属性 | 说明 - :---: |:---: - body |提供对元素的直接访问 - cookie |获取或设置与当前文档有关的所有cookie - domain |获取当前文档的域名 - lastModified |获取文档最后修改的日期和时间 - referrer |获取载入当前文档的URL - title |获取或设置当前文档的标题 - URL |获取当前文档的URL - - - -### 常用方法 - 方法 | 说明 - :---: |:---: - close() | 关闭用Document.open()方法打开的输出流 - getElementById() | 返回指定id的对象 - getElementsByName() | 返回带有指定名称的对象合集 - getElementsByTagName()| 返回带有指定标签名的对象集合 - open() | 打开一个文档输出流并接收write()和writeIn()方法创建页面内容 - write() | 向文档中写入HTML或javascript语句 - writeIn() | 向文档中写入HTML或JavaScript语句,并以换行符结束 - createElement() | 创建一个HTML标记 - - - -``` -# 练习 -``` - - - -``` -``` - -

      - -``` -``` - - -``` -``` - - - -
      -

      行路难·其一

      -

      〔唐代〕李白

      -

      金樽清酒斗十千,玉盘珍羞直万钱。

      -

      停杯投箸不能食,拔剑四顾心茫然。

      -

      欲渡黄河冰塞川,将登太行雪满山。

      -

      闲来垂钓碧溪上,忽复乘舟梦日边。

      -

      行路难!行路难!多歧路,今安在?

      -

      长风破浪会有时,直挂云帆济沧海。

      -
      - - -``` -``` - - -
      点击打开图片
      - - - - -``` -``` - - - - -
      - -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251204-DOM.md" "b/\345\206\211\345\275\254\347\222\220/20251204-DOM.md" deleted file mode 100644 index 6d9c07bff9bb3bfa9f0cd44b2791c2116a4c849d..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251204-DOM.md" +++ /dev/null @@ -1,486 +0,0 @@ -# 文档对象模型DOM - -- DOM采用的分层结构为树形结构,以树节点的方式表示文档中的各种内容。 - -- DOM树结构 -``` -文档 (Document) -└── html (根元素) - ├── head - │ └── title - │ └── "DOM示例" - └── body - ├── h1 - │ └── "标题" - └── p - └── "段落文本" -``` - - -## DOM节点属性 -### 访问指定节点 -- nodeName属性:用来获取某一个节点的名称 - [sName=]obj.nodeName - -- nodeType属性:用来获取某个节点的类型 - [sType=]obj.nodeType - -- nodeValue属性:用于返回节点的值 - [txt=]obj.nodeValue - - - -``` -节点属性: -nodeType 标识节点类型 -nodeName 节点名称 -nodeValue 节点值 -childNodes 获取当前节点的所有子节点 -firstChild 获取第一个子节点 -lastChild 获取最后一个子节点 -nextSibling 获取下一个兄弟节点 -previousSibling 获取上一个兄弟节点 -parentNode 获取当前节点的父节点 -``` -``` -节点创建等: -createElement 创建元素节点 -createTextNode 创建文本节点 -appendChild 将子节点添加到父节点的子节点末尾 -insertBefore(new,ref) 将 new插入到 ref之前,没有则替换 -removeChild 从父节点中删除指定子节点 -replaceChild() 可替换节点啊 -``` -``` -获取元素: -getElementById 全局获取单个唯一 ID 元素 -getElementsByClassName 全局 / 局部获取批量 Class 元素 -querySelector 获取第一个匹配 CSS 选择器的元素 -querySelectorAll 复杂选择器 / 批量静态元素 遍历 -``` -``` -innerHTML 动态插入 -innerText 仅操作纯文字 -outerHTML 替换整个元素 - - -``` -# 练习 - - ``` - - - - -
      - -``` - -``` - - - -
      -
      - 夜空中最亮的星
      - 能否听清
      - 那仰望的人
      - 心底的孤独和叹息
      - 夜空中最亮的星
      - 能否记起
      - 曾与我同行
      - 消失在风里的身影 -
      - -``` -``` - - - - - - -
        -
      • 1. 热辣滚烫
      • -
      • 2. 飞驰人生3
      • -
      • 3. 哪吒之魔童闹海
      • -
      • 4. 唐探1900
      • -
      - -``` -``` - - - - - -
      -

      蔬菜列表

      -
        -
      • 西红柿
      • -
      • 黄瓜
      • -
      • 香蕉
      • -
      • 胡萝卜
      • -
      -
      -
      -

      水果列表

      -
        -
      • 苹果
      • -
      • 橙子
      • -
      • 菠菜
      • -
      • 草莓
      • -
      -
      - -``` -``` - - - - -
      -

      金庸《射雕英雄传》中,郭靖的降龙十八掌师从谁?

      -
      - -
      - -
      - - -
      - -
      -
      - -``` -``` - - - - - -
      - 百度 - -
      - -``` -``` - - - - - -
      - -
      -
      - -``` -``` - - - - -
      - 一生只爱一人 - - 点击将文本改为斜体 -
      - -``` -``` - - - - -
      - - - - - - -
      - -``` -``` - - - - -
      - - 选中的表情 -
      - -``` diff --git "a/\345\206\211\345\275\254\347\222\220/20251205-Window\345\257\271\350\261\241.md" "b/\345\206\211\345\275\254\347\222\220/20251205-Window\345\257\271\350\261\241.md" deleted file mode 100644 index 8fc7290c9ce47b0797830488c9408e18266c731f..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251205-Window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,296 +0,0 @@ -# Window对象 -- Window对象代表打开的浏览器窗口。通过Window对象,可以控制窗口的大小和位置、由窗口弹出的对话框、打开与关闭窗口,还可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目。 - -### Window对象的属性及其说明 - 属性 | 说明 - :---: | :---: - document |对话框中显示的当前文档 - frames |表示当前对话框中所有frames对象的合集 - location |指定当前文档的URl - name |对话框的名字 - status |状态栏中的当前信息 - defaultstatus|状态栏的默认信息 - top |表示最顶层的浏览器对话框 - parent |表示包含当前对话框的父对话框 - opener |表示打开当前对话框的父对话框 - closed |表示当前对话框是否关闭的逻辑值 - self |表示当前对话框 - screen |表示用户屏幕,提供屏幕尺寸、颜色深度等信息 - navigator |表示浏览器对象,用于获得与浏览器相关的信息 - - -## 使用 -- Window对象可以直接调用其方法和属性,语法结构如下: -``` -Window.属性名 -Window.方法名(参数列表) - -``` - -## 本地存储 -| 特性 | localStorage | sessionStorage | -|--------------|--------------------|--------------------| -| 有效期 | 永久(手动清除)| 会话结束失效 | -| 作用域 | 同源所有窗口共享 | 仅当前窗口/标签页 | -| 注意 | 仅存字符串,复杂数据需`JSON`序列化,不存敏感信息 | - - - - - -### 练习1-4 -```html - -

      训练1:弹出警告对话框

      -

      播放歌曲:

      - - - - -
      - -

      训练2:弹出确认对话框

      -

      当前用户:游客

      - 退出登录 - -
      - -

      训练3:打开影片详情页面

      -

      点击图片查看详情:

      - 影片海报 -

      《流浪地球》

      - -
      - -

      训练4:自动关闭广告窗口

      - - - - -``` - -### 练习5-6 -```html - - -

      简单计时器

      -
      00:00
      - - - -

      下降的窗口

      - - - - - - -``` - -### 综合练习 -```html - -

      综合练习1:计算两个数的和并判断结果

      - -
      - -
      - -

      综合练习2:选择选项并输出结果

      - -
      - -
      - -

      综合练习3:循环显示图片

      - - -
      - - - -``` - - - diff --git "a/\345\206\211\345\275\254\347\222\220/20251208-location\345\257\271\350\261\241.md" "b/\345\206\211\345\275\254\347\222\220/20251208-location\345\257\271\350\261\241.md" deleted file mode 100644 index c3476d2208ecd338a8ef32fd79b5d000a4aadc6d..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251208-location\345\257\271\350\261\241.md" +++ /dev/null @@ -1,187 +0,0 @@ -# Location 对象 - -## 概述 -Location 对象表示当前窗口(或框架)的 URL 信息,可用于获取和修改浏览器地址。 - -## 常用属性 - -| 属性 | 说明 | 示例(URL: `https://example.com:8080/path?q=test#section`) | -|------|------|------------------------------------------------------------| -| `href` | 完整 URL | `https://example.com:8080/path?q=test#section` | -| `protocol` | 协议 | `https:` | -| `host` | 主机(含端口) | `example.com:8080` | -| `hostname` | 主机名(不含端口) | `example.com` | -| `port` | 端口 | `8080` | -| `pathname` | 路径部分 | `/path` | -| `search` | 查询字符串(含`?`) | `?q=test` | -| `hash` | 片段标识符(含`#`) | `#section` | -| `origin` | 源(协议+主机) | `https://example.com:8080` | - -## 常用方法 - -### 1. `assign(url)` -- 加载新页面(在历史记录中生成新记录) -```javascript -location.assign('https://example.com/newpage'); -``` - -### 2. `replace(url)` -- 替换当前页面(不会生成历史记录) -```javascript -location.replace('https://example.com/replacement'); -``` - -### 3. `reload(force)` -- 重新加载当前页面 -- `force=true` 从服务器强制刷新(跳过缓存) -```javascript -location.reload(); // 可能使用缓存 -location.reload(true); // 强制从服务器加载 -``` - -## 简单示例 -```javascript -// 获取当前页面路径 -console.log(location.pathname); // 输出:/path - -// 跳转到新页面(方式1) -location.href = 'https://new.com'; - -// 跳转到新页面(方式2) -location.assign('https://new.com'); - -// 不记录历史的跳转 -location.replace('https://new.com'); -``` - -## 注意事项 -- 修改 `location.href` 或调用 `assign()` 都会导航到新页面 -- 修改 `location.hash` 仅改变 URL 片段,不会刷新页面 -- `replace()` 常用于登录后替换登录页面,避免用户回退 - - - -### 练习 - -#### P228:1 -``` - - - - - 20251208 - - - - - -

      音乐播放模拟

      - -
      -
      -
      夜空中最亮的星
      -
      逃跑计划
      -
      - -
      - -
      -
      -
      小跳蛙
      -
      ***乐队
      -
      - -
      - -
      -
      -
      起风了
      -
      买辣椒也用券
      -
      - -
      - - - - - - - - -``` - -#### P228:2 -``` -退出登录 - - -``` - -``` - - - - - -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251210-style\345\257\271\350\261\241.md" "b/\345\206\211\345\275\254\347\222\220/20251210-style\345\257\271\350\261\241.md" deleted file mode 100644 index d97fb0833634bdbf085d3723807e0306f6e10477..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251210-style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,256 +0,0 @@ -# 笔记 -# JavaScript Style 对象笔记 - -## 1. 基本概念 -**Style对象**是DOM元素的一个属性,用于获取和设置元素的内联样式。 - -```javascript -element.style.属性名 = "值"; -``` - -## 2. 常用属性 - -### 文本样式 -```javascript -// 颜色 -element.style.color = "red"; -element.style.color = "#ff0000"; -element.style.color = "rgb(255, 0, 0)"; - -// 字体大小 -element.style.fontSize = "20px"; - -// 字体粗细 -element.style.fontWeight = "bold"; - -// 文本对齐 -element.style.textAlign = "center"; -``` - -### 背景样式 -```javascript -element.style.backgroundColor = "blue"; -element.style.backgroundImage = "url('image.jpg')"; -``` - -### 边框样式 -```javascript -// 完整边框 -element.style.border = "2px solid red"; - -// 分开设置 -element.style.borderWidth = "5px"; -element.style.borderStyle = "double"; -element.style.borderColor = "blue"; - -// 单边边框 -element.style.borderTop = "1px dashed #333"; -``` - -### 尺寸和间距 -```javascript -// 宽度和高度 -element.style.width = "200px"; -element.style.height = "150px"; - -// 内外边距 -element.style.margin = "10px"; -element.style.padding = "15px"; - -// 单独设置 -element.style.marginTop = "20px"; -element.style.paddingLeft = "30px"; -``` - -## 3. 注意事项 - -### 驼峰命名法 -CSS属性中的连字符在JavaScript中改为驼峰命名: -- `background-color` → `backgroundColor` -- `font-size` → `fontSize` -- `border-radius` → `borderRadius` - -### 单位必须加 -尺寸值必须包含单位: -```javascript -// 正确 -element.style.width = "100px"; - -// 错误(不会生效) -element.style.width = "100"; -``` - -### 优先级 -通过style对象设置的样式具有**最高优先级**(内联样式),会覆盖外部CSS和内部样式表中的样式。 - -## 4. 实际示例 - -### 基本使用 -```javascript -const div = document.getElementById("myDiv"); -div.style.backgroundColor = "yellow"; -div.style.padding = "20px"; -div.style.border = "2px solid black"; -``` - -### 动态修改 -```javascript -// 点击按钮改变样式 -button.onclick = function() { - box.style.width = "300px"; - box.style.backgroundColor = getRandomColor(); -}; -``` - -### 批量设置 -```javascript -// 方法1:逐个设置 -element.style.color = "red"; -element.style.fontSize = "20px"; - -// 方法2:使用cssText(会覆盖所有内联样式) -element.style.cssText = "color: red; font-size: 20px;"; - -// 方法3:使用setProperty -element.style.setProperty("color", "blue"); -element.style.setProperty("font-size", "24px", "important"); -``` - -## 5. 简写属性 - -```javascript -// 边框简写 -element.style.border = "2px solid #000"; - -// 背景简写 -element.style.background = "#fff url(bg.jpg) no-repeat center"; - -// 字体简写 -element.style.font = "bold 16px Arial, sans-serif"; - -// 外边距/内边距简写(上右下左) -element.style.margin = "10px 20px 10px 20px"; -``` - -## 6. 获取样式值 - -```javascript -// 只能获取内联样式 -const color = element.style.color; - -// 获取计算后的样式(包括外部CSS) -const computedStyle = window.getComputedStyle(element); -const actualColor = computedStyle.color; -``` - ---- - -**核心要点**: -- style对象用于操作内联样式 -- 使用驼峰命名法 -- 记得添加单位(px, %, em等) -- 设置的样式优先级最高 - - -#### 练习 - - P262:训练一 -``` - -

      点击放大我!

      - - - -``` - - P262:训练二 -``` - - 示例图片 - -``` - -P262:综合训练一 -``` - - -
      📂 文件
      -
      🔧 工具
      -
      📊 统计
      -
      ❓ 帮助
      -``` - -P262:综合训练二 -``` - - - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251211-form\345\257\271\350\261\241.md" "b/\345\206\211\345\275\254\347\222\220/20251211-form\345\257\271\350\261\241.md" deleted file mode 100644 index 2248eb7b1d298b0336fa3ac67c8810fafe5b2601..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251211-form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,437 +0,0 @@ -# form对象 -# Form 对象基础笔记 - -```markdown -# Form 对象笔记 - -## 什么是 Form 对象? -- HTML 表单 (`
      `) 的 JavaScript 表示 -- 用于访问和操作表单元素 -- 可通过 `document.forms` 或 `document.getElementById()` 获取 - -## 获取 Form 对象 - -### 方法 1:通过 forms 集合 -```javascript -// 获取页面中第一个表单 -const firstForm = document.forms[0]; - -// 通过表单名称获取 -const myForm = document.forms['formName']; -``` - -### 方法 2:通过选择器 -```javascript -// ID 选择器 -const formById = document.getElementById('formId'); - -// 选择器 API -const form = document.querySelector('form'); -``` - -## Form 对象的常用属性 - -### 基本属性 -| 属性 | 说明 | 示例 | -|------|------|------| -| `elements` | 表单内所有控件的集合 | `form.elements` | -| `length` | 表单内控件的数量 | `form.length` | -| `name` | 表单的名称 | `form.name` | -| `method` | 提交方法 (GET/POST) | `form.method` | -| `action` | 提交的URL | `form.action` | - -### 访问表单控件 -```javascript -// 通过 name 属性访问 -const username = form.elements['username']; - -// 索引访问 -const firstElement = form.elements[0]; - -// 直接访问(有 name 属性的元素) -const email = form.email; // 等价于 form.elements['email'] -``` - -## Form 对象的方法 - -### 提交和重置 -```javascript -// 提交表单 -form.submit(); - -// 重置表单(清空所有输入) -form.reset(); - -// 触发提交事件 -form.requestSubmit(); -``` - -### 检查有效性 -```javascript -// 检查表单是否有效(HTML5 验证) -const isValid = form.checkValidity(); - -// 报告有效性(显示错误提示) -form.reportValidity(); -``` - -## 事件处理 - -### 常用事件 -| 事件 | 触发时机 | -|------|----------| -| `submit` | 表单提交时 | -| `reset` | 表单重置时 | -| `input` | 输入内容变化时 | -| `change` | 值改变并失去焦点时 | - -### 事件监听示例 -```javascript -form.addEventListener('submit', function(event) { - // 阻止默认提交行为 - event.preventDefault(); - - // 获取表单数据 - const formData = new FormData(form); - - // 处理数据... - console.log('表单提交:', Object.fromEntries(formData)); -}); - -// 监听单个输入框变化 -form.username.addEventListener('input', function() { - console.log('用户名:', this.value); -}); -``` - -## 获取表单数据 - -### FormData 对象(推荐) -```javascript -const formData = new FormData(form); - -// 获取特定字段的值 -const username = formData.get('username'); - -// 遍历所有字段 -for (let [name, value] of formData) { - console.log(name + ': ' + value); -} - -// 转换为普通对象 -const data = Object.fromEntries(formData); -``` - -### 传统方式 -```javascript -// 逐个获取 -const data = { - username: form.username.value, - email: form.email.value, - password: form.password.value -}; -``` - -## 表单验证 - -### HTML5 内置验证 -```html - -``` - -### JavaScript 验证 -```javascript -function validateForm(form) { - const email = form.email.value; - - if (!email.includes('@')) { - alert('请输入有效的邮箱地址'); - form.email.focus(); - return false; - } - - return true; -} - -// 使用 -form.addEventListener('submit', function(e) { - if (!validateForm(this)) { - e.preventDefault(); - } -}); -``` - -## 实用技巧 - -### 1. 快速序列化表单 -```javascript -// 转换为 URL 查询字符串 -const queryString = new URLSearchParams(new FormData(form)).toString(); -``` - -### 2. 禁用所有表单控件 -```javascript -function disableForm(form, isDisabled) { - for (let element of form.elements) { - element.disabled = isDisabled; - } -} -``` - -### 3. 表单字段映射 -```javascript -// 创建字段名到元素的映射 -const formMap = {}; -for (let element of form.elements) { - if (element.name) { - formMap[element.name] = element; - } -} -``` - -### 4. 动态添加字段 -```javascript -// 向表单添加新字段 -const newInput = document.createElement('input'); -newInput.type = 'text'; -newInput.name = 'newField'; -form.appendChild(newInput); -``` - -## 注意事项 -1. 表单元素的 `name` 属性很重要,是数据提交和获取的关键 -2. 使用 `FormData` 时,文件上传字段会自动处理 -3. 表单验证最好结合 HTML5 验证和 JavaScript 验证 -4. 提交前记得调用 `preventDefault()` 来处理异步提交 - - - -## 总结 -``` -- Form 对象是操作表单的核心接口 -- 使用 `FormData` 简化数据处理 -- 合理结合 HTML5 和 JavaScript 验证 -- 事件监听是表单交互的关键 -``` - - - - -#### 练习 -P275训练一: -``` - -``` - -P275训练二: -``` - - -

      用户注册协议

      - - - -
      - - - -
      - - -``` - -P275训练三: -``` - - -

      选择课程(最多6门)

      - - 数学
      - 语文
      - 英语
      - 物理
      - 化学
      - 生物
      - 历史
      - 地理
      - 政治
      - 体育
      - -

      - - - -``` - -P275综合练习一: -``` -

      选择题:中国的首都是?

      - - A. 上海
      - B. 广州
      - C. 北京
      - D. 深圳
      - - -

      - - -``` - -P275综合练习二: -``` -

      选择兴趣爱好

      - -

      - - 篮球
      - 足球
      - 游泳
      - 阅读
      - 音乐
      - 旅行
      - -
      - - - - - -``` - -P275综合练习三: -``` - - - - - -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251212-json\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251212-json\347\254\224\350\256\260.md" deleted file mode 100644 index 4d4914b043484c2ace41f6f17ff8ee40f21a1892..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251212-json\347\254\224\350\256\260.md" +++ /dev/null @@ -1,121 +0,0 @@ -# API 与 JSON 笔记 - -## 一、API 接口 - -### 1. 核心概念 -- **API**:应用程序编程接口 -- **作用**:两个软件组件间的通信桥梁 -- **关键点**:提供标准化的访问方式,隐藏内部实现细节 - -### 2. 餐厅比喻 -- **客户端** → 顾客 -- **API** → 服务员 -- **API文档** → 菜单 -- **服务器** → 厨房 - -### 3. 技术特点 -- **标准化通信**:使用 HTTP/HTTPS 协议 -- **请求-响应模式**:客户端发起请求,服务器返回响应 -- **数据格式**:常用 JSON、XML -- **安全机制**:API密钥、令牌验证 - -### 4. 主要优势 -``` -1. 高效复用 - 直接使用现有功能 -2. 安全可控 - 限制访问权限 -3. 系统解耦 - 双方独立演进 -4. 易于集成 - 标准化接口 -``` - -### 5. 常见类型 -- **Web API**:基于 HTTP,互联网服务常用 -- **RESTful API**:资源导向的设计风格 -- **系统 API**:操作系统提供的接口 - ---- - -## 二、JSON 数据格式 - -### 1. 基本定义 -- **全称**:JavaScript Object Notation -- **本质**:轻量级数据交换格式 -- **特点**:易读、易解析、跨语言 - -### 2. 核心语法规则 -```json -{ - "键": "值", - "数字": 123, - "布尔值": true, - "数组": ["值1", "值2"], - "对象": {"嵌套键": "嵌套值"}, - "空值": null -} -``` - -### 3. 语法要点 -- 键名必须用**双引号** -- 值类型:字符串、数字、布尔值、数组、对象、null -- 数据层次:支持嵌套对象和数组 - -### 4. API 数据交换示例 -```json -// 天气预报API响应示例 -{ - "success": true, - "data": { - "city": "北京", - "temperature": 22, - "conditions": "晴天" - } -} -``` - -### 5. JSON vs XML -| 特性 | JSON | XML | -|------|------|-----| -| 可读性 | 高 | 中 | -| 数据体积 | 小 | 大 | -| 解析速度 | 快 | 慢 | -| 数据类型 | 直接支持 | 全文本 | - ---- - -## 三、API + JSON 工作流程 - -``` -客户端请求 - ↓ -构造API请求(URL + 参数) - ↓ -发送HTTP请求 → API网关 - ↓ -服务器处理 → 业务逻辑 - ↓ -生成JSON响应 ← 数据库 - ↓ -返回JSON数据 - ↓ -客户端解析使用 -``` - ---- - -## 四、关键要点总结 - -### API 接口 -- 软件系统的"服务员"和"菜单" -- 标准化访问,无需了解内部实现 -- 现代Web开发的核心通信方式 - -### JSON 格式 -- API数据交换的"通用语言" -- 结构简洁,层次清晰 -- 几乎所有编程语言都支持 - -### 实际应用 -1. **移动App**:通过API获取服务器数据(JSON格式) -2. **网站开发**:前后端分离,API提供数据接口 -3. **第三方集成**:支付、地图、社交登录等功能接入 - - diff --git "a/\345\206\211\345\275\254\347\222\220/20251215\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251215\347\254\224\350\256\260.md" deleted file mode 100644 index feb292d2579412a6bd08909d810275f0eb8ade64..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251215\347\254\224\350\256\260.md" +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - 笔记 - - - - - - - - - - - - - - \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251217\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251217\347\254\224\350\256\260.md" deleted file mode 100644 index 90e2e5a36b33cd7ecae99a9041ba1c4769de1dd1..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251217\347\254\224\350\256\260.md" +++ /dev/null @@ -1,38 +0,0 @@ -```js - - 选择城市: - - - - - -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251218\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251218\347\254\224\350\256\260.md" deleted file mode 100644 index f2b746313b22e819d9025ef32545db53cba9d8bd..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251218\347\254\224\350\256\260.md" +++ /dev/null @@ -1,36 +0,0 @@ -``` -在 JavaScript 中,数组是一个用于存储多个值的对象。通过索引可以访问数组中的元素,索引从 0 开始。 - -示例:访问数组的第一个元素 - -const fruits = ["Apple", "Banana", "Cherry"]; -console.log(fruits[0]); // 输出: Apple -复制 -在这个例子中,fruits[0] 表示数组的第一个元素。 - -修改数组元素 - -可以通过索引直接修改数组中的值: - -fruits[0] = "Mango"; -console.log(fruits[0]); // 输出: Mango -复制 -注意事项 - -索引超出范围:如果访问的索引超出数组长度,会返回 undefined。 - -console.log(fruits[10]); // 输出: undefined -复制 -动态添加元素:可以通过指定新的索引为数组添加元素。 - -fruits[3] = "Orange"; -console.log(fruits); // 输出: ["Mango", "Banana", "Cherry", "Orange"] -复制 -稀疏数组:如果跳过某些索引,未定义的部分会显示为空槽。 - -const colors = []; -colors[5] = "Blue"; -console.log(colors); // 输出: [empty × 5, "Blue"] -复制 -通过这种方式,可以灵活地操作和管理数组中的数据。 -``` \ No newline at end of file diff --git "a/\345\206\211\345\275\254\347\222\220/20251219\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251219\347\254\224\350\256\260.md" deleted file mode 100644 index 12ab1ab2685c79c73fe565f8daaa9ccb9fccf173..0000000000000000000000000000000000000000 --- "a/\345\206\211\345\275\254\347\222\220/20251219\347\254\224\350\256\260.md" +++ /dev/null @@ -1,73 +0,0 @@ -# 笔记 - -### 变量、常量和基础数据类型 -- var let定义变量,请忘记var,后续只使用let -- const定义常量,常量名全大写 -- 数据类型 - - 基础数据类型 - - string - - number - - boolean - - underfined - - null - - 复合数据类型 - - 对象 - - 数组 - - 函数 -### 运算符和数据类型转换 -- "+"" "-"" "*"" "/"" "%"" -- 逻辑运算 - - null undefined 0 '' 这些字面量参与逻辑运算时,作为false,其余的值作为true - - 短路运算 true || 表达式 false && 表达式 -- 赋值运算 = += -+ ++ --等 -- parseInt parseFloat 乘1变数字 加空字符串变字符串 -### 流程控制 - -- 判断 - - if - - if ... else - - if ... else if() - - if ... else if()... else - - switch -- 循环 - - for - - while - - do...while -- 三元运算 -## 核心数据结构及用法 - -### 数组 - -- 改变数组本身的方法 - - sort 排序,接受一个比较器 - - push pop 从尾部添加、删除 - - unshift shift 从头部添加、删除 - - splice 万能方法 删除元素、添加元素、修改元素 - - reverse 倒置 - - fill 填充 -- 不改变数组本身的方法 - - concat 拼接数组 - - slice 截取 - - map 将一个函数用在数组的每一个元素上,并将处理后的结果放入新的数组 - - filter 将一个函数用在数组的每个元素上,如果这个元素运算的结果为true,则将元素放入新的数组,反之不放,最终得到新的数组 - - reduce 将一个函数用在数组的前2个元素上,计算后的结果作为同一个函数第一个参数和数组的第三元素作为第二参数进行运算 - - forEach 遍历 - - find 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素,否则最终返回undefined - - findIndex 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素下标,否则最终返回undefined - - every - - some - - includes - - indexOf - - lastIndexOf - - join -- 高阶函数 - - 一个函数f,接受另外一个函数作为其参数,则称函数f为高阶函数 -### 函数 -- 函数定义 三种定义方式 -- 函数参数 可传可不传,不会因为没有参数而报错 -- 函数返回值 如果没有返回值,则默认返回undefined - -### 对象 -- 包含在一对大括号中的内容 -- 键值对,键也就是属性,值也就属性值 -- 也可以使用类似于数组的形式访问某个值,或者为其添加新的属性 diff --git "a/\345\210\230\346\224\277/20251110\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251110\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 36a4c0322b1225a40b97b4c2be52bed515fa2125..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251110\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,42 +0,0 @@ -### 笔记 -``` -JavaScript 用法 -HTML 中的 Javascript 脚本代码必须位于 标签之间。 -Javascript 脚本代码可被放置在 HTML 页面的 和 部分中。 - - 会告诉 JavaScript 在何处开始和结束。 - 之间的代码行包含了 JavaScript: - - - -您无需理解上面的代码。只需明白,浏览器会解释并执行位于 之间的 JavaScript 代码 - - -外部的 JavaScript -也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。 - -外部 JavaScript 文件的文件扩展名是 .js。 - -如需使用外部文件,请在 - -``` -```html - - - -alert("http://www.mingrisoft.com"); -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251112\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251112\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index bdf6fa0996023367090bf2b78b376e9989225505..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251112\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,76 +0,0 @@ -### 练习 - ```html - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251113-\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251113-\347\273\203\344\271\240.md" deleted file mode 100644 index 43794ac82c0cdd98b386f0948c97d022df4d6539..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251113-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,108 +0,0 @@ -### 练习 -```html - - - - - Document - - - - - - - -
      - - - - -``` -```js - document.write(""); - for (let c = 1; c < 5; c++) { - document.write(""); - - for (let f = 1; f < 11; f++) { - if (c == 3 && f == 5) { - document.write(""); - continue; - } - if (c == 3 && f == 6) { - document.write(""); - continue; - } - document.write(""); - } - document.write(""); - } - document.write("
      已售已售" + c + "排" + f + "座
      "); -for (let b = 0; b < 10; b++) { - document.write(""); - for (let c = 1; c < 11; c++) { - let mub = b * 10 + c - document.write(""); - - } - document.write(""); - } - document.write("
      " + mub + "
      "); -``` diff --git "a/\345\210\230\346\224\277/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index e42f2fce6a4625b2668f439c3bea940ef7741fcb..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,161 +0,0 @@ -### 笔记 -``` -if/else 语句在指定的条件为 true 时,执行代码块。如果条件为 false,会执行另外一个代码块。 - -if/else 语句是 JavaScript 条件语句的一部分, 条件语句用于基于不同的条件来执行不同的动作。 - -在 JavaScript 中,我们可使用以下条件语句: - -if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码。 -else 语句 如果 if 语句的条件为false,则执行该代码块 -else if 语句 - 检测一个新的条件,如果第一个条件为false -switch 语句 - 选择多个代码块中其中一个执行 - - - -for/in 语句用于循环对象属性。 - -循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。 - -JavaScript 支持不同类型的循环: - -for - 循环代码块一定的次数 -for/in - 循环遍历对象的属性 -while - 当指定的条件为 true 时循环指定的代码块 -do/while - 同样当指定的条件为 true 时循环指定的代码块 -注意: 不要使用 for/in 语句来循环数组的索引,你可以使用 for 语句替代。 -``` -### 练习 -```html - - - - - - - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index bff903792a5dcffb4c1d4effe79ab0b1abbb9d36..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,56 +0,0 @@ -### 笔记 -``` -函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 - -在调用函数时,您可以向其传递值,这些值被称为参数。 - -在使用 return 语句时,函数会停止执行,并返回指定的值 -``` -### 练习 -```js - - - - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index acbe32ffafd759ef973a7af6da342bab3b5bb3cf..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,205 +0,0 @@ -### 笔记 -``` -递归是一种在程序设计中广泛使用的算法,通过函数直接或间接调用自身,将复杂问题分解为更小的子问题来解决。在JavaScript中,递归函数是指函数在其定义中调用自身。 - -递归函数的基本结构 - -递归函数通常包含两个部分:递归调用和递归终止条件。递归调用是函数调用自身的过程,而递归终止条件是防止函数无限调用自身的条件。 - -示例1:计算1到n的和 - -以下是一个计算1到n的和的递归函数示例: - -function add(n) { -// 递归终止条件 -if (n === 1) { -return 1; -} else { -// 递归调用 -return n + add(n - 1); -} -} - -console.log(add(5)); // 输出: 15 -复制 -在这个示例中,函数add通过递归调用自身来计算1到n的和。当n等于1时,递归终止,返回1。 - -示例2:计算斐波那契数列的第n项 - -斐波那契数列是一个特殊的数列,其中每个数都是前两个数的和。以下是一个计算斐波那契数列第n项的递归函数示例: - -function fibonacci(n) { -// 递归终止条件 -if (n === 1 || n === 2) { -return 1; -} else { -// 递归调用 -return fibonacci(n - 1) + fibonacci(n - 2); -} -} - -console.log(fibonacci(6)); // 输出: 8 -复制 -在这个示例中,函数fibonacci通过递归调用自身来计算斐波那契数列的第n项。当n等于1或2时,递归终止,返回1。 - -递归函数的优缺点 - -优点: - -结构清晰,代码可读性强。 - -适用于解决可以分解为更小子问题的问题。 - -缺点: - -递归算法的运行效率较低,可能导致栈溢出。 - -占用的存储空间较多。 - -在使用递归时,要注意设置递归终止条件,以防止函数无限调用自身。 -``` - -### 练习 -```js -script> - function a(a1,a2,a3){ - let money=a1+a2+a3; - return money; - } - function b(a1,a2,a3){ - if(a1+a2+a3>=500){ - return `可以`; - }else{ - return `不能`; - } - } - console.log("一共消费"+a(199,156,165)+"元,"+b(199,156,165)+"享受优惠"); - - - - - - - - - - - - - - - - - - - - - - Document - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index eb4811ca1a2265bc282c07e43b5bcdcb3dc58cb8..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,90 +0,0 @@ -### 笔记 -``` -所有事物都是对象 -JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。 - -布尔型可以是一个对象。 -数字型可以是一个对象。 -字符串也可以是一个对象 -日期是一个对象 -数学和正则表达式也是对象 -数组是一个对象 -甚至函数也可以是对象 - - -创建 JavaScript 对象 -通过 JavaScript,您能够定义并创建自己的对象。 - -创建新对象有两种不同的方法: - -使用 Object 定义并创建对象的实例。 -使用函数来定义对象,然后创建新的对象实例。 -使用 Object -在 JavaScript 中,几乎所有的对象都是 Object 类型的实例,它们都会从 Object.prototype 继承属性和方法。 - -Object 构造函数创建一个对象包装器。 - -Object 构造函数,会根据给定的参数创建对象,具体有以下情况: - -如果给定值是 null 或 undefined,将会创建并返回一个空对象。 -如果传进去的是一个基本类型的值,则会构造其包装类型的对象。 -如果传进去的是引用类型的值,仍然会返回这个值,经他们复制的变量保有和源对象相同的引用地址。 -当以非构造函数形式被调用时,Object 的行为等同于 new Object()。 -``` -### 练习 -```js - - - - - - - - - -
      - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251121-\347\254\224\350\256\260.md" "b/\345\210\230\346\224\277/20251121-\347\254\224\350\256\260.md" deleted file mode 100644 index 3ef6247f9aa9a881fc6fb64c5b8128e5d61dcb48..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251121-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,46 +0,0 @@ -### 笔记 -``` -什么是数组? -数组对象是使用单独的变量名来存储一系列的值。 - -如果你有一组数据(例如:车名字),存在单独变量如下所示: - -var car1="Saab"; -var car2="Volvo"; -var car3="BMW"; -然而,如果你想从中找出某一辆车?并且不是3辆,而是300辆呢?这将不是一件容易的事! - -最好的方法就是用数组。 - -数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。 - -数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。 - -创建一个数组 -创建一个数组,有三种方法。 - -下面的代码定义了一个名为 myCars的数组对象: - -1: 常规方式: - -var myCars=new Array(); -myCars[0]="Saab"; -myCars[1]="Volvo"; -myCars[2]="BMW"; -2: 简洁方式: - -var myCars=new Array("Saab","Volvo","BMW"); -3: 字面: - -var myCars=["Saab","Volvo","BMW"]; - -访问数组 -通过指定数组名以及索引号码,你可以访问某个特定的元素。 - -以下实例可以访问myCars数组的第一个值: - -var name=myCars[0]; -以下实例修改了数组 myCars 的第一个元素: - -myCars[0]="Opel"; -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 7f79b474bd835dfe4601be5238be626440f8f039..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,88 +0,0 @@ -### 笔记 -``` -. 数组创建方式 - -|方式 |语法示例 |说明 -|-----|-----|-----| -|字面量(推荐) |const arr = [1, 'a', true, null]; |简洁高效,最常用 -|Array 构造函数 |const arr1 = new Array(3);(长度 3 空数组) |注意:单个数字参数表示长度,非元素 -||const arr2 = new Array(1, 2, 3); |多个参数表示元素 -|Array.of()(ES6+) |const arr = Array.of(3, 1, 2); |统一处理参数,避免构造函数的歧义(结果:[3,1,2]) -|Array.from()(ES6+) |const arr = Array.from('abc'); |从可迭代对象 / 类数组对象转换为数组 -||const arr = Array.from([1,2,3], x => x*2); |第二个参数为映射函数,类似 map -``` -### 练习 -```js - - - - - Document - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index cd39ce46fa37873fcf3747a4f99c3f4df21799ea..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,88 +0,0 @@ -### 笔记 -``` -正则表达式 - 正则表达式描述了一种字符串的匹配模式,即通过使用一系列普通字符串和特殊字符串来构建能够明确描述文本字符串的匹配模式,可以用来检查一个字符串是否含有某个字符串、将匹配的字符串替换或者从某个字符串中去除某个符合条件的字符串等。 - -正则表达式的作用 - 1. 测试字符串的某个模式 - 2. 替换文本 - 3. 根据模式匹配 - -``` -### 练习 -```js - - - - - Document - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 4f2b79a50fbb5324ab7b8d1b0165f5fc675f517d..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,84 +0,0 @@ -### 笔记 -``` -异常类型|发生异常原因| -|--|--| -|EvalError|错误发生在eval()函数中| -|RangeError|数字的值超出JavaScript可表示的范围| -|ReferenceError|使用了非法的应用| -|SyntaxError|语法错误| -|TypeError|变量的类型错误| -|URLError|在encodeURL()函数或者decodeURL()函数中发生了错误| -``` -### 练习 -```js - - - - - Document - - - - -

      输入1~5的数字

      - -
      -
      - - - - 用户名:
      - 密码:
      - - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 962ae0da6b18dcfd8b2fec62dbd50639b716f6a3..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,182 +0,0 @@ -### 笔记 -``` -1. 取消事件传递(阻止冒泡 / 捕获) -通用方法(现代浏览器):event.stopPropagation() -阻止事件继续传播(无论冒泡还是捕获阶段)。 -兼容 IE8 及以下(已淘汰,可选):event.cancelBubble = true - -2. 取消事件默认处理 -通用方法(现代浏览器):event.preventDefault() -阻止浏览器默认行为(如 a 标签跳转、表单提交、输入框输入等)。 -兼容 IE8 及以下(已淘汰,可选):event.returnValue = false -特殊场景:onclick 等属性中直接返回 false(等价于同时取消传递 + 默认处理,不推荐)。 -``` -### 练习 -```js - - - - - - Document - - - - 丁禹兮 - - - - -
      -

      题目:中国国球是()?

      -

      A. 篮球 B. 兵乓球 C. 羽毛球 D. 排球

      -

      请按键盘上的 A/B/C/D 键选择答案

      -

      -
      - - - -

      - - -

      - - -
      -

      -

      - -
      - - - - -
      - - - - - - - -
      - - -
      - -
      - - -
      - - - -
      - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 38d91ef0cc7c612d3dc33da7605b9d42e8ff04a7..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,205 +0,0 @@ -### 笔记 -``` -**知识点**:使用 `draggable="true"` 属性使元素可拖放。 - -```javascript -// 使元素可拖放 -const draggableElement = document.getElementById("draggable"); -draggableElement.setAttribute("draggable", "true"); -``` - -### 2. 拖放事件生命周期 - -**知识点**:拖放操作涉及两个对象的事件:被拖元素(drag source)和目标区域(drop target)。 - -```javascript -// 被拖元素事件 -element.addEventListener("dragstart", handleDragStart); -element.addEventListener("dragend", handleDragEnd); - -// 目标区域事件 -target.addEventListener("dragover", handleDragOver); -target.addEventListener("drop", handleDrop); -``` - ---- - -## 拖放事件 - -### 3. dragstart 事件 - -**知识点**:开始拖动时触发,用于设置拖拽数据。 - -```javascript -function handleDragStart(e) { - e.dataTransfer.setData("text/plain", e.target.id); - e.target.classList.add("dragging"); -} -``` -### 练习 -```html - - -
      - -
      - - - - -

      中国的"国球"是()

      -

      A.篮球 B.排球 C.乒乓球 D.羽毛球

      -

      - - - - - -
      - - - - - -

      - - - - - - - - - - - - - - - - -

      - - - - -
      - 用户名:
      - 密码:
      - - -
      - - - - - - - -
      -
      - -
      -
      -
      - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251203-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251203-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index d0fca44a3b0ba6581034bbe39fbc322850de4c9b..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251203-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,139 +0,0 @@ -### 笔记 -``` -1.getElementById()方法返回具有指定ID的元素。 -2.getElementsByTagName()方法返回具有指定标签名的元素集合。 -3.getElementsByName()方法返回具有指定类名的对象集合。 -4.querySelector()方法返回匹配指定CSS选择器的第一个元素 -5.querySelectorAll()方法返回匹配指定CSS选择器的所有元素 -6.createElement()方法用于创建一个新的元素节点 -``` -### 练习 -```html - - - - - Document - - - - - - - - -

      - - - - -
      - - - - - - - - - - Document - - - - -

      《行路难》

      -

      李白

      -

      金樽清酒斗十千,玉盘珍羞直万钱。 - - 停杯投箸不能食,拔剑四顾心茫然。 - - 欲渡黄河冰塞川,将登太行雪满山。 - - 闲来垂钓碧溪上,忽复乘舟梦日边。 - - 行路难!行路难!多岐路,今安在? - - 长风破浪会有时,直挂云帆济沧海。

      - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251204-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251204-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 9b95a20a7b477df73a875b870736976bbe0bcad9..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251204-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,206 +0,0 @@ -### 笔记 -``` -一、核心认知 -1. **本质**:HTML/XML 文档的树形节点映射,JS 操作页面的接口,`document` 为操作入口。 -2. **关键节点**:元素节点(操作核心,`nodeType=1`)、文本节点(`nodeType=3`)、文档节点(`document`,`nodeType=9`)。 -3. **层级**:`window→document→html→head/body→子元素`。 - -二、核心操作 -1. 元素选择 -| 方法 | 核心特点 | -|---------------------|---------------------------| -| `getElementById` | 性能最优,返回单个元素 | -| `getElementsBy*` | 动态集合,元素变化自动同步| -| `querySelector/All` | 支持CSS选择器,后者返回静态集合 | - -2. 节点操作 -- **创建插入**:`createElement`(创元素)、`createTextNode`(创文本,防XSS)、`appendChild`/`insertBefore`(插入)。 -- **删除替换**:`node.remove()`(自删)、`removeChild`(父删子)、`replaceChild`(替换)。 -- **安全**:优先`textContent`,慎用`innerHTML`。 - -3. 样式与属性 -- 样式:`elem.style`(行内)、`classList`(类名操作,推荐)、`getComputedStyle`(计算样式,只读)。 -- 属性:`getAttribute`/`setAttribute`(原生属性)、`dataset`(`data-*`属性)。 - -三、事件与优化 -1. **事件**:推荐`addEventListener`,关键事件`DOMContentLoaded`(初始化)、`beforeunload`(页面卸载提示);事件委托适配动态元素。 -2. **性能优化**:缓存元素、批量操作(`DocumentFragment`)、避免同步重排、高频事件节流防抖、删元素前解绑事件。 - -``` -### 练习 -```html - - - - - Document - - - - - -
      - - - - - - - - - Document - - - - -
      - -
      -    夜空中最亮的星
      -    能否听清
      -    那仰望的人
      -    心底的孤独和叹息
      -    夜空中最亮的星
      -    能否记起
      -    曾与我同行
      -    消失在风里的身影
      -        
      - - - - - -

      最新电影资讯

      -
        -
      • 1.《金蝉脱壳》
      • -
      • 2.《阿甘正传》
      • -
      • 3.《爱乐之城》
      • -
      • 4.《头号玩家》
      • -
      - 输入影片资讯编号: - - - - -
      -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 芒果
      • -
      -
        -
      • 西瓜
      • -
      • 蜜橘
      • -
      • 萝卜
      • -
      -
      - - - -

      在《倚天屠龙记》中,张三丰是_____派的掌门?

      - A.少林 - B.武当 - C.峨眉 - D.昆仑 - - - - 原超链接文本 - - - - - - - -
      - - 选中的表情 -
      - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 01453b38e3226fb7ca4c1f25a331b43957da97b1..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,367 +0,0 @@ -### 笔记 -``` -document.title 获取 / 设置页面标题 -document.URL 获取当前页面完整 URL -document.body 获取 元素,可直接操作其样式和内容 - -getElementById() 根据元素 id 属性查询 -getElementsByTagName() 根据标签名查询 -getElementsByClassName() 根据元素 class 属性查询 -querySelector() CSS 选择器查询(第一个匹配) -createElement() 创建新的 HTML 元素 -appendChild() 将子元素添加到父元素的末尾 -replaceChild() 用新元素替换父元素中的某个子元素 -removeChild() 从父元素中删除指定子元素 -``` -### 练习 -```js -
      -

      消散对白(节选)

      -

      丁禹兮

      -

      原諒我真的不太會告別

      -

      也沒想過有這一天

      -

      以為你隨口承諾的永遠

      -

      就可以敵過時間

      -

      可你眼中深情的對白 如煙花短暫

      -

      新鮮感終歸不是愛

      -

      回憶在倒帶要怎麼釋懷?

      -

      說著放下卻陷入無限循環

      -

      可你眼中無情的對白 淚都流乾

      -

      卻不說答案

      -

      順其自然 隨冷風消散

      -

      可過了這麼久你怎麼還是我的短板

      -
      - - -``` - -```js - - - 退出登录 - -``` - -```js -
      -
      - 长乐曲 -
      -
      - 十年一品温如言 -
      -
      - -``` -```js - - - - - -
      -

      广告内容标题

      -

      这里是广告的具体内容

      -
      广告将在 5 秒后自动关闭
      -
      - -``` - -```js - - - - -``` -```js - - - - - -``` -```js - - -``` -```js -

      2024年奥运会举办城市问答

      -
      - -``` -```js - - - -
      - 轮播图片 -
      - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 1a5aa40b201856ba5cc80d19ff6ce48897056482..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,32 +0,0 @@ -### 1. window(顶层对象) -#### (1)尺寸相关 -```js -// 视口尺寸(不含滚动条) -window.innerWidth / window.innerHeight -// 窗口整体尺寸(含浏览器边框) -window.outerWidth / window.outerHeight -``` -### (2)窗口操作 -```js -// 打开新窗口(慎用,易被浏览器拦截) -window.open(url, name, features) -// 关闭当前窗口 -window.close() -// 窗口滚动 -window.scrollTo(x, y) // 绝对滚动到指定坐标 -window.scrollBy(x, y) // 相对当前位置滚动 -``` -### (3)定时器 -```js -// 一次性定时器(延迟执行) -let timer1 = setTimeout(() => {}, 1000) // 1秒后执行 -clearTimeout(timer1) // 清除未执行的定时器 - -// 周期性定时器(重复执行) -let timer2 = setInterval(() => {}, 1000) // 每1秒执行一次 -clearInterval(timer2) // 清除周期性定时器 - -// ES6+ 精准动画定时器 -let timer3 = requestAnimationFrame(callback) -cancelAnimationFrame(timer3) // 清除动画定时器 -``` diff --git "a/\345\210\230\346\224\277/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 4fdeeb5ba59a6dd79d43a69a4082ae08d1a8c8cb..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,83 +0,0 @@ -### 笔记 -``` -一、Style 对象核心概述 -- Style 对象是 JavaScript 操作 DOM 元素内联样式的核心接口,对应元素的 style 属性,仅控制内联样式`(
      )`,而非外部样式表或 ` - - -
      五指拳心剑
      - - - - -
      - - - - -
      NNNGSJLZ
      - - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 696b5cc2abc3621d875cbeb288604a15d3d65e0c..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,196 +0,0 @@ -### 笔记 -``` -``` - -### 练习 -```js - - - - - Document - - - -
      - - - -
      - - - - - - - - - -
      - C语言
      - 机械制图
      - 单片机
      - 自动控制
      - 传感器
      - 高等数学
      - 计算机基础
      - 数据库 -
      - - - -
      -

      电影《变相怪杰》的主演是谁!

      - 布拉德 - 亚当 - 金·凯瑞 - 杰夫 - -
      - - - - -``` -```js - -
      - 看电影 - 听音乐 - 演奏乐器 - 打篮球 - 看书 - 上网 -
      - - - -
      - - - - - 选择城市: - - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251212-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251212-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 3757ea46e508ccc6c06bf85fb120be035558ff48..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251212-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,85 +0,0 @@ -## JSON (JavaScript Object Notation) -### 什么是JSON -- 轻量级数据交换格式 -- 易于人阅读和编写 -- 易于机器解析和生成 -- 独立于语言的文本格式 - -### JSON语法 -```javascript -// 对象表示 -{"name": "张三", "age": 25, "city": "北京"} - -// 数组表示 -[{"name": "张三"}, {"name": "李四"}] - -// 嵌套结构 -{ - "students": [ - {"name": "张三", "scores": [85, 92, 78]}, - {"name": "李四", "scores": [90, 88, 95]} - ] -} -``` - -### JSON与JS对象转换 -```javascript -// JS对象转JSON字符串 -let obj = {name: "张三", age: 25}; -let jsonStr = JSON.stringify(obj); - -// JSON字符串转JS对象 -let str = '{"name": "张三", "age": 25}'; -let jsonObj = JSON.parse(str); -``` - -## Promise -### 什么是Promise -- 异步编程解决方案 -- 表示一个异步操作最终完成或失败的对象 -- 解决回调地狱问题 - -### Promise状态 -1. Pending(待定)- 初始状态 -2. Fulfilled(已成功)- 操作成功完成 -3. Rejected(已失败)- 操作失败 - -### Promise基本用法 -```javascript -// 创建Promise -let promise = new Promise((resolve, reject) => { - let success = true; - if (success) { - resolve("操作成功"); - } else { - reject("操作失败"); - } -}); - -// 使用Promise -promise - .then(result => console.log(result)) - .catch(error => console.log(error)); -``` - -### Promise链式调用 -```javascript -fetch('/api/data') - .then(response => response.json()) - .then(data => processData(data)) - .then(result => console.log(result)) - .catch(error => console.error(error)); -``` - -### async/await语法 -```javascript -async function fetchData() { - try { - let response = await fetch('/api/data'); - let data = await response.json(); - console.log(data); - } catch (error) { - console.error(error); - } -} -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251215-\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251215-\347\273\203\344\271\240.md" deleted file mode 100644 index b3499604d0bd4fe9fee18b979cf642c14bbaee40..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251215-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,46 +0,0 @@ - ```js - - - - - - - - - - - - - - ``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251217-\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251217-\347\273\203\344\271\240.md" deleted file mode 100644 index 90e2e5a36b33cd7ecae99a9041ba1c4769de1dd1..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251217-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,38 +0,0 @@ -```js - - 选择城市: - - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251218-\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251218-\347\273\203\344\271\240.md" deleted file mode 100644 index f2b746313b22e819d9025ef32545db53cba9d8bd..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251218-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,36 +0,0 @@ -``` -在 JavaScript 中,数组是一个用于存储多个值的对象。通过索引可以访问数组中的元素,索引从 0 开始。 - -示例:访问数组的第一个元素 - -const fruits = ["Apple", "Banana", "Cherry"]; -console.log(fruits[0]); // 输出: Apple -复制 -在这个例子中,fruits[0] 表示数组的第一个元素。 - -修改数组元素 - -可以通过索引直接修改数组中的值: - -fruits[0] = "Mango"; -console.log(fruits[0]); // 输出: Mango -复制 -注意事项 - -索引超出范围:如果访问的索引超出数组长度,会返回 undefined。 - -console.log(fruits[10]); // 输出: undefined -复制 -动态添加元素:可以通过指定新的索引为数组添加元素。 - -fruits[3] = "Orange"; -console.log(fruits); // 输出: ["Mango", "Banana", "Cherry", "Orange"] -复制 -稀疏数组:如果跳过某些索引,未定义的部分会显示为空槽。 - -const colors = []; -colors[5] = "Blue"; -console.log(colors); // 输出: [empty × 5, "Blue"] -复制 -通过这种方式,可以灵活地操作和管理数组中的数据。 -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251219-\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251219-\347\273\203\344\271\240.md" deleted file mode 100644 index 900067f0d876f3231dd0e48b6248f098869ddbee..0000000000000000000000000000000000000000 --- "a/\345\210\230\346\224\277/20251219-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,67 +0,0 @@ -```js - - - - - Document - - - - - - - - -
      - - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/\345\233\276\347\211\207/screenshots.gif" "b/\345\210\230\346\224\277/\345\233\276\347\211\207/screenshots.gif" deleted file mode 100644 index afb2dbd03afb839be987b4d2236c2650d6088a0b..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\346\224\277/\345\233\276\347\211\207/screenshots.gif" and /dev/null differ diff --git "a/\345\210\230\346\224\277/\345\233\276\347\211\207/\350\200\201\345\255\220.gif" "b/\345\210\230\346\224\277/\345\233\276\347\211\207/\350\200\201\345\255\220.gif" deleted file mode 100644 index afb2dbd03afb839be987b4d2236c2650d6088a0b..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\346\224\277/\345\233\276\347\211\207/\350\200\201\345\255\220.gif" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/20251110-js\345\205\245\351\227\250.md" "b/\345\210\230\350\231\271\347\206\240/20251110-js\345\205\245\351\227\250.md" deleted file mode 100644 index 603e5823c3c08a25ee89e28a73b83f2b7b41cfd6..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251110-js\345\205\245\351\227\250.md" +++ /dev/null @@ -1,70 +0,0 @@ -## 笔记 - -### web前端核心技术 - -1. HTML - -2. css - -3. JavaScript - - -### web前端框架 - -1. react facebook - -2. vue 尤雨溪 vue3 - -3. angluar2 谷歌 - -### 全栈 - -1. 前端 - -- vue3 -- react - -2. 后端 - -- c# -- java -- python -- c/c++ -- 汇编语言 -- 二进制 -- nodejs -- go -- php - -### 三种嵌入方法 - -- 在页面中直接嵌入 - -- 外部链接 - -- 作为标签属性值使用 - -## 作业 - -- 综合练习1 -``` - - - -``` -- 效果图 - - -- 综合练习2 - -``` - - - -``` -- 效果图 - diff --git "a/\345\210\230\350\231\271\347\206\240/20251112-\345\237\272\346\234\254\350\257\255\346\263\225\345\222\214js\345\237\272\347\241\200.md" "b/\345\210\230\350\231\271\347\206\240/20251112-\345\237\272\346\234\254\350\257\255\346\263\225\345\222\214js\345\237\272\347\241\200.md" deleted file mode 100644 index 9ae087fc3b3b171d42fe27409de3fa1d2ab24c11..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251112-\345\237\272\346\234\254\350\257\255\346\263\225\345\222\214js\345\237\272\347\241\200.md" +++ /dev/null @@ -1,140 +0,0 @@ -## 笔记 - -### js基本语法 - -1. 执行顺序 - -- 按照出现顺序执行 - -- 函数体内代码不会被立即执行,调用时执行 - -2.字母大小写 - -- 采用正确大小写形式 - -3.空格与换行 - -- 换行代表断句,语句结束 - -4.结尾分号 - -- 每行代码结尾加上分号,保证代码准确性 - -5.注释 - -- “//”和“/*…*/” - -### js基础 - -1.数据类型 - -- 数值型(Number):整数、浮点数、NaN(非数字)、Infinity(无穷大) -- 字符串型(String):单 / 双引号包裹,可通过索引访问字符 -- 布尔类型(Boolean):仅 true/false,用于条件判断 -- 特殊数据类型:undefined(未定义)、null(空值)、Symbol(唯一标识)、BigInt(大整数) - -2.常量和变量 - -- 常量:用 const 声明,必须初始化,不可修改 -- 变量:let(块级作用域,推荐)/var(函数级作用域,避免)声明,可修改 - -3.运算符 - -- 算术:+(含字符串拼接)、-、*、/、%(取余)、++(自增)、--(自减) -- 赋值:=、+=、-=、*=、/= -- 比较:==(值相等)、===(值 + 类型全等,推荐)、!=、!==、>、<、>=、<= -- 逻辑:&&(与,短路)、||(或,短路)、!(非) -- 其他:typeof(检测数据类型)、三元运算符(条件?值 1: 值 2) -## 作业 -- 训练1,2 -``` - - - -``` -- 效果图 - - -- 训练3,4 -``` - - - -``` -- 效果图 - - -- 综合练习1 -``` - - - -``` -- 效果图 - - -- 综合练习2 -``` - - - -``` -- 效果图 - - -- 综合练习3 -``` - - - -``` -- 效果图 - - diff --git "a/\345\210\230\350\231\271\347\206\240/20251113-\350\277\220\347\256\227\347\254\246+\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\345\210\230\350\231\271\347\206\240/20251113-\350\277\220\347\256\227\347\254\246+\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" deleted file mode 100644 index 35378f3de041ce6394e95c0d582529e90f7a04f3..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251113-\350\277\220\347\256\227\347\254\246+\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" +++ /dev/null @@ -1,267 +0,0 @@ -## 笔记 - -### 运算符 - -运算符优先级与结合性表 - -| 优先级(从高到低) | 运算符 | 结合性 | -|--------------------|---------------------------------|--------------| -| 1 | () | 左结合 | -| 2 | . 、[] 、new(带参数) | 左结合 | -| 3 | ++ 、--(后置) | 左结合 | -| 4 | ++ 、--(前置) | 右结合 | -| 5 | ! 、typeof | 右结合 | -| 6 | * 、/ 、% | 左结合 | -| 7 | + 、- | 左结合 | -| 8 | > 、< 、>= 、<= | 左结合 | -| 9 | == 、!= 、=== 、!== | 左结合 | -| 10 | && | 左结合 | -| 11 | || | 左结合 | -| 12 | 条件 ? 值1 : 值2 | 右结合 | -| 13 | = 、+= 、-= 、*= 、/= | 右结合 | - -### 流程控制语句 - -一、核心作用 - -改变代码默认“从上到下”的执行顺序,实现分支、循环等逻辑,是编程逻辑的核心。 - -二、分支结构(选执行) - -根据条件判断,执行不同代码块,核心是“满足条件才执行”。 - -1. if 单分支 - -- 语法:if (条件表达式) { 满足条件执行的代码 } - -- 要点:条件为true时执行;大括号可省略(仅单条语句时),但推荐写 - -- 示例:if (age > 18) { console.log("成年"); } - -2. if-else 双分支 - -- 语法:if (条件) { 成立执行 } else { 不成立执行 } - -- 要点:二选一,必有一个代码块执行 - -- 示例:age > 18 ? console.log("成年") : console.log("未成年");(三元简化) - -3. if-elif-else 多分支 - -- 语法:if (条件1) { ... } else if (条件2) { ... } else { ... } - -- 要点:依次判断,满足首个条件后后续不执行;else可选(无匹配时不执行) - -4. switch 多值匹配 - -- 语法:switch (变量) { case 值1: 执行; break; default: 默认执行; } - -- 核心:case匹配全等(===);必须加break,否则“穿透”执行下一个case;default处理无匹配情况 - -三、循环结构(重复执行) - -重复执行代码块,直到满足退出条件,核心是“控制循环次数/退出时机”。 - -1. for 循环(已知次数) - -- 语法:for (初始化; 条件; 更新) { 循环体 } - -- 要点:初始化(定义循环变量)→ 判断条件 → 执行循环体 → 更新变量,依次循环 - -- 示例:for (let i=0; i<5; i++) { console.log(i); } // 输出0-4 - -2. while 循环(条件控制) - -- 语法:while (条件表达式) { 循环体; 更新条件 } - -- 要点:先判断条件,true则执行;必须在循环体更新条件,避免死循环 - -- 示例:let i=0; while (i<5) { console.log(i); i++; } - -3. do-while 循环(先执行后判断) - -- 语法:do { 循环体; 更新条件 } while (条件); - -- 要点:无论条件是否成立,循环体至少执行一次 - -四、循环控制关键字 - -- break:立即终止当前循环,跳出循环体执行后续代码 - -- continue:跳过当前循环剩余代码,直接进入下一次循环判断 - -- 注意:仅作用于当前所在循环,嵌套循环中不影响外层 - -五、复习重点 - -1. 分支:if-else处理条件,switch适合固定值匹配;三元运算符简化简单双分支 - -2. 循环:for用在已知次数,while用在条件控制;循环体必须有“退出出口” - -3. 避坑:switch加break;while循环更新条件;不确定作用域用let声明变量 - -## 作业 - -- 综合练习1 - -``` - - - -``` -- 效果图 - - -- 综合练习2 - -``` - -

      请选择你的出生年月

      - - - -``` -- 效果图 - - -- 综合练习3 - -``` -style> - table { - border-collapse: collapse; - - } - - td { - border: 1px solid black; - text-align: center; - padding: 10px; - } - - - - - -
      - -``` -- 效果图 - - -- 万达7号影厅 - -``` - - - - - -
      - - -``` -- 效果图 - - -- 训练5 - -``` - - - -``` -- 效果图 - - -- 训练6 - -``` - - - -``` -- 效果图 - - -- 训练7 - -``` - - - -``` -- 效果图 - diff --git "a/\345\210\230\350\231\271\347\206\240/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\345\210\230\350\231\271\347\206\240/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" deleted file mode 100644 index 6dc8d6dce9bc4721f9111f8c67301ce66f6d810a..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" +++ /dev/null @@ -1,161 +0,0 @@ -## 笔记 - -见1113笔记 - -## 作业 - -- 训练1~3 - -``` - - - -``` -- 效果图 - - -- 训练4~5 - -``` - - - -``` -- 效果图 - - -- 练习6 - -``` - - - -``` -- 效果图 - - -- 练习7 - -``` - - - -
      - -``` -- 效果图 - \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251117-\345\207\275\346\225\260\347\232\204\345\256\232\344\271\211\357\274\214\350\260\203\347\224\250\357\274\214\350\277\224\345\233\236\345\200\274.md" "b/\345\210\230\350\231\271\347\206\240/20251117-\345\207\275\346\225\260\347\232\204\345\256\232\344\271\211\357\274\214\350\260\203\347\224\250\357\274\214\350\277\224\345\233\236\345\200\274.md" deleted file mode 100644 index 0b70d0b0eb4d227cfdc6c7eb77090a12183692e3..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251117-\345\207\275\346\225\260\347\232\204\345\256\232\344\271\211\357\274\214\350\260\203\347\224\250\357\274\214\350\277\224\345\233\236\345\200\274.md" +++ /dev/null @@ -1,79 +0,0 @@ -## 笔记 - -### 函数的定义 -- 函数声明(传统,原始方式):```function functionName(parameters) { - return value; -}``` -- 匿名函数(函数表达式):``` -const functionName = function(parameters) { - return value; -}; -const functionName = function myFunction(parameters) { - return value; -};``` -- 箭头函数:``` -const functionName = (parameters) => { - return value; -}; -const functionName = parameter => { - return value; -}; -const functionName = (parameters) => value;``` - -### 函数的参数 - -= 函数的参数分为形式参数(形参)和实际参数(实参)。形式参数为函数赋予的参数,代表函数的位置和类型。 - -### 函数的返回值 - -1. 函数可以通过 return 语句返回一个值给调用者。如果函数没有 return 语句,或 return 后面没有跟任何值,则函数会返回 undefined。语法:``` -function functionName() { - // 执行一些操作 - return value; // 返回值 -}``` - -2.return 语句会立即终止函数的执行,并将控制权返回给调用者。 - -函数只能返回一个值。如果需要返回多个值,可以将它们打包成数组或对象。 - -## 作业 - -- 训练1: - -``` - - - -``` -- 效果图 - - -- 训练2: - -``` - - - -``` -- 效果图 - - diff --git "a/\345\210\230\350\231\271\347\206\240/20251119-\345\207\275\346\225\260(\351\200\222\345\275\222\357\274\214\345\206\205\347\275\256\345\207\275\346\225\260\347\255\211)\345\222\214\345\257\271\350\261\241.md" "b/\345\210\230\350\231\271\347\206\240/20251119-\345\207\275\346\225\260(\351\200\222\345\275\222\357\274\214\345\206\205\347\275\256\345\207\275\346\225\260\347\255\211)\345\222\214\345\257\271\350\261\241.md" deleted file mode 100644 index e86bf8a12d245ae28370f983cac8014ee3cac4c5..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251119-\345\207\275\346\225\260(\351\200\222\345\275\222\357\274\214\345\206\205\347\275\256\345\207\275\346\225\260\347\255\211)\345\222\214\345\257\271\350\261\241.md" +++ /dev/null @@ -1,295 +0,0 @@ -## 笔记 - -### 函数 - -1.函数的返回值 - -- 在函数中返回一个值,以便于被其他函数使用。 - -2.递归函数 - -- 在函数自身的函数体调用自身。如处理阶乘问题 - -- 定义递归函数的两个必要条件 - - - 一个结束递归(终点) - - - 一个递归调用(靠近终点的一步) - -3. js中的内置函数 - -- 主要内置函数 - -(1)数值处理函数 -- Math.abs(x): 返回 x 的绝对值。 -- Math.ceil(x): 向上取整。 -- Math.floor(x): 向下取整。 -- Math.round(x): 四舍五入。 -- Math.max(a, b, ...): 返回一组数中的最大值。 -- Math.min(a, b, ...): 返回一组数中的最小值。 -- Math.random(): 返回一个 0(包含)到 1(不包含)之间的随机浮点数。 -- Math.pow(base, exponent): 返回基数(base)的指数(exponent)次幂。 -- Math.sqrt(x): 返回 x 的平方根。 - -(2)字符串处理函数 -- charAt(index): 返回指定索引位置的字符。 -- concat(str1, str2, ...): 连接两个或多个字符串。 -- includes(searchString, position): 判断一个字符串是否包含在另一个字符串中。 -- indexOf(searchValue, fromIndex): 返回指定值在字符串中首次出现的索引。 -- lastIndexOf(searchValue, fromIndex): 返回指定值在字符串中最后出现的索引。 -- length: (属性) 返回字符串的长度。 -- replace(regexp|substr, newSubstr|function): 替换字符串中的匹配项。 -- slice(startIndex, endIndex): 提取字符串的一部分,并返回一个新字符串。 -- split(separator, limit): 将字符串分割成字符串数组。 -- toLowerCase(): 将字符串转换为小写。 -- toUpperCase(): 将字符串转换为大写。 -- trim(): 去除字符串两端的空白字符。 - -4. 匿名函数 - -- 在表达式中定义匿名函数,没有名字 - -- 使用function()构造函数定义匿名函数 - -## 作业 - -- 训练3: - -``` - - - -``` -- 效果图 - - -- 训练4: - -``` - - - -``` -- 效果图 - - -- 训练5: - -``` - - - -``` -- 效果图 - - -- 训练6: - -``` - - - -``` -- 效果图 - - -- 训练7: - -``` - - - -``` -- 效果图 - - -- 训练8: - -``` - - - -``` -- 效果图 - - -- 斐波那契数列: - -``` - - - -``` -- 效果图 - - -- 综合练习1: - -``` - - - -``` -- 效果图 - - -- 综合练习2: - -``` - - - -``` -- 效果图 - - -- 综合练习3: - -``` - - - - - -
      - -``` -- 效果图 - - - diff --git "a/\345\210\230\350\231\271\347\206\240/20251120-\346\223\215\344\275\234\345\257\271\350\261\241\345\222\214\345\206\205\351\203\250\345\257\271\350\261\241.md" "b/\345\210\230\350\231\271\347\206\240/20251120-\346\223\215\344\275\234\345\257\271\350\261\241\345\222\214\345\206\205\351\203\250\345\257\271\350\261\241.md" deleted file mode 100644 index f228802a40ea54991534bd349a86caea8b3292cc..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251120-\346\223\215\344\275\234\345\257\271\350\261\241\345\222\214\345\206\205\351\203\250\345\257\271\350\261\241.md" +++ /dev/null @@ -1,139 +0,0 @@ -## 笔记 - -### 对象的定义 - -- 一个使用大括号包裹内容的容器。 - -- 注意: 在对象中,this 关键字通常指向调用该方法的对象本身。 - -### 操作对象 - -1. 访问属性 - -- “对象名.属性名” - -- “对象名[属性名]” - -2. 添加属性 - -- "对象名 新属性.新值" - -3. 删除属性 - -- “delete 对象名.属性值;” - -4.添加方法 - -5.遍历对象 - -- for...in 循环: 用于遍历对象自身的和继承的可枚举属性(不推荐直接用于遍历数据属性)。 -- Object.keys() / Object.values() / Object.entries(): 推荐用于遍历对象的属性、值或键值对。它们只返回对象自身的属性。 - -### js内部对象/内置对象 - -1. Math对象 - -- 常用属性: - - Math.PI: 返回圆周率 (π)。 -- 常用方法: - - Math.abs(x): 返回 x 的绝对值。 - - Math.round(x): 把 x 四舍五入为最接近的整数。 - - Math.ceil(x): 向上取整。 - - Math.floor(x): 向下取整。 - - Math.random(): 返回 0(包含)到 1(不包含)之间的随机数。 - - Math.max(x, y, ...): 返回一组数中的最大值。 - - Math.min(x, y, ...): 返回一组数中的最小值。 - -2. Date对象 - -- 创建 Date 对象: - - new Date(): 创建一个表示当前日期和时间的对象。 - - new Date(milliseconds): 从 1970 年 1 月 1 日 00:00:00 UTC 开始计算的毫秒数。 - - new Date(dateString): 从一个日期字符串(如 "2023-10-27")创建日期对象。 - - new Date(year, month, day, hours, minutes, seconds, milliseconds): 注意月份是 0-11。 -- 常用方法: - - getFullYear(): 获取年份(四位数)。 - - getMonth(): 获取月份(0-11)。 - - getDate(): 获取日(1-31)。 - - getDay(): 获取星期几(0-6,0 是星期日)。 - - getHours(): 获取小时(0-23)。 - - getMinutes(): 获取分钟(0-59)。 - - getSeconds(): 获取秒(0-59)。 - - toLocaleString(): 将日期转换为本地时间字符串。 - - toISOString(): 将日期转换为 ISO 格式的字符串。 - -3. Event对象 - - - 训练1: - - ``` - - - ``` - - 效果图 - - - - - 训练2: - - ``` - - - ``` - - - 效果图 - - - - - 训练3: - - ``` - - - ``` - - 效果图 - \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251121-Event\345\257\271\350\261\241\345\222\214\346\225\260\347\273\204.md" "b/\345\210\230\350\231\271\347\206\240/20251121-Event\345\257\271\350\261\241\345\222\214\346\225\260\347\273\204.md" deleted file mode 100644 index 2012c2158a9a4a840d111760156f362b959bfad2..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251121-Event\345\257\271\350\261\241\345\222\214\346\225\260\347\273\204.md" +++ /dev/null @@ -1,29 +0,0 @@ -## 笔记 - -### Event对象 - -- Event对象代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。 -- 常见事件类型: - - click: 鼠标点击元素。 - - dblclick: 鼠标双击元素。 - - mouseover / mouseout: 鼠标移入 / 移出元素。 - - keydown / keyup: 键盘按键按下 / 松开。 - - input / change: 表单元素内容变化。 - - submit: 表单提交。 - - load: 页面或图像加载完成。 -- Event 对象的常用属性和方法: - - event.type: 返回事件的类型(如 "click")。 - - event.target: 返回触发事件的元素(事件源)。 - - event.currentTarget: 返回当前正在处理事件的元素(即事件监听器所绑定的元素)。 - - event.preventDefault(): 阻止事件的默认行为(如阻止链接跳转、表单提交)。 - - event.stopPropagation(): 阻止事件在 DOM 树中向上冒泡。 - - event.key: (对于键盘事件) 返回按下的键名。 - - event.clientX / event.clientY: (对于鼠标事件) 返回鼠标在浏览器窗口可视区的 X/Y 坐标。 - - -1.altKey属性 - -2.ctrlKey属性 - -3.shiftKey属性 -### 数组 \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251124-\346\225\260\347\273\204\343\200\201\351\233\206\345\220\210\344\270\216String\345\257\271\350\261\241.md" "b/\345\210\230\350\231\271\347\206\240/20251124-\346\225\260\347\273\204\343\200\201\351\233\206\345\220\210\344\270\216String\345\257\271\350\261\241.md" deleted file mode 100644 index 2447d36e9825a69372b23e3dce04f06e94f2814e..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251124-\346\225\260\347\273\204\343\200\201\351\233\206\345\220\210\344\270\216String\345\257\271\350\261\241.md" +++ /dev/null @@ -1,268 +0,0 @@ -## 笔记 - -### 数组对象的方法 - -1.数组的添加和删除 - -- concat()方法:合并两个 / 多个数组,返回新数组,不修改原数组 - -- shift()方法:删除数组第一个元素,返回被删除元素,修改原数组 - -- pop()方法:删除数组最后一个元素,返回被删除元素,修改原数组 - -- push()方法:向数组末尾添加一个 / 多个元素,返回新数组长度,修改原数组 - -- unshift()方法:向数组开头添加一个 / 多个元素,返回新数组长度,修改原数组 - -2.数组的排列顺序 - -- reverse()方法:反转数组元素顺序,修改原数组,返回反转后的数组 - -- sort()方法:对数组元素排序,默认按字符串 Unicode 码点排序,可传排序函数自定义规则,修改原数组 - -3.获取数组中的某段数组元素 - -- slice()方法 - -4.将数组换成字符串 - -- toString()方法 - -- toLocateString()方法 - -- join()方法 - -### Map集合 - -- size:属性,返回 Map 集合中键值对的数量 - -- get(key):方法,获取指定键对应的值,键不存在返回 undefined - -- set(key, value):方法,向 Map 中添加 / 修改键值对,返回 Map 本身(可链式调用) - -### String对象的方法 - -1. 字符串查找与判断 - -- indexOf (子串 [, 起始索引]):查找子串首次出现的索引,未找到返回 - 1 -- lastIndexOf (子串 [, 起始索引]):查找子串最后一次出现的索引,未找到返回 - 1 -- includes (子串 [, 起始索引]):判断字符串是否包含指定子串,返回布尔值 -- startsWith (子串 [, 起始索引]):判断字符串是否以指定子串开头,返回布尔值 -- endsWith (子串 [, 长度]):判断字符串(前指定长度)是否以指定子串结尾,返回布尔值 - -2. 字符串截取与分割 -- slice (起始索引 [, 结束索引]):截取指定范围字符串,返回新字符串,支持负数索引 -- substring (起始索引 [, 结束索引]):截取指定范围字符串,负数索引自动转为 0 -- split (分隔符 [, 限制长度]):按分隔符将字符串分割为数组,返回新数组 -- substr (起始索引 [, 长度]):按起始索引 + 长度截取字符串(非标准,建议用 slice 替代) - -3. 字符串替换与匹配 -- replace (匹配项,替换值):替换指定匹配项(默认仅第一个),可结合正则全局替换,返回新字符串 -- match (正则):查找与正则匹配的子串,返回匹配数组(未找到返回 null) -- search (正则):查找正则首次匹配的索引,未找到返回 - 1 - -4. 字符串转换与格式化 -- toUpperCase ():将字符串转为大写,返回新字符串 -- toLowerCase ():将字符串转为小写,返回新字符串 -- trim ():去除字符串首尾空白字符,返回新字符串 - -**charAt (索引):返回指定索引位置的字符** -**indexOf (子串 [, 起始索引]):查找子串首次出现的索引,未找到返回 - 1** - -## 作业 - -- 训练1 - -``` - - -``` - -- 效果图: - -- 训练2 - -``` - - -``` - -- 效果图: - - -- 训练3 - -``` - - -``` - -- 效果图: - -- 训练1 - -``` - - -``` - -- 效果图: - -- 训练2 - -``` - - -``` - -- 训练3 - -``` - - -``` - -- 效果图: - -- 综合练习1 - -``` - - -``` - -- 效果图: - -- 综合练习2 - -``` - - - -``` - -- 效果图: - -- 综合练习1 - -``` - - -``` - -- 效果图: - -- 综合练习2 - -``` - - -``` - -- 效果图: - -- 综合练习3 - -``` - - - -``` - -- 效果图: diff --git "a/\345\210\230\350\231\271\347\206\240/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\345\210\230\350\231\271\347\206\240/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 891fe15352f1685f4f6da17f41a2638dea30e7f2..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,58 +0,0 @@ -## 笔记 - -1. 正则表达式:用于匹配字符串中字符组合的模式,属于对象类型,可用于字符串的查找、替换、验证等操作。 - -2. 创建方式 - -| 方式 | 语法 | 适用场景 | -| :------- | :-------------------------------- | :--------------------------- | -| 字面量 | `const reg = /pattern/flags;` | 固定模式,书写简洁 | -| 构造函数 | `const reg = new RegExp(pattern, flags);` | 动态生成模式(如变量拼接) | - -3. 核心组成 - -pattern(模式):要匹配的字符 / 规则(如 a、\d、[0-9]); -flags(修饰符):控制匹配行为,可选: - -| 修饰符 | 作用 | -| :----- | :------------------------------------- | -| g | 全局匹配(找到所有匹配项,而非第一个) | -| i | 忽略大小写 | -| m | 多行匹配(^/$ 匹配每行开头/结尾) | -| s | 允许 . 匹配换行符(ES2018+) | -| u | 支持 Unicode 字符(如匹配中文、表情) | -| y | 粘性匹配(从上次匹配位置开始) - -**特殊字符(转义后匹配)** - -| 规则 | 含义 | 示例 | -| :--- | :----------------------------------------- | :------------------------------------------------ | -| \ | 转义符(匹配特殊字符本身) | /\./ → 匹配 .,而非任意字符;/\*/ → 匹配 * | -| \d | 数字(等价 [0-9]) | /\d/ → 匹配 8 | -| \D | 非数字(等价 [^0-9]) | /\D/ → 匹配 a、% | -| \w | 字母/数字/下划线(等价 [a-zA-Z0-9_]) | /\w/ → 匹配 _、5、A | -| \W | 非字母/数字/下划线 | /\W/ → 匹配 $、空格 | -| \s | 空白字符(空格、制表符\t、换行\n 等) | /\s/ → 匹配 空格、\n | -| \S | 非空白字符 | /\S/ → 匹配 a、9 | -| \b | 单词边界(如空格、标点分隔的单词) | /\bhello\b/ → 匹配 "hello",不匹配 "helloworld" | -| \B | 非单词边界 | /\Bll\B/ → 匹配 "hello" 中的 ll | -**量词(匹配次数)** - -| 规则 | 含义 | 示例 | -| :----------- | :----------------------------- | :-------------------------------------------------- | -| * | 匹配 0 次或多次(贪婪) | /a*/ → 匹配 ""、a、aaa | -| + | 匹配 1 次或多次(贪婪) | /a+/ → 匹配 a、aaa,不匹配 "" | -| ? | 匹配 0 次或 1 次(贪婪) | /a?/ → 匹配 ""、a | -| {n} | 匹配恰好 n 次 | /a{3}/ → 匹配 aaa,不匹配 aa | -| {n,} | 匹配至少 n 次 | /a{2,}/ → 匹配 aa、aaa | -| {n,m} | 匹配 n 到 m 次 | /a{2,4}/ → 匹配 aa、aaa、aaaa | -| ?(量词后) | 非贪婪匹配(尽可能少匹配) | /a+?/ → 匹配 "aaa" 时只取第一个a | - -**易错点** -| 方法 | 易错点 | 避坑方案 | -| :----- | :-------------------------------------- | :-------------------------------- | -| search | 加 `g` 修饰符无效 | 无需加 `g`,直接匹配第一个即可 | -| replace| 忘记加 `g` 导致只替换第一个 | 全局替换必加 `g` 修饰符 | -| replace| 反向引用写错(如 `$0` 不是第一个分组) | 分组从 `$1` 开始,`$0` 是整个匹配项 | -| split | 正则分组分隔时漏处理保留的分隔符 | 按需过滤数组中的分隔符(如 `filter`) | -| 通用 | 特殊字符未转义(如 `.` `*` `|`) | 匹配特殊字符前加 `\` 转义 | \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225\357\274\214\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\345\210\230\350\231\271\347\206\240/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225\357\274\214\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 089251c75500a9f421e5126e90b172712851c11d..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225\357\274\214\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,174 +0,0 @@ -## 笔记 - -### 异常处理与程序调试 - -#### 异常处理 - -1. 异常类型 - -2. 触发onerror事件处理异常 - -3. 使用try…catch…finall语句处理异常 - -#### 程序调试 - -- 使用alert语句调试 - -- 使用write语句调试 - -- 使用抛出自定义异常消息调试 - -### 事件处理 - -#### javascript常用事件 - -#### DOM事件模型 - -1. 取消事件传递和默认处理 - -- 取消事件传递是指停止捕获型事件或冒泡的进一步传递 - -- 事件传递后的默认处理是指浏览器在事件传递并处理完后,会执行与该事件关联的默认动作 - - (1)取消浏览器的事件传递: 调用event对象的stopPropagation()方法 - - (2)取消事件传递后的默认处理:调用event对象的preventDefault()方法 - -#### 鼠标和键盘事件 - -- click:鼠标单击元素时触发(左键双击时会先触发两次click再触发dblclick) -- dblclick:鼠标双击元素时触发 -- mousedown:鼠标按下(任意键)时触发 -- mouseup:鼠标按键松开时触发 -- mouseover:鼠标指针移动到元素或其子元素上时触发(会冒泡) -- mouseout:鼠标指针离开元素或其子元素时触发(会冒泡) -- mousemove:鼠标指针在元素内部移动时持续触发 -- contextmenu:右键点击元素时触发(可用于自定义右键菜单) - -## 作业 - -- 训练1 - -``` - - - -``` - -- 效果图 - - - -- 训练2 - -``` - - - - -``` - -- 效果图 - - - -- 综合练习1 - -``` - -

      输入1~5的数字

      - - -
      - - - -``` - -- 效果图 - - - - -- 综合练习2 - -``` - - - - - - - - - - - -
      用户名:
      密码:
      - -
      - - -``` - -- 效果图 - - \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251128-\350\241\250\345\215\225\347\233\270\345\205\263\344\272\213\344\273\266.md" "b/\345\210\230\350\231\271\347\206\240/20251128-\350\241\250\345\215\225\347\233\270\345\205\263\344\272\213\344\273\266.md" deleted file mode 100644 index 74b3a0cd1f9859f48f27742bdb3ebde0d494957c..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251128-\350\241\250\345\215\225\347\233\270\345\205\263\344\272\213\344\273\266.md" +++ /dev/null @@ -1,231 +0,0 @@ -## 笔记 -### Dom事件 -1. 事件三要素 -- 事件源:触发事件的 DOM 元素(如button、input) -- 事件类型:事件的名称(如click、keydown) -- 事件处理程序:事件触发时执行的函数(回调函数) -2. 事件绑定方式 --HTML 属性绑定:(不推荐,耦合性高) -- DOM 属性绑定:element.onclick = function() {}(同一事件只能绑定一个处理函数) -- 事件监听:element.addEventListener('click', handleClick)(推荐,可绑定多个处理函数,支持事件捕获 / 冒泡 -#### 鼠标事件 - -事件名 触发时机 - -click 鼠标左键单击元素 - -dblclick 鼠标左键双击元素 - -mousedown 鼠标按下(任意键) - -mouseup 鼠标松开(任意键) - -mouseover 鼠标移入元素(含子元素) - -mouseout 鼠标移出元素(含子元素) - -mousemove 鼠标在元素内移动时(高频触发) - -contextmenu 右键单击(可用于自定义右键菜单) - -#### 事件对象属性(event): - -- clientX/clientY:鼠标相对浏览器可视区域的坐标 -- pageX/pageY:鼠标相对文档页面的坐标(含滚动距离) -- button:鼠标按键(0 = 左键,1 = 中键,2 = 右键) -#### 键盘事件 -- 与键盘操作相关的事件(通常绑定在document或表单元素上): -事件名 触发时机 - -keydown 键盘按下(持续按住会重复触发) - -keyup 键盘松开 - -keypress 按下字符键(不包括 Ctrl、Shift 等,已逐渐被弃用) - -**事件对象属性**: -- key:按下的键值(如'Enter'、'a') -- keyCode:键的 ASCII 码(如 Enter=13,已逐渐被key替代) -- ctrlKey/shiftKey/altKey:是否同时按下对应修饰键 - -#### 表单事件 - -针对表单元素(input、select、textarea等)的事件: - -事件名 触发时机 - -input 表单值发生变化时(实时触发,如输入、粘贴) - -change 表单值改变且失去焦点时(如下拉框选择后、输入框失焦) - -focus 元素获得焦点(如点击输入框) - -blur 元素失去焦点(如点击输入框外区域) - -submit 表单提交时(绑定在
      元素上) - -reset 表单重置时 - -## 作业 - -- 训练1 -``` - - - - - -``` -- 效果图: - - -- 训练2 -``` -
      中国的“国球”是:()
      -
      - A.篮球 - B.排球 - C.乒乓球 - D.羽毛球 -
      - - - -``` -- 效果图: - - -- 训练3 -``` - - - -``` -- 效果图: - - -- 训练4 -``` - - - -``` -- 效果图: - - -- 训练5 -``` - - - - -
      - - - -``` -- 效果图: - - -- 训练6 -``` - - - - - - - - -``` -- 效果图: - - -- 训练7 -``` - - -

      用户登录

      - 账号:

      - 密码:

      - - -
      - - -``` -- 效果图: - \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" "b/\345\210\230\350\231\271\347\206\240/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" deleted file mode 100644 index f3ec23f959c97b7aa8060f845d403feb1c952629..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" +++ /dev/null @@ -1,154 +0,0 @@ -## 笔记 -### 编辑事件 -#### 文本编辑事件 -- 文本编辑事件是对浏览器的内容进行复制、剪切、粘贴和选择时所触发的事件。 -1. 复制事件 -- 包括**onbeforecopy**(将网页内容复制到粘贴板)和**oncopy**(在网页复制内容) -- 注意:onbeforecopy、oncopy调用的是自定义函数,必须在函数名称前加return语句,否则都会允许复制。 - -2. 剪切事件 -- 包括**onbeforecut**(内容被剪切到系统剪贴板触发)和**oncut**(被选中的内容被选中时触发) -- 适用范围:仅作用于input、textarea等可编辑元素,普通静态文本无法触发 -- 不允许在 ``````显示任何标记(比如:"<"和">"符号,可用"<"和">"代替) -3. 粘贴事件 -- 包括**onbeforepaste**(粘贴到页面触发)和**onpaste**(内容被粘贴时触发) -- 仅作用于可编辑元素,粘贴目标需处于可输入状态 -- 用return语句返回true或false是无效的 -4. 选择事件 -- 包括**onbeforeselect**(开始对文本内容选择时触发)和**onselect**(文本内容被选择时触发) -#### 对象拖放事件 -1. 拖放对象事件 -- 拖放事件包括ondrag、ondragend和ondragstart事件 - - ondragstart 按住鼠标开始拖的一瞬间(只触发 1 次) - - ondrag 拖拽过程中一直触发(动一下就触发) - - ondragend 松开鼠标 / 取消拖拽的一瞬间(只触发 1 次) -2. 放置目标事件 -- 包括ondragenter、ondragover、ondragleave、ondrop - - ondragenter 拖的东西刚进目标区域的一瞬间 - - ondragover 拖的东西在目标区域里移动时,一直触发 - - ondragleave 拖的东西离开目标区域的一瞬间 - - ondrop 松开鼠标,把东西放到目标上的一瞬间 -## 作业 - -- 训练8关键代码: -``` - - - -

      拖放图片

      -
      - 图片 -
      -
      将图片拖动到这里
      - - -``` - -- 训练9关键代码: -``` - - - -
      -

      这是一段文本

      -
      -
      - -``` - -- 综合练习1关键代码: -``` - -
      -
      - 欢迎购买明日科技图书
      -
      - - -``` - -- 综合练习2关键代码: -``` - - - - -``` - -- 综合练习3关键代码: -``` - - - - -``` \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251203-Document\345\257\271\350\261\241.md" "b/\345\210\230\350\231\271\347\206\240/20251203-Document\345\257\271\350\261\241.md" deleted file mode 100644 index 34bdce6041c369dac7b18ec62df62c977d40663c..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251203-Document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,236 +0,0 @@ -## 笔记 -### Document对象的常用属性和方法 -1. 常用属性 - -| 属性名 | 作用 | 示例 | -|-----------------------|----------------------------------------------------------------------|----------------------------------------------------------------------| -| document.title | 获取 / 设置页面标题(``标签内容) | `document.title = "新标题";`(动态改标题) | -| document.body | 获取`<body>`标签对象 | `document.body.style.backgroundColor = "red";`(改页面背景) | -| document.URL | 获取当前页面完整 URL(只读) | `console.log(document.URL);`(打印地址栏链接) | -| document.readyState | 获取文档加载状态:<br>1. `loading`(加载中)<br>2. `interactive`(可交互,DOM 加载完)<br>3. `complete`(完全加载) | 监听文档加载完成:<br>```javascript<br>if(document.readyState === "complete") { ... }<br>``` | -| document.documentElement | 获取`<html>`根标签 | `let html = document.documentElement;`(获取根标签,适配视口高度) | - -2. 常用方法 - -| 方法名 | 作用 | 核心示例 | 适用场景 | -|-----------------------------|----------------------------------------------------------------------|-------------------------------------------|---------------------------------------| -| getElementById(id) | 通过 ID 获取唯一元素(高频) | `let box = document.getElementById("box");` | 快速定位单个元素(如按钮、容器) | -| querySelector(selector) | 通过选择器(类 / 标签 / ID)获取第一个匹配元素 | `let box = document.querySelector(".box");` | 兼容类名 / ID / 标签选择,灵活通用 | -| querySelectorAll(selector) | 获取所有匹配选择器的元素(返回伪数组) | `let imgs = document.querySelectorAll("img");` | 批量获取同类型元素(如所有图片) | -| createElement(tag) | 创建新的 HTML 元素 | `let img = document.createElement("img");` | 动态添加标签(如新增图片、按钮) | -| appendChild(node) | 将创建的元素添加到父元素中 | `box.appendChild(img);` | 把动态创建的元素插入页面 | -| getElementsByClassName(className) | 通过类名获取元素集合(返回实时更新的HTMLCollection) | `let items = document.getElementsByClassName("item");` | 批量获取同 className 元素 | -| write(html) | 向文档写入 HTML 内容(慎用,易覆盖页面) | `document.write("<h1>标题</h1>");` | 直接输出内容(仅临时测试用,不推荐) | - -### 对象的应用 -1. 设置文档背景色和前景色 -``` // 改页面背景色(body)+ 文本色 -document.body.style.backgroundColor = "#f5f5f5"; // 背景色 -document.body.style.color = "#333"; // 前景色(文本色) -``` - -2. 设置动态标题栏 -```// 示例:定时修改标题 -let count = 0; -setInterval(() => { - document.title = `新标题${count++}`; // 实时修改<title>内容 -}, 1000); -``` -3. 获取URL -```let currentUrl = document.URL; // 获取完整URL:如http://localhost:8080/test.html -let host = document.location.host; // 拓展:获取域名+端口(如localhost:8080) -console.log("当前页面URL:", currentUrl); -``` -4. 获取当前文档的状态 -5. 动态添加html标记 -```// 案例:点击按钮添加图片(考前必记) -let addBtn = document.getElementById("addBtn"); -addBtn.onclick = function() { - // 1. 创建元素 - let img = document.createElement("img"); - // 2. 设置元素属性 - img.src = "./pic.jpg"; - img.width = 100; - // 3. 添加到页面容器 - let box = document.querySelector(".box"); - box.appendChild(img); -}; -``` -6. 获取文本框并修改内容 - -```function changeTxt() { - // 1. 获取文本框 - let txtInput = document.getElementById("txtInput"); - // 2. 读取内容 - console.log("原内容:", txtInput.value); - // 3. 修改内容 - txtInput.value = "新的文本内容"; - // 拓展:清空文本框 - // txtInput.value = ""; -} -``` -## 作业 - -- 训练1关键代码 - -``` -<style> - #container { - background-color: aquamarine; - color: yellow; - width: 150px; - height: 150px; - text-align: center; - } -</style> - -<body> - <div id="container"> - <h3>这是一段文字</h3> - </div> - <input type="button" id="btn" value="交互颜色" onclick="exChange()"> - <script> - let click=true; - function exChange() { - let color1=click?"yellow":"aquamarine"; - let color2=click?"aquamarine":"yellow"; - let change = document.getElementById("container"); - change.style.backgroundColor = color1; - change.style.color = color2; - click=!click; - } - </script> -</body> -``` - -- 训练2关键代码 - -``` -<body> - <script> - let fileName = document.URL; - let spiltfile = fileName.split("/").pop(); - let reslut = spiltfile.split(/[?#]/)[0]; - document.write("获取当前文档的文件名:" + reslut); - </script> -</body> -``` - -- 训练3关键代码 - -``` -<body> - <input type="button" id="btn" value="添加文字" onclick="btnAdd()"> - <input type="text" id="text"> - <div id="box"><span></span></div> - <script> - let box = document.getElementById("box"); - function btnAdd() { - let span = document.createElement("span"); - box.appendChild(span); - let text1 = document.getElementById("text").value; - let str = text1 || "这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字"; - function addText() { - for (let i = 0; i < str.length; i++) { - setTimeout(() => { - }, 1000); - span.innerText += str[i]; - } - } addText(); - } - </script> -</body> -``` - -- 综合练习1关键代码 - -``` -<style> - #box{ - background-color: white; - color: black; - } -</style> -<body id="box"> - <select name="theme" id="btnTheme"> - <option value="1">请选择主题</option> - <option value="green">绿色主题</option> - <option value="blue">蓝色主题</option> - <option value="pink">粉色主题</option> - </select> - <div id="container"> - <h3>李白《行路难・其一》</h3> - <p> - 金樽清酒斗十千,玉盘珍羞直万钱。<br> - 停杯投箸不能食,拔剑四顾心茫然。<br> - 欲渡黄河冰塞川,将登太行雪满山。<br> - 闲来垂钓碧溪上,忽复乘舟梦日边。<br> - 行路难,行路难,多歧路,今安在?<br> - 长风破浪会有时,直挂云帆济沧海。 <br> - </p> - </div> - <script> - let btnTheme = document.getElementById("btnTheme"); - let box = document.getElementById("box"); - btnTheme.addEventListener('click', function () { - let changeColor = btnTheme.value; - box.style.backgroundColor = changeColor; - box.style.color="white"; - }) - </script> -</body> -``` - -- 综合练习2关键代码 - -``` -<body> - <a href="#" onclick="btnOpen()">打开图片对话框</a> - <div id="box"> - </div> - <script> - function btnOpen() { - let box = document.getElementById("box"); - box.innerHTML = ""; - let img = document.createElement("img"); - img.src = './pic.jpg'; - img.height = 100; - img.width = 100; - box.appendChild(img); - let delBtn = document.createElement("input"); - delBtn.type = "button"; - delBtn.value = "删除"; - delBtn.onclick = delImg; - box.appendChild(delBtn); - } - function delImg() { - let box = document.getElementById("box"); - box.innerHTML = ""; - } - </script> -</body> -``` - -- 综合练习3关键代码 - -``` -<body> - <input type="button" value="添加用户头像" id="addBtn"> - <div class="box"></div> - <script> - let arrImg = ["./pic.jpg", "./pic2.jpg", "./pic3.jpg"]; - let addBtn = document.getElementById("addBtn"); - let box = document.querySelector(".box"); - addBtn.addEventListener('click',function(){ - arrImg.forEach((imgSrc,i)=>{ - setTimeout(()=>{ - let img=document.createElement("img"); - img.width=100; - img.height=100; - img.src=imgSrc; - box.appendChild(img); - },i*500); - }); - }) </script> -</body> -``` \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\210\230\350\231\271\347\206\240/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index fb57480661f1c66c9200108a14aa21e39767bfdf..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,277 +0,0 @@ -## 笔记 - -### DOM 节点属性 -1. 访问指定节点 -2. 遍历文档树 -### 节点 -1. 创建节点 - -| 方法 | 作用 | 示例 | 注意点 | -| :--- | :--- | :--- | :--- | -| `document.createElement('标签名')` | 创建元素节点 | `let newDiv = document.createElement('div');` | 仅创建节点,需通过 `appendChild`/`insertBefore` 插入文档才会显示 | -| `document.createTextNode('文本')` | 创建文本节点 | `let text = document.createTextNode('Hello');` | 可通过 `newDiv.appendChild(text)` 追加到元素节点中,纯文本无标签 | -| `document.createAttribute('属性名')` | 创建属性节点 | `let attr = document.createAttribute('class'); attr.value = 'box'; newDiv.setAttributeNode(attr);` | 1. 需手动设置 `value` 赋值属性值;<br>2. 更简洁替代:`newDiv.setAttribute('class','box')`;<br>3. 创建后需通过 `setAttributeNode` 绑定到元素 | - -2. 插入节点 - -| 方法 | 作用 | 示例 | 注意点 | -| :--- | :--- | :--- | :--- | -| `父节点.appendChild(子节点)` | 追加到父节点子节点末尾 | `document.body.appendChild(newDiv);` | 最常用,若节点已存在则移动位置(而非复制) | -| `父节点.insertBefore(新节点, 参考节点)` | 插入到参考节点之前 | `ul.insertBefore(newLi, ul.children[0]);` | 参考节点为 null 时,等同于 appendChild | -| `节点.cloneNode(true/false) + 插入方法` | 复制后插入 | `let copyDiv = newDiv.cloneNode(true); document.body.appendChild(copyDiv);` | true = 深复制(含所有子节点);false = 浅复制(仅节点本身);复制后需手动插入文档才显示 | - -3. 复制节点 -- 语法:node.cloneNode(deep) -- 考点: - - deep=true:复制节点本身 + 所有子节点(深拷贝); - - - deep=false:仅复制节点本身(浅拷贝); - - - 复制后的节点需手动插入文档才显示; - - - 若节点有 id,复制后需修改 id(避免重复)。 - -4. 删除于替换节点 - -| 方法 | 作用 | 示例 | 注意点 | -| :--- | :--- | :--- | :--- | -| `父节点.removeChild(子节点)` | 删除指定子节点 | `ul.removeChild(ul.children[0]);` | 1. 必须通过父节点删除目标子节点;<br>2. 返回被删除的节点(可重新插入文档复用);<br>3. 若子节点不存在会报错,需先判空 | -| `节点.remove()` | 节点自身删除(ES6 新增) | `li.remove();` | 1. 更简洁,无需查找父节点,直接删除自身;<br>2. 兼容性:主流浏览器均支持,低版本 IE 不兼容 | -| `父节点.replaceChild(新节点, 旧节点)` | 替换节点 | `div.replaceChild(newP, oldP);` | 1. 旧节点会被移除出文档,新节点插入旧节点原位置;<br>2. 若新节点已存在于文档中,会先移除再替换;<br>3. 返回被替换的旧节点(可复用) | - -### 获取文档中的指定元素 -1. 通过元素的id属性获取元素 -**通过 id 属性获取(唯一)** -- 语法:document.getElementById('id值') -- 考点: - - 返回值:匹配的元素节点(唯一),无匹配则 null; - - 注意:id 是唯一标识,页面不能重复; - - 简写:window.xxx(xxx 为 id 名),但不推荐(易冲突)。 -2. 通过元素的class属性获取元素 -**通过 class 属性获取(多个)** -- 语法:document.getElementsByClassName('class值') / 元素.getElementsByClassName('class值') -- 考点: - - 返回值:HTMLCollection 集合(类数组),无匹配则空集合; - - 可通过索引访问(xxx[0])、遍历(for 循环); - - 动态集合:文档中 class 变化时,集合自动更新; - - 补充:element.classList(操作 class 的高频 API): - - add('类名'):添加类; - - remove('类名'):删除类; - - toggle('类名'):切换类(有则删,无则加); - - contains('类名'):判断是否包含类(返回布尔)。 -3. 其他方式 - -| 方法 | 作用 | 考点 | -| :--- | :--- | :--- | -| `document.getElementsByTagName('标签名')` | 通过标签名获取元素 | 1. 返回值为 HTMLCollection(类数组);<br>2. 标签名写 `*` 表示匹配所有元素;<br>3. 动态集合:文档中元素变化时,集合自动更新 | -| `document.getElementsByName('name值')` | 通过 name 属性获取元素 | 1. 返回值为 NodeList(类数组);<br>2. 常用于单选框/复选框(通过 name 分组);<br>3. 部分浏览器中为动态集合 | -| `document.querySelector('选择器')` | 通过 CSS 选择器获取第一个匹配元素 | 1. 选择器语法与 CSS 一致(#id/.class/标签/复合选择器等);<br>2. 无匹配元素时返回 null;<br>3. 仅返回第一个匹配元素 | -| `document.querySelectorAll('选择器')` | 通过 CSS 选择器获取所有匹配元素 | 1. 返回值为 NodeList(静态集合,文档变化不更新);<br>2. 需通过遍历(for/forEach)访问子元素;<br>3. 选择器语法同 CSS,支持复杂选择器(如 `div.box > p`) | - -## 作业 - -- 训练1关键代码: - -``` -<body> - <input type="text" id="text" placeholder="请输入文字"> - <select name="selectColor" id="selectColor"> - <option value="blue">蓝色</option> - <option value="green">绿色</option> - <option value="gold">金黄色</option> - <option value="pink">粉色</option> - <option value="purple">紫色</option> - </select> - <input type="button" id="btnColor" value="添加"> - <div id="getTxt"></div> - <script> - let text = document.getElementById("text"); - let selectColor = document.getElementById("selectColor"); - let btnColor = document.getElementById("btnColor"); - let getTxt = document.getElementById("getTxt"); - btnColor.addEventListener('click', function () { - let textColor = text.value; - let myColor = selectColor.value; - let created = document.createElement("p"); - created.innerText = textColor; - created.style.color = myColor; - getTxt.appendChild(created); - text.value = ""; - }) - </script> -</body> -``` - -- 训练2关键代码: - -``` -<body id="container"> - <div id="name"></div> - <div id="lyric">歌词:<br> - 我们是一只小小的羊<br> - 小小的羊儿都很善良<br> - 善良得只会在草原上<br> - 懒懒的美美的晒太阳 - </div> - <input type="text" placeholder="请输入歌名" id="song"> - <input type="button" value="确认" id="btnSong"> - <script> - let name = document.getElementById("name"); - let lyric = document.getElementById("lyric"); - let song = document.getElementById("song"); - let btnSong = document.getElementById("btnSong"); - btnSong.addEventListener('click', function () { - let getSong = song.value; - if (getSong == "大家一起喜羊羊") { - let newDiv = document.createElement("div"); - newDiv.innerText = getSong; - container.insertBefore(newDiv, lyric); - } else { - alert("歌名错误,请重新输入"); - song.value = ""; - } - }) - </script> -</body> -``` - -- 训练3关键代码: - -``` -<style> - #content{ - list-style-type: none; - } -</style> -<body> - <h3>最新电影资讯</h3> - <ul id="content"> - <li><span>1</span>《金蝉脱壳》两大动作巨星联手</li> - <li><span>2</span>《阿甘正传》励志而传奇的一生</li> - <li><span>3</span>《爱乐之城》爱情与梦想的交织</li> - <li><span>4</span>《头号玩家》游戏梦想照进显示</li> - </ul> - <div>输入影片咨询编号: - <input type="text" id="inputNum"> - <input type="button" id="delBtn" value="删除"> - </div> - <script> - let inputNum = document.getElementById("inputNum"); - let delBtn = document.getElementById("delBtn"); - let content = document.getElementById("content"); - delBtn.addEventListener('click', function () { - let getNum = inputNum.value; - let num = Number(getNum); - let allLi = content.getElementsByTagName('li'); - let delLi = allLi[num - 1]; - if (delLi) { - content.removeChild(delLi); - alert("删除成功"); - inputNum.value=""; - }else{ - alert("请输入合法数字"); - } - }) - </script> -</body> -``` - -- 训练4关键代码: - -``` -</head> -<style> - ul { - float: left; - } - - input { - display: block; - clear: both; - } -</style> - -<body> - <ul id="box1"><li>黄瓜</li><li>茄子</li><li>芒果</li></ul> - <ul id="box2"><li>西瓜</li><li>蜜橘</li><li>萝卜</li></ul> - <input type="button" value="移动" onclick="btnReplace()"> - <script> - let box1 = document.getElementById("box1"); - let box2 = document.getElementById("box2"); - function btnReplace() { - let node1 = box1.lastChild; - let node2 = box2.lastChild; - box1.appendChild(node2); - box2.appendChild(node1); - } - </script> -</body> -``` - -- 训练5关键代码: - -``` -<body> - <div id="question"> - <h4>在倚天屠龙记中,张三丰是___派的掌门?</h4> - </div> - <div class="radio"> - <input type="radio" class="a" name="select" value="A">A 少林 - <input type="radio" class="b" name="select" value="B">B 武当 - <input type="radio" class="c" name="select" value="C">C 峨眉 - <input type="radio" class="d" name="select" value="D">D 昆仑 - </div> - <input type="button" value="提交答案" onclick="btnSubmit()"> - <script> - function btnSubmit() { - let select = document.getElementsByName("select"); - let answer=""; - for(let i=0;i<select.length;i++){ - if(select[i].checked){ - answer=select[i].value; - break; - } - } - if(answer==="B"){ - alert("回答正确"); - }else{ - alert("回答错误"); - } - - } - </script> -</body> -``` - -- 训练6关键代码: - -``` -<body> - <a href="#" id="link">我是一段文本</a> - <input type="button" value="重置" onclick="reset()"> - <script> - function reset() { - let link = document.getElementById("link"); - link.innerText = "我还是一段文本"; - link.href = "https://www.baidu.com/"; - } - </script> -</body> -``` - -- 训练7关键代码: - -```html - -<body id="box"> - <input type="button" value="添加" onclick="addImg()"> - <script> - function addImg() { - let divBox = document.createElement("div"); - let box=document.getElementById("box"); - divBox.innerHTML = '<img src="./pic2.jpg">'; - box.appendChild(divBox); - } - </script> -</body> -``` \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251205-\344\270\216DHTML\347\233\270\345\257\271\345\272\224\347\232\204DOM\345\222\214window\345\257\271\350\261\241.md" "b/\345\210\230\350\231\271\347\206\240/20251205-\344\270\216DHTML\347\233\270\345\257\271\345\272\224\347\232\204DOM\345\222\214window\345\257\271\350\261\241.md" deleted file mode 100644 index 13caad2195cc0b422d2701b7b08be7c5afc1cf19..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251205-\344\270\216DHTML\347\233\270\345\257\271\345\272\224\347\232\204DOM\345\222\214window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,53 +0,0 @@ -## 笔记 - -### 与DHTML相对应的DOM - -1. innerHTML和innerText属性 -- innerHTML 读取 / 设置元素内的HTML 内容(含标签) -2. outerHTML和outerText属性 -- innerText -读取 / 设置元素内的纯文本内容(忽略标签) -### Window对象 - -1. 对话框 - -- 警告对话框 - - alert('提示文本'); - - 弹出提示框,仅 “确定” 按钮 - - 无返回值;阻塞代码执行,直到点击确定 - -- 确认对话框 - - let res = confirm('确认文本'); - - 弹出确认框(确定 / 取消) - - 点击 “确定” 返回 true,“取消” 返回 false;常用作操作确认(如删除) -- 提示对话框 - - let res = prompt('提示文本', '默认值'); - - 弹出输入框(确定 / 取消) - - 点击 “确定” 返回输入内容(字符串),“取消” 返回 null;可获取用户输入 -2. 窗口的关闭和打开 - -(1). 打开窗口 - -- 语法:let newWin = window.open('URL', '窗口名', '参数'); -- 核心参数: - - URL:要打开的页面地址(空字符串打开空白页); - - - 窗口名:自定义名称(或_blank新窗口 /_self当前窗口); - - - 可选参数:width=500,height=300,top=100,left=100(设置窗口大小 / 位置)。 - - - 示例:let win = window.open('https://www.baidu.com', '_blank', 'width=500,height=300'); -(2) 关闭窗口 -- 语法: - - 关闭当前窗口:window.close(); - - - 关闭打开的新窗口:newWin.close(); -3. 控制窗口 - -- 移动窗口 - -- 窗口滚动 - -- 设置超时 - -4. 窗口事件 diff --git "a/\345\210\230\350\231\271\347\206\240/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\210\230\350\231\271\347\206\240/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 50b4354d3568b1aff4f8d50cb5ce9ce177d5b836..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,211 +0,0 @@ -## 笔记 - -### 浏览器对象模型 - | - -#### location对象 - -| 属性 | 作用 | -|--------------|--------------------------| -| `href` | 完整URL(可读写)| -| `protocol` | 协议(带冒号)| -| `host` | 主机+端口 | -| `hostname` | 主机名(不含端口)| -| `port` | 端口号(无则空)| -| `pathname` | 路径(以/开头)| -| `search` | 查询参数(以?开头)| -| `hash` | 锚点(以#开头,用于页面内跳转) | -| `origin` | 协议+主机+端口(只读)| - -| 方法 | 作用 | -|---------------------|----------------------------------------------------------------------| -| `location.assign(url)` | 跳转到指定URL,可回退到原页面(保留历史记录)| -| `location.replace(url)` | 跳转到指定URL,替换当前历史记录(无法回退)| -| `location.reload(force)` | 刷新页面;`force=true` 强制从服务器刷新(忽略缓存),默认从缓存刷 | -| `location.href = url` | 等价于`assign`,最常用的跳转方式 - -#### navigator对象 - -| 属性 | 作用 | -|---------------------|----------------------------------------------------------------------| -| `userAgent` | 浏览器用户代理字符串(核心!识别浏览器/系统/设备)| -| `platform` | 浏览器运行的系统平台 | -| `language` | 浏览器默认语言 | -| `onLine` | 布尔值,判断浏览器是否联网(`true`=在线)| -| `appName` | 浏览器名称(多为"Netscape",兼容性差,不推荐)| -| `appVersion` | 浏览器版本(包含内核信息,可读性差)| - -#### screen对象 - -| 属性 | 作用 | -|---------------------|----------------------------------------------------------------------| -| `width`/`height` | 屏幕总宽度/高度(像素,包含系统任务栏/菜单栏)| -| `availWidth`/`availHeight` | 屏幕可用宽度/高度(像素,排除任务栏/菜单栏,实际可显示区域)| -| `colorDepth` | 屏幕颜色深度(多为24/32,代表色彩还原度)| -| `pixelDepth` | 屏幕像素深度(与colorDepth值一致,仅兼容不同浏览器)| - -#### history对象 - -| 属性 | 作用 | -|-------------|----------------------------------------------------------------------| -| `length` | 历史记录的条数(包含当前页面,新标签页初始值为1)| -| `state` | 当前历史记录的状态值(配合`pushState/popState`使用)| - -| 方法 | 作用 | -|-------------------------------|----------------------------------------------------------------------| -| `back()` | 后退一页(等价于浏览器左上角←按钮)| -| `forward()` | 前进一页(等价于浏览器右上角→按钮)| -| `go(n)` | 跳转到指定历史记录:`go(1)`=前进1页,`go(-1)`=后退1页,`go(0)`=刷新 | -| `pushState(state, title, url)` | 新增一条历史记录(不跳转页面!),修改地址栏URL(同源)| -| `replaceState(state, title, url)` | 替换当前历史记录(不跳转),修改地址栏URL(同源)| - -## 作业 - -- 训练1核心代码: - -``` -<body> - <pre> - 我们是一只小小的羊 - 小小的羊儿会更善良 - 善良的只会在草原上 - 懒懒的美美的晒太阳 - ……更多 - </pre> - <input type="button" value="播放" onclick="btnPlay()"> - <script> - function btnPlay(){ - window.alert("只有会员才能播放歌曲,请登录"); - } - </script> -</body> -``` -- 训练2核心代码: - -``` -<body> - <a onclick="btnQuit()" href="#" >退出登录</a> - <script> - function btnQuit(){ - window.confirm("您确认退出登录吗?"); - } - </script> -</body> -``` - -- 训练3核心代码: - -``` -<body> - <h3>影视网</h3> - <p>影片列表</p> - <ul> - <li>疯狂动物城2</li> - <li>星际穿越</li> - <li>哈利波特</li> - </ul> - <a onclick="openNew()" href="#">影片详情</a> - <script> - function openNew() { - let opennew = window.open("new.html", "new", "height=100,width=150"); - } - </script> -</body> -``` - -- 训练4核心代码: - -``` -<body> - <a onclick="openNew()" href="#">点击弹出新窗口</a> - <script> - function openNew() { - let newWin = window.open("new.html", "new", "height=100,width=150"); - setTimeout(function () { - if (!newWin.closed) { - newWin.close(); - alert("已运行5秒,已关闭"); - } - }, 5000) - } - - </script> -</body> -``` - -- 训练5核心代码: - -``` -<body> - <input type="button" value="打开窗口" onclick="openNew()"> - <script> - function openNew() { - let winWidth=100; - winHeight=100; - let opennew = window.open("new.html", "new", "height=100,width=100"); - if(!opennew){ - alert("新窗口被拦截,请允许后重试"); - return; - } - let leftX=0; - let leftY=screen.availHeight-winWidth; - opennew.moveTo(leftX,leftY); - } - </script> -</body> -``` - -- 训练6核心代码: - -``` -<body> - <input type="button" value="开始计时" onclick="btnCount()"> - <input type="text" id="time"> - <script> - function btnCount() { - let today = new Date(); - let year = today.getFullYear(0); - let month = today.getMonth(-1) + 1; - let day = today.getDate(0); - let hour = today.getHours(0); - let minute = today.getMinutes(0); - let seconds = today.getSeconds(0); - setTimeout(function(){ - let time1=document.getElementById("time1"); - },1000) - } - </script> -</body> -``` - -- 综合练习1核心代码: - -``` -<body> - <div class="box">随机生成两个整数</div> - <input type="text" id="random1"> - <input type="text" id="random2"> - <input type="button" onclick="btnRandom()" value="点击生成随机数"> - <input type="button" onclick="btbAnswer()" value="输入答案"> - <script> - let num1, num2; - function btnRandom() { - let random1 = document.getElementById("random1"); - let random2 = document.getElementById("random2"); - num1 = Math.floor(Math.random() * 10); - num2 = Math.floor(Math.random() * 10); - random1.value = num1; - random2.value = num2; - } - function btbAnswer() { - let reslut = window.prompt(); - let number = Number(reslut); - if (number === num1 + num2) { - alert("回答正确"); - } else { - alert("回答错误"); - } - } - </script> -</body> -``` \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251210-Style\345\257\271\350\261\241.md" "b/\345\210\230\350\231\271\347\206\240/20251210-Style\345\257\271\350\261\241.md" deleted file mode 100644 index 99a3381fd8f2a0b17b3334f6cdac5aa0810993e2..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251210-Style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,188 +0,0 @@ -## 笔记 - -### 样式标签属性和样式属性 -- 样式标签属性:直接写在 HTML 标签上的style属性,优先级最高(行内样式),语法:<标签 style="属性名: 值;"> - -例:```<div style="color: red; font-size: 16px;"></div>``` - -- 样式属性: - -操作 DOM 样式时用驼峰命名(如paddingLeft、fontSize),语法:元素.style.属性名 = "值"; - -例:div.style.color = "blue"; div.style.paddingLeft = "20px"; -### 常用样式属性操作 -1. 颜色和背景属性 - -| 用途 | CSS 属性 | JS 属性 | 核心值 / 示例 | 语法说明 | 考点备注 | -| :------------- | :---------------- | :---------------- | :------------------------------------- | :------------------------------------------------------------------------ | :--------------------------- | -| 文字颜色 | color | color | 十六进制(#ff0000)、RGB(rgb(255,0,0))、英文(red) | CSS 语法:`color: 颜色值;` <br> JS 语法:`元素.style.color = "颜色值";` | 行内/JS 修改优先级高于样式表 | -| 背景颜色 | background-color | backgroundColor | rgb(93,180,93)、#f5f5f5、rgba(93,180,93,0.8) | CSS 语法:`background-color: 颜色值;` <br> JS 语法:`元素.style.backgroundColor = "颜色值";` | 区分 `background` 复合属性 | -| 背景图片 | background-image | backgroundImage | url("img/bg.png")、url('../bg.jpg') | CSS 语法:`background-image: url("图片路径");` <br> JS 语法:`元素.style.backgroundImage = "url('图片路径')";` | JS 中路径需嵌套单/双引号 | -| 背景是否重复 | background-repeat | backgroundRepeat | no-repeat、repeat、repeat-x、repeat-y | CSS 语法:`background-repeat: 取值;` <br> JS 语法:`元素.style.backgroundRepeat = "取值";` | 控制背景图平铺方向/是否平铺 | -| 背景定位 | background-position | backgroundPosition | center、20px 10px、50% 0、right bottom | CSS 语法:`background-position: X轴值 Y轴值;` <br> JS 语法:`元素.style.backgroundPosition = "X轴值 Y轴值";` | 复合值用空格分隔(X轴 Y轴) | - -2. 边框属性 - -| 用途 | CSS 属性 | JS 属性 | 核心值 / 示例 | 考点备注 | -| -------------- | ---------------- | --------------- | ---------------------- | --------------------------------- | -| 复合边框 | border | border | 1px solid #ccc | 顺序:宽度 + 样式 + 颜色 | -| 单方向边框 | border-left/top | borderLeft/top | 2px dashed red | 常用作侧边装饰(如菜单边框) | -| 边框圆角 | border-radius | borderRadius | 8px、50%(圆形) | 高频考:按钮 / 头像圆角 | -| 边框是否显示 | border-style | borderStyle | solid(实线)/dashed(虚线)/none | 设为 none 可隐藏边框 | -3. 定位属性 - -| 用途 | CSS 属性 | JS 属性 | 核心值 / 示例 | 考点备注 | -| ---------- | ---------------------- | --------------------- | ------------------------------ | --------------------------------- | -| 定位方式 | position | position | static(默认)/relative/absolute/fixed | absolute 需配合父级 relative | -| 偏移量 | left/top/right/bottom | left/top/right/bottom | 20px、50% | 仅定位非 static 时生效 | -| 外边距 | margin | margin | 10px、0 auto(水平居中) | 块级元素水平居中核心 | -| 内边距 | padding | padding | 20px、10px 20px(上下 / 左右) | JS 中paddingLeft等驼峰写法 | -| 显示 / 隐藏 | display | display | block/inline/inline-block/none | none 完全隐藏(不占位置) | -| 浮动 | float | float | left/right/none | 清除浮动:clear: both | - -4. 字体属性 - - | 用途 | CSS 属性 | JS 属性 | 核心值 / 示例 | 考点备注 | -| ---------- | ---------------- | --------------- | ------------------------------ | --------------------------------- | -| 字体大小 | font-size | fontSize | 16px、1rem(适配) | 移动端常用 rem 单位 | -| 字体样式 | font-family | fontFamily | "微软雅黑", Arial, sans-serif | 多个字体用逗号分隔 | -| 字体粗细 | font-weight | fontWeight | normal(400)/bold(700)/600 | 数字值无需加单位 | -| 文字对齐 | text-align | textAlign | left/center/right | 块级元素内文字居中 | -| 行高 | line-height | lineHeight | 24px、1.5(倍行高) | 单行文字垂直居中:行高 = 容器高 | -| 文字装饰 | text-decoration | textDecoration | none/underline(下划线) | 去除 a 标签下划线:none | - -5. 表格布局属性 - -| 用途 | CSS 属性 | JS 属性 | 核心值 / 示例 | 考点备注 | -| ------------ | ---------------- | --------------- | ------------------- | ------------------------ | -| 边框合并 | border-collapse | borderCollapse | collapse(合并)/separate | 表格边框不重叠的核心 | -| 单元格内边距 | padding | padding | 8px 10px | 单元格文字与边框间距 | -| 单元格宽度 | width | width | 100px、20% | 表格列宽固定用 px | -| 文字换行 | white-space | whiteSpace | nowrap(不换行)/normal | 单元格文字不换行 | -| 垂直对齐 | vertical-align | verticalAlign | middle/top/bottom | 单元格内容垂直居中 | - -## 作业 - -- 训练1核心代码: - -``` -<body> - <div id="text">这是一行文本</div> - <input type="button" value="放大" onclick="btnEnlarge()"> - <script> - function btnEnlarge() { - let text1 = document.getElementById("text"); - let text2 = parseInt(window.getComputedStyle(text1).fontSize); - let newText = text2 + 2; - text1.style.fontSize = newText + "px"; - let r = Math.floor(Math.random() * 256); - let b = Math.floor(Math.random() * 256); - let g = Math.floor(Math.random() * 256); - text1.style.color = "rgb(" + r + "," + g + "," + b + ")"; - } - </script> -</body> -``` - -- 训练2核心代码: - -``` -<body> - <img src="./pic.jpg" alt="图片" onmouseover="mouseover()" onmouseout="mouseout()" id="pic"> - <script> - let pic = document.getElementById("pic"); - pic.style.width = "100px"; - pic.style.height = "100px"; - function mouseover() { - pic.style.border = "4px double blue"; - } - function mouseout() { - pic.style.border = ""; - } - </script> -</body> -``` - -- 综合练习1核心代码: - -``` -<style> - li { - list-style-type: none; - padding: 20px; - } - - .nav { - background-color: aliceblue; - width: 100px; - height: 30px; - } - - span { - background-color: rgb(93, 180, 93); - padding: 10px 20px 10px 10px; - border-radius: 0px 8px 8px 0px; - } -</style> - -<body> - <ul class="box"> - <li onmouseover="mouseover(this)" onmouseout="mouseout(this)"><span>HTML/CSS讨论区</span></li> - <li onmouseover="mouseover(this)" onmouseout="mouseout(this)"><span>JavaScript讨论区</span></li> - <li onmouseover="mouseover(this)" onmouseout="mouseout(this)"><span>C语言讨论区</span></li> - <li onmouseover="mouseover(this)" onmouseout="mouseout(this)"><span>Java讨论区</span></li> - <li onmouseover="mouseover(this)" onmouseout="mouseout(this)"><span>Android讨论区</span></li> - <li onmouseover="mouseover(this)" onmouseout="mouseout(this)"><span>Pyhton讨论区</span></li> - </ul> - <script> - function mouseover(li1){ - li1.style.paddingLeft="100px"; - } - function mouseout(li1){ - li1.style.paddingLeft="20px"; - } - </script> -</body> -``` - -- 综合练习2核心代码: - -``` -<style> - img { - width: 100px; - height: 100px; - position: absolute; - } - - .pic1 { - top: 50%; - left: 50%; - transform: rotate(45deg); - } - - .pic2 { - top: 30%; - left: 70%; - transform: rotate(35deg); - } - - .pic3 { - top: 30%; - left: 30%; - transform: rotate(75deg); - } -</style> - -<body> - <img src="./pic.jpg" alt="图片" class="pic1" onmousedown=" - mousedown(event)"> - <img src="./pic.jpg" alt="图片" class="pic2" onmousedown=" - mousedown(event)"> - <img src="./pic.jpg" alt="图片" class="pic3" onmousedown=" - mousedown(event)"> - <script> - - </script> -</body> -``` diff --git "a/\345\210\230\350\231\271\347\206\240/20251211-Form\345\257\271\350\261\241.md" "b/\345\210\230\350\231\271\347\206\240/20251211-Form\345\257\271\350\261\241.md" deleted file mode 100644 index 469169a9169b97d559d55d935bd7cbe8335017ad..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251211-Form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,236 +0,0 @@ -## 笔记 - -### 访问表单与表单元素的方法 - -| 方法 | 语法 | 特点 | -|------|------|------| -| 通过id(最常用) | `document.getElementById('formId')` | 精准、高效,优先使用 | -| 通过name属性 | `document.forms['formName']` / `document.formName` | 兼容性好,注意name唯一 | -| 通过下标(不推荐) | `document.forms[0]` | 依赖表单在页面中的顺序,易出错 | - -**易错点**:querySelectorAll 返回类数组,需通过[0]取单个元素,如document.querySelectorAll('[name=province]')[0],直接.value会返回 undefined。 - -### Form对象的属性、方法与事件 - -| 属性/方法 | 作用 | 示例 | -|------|------|------| -| `elements` | 返回表单内所有元素的集合(类数组) | `formObj.elements[0]` → 第一个表单元素 | -| `action` | 获取/设置表单提交的URL | `formObj.action = 'http://xxx.com/submit'` | -| `method` | 获取/设置提交方式(GET/POST) | `formObj.method = 'POST'` | -| `enctype` | 获取/设置表单编码类型(如文件上传用multipart/form-data) | - | -| `name` | 表单名称,对应`document.forms[name]` | - | -| `reset()` | 重置表单到初始状态 | `formObj.reset()` | -| `submit()` | 手动提交表单(替代按钮点击) | `formObj.submit()` | - -### Form对象的应用 -1. 省市联动(select 下拉框联动) - -| 易错类型 | 具体内容 | 避坑方案 | -|----------|----------|----------| -| select操作 | 用`checked`属性操作下拉框、用`click`监听选择变化 | 1. 取值/赋值用`value`/`selectedIndex`;2. 监听选择用`change`事件 | -| 元素访问 | `querySelectorAll`直接`.value`、依赖下标访问表单 | 1. `querySelectorAll`需加`[0]`取单个元素;2. 优先用id/name访问 | -| 表单提交 | 未在`onsubmit`返回false、手动提交用`form.submit()`加return | 1. 验证失败返回false阻止提交;2. `form.submit()`无需return | -| 变量拼写 | 低级拼写错误(如`towm`代替`town`) | 控制台报错优先看“ReferenceError”,核对变量名 | - -## 作业 - -- 训练1核心代码 - -``` -<body> - <div>请输入电影票兑换码:</div> - <input type="text" name="convert"> - <input type="button" value="取票" onclick="btnConvert()"> - <script> - function btnConvert() { - let convert = document.querySelector('[name=convert]').value; - if(convert==="996325700663166"){ - alert("取票成功"); - }else{ - alert("取票失败"); - } - } - </script> -</body> -``` - -- 训练2核心代码 - -``` -<body> - <div>用户协议</div> - <textarea name="text1" id="text1" rows="4"></textarea> - - <input type="button" value="控制文本框长度" onclick="btnControl()"> - <script> - function btnControl() { - let text1 = document.querySelector('[name=text1]'); - let rows = parseInt(text1.getAttribute('rows')); - text1.setAttribute('rows', rows + 1); - } - </script> -</body> -``` - -- 训练3核心代码 - -``` -<body> - <h3>请选择相应课程</h3> - <pre> - <input type="checkbox" name="select" value="c">c语言 - <input type="checkbox" name="select" value="made">机械制图 - <input type="checkbox" name="select" value="scn">单片机 - <input type="checkbox" name="select" value="auto">自动控制 - <input type="checkbox" name="select" value="scm">传感器 - <input type="checkbox" name="select" value="math">高等数学 - <input type="checkbox" name="select" value="computer">计算机基础 - <input type="checkbox" name="select" value="Oracle">Oracle数据库 - <input type="checkbox" name="select" value="english">商务英语 - <input type="checkbox" name="select" value="plc">PLC设计基础 - </pre> - <input type="button" value="提交" onclick="btnSelect()"> - <script> - function btnSelect() { - let selectEle = document.querySelectorAll('[name=select]'); - let select = []; - for (let i = 0; i < selectEle.length; i++) { - if (selectEle[i].checked) { - select.push(selectEle[i].value); - } - } if (select.length >= 6) { - alert("你最多可以选择6门") - } else if (select.length == 0) { - alert("请至少选择1门"); - } else { - alert("提交成功"); - } - - } - </script> -</body> -``` - -- 综合练习1核心代码 - -``` -<body> - <div>电影《变相怪杰》的主演是谁?</div> - <input type="radio" name="select" value="a">布拉德·皮特 - <input type="radio" name="select" value="b">亚当·桑德勒 - <input type="radio" name="select" value="c">金·凯瑞 - <input type="radio" name="select" value="d">杰夫·丹尔斯 - <input type="button" value="提交答案" onclick="btnSumbit()"> - <div> - <label for="" id="text2"></label> - </div> - <script> - function btnSumbit() { - let selectEle = document.querySelectorAll('[name=select]'); - let text2 = document.getElementById("text2"); - let select = ""; - for (let i = 0; i < selectEle.length; i++) { - if (selectEle[i].checked) { - select = selectEle[i].value; - break; - } - } - if (select == 0) { - alert("请选择答案"); - - } else if (select == "c") { - text2.innerText = "回答正确"; - } else { - alert("回答错误"); - } - } - </script> -</body> -``` - -- 综合练习2核心代码 - -``` -<body> - <form> - <table> - <tr> - <td> <input type="checkbox" name="hobby" value="movie">看电影 - <input type="checkbox" name="hobby" value="music">听音乐 - <input type="checkbox" name="hobby" value="play">演奏乐器 - <input type="checkbox" name="hobby" value="basketball">打篮球 - <input type="checkbox" name="hobby" value="reading">看书 - <input type="checkbox" name="hobby" value="internet">上网 - </td> - </tr> - <tr> - <td> - <input type="button" value="全选" onclick="btnSelect()"> - <input type="button" value="全不选" onclick="btnNo()"> - <input type="button" value="反选" onclick="btnTurn()"> - </td> - </tr> - </table> - </form> - <script> - let hobby = document.querySelectorAll('[name=hobby]'); - function btnSelect() { - for (let i = 0; i < hobby.length; i++) { - if (!hobby[i].checked) { - hobby[i].checked = true; - } - } - } - function btnNo() { - for (let i = 0; i < hobby.length; i++) { - if (hobby[i].checked) { - hobby[i].checked = false; - } - } - } - function btnTurn() { - for (let i = 0; i < hobby.length; i++) { - if (hobby[i].checked) { - hobby[i].checked = false; - } else { - hobby[i].checked = true; - } - } - } - </script> -</body> -``` - -- 综合练习3核心代码 - -``` -<body> - <form id="box"> - <select name="province" id="province"> - <option value="sichuan">四川</option> - <option value="qinghai">青海</option> - <option value="xinjiang">新疆</option> - </select> - <select name="town" id="town"> - <option value="1">成都</option> - <option value="2">西宁</option> - <option value="3">乌鲁木齐</option> - </select> - </form> - <script> - let province = document.querySelector('[name=province]'); - province.addEventListener('change', function () { - let province1 = province.value; - let town = document.querySelector('[name=town]'); - if (province1 == "sichuan") { - town.innerHTML ="<option>成都</option><option>西宁</option><option>乌鲁木齐</option>"; - }else if(province1=="qinghai"){ - town.innerHTML=" <option>西宁</option><option>成都</option><option>乌鲁木齐</option>"; - }else{ - town.innerHTML=" <option>乌鲁木齐</option><option>成都</option><option>西宁</option>" - } - - }) - </script> -</body> -``` \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/20251212-json\345\222\214fecth.md" "b/\345\210\230\350\231\271\347\206\240/20251212-json\345\222\214fecth.md" deleted file mode 100644 index 11269a11e7e04b7202714caf9ee35fec03d54b2f..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251212-json\345\222\214fecth.md" +++ /dev/null @@ -1,13 +0,0 @@ -## 笔记 - -### json - -- json是一种数据传输格式,其形态为字符串 - -**序列化和反序列化**: -序列化是将对象转化为JSON字符串的过程,而反序列化则是将JSON字符串转化为对象的过程。 - -| 操作 | 定义 | 核心目标 | 常用场景 | -| --- | --- | --- | --- | -| 序列化(JSON.stringify) | 将 JavaScript 对象 / 数组转为 JSON 字符串 | 把内存中的数据转为可传输 / 存储的格式 | 前端向后端传参、本地存储数据 | -| 反序列化(JSON.parse) | 将 JSON 字符串转回 JavaScript 对象 / 数组 | 把传输 / 存储的字符串还原为可操作的 JS 数据 | 接收后端返回数据、读取本地存储 | diff --git "a/\345\210\230\350\231\271\347\206\240/20251215-indexOf\345\222\214\347\234\201\345\270\202\344\272\214\347\272\247\350\201\224\345\212\250.md" "b/\345\210\230\350\231\271\347\206\240/20251215-indexOf\345\222\214\347\234\201\345\270\202\344\272\214\347\272\247\350\201\224\345\212\250.md" deleted file mode 100644 index d7f2154847c2407153e7742ba95011d06e6e4631..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251215-indexOf\345\222\214\347\234\201\345\270\202\344\272\214\347\272\247\350\201\224\345\212\250.md" +++ /dev/null @@ -1,75 +0,0 @@ -## 笔记 - -``` -let arr=[1,3,4,4,3,1,2]; - -**arr.indexof()** -从左到右开始,查找传入的元素是否在数组中,如果找到,则返回第一个找到数组的下标,如果没有则返回-1 - -**arr.lastIndexof()** -从右开始,查找传入的元素是否在数组中,如果找到,则返回第一个找到元素的下标,如果没有则返回-1 -``` -### 省市联动代码 -``` - -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Document - - - - - - - - - -``` diff --git "a/\345\210\230\350\231\271\347\206\240/20251217-jQuery\345\237\272\347\241\200\345\222\214\351\200\211\346\213\251\345\231\250\344\270\216\346\223\215\344\275\234.md" "b/\345\210\230\350\231\271\347\206\240/20251217-jQuery\345\237\272\347\241\200\345\222\214\351\200\211\346\213\251\345\231\250\344\270\216\346\223\215\344\275\234.md" deleted file mode 100644 index ce53f428a81aba9122165be08ed16f0fb16637fe..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251217-jQuery\345\237\272\347\241\200\345\222\214\351\200\211\346\213\251\345\231\250\344\270\216\346\223\215\344\275\234.md" +++ /dev/null @@ -1,48 +0,0 @@ -## 笔记 -### jQuery基础 -- 和js的引用一样,建议在body结束标签之前引用。 - -- 使用`$`来使用jQuery库的能力,`$`符号实际上是一个方法,当然方法在js中也是一对象,所以其也有一些属性可以使用 - -- jquery可以获得jQuery,和原生js拿到的对象不同,但它们间可以互相转换 - - - let div=$('div')拿到jquery对象 - - - div[0]拿到dom对象 - - - $(div[0]又可以重新转换为jquery对象) - - 原生js拿到的接过,通常是dom对象 - - jquery拿到的结果,通常是jQuery对象 - - - let div=$('div'); - - 将jQuery对象转换成dom对象 - - let domEl = div[0]; - - 将dom对象重新转换为jquery对象 - - let jQueryObj = $(domEl); - ### jQuery选择器与操作 - - - 基础选择器 - - 标签选择器 - - 类名选择器 - - id选择器 - - 关系选择器 - - 子代选择器` ` - - 直接子代选择器`>` - - 兄弟选择器`~` - - 相邻兄弟选择器`+` - - 高级选择器 - - 属性表达器 - - 伪类表达器 - - 伪元素表达器 - - ### jQueryDom操作 - - 新增append给拿到的元素增加一个下级元素 - - 移除remove移除拿到的元素 - - text()拿到文本内容,text('要设置的内容')可以修改纯文本内容 - - html()拿到包含标签的内容,html('要设置的内容')可以修改标签的内容 diff --git "a/\345\210\230\350\231\271\347\206\240/20251218-jQuery\344\272\213\344\273\266\345\244\204\347\220\206\345\222\214\345\212\250\347\224\273\346\225\210\346\236\234.md" "b/\345\210\230\350\231\271\347\206\240/20251218-jQuery\344\272\213\344\273\266\345\244\204\347\220\206\345\222\214\345\212\250\347\224\273\346\225\210\346\236\234.md" deleted file mode 100644 index d25f0603c13eb45de8ffa87be028ed08acc5c723..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251218-jQuery\344\272\213\344\273\266\345\244\204\347\220\206\345\222\214\345\212\250\347\224\273\346\225\210\346\236\234.md" +++ /dev/null @@ -1,27 +0,0 @@ -## 笔记 - -### jQuery事件处理 - -事件绑定函数第二种情形: - -let d4 = document.getElementById('d4'); - -d4.onclick = function(){} - -d4.addEventListener('click',function(){}) - -- jQuery对象.on('click',function(){}) -- jQuery对象.click(function(){}) -- jQuery对象.trigger('click',function(){}) -- $(function(){}) - -**jQuery的初始化数据的搞法** - - $(document).ready(function(){}) - $(document).on('reay',function(){}) - $(function(){ - console.log(1); - }) -### jQuery动画与效果 -- 基础效果:显示、隐藏 show()、hide()、toggle() -- 进阶效果:淡入、淡出 fadeIn()、fadeOut() diff --git "a/\345\210\230\350\231\271\347\206\240/20251219-\345\244\215\344\271\240.md" "b/\345\210\230\350\231\271\347\206\240/20251219-\345\244\215\344\271\240.md" deleted file mode 100644 index 12ab1ab2685c79c73fe565f8daaa9ccb9fccf173..0000000000000000000000000000000000000000 --- "a/\345\210\230\350\231\271\347\206\240/20251219-\345\244\215\344\271\240.md" +++ /dev/null @@ -1,73 +0,0 @@ -# 笔记 - -### 变量、常量和基础数据类型 -- var let定义变量,请忘记var,后续只使用let -- const定义常量,常量名全大写 -- 数据类型 - - 基础数据类型 - - string - - number - - boolean - - underfined - - null - - 复合数据类型 - - 对象 - - 数组 - - 函数 -### 运算符和数据类型转换 -- "+"" "-"" "*"" "/"" "%"" -- 逻辑运算 - - null undefined 0 '' 这些字面量参与逻辑运算时,作为false,其余的值作为true - - 短路运算 true || 表达式 false && 表达式 -- 赋值运算 = += -+ ++ --等 -- parseInt parseFloat 乘1变数字 加空字符串变字符串 -### 流程控制 - -- 判断 - - if - - if ... else - - if ... else if() - - if ... else if()... else - - switch -- 循环 - - for - - while - - do...while -- 三元运算 -## 核心数据结构及用法 - -### 数组 - -- 改变数组本身的方法 - - sort 排序,接受一个比较器 - - push pop 从尾部添加、删除 - - unshift shift 从头部添加、删除 - - splice 万能方法 删除元素、添加元素、修改元素 - - reverse 倒置 - - fill 填充 -- 不改变数组本身的方法 - - concat 拼接数组 - - slice 截取 - - map 将一个函数用在数组的每一个元素上,并将处理后的结果放入新的数组 - - filter 将一个函数用在数组的每个元素上,如果这个元素运算的结果为true,则将元素放入新的数组,反之不放,最终得到新的数组 - - reduce 将一个函数用在数组的前2个元素上,计算后的结果作为同一个函数第一个参数和数组的第三元素作为第二参数进行运算 - - forEach 遍历 - - find 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素,否则最终返回undefined - - findIndex 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素下标,否则最终返回undefined - - every - - some - - includes - - indexOf - - lastIndexOf - - join -- 高阶函数 - - 一个函数f,接受另外一个函数作为其参数,则称函数f为高阶函数 -### 函数 -- 函数定义 三种定义方式 -- 函数参数 可传可不传,不会因为没有参数而报错 -- 函数返回值 如果没有返回值,则默认返回undefined - -### 对象 -- 包含在一对大括号中的内容 -- 键值对,键也就是属性,值也就属性值 -- 也可以使用类似于数组的形式访问某个值,或者为其添加新的属性 diff --git "a/\345\210\230\350\231\271\347\206\240/images/1110(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1110(1).png" deleted file mode 100644 index 964869e9a8493c4ca0907fb44cc4c0c600e86643..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1110(1).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1110(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1110(2).png" deleted file mode 100644 index 1d46e661625a390776d0dbda6e3fc7300cd3b942..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1110(2).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1112(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1112(1).png" deleted file mode 100644 index 0f3697a11326677ddecd17d9baed53695edf633b..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1112(1).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1112(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1112(2).png" deleted file mode 100644 index e660fecb971f21f10221017ca18e909d910642ef..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1112(2).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1112(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1112(3).png" deleted file mode 100644 index 8dcefdb01431d59dc2af6d9b8ccd2de0dc8551e5..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1112(3).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1112(4).png" "b/\345\210\230\350\231\271\347\206\240/images/1112(4).png" deleted file mode 100644 index 9d1e0effc6f006516c7b4d8a414c23676c48a2ce..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1112(4).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1112(5).png" "b/\345\210\230\350\231\271\347\206\240/images/1112(5).png" deleted file mode 100644 index ddbf59bba8dd24d2cd809d8b7319ca215485dd6b..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1112(5).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(1).png" deleted file mode 100644 index 991a854a96676263a6f587fd9899cae10cf7aaae..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1113(1).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(2).png" deleted file mode 100644 index 55d168c312ca904236427c60377315ffb24e0494..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1113(2).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(3).png" deleted file mode 100644 index 1c05344f9cf033d8e3057a19cef2cb1ef09f80db..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1113(3).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(4).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(4).png" deleted file mode 100644 index 4ca2b209d9b2810a1890746cf91c77e3e2ba0317..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1113(4).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(5).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(5).png" deleted file mode 100644 index 9c17ddc6517f7a3cb8135b172bdcd80acea00c7f..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1113(5).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(6).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(6).png" deleted file mode 100644 index 6caac40e66c5fecfd26163a27fe27cdbbc5fc237..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1113(6).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(7).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(7).png" deleted file mode 100644 index 118b15678c2622fbe5eeb31cc70c52125604673d..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1113(7).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1114(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1114(1).png" deleted file mode 100644 index 19632be0fe5c9b9eb3e314a77b849686d2a50af2..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1114(1).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1114(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1114(2).png" deleted file mode 100644 index c61211c241c2a4b6582e57c7aea8eec0e55119f5..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1114(2).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1114(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1114(3).png" deleted file mode 100644 index fd7c6dc949196f3a100c6450fe8fee3eb0df6503..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1114(3).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1114(4).png" "b/\345\210\230\350\231\271\347\206\240/images/1114(4).png" deleted file mode 100644 index 1f0e2e533026c729b0011a1a8aea67b94e4bdb0f..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1114(4).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1117(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1117(1).png" deleted file mode 100644 index f2326d522048f71d9bbecf71060543b6fc1bfec0..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1117(1).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1117(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1117(2).png" deleted file mode 100644 index 42280c7b296dc1d6feeb265db2be19f315d68ede..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1117(2).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1119(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1119(1).png" deleted file mode 100644 index c9bb8de0870d2b6371a6fdbbfd85c96f2efe579c..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1119(1).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1119(10).png" "b/\345\210\230\350\231\271\347\206\240/images/1119(10).png" deleted file mode 100644 index 4c05863e78e5a627b13b82e5f93a41c7abd3f724..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1119(10).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1119(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1119(2).png" deleted file mode 100644 index 84096424519b4a310579245e7bcd493e891a8378..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1119(2).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1119(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1119(3).png" deleted file mode 100644 index cfc538323fbf5f1ff13c3beb2b31e47baf2b4e34..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1119(3).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1119(4).png" "b/\345\210\230\350\231\271\347\206\240/images/1119(4).png" deleted file mode 100644 index 8bdd9def2b1c89e8f9693312ae4baded23b4b655..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1119(4).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1119(5).png" "b/\345\210\230\350\231\271\347\206\240/images/1119(5).png" deleted file mode 100644 index af2e736c82cb3aedceeb748c0303c76bc4d6d428..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1119(5).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1119(6).png" "b/\345\210\230\350\231\271\347\206\240/images/1119(6).png" deleted file mode 100644 index f64c324a78597586f8b3bb89cb4ca0871e78837f..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1119(6).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1119(7).png" "b/\345\210\230\350\231\271\347\206\240/images/1119(7).png" deleted file mode 100644 index 83765048bfb2aa042ca665d7df6089d224a48ce3..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1119(7).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1119(8).png" "b/\345\210\230\350\231\271\347\206\240/images/1119(8).png" deleted file mode 100644 index 42afc929f728b21b8964058fe53a7f8f675b347a..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1119(8).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1119(9).png" "b/\345\210\230\350\231\271\347\206\240/images/1119(9).png" deleted file mode 100644 index 57540c311f0315506ec1731015ed6c7cdf909bf2..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1119(9).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1120(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1120(1).png" deleted file mode 100644 index 38e604d00ac23d6ae9b7fa784f4e3c5e4cf28169..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1120(1).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1120(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1120(2).png" deleted file mode 100644 index f69399ecfb035df84f3f024f7a8a094e30d6bdd2..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1120(2).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1120(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1120(3).png" deleted file mode 100644 index 11c79dcb64e5a7346d444c1a3bb8837dd32bad71..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1120(3).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(1).png" deleted file mode 100644 index 852dabd699b710fbb28941c2dd033eadc953ed1a..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(1).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(10).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(10).png" deleted file mode 100644 index 8c92d8eba38ff8ae2a76359a6c43301766926383..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(10).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(11).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(11).png" deleted file mode 100644 index ded2aedb41a118ebac5f2dc72fd048d98e27354a..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(11).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(2).png" deleted file mode 100644 index b9e0371f9ba16e89f3a5c8a299c2ee6b708dbfee..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(2).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(3).png" deleted file mode 100644 index 3c8b012b0979c61718ccf82380a53cc167fa7836..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(3).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(4).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(4).png" deleted file mode 100644 index c8d699c380967c6b9860d578b1f4a89536e448ab..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(4).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(5).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(5).png" deleted file mode 100644 index 6195824edb61afb91d4195bcf07b01e5d522d2bc..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(5).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(6).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(6).png" deleted file mode 100644 index 7ea8799b4edd47c35aad98d56bd653fb3119bee6..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(6).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(7).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(7).png" deleted file mode 100644 index 0c1332f01562640b70172dbf4a3a02328bbe4978..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(7).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(8).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(8).png" deleted file mode 100644 index 98d3c8293b724b0cccfba87c45f515a2532be38f..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(8).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1124(9).png" "b/\345\210\230\350\231\271\347\206\240/images/1124(9).png" deleted file mode 100644 index 7867ecaaa0efb43bca95186f3d9735110bf1ebed..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1124(9).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1127(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1127(1).png" deleted file mode 100644 index c0fa8c1885b5f505544e76ad4afa82354aa22e21..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1127(1).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1127(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1127(2).png" deleted file mode 100644 index 6d409eb20ca9785793409563ec5c16bfd1be9bed..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1127(2).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1127(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1127(3).png" deleted file mode 100644 index 11ff6efc337b3047bb00a90d0d8f294a9c36aef4..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1127(3).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1127(4).png" "b/\345\210\230\350\231\271\347\206\240/images/1127(4).png" deleted file mode 100644 index ff1e21015feee410344aa56e6de5a98894ef691c..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1127(4).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1128()4.png" "b/\345\210\230\350\231\271\347\206\240/images/1128()4.png" deleted file mode 100644 index 3e878a55bc8089163b45b6b21ec00b88d710125e..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1128()4.png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1128(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1128(1).png" deleted file mode 100644 index 314f639a8b595fed77b4f74748b1d2094d11c1e8..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1128(1).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1128(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1128(2).png" deleted file mode 100644 index f50765bab107edfa394a317382f327d29f8a1159..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1128(2).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1128(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1128(3).png" deleted file mode 100644 index f17a0ff9a252c053a30e67c2b0d16836792807d1..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1128(3).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1128(5).png" "b/\345\210\230\350\231\271\347\206\240/images/1128(5).png" deleted file mode 100644 index e2d23ff35c496a4f81a9b9df65617778eba1ef99..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1128(5).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1128(6).png" "b/\345\210\230\350\231\271\347\206\240/images/1128(6).png" deleted file mode 100644 index 19435d886a664dc6252c498fdac1654c1607bedc..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1128(6).png" and /dev/null differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1128(7).png" "b/\345\210\230\350\231\271\347\206\240/images/1128(7).png" deleted file mode 100644 index 23be318f7827f019ee23399446273c0ed3d53076..0000000000000000000000000000000000000000 Binary files "a/\345\210\230\350\231\271\347\206\240/images/1128(7).png" and /dev/null differ diff --git "a/\345\215\242\351\233\205\350\214\271/20251110-js.md" "b/\345\215\242\351\233\205\350\214\271/20251110-js.md" deleted file mode 100644 index 6423650dcc67351cfe3a645a06cfc604fca166e1..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251110-js.md" +++ /dev/null @@ -1,32 +0,0 @@ -# 笔记 - -### 认识script -1. script(三种排列方式) -- 放在body里最下面(原因:网页先构建后渲染) -- 放在标签内(相当于行内样式) -- 放在外部js文件内(需要引用) -2. 代码 -- script(js祖师爷) -- alert(弹窗) -- function(可重复使用的代码块) -- onclick(事件处理方法) - -# 练习 - -```html - - - - - - Document - - - - - - - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251112-js\346\225\260\346\215\256\347\261\273\345\236\213.md" "b/\345\215\242\351\233\205\350\214\271/20251112-js\346\225\260\346\215\256\347\261\273\345\236\213.md" deleted file mode 100644 index 33c6be74a00c64af108c2907e184df913d735244..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251112-js\346\225\260\346\215\256\347\261\273\345\236\213.md" +++ /dev/null @@ -1,69 +0,0 @@ -# 笔记 - -1. js区分大小写 -2. 小驼峰 userName Age 第一个单词第一个字母小写 后面的单词首字母大写 -3. i++ 使用i之后 加1。++i 使用i之前 加1。4==与===的区别。“==”只判断值是否相等。“===”先判断类型 在判断值是否相等 - -# 练习 - -```html - - - - - - - Document - - - - - -

      个人信息

      - - - \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251113-js.md" "b/\345\215\242\351\233\205\350\214\271/20251113-js.md" deleted file mode 100644 index 4a3fbafdf1e9d02eca53f7420044c5a580524754..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251113-js.md" +++ /dev/null @@ -1,39 +0,0 @@ -# 练习 - -```html - - - - - - - Document - - - - - - - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251114-js.md" "b/\345\215\242\351\233\205\350\214\271/20251114-js.md" deleted file mode 100644 index 3a873e6df3286606e3221d1c5d87df323f4a5948..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251114-js.md" +++ /dev/null @@ -1,133 +0,0 @@ -# 练习 - -```html - - - - - - - Document - - - - - - - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251117-js.md" "b/\345\215\242\351\233\205\350\214\271/20251117-js.md" deleted file mode 100644 index a4d2228eb4d878e4b4a4850fc4d1375d540b1348..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251117-js.md" +++ /dev/null @@ -1,58 +0,0 @@ -# 笔记 - -### 判断 -1. if -2. if()...else... -3. if...else if() -4. if...else if()...else -5. switch...case - -### 循环 - -1. for -2. while -3. do...while - -### 循环控制 - -1. continue -2. break - -### 函数 - -- 定义可指定形参 -- 调用的时候可任意指定实参,也可不指定 - -### 返回值 - -- 有return,则有返回值,而且通常不为underfined -- 无return,总是私下返回一个underfine - -```html - - - - - - Document - - - - - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251119.md" "b/\345\215\242\351\233\205\350\214\271/20251119.md" deleted file mode 100644 index 01779e5ea40224b3ac4f51a6266af5016c7a7518..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251119.md" +++ /dev/null @@ -1,192 +0,0 @@ -# 练习 - -```html -练习3 - - ``` - ```html - 练习4 - - ``` - ```html - 练习5 - - ``` - ```html - 练习6 - - ``` - ```html - 练习7 - - ``` - ```html - 练习8 - - ``` - ```html - 综合1 - - ``` - ```html - 综合2 - - ``` - ```html - 综合3 - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251120.md" "b/\345\215\242\351\233\205\350\214\271/20251120.md" deleted file mode 100644 index 614824efc1ca3de8c369473ebff4b076fd93efe1..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251120.md" +++ /dev/null @@ -1,147 +0,0 @@ - # 笔记 - -### 事件监听 - -```javascript -// 添加事件监听 -element.addEventListener("click", function (event) { - console.log("元素被点击了"); -}); - -// 移除事件监听 -function handleClick(event) { - console.log("点击事件"); -} -element.removeEventListener("click", handleClick); -``` - -### 事件对象属性 - -```javascript -element.addEventListener("click", function (e) { - e.target; // 触发事件的元素 - e.currentTarget; // 绑定事件的元素 - e.type; // "click" - 事件类型 - e.clientX; // 50 - 鼠标X坐标 - e.clientY; // 100 - 鼠标Y坐标 - e.key; // "Enter" - 按键名称 -}); -``` - -### 阻止默认行为 - -```javascript -// 阻止链接跳转 -link.addEventListener("click", function (e) { - e.preventDefault(); - console.log("阻止了默认跳转行为"); -}); - -// 阻止表单提交 -form.addEventListener("submit", function (e) { - e.preventDefault(); - console.log("阻止了表单提交"); -}); -``` - -### 阻止事件冒泡 - -```javascript -child.addEventListener("click", function (e) { - e.stopPropagation(); - console.log("子元素点击,阻止冒泡到父元素"); -}); - -parent.addEventListener("click", function () { - console.log("父元素点击"); // 不会执行 -}); -``` - -### 鼠标事件 - -```javascript -element.addEventListener("click", function (e) { - console.log("单击事件"); -}); - -element.addEventListener("dblclick", function (e) { - console.log("双击事件"); -}); - -element.addEventListener("mouseover", function (e) { - console.log("鼠标移入"); -}); - -element.addEventListener("mouseout", function (e) { - console.log("鼠标移出"); -}); - -``` -# 练习 -```html -练习1-3 - -``` -```html - 综合练习 - \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251121.md" "b/\345\215\242\351\233\205\350\214\271/20251121.md" deleted file mode 100644 index 0903cfad23a554967505fc1ef9708f778c63b643..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251121.md" +++ /dev/null @@ -1,21 +0,0 @@ -# 笔记 -1. - 空数组: -2. - 指定数组长度: -3. - 指定数组元素: -4. - 直接定义数组: - -## 数组 -直接定义数组 -let arr = ["0","1"]; -1. concat() 方法 - - 用于将其他数组连接到当前数组的末尾 -2. shift() 方法 - - 用于把数组的第一个元素删除 -3. pop() 方法 - - 用于删除并返回数组的最后一个元素 -4. push() 方法 - - 用于向数组的末尾添加一个或多个元素 -5. unshift() 方法 - - 向数组的头部添加一个或多个元素 - - \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251124.md" "b/\345\215\242\351\233\205\350\214\271/20251124.md" deleted file mode 100644 index 92e0d4fd79f2372f67c22ade0ee7da38a283dd52..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251124.md" +++ /dev/null @@ -1,129 +0,0 @@ -# 笔记 -1. 数组是引用类型:赋值和传参时传递的是地址,修改副本会影响原数组(深拷贝需手动实现)。 -2. 数组的索引:默认是从 0 开始的数字索引,也可添加字符串属性,但不会计入`length`。 -3. 空数组与稀疏数组:`[1,,3]`是稀疏数组(中间元素为`empty`),遍历需注意跳过空元素。 -4. `sort()`的坑:默认按字符串排序,数字排序需传入比较函数`(a,b)=>a-b`(升序)/`(a,b)=>b-a`(降序)。 - -# 练习 -```html - -``` -```html - - - - - - - -
      排名品牌市场份额
      - ``` -```html - - ``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251126.md" "b/\345\215\242\351\233\205\350\214\271/20251126.md" deleted file mode 100644 index 08945305ad9f04639b08ef1e69b4822b91fbb99c..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251126.md" +++ /dev/null @@ -1,5 +0,0 @@ -# 笔记 -1. 字符串.match(正则) 返回匹配到的字符串 -2. 字符串.replace(正则,'要替换的字符串') 返回替换后的完整字符串 -3. 正则.exec(字符串) 返回匹配到的字符串、所在的位置,完整字符串 -4. 正则.test(字符串) 返回匹配字符串的结果:true false \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251127.md" "b/\345\215\242\351\233\205\350\214\271/20251127.md" deleted file mode 100644 index 8be007c2f55fc1590c073b873486354cbcbe5767..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251127.md" +++ /dev/null @@ -1,74 +0,0 @@ -# 笔记 -### 常见异常类型: -1. 语法错误(SyntaxError):代码语法不符合 JS 规范(如括号不匹配、关键字拼写错误) -2. 类型错误(TypeError):操作对象类型错误(如调用 undefined 的方法、给非函数类型变量传参) -3. 引用错误(ReferenceError):使用未声明的变量 / 函数 -4. 范围错误(RangeError):数值超出有效范围(如数组长度为负数) -5. 自定义异常:手动抛出的业务异常(如参数校验失败) - -### 异常处理的目的 -1. 避免程序崩溃,保证核心逻辑正常执行 -2. 优雅捕获错误,提供友好的错误提示 -3. 记录错误信息,便于问题排查 -4. 控制错误传播范围,避免影响全局 - -# 练习 -```html - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251128.md" "b/\345\215\242\351\233\205\350\214\271/20251128.md" deleted file mode 100644 index 337d1493eafd4f4e6cd4a93f7c09c29cdc08d54b..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251128.md" +++ /dev/null @@ -1,167 +0,0 @@ -# 笔记 -### 事件 -1. 鼠标事件 -2. 键盘事件 -3. 表单事件 -4. 文档 / 窗口事件 -5. 触摸事件 - -### 核心属性和方法 - -1. `target`事件**实际触发的元素**(最内层元素) -2. `currentTarget` 事件**绑定的元素**(当前处理函数所属元素) -3. `type`事件类型(如 `click`、`input`) -4. `preventDefault()`阻止事件的**默认行为**(如表单提交、链接跳转) -5. `stopPropagation()`阻止事件**冒泡或捕获**(停止事件流传播) -6. `stopImmediatePropagation()`阻止事件流传播,且阻止同一事件的后续处理函数执行 -7. `clientX`/`clientY`鼠标相对于浏览器可视区域的坐标 -8. `pageX`/`pageY`鼠标相对于文档(页面)的坐标(含滚动距离 -9. `key`键盘事件中按下的按键名称(如 `Enter`、`a`) - -# 练习 -```html -; - - ``` - ```html -

      中国的国球是()

      -

      A. 篮球 B. 排球 C. 乒乓球 D. 羽毛球

      -

      按键盘 A/B/C/D 选择答案

      -

      - - -``` -```html -

      - -``` -```html -

      - -``` - -```html -
      -

      -

      - -
      - - - -``` - -```html -
      - - - - - - - -
      - -``` - -```html -
      - -
      - - -
      - - - -
      - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251201.md" "b/\345\215\242\351\233\205\350\214\271/20251201.md" deleted file mode 100644 index 88d8014e7d0c54ff022447aca173c1a1ef0ff818..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251201.md" +++ /dev/null @@ -1,175 +0,0 @@ -# 笔记 - -1. e.stopPropagation()取消事件往下继续传递 -2. e.preventDefault ()取消浏览器的默认行为 -3. 拖拽结束(松开鼠标时)dragend -4. 进入放置区域dragenter -5. 在放置区域上方移动(必须 event.preventDefault())dragover -6. 离开放置区域dragleave -7. 在放置区域释放(必须 event.preventDefault())dro - -# 作业 - -```html -1. 训练1 - - -
      - -
      - -2. 训练2 - -

      中国的"国球"是()

      -

      A.篮球 B.排球 C.乒乓球 D.羽毛球

      -

      - - -3. 训练3 - -
      - - -4. 训练4 - -

      - - -5. 训练5 - - - - - - -6. 训练6 - - - - - -

      - - -7. 训练7 - -
      - 用户名:
      - 密码:
      - - -
      - - - -8. 训练8 - - - -
      -
      - -
      -
      -
      - - - ``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251203.md" "b/\345\215\242\351\233\205\350\214\271/20251203.md" deleted file mode 100644 index b5df68beef367bc3188d7bee7a72519e95aea764..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251203.md" +++ /dev/null @@ -1,120 +0,0 @@ -# 笔记 - -1. getElementById()方法返回具有指定ID的元素。 -2. getElementsByTagName()方法返回具有指定标签名的元素集合。 -3. getElementsByName()方法返回具有指定类名的对象集合。 -4. querySelector()方法返回匹配指定CSS选择器的第一个元素 -5. querySelectorAll()方法返回匹配指定CSS选择器的所有元素 -6. createElement()方法用于创建一个新的元素节点 - -# 练习 -```html - -

      训练1:颜色互换

      - -

      - -

      训练2:获取文件名

      - -

      - -

      训练3:动态添加文字

      - - -
      - - - - -

      李白《行路难·其一》

      -

      金樽清酒斗十千,玉盘珍羞直万钱。

      -

      停杯投箸不能食,拔剑四顾心茫然。

      -

      欲渡黄河冰塞川,将登太行雪满山。

      -

      闲来垂钓碧溪上,忽复乘舟梦日边。

      -

      行路难!行路难!多歧路,今安在?

      -

      长风破浪会有时,直挂云帆济沧海。

      - - - - - -
      -
      - -

      - -
      - - -
      - - - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251204.md" "b/\345\215\242\351\233\205\350\214\271/20251204.md" deleted file mode 100644 index 72e55c6309bd264efdf6afa48fde5ca826d94f5e..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251204.md" +++ /dev/null @@ -1,271 +0,0 @@ -# 练习 - -1. 获取DOM元素。--返回集合或单个元素 -2. getElementById()-给Id用 -3. getElementsByClassName() -给class用(通过类名) -4. getElementsByTagName() -给标签用 -5. querySelector() -给class选择器用(通过.类名) -6. querySelectorAll() -给class选择器用 - -# 作业 - -```html -1. 训练1 - - - -
      - - - -
      -
      - - -2. 训练2 - - - -
      -

      为歌曲添加歌名

      -

      轻轻敲醒沉睡的心灵,慢慢张开你的眼睛...

      - - -
      - -3. 训练3 - - -
      -

      最新电影资讯

      -
        -
      • 《金蝉脱壳》两大动作巨星联手
      • -
      • 《阿甘正传》励志而传奇的一生
      • -
      • 《爱乐之城》爱情与梦想的交织
      • -
      • 《头号玩家》游戏梦想照进现实
      • -
      - - - -
      - -4. 训练4 - - - -
      -
      -

      蔬菜列表

      -
        -
      • 白菜
      • -
      • 萝卜
      • -
      • 西红柿
      • -
      • 香蕉
      • - -
      -
      -

      水果列表

      -
        -
      • 苹果
      • -
      • 橙子
      • -
      • 草莓
      • -
      • 土豆
      • -
      -
      -
      - -5. 训练5 - - - -
      -
      在《倚天屠龙记》中,张三丰是____派的掌门?
      -
      - - - - -
      - - 此题未答 -
      - - ``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251205.md" "b/\345\215\242\351\233\205\350\214\271/20251205.md" deleted file mode 100644 index 1482d1a86086e0c5e0c741a030cf277f0d856bda..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251205.md" +++ /dev/null @@ -1,130 +0,0 @@ -# 笔记 - -1. 窗口尺寸: -(1) 窗口宽度(px) -(2) 窗口高度(px) - -2. 屏幕相关: -(1) 屏幕总宽度 -(2) 屏幕总高度 -(3) 屏幕可用宽度(排除任务栏等) - -3. 滚动位置: -(1) 水平滚动距离(同 pageXOffset) -(2) 垂直滚动距离(同 pageYOffset) -(3) 滚动到指定位置 -(4) 相对当前位置滚动 - -# 练习 - -```html -1. - -

      综合练习1:计算两个数的和并判断结果

      - -
      - -
      - -

      综合练习2:选择选项并输出结果

      - -
      - -
      - -

      综合练习3:循环显示图片

      - - -
      - - - -``` diff --git "a/\345\215\242\351\233\205\350\214\271/20251208.md" "b/\345\215\242\351\233\205\350\214\271/20251208.md" deleted file mode 100644 index 116017725920972e9d2508d52a7ef821fd833c5d..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251208.md" +++ /dev/null @@ -1,12 +0,0 @@ -# 笔记 -### -1. window 作用:控制浏览器窗口、全局弹窗、定时器 -2. document 作用:操作当前HTML页面(隶属于BOM的window) -3. location 作用:控制URL、跳转、刷新 -4. history 作用:浏览器前进/后退 -5. navigator 作用:获取浏览器/设备信息 - -## 核心区别 -1. BOM:操作**浏览器**(窗口、地址栏、历史记录) -2. DOM:操作**页面元素**(HTML文档内容) -3. 关系:DOM是BOM的子集(`window.document`) \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251210.md" "b/\345\215\242\351\233\205\350\214\271/20251210.md" deleted file mode 100644 index bcd784c26ea40f3c468e63203d1ed3e0e96b5b4b..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251210.md" +++ /dev/null @@ -1,75 +0,0 @@ -# 笔记 - -### 常用操作 -1. **单样式**:`element.style.属性 = 值`(写)、`element.style.getPropertyValue('属性名')`(读行内); -2. **批量样式**:`element.style.cssText = "样式1; 样式2"`(覆盖原有行内样式,拼接可保留); -3. **移除样式**:`element.style.removeProperty('属性名')`。 - -### 核心避坑点 -1. `element.style.xxx` 仅读手动设置的行内样式,未设置返回空,读最终样式用 `getComputedStyle`; -2. `getComputedStyle` 返回值只读,修改样式需通过 `element.style`; -3. 浏览器前缀属性(如 transform)需检测存在性后使用(如 `webkitTransform`/`msTransform`); -4. 避免直接写复合属性(如 border),拆分更易维护(特殊场景用 cssText 除外)。 - -# 练习 -```html - -``` - -```html - - - -``` - -```html - - - -``` diff --git "a/\345\215\242\351\233\205\350\214\271/20251211.md" "b/\345\215\242\351\233\205\350\214\271/20251211.md" deleted file mode 100644 index 8bb8617f8a4a881d50e47d85b78ae7fd22ac2640..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251211.md" +++ /dev/null @@ -1,228 +0,0 @@ -# 笔记 - -### 提交控制 -- 手动提交:`form.submit()`(不触发 `onsubmit`); -- 阻止默认提交:`e.preventDefault()`(异步提交必用); -- 推荐方式:监听 `submit` 事件,自定义逻辑后异步提交。 - -### 验证 -- 原生验证:`form.checkValidity()`(校验返回布尔)、`form.reportValidity()`(校验+弹窗提示); -- 自定义验证:控件 `setCustomValidity('错误提示')`(清空需设空字符串)。 - -### FormData 关键(异步提交) -1. 快速收集表单数据:`new FormData(form)`(自动含所有控件值,支持文件); -2. 可手动追加:`formData.append('key', '值')`; -3. 异步提交:`fetch`/`axios` 中直接作为 `body`,自动处理编码。 - -### 核心坑点 -1. 单选/复选框同名需遍历集合找 `checked=true` 的值,不可直接取 `value`; -2. `form.submit()` 不触发 `onsubmit` 事件,验证需监听 `submit` 事件; -3. 文件输入框 `value` 只读,仅能用户操作; -4. 下拉框直接设 `select.value` 即可选中,无需遍历 option(特殊场景除外)。 - -# 练习 - -```html -输入兑换码:
      - -
      - - -``` - -```html - - - - - - -``` - -```html - -

      选择课程(最多选6门)

      - 语文
      - 数学
      - 英语
      - 物理
      - 化学
      - 生物
      - 历史
      - 地理
      - - -``` - -```html - -

      选择题:2024年奥运会举办城市是?

      - - A. 罗马
      - B. 北京
      - C. 巴黎
      - D. 伦敦
      - - - - - -``` - -## 5 -```js - -

      选择兴趣爱好

      - - 阅读
      - 运动
      - 听歌
      - 编程
      - 旅游
      - - - - - - - - - -``` - - -## 6 -```js - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251212.md" "b/\345\215\242\351\233\205\350\214\271/20251212.md" deleted file mode 100644 index b9489a67f77b72bdde49874e57d818f5be60f718..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251212.md" +++ /dev/null @@ -1,12 +0,0 @@ -# 笔记 - -### 关键注意点 -1. 键名必须用**双引号**包裹(单引号/无引号均无效); -2. 不支持函数、undefined 类型(序列化时会被忽略)。 - -### 常见坑点 -1. JSON 键名 / 字符串值必须用 **双引号**,单引号或无引号会导致 `JSON.parse()` 报错; -2. JSON 不支持末尾逗号,解析时会抛出 `SyntaxError`; -3. 解析 / 序列化时,undefined、函数、Symbol 会被忽略(数组中会转为 null); -4. 日期对象会被序列化为字符串(如 `"2025-12-12T00:00:00.000Z"`),解析后需手动转回 Date 对象; -5. 循环引用的对象(如 `a = { b: a }`)调用 `JSON.stringify()` 会报错。 \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251215.md" "b/\345\215\242\351\233\205\350\214\271/20251215.md" deleted file mode 100644 index a3f24fc52faf9d7262b49b793bd9bf11319ba52b..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251215.md" +++ /dev/null @@ -1,53 +0,0 @@ -# 练习 - -```html - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251217.md" "b/\345\215\242\351\233\205\350\214\271/20251217.md" deleted file mode 100644 index 7119fc2da2e0fda4e4c03744ffed90464159bcbb..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251217.md" +++ /dev/null @@ -1,69 +0,0 @@ -# 练习 - -```html - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251218.md" "b/\345\215\242\351\233\205\350\214\271/20251218.md" deleted file mode 100644 index 945b0ea04466a1167cd39f4335ce70b582ede40f..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251218.md" +++ /dev/null @@ -1,44 +0,0 @@ -# 练习 - -```html - -``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251219.md" "b/\345\215\242\351\233\205\350\214\271/20251219.md" deleted file mode 100644 index 839bdb13ce1c65b15a9520bfc54b107b0195922b..0000000000000000000000000000000000000000 --- "a/\345\215\242\351\233\205\350\214\271/20251219.md" +++ /dev/null @@ -1,44 +0,0 @@ -# 练习 -```html - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251110.md" "b/\345\220\225\347\245\245\345\213\207/20251110.md" deleted file mode 100644 index b518f955ccd47ac53143bc2273213aada935a093..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251110.md" +++ /dev/null @@ -1,32 +0,0 @@ -一.JavaScript在HTML中的应用 -```html - 1.直接嵌入标签元素中使用 - - 2.内部引用式(嵌入式) - - 3.外部引用式 - -``` - - -练习一 -```html - -``` -![alt text](Snipaste_2025-11-10_17-05-27.png) - -练习二 -```html -
      - -
      - -``` -![alt text](Snipaste_2025-11-10_17-02-03.png) \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251112.md" "b/\345\220\225\347\245\245\345\213\207/20251112.md" deleted file mode 100644 index a5983b522f810334b1eb85cf4d9885f869ac7c78..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251112.md" +++ /dev/null @@ -1,72 +0,0 @@ -训练一 -```html - -``` - -训练二 -```html - -``` - -训练三 -```html - -``` - -训练四 -```html - -``` -![alt text](Snipaste_2025-11-12_16-47-49.png) - - - -综合训练一 -```html - -``` -![alt text](Snipaste_2025-11-12_11-02-28.png) -综合训练二 -```html - -``` -![alt text](Snipaste_2025-11-12_11-16-31.png) - -综合训练三 -```html - - -``` -![alt text](Snipaste_2025-11-12_16-19-46.png) -\ No newline at end of file \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251113.md" "b/\345\220\225\347\245\245\345\213\207/20251113.md" deleted file mode 100644 index 8dc9c09668fa9c8b74ed40739f291d946f03e9fe..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251113.md" +++ /dev/null @@ -1,54 +0,0 @@ -一.逻辑运算符 -```bash - 运算符 描 述 示 例 - && 逻辑与 a&&b 当a和b都为真时,结果为真,否则为假 - || 逻辑或 a||b 当a为真或者b为真时,结果为真,否则为假 - ! 逻辑非 !a 当a为假时,结果为真,否则为假 -``` - -二.typeof运算符 -```bash - 数据类型 返回值 - 数值 number - 字符串 string - 布尔值 bollean - undefined undefined - null object - 对象 object - 函数 function -``` - -训练五 -```html - -``` - -训练六 -```html - -``` - -训练七 -```html - -``` -\ No newline at end of file \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251114.md" "b/\345\220\225\347\245\245\345\213\207/20251114.md" deleted file mode 100644 index eb89c39ba5f60c1cdda1e0e7151546d3500a1e9d..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251114.md" +++ /dev/null @@ -1,210 +0,0 @@ -训练1 -```html - -``` - -训练2 -```html - -``` - -训练3 -```html - -``` - -训练4 -```html - -``` - -训练5 -```html - -``` - -训练6 -```html - -``` - -训练7 -```html - -``` - -综合练习1 -```html - -``` - -综合练习2 -```html - - 请选择您的出生年月: - - - - -``` - -综合练习3 -```html - - - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251117.md" "b/\345\220\225\347\245\245\345\213\207/20251117.md" deleted file mode 100644 index 0a4afad0c5a191c48187559cfe023dc1f5a23056..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251117.md" +++ /dev/null @@ -1,84 +0,0 @@ -## JavaScript笔记 - -### 流程控制语句 - -1.条件控制语句 - -- if语句 - -- if...else语句 - -- if...else if语句 - -- switch语句 - -2.循环控制语句 - -- while循环语句 - -- do-while循环语句 - -- for循环语句 - -3.跳转语句 - -- continue语句 - -- break语句 - -### 函数 - -1.函数的定义与调用 - -- 定义可指定形参 - -- 调用的时候可任意制定实参,也可不指定 - -```js -//第一种定义方式:传统、原始方式 -function getNameByid(){ - //arguments关键字用于捕获调用函数时传入的参数(实际参数) - console.log(arguments); - } - -//匿名函数 -let getNameByid = function (name,age){ - -} - -//箭头函数 -let getNameByid = (name,age) => { - console.log(name); - console.log(age); -} -``` -2.返回值 -- 有return,则有返回值,而且通常不为undefined。 -- 无return,总是私下返回一个undefined。 - -## 练习 -训练1.获取完整的收货地址 在电子商城网站收货人信息的收货地址栏中,地址由省、市、区和详细地址组成,试着定义一个address()函数,该函数包含省、市、区和详细地址4个参数,在调用函数时,传递的参数可以拼接成一个完整的收货地址。 -```html - -``` -训练2.获取数字的绝对值 定义一个获取数字绝对值的函数,将数字作为参数进行传递,输出-30的绝对值。 -```html - -``` -\ No newline at end of file \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251119.md" "b/\345\220\225\347\245\245\345\213\207/20251119.md" deleted file mode 100644 index cf9ed19e70887c26fcfda1c6607fdd42794cd3e6..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251119.md" +++ /dev/null @@ -1,201 +0,0 @@ -### 一、什么是 JS 函数? -#### 函数是可重复使用的代码块,用来完成特定功能(比如计算、处理数据、触发事件),本质是 “包装好的工具”,调用时才执行。 -### 二、函数的基本写法(3 种常用) -#### 1. 声明式函数(最常用) -#### // 语法:function 函数名(参数1, 参数2) { 函数体 } -#### function add(a, b) { - #### return a + b; // return 返回结果(没有则返回undefined) -#### } -#### // 调用:函数名(实参) -#### let result = add(2, 3); // 结果:5 - -#### 2. 表达式函数(匿名 / 命名) -#### // 匿名表达式 -#### let multiply = function(a, b) { -#### return a * b; -#### }; -#### // 调用 -#### let res = multiply(4, 5); // 20 - -#### // 命名表达式(方便调试) -#### let divide = function div(a, b) { - #### return a / b; -#### }; - -#### 3. 箭头函数(ES6+,简洁) -#### // 语法:(参数) => { 函数体 } (单个参数可省略括号,单句返回可省略大括号和return) -#### let subtract = (a, b) => a - b; // 等价于 function(a,b){return a-b} -#### let res2 = subtract(10, 3); // 7 - -### 三、核心概念(简单记) -#### 参数:函数的 “输入”,声明时写的是 “形参”,调用时传的是 “实参”(实参可少传 / 多传,多余的忽略)。 -#### 返回值:函数的 “输出”,用return带出,执行到return后函数立即结束。 -#### 作用域:函数内部声明的变量,外部不能直接访问(局部变量);外部变量内部可访问(全局变量)。 -## 作业 -```html - -``` - -```html - -``` - ```html - - ``` - ```html - - ``` - - ```html - - -``` -```html - - ``` - ```html - - ``` - ```html - -``` -\ No newline at end of file \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251120.md" "b/\345\220\225\347\245\245\345\213\207/20251120.md" deleted file mode 100644 index 5b03eb3720c100f32451f4d24235c68515e819ad..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251120.md" +++ /dev/null @@ -1,156 +0,0 @@ -### 一、什么是 JS 对象? -- 对象是存储数据和功能的集合,本质是 “键值对的容器”(键 = 属性名,值 = 属性值,值可以是变量、函数等),用来描述一个具体的事物(比如人、商品)。 -### 二、对象的创建方式(3 种常用) -- 1. 字面量方式(最常用) -- // 语法:let 对象名 = { 键1: 值1, 键2: 值2, ... } -- 2. 构造函数方式(创建多个同类对象) -- // 用Object构造函数 -```html - let car = new Object(); - car.brand = "特斯拉"; - car.price = 300000; - car.run = () => console.log("汽车在行驶"); -``` -- 3. 简化写法(ES6+,属性 / 方法简写) -- let name = "小红"; -- let eat = () => console.log("吃饭啦"); - -- // 属性名和变量名一致时,可简写 -```html -let person2 = { - name, // 等价于 name: name - eat // 等价于 eat: eat -}; -``` -### 三、对象的核心操作(增删改查) -- 1. 查(访问属性 / 方法) -```html -let person = { name: "小明", age: 20, sayHi: () => console.log("你好") }; -``` -- // 方式1:点语法(推荐,简洁) -```html -console.log(person.name); // 输出:小明 -person.sayHi(); // 输出:你好 -``` -```html -// 方式2:方括号语法(适合属性名带特殊字符/变量) -console.log(person["age"]); // 输出:20 -let key = "name"; -console.log(person[key]); // 输出:小明 -``` -- 2. 增(添加新属性 / 方法) -```html -let person = { name: "小明" }; -person.gender = "男"; // 添加属性 -person.study = () => console.log("学习中"); // 添加方法 -``` - -- 3. 改(修改已有属性 / 方法) -```html -let person = { name: "小明", age: 20 }; -person.age = 21; // 修改属性 -person.sayHi = () => console.log("Hi~"); // 修改方法 -``` - -- 4. 删(删除属性) -```html -let person = { name: "小明", age: 20 }; -delete person.age; // 删除age属性 -console.log(person.age); // 输出:undefined -``` - -### 四、核心概念(简单记) -- 属性:对象的 “特征”(比如 name、age)。 -- 方法:对象的 “功能”(函数类型的属性,比如 sayHi、run)。 -- 键名:属性名,默认是字符串(可省略引号,特殊字符需加引号,比如 "user-name")。 -- this:对象内部的方法中,this指向当前对象(箭头函数无 this,指向外部环境)。 -```html -let person = { - name: "小明", - sayName: function() { - console.log(this.name); // this指向person,输出:小明 - } -}; -``` -```html - - - - 点击页面任意位置,检测鼠标按键 - -

      生成 1-6 组成的随机数

      - - -
      - - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251121.md" "b/\345\220\225\347\245\245\345\213\207/20251121.md" deleted file mode 100644 index 52b101b5764f1ffe777a6fb9676d8148bc0b2f37..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251121.md" +++ /dev/null @@ -1,62 +0,0 @@ -#### 一、什么是 JS 数组? -- 数组是有序的集合,专门用来存储多个数据(可以是不同类型:数字、字符串、对象等),本质是 “带索- 引的容器”,索引从 0 开始(第 1 个元素索引为 0,第 2 个为 1,以此类推)。 -#### 二、数组的创建方式(2 种常用) -- 1. 字面量方式(最常用) -- // 语法:let 数组名 = [元素1, 元素2, ...] -- 2. 构造函数方式 -- let numbers = new Array(1, 2, 3, 4); // 结果:[1,2,3,4] - -#### 三、数组的核心操作(增删改查) -- 1. 查(访问元素 / 长度) -```html -let fruits = ["苹果", "香蕉", "橙子"]; - -// 访问元素:数组名[索引] -console.log(fruits[0]); // 输出:苹果(第1个元素) -console.log(fruits[2]); // 输出:橙子(第3个元素) - -// 访问长度:数组名.length -console.log(fruits.length); // 输出:3(数组有3个元素) -``` -- 2. 改(修改元素) -```html -let fruits = ["苹果", "香蕉", "橙子"]; -fruits[1] = "葡萄"; // 把索引1的元素改成“葡萄” -console.log(fruits); // 结果:["苹果", "葡萄", "橙子"] -``` -- 3. 增(添加元素) -```html -let fruits = ["苹果", "香蕉"]; -``` -- // 1. 末尾添加(push,常用) -```html -fruits.push("橙子", "梨"); // 可添加多个元素 -console.log(fruits); // 结果:["苹果", "香蕉", "橙子", "梨"] -``` -- // 2. 开头添加(unshift) -```html -fruits.unshift("草莓"); -console.log(fruits); // 结果:["草莓", "苹果", "香蕉", "橙子", "梨"] -``` -- 4. 删(删除元素) -- let fruits = ["草莓", "苹果", "香蕉", "橙子"]; - --// 1. 末尾删除(pop,常用) -```html -fruits.pop(); // 无参数,删除最后1个元素 -console.log(fruits); // 结果:["草莓", "苹果", "香蕉"] -``` -- // 2. 开头删除(shift) -```html -fruits.shift(); // 无参数,删除第1个元素 -console.log(fruits); // 结果:["苹果", "香蕉"] -``` - -#### 五、核心概念(简单记) -- 索引:元素的位置编号,从 0 开始,最大索引 = 数组长度 - 1。 -- 长度:length属性,不仅能获取长度,还能修改(比如arr.length = 0可清空数组)。 -- 动态性:JS 数组长度不固定,添加 / 删除元素会自动调整长度,无需提前声明。 -#### 六、简单注意点 -- 数组索引不能越界,访问不存在的索引(比如arr[10],数组只有 3 个元素)会返回undefined。 -- 数组可以存储任意类型数据,但建议尽量存储同类型(方便遍历和处理)。 -- 常用方法中,push/pop(操作末尾)比unshift/shift(操作开头)效率更高。 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251124.md" "b/\345\220\225\347\245\245\345\213\207/20251124.md" deleted file mode 100644 index fbcecc947c62322b9cfd61618b25a3f533a83653..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251124.md" +++ /dev/null @@ -1,75 +0,0 @@ -## 学习内容 - - Ts是js的一个超集(在大型,长期维护的项目起大作用【可以减少许多基础错误】) - - map,set集合的特性在一些高级场景很实用,除此之外,Map的key可以是非string,set用于形成唯一值集合。 -## String对象 -用let str ='';代替new来创建。 -方法:charAt,indexof,substring,格式化字符串 -可当成数组遍历。 -## 练习题 -![](图片imgs/20251124-练习1.png) -```html - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251126.md" "b/\345\220\225\347\245\245\345\213\207/20251126.md" deleted file mode 100644 index e3725ff60cb46014ca0707b4850250b04f4d0a58..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251126.md" +++ /dev/null @@ -1,152 +0,0 @@ -## - - ![](图片imgs/20251126-练习1.png) - - - 字符串.match(正则)返回匹配到的字符串 - - 字符串.replace(正则,要替换的字符串')返回替换后的完整字符串 - - 正则.exec(字符串)返回匹配到的字符串、所在的位置,完整字符串 - - 正则.test(字符串)返回匹配字符串的结果:true false - -![](图片imgs/20251126-练习2.png) - - -```html - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251127.md" "b/\345\220\225\347\245\245\345\213\207/20251127.md" deleted file mode 100644 index 50568d397daf9f6c074682945c693cedfea23c8f..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251127.md" +++ /dev/null @@ -1,135 +0,0 @@ - - - ## 学习内容 - - 控制台中可找问题,而不希望结果显示在控制台,用try catche - - js(Node.js等)通常不写复杂业务 - - 关注鼠标,键盘,表单常用事件 - - 对事件冒泡的阻止:event.stopPropagation(); - - 取消浏览器的”默认动作”(点击会跳转、提交按钮会刷新页面等):preventDefault(); - - onload:是在页面基础元素加载后才执行 - -## 练习题 - -![](图片imgs/20251127-练习.gif) -```html - -
      - - - - -
      - - -``` - -```html - -

      数字转字母查询

      - - - - -

      - - - - - - -``` - -```html - -

      用户注册验证

      - -
      - - -

      - - - -

      - - -
      - - - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251128.md" "b/\345\220\225\347\245\245\345\213\207/20251128.md" deleted file mode 100644 index 396a80357c4dc81a3bc4f9041a0357c56b827df6..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251128.md" +++ /dev/null @@ -1,71 +0,0 @@ - -## 学习内容 - - 40%-60%:开发所有功能只占20%;剩下用于完善处理可能的需求/麻烦。 - - 剩下的是一些会议(设计(扯皮),研讨,培训 - -## 练习题 -![](图片imgs/20251128-练习1.gif) -```html - - - -
      中国的国球是?
      -
      - -
      - - -
      - - -
      - - -
      -
      -
      -
      - - - - -``` - -![](图片imgs/20251011-练习.png) -```html - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251201.md" "b/\345\220\225\347\245\245\345\213\207/20251201.md" deleted file mode 100644 index d25029b4db6622ae6208d61be6c0c3258d24683e..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251201.md" +++ /dev/null @@ -1,63 +0,0 @@ -## 笔记 - -拖放图片: -![alt text](image.png) -![alt text](image-1.png) - -练习1: -```html -
      -

      欢迎购买明日科技图书

      -
      - - -``` -练习2: -```html - - -``` - -练习3: -```html - - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251203.md" "b/\345\220\225\347\245\245\345\213\207/20251203.md" deleted file mode 100644 index 106e686bfb5d3ad2422ecf4ddad5633486f271bb..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251203.md" +++ /dev/null @@ -1,148 +0,0 @@ -## 笔记 - -1. P194练习2: - - ![alt text](image.png) - - ![alt text](image-1.png) - -2. Document对像: - - 常用方法: - - `getElementById()`:返回指定ID的对象 - - `querySelector()`: 它返回文档中与指定的 CSS 选择器匹配的第一个元素。如果没有找到匹配项,则返回 null - - `createEiement()`:根据指定名称创建元素 - - `appendChild()`:将一个节点(元素)作为最后一个子元素添加到另一个元素中 - -3. 获取单选按钮的值: - - ![alt text](image-2.png) - -训练1: -```html -
      - -
      - -``` - -训练2: -```html - -``` -训练3: -```html - -
      -
      - -``` - -综合1 -```html - - - -``` - -综合2: -```html - - - 打开图片对话框 -
      - 删除 -
      - -``` - -综合3 -```html - - -
      -
      - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251204.md" "b/\345\220\225\347\245\245\345\213\207/20251204.md" deleted file mode 100644 index 2840d142d27645d55eb4e1f60407b6791ccb8dc0..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251204.md" +++ /dev/null @@ -1,380 +0,0 @@ -## 笔记 - -p203训练3: -![alt text](image.png) - -1. DOM概述: - - 根节点 - - 父节点 - - 子节点 - - 兄弟节点 - - 叶节点 - - 元素节点 - - 文本节点 - - 元素节点 - -2. 节点属性 - - nodeName:节点名称 - - nodetype:节点类型 - - paerntNode:返回当前节点的父节点 - - firstChild:返回当前节点的第一子节点 - - lastChild:放回当前节点的最后子节点 - -3. 节点 - - 创建节点:`appendChide()` - - 插入节点:`insertBefore()` - - 删除与替换:`removeChild()`,`replaceChild()` - -4. 获取元素 -![alt text](image-1.png) - -训练1 -```html - - -
      -
      - -``` -训练2: -```html - - -

      aaaaaaaaaaaa

      - -``` - -训练3: -```html -

      最新电影资讯

      -
      -

      1.《金蝉脱壳》

      -

      2.《阿甘正传》

      -

      3.《爱乐之城》

      -

      4.《头号玩家》

      -

      5.《疯狂动物城》

      -
      - 输入影片资讯编号: - - - -``` - -训练4: -```html - -
      -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 芒果
      • -
      -
        -
      • 西瓜
      • -
      • 蜜橘
      • -
      • 萝卜
      • -
      -
      - - -``` - -训练5 -```html -

      在《倚天屠龙记》中,张三丰是_____派的掌门?

      - A.少林 - B.武当 - C.峨眉 - D.昆仑 - - -``` - -训练6 -```html - - - - 原超链接文本 - - - -``` - -训练7 -```html - - - -

      动态添加图片与修改超链接

      - - - 原超链接文本 -
      - - -``` - -练习1 -```html -

      - 一生只爱一个人 - 将粗体改为斜体 -

      - - -``` - -练习2 -```html - - - - - -``` - -练习3 -```html - 选择表情图片 - - - -
      - 请选择表情: - -
      - 调皮表情 - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251205.md" "b/\345\220\225\347\245\245\345\213\207/20251205.md" deleted file mode 100644 index 077670af34bd77abed9490503dd2f098218b2630..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251205.md" +++ /dev/null @@ -1,13 +0,0 @@ -## 笔记 - -`outerHTML` - -### Windowz对象 - -1. 属性 - - frames:对话框中显示的文档 - - location:指定当前文档的URL - -2. 方法 - - alet():弹出一个警告对话框 - - confirm():在确认对话框中显示的指定的字符串 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251208.md" "b/\345\220\225\347\245\245\345\213\207/20251208.md" deleted file mode 100644 index d8eb646c8000f1f7212b9197b04e3ff4ffc7f8d0..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251208.md" +++ /dev/null @@ -1,9 +0,0 @@ -## 笔记 - -location方法: -assign():跳转新页面 -reload():重新载入当前页面 -history方法: -back():退回前一页 -forward():重新进入下一页 -go():进入指定的网友 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251210.md" "b/\345\220\225\347\245\245\345\213\207/20251210.md" deleted file mode 100644 index f23311f168911ad1efe09eb268f57fe55e88f671..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251210.md" +++ /dev/null @@ -1,230 +0,0 @@ -## 作业 - -
      -

      此情可待成追忆

      -

      只是当时已惘然

      -
      - - - - 丁禹兮 - - - - - - - - - - - - - - - - \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251211.md" "b/\345\220\225\347\245\245\345\213\207/20251211.md" deleted file mode 100644 index 7042012c6dfe79a4683a20f909715b023b807e0a..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251211.md" +++ /dev/null @@ -1,172 +0,0 @@ -## 作业 - - - - - - -
      - 语文 - 数学 - 英语 - 物理 - 化学 - 生物 - 历史 - 地理 - 政治 -
      - - -
      - A. 错误答案
      - B. 正确答案
      - C. 错误答案
      - -
      - -
      - - - -
      - 阅读
      - 运动
      - 听歌
      - 摄影
      - 绘画
      -
      -
      - - - - \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251212.md" "b/\345\220\225\347\245\245\345\213\207/20251212.md" deleted file mode 100644 index c407c48ef32f01a45f53bc0f9f788bc0d68e1d57..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251212.md" +++ /dev/null @@ -1,20 +0,0 @@ -## 笔记 -一、JSON - -1. 概念 -- JSON(JavaScript Object Notation)是轻量级的数据交换格式,独立于语言,易读易解析。 -2. 核心方法 -- JSON.parse():将 JSON 字符串转换为 JavaScript 对象 / 数组,用于处理后端返回的 JSON 数据。 -- 例:const obj = JSON.parse('{"name":"张三","age":20}'); -- JSON.stringify():将 JavaScript 对象 / 数组转换为 JSON 字符串,用于向后端发送数据。 -- 例:const str = JSON.stringify({name:"张三",age:20}); -3. 注意点 -- 键名必须用双引号包裹,不能用单引号或无引号; -- 不能包含函数、undefined 等类型,序列化时会被忽略。 二、Fetch API -4. 概念 -- Fetch API 是现代浏览器提供的异步网络请求接口,替代传统的 XMLHttpRequest,基于 Promise 实现。 -5. 关键要点 -- Fetch 的响应(Response 对象)需要手动解析(json ()/text () 等),这是一个异步操作; -- 只有网络错误或请求无法完成时才会触发 catch,HTTP 错误(如 404、500)不会直接触发,需通过response.ok判断; -- 默认不携带 Cookie,若需要则配置credentials: 'include'; -- 支持 AbortController 中断请求 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251215.md" "b/\345\220\225\347\245\245\345\213\207/20251215.md" deleted file mode 100644 index e820ea0afea02bfe62213b4f74e606386bfab8fb..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251215.md" +++ /dev/null @@ -1,75 +0,0 @@ -## 笔记 - -``` -let arr=[1,3,4,4,3,1,2]; - -**arr.indexof()** -从左到右开始,查找传入的元素是否在数组中,如果找到,则返回第一个找到数组的下标,如果没有则返回-1 - -**arr.lastIndexof()** -从右开始,查找传入的元素是否在数组中,如果找到,则返回第一个找到元素的下标,如果没有则返回-1 -``` -### 省市联动代码 -``` - - - - - - - - Document - - - - - - - - - -``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251217.md" "b/\345\220\225\347\245\245\345\213\207/20251217.md" deleted file mode 100644 index 2c287d9919487067ad2b63642940136a65805fd1..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251217.md" +++ /dev/null @@ -1,48 +0,0 @@ -## 笔记 -### jQuery基础 -- 和js的引用一样,建议在body结束标签之前引用。 - -- 使用`$`来使用jQuery库的能力,`$`符号实际上是一个方法,当然方法在js中也是一对象,所以其也有一些属性可以使用 - -- jquery可以获得jQuery,和原生js拿到的对象不同,但它们间可以互相转换 - - - let div=$('div')拿到jquery对象 - - - div[0]拿到dom对象 - - - $(div[0]又可以重新转换为jquery对象) - - 原生js拿到的接过,通常是dom对象 - - jquery拿到的结果,通常是jQuery对象 - - - let div=$('div'); - - 将jQuery对象转换成dom对象 - - let domEl = div[0]; - - 将dom对象重新转换为jquery对象 - - let jQueryObj = $(domEl); - ### jQuery选择器与操作 - - - 基础选择器 - - 标签选择器 - - 类名选择器 - - id选择器 - - 关系选择器 - - 子代选择器` ` - - 直接子代选择器`>` - - 兄弟选择器`~` - - 相邻兄弟选择器`+` - - 高级选择器 - - 属性表达器 - - 伪类表达器 - - 伪元素表达器 - - ### jQueryDom操作 - - 新增append给拿到的元素增加一个下级元素 - - 移除remove移除拿到的元素 - - text()拿到文本内容,text('要设置的内容')可以修改纯文本内容 - - html()拿到包含标签的内容,html('要设置的内容')可以修改标签的内容 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251218.md" "b/\345\220\225\347\245\245\345\213\207/20251218.md" deleted file mode 100644 index cd406a0432e509bef922d26acda0f92f2d35de69..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251218.md" +++ /dev/null @@ -1,27 +0,0 @@ -## 笔记 - -### jQuery事件处理 - -事件绑定函数第二种情形: - -let d4 = document.getElementById('d4'); - -d4.onclick = function(){} - -d4.addEventListener('click',function(){}) - -- jQuery对象.on('click',function(){}) -- jQuery对象.click(function(){}) -- jQuery对象.trigger('click',function(){}) -- $(function(){}) - -**jQuery的初始化数据的搞法** - - $(document).ready(function(){}) - $(document).on('reay',function(){}) - $(function(){ - console.log(1); - }) -### jQuery动画与效果 -- 基础效果:显示、隐藏 show()、hide()、toggle() -- 进阶效果:淡入、淡出 fadeIn()、fadeOut() \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251219.md" "b/\345\220\225\347\245\245\345\213\207/20251219.md" deleted file mode 100644 index 776043b1bcb46254e93cc89adb70e7c7b3897870..0000000000000000000000000000000000000000 --- "a/\345\220\225\347\245\245\345\213\207/20251219.md" +++ /dev/null @@ -1,73 +0,0 @@ -# 笔记 - -### 变量、常量和基础数据类型 -- var let定义变量,请忘记var,后续只使用let -- const定义常量,常量名全大写 -- 数据类型 - - 基础数据类型 - - string - - number - - boolean - - underfined - - null - - 复合数据类型 - - 对象 - - 数组 - - 函数 -### 运算符和数据类型转换 -- "+"" "-"" "*"" "/"" "%"" -- 逻辑运算 - - null undefined 0 '' 这些字面量参与逻辑运算时,作为false,其余的值作为true - - 短路运算 true || 表达式 false && 表达式 -- 赋值运算 = += -+ ++ --等 -- parseInt parseFloat 乘1变数字 加空字符串变字符串 -### 流程控制 - -- 判断 - - if - - if ... else - - if ... else if() - - if ... else if()... else - - switch -- 循环 - - for - - while - - do...while -- 三元运算 -## 核心数据结构及用法 - -### 数组 - -- 改变数组本身的方法 - - sort 排序,接受一个比较器 - - push pop 从尾部添加、删除 - - unshift shift 从头部添加、删除 - - splice 万能方法 删除元素、添加元素、修改元素 - - reverse 倒置 - - fill 填充 -- 不改变数组本身的方法 - - concat 拼接数组 - - slice 截取 - - map 将一个函数用在数组的每一个元素上,并将处理后的结果放入新的数组 - - filter 将一个函数用在数组的每个元素上,如果这个元素运算的结果为true,则将元素放入新的数组,反之不放,最终得到新的数组 - - reduce 将一个函数用在数组的前2个元素上,计算后的结果作为同一个函数第一个参数和数组的第三元素作为第二参数进行运算 - - forEach 遍历 - - find 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素,否则最终返回undefined - - findIndex 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素下标,否则最终返回undefined - - every - - some - - includes - - indexOf - - lastIndexOf - - join -- 高阶函数 - - 一个函数f,接受另外一个函数作为其参数,则称函数f为高阶函数 -### 函数 -- 函数定义 三种定义方式 -- 函数参数 可传可不传,不会因为没有参数而报错 -- 函数返回值 如果没有返回值,则默认返回undefined - -### 对象 -- 包含在一对大括号中的内容 -- 键值对,键也就是属性,值也就属性值 -- 也可以使用类似于数组的形式访问某个值,或者为其添加新的属性 \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251110-\345\210\235\350\257\206js.md" "b/\345\220\264\345\256\232\346\263\242/20251110-\345\210\235\350\257\206js.md" deleted file mode 100644 index b99ae332d41244c13c334a095ad103872d78c81d..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251110-\345\210\235\350\257\206js.md" +++ /dev/null @@ -1,17 +0,0 @@ -## 初识JS - -- 实现页面交互:比如按钮点击、表单验证、轮播图切换。 -- 操作页面元素:修改文字、图片、样式,动态添加 / 删除内容。 -- 处理数据:解析接口数据、本地存储(如记住用户偏好)。 -- 控制行为:定时器、动画效果、页面跳转等。 - - -## 作业 - -```html - -``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251112-js\345\237\272\347\241\200.md" "b/\345\220\264\345\256\232\346\263\242/20251112-js\345\237\272\347\241\200.md" deleted file mode 100644 index 2f60386a460b17bbe3e0fc9e167ab96ec148b0d0..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251112-js\345\237\272\347\241\200.md" +++ /dev/null @@ -1,41 +0,0 @@ -## 练习作业 - -```html - -``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251113-\345\276\252\347\216\257\347\273\203\344\271\240.md" "b/\345\220\264\345\256\232\346\263\242/20251113-\345\276\252\347\216\257\347\273\203\344\271\240.md" deleted file mode 100644 index c9723140d44e18e7ac224d9615401f1be21bf4d4..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251113-\345\276\252\347\216\257\347\273\203\344\271\240.md" +++ /dev/null @@ -1,68 +0,0 @@ -## 作业练习 - -```html - -``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251114-\344\275\234\344\270\232.md" "b/\345\220\264\345\256\232\346\263\242/20251114-\344\275\234\344\270\232.md" deleted file mode 100644 index 4ca4d6e3d46c68453ba518a54853b66e6fbb3f36..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251114-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,113 +0,0 @@ -## 作业 - -```html - -``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251117-\345\207\275\346\225\260.md" "b/\345\220\264\345\256\232\346\263\242/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index 8388e6c04f136d30ddbc12b2713d8554ddac8c9e..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,40 +0,0 @@ -## 函数的定义 - -- 使用 function 关键字定义函数 - -```js -function sayHello() { - console.log("Hello World!"); -} -sayHello(); -``` - -## 函数参数 - -- 形参和实参, 形参是定义时的参数,实参是调用时传入的值; - -## 练习 -```js - document.write("训练1"); - document.write("
      "); - function address(province, city, district, location) { - document.write(province + "省" + city + "市" + district + "区" + location); - - } - address("福建", "龙岩", "新罗", "闽大
      "); - - document.write("训练2"); - document.write("
      "); - let a = -4; - function num(a) { - if (a > 0) { - document.write(a); - } else if (a < 0) { - document.write(a * (-1)); - } - } - document.write(a + "的绝对值:"); - num(a); - -``` - diff --git "a/\345\220\264\345\256\232\346\263\242/20251119-\345\207\275\346\225\260\344\275\277\347\224\250.md" "b/\345\220\264\345\256\232\346\263\242/20251119-\345\207\275\346\225\260\344\275\277\347\224\250.md" deleted file mode 100644 index a10f0e060fdc90ee6dbba1d4fdb9e1983bee7110..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251119-\345\207\275\346\225\260\344\275\277\347\224\250.md" +++ /dev/null @@ -1,95 +0,0 @@ -## 练习 - -```js -document.write("训练3"); - document.write("
      "); - let num1 = 11, num2 = 9; - function comparison(num1, num2) { - if (num1 > num2) { - document.write(num1 + "大于" + num2); - } else if (num2 > num1) { - document.write(num2 + "大于" + num1); - } - } - comparison(num1, num2); - - document.write("
      "); - document.write("训练4"); - document.write("
      "); - let num3 = 16, num4 = 12, num5 = 17; - function mini(num3, num4, num5) { - if ((num3 > num4 && num5 > num4) || (num3 > num5 && num5 > num3)) { - document.write("最小值为" + num4); - } else if ((num4 > num3 && num5 > num3) || (num4 > num5 && num5 > num4)) { - document.write("最小值为" + num3); - } else if ((num3 > num5 && num4 > num5) || (num3 > num4 && num4 > num3)) { - document.write("最小值为" + num5); - } - } - mini(num3, num4, num5); - - document.write("
      "); - document.write("训练5"); - document.write("
      "); - let num6 = 100, num7 = 200, num8 = 200; - function sum(num6, num7, num8) { - let all = (num6 + num7 + num8); - return all; - } - - function discount(num6, num7, num8) { - let result = sum(num6, num7, num8); - if (result >= 500) { - document.write("顾客消费总额" + result + "元可以享受优惠"); - } else if (result < 500) { - document.write("顾客消费总额" + result + "元不可以享受优惠"); - } - } - discount(num6, num7, num8); - - document.write("
      "); - document.write("训练6"); - document.write("
      "); - let score1 = 108, score2 = 115, score3 = 126, score4 = 237; - function total_score(score1, score2, score3, score4) { - let sum = score1 + score2 + score3 + score4; - return sum; - } - - function line(score1, score2, score3, score4) { - let result = total_score(score1, score2, score3, score4); - if (result > 550) { - document.write("学生总成绩" + result + "达到本科线"); - } else if (result < 550) { - document.write("学生总成绩" + result + "未达到本科线"); - } - } - line(score1, score2, score3, score4); - - document.write("
      "); - document.write("训练7"); - document.write("
      "); - let login = function (user, pwd) { - if (user == "mr" && pwd == "mrsoft") { - document.write("登录成功!"); - } else { - document.write("登录失败!"); - } - } - login("mr", "mrsoft"); - - document.write("

      训练8

      "); - let b = 0; - let shu = function (n) { - for (let a = 1; a < n; a++) { - if (a % 3 == 0 && a % 5 == 0) { - document.write(a + " "); - b++; - if (b % 7 == 0) { - document.write("
      "); - } - } - } - } - shu(1000); -``` diff --git "a/\345\220\264\345\256\232\346\263\242/20251120-\345\257\271\350\261\241.md" "b/\345\220\264\345\256\232\346\263\242/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index ac9d5c5063fcf0b1ccc1b7f077eefa73095379dd..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,44 +0,0 @@ -## 对象定义 -所有事物都是对象 -JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型(也可以不带属性和方法)。 - -## 练习 - -```js - document.write("
      "); - let date1 = new Date(2023,4,1); - let date2 = new Date(2023,5,1); - let date3 = date2.getTime() - date1.getTime(); - let hour = Math.ceil(date3/(60*60*1000)); - alert("间隔"+hour+"小时"); - - document.write("
      "); - let date4 = new Date(2025,11,20); - let date5 = new Date(2023,6,7); - let date6 = date5.getTime() - date4.getTime(); - let day = Math.ceil(date6/(24*60*60*1000)); - document.write("距离2023年高考已经过去"+day+"天"); - - document.write("
      "); - function click(c){ - if(c.button==0){ - alert("点击了鼠标左键"); - }if(c.button==1){ - alert("点击了鼠标中键") - }if(c.button==2){ - alert("点击了鼠标右键") - } - } - document.onmousedown=click; - - document.write("
      "); - const birth = new Date(1996, 5, 9); - const diff = Date.now() - birth.getTime(); - - const days = Math.floor(diff / (1000 * 60 * 60 * 24)); - const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); - const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((diff % (1000 * 60)) / 1000); - - document.write(`距离${days}天${hours}小时${minutes}分钟${seconds}秒`); -``` diff --git "a/\345\220\264\345\256\232\346\263\242/20251121-\346\225\260\347\273\204.md" "b/\345\220\264\345\256\232\346\263\242/20251121-\346\225\260\347\273\204.md" deleted file mode 100644 index be78d4119049d0eb162e2b75cfd3c88cbb7f2053..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251121-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,18 +0,0 @@ -## 数组创建 -1. -```js -var myCars=new Array(); -myCars[0]="1"; -myCars[1]="2"; -myCars[2]="3"; -``` - -2. -```js -var myCars=new Array("1","2","3"); -``` - -3. -```js -var myCars=["1","2","3"]; -``` diff --git "a/\345\220\264\345\256\232\346\263\242/20251124-\346\225\260\347\273\204\345\257\271\350\261\241.md" "b/\345\220\264\345\256\232\346\263\242/20251124-\346\225\260\347\273\204\345\257\271\350\261\241.md" deleted file mode 100644 index 48d83c40bdcdee7ccbc583e9dec0ddd4dab5675d..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251124-\346\225\260\347\273\204\345\257\271\350\261\241.md" +++ /dev/null @@ -1,49 +0,0 @@ -## 数组对象的方法 - -- `concat()` 连接两个或更多的数组,并返回结果; -- `pop()` 删除并返回数组中的最后一个元素; -- `push()` 向数组尾部添加一个或多个元素,并返回新的长度; -- `shift()` 删除并返回数组中的第一个元素; -- `splice()` 删除元素,并向数组中添加新元素; -- `unshift()` 向数组头部添加一个或多个元素,并返回新长度; -- `reverse()` 颠倒数组中元素的排序; -- `sort()` 对数组中的元素进行排序; -- `slice()` 从某个已有的数组中返回选定的元素; -- `toSource()` 代表对象的源代码; -- `toString()` 把数组转换为字符串,并返回结果; -- `toLocaleString()` 把数组转换为本地字符串,并返回结果; -- `join()` 把数组中的所有元素放入一个字符串,元素间通过指定的分隔符进行分隔; -- `valueOf()` 返回数组对象的原始值; - - -## 练习 - -```html - -``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\345\220\264\345\256\232\346\263\242/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index dacb03fbe23f9f67829bb0a7b9775a58091db683..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,62 +0,0 @@ -## 定义 -- 正则表达式描述了一种字符串的匹配模式,即通过使用一系列普通字符串和特殊字符串构建能够明确描述文本字符串的匹配模式,可以用来检查一个字符串是否含有某个字串、将匹配的字符串替换或者从某个字符串中去除某个符合条件的字符串等。 - -- 字符串.match(正则) 返回匹配到的字符串 -- 字符串.replace(正则,'要替换的字符串') 返回替换后的完整字符串 - -- 正则.exec(字符串) 返回匹配到的字符串,所在的位置,完整字符串 -- 正则.test(字符串) 返回匹配字符串的结果:true false - -## 练习 - -```html - - -``` diff --git "a/\345\220\264\345\256\232\346\263\242/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\345\220\264\345\256\232\346\263\242/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 92bb14d3463ca15591d1ed4e48b979016631cf6c..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,136 +0,0 @@ -## 练习 - -```html - - -
      - -
      - - - - - -

      中国的“国球”是()。

      -

      A. 篮球

      -

      B. 排球

      -

      C. 乒乓球

      -

      D. 羽毛球

      -

      - - - -

      当前时间是:

      -

      - - - -

      窗口尺寸:

      -

      - - -
      - - - -请选择您的出生年月: - - - - -
      - -
      - - -
      - - - -
      - - -``` diff --git "a/\345\220\264\345\256\232\346\263\242/20251201-\346\213\226\346\224\276.md" "b/\345\220\264\345\256\232\346\263\242/20251201-\346\213\226\346\224\276.md" deleted file mode 100644 index 1721f4abc230db8cc755b7a9e2e3c4d38a4cbeea..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251201-\346\213\226\346\224\276.md" +++ /dev/null @@ -1,53 +0,0 @@ -## 拖放事件生命周期 - -- 知识点:拖放操作涉及两个对象的事件:被拖元素(drag source)和目标区域(drop target)。 - -- 被拖元素事件 -element.addEventListener("dragstart", handleDragStart); -element.addEventListener("dragend", handleDragEnd); - -- 目标区域事件 -target.addEventListener("dragover", handleDragOver); -target.addEventListener("drop", handleDrop); - -- dragstart 事件: 开始拖动时触发,用于设置拖拽数据。 - -## 练习 - -```html - - -
      -
      - -
      -
      -
      - -``` - - - diff --git "a/\345\220\264\345\256\232\346\263\242/20251203-document\345\257\271\350\261\241.md" "b/\345\220\264\345\256\232\346\263\242/20251203-document\345\257\271\350\261\241.md" deleted file mode 100644 index 3100bd1a4a74876e61a9f316e3f666b9febf4e2b..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251203-document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,130 +0,0 @@ -## Document 对象知识点总结 - -1. `getElementById()`方法返回具有指定ID的元素。 -2. `getElementsByTagName()`方法返回具有指定标签名的元素集合。 -3. `getElementsByName()`方法返回具有指定类名的对象集合。 -4. `querySelector()`方法返回匹配指定CSS选择器的第一个元素 -5. `querySelectorAll()`方法返回匹配指定CSS选择器的所有元素 -6. `createElement()`方法用于创建一个新的元素节点 - -## 练习 - -```html - - - - - - - -

      - - - - -
      - - - - - - - -

      《行路难》

      -

      李白

      -
      金樽清酒斗十千,玉盘珍羞直万钱。
      -
      -                停杯投箸不能食,拔剑四顾心茫然。
      -
      -                欲渡黄河冰塞川,将登太行雪满山。
      -
      -                闲来垂钓碧溪上,忽复乘舟梦日边。
      -
      -                行路难!行路难!多岐路,今安在?
      -
      -                长风破浪会有时,直挂云帆济沧海。
      - - - -``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251204-\346\226\207\346\241\243.md" "b/\345\220\264\345\256\232\346\263\242/20251204-\346\226\207\346\241\243.md" deleted file mode 100644 index bca1734c90f0144956bbf66919961c1cdab1432b..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251204-\346\226\207\346\241\243.md" +++ /dev/null @@ -1,146 +0,0 @@ -## DOM 概述 - -DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,它将文档表示为节点树,允许程序访问和操作文档的内容、结构和样式。 - -DOM 将文档表示为树形结构,每个部分(元素、属性、文本)都是树上的节点。 - -1. 元素选择 -| 方法 | 核心特点 | -| ------------------- | ------------------------------- | -| `getElementById` | 性能最优,返回单个元素 | -| `getElementsBy*` | 动态集合,元素变化自动同步 | -| `querySelector/All` | 支持CSS选择器,后者返回静态集合 | - -2. 节点操作 -- **创建插入**:`createElement`(创元素)、`createTextNode`(创文本,防XSS)、`appendChild`/`insertBefore`(插入)。 -- **删除替换**:`node.remove()`(自删)、`removeChild`(父删子)、`replaceChild`(替换)。 -- **安全**:优先`textContent`,慎用`innerHTML`。 - -3. 样式与属性 -- 样式:`elem.style`(行内)、`classList`(类名操作,推荐)、`getComputedStyle`(计算样式,只读)。 -- 属性:`getAttribute`/`setAttribute`(原生属性)、`dataset`(`data-*`属性)。 - -三、事件与优化 -1. **事件**:推荐`addEventListener`,关键事件`DOMContentLoaded`(初始化)、`beforeunload`(页面卸载提示);事件委托适配动态元素。 -2. **性能优化**:缓存元素、批量操作(`DocumentFragment`)、避免同步重排、高频事件节流防抖、删元素前解绑事件。 - - -## 练习 - -```html - - - -
      - - - - - -
      - -
      -            夜空中最亮的星
      -            能否听清
      -            那仰望的人
      -            心底的孤独和叹息
      -            夜空中最亮的星
      -            能否记起
      -            曾与我同行
      -            消失在风里的身影
      -        
      - - - -

      最新电影资讯

      -
        -
      • 1.《金蝉脱壳》
      • -
      • 2.《阿甘正传》
      • -
      • 3.《爱乐之城》
      • -
      • 4.《头号玩家》
      • -
      - 输入影片资讯编号: - - - - -
      -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 芒果
      • -
      -
        -
      • 西瓜
      • -
      • 蜜橘
      • -
      • 萝卜
      • -
      -
      - - - -

      在《倚天屠龙记》中,张三丰是_____派的掌门?

      - A.少林 - B.武当 - C.峨眉 - D.昆仑 - - -``` diff --git "a/\345\220\264\345\256\232\346\263\242/20251205-window\345\257\271\350\261\241.md" "b/\345\220\264\345\256\232\346\263\242/20251205-window\345\257\271\350\261\241.md" deleted file mode 100644 index b56a8acfa19947660471c2f4ca9e0008d0a657b4..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251205-window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,17 +0,0 @@ -## Window 对象 -Window 对象代表浏览器窗口,是 JavaScript 的全局对象,包含所有全局变量、函数和对象。 - -Window 对象包含 document、location、history、navigator 等子对象。 - -- `document.title` 获取 / 设置页面标题 -- `document.URL` 获取当前页面完整 URL -- `document.body` 获取 元素,可直接操作其样式和内容 - -- `getElementById()` 根据元素 id 属性查询 -- `getElementsByTagName()` 根据标签名查询 -- `getElementsByClassName()` 根据元素 class 属性查询 -- `querySelector()` CSS 选择器查询(第一个匹配) -- `createElement()` 创建新的 HTML 元素 -- `appendChild()` 将子元素添加到父元素的末尾 -- `replaceChild()` 用新元素替换父元素中的某个子元素 -- `removeChild()` 从父元素中删除指定子元素 \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\220\264\345\256\232\346\263\242/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 6b135cd89cf2b7a2e472a559ef231cec6d8b52fd..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,35 +0,0 @@ -## 笔记 - -1. window -- 作用:控制浏览器窗口、全局弹窗、定时器 -- 必记语法: -- 弹窗:alert("提示")、confirm("确认?")(返回布尔值)、prompt("输入:", "默认值")(返回输入内容) -- 定时器:setTimeout(函数, 毫秒)(延迟执行1次)、setInterval(函数, 毫秒)(重复执行)、clearInterval(定时器ID)(停止) -- 窗口信息:innerWidth/innerHeight(可视区宽高) -2. document -- 作用:操作当前HTML页面(隶属于BOM的window) -- 必记语法: -- 获取信息:document.URL(当前URL)、document.title(页面标题,可修改) -- 操作元素:getElementById("id")(通过ID找元素)、document.body(获取body元素) -- 修改样式:document.body.style.backgroundColor = "black" -3. location -- 作用:控制URL、跳转、刷新 -- 必记语法: -- 跳转:location.href = "https://xxx.com"(设置URL) -- 刷新:location.reload()(true强制刷新) -- 获取信息:location.host(主机名)、location.search(URL参数?后面部分) -4. history -- 作用:浏览器前进/后退 -- 必记语法: -- 后退:history.back()(等价浏览器后退键) -- 前进:history.forward()(等价浏览器前进键) -- 跳转:history.go(数字)(正数前进、负数后退,如go(-1)=back()) -5. navigator -- 作用:获取浏览器/设备信息 -- 必记语法: -- 判断设备:/Mobile|Android|iOS/.test(navigator.userAgent)(是否移动设备) -- 基础信息:navigator.appName(浏览器名)、navigator.platform(操作系统) -二、核心区别 -- BOM:操作浏览器(窗口、地址栏、历史记录) -- DOM:操作页面元素(HTML文档内容) -- 关系:DOM是BOM的子集(window.document) \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251210-style\345\257\271\350\261\241.md" "b/\345\220\264\345\256\232\346\263\242/20251210-style\345\257\271\350\261\241.md" deleted file mode 100644 index 7a080b68980f65f0280379d320009ddb684919c3..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251210-style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,98 +0,0 @@ -## 笔记 - -一.获取 Style 对象 -- 通过 DOM 元素的 style 属性直接获取: - let box = document.getElementById('box'); - let boxStyle = box.style; - -二.常用操作 -- 单样式:element.style.属性 = 值(写)、element.style.getPropertyValue('属性名')(读行内); -- 批量样式:element.style.cssText = "样式1; 样式2"(覆盖原有行内样式,拼接可保留); -- 移除样式:element.style.removeProperty('属性名')。 - -## 练习 - -```html - - -
      文本内容
      - - - - - - - - - - - - -
      -
      HTML/CSS讨论区
      -
      JavaScript讨论区
      -
      C语言讨论区
      -
      Java讨论区
      -
      Android讨论区
      -
      Python讨论区
      -
      - - -``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251211-Form\345\257\271\350\261\241.md" "b/\345\220\264\345\256\232\346\263\242/20251211-Form\345\257\271\350\261\241.md" deleted file mode 100644 index 6ddbd3db5926fbd1cda7126ddacdb76ccb80bedf..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251211-Form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,146 +0,0 @@ -## 笔记 - -Form 对象是操作
      表单的核心接口,封装表单控件、提交逻辑和验证能力,核心依赖 elements 集合操作表单控件。 - -获取方式(优先级) -- document.getElementById('formId')(精准推荐); -- document.forms['formName']/document.forms[索引](兼容/批量); -- 表单内元素反向获取:input.form。 - -## 练习 - -```html -
      - -

      自动取票机

      -

      请输入兑换码:

      - - -
      - - - -
      - - - -
      - - - -

      请选择课程

      - C语言
      - 机械制图
      - 单片机
      - 自动控制
      - 传感器
      - 高等数学
      - 计算机基础
      - Oracle数据库
      - 商务英语
      - PLC设计基础
      - - -

      电影《变相怪杰》的主演是谁?

      - 布拉德·皮特 - 亚当·桑德勒 - 金·凯瑞 - 杰夫·丹尼尔斯 -

      - -
      - - - 看电影 - 听音乐 - 演奏乐器 - 打篮球 - 看书 - 上网 -

      - - - - -``` diff --git "a/\345\220\264\345\256\232\346\263\242/20251212-JSON.md" "b/\345\220\264\345\256\232\346\263\242/20251212-JSON.md" deleted file mode 100644 index df6f8543e055fe21188b2ebc499edeb2aeb538b0..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251212-JSON.md" +++ /dev/null @@ -1,8 +0,0 @@ -## 笔记 -JSON(JavaScript Object Notation):轻量级数据交换格式,跨语言、易读易解析,是前后端数据交互的主流格式。 - -核心方法(必记) -- JSON.parse(): 把JSON字符串 → JS对象/数组(处理后端返回数据) - - const obj = JSON.parse('{"name":"张三","age":20}') -- JSON.stringify(): 把JS对象/数组 → JSON字符串(向后端发送数据) - - const str = JSON.stringify({name:"张三",age:20}) \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251215-\345\244\215\344\271\240.md" "b/\345\220\264\345\256\232\346\263\242/20251215-\345\244\215\344\271\240.md" deleted file mode 100644 index 18a61a895b5c60716bced0010ce783cbb84f58ae..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251215-\345\244\215\344\271\240.md" +++ /dev/null @@ -1,90 +0,0 @@ -## 练习 - -```html - -``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251218-\347\273\203\344\271\240.md" "b/\345\220\264\345\256\232\346\263\242/20251218-\347\273\203\344\271\240.md" deleted file mode 100644 index 00f5402b1c22478bc9d3fd960fe3c026f771f197..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251218-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,27 +0,0 @@ -## 练习 - -```html - - - -``` diff --git "a/\345\220\264\345\256\232\346\263\242/20251219-\347\273\203\344\271\240.md" "b/\345\220\264\345\256\232\346\263\242/20251219-\347\273\203\344\271\240.md" deleted file mode 100644 index 29299c3ec08b618a01eddfe3e118379f743139ae..0000000000000000000000000000000000000000 --- "a/\345\220\264\345\256\232\346\263\242/20251219-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,24 +0,0 @@ -## 练习 - -```html - - - -``` \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251110-JS\345\237\272\347\241\200\350\257\255\346\263\225\344\270\216\347\254\254\344\272\214\347\253\240\344\275\234\344\270\232..md" "b/\345\220\264\346\270\212\345\215\232/20251110-JS\345\237\272\347\241\200\350\257\255\346\263\225\344\270\216\347\254\254\344\272\214\347\253\240\344\275\234\344\270\232..md" deleted file mode 100644 index ec19ac74d2d9302ae3af6ae6a59608aad2aa1b74..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251110-JS\345\237\272\347\241\200\350\257\255\346\263\225\344\270\216\347\254\254\344\272\214\347\253\240\344\275\234\344\270\232..md" +++ /dev/null @@ -1,41 +0,0 @@ -## JS基础语法 - -1. 变量声明(ES5 vs ES6) -变量是存储数据的容器,JS 有三种声明方式,推荐优先使用 let 和 const(ES6+),避免 var 的缺陷。 - -- 声明方式 | 作用域 | 重复声明 | 变量提升 | 初始值要求 -- var | 函数 / 全局作用域 | 允许 | 有(值为 undefined) | 可选 -- let | 块级作用域({} 内) | 不允许 | 无(暂时性死区) | 可选 -- const | 块级作用域 | 不允许 | 无(暂时性死区) | 必须赋值 - -2. 数据类型 - - JS 是弱类型语言(变量类型可动态变化),分为两大类: -- (1) 基本数据类型(7 种,值存储在栈中) - - string:字符串(如 'abc'、"123") - - number:数字(整数 / 浮点数,如 10、3.14,特殊值 NaN、Infinity) - - boolean:布尔值(true/false) - - null:空值(表示 “无”,主动赋值) - - undefined:未定义(变量声明未赋值时的默认值) - - symbol:唯一标识(ES6+,如 Symbol('key')) - - bigint:大整数(ES10+,处理超大数据,如 10n) -- (2)引用数据类型(值存储在堆中,变量存地址) - - object:对象(如 {name: '张三'}) - - array:数组(如 [1,2,3]) - - function:函数(如 function() {}) - - 其他内置对象(Date、RegExp 等) - -3. 注释(代码说明,不执行) - - 单行注释:// 注释内容(常用) - - 多行注释:/* 注释内容 */(块级注释) - -4. 语句结构(控制代码流程) -- (1)条件语句 - - if-else:适合 2-3 个分支 - - switch:适合多分支(匹配全等 ===) -- (2)循环语句 - - for:适合已知循环次数 - - while:适合未知循环次数(先判断后执行) - - do-while:先执行后判断(至少执行 1 次) -- (3)循环控制 - - break:跳出当前循环 /switch - - continue:跳过当前循环的剩余部分,进入下一次循环 \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251112-\350\277\220\347\256\227\347\254\246.md" "b/\345\220\264\346\270\212\345\215\232/20251112-\350\277\220\347\256\227\347\254\246.md" deleted file mode 100644 index 32cce678fbae74f283ac7a981cd7e71d20164e7b..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251112-\350\277\220\347\256\227\347\254\246.md" +++ /dev/null @@ -1,47 +0,0 @@ -## 运算符 - -1. 算术运算符(处理数字运算) -运算符 功能 示例 结果 -+ 加法 / 字符串拼接 10 + 20 / 'a' + 'b' 30 / "ab" -- 减法 20 - 5 15 -* 乘法 3 * 4 12 -/ 除法(浮点数) 10 / 3 3.333... -% 取模(余数) 10 % 3 1 -++ 自增(前置 / 后置) let a=1; ++a / let b=1; b++ 2 / 1(后置先使用后自增) --- 自减(前置 / 后置) let c=3; --c / let d=3; d-- 2 / 3(后置先使用后自减) - -重点注意: -+ 运算符:只要有一个操作数是字符串,就会触发字符串拼接(隐式类型转换) -NaN:非数字(Not a Number),与任何值运算结果都是 NaN,且 NaN !== NaN - -2. 赋值运算符(给变量赋值) -运算符 等价写法 示例 结果 -= - let a = 5 a=5 -+= a = a + b a += 3(a=5) a=8 --= a = a - b a -= 2(a=8) a=6 -*= a = a * b a *= 4(a=6) a=24 -/= a = a / b a /= 3(a=24) a=8 -%= a = a % b a %= 5(a=8) a=3 - -3. 比较运算符(返回布尔值 true/false) -运算符 功能 示例 结果 -== 相等(隐式类型转换) 10 == '10' / 0 == '' true / true -=== 严格相等(值 + 类型) 10 === '10' / 0 === '' false / false -!= 不相等(隐式转换) 10 != '20' true -!== 严格不相等(值 + 类型) 10 !== 10 false -> 大于 20 > 15 true -< 小于 20 < 15 false ->= 大于等于 15 >= 15 true -<= 小于等于 15 <= 10 false - -核心原则:优先使用 ===/!==,避免 == 的隐式转换坑! - -4. 逻辑运算符(处理布尔值,短路求值) -- 运算符 功能 短路规则(核心) 示例 结果 -- && 逻辑与(都真才真) 左边为 false 时,直接返回左边(不执行右边) true && 10 / false && 10 10 / false -- ` ` 逻辑或(一真就真) 左边为 true 时,直接返回左边(不执行右边) `false 20/true 20` 20 / true -- ! 逻辑非(取反) 先转布尔值再取反 !true / !0 / !!'' false / true / false - -5. 三元运算符(条件运算符,简化 if-else) -语法:条件 ? 表达式1(条件为真时执行) : 表达式2(条件为假时执行) -适合简单的二选一场景,可嵌套(不推荐多层嵌套,影响可读性) \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" "b/\345\220\264\346\270\212\345\215\232/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" deleted file mode 100644 index 38d2b6ee43269143dedeb2ff28f4558797cd5731..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" +++ /dev/null @@ -1,113 +0,0 @@ - - - - - Document - - - - - \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251114-\345\276\252\347\216\257\347\273\203\344\271\240.md" "b/\345\220\264\346\270\212\345\215\232/20251114-\345\276\252\347\216\257\347\273\203\344\271\240.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\220\264\346\270\212\345\215\232/20251117-\345\207\275\346\225\260\345\256\232\344\271\211.md" "b/\345\220\264\346\270\212\345\215\232/20251117-\345\207\275\346\225\260\345\256\232\344\271\211.md" deleted file mode 100644 index 1f613c8dab08f16ac741f5885dee2837c2fa10c3..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251117-\345\207\275\346\225\260\345\256\232\344\271\211.md" +++ /dev/null @@ -1,90 +0,0 @@ -## 函数定义 -1. 函数的定义 - -- 最传统的定义方式,具有 函数提升(可在定义前调用)特性。 -- 将函数赋值给变量 / 常量,无函数提升(必须先定义后调用),可分为匿名和命名两种。 - -2. 箭头函数 -- ES6 新增的简洁语法,无自身 this、无 arguments、不能作为构造函数,适合简洁逻辑和回调函数。 -- 语法: - - 单参数可省略括号:(参数) => { 函数体 } → 参数 => { 函数体 } - - 单条返回语句可省略大括号和 return(隐式返回):(a, b) => a + b - -## 函数的调用 - -1. 普通调用(直接调用) -- 最常用方式,独立调用函数,非严格模式下 this 指向 window(浏览器)/ global(Node.js),严格模式下 this 为 undefined。 - -2. 作为对象方法调用 -- 函数作为对象的属性,调用时 this 指向 当前对象。 - -3. 构造函数调用(new 关键字) -- 通过 new 调用函数(此时函数称为 “构造函数”),用于创建对象,this 指向 新创建的对象。 -- 注意: - - 箭头函数不能用 new 调用(会报错)。 - - 构造函数若显式返回对象,则实例为返回的对象;否则为 this。 - -4. apply/call/bind 调用 -- 用于手动绑定 this 指向,适合灵活控制函数上下文: -- call:参数列表传递(逗号分隔)。 -- apply:参数以数组形式传递。 -- bind:返回绑定后的新函数(需手动调用)。 - -5. 自调用函数(IIFE,Immediately Invoked Function Expression) -- 定义后立即执行,用于创建独立作用域(避免变量污染),ES6 后可被块级作用域(let/const)替代。 - -## 函数参数 - -1. 形参和实参的匹配规则 -- 实参数量 > 形参数量:多余实参被忽略(可通过 arguments 或剩余参数获取)。 -- 实参数量 < 形参数量:未匹配的形参值为 undefined。 - -2. 参数默认值(ES6+) -- 形参可设置默认值,当实参未传递或传递 undefined 时,使用默认值。 -- 注意: - - 默认参数存在 暂时性死区(TDZ),不能引用同一作用域的其他形参(如 function fn(a = b, b = 1){} 报错)。 -3. 剩余参数(Rest Parameters,ES6+) -- 用 ... 接收多余的实参,返回一个数组,必须放在形参列表的最后。 - -4. arguments 对象(传统方式) -- 函数内部的类数组对象,存储所有实参,箭头函数无 arguments。 -- 注意: - - arguments 是类数组,需通过 Array.from(arguments) 或 [...arguments] 转为数组。 - - ES6 后推荐用剩余参数替代 arguments(更简洁、易读)。 - -5. 参数传递方式 -- JS 中参数传递遵循 “按值传递”,但引用类型的 “值” 是内存地址: - - 基本类型(number、string、boolean 等):传递值的副本,函数内修改不影响外部。 - - 引用类型(object、array、function 等):传递内存地址的副本,函数内修改对象属性会影响外部(但重新赋值不会)。 - -## 函数的返回值 - -1. return 语句的作用 -- 终止函数执行(return 后的代码不会运行)。 -- 返回指定值给调用者。 - -2. 默认返回值 -- 函数无 return 或 return 后无值时,返回 undefined: - -3. 箭头函数的隐式返回 -- 箭头函数若省略大括号,会隐式返回表达式结果(无需写 return): - -4. 注意事项 -- return 后不能直接换行(JS 会自动补全分号,导致返回 undefined): - -## 作业 - - - - -``` diff --git "a/\345\220\264\346\270\212\345\215\232/20251120-\346\223\215\344\275\234\345\257\271\350\261\241.md" "b/\345\220\264\346\270\212\345\215\232/20251120-\346\223\215\344\275\234\345\257\271\350\261\241.md" deleted file mode 100644 index 8e18845acf82aa385917384a1fec5e4a201ecac1..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251120-\346\223\215\344\275\234\345\257\271\350\261\241.md" +++ /dev/null @@ -1,145 +0,0 @@ -## 操作对象 - -1. 字面量方式(最常用) -- 直接通过 {} 定义,简洁直观,适合静态对象: - -2. 构造函数方式 -- 适合创建多个结构相似的对象(可复用): -- 内置构造函数:Object、Array、Date 等 -- 自定义构造函数:通过 function 定义,配合 new 关键字创建实例 - -3. Object.create() 方式 -- 基于现有对象作为原型创建新对象,适合实现继承: - -## 二、 对象属性的读取 -- 读取对象属性有 2 种核心方式,注意区别: - -1. 点表示法(优先使用) -- 语法:对象.属性名,简洁易读,但属性名必须是合法标识符(不能是变量、数字开头、特殊字符): - -2. 方括号表示法(灵活场景) -- 语法:对象[属性名],属性名可以是变量、表达式、数字开头 / 特殊字符的字符串: - -3. 注意:读取不存在的属性 -- 返回 undefined,不会报错: - -## 三、对象属性的更新与添加 -1. 直接赋值(更新 / 添加通用) -- 若属性已存在:更新属性值 -- 若属性不存在:新增属性 - -2. 批量更新:Object.assign() -- 将多个源对象的属性合并到目标对象(浅拷贝),同名属性会被覆盖: - -## 四、对象属性的删除 -- 仅能通过 delete 操作符删除对象的自身属性(不能删除原型链上的属性、const 声明的变量): -- 注意:delete 仅删除属性值,不会删除属性名对应的内存空间(JS 垃圾回收机制会自动处理无引用的内存)。 - -## 五、对象的遍历 -- 遍历对象的核心是获取属性名 / 属性值,常用方法有 5 种,各有适用场景: - -1. for...in 循环(遍历可枚举属性) -- 遍历对象自身 + 原型链上的可枚举属性(需配合 hasOwnProperty() 过滤原型属性): - -2. Object.keys() + forEach(遍历自身可枚举属性) -- 返回对象自身可枚举属性名数组,再通过 forEach 遍历(推荐用于仅需自身属性的场景): - -3. Object.values() + forEach(遍历自身可枚举属性值) -- 直接返回对象自身可枚举属性值数组,无需通过属性名获取值: - -4. Object.entries() + forEach(遍历键值对) -- 返回对象自身可枚举键值对数组(每个元素是 [key, value]),适合同时需要键和值的场景: - -5. Reflect.ownKeys() + forEach(遍历所有自身属性) -- 返回对象自身所有属性名数组(包括可枚举 / 不可枚举、字符串 / Symbol 类型),最全面的遍历方式: - -## 作业 - -1. -``` -let day1 = new Date(2023, 4, 1); - let day2 = new Date(2023, 5, 1); - let time = day2.getTime() - day1.getTime(); - let houer = time / (1000 * 60 * 60); - console.log(houer); -``` - -2. -``` - let date = new Date(2023, 5, 7); - let date1 = new Date() - let day = Math.ceil((date - date1) / (1000 * 60 * 60) / 24); - console.log(day + "天"); -``` - -3. -``` -// 监听页面点击事件 - document.addEventListener('mousedown', function (event) { - let buttonText; - // 根据button属性判断按键 - switch (event.button) { - case 0: - buttonText = "左键"; - break; - case 1: - buttonText = "中键(滚轮)"; - break; - case 2: - buttonText = "右键"; - break; - default: - buttonText = "未知按键"; - } - // 弹出提示 - alert(`您单击了鼠标${buttonText}`); - }); - - // 阻止右键默认菜单(避免干扰) - document.addEventListener('contextmenu', function (e) { - e.preventDefault(); - }); -``` - -4. -``` -

      请输入要生成的随机数位数:

      - - - - -``` - -5. -``` -

      周星星从出生到现在已度过了

      - -``` diff --git "a/\345\220\264\346\270\212\345\215\232/20251121-\345\206\205\351\203\250\345\257\271\350\261\241.md" "b/\345\220\264\346\270\212\345\215\232/20251121-\345\206\205\351\203\250\345\257\271\350\261\241.md" deleted file mode 100644 index d53e1f56f3b839221d33db09dbea950061c51001..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251121-\345\206\205\351\203\250\345\257\271\350\261\241.md" +++ /dev/null @@ -1,41 +0,0 @@ -## 内部对象 - -1. 值属性对象 -- 这类对象实际上只是返回一个简单的数据类型值,通常我们直接使用它们的值。 - - Infinity:表示无穷大。 - - - NaN:表示 “非数字”(Not a Number)。 - - - undefined:表示一个未被赋值的变量或属性的值。 - -2. 函数对象 -- 这类对象是一组强大的工具函数,直接调用即可。 - - eval():执行一个字符串形式的 JavaScript 代码。使用需极其谨慎,因为它会带来安全风险(代码注入)和性能问题。 - - - isFinite():判断一个值是否是有限的(不是 Infinity、-Infinity 或 NaN)。 - - - isNaN():判断一个值是否是 NaN。 - - - parseFloat():将一个字符串解析为浮点数。 - - - parseInt():将一个字符串解析为整数。 - - - decodeURI() / decodeURIComponent():对编码后的 URI 进行解码。decodeURIComponent 解码范围更广。 - - encodeURI() / encodeURIComponent():对 URI 进行编码,将特殊字符转换为 % 开头的十六进制序列。encodeURIComponent 编码范围更广。 - -3. 复杂对象 -- 这是内置对象中最核心、最常用的部分,提供了丰富的功能。 -- Object 对象 -- Object 是 JavaScript 中所有对象的基类(原型链的顶端)。 -- 静态方法: - - Object.keys(obj):返回一个包含对象所有自身可枚举属性名称的数组。 - - Object.values(obj):返回一个包含对象所有自身可枚举属性值的数组。 - - Object.entries(obj):返回一个包含对象所有自身可枚举属性 [key, value] 键值对的数组。 - - Object.assign(target, ...sources):将一个或多个源对象的属性复制到目标对象。 - - Object.create(proto, [propertiesObject]):创建一个新对象,其原型为 proto。 - - Object.defineProperty(obj, prop, descriptor):定义或修改对象的一个属性。 -- 实例方法: - - obj.hasOwnProperty(prop):判断对象是否拥有一个自身的(非继承的)属性。 - - obj.toString():返回对象的字符串表示。 - - obj.isPrototypeOf(otherObj):判断当前对象是否是另一个对象的原型。 - diff --git "a/\345\220\264\346\270\212\345\215\232/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210.md" "b/\345\220\264\346\270\212\345\215\232/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210.md" deleted file mode 100644 index eb223d94026fc7d03a4a67e037a67ce5d36afe5c..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210.md" +++ /dev/null @@ -1,279 +0,0 @@ -## JS数组 - -- 数组是 JS 中最常用的有序集合,用于存储多个任意类型的值(元素),元素通过索引(0 起始)访问。 - -1. 数组创建方式 - -|方式 |语法示例 |说明 -|-----|-----|-----| -|字面量(推荐) |const arr = [1, 'a', true, null]; |简洁高效,最常用 -|Array 构造函数 |const arr1 = new Array(3);(长度 3 空数组) |注意:单个数字参数表示长度,非元素 -||const arr2 = new Array(1, 2, 3); |多个参数表示元素 -|Array.of()(ES6+) |const arr = Array.of(3, 1, 2); |统一处理参数,避免构造函数的歧义(结果:[3,1,2]) -|Array.from()(ES6+) |const arr = Array.from('abc'); |从可迭代对象 / 类数组对象转换为数组 -||const arr = Array.from([1,2,3], x => x*2); |第二个参数为映射函数,类似 map - -2. 核心属性 -- length:数组元素个数(可读写,修改会改变数组长度) - -3. 常用方法(按功能分类) -(1)增删元素(会修改原数组) - -|方法|语法|功能|返回值| -|-----|-----|-----|-----| -|push() |arr.push(elem1, ...) |尾部添加元素 |新数组长度| -|pop() |arr.pop() |尾部删除最后一个元素 |被删除的元素(空数组返回 undefined)| -|unshift() |arr.unshift(elem1, ...) |头部添加元素 |新数组长度| -|shift() |arr.shift() |头部删除第一个元素 |被删除的元素| -|splice() |arr.splice(start, deleteCount, ...add) |从 start 索引开始,删除 deleteCount 个元素,插入新元素 |被删除元素组成的数组| - -(2)查找元素(不修改原数组) - -|方法 |语法 |功能 |返回值| -|-----|-----|-----|-----| -|indexOf() |arr.indexOf(elem, fromIndex) |从 fromIndex 开始查找 elem,严格相等(===) |找到返回索引,否则 -1| -|lastIndexOf() |arr.lastIndexOf(elem) |从尾部向前查找 |找到返回索引,否则 -1| -|includes()(ES7+) |arr.includes(elem) |判断数组是否包含 elem(支持 NaN) |布尔值| -|find()(ES6+) |arr.find(callback) |查找第一个满足回调函数的元素 |找到的元素,否则 undefined| -|findIndex()(ES6+) |arr.findIndex(callback) |查找第一个满足回调函数的元素的索引 |找到的索引,否则 -1| -|findLast()(ES2022) |arr.findLast(callback) |从尾部向前查找第一个满足条件的元素 |找到的元素,否则 undefined| -|findLastIndex() |arr.findLastIndex(callback) |从尾部向前查找第一个满足条件的元素索引 |找到的索引,否则 -1| - -(3)遍历 / 转换(不修改原数组) - -|方法 |语法 |功能 |返回值| -|-----|-----|-----|-----| -|forEach() |arr.forEach((elem, idx, arr) => {}) |遍历数组,无返回值(不能中断循环) |undefined| -|map() |arr.map(callback) |遍历并返回新数组(每个元素经回调处理) |新数组| -|filter() |arr.filter(callback) |过滤出满足条件的元素组成新数组 |新数组| -|reduce() |arr.reduce((acc, elem, idx, arr) => {}, init) |累加器,将数组缩减为单个值 |最终累加结果| -|reduceRight() |arr.reduceRight(...) |从尾部向前累加 |最终累加结果| -|some() |arr.some(callback) |判断是否至少有一个元素满足条件 |布尔值(满足则中断循环)| -|every() |arr.every(callback) |判断是否所有元素满足条件 |布尔值(不满足则中断循环)| -|flat()(ES2019) |arr.flat(depth) |扁平化数组(depth 默认为 1, Infinity 表示全扁平化) |新数组| -|flatMap() |arr.flatMap(callback) |map + flat (depth=1) 组合 |新数组| - -(4)排序 / 反转(修改原数组) - -- sort((a, b) => a - b):排序(默认按字符串 Unicode 排序,需传比较函数) -- reverse():反转数组顺序(修改原数组) - -(5)其他常用方法 -- join(separator):将元素拼接为字符串(默认用逗号分隔) -- concat(arr1, arr2, ...):合并数组(返回新数组,不修改原数组) -- slice(start, end):截取数组([start, end),返回新数组,不修改原数组 -- fill(elem, start, end):用 elem 填充数组([start, end),修改原数组) -- copyWithin(target, start, end):复制 [start, end) 元素到 target 位置(修改原数组) -- Array.isArray(obj):判断对象是否为数组(typeof 数组返回 'object',需用此方法) - -4. 特殊数组 -- 稀疏数组:元素不连续、存在 empty 空位的数组(如 [1, , 3]) - - 空位不参与 forEach、map 等遍历(但 length 包含空位) - - 可通过 Array.from(arr) 或 arr.filter(elem => elem !== undefined) 填充空位 -- 类数组对象:有 length 属性和索引,但不是数组(如 arguments、DOM 集合) - - 转换为数组:Array.from(obj) 或 [...obj](需是可迭代对象) - - -## map集合 - -- Map 是有序键值对集合,键可以是任意类型(原始值、对象、函数等),区别于对象(键只能是字符串 / Symbol)。 - -1. Map 与对象的核心区别 - -|特性 |Map |对象(Object)| -|-----|-----|-----| -|键类型 |任意类型(原始值、对象等) |字符串、Symbol(其他类型自动转字符串)| -|有序性 |插入顺序(可迭代) |ES6 后字符串键有序,Symbol 键无序| -|键数量获取 |map.size(直接获取) |Object.keys(obj).length(需计算)| -|迭代方式 |天然可迭代(for...of) |需通过 Object.keys 等转换后迭代| -|性能 |频繁增删键时性能更优 |频繁增删性能较差| - -2. 核心属性与方法 - -|方法 / 属性 |语法 |功能 |返回值| -|-----|-----|-----|-----| -|size(属性) |map.size |获取键值对数量 |数字| -|set(key, value) |map.set('key', 'value') |添加 / 修改键值对(支持链式调用) |Map 实例(可链式调用 map.set().set())| -|get(key) |map.get('key') |获取指定键的值 |对应值(无此键返回 undefined)| -|has(key) |map.has('key') |判断是否存在指定键 |布尔值| -|delete(key) |map.delete('key') |删除指定键值对 |布尔值(成功删除返回 true)| -|clear() |map.clear() |清空所有键值对 |undefined| - -4. Map 遍历(有序,按插入顺序) -- Map 是可迭代对象,支持 3 种遍历方式 + forEach: - -5. 特殊特性 -- 键的比较:使用 SameValueZero 算法(与 === 类似,但 NaN === NaN 视为相等 -- 对象键的引用:只有引用相同的对象才视为同一个键 - -# set集合 -- Set 是有序无重复元素集合,核心作用是快速去重和判断元素是否存在。 - -1. Set 核心特性 -- 元素唯一:自动去重(基于 SameValueZero 算法) -- 有序性:插入顺序(可迭代) -- 元素类型:任意类型(原始值、对象等) - -3. 核心属性与方法 - -|方法 / 属性 |语法 |功能 |返回值| -|-----|-----|-----|-----| -|size(属性) |set.size |获取元素个数 |数字| -|add(elem) |set.add(elem) |添加元素(重复添加无效) |Set 实例(支持链式调用)| -|has(elem) |set.has(elem) |判断是否存在指定元素 |布尔值| -|delete(elem) |set.delete(elem) |删除指定元素 |布尔值(成功删除返回 true)| -|clear() |set.clear() |清空所有元素 |undefined| - -## 迭代器 -- 迭代器是 JS 中用于统一遍历可迭代对象的接口,核心是提供一种顺序访问集合元素的方式,无需关心集合内部结构 - -1. 核心概念 -(1)迭代器协议 -- 一个对象满足以下条件即为迭代器: -- 拥有 next() 方法 -- next() 方法返回一个对象,包含两个属性: - - value:当前迭代的元素(迭代结束后为 undefined) - - done:布尔值,表示迭代是否结束(结束后为 true) -(2)可迭代对象(Iterable) -- 一个对象满足以下条件即为可迭代对象: - - 实现了 Symbol.iterator 方法(该方法是迭代器生成器) - - Symbol.iterator 方法返回一个迭代器对象 - -2. 内置可迭代对象 -- JS 中默认实现 Symbol.iterator 的对象(可直接用 for...of 遍历): - - 数组(Array) - - Map、Set - - 字符串(String) - - 类数组对象:arguments、DOM 集合(NodeList) - - 生成器对象(Generator) - -4. for...of 循环的原理 -- for...of 是迭代器的语法糖,执行逻辑: - - 调用可迭代对象的 Symbol.iterator 方法,获取迭代器 - - 反复调用迭代器的 next() 方法 - - 直到 done 为 true,循环结束,忽略最后一个 value -5. 迭代器相关方法 -- entries():返回迭代器,迭代值为 [索引/键, 值](数组、Map、Set 均支持) -- keys():返回迭代器,迭代值为索引 / 键 -- values():返回迭代器,迭代值为元素 / 值 - -## 练习 -```html - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251126-string\345\257\271\350\261\241.md" "b/\345\220\264\346\270\212\345\215\232/20251126-string\345\257\271\350\261\241.md" deleted file mode 100644 index f60082d66979b8ab1181296000efa601f23f5abf..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251126-string\345\257\271\350\261\241.md" +++ /dev/null @@ -1,74 +0,0 @@ -## string对象的创建 - -1. 三种创建方式(重点区分原始值与对象) - -|创建方式 |语法示例 |类型 |说明| -|-----|-----|-----|-----| -|字面量(推荐) |const str = 'hello'; / const str = "world"; |原始字符串(string) |最简洁高效,日常开发首选;不可直接修改(不可变性)| -|模板字符串(ES6+) |const name = '张三'; const str = Hello ${name}!; |原始字符串(string) |支持多行文本、变量插值(${}),反引号包裹| -|String 构造函数 |const strObj = new String('test'); |String 对象(object) |显式创建对象,需通过 valueOf() 取原始值| -|强制转换(无 new) |const str = String(123); / String(true); |原始字符串(string) |将其他类型转换为原始字符串| - - -## string对象的属性 - -- String 原始值和对象均支持以下属性,且属性不可修改(因字符串不可变性): - -|属性名 |语法 |功能 |示例| -|-----|-----|-----|-----| -|length |str.length |获取字符串的长度(按 UTF-16 代码单元计数) |'abc'.length; // 3;'😂'.length; // 2(表情是 Unicode 代理对)| -|索引访问 |str[index] |通过索引(0 起始)获取单个字符 |'hello'[0]; // 'h';超出索引返回 undefined| - -- 注意:索引访问仅支持「读取」,无法修改字符(字符串不可变性) - -## string对象的方法 -- String 的所有方法均不修改原字符串(因不可变性),而是返回新字符串 / 结果。以下按功能分类,含 ES6+ 新增方法: -1. 查找与定位(获取字符 / 索引 / 是否包含) - -|方法名 |语法 |功能描述 |返回值 |示例| -|-----|-----|-----|-----|-----| -|charAt(index) |str.charAt(index) |获取指定索引的字符(index 默认为 0,超出范围返回空字符串) |字符(string) |'abc'.charAt(1); // 'b';'abc'.charAt(10); // ''| -|charCodeAt(index) |str.charCodeAt(index) |获取指定索引字符的 Unicode 编码(UCS-2 标准,0-65535,不支持补充平面) |编码值(number) |'A'.charCodeAt(0); // 65;'中'.charCodeAt(0); // 20013| -|codePointAt(index) |str.codePointAt(index) |ES6+,获取字符的完整 Unicode 码点(支持补充平面,如表情、特殊符号) |码点值(number) |'😂'.codePointAt(0); // 128514(解决 charCodeAt 无法识别代理对的问题)| -|at(index) |str.at(index) |ES2022,支持负索引(-1 表示最后一个字符),获取指定位置字符 |字符(string)/undefined |'hello'.at(-1); // 'o';'abc'.at(2); // 'c'| -|indexOf(searchValue, fromIndex) |str.indexOf(val, start) |从 fromIndex(默认 0)开始,向前查找子串,严格匹配 |找到返回索引,否则 -1 |'abac'.indexOf('a'); // 0;'abac'.indexOf('a', 1); // 2| -|lastIndexOf(searchValue, fromIndex) |str.lastIndexOf(val, start) |从 fromIndex(默认字符串末尾)开始,向后查找子串 |找到返回索引,否则 -1 |'abac'.lastIndexOf('a'); // 2| -|includes(searchValue, fromIndex) |str.includes(val, start) |ES6+,判断字符串是否包含子串(支持 fromIndex 起始位置) |布尔值(boolean) |'hello'.includes('ell'); // true;'hello'.includes('xyz'); // false| -|startsWith(searchValue, position) |str.startsWith(val, pos) |ES6+,判断字符串是否以子串开头(position 表示从第 pos 个字符开始判断) |布尔值(boolean) |'hello'.startsWith('he'); // true;'hello'.startsWith('ll', 2); // true| -|endsWith(searchValue, length) |str.endsWith(val, len) |ES6+,判断字符串是否以子串结尾(length 表示取前 len 个字符判断) |布尔值(boolean) |'hello'.endsWith('lo'); // true;'hello'.endsWith('ll', 4); // true(前 4 字符是 'hell')| - -2. 截取与分割(提取子串 / 转换为数组) - -|方法名 |语法 |功能描述 |返回值 |示例| -|-----|-----|-----|-----|-----| -|slice(start, end) |str.slice(start, end) |截取 [start, end) 区间的子串(支持负索引,end 省略则截取到末尾) |新字符串(string) |'abcdef'.slice(1, 4); // 'bcd';'abcdef'.slice(-3); // 'def'(从倒数第 3 个开始)| -|substring(start, end) |str.substring(start, end) |截取子串(start/end 为负则视为 0,自动调整为 start ≤ end) |新字符串(string) |'abcdef'.substring(4, 1); // 'bcd'(自动交换为 [1,4))| -|substr(start, length) |str.substr(start, len) |从 start 开始,截取 length 个字符(length 为负则返回空字符串,不推荐使用,浏览器兼容性差异) |新字符串(string) |'abcdef'.substr(2, 3); // 'cde';'abcdef'.substr(-2, 2); // 'ef'| -|split(separator, limit) |str.split(sep, limit) |按分隔符分割字符串为数组(sep 可以是字符串 / 正则,limit 限制数组长度) |数组(Array) |'a,b,c'.split(','); // ['a','b','c'];'hello'.split('', 3); // ['h','e','l'](空字符串分割为单个字符)| - -3. 替换与填充(修改字符串内容) - -|方法名 |语法 |功能描述 |返回值 |示例| -|-----|-----|-----|-----|-----| -|replace(searchValue, replacement) |str.replace(reg/str, newStr/func) |替换子串(str 仅替换第一个匹配项;reg 带 g 修饰符替换所有) |新字符串(string) |// 字符串替换(仅替换第一个)'abac'.replace('a', 'x'); // 'xbac'// 正则替换(所有匹配)'abac'.replace(/a/g, 'x'); // 'xbxc'| -|replaceAll(searchValue, replacement) |str.replaceAll(reg/str, newStr/func) |ES2021,替换所有匹配项(str 无需 g 修饰符;reg 必须带 g,否则报错) |新字符串(string) |'abac'.replaceAll('a', 'x'); // 'xbxc';'abac'.replaceAll(/a/g, 'x'); // 'xbxc'| -|padStart(targetLength, padString) |str.padStart(len, pad) |ES2017,在字符串开头填充 padString,直到长度为 len(超出部分截断) |新字符串(string) |'123'.padStart(5, '0'); // '00123';'123'.padStart(5, 'ab'); // 'ab123'| -|padEnd(targetLength, padString) |str.padEnd(len, pad) |ES2017,在字符串结尾填充 padString,直到长度为 len(超出部分截断) |新字符串(string) |'123'.padEnd(5, '0'); // '12300';'123'.padEnd(5, 'ab'); // '123ab'| - -4. 转换与格式化(大小写、去空格、拼接等) - -|方法名 |语法 |功能描述 |返回值 |示例| -|-----|-----|-----|-----|-----| -|toUpperCase() |str.toUpperCase() |转换为大写字母(不考虑地区差异) |新字符串(string) |'hello'.toUpperCase(); // 'HELLO'| -|toLowerCase() |str.toLowerCase() |转换为小写字母(不考虑地区差异) |新字符串(string) |'HELLO'.toLowerCase(); // 'hello'| -|toLocaleUpperCase() |str.toLocaleUpperCase(locale) |按地区规则转换为大写(如土耳其语:'i' → 'İ') |新字符串(string) |'i'.toLocaleUpperCase('tr-TR'); // 'İ'| -|toLocaleLowerCase() |str.toLocaleLowerCase(locale) |按地区规则转换为小写(如土耳其语:'I' → 'ı') |新字符串(string) |'I'.toLocaleLowerCase('tr-TR'); // 'ı'| -|trim() |str.trim() |去除字符串首尾的空白字符(空格、制表符 \t、换行符 \n 等) |新字符串(string) |' hello world '.trim(); // 'hello world'| -|trimStart() / trimLeft() |str.trimStart() |ES2019,去除字符串开头的空白字符(trimLeft 是别名,兼容旧代码) |新字符串(string) |' hello'.trimStart(); // 'hello'| -|trimEnd() / trimRight() |str.trimEnd() |ES2019,去除字符串结尾的空白字符(trimRight 是别名,兼容旧代码) |新字符串(string) |'hello '.trimEnd(); // 'hello'| -|concat(str1, str2, ...) |str.concat(s1, s2) |拼接多个字符串(功能等同于 + 运算符,不如 + 灵活,较少使用) |新字符串(string) |'a'.concat('b', 'c'); // 'abc';'hello'.concat(' ', 'world'); // 'hello world'| -|repeat(count) |str.repeat(n) |ES6+,重复字符串 n 次(n 为非负整数,0 返回空字符串) |新字符串(string) |'ab'.repeat(3); // 'ababab';'a'.repeat(0); // ''| -|String.raw(template, ...values) |String.raw |ES6+,模板字符串标签函数,返回原始字符串(忽略转义字符 \) |原始字符串(string) |String.rawHello\nWorld; // 'Hello\\nWorld'(\n 不转义,保留原始字符)| - -5. 匹配与验证(正则相关) - diff --git "a/\345\220\264\346\270\212\345\215\232/20251127-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\345\220\264\346\270\212\345\215\232/20251127-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 22732a20ee6920dd71071d15a0b9423cf4da492f..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251127-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,139 +0,0 @@ -## 一、正则表达式(RegExp)​ -- 定义:描述字符模式的对象,用于匹配、查找、替换字符串中的特定字符组合。​ -- 创建方式:​ -- 字面量:const reg = /pattern/flags(如 /abc/g,pattern 为匹配模式,flags 为修饰符)​ -- 构造函数:const reg = new RegExp('pattern', 'flags')(如 new RegExp('abc', 'g'))​ -- 核心修饰符(flags):​ -- g:全局匹配(不匹配一次后停止)​ -- i:忽略大小写(匹配时不区分字母大小写)​ -- m:多行匹配(将 ^ 和 $ 视为每行的开头和结尾)​ -- 常用元字符(pattern 核心):​ -- 基础:.(匹配任意单个字符,除换行)、\d(匹配数字)、\w(匹配字母 / 数字 / 下划线)​ -- 边界:^(匹配字符串开头)、$(匹配字符串结尾)​ -- 量词:*(匹配 0 次或多次)、+(匹配 1 次或多次)、?(匹配 0 次或 1 次)、{n}(匹配 n - 次)​ -- 常用方法:​ -- 正则对象方法:test(str)(判断字符串是否匹配,返回布尔值)、exec(str)(返回匹配结果数- 组,无匹配则为 null)​ -- 字符串方法:match(reg)(返回匹配结果数组)、replace(reg, newStr)(替换匹配的字符)、- split(reg)(按匹配规则分割字符串) - -# 练习 -``` - - -``` - - -``` - - - ``` - - -``` - - -
      - 用户名:

      - 密码:

      - -
      - -``` - - -``` - - -

      - - -

      - - - 对应字母:

      - - -``` \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251128-JS\345\274\202\345\270\270\345\244\204\347\220\206.md" "b/\345\220\264\346\270\212\345\215\232/20251128-JS\345\274\202\345\270\270\345\244\204\347\220\206.md" deleted file mode 100644 index d55ce4981e07f0f7a881ce41fa242093d5d0d1ba..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251128-JS\345\274\202\345\270\270\345\244\204\347\220\206.md" +++ /dev/null @@ -1,247 +0,0 @@ -## 一、异常处理(Error Handling)​ -- 异常定义:代码执行中出现的错误(如语法错误、逻辑错误、引用错误),会中断程序默认执行流程。​ -- 核心处理语句:​ -- try...catch:捕获并处理异常​ -- try:包裹可能抛出异常的代码块​ -- catch(err):捕获 try 中抛出的异常,err 为异常对象(含 message 错误信息、name 错误类型)​ -- finally:无论 try 中是否抛出异常,都会执行的代码块(常用于释放资源,如关闭请求)​ -- throw:主动抛出自定义异常(可抛字符串、对象等),触发 catch 捕获​ -- 示例:if (num < 0) throw new Error('数字不能为负');​ -- 常见错误类型:​ -- SyntaxError:语法错误(如括号不闭合)​ -- ReferenceError:引用未定义的变量​ -- TypeError:类型错误(如对非函数变量调用)​ -- RangeError:范围错误(如数组长度设为负数)​ -## 二、程序调试(Debugging)​ -- 核心目的:定位代码中的错误,验证逻辑正确性。​ -- 常用调试方法:​ -- console 方法:​ -- console.log():输出普通信息(最常用)​ -- console.error():输出错误信息(标红显示,便于区分)​ -- console.warn():输出警告信息(黄色提示)​ -- console.table():以表格形式输出数组 / 对象(清晰展示结构化数据) - -## 练习 -``` - - - - - - Document - - - - - 丁禹兮 - - - - - - - -
      -

      题目:中国国球是()?

      -

      A. 篮球 B. 兵乓球 C. 羽毛球 D. 排球

      -

      请按键盘上的 A/B/C/D 键选择答案

      -

      -
      - - - - - - -

      - - - - - - -

      - - - - - - -
      -

      -

      - -
      - - - - - - - - -
      - - - - - - - -
      - - - - - -
      - -
      - - -
      - - - -
      - - - - -``` \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" "b/\345\220\264\346\270\212\345\215\232/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" deleted file mode 100644 index ffcb92a7d7e501d2e1d0e259c4c3114a2b7896fe..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" +++ /dev/null @@ -1,247 +0,0 @@ -# 笔记 -- 绑定方式: -- 内联属性:元素标签中写on事件名="函数()"; -- DOM 属性:通过 JS 给元素赋值元素.on事件名=函数; -- 事件监听:addEventListener(事件名, 函数)(支持多处理函数)。 -- 事件对象:处理函数的参数,包含事件细节(如触发元素target、鼠标位置clientX)。 -- 事件流:事件触发后,先 “捕获”(从父到子)再 “冒泡”(从子到父);可通过stopPropagation()阻止冒泡。 -- 移除处理: -- DOM 属性:赋值为null; -- 事件监听:removeEventListener(事件名, 函数)(需对应绑定的同一函数)。 -``` -复制:onbeforcopy复制到剪切板触发 oncopy复制页面内容触发 -剪切:onbeforecut oncut -粘贴:onbeforepaste onpaste -选择:onseletc 文本选中「完成后」 onselectstart 元素的文本开始被选中前触发的事件「开始前」 -``` -``` -拖放事件 -dragstart 用户开始拖拽元素时 -drag 拖拽过程中持续触发 -dragenter 拖拽元素进入目标容器时 -dragover 拖拽元素在目标容器内悬停时 -dragleave 拖拽元素离开目标容器时 -drop 用户在目标容器内释放鼠标时 -``` -# 练习 -``` - - - - - -
      - 可拖动图片 -
      - -``` - -``` - - - - -
      拖拽我到矩形里
      -
      - -``` - -``` - - - - -
      鼠标移到我身上看看
      - -``` - -``` - - - - - - -``` - -``` - - - - - - - -``` \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251203-doc\345\257\271\350\261\241.md" "b/\345\220\264\346\270\212\345\215\232/20251203-doc\345\257\271\350\261\241.md" deleted file mode 100644 index affe91158f0c2d8f11f3f8f6da90bdfb0b7de40e..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251203-doc\345\257\271\350\261\241.md" +++ /dev/null @@ -1,196 +0,0 @@ -# 笔记 -``` -document.title 获取 / 设置页面标题 -document.URL 获取当前页面完整 URL -document.body 获取 元素,可直接操作其样式和内容 - -- 元素选择方法: -- getElementById(id):通过 ID 选单个元素; -- getElementsByTagName(tag):通过标签名选元素集合; -- getElementsByClassName(class):通过类名选元素集合; -- querySelector(selector):通过 CSS 选择器选第一个匹配元素; -- querySelectorAll(selector):通过 CSS 选择器选所有匹配元素集合。 -- 文档操作: -- createElement(tag):创建新元素; -- createTextNode(text):创建文本节点; -- appendChild(node):向元素末尾添加子节点; -- removeChild(node):移除子节点; -- replaceChild(new, old):替换子节点。 - -getElementById() 根据元素 id 属性查询 -getElementsByTagName() 根据标签名查询 -getElementsByClassName() 根据元素 class 属性查询 -querySelector() CSS 选择器查询(第一个匹配) -createElement() 创建新的 HTML 元素 -appendChild() 将子元素添加到父元素的末尾 -replaceChild() 用新元素替换父元素中的某个子元素 -removeChild() 从父元素中删除指定子元素 -``` -# 练习 -``` - - - - - -``` -``` - - -

      - -``` -``` - - -``` -``` - - - -
      -

      行路难·其一

      -

      〔唐代〕李白

      -

      金樽清酒斗十千,玉盘珍羞直万钱。

      -

      停杯投箸不能食,拔剑四顾心茫然。

      -

      欲渡黄河冰塞川,将登太行雪满山。

      -

      闲来垂钓碧溪上,忽复乘舟梦日边。

      -

      行路难!行路难!多歧路,今安在?

      -

      长风破浪会有时,直挂云帆济沧海。

      -
      - - -``` -``` - - -
      点击打开图片
      - - - - -``` -``` - - - - -
      - -``` diff --git "a/\345\220\264\346\270\212\345\215\232/20251204-\346\226\207\346\241\243\345\257\271\350\261\241.md" "b/\345\220\264\346\270\212\345\215\232/20251204-\346\226\207\346\241\243\345\257\271\350\261\241.md" deleted file mode 100644 index 5edefb1e8831075e9d506a4e1a26c800021b10b9..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251204-\346\226\207\346\241\243\345\257\271\350\261\241.md" +++ /dev/null @@ -1,488 +0,0 @@ -# 笔记 -1. 核心特性 -- 无需声明可直接使用(全局上下文); -- 所有全局变量 / 函数都是 Window 的属性 / 方法; -- 一个浏览器标签页对应一个 Window 实例。 -- 2. 常用子对象 -- document:操作 DOM(页面文档); -- location:控制 URL(跳转、刷新、获取参数); -- history:操作浏览器历史记录(前进 / 后退); -- screen:获取屏幕尺寸 / 分辨率; -- navigator:获取浏览器 / 设备信息(如 userAgent); -- localStorage/sessionStorage:本地存储。 -- 3. 窗口控制方法 -- open(url, name, params):打开新窗口(指定尺寸 / 位置); -- close():关闭当前 / 指定窗口; -- moveTo(x, y)/moveBy(x, y):移动窗口; -- resizeTo(w, h)/resizeBy(w, h):调整窗口大小; -- focus()/blur():窗口获焦 / 失焦。 -- 4. 弹窗交互 -- alert(msg):警告弹窗(仅确认); -- confirm(msg):确认弹窗(返回布尔值); -- prompt(msg, default):输入弹窗(返回输入值 /null)。 - -- 常见场景: -- 服务端渲染(SSR)中模拟 DOM API; -- 单元测试中模拟页面元素交互; -- 非浏览器环境下运行依赖 DOM 的代码。 -- 模拟方式: -- 手动实现:创建对象,模拟getElementById、createElement等核心方法; -- 工具库:使用jsdom(Node.js 中模拟浏览器环境)、domino等库快速生成模拟document。 -- 核心模拟内容: -- 元素选择方法(如querySelector); -- 节点操作方法(如appendChild); -- 事件绑定 / 触发逻辑; -- 文档属性(如title、body)。 -``` -节点属性: -nodeType 标识节点类型 -nodeName 节点名称 -nodeValue 节点值 -childNodes 获取当前节点的所有子节点 -firstChild 获取第一个子节点 -lastChild 获取最后一个子节点 -nextSibling 获取下一个兄弟节点 -previousSibling 获取上一个兄弟节点 -parentNode 获取当前节点的父节点 -``` - -``` -节点创建等: -createElement 创建元素节点 -createTextNode 创建文本节点 -appendChild 将子节点添加到父节点的子节点末尾 -insertBefore(new,ref) 将 new插入到 ref之前,没有则替换 -removeChild 从父节点中删除指定子节点 -replaceChild() 可替换节点啊 -``` -``` -获取元素: -getElementById 全局获取单个唯一 ID 元素 -getElementsByClassName 全局 / 局部获取批量 Class 元素 -querySelector 获取第一个匹配 CSS 选择器的元素 -querySelectorAll 复杂选择器 / 批量静态元素 遍历 -``` -``` -innerHTML 动态插入 -innerText 仅操作纯文字 -outerHTML 替换整个元素 -``` -# 练习 - - ``` - - - - -
      - -``` - -``` - - - -
      -
      - 夜空中最亮的星
      - 能否听清
      - 那仰望的人
      - 心底的孤独和叹息
      - 夜空中最亮的星
      - 能否记起
      - 曾与我同行
      - 消失在风里的身影 -
      - -``` -``` - - - - - - -
        -
      • 1. 热辣滚烫
      • -
      • 2. 飞驰人生3
      • -
      • 3. 哪吒之魔童闹海
      • -
      • 4. 唐探1900
      • -
      - -``` -``` - - - - - -
      -

      蔬菜列表

      -
        -
      • 西红柿
      • -
      • 黄瓜
      • -
      • 香蕉
      • -
      • 胡萝卜
      • -
      -
      -
      -

      水果列表

      -
        -
      • 苹果
      • -
      • 橙子
      • -
      • 菠菜
      • -
      • 草莓
      • -
      -
      - -``` -``` - - - - -
      -

      金庸《射雕英雄传》中,郭靖的降龙十八掌师从谁?

      -
      - -
      - -
      - - -
      - -
      -
      - -``` -``` - - - - - -
      - 百度 - -
      - -``` -``` - - - - - -
      - -
      -
      - -``` -``` - - - - -
      - 一生只爱一人 - - 点击将文本改为斜体 -
      - -``` -``` - - - - -
      - - - - - - -
      - -``` -``` - - - - -
      - - 选中的表情 -
      - -``` \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251205-win\345\257\271\350\261\241.md" "b/\345\220\264\346\270\212\345\215\232/20251205-win\345\257\271\350\261\241.md" deleted file mode 100644 index c1e63d20534bd336d5abf4e75bc85423dcb6a5de..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251205-win\345\257\271\350\261\241.md" +++ /dev/null @@ -1,430 +0,0 @@ -# 笔记 - -1. 定时器 -- setTimeout(fn, ms):延迟执行(返回定时器 ID); -- setInterval(fn, ms):循环执行(返回定时器 ID); -- clearTimeout(id)/clearInterval(id):清除定时器。 -2. 尺寸 / 位置属性 -- innerWidth/innerHeight:视口宽高(不含边框); -- outerWidth/outerHeight:窗口整体宽高; -- screenX/screenY:窗口相对屏幕的坐标; -- scrollX/scrollY:页面滚动偏移量。 -3. 页面加载 / 事件 -- onload:页面所有资源加载完成触发; -- onunload:窗口关闭 / 刷新触发; -- addEventListener('resize', fn):监听窗口大小变化; -- addEventListener('scroll', fn):监听页面滚动。 - -window.resizeTo(w,h) 调整窗口大小 -confirm(message) 弹出确认框 -setTimeout(fn, delay) 延迟 delay 毫秒执行函数(一次性) -setInterval(fn, interval) 每隔 interval 毫秒执行函数(循环) -clearInterval(timer) 清除 setInterval 定时器 - -# 练习 -``` - - -
      -

      消散对白(节选)

      -

      丁禹兮

      -

      原諒我真的不太會告別

      -

      也沒想過有這一天

      -

      以為你隨口承諾的永遠

      -

      就可以敵過時間

      -

      可你眼中深情的對白 如煙花短暫

      -

      新鮮感終歸不是愛

      -

      回憶在倒帶要怎麼釋懷?

      -

      說著放下卻陷入無限循環

      -

      可你眼中無情的對白 淚都流乾

      -

      卻不說答案

      -

      順其自然 隨冷風消散

      -

      可過了這麼久你怎麼還是我的短板

      -
      - - -``` - -``` - - - 退出登录 - -``` - -``` - - - - -
      - -
      - 长乐曲 -
      - -
      - 十年一品温如言 -
      -
      - -``` -``` - - - - - - -
      -

      广告内容标题

      -

      这里是广告的具体内容

      -
      广告将在 5 秒后自动关闭
      -
      - -``` - -``` - - - - -``` -``` - - - - - - - - -``` -``` - - -``` -``` - -

      2024年奥运会举办城市问答

      -
      - -``` -``` - - - - -
      - 轮播图片 -
      - - -``` \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" "b/\345\220\264\346\270\212\345\215\232/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" deleted file mode 100644 index 4a8001bee9da0a60892ee4032522c2ae2f999bc7..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" +++ /dev/null @@ -1,9 +0,0 @@ -## 笔记 - -location方法: -assign():跳转新页面 -reload():重新载入当前页面 -history方法: -back():退回前一页 -forward():重新进入下一页 -go():进入指定的网友 \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251210-style\345\257\271\350\261\241.md" "b/\345\220\264\346\270\212\345\215\232/20251210-style\345\257\271\350\261\241.md" deleted file mode 100644 index f1e4d09c81c7c3d0457074fbe6c77fc273ef105e..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251210-style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,230 +0,0 @@ -## 作业 - -
      -

      此情可待成追忆

      -

      只是当时已惘然

      -
      - - - - 丁禹兮 - - - - - - - - - - - - - - - - \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251211-form\345\257\271\350\261\241.md" "b/\345\220\264\346\270\212\345\215\232/20251211-form\345\257\271\350\261\241.md" deleted file mode 100644 index 3a1f7d400a9008589afc0e0695ef381b3b06318f..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251211-form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,172 +0,0 @@ -## 作业 - - - - - - -
      - 语文 - 数学 - 英语 - 物理 - 化学 - 生物 - 历史 - 地理 - 政治 -
      - - -
      - A. 错误答案
      - B. 正确答案
      - C. 错误答案
      - -
      - -
      - - - -
      - 阅读
      - 运动
      - 听歌
      - 摄影
      - 绘画
      -
      -
      - - - - \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251212-Json.md" "b/\345\220\264\346\270\212\345\215\232/20251212-Json.md" deleted file mode 100644 index 039582ec790e6473e2d8377d66e5efb2c3a2670e..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251212-Json.md" +++ /dev/null @@ -1,20 +0,0 @@ -## 笔记 -一、JSON - -1. 概念 -- JSON(JavaScript Object Notation)是轻量级的数据交换格式,独立于语言,易读易解析。 -2. 核心方法 -- JSON.parse():将 JSON 字符串转换为 JavaScript 对象 / 数组,用于处理后端返回的 JSON 数据。 -- 例:const obj = JSON.parse('{"name":"张三","age":20}'); -- JSON.stringify():将 JavaScript 对象 / 数组转换为 JSON 字符串,用于向后端发送数据。 -- 例:const str = JSON.stringify({name:"张三",age:20}); -3. 注意点 -- 键名必须用双引号包裹,不能用单引号或无引号; -- 不能包含函数、undefined 等类型,序列化时会被忽略。 二、Fetch API -4. 概念 -- Fetch API 是现代浏览器提供的异步网络请求接口,替代传统的 XMLHttpRequest,基于 Promise 实现。 -5. 关键要点 -- Fetch 的响应(Response 对象)需要手动解析(json ()/text () 等),这是一个异步操作; -- 只有网络错误或请求无法完成时才会触发 catch,HTTP 错误(如 404、500)不会直接触发,需通过response.ok判断; -- 默认不携带 Cookie,若需要则配置credentials: 'include'; -- 支持 AbortController 中断请求 \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251215-\347\273\203\344\271\240.md" "b/\345\220\264\346\270\212\345\215\232/20251215-\347\273\203\344\271\240.md" deleted file mode 100644 index da69e91902fb77a37322a4f9f4629a4e87cef8bd..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251215-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,56 +0,0 @@ - \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251217-jQuery\347\254\224\350\256\260.md" "b/\345\220\264\346\270\212\345\215\232/20251217-jQuery\347\254\224\350\256\260.md" deleted file mode 100644 index 920718a51d191e250b3f2a091e75c9c1f8e455a3..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251217-jQuery\347\254\224\350\256\260.md" +++ /dev/null @@ -1,160 +0,0 @@ -## jQuery笔记 -一、 基础 -- ‌引入‌:通过 CDN 或本地 ‌- 语法‌:(selector).action()结构‌−就绪事件‌: -- (document).ready(function(){}) 确保 DOM 加载后执行 -二、 选择器 -- 基本选择器 -- 元素选择器:$("p") 选择所有段落 -- ID 选择器:$("#header") 选择 ID 为 header 的元素 -- 类选择器:$(".btn") 选择所有类名为 btn 的元素 - -## 层级选择器 -- 父子关系:$("ul > li") 选择 ul 的直接子 li -- 后代关系:$("div p") 选择 div 内的所有 p -- 过滤选择器 -- 位置过滤::first-child 选择第一个子元素 -- 内容过滤::contains("文本") 选择包含文本的元素 -- 表单过滤::input:enabled 选择启用状态的表单元素 - -三、 DOM 操作 - -- 属性操作 -- 获取属性:$("img").attr("alt") -- 设置属性:$("img").attr("src", "new.jpg") - -- 内容操作 -- 文本内容:$(".text").text("新内容") -- HTML 内容:$(".box").html("HTML") - -- CSS 操作 -- 行内样式:$("p").css("color", "blue") -- 添加/移除类:.addClass("active") / .removeClass("old") - -- 元素操作 -- 创建元素:$(" -- ") - -- 插入元素: -- .append() 内部追加 -- .after() 外部追加 -- 删除元素:.remove() - -
      jQuery 已就绪
      -
      123
      -
      23333
      -
      23
      -
      朱惠惠
      -

      项目1

      -

      项目2

      -

      项目3

      -
        -
      • 项1
      • -
      • 项2
      • -
      • 项3
      • -
      • 项4
      • -
      -
      -

      段落 文本1

      -

      段落 文本2

      -
      - - - - - - - - - - - - - -
      第1行
      第2行
      第3行
      第4行
      -
      -
      -
      -
        -
      • 项目1
      • -
      • 项目2
      • -
      - -
      -

      段落1

      -

      段落2

      -

      特殊段落

      -
      - -
      原始盒子
      - -

      段落1

      -

      段落2

      -

      段落3

      - - - - - \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251218-jquery\345\212\250\347\224\273.md" "b/\345\220\264\346\270\212\345\215\232/20251218-jquery\345\212\250\347\224\273.md" deleted file mode 100644 index 1c902cb1cd48bccd1a7ba848a0cd8b8862db5f4a..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251218-jquery\345\212\250\347\224\273.md" +++ /dev/null @@ -1,56 +0,0 @@ -## jQuery动画与事件处理笔记 - -一、 动画效果 - -- 基本动画 ‌- 显示/隐藏‌: -- show():显示元素(默认从左向右展开) -- hide():隐藏元素(默认从左向右收起) -- toggle():切换显示/隐藏状态 -- 可接受参数:speed(速度)、easing(缓动效果)、callback(回调函数) - -- ‌淡入淡出‌: -- fadeIn():淡入显示(透明度0→1) -- fadeOut():淡出隐藏(透明度1→0) -- fadeToggle():切换淡入/淡出 -- fadeTo():淡入到指定透明度 - -- ‌滑动效果‌: -- slideDown():从上向下展开 -- slideUp():从下向上收起 -- slideToggle():切换展开/收起 -- 参数:speed(速度)、easing(缓动效果)、callback(回调函数) - -- 自定义动画 ‌- animate()方法‌: -- 通过CSS属性变化创建动画 -- 语法:$("element").animate({styles}, duration, easing, callback); -- 支持属性:width、height、opacity、left、top等 -- 特殊值:+=/-=(相对值)、%(百分比) - -- ‌队列控制‌: -- .stop():停止当前动画 -- .delay():延迟后续动画 -- .queue():管理动画队列 - -二、 事件处理 -- 基本事件 -- ‌常用事件‌: -- click():点击事件 -- mouseenter()/mouseleave():鼠标悬停/离开 -- hover():悬停组合事件(mouseenter + mouseleave) -- focus()/blur():表单元素焦点 -- keydown()/keyup():键盘事件 -- submit():表单提交 -- load():资源加载完成 - -- ‌事件绑定‌: -- 直接绑定:$("element").on("click", handler); -- 事件对象访问:event参数包含事件信息 -- 事件对象 - -- ‌常用属性‌: -- event.target:触发事件的元素 -- event.currentTarget:绑定事件的元素 -- event.pageX/event.pageY:鼠标位置 -- event.keyCode:键盘按键码 -- event.preventDefault():阻止默认行为 -- event.stopPropagation():阻止事件冒泡 \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251219-jQuery.md" "b/\345\220\264\346\270\212\345\215\232/20251219-jQuery.md" deleted file mode 100644 index abcdfe12d226134c48ee3a3b3378eeee68ab986d..0000000000000000000000000000000000000000 --- "a/\345\220\264\346\270\212\345\215\232/20251219-jQuery.md" +++ /dev/null @@ -1,35 +0,0 @@ -## JavaScript基础梳理笔记 - -一、 数据类型 - -- ‌基本类型‌:number、string、boolean、null、undefined、symbol(ES6) ‌- 引用类型‌:object(包括Array、Function、Date等) - -二、 变量声明 -- var:函数作用域,可提升 -- let:块级作用域,不可重复声明 -- const:块级作用域,常量声明 - -三、 运算符 -- 算术运算符‌:+、-、*、/、%、++、-- - -- ‌比较运算符‌:==(值相等)、===(值和类型相等)、>、<、>=、<= -- ‌逻辑运算符‌:&&(与)、||(或)、!(非) -- ‌赋值运算符‌:=、+=、-=、*=、/=、%=、**=(幂运算) - -四、 控制结构 -- 条件语句‌: -- if/else if/else -- switch:多分支选择 -- ‌循环语句‌: -- for:计数循环 -- while/do...while:条件循环 -- break/continue:控制循环流程 - -五、 函数 -- 声明方式‌: -- 函数声明:function name(){} -- 函数表达式:const func = function(){} -- 箭头函数:const arrow = () => {} ‌- 参数‌: -- 默认参数:function func(a=1, b=2){} -- 剩余参数:function sum(...args){} -- ‌返回值‌:return语句 \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251110-js\345\234\250html\344\270\255\347\232\204\345\272\224\347\224\250.md" "b/\345\224\220\345\256\207\346\230\212/20251110-js\345\234\250html\344\270\255\347\232\204\345\272\224\347\224\250.md" deleted file mode 100644 index 8ba935af5386ddc262791a97ba21d3c736b27ed9..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251110-js\345\234\250html\344\270\255\347\232\204\345\272\224\347\224\250.md" +++ /dev/null @@ -1,80 +0,0 @@ -## JavaScript在HTML中的三种实现方式 - -### 1.内联时间处理器 -直接在HTML标签的事件属性中嵌入js代码,通过事件触发执行 - -```html - - - -``` - -### 2.内部脚本块 -在HTML文档中通过` - - - - - - - - -``` - -### 3.外部脚本文件 -将js代码单独写入.js文件,再通过` - -``` - -## 练习 - -### 练习1 -```html - - - -``` - - -### 练习2 -```js -function showalert(){ - alert("http://www.mingrisoft.com"); -} -``` -```html - - - - -``` diff --git "a/\345\224\220\345\256\207\346\230\212/20251112-js\345\237\272\347\241\200.md" "b/\345\224\220\345\256\207\346\230\212/20251112-js\345\237\272\347\241\200.md" deleted file mode 100644 index 6ef0d7b5836887d092795c7950b628263936c4e5..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251112-js\345\237\272\347\241\200.md" +++ /dev/null @@ -1,175 +0,0 @@ -## 数据类型 -### 数值型 -- 十进制 -- 十六进制 -- 八进制 -- 浮点型数据 -- 特殊值 Infinity - - 如果一个数值超出了js所能表示的最大值的范围,就会输出Infinity -- 特殊值NaN - - 在进行数学运算时产生了未知的结果或错误 - -### 字符串型 -用于表示文本数据 -- 本质:字符的有序集合 -- 用途:存储/传递文本信息 - -**常用操作与方法** -1.基础属性:`length` -返回字符串的字符个数(空格、中文、符号都算1个字符) - -2.字符串拼接 -- 方式1:+运算符 -- 方式2:concat()方法(支持多参数拼接) - -**类型转换** -1.字符串转文字 -`Number(str)`:严格转换 -2.其他类型转字符串 -- `String(value)`:通用转换 -- `value.toSring()`:原始值/对象转字符串 - -### 布尔型 -布尔数据类型只有两个值,true false - -## 常量和变量 - -### 常量 -指在程序运行过程中保持不变的数据 - -### 变量 -变量是指程序中已经命名的存储单元,主要作用是为数据操作提供存储信息的容器。 - -**1.变量的命名** -- 必须以字母或下划线开头 -- 变量名不能包含空格或加号、减号等符号 -- 变量名是严格区分大小写的 -- 不能使用js中的关键字作为变量名 - -**2.变量的声明** -在js中,使用变量前需要先声明变量 -```js -var username; -``` - -**3.变量的赋值** -在声明变量是可以使用(=)对变量进行一个初始化赋值 -```js -var lesson="JavaScript 从入门到入土" -``` - -## 运算符 - -### 算术运算符 - -- `+` -- `-` -- `*` -- `/` -- `%` -- `++`:在使用i之后,使i的值加1。和++i(在使用i之前,先使i的值加1) -- `--`:在使用i之后,使i的值减1。和--i(在使用i之前,先使i的值减1) - -### 比较运算符 - -- `<` -- `>` -- `<=` -- `>=` -- `==`:等于。只根据表面值进行推断,不涉及数据类型 -- `===`:绝对等于,涉及技术类型和表面值 -- `!=` -- `!==` - -## 练习 - -### 练习1 -```html - -``` - -### 练习2 -```html - -
      -----------------------------
      - -``` -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251115205933394.png) - -### 练习 - -```html - -
      -----------------------------
      - -
      -----------------------------
      - -
      -----------------------------
      - -
      -----------------------------
      - -
      -----------------------------
      - -``` -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251115210240103.png) \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251113-js\345\237\272\347\241\2002.md" "b/\345\224\220\345\256\207\346\230\212/20251113-js\345\237\272\347\241\2002.md" deleted file mode 100644 index 04cb65fb6fa1a39a1498d1ef7404afed2df8826c..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251113-js\345\237\272\347\241\2002.md" +++ /dev/null @@ -1,90 +0,0 @@ -## 练习 - -### 练习1 -```html - -``` - -### 练习2 -```html - 请选择你的出生年月: - - - -``` -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251116171034379.png) - -### 练习3 -```html - -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\345\224\220\345\256\207\346\230\212/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" deleted file mode 100644 index 31614b2854fa44b0e7bc89acf536cd2946983129..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" +++ /dev/null @@ -1,147 +0,0 @@ -## 作业 - -### 练习1 -```html - -``` - -### 练习2 -```html - -``` - -### 练习3 -```html - -``` - -### 练习4 -```html - -``` - -### 练习5 -```html - -``` - -### 练习6 -```html - -``` - -### 练习7 -```html - -``` -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251115210812857.png) diff --git "a/\345\224\220\345\256\207\346\230\212/20251117-\345\207\275\346\225\2601.md" "b/\345\224\220\345\256\207\346\230\212/20251117-\345\207\275\346\225\2601.md" deleted file mode 100644 index 8801ba5a01f6f0e404ccab37da312dbec47e94a5..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251117-\345\207\275\346\225\2601.md" +++ /dev/null @@ -1,274 +0,0 @@ -# JavaScript 函数笔记 - -## 1. 函数定义 - -### 1.1 函数声明 - -**说明:** 使用 function 关键字定义函数,存在函数提升(声明提前),可在定义前调用 - -```javascript -greet(); -function greet() { - console.log("Hello!"); -} -``` - -### 1.2 函数表达式 - -**说明:** 将匿名函数赋值给变量,不存在函数提升,必须先定义后调用 - -```javascript -const greet = function () { - console.log("Hello!"); -}; -greet(); -``` - -### 1.3 箭头函数 - -**说明:** ES6 新增语法,简洁的函数写法,无自己的 this、arguments,不能作为构造函数 - -```javascript -const greet = () => { - console.log("Hello!"); -}; - -const double = num => num * 2; - -const sum = (a, b) => a + b; -``` - -### 1.4 构造函数 - -**说明:** 使用 Function 构造函数动态创建函数,可读性差、性能低,不推荐使用 - -```javascript -const greet = new Function('name', 'console.log("Hello, " + name)'); -greet("张三"); -``` - -## 2. 函数调用 - -### 2.1 直接调用 - -**说明:** 最基础的调用方式,函数名 + 括号,可传递实参 - -```javascript -function sayHello(name) { - console.log(`Hello ${name}!`); -} -sayHello("李四"); -``` - -### 2.2 方法调用 - -**说明:** 函数作为对象的属性(方法),通过对象调用,this 指向该对象 - -```javascript -const person = { - name: "王五", - age: 28, - introduce: function () { - console.log(`我是${this.name},今年${this.age}岁`); - }, -}; -person.introduce(); -``` - -### 2.3 构造函数调用 - -**说明:** 使用 new 关键字调用函数,创建实例对象,this 指向新创建的实例 - -```javascript -function Person(name, age) { - this.name = name; - this.age = age; - this.sayHi = function () { - console.log(`Hi, 我是${this.name}`); - }; -} -const person1 = new Person("赵六", 30); -person1.sayHi(); -``` - -### 2.4 间接调用 - -#### 2.4.1 call 方法 - -**说明:** 调用函数并指定 this 指向,参数逐个传递 - -```javascript -function introduce(greeting, end) { - console.log(`${greeting},我是${this.name}${end}`); -} -const user = { name: "孙七" }; -introduce.call(user, "你好", "!"); -``` - -#### 2.4.2 apply 方法 - -**说明:** 调用函数并指定 this 指向,参数以数组形式传递 - -```javascript -introduce.apply(user, ["哈喽", "~"]); -``` - -#### 2.4.3 bind 方法 - -**说明:** 创建新函数,绑定 this 指向,参数可预设,需手动调用新函数 - -```javascript -const bindIntroduce = introduce.bind(user, "嗨"); -bindIntroduce("!"); -``` - -## 3. 函数参数 - -### 3.1 形参和实参 - -**说明:** 形参是函数定义时声明的参数(占位符),实参是调用时传入的具体值;实参数量可与形参不一致 - -```javascript -function add(a, b) { - return a + b; -} -console.log(add(2, 3)); -console.log(add(2)); -console.log(add(2, 3, 4)); -``` - -### 3.2 默认参数 - -**说明:** ES6 支持为形参设置默认值,实参未传递时使用默认值 - -```javascript -function greet(name = "游客", age = 18) { - console.log(`你好${name},默认年龄${age}`); -} -greet(); -greet("周八"); -greet("吴九", 25); -``` - -### 3.3 剩余参数 - -**说明:** 使用 `...` 语法接收多个剩余实参,转为数组,替代 arguments,更灵活 - -```javascript -function sum(base, ...numbers) { - return base + numbers.reduce((total, num) => total + num, 0); -} -console.log(sum(10, 1, 2, 3)); -``` - -### 3.4 参数解构 - -**说明:** 直接解构对象/数组类型的参数,简化取值操作 - -```javascript -function printUser({ name, age, gender = "未知" }) { - console.log(`姓名:${name},年龄:${age},性别:${gender}`); -} -printUser({ name: "郑十", age: 22 }); - -function printScore([chinese, math, english]) { - console.log(`语文:${chinese},数学:${math},英语:${english}`); -} -printScore([90, 85, 95]); -``` - -### 3.5 arguments 对象 - -**说明:** 函数内置的类数组对象,包含所有实参,仅在普通函数中可用(箭头函数无) - -```javascript -function showArgs() { - console.log(arguments); - console.log(arguments.length); - const args = Array.from(arguments); - console.log(args); -} -showArgs(1, 2, 3); -``` - -### 3.6 参数传递方式 - -**说明:** 基本类型(字符串、数字、布尔等)按值传递,对象类型(对象、数组、函数)按引用传递 - -```javascript -function changeNum(x) { - x = 100; -} -let num = 10; -changeNum(num); -console.log(num); - -function changeObj(obj) { - obj.name = "修改后的名字"; -} -let obj = { name: "原始名字" }; -changeObj(obj); -console.log(obj.name); - -function reassignObj(obj) { - obj = { name: "新对象" }; -} -reassignObj(obj); -console.log(obj.name); -``` - -## 4. 返回值 - -### 4.1 return 语句 - -**说明:** 使用 return 返回函数执行结果,执行到 return 立即终止函数;无 return 则默认返回 undefined - -```javascript -function multiply(a, b) { - return a * b; - console.log("不会执行"); -} -console.log(multiply(5, 6)); - -function noReturn() { - console.log("仅执行打印"); -} -console.log(noReturn()); - -function checkAge(age) { - if (age < 18) { - return "未成年"; - } - return "成年"; -} -console.log(checkAge(16)); -``` - -## 练习 - -### 练习1 - -```html - - - -``` - -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123182521642.png) -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123182557810.png) diff --git "a/\345\224\220\345\256\207\346\230\212/20251119-\345\207\275\346\225\2602.md" "b/\345\224\220\345\256\207\346\230\212/20251119-\345\207\275\346\225\2602.md" deleted file mode 100644 index d6bf62da1bbaa75b747bebbca42d61d77f9c105e..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251119-\345\207\275\346\225\2602.md" +++ /dev/null @@ -1,487 +0,0 @@ -# JavaScript 高级函数笔记 - -## 1. 函数嵌套调用 - -### 1.1 基本嵌套调用 - -**说明:** 在一个函数内部调用另一个函数 - -```javascript -function add(a, b) { - return a + b; -} - -function multiply(a, b) { - return a * b; -} - -function calculate(a, b) { - const sum = add(a, b); - const product = multiply(a, b); - return { sum, product }; -} - -console.log(calculate(3, 4)); -``` - -### 1.2 链式嵌套 - -**说明:** 一个函数的返回值作为另一个函数的参数 - -```javascript -function double(x) { - return x * 2; -} - -function square(x) { - return x * x; -} - -const result = square(double(5)); -console.log(result); -``` - -### 1.3 多层嵌套 - -**说明:** 多个函数层层嵌套调用 - -```javascript -function formatText(text) { - return text.trim(); -} - -function toUpperCase(text) { - return text.toUpperCase(); -} - -function addExclamation(text) { - return text + "!"; -} - -function processText(text) { - return addExclamation(toUpperCase(formatText(text))); -} - -console.log(processText(" hello ")); -``` - -## 2. 递归函数 - -### 2.1 基本递归 - -**说明:** 函数调用自身,必须有终止条件 - -```javascript -function factorial(n) { - if (n === 1) { - return 1; - } - return n * factorial(n - 1); -} - -console.log(factorial(5)); -``` - -### 2.2 斐波那契数列 - -**说明:** 经典的递归案例,每个数是前两个数之和 - -```javascript -function fibonacci(n) { - if (n <= 1) return n; - return fibonacci(n - 1) + fibonacci(n - 2); -} - -console.log(fibonacci(6)); -``` - -### 2.3 递归遍历数组 - -**说明:** 使用递归处理数组元素 - -```javascript -function sumArray(arr, index = 0) { - if (index >= arr.length) return 0; - return arr[index] + sumArray(arr, index + 1); -} - -console.log(sumArray([1, 2, 3, 4, 5])); -``` - -### 2.4 递归注意事项 - -**说明:** 递归必须有基线条件,否则会栈溢出 - -```javascript -function infiniteRecursion() { - return infiniteRecursion(); -} - -function countdown(n) { - if (n <= 0) { - console.log("结束!"); - return; - } - console.log(n); - countdown(n - 1); -} - -countdown(3); -``` - -## 3. JavaScript 内置函数 - -### 3.1 数学函数 - -**说明:** Math 对象提供的数学计算函数 - -```javascript -console.log(Math.abs(-5)); -console.log(Math.max(1, 5, 3)); -console.log(Math.round(3.7)); -console.log(Math.random()); -``` - -### 3.2 字符串函数 - -**说明:** 字符串处理相关函数 - -```javascript -const str = "Hello World"; -console.log(str.length); -console.log(str.toUpperCase()); -console.log(str.indexOf("World")); -console.log(str.split(" ")); -``` - -### 3.3 数组函数 - -**说明:** 数组操作相关函数 - -```javascript -const arr = [1, 2, 3]; -console.log(arr.push(4)); -console.log(arr.pop()); -console.log(arr.map((x) => x * 2)); -console.log(arr.filter((x) => x > 1)); -``` - -### 3.4 类型转换函数 - -**说明:** 数据类型转换函数 - -```javascript -console.log(Number("123")); -console.log(String(123)); -console.log(Boolean(0)); -console.log(parseInt("100px")); -``` - -### 3.5 时间函数 - -**说明:** 日期和时间相关函数 - -```javascript -const now = new Date(); -console.log(now.getFullYear()); -console.log(now.getMonth() + 1); -console.log(now.getDate()); -console.log(Date.now()); -``` - -## 4. 匿名函数 - -### 4.1 函数表达式 - -**说明:** 没有函数名的函数,赋值给变量 - -```javascript -const greet = function (name) { - return "Hello, " + name; -}; -console.log(greet("Alice")); -``` - -### 4.2 立即执行函数 (IIFE) - -**说明:** 定义后立即执行的匿名函数 - -```javascript -(function () { - console.log("立即执行!"); -})(); - -const result = (function (a, b) { - return a + b; -})(5, 3); -console.log(result); -``` - -### 4.3 回调函数 - -**说明:** 作为参数传递给其他函数的匿名函数 - -```javascript -setTimeout(function () { - console.log("3秒后执行"); -}, 3000); - -const numbers = [1, 2, 3, 4]; -const doubled = numbers.map(function (num) { - return num * 2; -}); -console.log(doubled); -``` - -### 4.4 箭头函数作为匿名函数 - -**说明:** 使用箭头语法定义匿名函数 - -```javascript -const multiply = (a, b) => a * b; -console.log(multiply(4, 5)); - -const numbers = [1, 2, 3]; -const squares = numbers.map((x) => x * x); -console.log(squares); - -(() => { - console.log("箭头函数立即执行!"); -})(); -``` - - -## 练习 - -### 练习3-8 - -```html - - - - - - - - - - - - -
      - -``` - -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123183112533.png) -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123183125233.png) - - -## 综合练习 - -### 练习1 -```html - -``` -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123183315876.png) - -### 练习2 - -```html - -``` -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123183403062.png) - - -### 练习3 - -```html - -``` - -### 斐波那契 - -```html - -``` -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123183724092.png) \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251120-\345\206\205\347\275\256\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251120-\345\206\205\347\275\256\345\257\271\350\261\241.md" deleted file mode 100644 index 49b75d7fd1f2661852615c57591b295f1f93ce48..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251120-\345\206\205\347\275\256\345\257\271\350\261\241.md" +++ /dev/null @@ -1,326 +0,0 @@ -# JavaScript 内置对象用法总结 - -## 1. Math 对象 - -### 1.1 数学常数 - -```javascript -Math.PI; -Math.E; -Math.SQRT2; -``` - -### 1.2 取整方法 - -```javascript -Math.round(4.7); -Math.floor(4.7); -Math.ceil(4.3); -Math.trunc(4.7); -``` - -### 1.3 随机数生成 - -```javascript -Math.random(); -Math.floor(Math.random() * 100); -``` - -### 1.4 最大值最小值 - -```javascript -Math.max(1, 5, 3); -Math.min(1, 5, 3); -``` - -### 1.5 幂和平方根 - -```javascript -Math.pow(2, 3); -Math.sqrt(16); -Math.cbrt(8); -``` - -### 1.6 三角函数 - -```javascript -Math.sin(Math.PI / 2); -Math.cos(Math.PI); -Math.tan(Math.PI / 4); -``` - -## 2. Date 对象 - -### 2.1 创建日期对象 - -```javascript -new Date(); -new Date("2024-01-15"); -new Date(2024, 0, 15); -``` - -### 2.2 获取日期时间 - -```javascript -const now = new Date(); -now.getFullYear(); -now.getMonth(); -now.getDate(); -now.getDay(); -now.getHours(); -now.getMinutes(); -``` - -### 2.3 设置日期时间 - -```javascript -const date = new Date(); -date.setFullYear(2025); -date.setMonth(5); -date.setDate(20); -date.setHours(15, 30, 0); -``` - -### 2.4 日期格式化 - -```javascript -const now = new Date(); -now.toString(); -now.toDateString(); -now.toTimeString(); -now.toLocaleString(); -``` - -### 2.5 时间戳 - -```javascript -const now = new Date(); -now.getTime(); -Date.now(); -``` - -### 2.6 日期计算 - -```javascript -const date1 = new Date("2024-01-01"); -const date2 = new Date("2024-01-15"); -const diff = date2 - date1; -const days = diff / (1000 * 60 * 60 * 24); -``` - -## 3. Event 对象 - -### 3.1 事件监听 - -```javascript -element.addEventListener("click", function (event) { - console.log("元素被点击了"); -}); - -function handleClick(event) { - console.log("点击事件"); -} -element.removeEventListener("click", handleClick); -``` - -### 3.2 事件对象属性 - -```javascript -element.addEventListener("click", function (e) { - e.target; - e.currentTarget; - e.type; - e.clientX; - e.clientY; - e.key; -}); -``` - -### 3.3 阻止默认行为 - -```javascript -link.addEventListener("click", function (e) { - e.preventDefault(); - console.log("阻止了默认跳转行为"); -}); - -form.addEventListener("submit", function (e) { - e.preventDefault(); - console.log("阻止了表单提交"); -}); -``` - -### 3.4 阻止事件冒泡 - -```javascript -child.addEventListener("click", function (e) { - e.stopPropagation(); - console.log("子元素点击,阻止冒泡到父元素"); -}); - -parent.addEventListener("click", function () { - console.log("父元素点击"); -}); -``` - -### 3.5 鼠标事件 - -```javascript -element.addEventListener("click", function (e) { - console.log("单击事件"); -}); - -element.addEventListener("dblclick", function (e) { - console.log("双击事件"); -}); - -element.addEventListener("mouseover", function (e) { - console.log("鼠标移入"); -}); - -element.addEventListener("mouseout", function (e) { - console.log("鼠标移出"); -}); -``` - -### 3.6 键盘事件 - -```javascript -document.addEventListener("keydown", function (e) { - console.log(`按下按键: ${e.key}, 键码: ${e.keyCode}`); -}); - -document.addEventListener("keyup", function (e) { - console.log(`释放按键: ${e.key}`); -}); -``` - -### 3.7 表单事件 - -```javascript -input.addEventListener("focus", function (e) { - console.log("输入框获得焦点"); -}); - -input.addEventListener("blur", function (e) { - console.log("输入框失去焦点"); -}); - -input.addEventListener("input", function (e) { - console.log("输入内容:", e.target.value); -}); - -input.addEventListener("change", function (e) { - console.log("内容改变:", e.target.value); -}); -``` - -### 3.8 事件委托 - -```javascript -list.addEventListener("click", function (e) { - if (e.target.tagName === "LI") { - console.log("点击了列表项:", e.target.textContent); - } -}); -``` - -## 练习 - -### 1-3 - -```html - - -

      0 天

      - - - -``` -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123184105497.png) - -### 综合 - -```html - -``` -![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123184542486.png) \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251121-\346\225\260\347\273\204.md" "b/\345\224\220\345\256\207\346\230\212/20251121-\346\225\260\347\273\204.md" deleted file mode 100644 index 5db27a0a260fdaf05038e12f8014c71ef22a3b10..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251121-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,164 +0,0 @@ -# JavaScript 数组用法总结 - -## 1. 创建数组 - -### 1.1 字面量创建 -```javascript -const arr = [1, 2, 3, 4, 5] -``` - -### 1.2 构造函数创建 -```javascript -const arr = new Array(1, 2, 3) -``` - -### 1.3 创建空数组 -```javascript -const empty = [] -const withSize = new Array(5) -``` - -## 2. 访问和修改元素 - -### 2.1 访问元素 -```javascript -const arr = ['a', 'b', 'c'] -console.log(arr[0]) -``` - -### 2.2 修改元素 -```javascript -arr[1] = 'x' -``` - -### 2.3 数组长度 -```javascript -console.log(arr.length) -``` - -## 3. 添加和删除元素 - -### 3.1 末尾添加(push) -```javascript -arr.push('d') -``` - -### 3.2 末尾删除(pop) -```javascript -arr.pop() -``` - -### 3.3 开头添加(unshift) -```javascript -arr.unshift('z') -``` - -### 3.4 开头删除(shift) -```javascript -arr.shift() -``` - -## 4. 数组遍历 - -### 4.1 for循环 -```javascript -for (let i = 0; i < arr.length; i++) { - console.log(arr[i]) -} -``` - -### 4.2 forEach方法 -```javascript -arr.forEach(item => console.log(item)) -``` - -### 4.3 for...of循环 -```javascript -for (const item of arr) { - console.log(item) -} -``` - -## 5. 数组转换方法 - -### 5.1 map - 映射新数组 -```javascript -const doubled = [1, 2, 3].map(x => x * 2) -``` - -### 5.2 filter - 过滤元素 -```javascript -const evens = [1, 2, 3, 4].filter(x => x % 2 === 0) -``` - -### 5.3 reduce - 累计计算 -```javascript -const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0) -``` - -## 6. 查找和判断 - -### 6.1 find - 查找元素 -```javascript -const found = [1, 2, 3].find(x => x > 1) -``` - -### 6.2 includes - 包含检查 -```javascript -const hasTwo = [1, 2, 3].includes(2) -``` - -### 6.3 indexOf - 查找索引 -```javascript -const index = [1, 2, 3].indexOf(2) -``` - -## 7. 数组操作 - -### 7.1 slice - 切片 -```javascript -const arr = [1, 2, 3, 4, 5] -const part = arr.slice(1, 3) -``` - -### 7.2 splice - 删除/添加 -```javascript -arr.splice(1, 2, 'a', 'b') -``` - -### 7.3 concat - 合并数组 -```javascript -const newArr = [1, 2].concat([3, 4]) -``` - -## 8. 排序和反转 - -### 8.1 sort - 排序 -```javascript -const sorted = [3, 1, 2].sort() -``` - -### 8.2 reverse - 反转 -```javascript -const reversed = [1, 2, 3].reverse() -``` - -## 9. 数组判断 - -### 9.1 Array.isArray -```javascript -Array.isArray([1, 2, 3]) -Array.isArray('hello') -``` - -### 9.2 every - 所有元素满足条件 -```javascript -const allPositive = [1, 2, 3].every(x => x > 0) -``` - -### 9.3 some - 至少一个元素满足条件 -```javascript -const hasNegative = [1, -2, 3].some(x => x < 0) -``` - - diff --git "a/\345\224\220\345\256\207\346\230\212/20251124-string\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251124-string\345\257\271\350\261\241.md" deleted file mode 100644 index 651b34af1d2933b5589446095df8deb306a424f6..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251124-string\345\257\271\350\261\241.md" +++ /dev/null @@ -1,144 +0,0 @@ -# String笔记 -## 1. 核心特性 -- 字符串**不可变**:所有操作方法均返回新字符串,不修改原字符串 -- 原始字符串(`"abc"`)自动装箱为 String 对象,可调用方法 -- 极少直接创建 String 对象(`new String("abc")`),优先用字面量 - -## 2. 核心属性 -| 属性 | 说明 | -|------|------| -| `length` | 返回字符串字符长度(UTF-16 编码,emoji 等扩展字符可能占 2 个长度) | - -## 3. 高频核心方法 -### 3.1 查找/判断 -| 方法 | 作用 | 示例 | -|------|------|------| -| `indexOf(str[, start])` | 找子串首次出现索引,无则返回 -1 | `"ababa".indexOf("ba") → 1` | -| `includes(str[, start])` | 判断是否包含子串 | `"hello".includes("ll") → true` | -| `startsWith(str)` | 判断是否以子串开头 | `"hello".startsWith("he") → true` | -| `endsWith(str)` | 判断是否以子串结尾 | `"hello".endsWith("lo") → true` | - -### 3.2 操作/修改 -| 方法 | 作用 | 示例 | -|------|------|------| -| `replace(/xxx/g, str)` | 替换匹配项(加g修饰符全替换) | `"ababa".replace(/a/g, "x") → "xbxbx"` | -| `split(sep[, limit])` | 按分隔符转数组 | `"a,b,c".split(",") → ["a","b","c"]` | -| `trim()` | 去除首尾空白 | `" hello ".trim() → "hello"` | -| `padStart(len, str)` | 开头补全至指定长度 | `"123".padStart(5, "0") → "00123"` | - -### 3.3 截取 -| 方法 | 作用 | 示例 | -|------|------|------| -| `slice(start[, end])` | 截取 [start, end) 区间,支持负数索引 | `"abcdef".slice(1,4) → "bcd"`;`"abc".slice(-2) → "bc"` | - -### 3.4 大小写转换 -| 方法 | 作用 | 示例 | -|------|------|------| -| `toLowerCase()` | 转小写 | `"HELLO".toLowerCase() → "hello"` | -| `toUpperCase()` | 转大写 | `"hello".toUpperCase() → "HELLO"` | - -## 4. 核心注意事项 -1. 字符串不可变,操作后需接收返回值(如 `str = str.toUpperCase()`) -2. `str[index]` 访问字符,越界返回 `undefined`(`charAt()` 越界返回空字符串) - -## 作业 - -### 练习1 - -```js - -``` - -### 训练9 - -```js -
      文本1
      -
      文本2
      - -
      - -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251203-DOM\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251203-DOM\345\257\271\350\261\241.md" deleted file mode 100644 index f111271fc69088d9b4bf8d989cfcdc3deeb253df..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251203-DOM\345\257\271\350\261\241.md" +++ /dev/null @@ -1,209 +0,0 @@ -# JS DOM 对象核心笔记 -(MD格式可直接复制使用) - -## 一、核心概念 -- DOM(Document Object Model):文档对象模型,将HTML文档抽象为树形结构 -- 核心对象:`document`(整个文档)、`Element`(元素节点)、`Node`(所有节点基类) - -## 二、获取元素(高频) -```js -// 1. 通过ID(唯一) -document.getElementById('id') - -// 2. 通过选择器(推荐,返回第一个匹配元素) -document.querySelector('selector') // 例:'.class' '#id' 'div' - -// 3. 通过选择器(返回所有匹配元素,NodeList) -document.querySelectorAll('selector') - -// 4. 其他常用 -document.getElementsByTagName('tag') // 标签名,HTMLCollection -document.getElementsByClassName('class') // 类名,HTMLCollection -document.body // body元素 -document.head // head元素 -``` - -## 三、节点操作 -### 1. 创建节点 -```js -document.createElement('tag') // 创建元素节点 -document.createTextNode('文本') // 创建文本节点 -``` - -### 2. 插入节点 -```js -parent.appendChild(child) // 尾部插入 -parent.insertBefore(newNode, referenceNode) // 插入到参考节点前 -``` - -### 3. 删除/替换节点 -```js -parent.removeChild(child) // 删除子节点 -parent.replaceChild(newNode, oldNode) // 替换节点 -``` - -## 四、属性操作 -```js -// 1. 原生属性(直接操作) -elem.id = 'newId' -elem.src = 'path' - -// 2. 自定义属性(getAttribute/setAttribute) -elem.getAttribute('data-key') -elem.setAttribute('data-key', 'value') - -// 3. HTML5数据集(dataset) -elem.dataset.key = 'value' // 对应 data-key 属性 -``` - -## 五、样式操作 -```js -// 1. 行内样式(style) -elem.style.color = 'red' -elem.style.fontSize = '16px' - -// 2. 类名操作(classList) -elem.classList.add('class1') // 添加类 -elem.classList.remove('class2') // 移除类 -elem.classList.toggle('class3') // 切换类 -elem.classList.contains('class4') // 检查类是否存在 - -// 3. 计算样式(getComputedStyle) -window.getComputedStyle(elem).color -``` - -## 六、事件基础 -```js -// 绑定事件 -elem.addEventListener('eventType', handler) -// 例:click、mouseover、keydown - -// 事件对象常用属性 -function handler(e) { - e.target // 事件触发源 - e.preventDefault() // 阻止默认行为 - e.stopPropagation() // 阻止事件冒泡 -} -``` - -## 练习 - -### 练习1 - -```js -let btn = document.getElementById('btn'); - btn.onclick = function () { - let bg = document.body.style.backgroundColor; - let txt = document.body.style.color; - - document.body.style.backgroundColor = txt; - document.body.style.color = bg; - } -``` - -### 练习2 - -```js - document.write("
      " + document.URL + "
      "); - -``` - - -### 练习3 - -```js -let span = document.createElement('span'); - - let str = "这是一串要逐个出现的文字"; - - function btnAdd() { - span.innerText = ''; - let i = 0; - setInterval(() => { - if (i < str.length) { - span.innerText += str[i]; - } - i++; - }, 500); - } - document.body.appendChild(span); - -``` - -### 综合练习1 - -```js -let str1 = "李白李白李白李白李白李白李白李白李白李白李白"; - document.write("
      " + str1); - let sele = { - green: { bg: 'green', text: 'white' }, - red: { bg: 'red', text: 'blue' } - }; - - function switchTheme(themekey) { - let theme = sele[themekey]; - - if (!themekey) { - document.body.style.backgroundColor = ''; - document.body.style.color = ''; - } - - document.body.style.backgroundColor = theme.bg; - document.body.style.color = theme.text; - - } -``` - - -### 综合练习2 - -```js -let box = document.getElementById('box'); - - function showImage() { - box.style.display = 'flex'; - - document.body.style.overflow = 'hidden'; - - } - - function closeBox() { - box.style.display = 'none'; - - document.body.style.overflow = 'auto'; - - } -``` - -### 综合练习3 - -```js -let startbtn = document.getElementById('startbtn'); - let imgContainer = document.getElementById('imgContainer'); - let imgList = ['./图片imgs/1.jpg', - './图片imgs/2.jpg', - './图片imgs/3.jpg' - ] - - let i = 0; - let j = 0; - function startbtnAdd() { - setInterval(() => { - if (j >= imgList.length) { - return; - } - j++; - let img = document.createElement('img'); - img.src = imgList[i]; - img.className = 'img-item'; - img.alt = `头像${i + 1}`; - - - imgContainer.appendChild(img); - // document.getElementById("imgContainer").appendChild(img); - console.log(img); - - i++; - }, 500); - } -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\224\220\345\256\207\346\230\212/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 107ea3fd6ba242aafd94415293f5404d67c55ba5..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,222 +0,0 @@ -## 学习内容 - - - 获取DOM元素。--返回集合或单个元素 - - getElementById()-给Id用 - - getElementsByClassName() -给class用(通过类名) - - getElementsByTagName() -给标签用 - - querySelector() -给class选择器用(通过.类名) - - querySelectorAll() -给class选择器用 - - - 处理DOM节点的方法 - - 增:创建 - - appendChild()--插入节点末尾 - - createElement() --创建标签 - - createTextNode() --添加文本 - - insertBefore()- 插入标签 - - cloneNode()-复制标签 - - 删: - - removeChild() - - 替换节点replaceChild() - -## 练习 - -### 1 - -```js -function textAdd() { - let str = document.getElementById('str'); - let sele = document.getElementById('sele'); - let text = str.value.trim(); - let color = sele.value; - let span = document.createElement('span'); - - span.innerText = text; - span.style.color = color; - - document.getElementById('textArea').appendChild(span); - - } -``` - -### 2 - -```js -const titleInput = document.getElementById('titleInput'); - const addTitleBtn = document.getElementById('addTitleBtn'); - const songTitle = document.getElementById('songTitle'); - - const correctTitle = '再别康桥'; - - addTitleBtn.onclick = function () { - const inputTitle = titleInput.value.trim(); - - if (inputTitle === correctTitle) { - songTitle.textContent = inputTitle; - alert('歌名添加成功!'); - } else { - alert('歌名输入错误,请重新输入!'); - } - - titleInput.value = ''; - }; -``` - - -### 3 - -```js -const movieList = document.getElementById('movieList'); - const movieNum = document.getElementById('movieNum'); - const deleteBtn = document.getElementById('deleteBtn'); - - deleteBtn.onclick = function () { - - const num = parseInt(movieNum.value); - - const listItems = movieList.getElementsByTagName('li'); - - - if (isNaN(num) || num < 1 || num > listItems.length) { - alert('请输入有效的影片编号!'); - return; - } - - movieList.removeChild(listItems[num - 1]); - - movieNum.value = ''; - } - -``` - -### 4 - -```js -const itemNum = document.getElementById('itemNum'); - const sourceListSelect = document.getElementById('sourceListSelect'); - const targetListSelect = document.getElementById('targetListSelect'); - const moveBtn = document.getElementById('moveBtn'); - - moveBtn.onclick = function () { - const num = parseInt(itemNum.value); - - const sourceListId = sourceListSelect.value; - const targetListId = targetListSelect.value; - const sourceList = document.getElementById(sourceListId); - const targetList = document.getElementById(targetListId); - - const listItems = sourceList.getElementsByTagName('li'); - - const moveItem = listItems[num - 1]; - - targetList.appendChild(moveItem); - - - itemNum.value = ''; - }; -``` - -### 练习5 - -```js -const submitBtn = document.getElementById('submitBtn'); - const result = document.getElementById('result'); - const correctAnswer = '武当'; - - - submitBtn.onclick = function () { - - const radioButtons = document.getElementsByName('school'); - let selectedValue = null; - - for (let i = 0; i < radioButtons.length; i++) { - if (radioButtons[i].checked) { - selectedValue = radioButtons[i].value; - break; - } - } - - if (selectedValue === correctAnswer) { - result.textContent = '答案正确!'; - } else { - result.textContent = '答案错误,正确答案是:武当'; - } - }; -``` - -### 综合1 - -```js -const boldText = document.getElementById('boldText'); - const changeLink = document.getElementById('changeLink'); - - changeLink.onclick = function () { - const italicText = document.createElement('i'); - italicText.textContent = boldText.textContent; - boldText.parentNode.replaceChild(italicText, boldText); - }; -``` - -### 综合2 - -```js -const yearSelect = document.getElementById('yearSelect'); - const monthSelect = document.getElementById('monthSelect'); - const daySelect = document.getElementById('daySelect'); - - for (let year = 2020; year <= 2030; year++) { - const option = document.createElement('option'); - option.value = year; - option.textContent = year; - yearSelect.appendChild(option); - } - - for (let month = 1; month <= 12; month++) { - const option = document.createElement('option'); - option.value = month; - option.textContent = month; - monthSelect.appendChild(option); - } - - function getDaysInMonth(year, month) { - return new Date(year, month, 0).getDate(); - } - - function updateDays() { - const year = parseInt(yearSelect.value); - const month = parseInt(monthSelect.value); - const days = getDaysInMonth(year, month); - - daySelect.innerHTML = ''; - - for (let day = 1; day <= days; day++) { - const option = document.createElement('option'); - option.value = day; - option.textContent = day; - daySelect.appendChild(option); - } - } - - updateDays(); - yearSelect.onchange = updateDays; - monthSelect.onchange = updateDays; -``` - -### 综合3 - -```js -const emojiSelect = document.getElementById('emojiSelect'); - const emojiImg = document.getElementById('emojiImg'); - - const emojiMap = { - smile: '#', - happy: '#', - sad: '#' - }; - - emojiImg.src = emojiMap[emojiSelect.value]; - - emojiSelect.onchange = function() { - const selectedEmoji = this.value; - emojiImg.src = emojiMap[selectedEmoji]; - }; -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251205-Window\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251205-Window\345\257\271\350\261\241.md" deleted file mode 100644 index 00ab59e35d43ad63f6cbc5b65e7c98000135ba01..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251205-Window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,269 +0,0 @@ -# JS Window对象核心笔记 -## 一、核心定位 -- Window 是浏览器的全局顶级对象,所有全局变量、函数、内置对象(如 `document`、`console`)均挂载在 Window 下; -- 无需显式写 `window.` 即可访问其属性/方法(如 `window.document` 可简写为 `document`); -- 每个浏览器窗口/标签页对应一个独立的 Window 对象。 - -## 二、核心属性(常用) -```js -// DOM 相关 -window.document // 文档对象(核心,可简写为document) -// 窗口尺寸 -window.innerWidth // 视口宽度(不含滚动条) -window.innerHeight // 视口高度(不含滚动条) -// 导航/位置 -window.location // 地址栏对象(控制URL、跳转等) -window.history // 历史记录对象 -window.navigator // 浏览器/设备信息对象 -// 存储 -window.localStorage // 本地存储(持久化,无过期) -window.sessionStorage // 会话存储(关闭标签页失效) -// 其他 -window.screen // 屏幕信息对象 -window.console // 控制台对象 -``` - -## 三、核心方法(常用) -```js -// 弹窗类 -window.alert('提示内容') // 提示弹窗 -window.confirm('确认内容') // 确认弹窗(返回布尔值) -window.prompt('输入提示', '默认值') // 输入弹窗(返回输入内容/ null) -// 定时器 -window.setTimeout(() => {}, 1000) // 一次性定时器(毫秒) -window.setInterval(() => {}, 1000) // 周期性定时器 -window.clearTimeout(timerId) // 清除一次性定时器 -window.clearInterval(timerId) // 清除周期性定时器 -// 窗口操作 -window.open('URL', '新窗口名', 'width=300,height=200') // 打开新窗口 -window.close() // 关闭当前窗口(仅对window.open打开的窗口有效) -// 页面操作 -window.scrollTo(0, 0) // 滚动到指定位置 -window.reload() // 刷新页面 -``` - -## 四、全局作用域与Window的关系 -- 全局作用域中声明的变量/函数,会自动成为 Window 的属性/方法: -```js -var globalVar = 'hello' -console.log(window.globalVar) // 'hello' - -function globalFn() {} -console.log(window.globalFn === globalFn) // true -``` - -## 五、Window专属事件 -```js -// 监听页面所有资源加载完成 -window.addEventListener('load', () => { - // 执行操作(如获取图片真实尺寸) -}) - -// 监听窗口大小变化 -window.addEventListener('resize', () => { - console.log('窗口宽度:', window.innerWidth) -}) - -// 监听页面滚动 -window.addEventListener('scroll', () => { - console.log('垂直滚动距离:', window.scrollY) -}) -``` - -## 作业 - -```html - - 月亮之上 - - - - 退出登录 - - -
      -
      影片1:流浪地球
      -
      影片2:环太平洋
      -
      - -
      - 影片详情图 - -
      - - - - - - - - -
      00:00:00
      - - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\224\220\345\256\207\346\230\212/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 9df6f3f8deb87ee50e4586cbc5b7a30f8b67ea0e..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,55 +0,0 @@ -## 笔记 - -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(); // 普通刷新`
      `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 页`
      `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` 可被篡改,仅作为浏览器判断的参考,不可作为唯一依据。 diff --git "a/\345\224\220\345\256\207\346\230\212/20251210-style\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251210-style\345\257\271\350\261\241.md" deleted file mode 100644 index fc8db564301f85054c4af60bd76992e398f6a0cc..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251210-style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,125 +0,0 @@ -## 笔记 - -### 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 -

      这是一行即将变大的文本

      - - - - 示例 - - -
      -
      HTML/CSS讨论区
      -
      JavaScript讨论区
      -
      C语言讨论区
      -
      Java讨论区
      -
      Android讨论区
      -
      Python讨论区
      -
      - - -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251211-form\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251211-form\345\257\271\350\261\241.md" deleted file mode 100644 index a43a6387fd2c16253c4a725b8ca789b16c437b6b..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251211-form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,202 +0,0 @@ -## 笔记 - -### 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` | - - - -## 作业 - -```html - - - - - - - - - - C语言
      - 机械制图
      - 单片机
      - 自动控制
      - 传感器
      - 高等数学
      - 计算机基础
      - Oracle数据库
      - 商务英语
      - PLC设计基础
      -
      - - -

      电影《变相怪杰》的主演是谁?

      - 布拉德·皮特
      - 亚当·桑德勒
      - 金凯瑞
      - 杰夫·丹尼尔斯
      - -
      - - - 看电影
      - 听音乐
      - 演奏乐器
      - 打篮球
      - 看书
      - 上网
      - - - - - - 选择城市: - - - - -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251212-JSON.md" "b/\345\224\220\345\256\207\346\230\212/20251212-JSON.md" deleted file mode 100644 index 75e6300599cdae98896828e6d1816dadd8086d57..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251212-JSON.md" +++ /dev/null @@ -1,69 +0,0 @@ -## 笔记 - -### JSON 基础格式 - -#### 对象 - -- 结构:花括号 `{}` 包裹,内部是唯一字符串键 + 值的键值对,键值用 `:` 分隔,键值对间用 `,` 分隔 -- 示例: - -```json -{ - "name": "张三", - "age": 25, - "isMember": true,SS - "address": {"city": "北京", "area": "朝阳"} -} -``` - -#### 数组 - -- 结构:方括号 `[]` 包裹,值为任意合法 JSON 类型,值之间用 `,` 分隔 -- 示例: - -```json -[123, "测试", false, null, ["a", "b"], {"key": "value"}] -``` - -#### 简单数据类型 - -| 类型 | 规则 | 示例 | -| ------ | --------------------- | ------------- | -| 字符串 | 双引号包裹 | `"JSON 笔记"` | -| 数字 | 整数 / 浮点数,无引号 | `99`、`1.68` | -| 布尔值 | 仅 `true`/`false` | `false` | -| null | 表示空值,无引号 | `null` | - -### JSON的转换 - -#### 序列化(JS 对象 → JSON 字符串) - -- 方法:`JSON.stringify(value[, replacer[, space]])` -- 作用:将 JS 对象 / 数组 / 基本类型转为标准 JSON 字符串 -- 示例: - -```javascript -const jsObj = { name: "李四", age: 30, hobbies: ["跑步", "听歌"] }; -// 基础转换 -const jsonStr = JSON.stringify(jsObj); -// 格式化输出(2个空格缩进) -const prettyStr = JSON.stringify(jsObj, null, 2); -``` - -- 注意:函数、undefined 会被忽略,循环引用对象会报错 - -#### 反序列化(JSON 字符串 → JS 对象) - -- 方法:`JSON.parse(text[, reviver])` -- 作用:将合法 JSON 字符串转为 JS 对象 / 数组 -- 示例: - -```javascript -const jsonStr = '{"name":"李四","age":30}'; -// 基础解析 -const jsObj = JSON.parse(jsonStr); -// 解析时处理数据(如年龄+1) -const handledObj = JSON.parse(jsonStr, (key, val) => key === "age" ? val + 1 : val); -``` - -- 注意:JSON 字符串必须合法(如键为双引号),否则报错 \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251215.md" "b/\345\224\220\345\256\207\346\230\212/20251215.md" deleted file mode 100644 index d31cec4b67a8f84d39fc1360188696b4733579bf..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251215.md" +++ /dev/null @@ -1,38 +0,0 @@ -## 练习 -```js - /* 变量 常量和数据类型 */ - // 练习1 - let name = 'tyh'; - const school = 'xx职业学院'; - console.log(`"${name}""${school}"`); - - // 练习2 - function getTypeof() { - let value = "123"; - return typeof value; - } - let typeName = getTypeof(); - console.log(typeName); - - // 练习3 - let age = 18; - age = 20; - console.log(age); - - // 练习4 - let stuName = '李四'; - let stuAge = 19; - let grade = true; - - console.log(`姓名:"${stuName}",类型:"${typeof stuName}"`); - console.log(`年龄:"${stuAge}",类型:"${typeof stuAge}"`); - console.log(`及格:"${grade}",类型:"${typeof grade}"`); - - // 练习5 - let tyNull = null; - let tyUnderfined = undefined; - - console.log(`underfined 变量:${tyUnderfined} 类型:${typeof tyUnderfined}`); - console.log(`null 变量:${tyNull} 类型:${typeof tyNull}`); - -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251217.md" "b/\345\224\220\345\256\207\346\230\212/20251217.md" deleted file mode 100644 index c20ba3409a19446b9119dd3b7e864ecaaa5f6b8f..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251217.md" +++ /dev/null @@ -1,27 +0,0 @@ -## 练习 -```js -/* 流程控制 */ - //练习1 - let score = 85; - - if (score < 60) { - console.log('不及格'); - } - else if (score >= 60 && score < 80) { - console.log('及格'); - } - else if (score >= 80 && score < 90) { - console.log('良好'); - } - else if (score >= 90) { - console.log('优秀'); - } - - //练习2 - let num = 100; - let sum = 0; - for (let i = 1; i <= num; i++) { - sum += i; - } - console.log(sum); -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251218.md" "b/\345\224\220\345\256\207\346\230\212/20251218.md" deleted file mode 100644 index d4d6c4f55e3c9f9006a02028fcb4bc2b0d8113ff..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251218.md" +++ /dev/null @@ -1,75 +0,0 @@ -## 练习 -```js - /* 运算符与类型转换 */ - // 练习1 - let aa = 10; - let bb = 3; - const jia = aa + bb; - const jian = aa - bb; - const cheng = aa * bb; - const chu = aa / bb; - const yu = aa % bb; - - console.log(`加:${jia},减:${jian},乘:${cheng},除:${chu},余:${yu}`); - - // 练习2 - const cgstr = "123"; - const cgnum = 456; - - console.log(+cgstr); - console.log(`${cgnum}`); - - // 练习3 - function compare(a, b) { - const 大于 = a > b; - const 等于 = a === b; - const 不等于 = a != b; - return { 大于, 等于, 不等于 }; - } - - const compareNum = compare(5, 3); - console.log(compareNum); - - // 练习4 - let x = "5"; - let y = 5; - let z = "5"; - - const comparexy = x == y; - const comparexy1 = x === y; - const comparexz = x == z; - const comparexz1 = x === z; - - console.log(`x == y:${comparexy},x === y:${comparexy1},x == z:${comparexz},x === z:${comparexz1}`); - - // 练习5 - let agecar = 25; - let hasLiscence = true; - let canDrive = (agecar > 18 && agecar < 60) && hasLiscence == true; - - let answer = canDrive ? '可以开车' : '不可以开车'; - - console.log(canDrive + answer); - - // 练习6 - let stringFive = "5"; - let bool = true; - let stringTen = "10"; - let stringTwo = "2"; - - asr1 = stringFive + 3; - asr2 = Number(stringFive) - 3; - asr3 = bool + 1; - asr4 = Number(stringTen) * Number(stringTwo); - console.log(asr1, asr2, asr3, asr4); - - //练习7 - let string123 = "123"; - let string45 = "45"; - let hello = "hello"; - console.log(+string123, -string45, !!hello); - - //练习8 - let asr5 = 7 & 1; - console.log(~~5.8, asr5); -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251219.md" "b/\345\224\220\345\256\207\346\230\212/20251219.md" deleted file mode 100644 index ad02c84c3e0d0bdbcdd076550812216b8a1b2d10..0000000000000000000000000000000000000000 --- "a/\345\224\220\345\256\207\346\230\212/20251219.md" +++ /dev/null @@ -1,81 +0,0 @@ -## 练习 - -```js - //jQuery基础 - //练习1 - $(document).ready(function () { - console.log('jQuery已就绪'); - - }) - - // //练习2 - // let dom = $('#demo'); - // console.log(dom); - - // let jq = $(dom)[0]; - // console.log(jq); - - // let container = $('#box').css('color', 'blue').addClass('active').fadeIn('slow'); - // console.log(container); - - // let jqcon = $(container)[0]; - // console.log(jqcon); - - //jQuery选择器与选择 - - //练习1 - let item = $('.item').css('color', 'red'); - console.log(item); - - //练习2 - $(document).ready(function () { - $('ul li:first').css('background-color', 'blue'); - $('ul li:last').css('background-color', 'green'); - $('ul li:first,ul li:last').css('color', 'white'); - }) - - //练习3 - let span = $('#container').find('span'); - span.css('color', 'blue'); - console.log(span); - - //练习4 - let table = $('table tr:nth-child(2n)'); - table.css('background-color', 'green'); - - //练习5 - let item1 = $('.item1').each(function (index, element) { - $(this).text(`第${index + 1}个项目`); - }); - item1.css('display', 'inline') - - /* 事件处理 */ - //练习1 - $(document).ready(function () { - let originalTitle = $('#title').text(); - let newTitle = '新标题'; - - $('#changeBtn').click(function () { - $('#title').text( - $('#title').text() === originalTitle ? newTitle : originalTitle - ); - }) - }) - - //练习2 - $(function () { - $('#box').hover( - function () { - $(this).css({ - 'background': 'red' - }) - }, - function () { - $(this).css({ - 'background': 'gray' - }) - } - ) - - }) -``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115205933394.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115205933394.png" deleted file mode 100644 index a506a9dc1724dfc135d80245639a9c59ed96c839..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115205933394.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210240103.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210240103.png" deleted file mode 100644 index 123d457a9719eaf5927ada4c049b29f87014aca2..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210240103.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210812857.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210812857.png" deleted file mode 100644 index 0802576f3565ed2e909ed92385046892a9c63405..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210812857.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171034379.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171034379.png" deleted file mode 100644 index e7e35c066cf060ba0929c35f75a1d26b57d4762e..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171034379.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171135128.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171135128.png" deleted file mode 100644 index f7ff4bd18a0d7dac64bb3cb14da26b25459bb86b..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171135128.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182521642.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182521642.png" deleted file mode 100644 index d5c531bb8b94e9c3bae761956ec689aaad039626..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182521642.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182557810.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182557810.png" deleted file mode 100644 index 3323d26900ab925e11d9eeb62c63dc1191d82bf4..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182557810.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183112533.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183112533.png" deleted file mode 100644 index c968b7e16f361bb836165824af0a33806a13d88b..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183112533.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183125233.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183125233.png" deleted file mode 100644 index f614eb45faebfd5b98604c9dd7a6bcdfb5576c39..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183125233.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183315876.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183315876.png" deleted file mode 100644 index 2c490cff0df64d7a68da04bb405e86e0f1d23f6b..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183315876.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183403062.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183403062.png" deleted file mode 100644 index 6b5c084276199d5f0390b2de1f7c7a70dfbe1298..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183403062.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183724092.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183724092.png" deleted file mode 100644 index 8dd1f0168177098341ad8be7e27292d9955abfd3..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183724092.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183840506.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183840506.png" deleted file mode 100644 index f8d306c40c0680b2d31163159f75dc3958570d84..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183840506.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184105497.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184105497.png" deleted file mode 100644 index 5a2bff36048e7581880005342f940dd4c6d6897e..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184105497.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184542486.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184542486.png" deleted file mode 100644 index c449a2cc4c440054cc8a1f4128273648c0299dbf..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184542486.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130165740098.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130165740098.png" deleted file mode 100644 index 258ec5fe9c3be951c19965cdebf8ed7cd893a3d6..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130165740098.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170716090.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170716090.png" deleted file mode 100644 index b4bcb798637a704325dad6339f57eac2db1ae48a..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170716090.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170743073.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170743073.png" deleted file mode 100644 index 78136dce0dd1048f3ab88d3379332f8c86f25577..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170743073.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172735227.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172735227.png" deleted file mode 100644 index 31b0bc1bb0dfbef06f34c9f06e5652cbcc622849..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172735227.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172754452.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172754452.png" deleted file mode 100644 index 858c5a882fe19b9da28c6bdc52c14a3ae8db01f8..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172754452.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173108364.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173108364.png" deleted file mode 100644 index 8a2ec47170a9d980b3d0dc285a944abc5e047fb2..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173108364.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173154836.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173154836.png" deleted file mode 100644 index df60beef48e41c7e8b0d401367dca774c777f400..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173154836.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173215408.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173215408.png" deleted file mode 100644 index d84e28e7353b0941b34e782deed69aa5f4b9fc13..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173215408.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130174903644.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130174903644.png" deleted file mode 100644 index 5a6b2cb8557f2e92bc50610383582863fd9d1eec..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130174903644.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175446014.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175446014.png" deleted file mode 100644 index 077a36a3f3353d5409d480dceb4941f668c61dc0..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175446014.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175503429.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175503429.png" deleted file mode 100644 index 3ff92f7982b144a0440178f8ea1d56be3f0c1e49..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175503429.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175540398.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175540398.png" deleted file mode 100644 index f5822a66abff7b2c2b9078682d980a61a6223411..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175540398.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175832692.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175832692.png" deleted file mode 100644 index 029b38f8d99bb9c9108ec6f7f80de11cd5171176..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175832692.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175854088.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175854088.png" deleted file mode 100644 index 7d5b3db84e6680020ccc759f1da0c4233748da20..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175854088.png" and /dev/null differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130180042468.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130180042468.png" deleted file mode 100644 index de95f877218385eb48ba83b30194bccb757e5b24..0000000000000000000000000000000000000000 Binary files "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130180042468.png" and /dev/null differ diff --git "a/\345\247\234\345\215\216\351\233\250/20251110-js\345\237\272\347\241\200.md" "b/\345\247\234\345\215\216\351\233\250/20251110-js\345\237\272\347\241\200.md" deleted file mode 100644 index 8ea36397ad391a2440913deb236bb14ffb37b26f..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251110-js\345\237\272\347\241\200.md" +++ /dev/null @@ -1,22 +0,0 @@ -# 笔记 -## 行内式 - -## 嵌入式 - -## 外链式 - - -# 作业 -## 代码展示1 - -## 代码展示2 - \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251112-\346\225\260\346\215\256\347\261\273\345\236\213.md" "b/\345\247\234\345\215\216\351\233\250/20251112-\346\225\260\346\215\256\347\261\273\345\236\213.md" deleted file mode 100644 index be205458c2f247fd699f97812ad9ab03314844fc..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251112-\346\225\260\346\215\256\347\261\273\345\236\213.md" +++ /dev/null @@ -1,46 +0,0 @@ -# 笔记 -## - 1.js区分大小写 - 2.小驼峰 userName Age 第一个单词第一个字母小写 后面的单词首字母大写 - 3.i++ 使用i之后 加1 - ++i 使用i之前 加1 - 4==与===的区别 - “==”只判断值是否相等 - “===”先判断类型 在判断值是否相等 -# 作业 -## 作业1,2 - document.write("珠穆朗玛峰高度:8848.86m"); - document.write("
      "); - document.write("E:\\JaveScript\\Code\\demo"); -## 作业3,4 - let mar =17100000; - document.write("
      面积:") - document.write(mar) - document.write('km²
      ') - - let username ='郭靖'; - let gener ='男'; - let age=20; - let height=1.77; - let kunfu ='九阴真经,降龙十八掌'; - document.write('姓名:'+username +'
      '); - document.write("性别:"+gener +'
      '); - document.write('年龄:'+age +'
      '); - document.write('身高:'+height+'m'+"
      "); - document.write("武功:"+kunfu); - -## 实践与练习 - document.write('
      ')
      -    document.write("他强由他强,清风抚三岗\n他横任他横,明月照大江\n他自恨来他自恶,我自一口真气足\n         ——《九阳神功》")
      -    document.write('
      ') - - let d =(6500-500)-(6500-500-5000)*0.03; - document.write('该员工的实际收入为'+d+'元
      '); - - let dayFebruary; - if(2024 % 400 === 0||(2024 % 4 === 0 && 2024 % 100 !==0)){ - dayFebruary=29 - }else{ - dayFebruary=28 - } - alert('2024年2月有${dayFebruary}天'); diff --git "a/\345\247\234\345\215\216\351\233\250/20251113-\347\254\254\344\272\214\347\253\240\345\206\205\345\256\271.md" "b/\345\247\234\345\215\216\351\233\250/20251113-\347\254\254\344\272\214\347\253\240\345\206\205\345\256\271.md" deleted file mode 100644 index 889bc0d904caeca4814a95e8668ec1c151ed18e6..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251113-\347\254\254\344\272\214\347\253\240\345\206\205\345\256\271.md" +++ /dev/null @@ -1,48 +0,0 @@ -# 笔记 -## 一 - 语句:x=1+2 - 表达式:执行以后产生一个结果x==10 -## 二 - 两种类型:返回值为某一种类型的字符串 - console.log(typeof (fn)) - console.log(typeof obj) - 数据类型 返回值 - 数值 number - 字符串 string - 布尔值 boolean - undefined undefined - null object - 对象 object - 函数 function -## 三 - '', "",0.null,undefined 逻辑判断按false处理 - 其他为true -# 作业 -## 训练5 - -## 训练6 - -## 训练7 - - diff --git "a/\345\247\234\345\215\216\351\233\250/20251114-\347\254\254\344\270\211\347\253\240.md" "b/\345\247\234\345\215\216\351\233\250/20251114-\347\254\254\344\270\211\347\253\240.md" deleted file mode 100644 index 58f3a2b147fac3eed4f05f20157f4a6631c828ca..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251114-\347\254\254\344\270\211\347\253\240.md" +++ /dev/null @@ -1,196 +0,0 @@ -# 笔记 - -# 作业 -## 3实训一 - -## 实训二 - -## 实训三 - -## 实训四 - -## 实训五 - -## 实训六 - -## 实训七 - - -## 综练1 - -## 综练二 -

      请选择您的出生年月:

      - - - - -## 综练三 - - -
      - -## 电影院 - - - -
      万达影城7号厅
      \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251117-\347\254\254\345\233\233\347\253\240\345\207\275\346\225\260.md" "b/\345\247\234\345\215\216\351\233\250/20251117-\347\254\254\345\233\233\347\253\240\345\207\275\346\225\260.md" deleted file mode 100644 index e4d5d55d80b2932164e52c5436f05ba150c67741..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251117-\347\254\254\345\233\233\347\253\240\345\207\275\346\225\260.md" +++ /dev/null @@ -1,215 +0,0 @@ -## 笔记 -## 函数的定义 - 在一个页面定义的函数名称必须唯一 - 1.匿名函数定义: - let getNameById = funstion(){ - } - 2.第一种定义方式传统 原始方式 - funstion getNameById(){ - } - 3.箭头: - let getNameById = () = >{ - } - arguments:用于调用函数时传入的参数(实际参数) -## 函数的返回值 - 有return,则有返回值,而通常不为undefined - 无return,总是私下返回一个undefined -## 内置函数 - paresInt():将字符型转换为整型 - (首位为数字的字符串转换成数字,如果字符串不是以数字开头,将返回NaN) - - parseFloat():将字符型转换为浮点型 - - iSNaN():判断一个数值是否为NaN - 如果num为NaN,返回值为true,否则为false - - isFinite():判断一个数值是否有限 - - eval():求字符串中表达式的值 - - ecodeURI():将URL字符串进行编码 - - decodeURL():对已编码的URL字符串进行解码 -# 作业 -## 实训一 - -## 实训二 - -## 实训三 - -## 实训四 - -## 实训五 - -## 实训六 - -## 实训七 - -## 实训八 - -## 综练一 - -## 综练二 - -## 综练三 - - diff --git "a/\345\247\234\345\215\216\351\233\250/20251119-\347\254\254\344\272\224\347\253\240\345\257\271\350\261\241.md" "b/\345\247\234\345\215\216\351\233\250/20251119-\347\254\254\344\272\224\347\253\240\345\257\271\350\261\241.md" deleted file mode 100644 index 1cf06ecb7808f42ffb3c082baff24462d026641c..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251119-\347\254\254\344\272\224\347\253\240\345\257\271\350\261\241.md" +++ /dev/null @@ -1,19 +0,0 @@ -# 笔记 -## 创建对象 -let goods={ - name:"张三", - price:111, - number:3 -} - 添加属性:goods.brand="罗技" - 删除属性:delete good.number - 修改属性:good.name="李四" - ## Date - 1. 无参构造:获取当前时间 - const now = new Date(); - console.log(now); - 2. 日期字符串构造: - 参数为符合格式的日期字符串(推荐 YYYY-MM-DD 或 YYYY-MM-DDTHH:mm:ss) - const date3 = new Date("2025-11-22"); - const date4 = new Date("2025-11-22T10:30:00"); - const date5 = new Date("2025/11/22"); \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251120-\347\254\254\344\272\224\347\253\240.md" "b/\345\247\234\345\215\216\351\233\250/20251120-\347\254\254\344\272\224\347\253\240.md" deleted file mode 100644 index b8c83f03d7d434bf433038625bce10cc069d91e5..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251120-\347\254\254\344\272\224\347\253\240.md" +++ /dev/null @@ -1,77 +0,0 @@ -# 练习 -## 训练一 - -## 训练二 - -## 训练三 - - -## 综练一 - 请输入要生成随机数的位数: - -

      结果:

      - -## 综练二 -

      假星星从出生到现在已经度过了

      -

      - diff --git "a/\345\247\234\345\215\216\351\233\250/20251121-\347\254\254\345\205\255\347\253\240\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210.md" "b/\345\247\234\345\215\216\351\233\250/20251121-\347\254\254\345\205\255\347\253\240\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210.md" deleted file mode 100644 index 1e9acd77e018309594ec42ab0d0bac77328506a8..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251121-\347\254\254\345\205\255\347\253\240\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210.md" +++ /dev/null @@ -1,35 +0,0 @@ -# 笔记 -## 定义数组 - arrayQbject =[element1,element2,element3] - 1.数组中的元素不限数量 - 2.可以放任何东西 "数字""字符串""函数"... -## 数组的添加和删除 -1.concat():将其他数组连接到当前数组的尾端 - -2.shift():删除数组中的第一个元素,并返回删除元素的值 - -3.pop();删除并返回数组中最后一个元素 - -4.push():向数组的末尾添加一个或多个元素,并返回添加后的数组 - -5.unshift():向数组的头部添加一个或多个元素 - -6.reverse():颠倒数组中元素的顺序 - -7.sort():对数组的元素进行排序 - -8.slice():对已有的数组中返回选定的元素 - -9.toStrin():把数组转换成字符串 - -10.toLocaleString():将数组转换成本地字符串 - -11.join():将数组中的所有元素放入一个字符串中 - -12.toSource():代表对象的源代码 - -13.toString():把数组转化为字符串,并返回结果 - -14.valueOf():返回数组对象的原始值 - -15.splice():删除元素,并向数组中添加新元素 diff --git "a/\345\247\234\345\215\216\351\233\250/20251124-\347\254\254\344\270\203\347\253\240String\345\257\271\350\261\241.md" "b/\345\247\234\345\215\216\351\233\250/20251124-\347\254\254\344\270\203\347\253\240String\345\257\271\350\261\241.md" deleted file mode 100644 index a3d34ed356fcef445d8029c2b41be9e75975ae4c..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251124-\347\254\254\344\270\203\347\253\240String\345\257\271\350\261\241.md" +++ /dev/null @@ -1,103 +0,0 @@ -# 笔记 -## String对象 - 用于操作和处理文本串,获取字符串的长度,提取子字符串,转换大写或小写字符 -### 属性 - 1.length属性:获取当前字符串的长度(一个英文字符占一个字节,一个中文字符占两个字节) - 2.constructor属性:用于引用当前对象的构造函数(用于判断字符串类型) - 3.protoype属性:可以为字符串对象添加自定义的属性或方法 -### string对象的方法 - 1.charAt(index):获取指定位置字符 - const str = 'hello'; - console.log(str.charAt(2)); // "l" - console.log(str.charAt(10)); // ""(越界返回空) - - 2.indexOf(searchValue, startIndex):查找子串首次出现位置 - 返回子串的起始索引,未找到返回 -1; - startIndex 可选(默认 0):从指定位置开始查找。 - const str = 'hello world'; - console.log(str.indexOf('o')); // 4(首次出现的索引) - console.log(str.indexOf('o', 5)); // 7(从索引 5 开始查找) - console.log(str.indexOf('xyz')); // -1(未找到) - - 3.lastIndexOf(searchValue):查找子串最后出现位置 - 返回子串最后一次出现的索引,未找到返回 -1。 - const str = 'hello world'; - console.log(str.lastIndexOf('o')); // 7 -### 截取字符串 - 方法 语法 作用 - slice(start, end) str.slice(开始索引, 结束索引) 从 start 截取到 end(不包含 end) - substring(start, end) str.substring(开始索引, 结束索引) 与 slice 类似,但不支持负数索引 - substr(start, length) str.substr(开始索引, 截取长度) -### 字符串的大小写转换 - toUpperCase() str.toUpperCase() 转为大写字母 - toLowerCase() str.toLowerCase() 转为小写字母 -### 连接和拆分字符串 - split(separator) str.split(分隔符) 按分隔符分割字符串,返回数组 分隔符为 "" 时,分割为单个字符数组 - concat(str1, str2) str.concat(字符串1, 字符串2) 拼接多个字符串 等价于 + 运算符,但 + 更简洁 - -# 作业 -## 训练一 - -## 训练二 - -## 训练三 - -## 综训一 - -## 综训二 -
      - - -## 综训三 - diff --git "a/\345\247\234\345\215\216\351\233\250/20251126.\347\254\254\345\205\253\347\253\240\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\345\247\234\345\215\216\351\233\250/20251126.\347\254\254\345\205\253\347\253\240\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 1fe813166f196d700b7758617efe8bda8dc45a1b..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251126.\347\254\254\345\205\253\347\253\240\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,16 +0,0 @@ -# 笔记 -## 一、match():匹配正则并返回结果 - 作用:根据正则是否带 g(全局)标志,返回不同结果: - 带 g:返回所有匹配的子串数组(无分组信息); - 不带 g:返回第一个匹配的详细信息数组(含分组、索引、原字符串); - 无匹配返回 null。 -## 二、search():查找匹配的起始位置 - 串中第一个匹配正则的起始索引,无匹配返回 -1(不支持全局 g 标志,即使加 g 也只找第一个) -## 三、replace():替换匹配内容 - 作用将字符串中匹配正则的部分替换为指定内容,返回新字符串(原字符串不变)。 - 支持:直接替换字符串; - 函数动态替换(可利用匹配信息生成替换内容)。 -## 四、split():按正则分割字符串 - 作用:以正则匹配的子串为分隔符,将字符串分割为数组,支持限制分割次数。 - - diff --git "a/\345\247\234\345\215\216\351\233\250/20251127-\347\254\254\344\271\235\347\253\240\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225.md" "b/\345\247\234\345\215\216\351\233\250/20251127-\347\254\254\344\271\235\347\253\240\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225.md" deleted file mode 100644 index 1b0d0d5c4c8a4eff9faa9177885c8b84ade60e3f..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251127-\347\254\254\344\271\235\347\253\240\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225.md" +++ /dev/null @@ -1,109 +0,0 @@ -# 笔记 -## try{}catch(){}finally{} - 一、基本语法结构 - try { - // 可能会抛出错误的代码(核心执行逻辑) - // 这里的代码会被“监控”,如果发生错误,会立即跳转到 catch 块 - } catch (error) { - // 当 try 块中发生错误时,会执行这里的代码(错误处理逻辑) - // error 参数:包含错误信息的对象(默认自带 message、name 等属性) - } finally { - // 无论 try 块是否出错、catch 块是否执行,这里的代码一定会执行(收尾逻辑) - // 即使 try/catch 中有 return/break,finally 仍会先执行 - } - 二、核心作用拆解 - 1. try 块:“监控风险代码” - 存放可能抛出错误的代码(比如:字符串方法调用、数据类型转换、网络请求、DOM 操作等)。 - 如果代码正常执行:跳过 catch,直接执行 finally。 - 如果代码抛出错误:立即终止 try 内后续代码,跳转到 catch 处理错误。 - 2. catch 块:“处理错误” - 仅当 try 块抛出错误时才执行。 - error 参数(可自定义名称,如 err)是错误对象,常用属性: - error.message:错误描述(最常用,比如 “xxx is not a function”)。 - error.name:错误类型(比如 “TypeError”、“ReferenceError”)。 - error.stack:错误堆栈(显示错误发生的文件、行号,调试用)。 - 3. finally 块:“必做收尾” - 无论是否出错,必定执行(这是 finally 的核心特点)。 - 常用于:释放资源(关闭文件、清除定时器、取消网络请求)、清理 DOM、重置状态等。 -# 作业 -## 训练一 - -## 训练二 - -## 综练一 -
      -

      输入1~5的数字:

      - -
      - -
      - -## 综练二 -
      - -
      - -
      - -
      - diff --git "a/\345\247\234\345\215\216\351\233\250/20251128-\347\254\254\345\215\201\344\270\200\347\253\240\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\345\247\234\345\215\216\351\233\250/20251128-\347\254\254\345\215\201\344\270\200\347\253\240\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 5de4175c6370450979dfa992241b84309e027ba7..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251128-\347\254\254\345\215\201\344\270\200\347\253\240\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,14 +0,0 @@ -# 笔记 - -1. 取消事件传递(阻止冒泡 / 捕获) -通用方法(现代浏览器):event.stopPropagation() -阻止事件继续传播(无论冒泡还是捕获阶段)。 -兼容 IE8 及以下(已淘汰,可选):event.cancelBubble = true - -2. 取消事件默认处理 -通用方法(现代浏览器):event.preventDefault() -阻止浏览器默认行为(如 a 标签跳转、表单提交、输入框输入等)。 -兼容 IE8 及以下(已淘汰,可选):event.returnValue = false -特殊场景:onclick 等属性中直接返回 false(等价于同时取消传递 + 默认处理,不推荐)。 - -# 作业 diff --git "a/\345\247\234\345\215\216\351\233\250/20251201-\347\254\25411\347\253\240\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\345\247\234\345\215\216\351\233\250/20251201-\347\254\25411\347\253\240\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 24153137824d67dc587deee36387196afd008360..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251201-\347\254\25411\347\253\240\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,166 +0,0 @@ -# 笔记 -## 取消事件传递和默认处理 -e.stopPropagation()取消事件往下继续传递 -e.preventDefault ()取消浏览器的默认行为 -# 作业 -## 训练1 - - -
      - -
      - -## 训练2 - -

      中国的"国球"是()

      -

      A.篮球 B.排球 C.乒乓球 D.羽毛球

      -

      - - -## 训练3 - -
      - - -## 训练4 - -

      - - -## 训练5 - - - - - - -## 训练6 - - - - - -

      - - -## 训练7 - -
      - 用户名:
      - 密码:
      - - -
      - - - -## 训练8 - - - -
      -
      - -
      -
      -
      - - \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251203-12\347\253\240Document\345\257\271\350\261\241.md" "b/\345\247\234\345\215\216\351\233\250/20251203-12\347\253\240Document\345\257\271\350\261\241.md" deleted file mode 100644 index afa4d554a2ba3512aca5acb6701c9147c1219da9..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251203-12\347\253\240Document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,147 +0,0 @@ -# 笔记 -1.getElementById()方法返回具有指定ID的元素。 -2.getElementsByTagName()方法返回具有指定标签名的元素集合。 -3.getElementsByName()方法返回具有指定类名的对象集合。 -4.querySelector()方法返回匹配指定CSS选择器的第一个元素 -5.querySelectorAll()方法返回匹配指定CSS选择器的所有元素 -6.createElement()方法用于创建一个新的元素节点 -# 作业 -## 训练1 - - - -## 训练2 - - - - -## 训练3 - -
      -
      - - - -## 综训1 - -
      - -
      - - - - -## 综训2 - - - - -## 综训3 - - - - -
      -
      - - \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251204-13\347\253\240\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\247\234\345\215\216\351\233\250/20251204-13\347\253\240\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index ddc8e4efb071f331dc68b81c3cdf48d9ad542d5d..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251204-13\347\253\240\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,304 +0,0 @@ -# 笔记 -## DOM - 文档对象模型(DOM)是一种编程接口,它允许脚本语言如JavaScript与网页文档进行交互和操作。 - 节点(Node): DOM树中的每个组成部分都是一个节点,包括元素节点、文本节点、属性节点等。 - 元素(Element): 特定类型的节点,如HTML或SVG元素,它们具有属性和内容。 - 属性(Attribute): 元素的特性,如id、class等,可以通过DOM方法获取或设置。 - 事件(Event): DOM允许节点响应各种事件,如点击或键盘输入,事件处理程序可以附加到节点上以响应这些事件。 - -## 节点 - 创建节点: - 创建一个新的

      元素: - let para = document.createElement("p"); - 然后,可以创建一个文本节点并将其附加到这个元素节点上: - let node = document.createTextNode("这是一个新的段落。"); - para.appendChild(node); - 最后,将这个新的元素节点添加到现有的 DOM 树中: - let element = document.getElementById("div1"); - element.appendChild(para); - 将一个新的段落添加到 id 为 "div1" 的

      元素中。 - - 插入节点: - let para = document.createElement("p"); - let node = document.createTextNode("这是一个新的段落。"); - para.appendChild(node); - let element = document.getElementById("div1"); - let child = document.getElementById("p1"); - element.insertBefore(para, child); - - 删除节点: - 要删除一个元素节点,可以使用 removeChild() 方法。 - 首先需要找到要删除的元素及其父元素: - let parent = document.getElementById("div1"); - let child = document.getElementById("p1"); - parent.removeChild(child); - 这段代码将删除 id 为 "p1" 的段落。 - - 替换节点: - 可以使用 replaceChild() 方法来替换现有的节点。 - 例如,将一个新的段落替换掉现有的段落: - var para = document.createElement("p"); - var node = document.createTextNode("这是一个新的段落。"); - para.appendChild(node); - var parent = document.getElementById("div1"); - var child = document.getElementById("p1"); - parent.replaceChild(para, child); -# 作业 -## 训练1 - - - -
      - - - -
      -
      - - -## 训练2 - - - -
      -

      为歌曲添加歌名

      -

      轻轻敲醒沉睡的心灵,慢慢张开你的眼睛...

      - - -
      - -## 训练3 - - -
      -

      最新电影资讯

      -
        -
      • 《金蝉脱壳》两大动作巨星联手
      • -
      • 《阿甘正传》励志而传奇的一生
      • -
      • 《爱乐之城》爱情与梦想的交织
      • -
      • 《头号玩家》游戏梦想照进现实
      • -
      - - - -
      - -## 训练4 - - - -
      -
      -

      蔬菜列表

      -
        -
      • 白菜
      • -
      • 萝卜
      • -
      • 西红柿
      • -
      • 香蕉
      • - -
      -
      -

      水果列表

      -
        -
      • 苹果
      • -
      • 橙子
      • -
      • 草莓
      • -
      • 土豆
      • -
      -
      -
      - -## 训练5 - - - -
      -
      在《倚天屠龙记》中,张三丰是____派的掌门?
      -
      - - - - -
      - - 此题未答 -
      - diff --git "a/\345\247\234\345\215\216\351\233\250/20251205-14\347\253\240Window\345\257\271\350\261\241.md" "b/\345\247\234\345\215\216\351\233\250/20251205-14\347\253\240Window\345\257\271\350\261\241.md" deleted file mode 100644 index 944e2aa7a880ff4b06246bc14cdd1c721963787f..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251205-14\347\253\240Window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,22 +0,0 @@ -# 笔记 -## 窗口控制 - window.open(url, name, features):打开新窗口,返回新窗口的 window 对象。 - window.close():关闭当前窗口(通常只能关闭由 window.open 打开的窗口)。 - window.moveTo(x, y) / window.resizeTo(width, height):移动或调整窗口大小 -## 尺寸与位置 - 窗口尺寸: - window.innerWidth; // 窗口宽度(px) - window.innerHeight; // 窗口高度(px) - 屏幕相关: - window.screen.width; // 屏幕总宽度 - window.screen.height; // 屏幕总高度 - window.screen.availWidth; // 屏幕可用宽度(排除任务栏等) - 滚动位置: - window.scrollX; // 水平滚动距离(同 pageXOffset) - window.scrollY; // 垂直滚动距离(同 pageYOffset) - window.scrollTo(x, y); // 滚动到指定位置 - window.scrollBy(dx, dy); // 相对当前位置滚动` -## 对话框 - window.alert('提示信息'); // 警告框 - const confirmResult = window.confirm('确定要删除吗?'); // 确认框(返回布尔值) - const inputValue = window.prompt('请输入内容:', '默认值'); // 输入框(返回用户输入或null) \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251208-\347\254\25415\347\253\240\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\247\234\345\215\216\351\233\250/20251208-\347\254\25415\347\253\240\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index e74e016ea101736a47ce2b4ee4c81f015ea2ae96..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251208-\347\254\25415\347\253\240\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,20 +0,0 @@ -# 笔记 -## location对象 - assign(url) 跳转到指定 URL,可通过浏览器后退返回原页面(等同于修改href) - replace(url) 跳转到指定 URL,替换当前历史记录(无法通过后退返回原页面) - reload(force) 刷新页面:force=true 强制从服务器加载(不缓存),false 优先缓存 -## navigator - appCodeName 获取浏览器代码名 - appVersion 获取浏览器的版本号 -## screen - width 屏幕总宽度(像素,只读) - height 屏幕总高度(像素,只读) - availWidth 屏幕可用宽度(总宽度 - 系统任务栏 / 菜单栏占用,只读) - availHeight 屏幕可用高度(总高度 - 系统任务栏 / 菜单栏占用,只读) - colorDepth 屏幕颜色深度(现代浏览器均返回24,代表真彩色) - pixelDepth 屏幕像素深度(与colorDepth值一致,仅为兼容不同浏览器) - orientation 屏幕方向对象(仅移动设备生效),包含type(方向类型)、angle(旋转角度) { type: "portrait-primary", angle: 0 }(竖屏)/ { type: "landscape-primary", angle: 0 }(横屏) -## history对象 - back() 回退到上一条历史记录(等同于点击浏览器 “后退” 按钮) - forward() 前进到下一条历史记录(等同于点击浏览器 “前进” 按钮) - go(n) 跳转到指定偏移量的历史记录:n>0前进、n<0后退、n=0刷新当前页 \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251210-\347\254\25416\347\253\240Style\346\240\267\345\274\217.md" "b/\345\247\234\345\215\216\351\233\250/20251210-\347\254\25416\347\253\240Style\346\240\267\345\274\217.md" deleted file mode 100644 index 4368e3d782a0ce5b9f8f67d7597701c34f9746fa..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251210-\347\254\25416\347\253\240Style\346\240\267\345\274\217.md" +++ /dev/null @@ -1,149 +0,0 @@ -# 笔记 - -## 获取行内样式 - const box = document.getElementById('box'); - // 获取行内样式(仅行内,外部样式需用 getComputedStyle) - console.log(box.style.width); // 输出:如 '200px'(若行内设置过) - console.log(box.style.backgroundColor); // 驼峰命名 -## 设置行内样式 - // 单个样式设置 - box.style.width = '300px'; - box.style.height = '200px'; - box.style.backgroundColor = '#f00'; - box.style.fontSize = '16px'; - box.style.marginTop = '20px'; // CSS: margin-top - - // 批量设置(推荐用 cssText) - box.style.cssText = ` - width: 300px; - height: 200px; - background-color: #f00; - font-size: 16px; - `; -## 移除样式 - // 方式1:设为空字符串 - box.style.backgroundColor = ''; - - // 方式2:移除单个属性 - box.style.removeProperty('background-color'); // 注意:这里用 CSS 原生命名(连字符) - - // 方式3:清空所有行内样式 - box.style.cssText = ''; -# 作业 -## 训练1 - - - -
      pp
      - - -## 训练2 - - - - - -## 综训1 - - - -
      html
      -
      js
      -
      c语言
      -
      java
      -
      android
      -
      python
      - -## 综训2 - - - -
      - -
      - \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251211-17\347\253\240Form\345\257\271\350\261\241.md" "b/\345\247\234\345\215\216\351\233\250/20251211-17\347\253\240Form\345\257\271\350\261\241.md" deleted file mode 100644 index 51dab47144f7dfff2e14a366a12e7a1397573437..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251211-17\347\253\240Form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,157 +0,0 @@ -# 笔记 - -# 作业 -## 训练1 - - - - -## 训练2 - -
      - - - - -## 训练3 - -

      请选择课程

      - c语言
      - 机械制图
      - 单片机
      - 自动控制
      - 传感器
      - 高等数学
      - 计算机基础
      - 商务英语
      - -## 综训1 - -
      -

      电影《变相怪杰》的主演是谁?

      - 布拉德皮特 - 亚当桑德勒 - 金凯瑞 - 杰夫丹尼尔斯
      - -
      - -## 综训2 - - 台球 - 足球 - 篮球 - 乒乓球 - 羽毛球 - 橄榄球 - - - - - -## 综训3 - -

      选择省市

      - 省份: - -

      - 城市: - - - \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251212-Api.md" "b/\345\247\234\345\215\216\351\233\250/20251212-Api.md" deleted file mode 100644 index 6f7d5e8108f0650dd9e796bd698327d38d4306e5..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251212-Api.md" +++ /dev/null @@ -1,5 +0,0 @@ -# 笔记 - 从后端获取数据,渲染动态页面 - 向后端提交用户操作,实现交互功能 - 调用浏览器能力,增强页面体验 - 调用第三方服务,快速扩展功能 \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251215-.md" "b/\345\247\234\345\215\216\351\233\250/20251215-.md" deleted file mode 100644 index f5d48a8fa2d3f2b5e22875fc924e7829dc5c286e..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251215-.md" +++ /dev/null @@ -1,43 +0,0 @@ -# 练习 - -

      变量常亮与基础数据类型1-9

      - - - - - - - - \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251217-jQurey.md" "b/\345\247\234\345\215\216\351\233\250/20251217-jQurey.md" deleted file mode 100644 index 4ec5f87d0e4e9e38c8dd18ecd8e9618c2cad83a4..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251217-jQurey.md" +++ /dev/null @@ -1,118 +0,0 @@ -# 笔记 -## jQuery - -是一个js库,为了方便dom操作 - -和js引用一样,建议在body结束标签之前引用 - -使用“$”来使用jQuery库的能力,“$”符号实际是一个方法,当然方法在js中也是一个对象,所以其他也有一些属性 - -jquery获取到的是jquery,和原生js拿到的dom对象不同,但他们间可以相互转换 - - let div =$('div')拿到jquery对象 - -div[0]拿到dom对象 - -$(div[0])又可以重新转换为jquery对象 -## jquery 选择器与操作 - -基础选择器 - 标签选择器 - 类选择器 - id选择器 - -关系选择器、 - 子代选择器“ ” - 直接子代选择器“>” - 兄弟选择器“~” - 相邻兄弟选择器“+” - -高级选择器 - 属性选择器 - 伪类选择器“:” - 伪元素选择器“::” -## jquery事件处理 - - 直接绑定事件如jQuery.click(function(){}) - - 使用on绑定函数jQuery.on('click',function(){}) - - 使用trigger手动去触发某一些事件jQuery.trigger('click',function(){}) - - 文档元素都初始化完成后触发一个ready事件,其常用用法:$(function () {console.log('我是jQuery');}) - - 注意:无论是直接绑定,还是使用on绑定,其效果都相当于给这个事件`添加`绑定了一个函数 -## jquery动画与效果 - - 基础应用:隐藏和显示 show() hide() - - 进阶应用:fadeIn() fadeOut() - - 高级应用:animate() - -## jquery dom操作 - -新增 append给拿到的元素增加一个下级元素 - -移除remove 移除拿到的元素 - -text()拿到文本内容,text("要设置的内容")可以修改纯文本内容、 - -html()拿到包含标签的内容,html("要设置的内容")可以修改包含标签的内容 -### - 原生js拿到的结果,通常是dom对象 - jquery拿到的结果,通过是jquery对象 -# 练习 - - - - - - - - - - - - - - diff --git "a/\345\247\234\345\215\216\351\233\250/20251218-jQuery\344\272\213\344\273\266\344\270\216\345\212\250\347\224\273.md" "b/\345\247\234\345\215\216\351\233\250/20251218-jQuery\344\272\213\344\273\266\344\270\216\345\212\250\347\224\273.md" deleted file mode 100644 index 2d3495a6b7eb7e8d4d0e0e421d678e44e6be2363..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251218-jQuery\344\272\213\344\273\266\344\270\216\345\212\250\347\224\273.md" +++ /dev/null @@ -1,150 +0,0 @@ -## 练习 - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/\345\247\234\345\215\216\351\233\250/20251219-\347\237\245\350\257\206\346\242\263\347\220\206.md" "b/\345\247\234\345\215\216\351\233\250/20251219-\347\237\245\350\257\206\346\242\263\347\220\206.md" deleted file mode 100644 index ac3d3bc9e34ccdb639a7feb5a6ecc2bd58c5c066..0000000000000000000000000000000000000000 --- "a/\345\247\234\345\215\216\351\233\250/20251219-\347\237\245\350\257\206\346\242\263\347\220\206.md" +++ /dev/null @@ -1,119 +0,0 @@ -## Javascript基础 -### 开发环境与初体验 -- 编辑器 - - 记事本 - - vi/vim - - Emac - - Sublime Text4 - - Visual Studio Code - - Visual Studio - - dreaveweave -- 我们选定的编辑器是vscode - -### 变量、常量和基础数据类型 -- 使用var和let定义变量,后续让我们忘记var,只使用let -- const定义常量,常量名全大写 -- 基础数据类型 - - 字符串 - - 数字 - - null - - undefined - - boolean -- 进阶类型 - - 数组 - - 对象 - - 函数 - -### 运算符和数据类型转换 -- 算数运算符 - - `+ - * / %` - - `++ --` -- 逻辑运算符 - - `&&` - - `||` - - `!` -- 条件运算符 - - `let x=表达式?"值1":"值2"` -- 赋值运算符 - - `= =+ -=` -- 比较运算 - - `== 相对等于` - - `=== 绝对等于` -- 短路运算 - - `true || 表达式 ` - - `false && 表达式` -- 数据类型 - - `parseInt parseFloat` - - `将一个字符串*1转换为数值,将一个数字+空字符串则最后得到字符` - -### 流程控制 -- 判断 - - `if(){}` - - `if(){}else{}` - - `if(){}else if(){}else{}` - - `switch` -- 循环 - - `for 具体形式for(let i=0;i<10;i++)` - - `while` - - `do...while` -- 循环控制 - - `continue` - - `break` - -## 核心数据结构及用法 - -### 数组 -- 高阶函数 - - 数组中的一个函数f,它本身接受函数作为参数,就称这个函数f是个高阶函数 -- 不改变原数组 - - concat 合并数组 - - forEach 遍历 - - indexOf 查找元素,找到返回下标,找不到返回-1 - - map 补充 - - reduce 补充 - - every 补充 数组中所有元素只有一个不符合函数要求,就返回false,全部符合才返回true - - some 补充 数组中所有元素只要有一个符合函数要求,就返回true,全部不符合才返回false - - find 补充 返回符合条件的第一个元素,如果没有符合则返回undefined - - findIndex 补充 返回符合条件的第一个元素下标,如果没有符合则返回-1 - - filter 补充 给一个函数作为参数,这个函数返回true或者false,如果在当前元素上返回true,则将这个元素放入新数组返回 -- 改变原数组 - - sort 排序 - - reverse 颠倒 - - push 在数组尾部添加元素 - - pop 在数组尾部“弹出”元素 - - unshift 在数组头部添加元素 - - shift 在数组头部“弹出”元素 - - splice 可删除、可添加,可编辑 -### 对象 -- 键值对 -- 大括号包裹 -- 访问属性和值 -- 遍历 - -### 函数 - -### 对象 -- 函数名 小驼峰命名 -- 参数 可传可不传(不会因为不传参数而出错) -- 返回值 如果没有返回内容,默认返回undefined -- 函数定义三种方式 - - `function fn(){}` 传统函数定义 - - `function(){}` 匿名函数函数 - - `(a,b)=>{}` 箭头函数 -## Dom操作 -@@ -85,7 +168,15 @@ -- 伪元素选择器 - - 和元素的部分有关:: -### jQuery 事件处理 -- 直接绑定事件如jQuery.click(function(){}) -- 使用on绑定函数jQuery.on('click',function(){}) -- 使用trigger手动去触发某一些事件jQuery.trigger('click',function(){}) -- 文档元素都初始化完成后触发一个ready事件,其常用用法:$(function () {console.log('我是jQuery');}) -- 注意:无论是直接绑定,还是使用on绑定,其效果都相当于给这个事件`添加`绑定了一个函数 -### jQuery 动画与效果 -- 基础应用:隐藏和显示 show() hide() -- 进阶应用:fadeIn() fadeOut() -- 高级应用:animate() -### jQuery DOM 操作 -- 新增 - - append() \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260 \347\273\203\344\271\240.md" "b/\345\255\231\351\271\255\347\277\224/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260 \347\273\203\344\271\240.md" deleted file mode 100644 index 1678e51e6f5064e0a93cfc0f2c20776d3572e985..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260 \347\273\203\344\271\240.md" +++ /dev/null @@ -1,26 +0,0 @@ -## 笔记 -### js代码使用 -```html - - - -``` -1. 使用时可以直接在body里打js,也可以用外部链接的使用js -## 作业 -1. 输出老子名言 -```html - -``` -2. 输出明日学校网址 -```html -内html - - -``` -```js -alert("http://www.mingrisoft.com"); -``` \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251112-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" "b/\345\255\231\351\271\255\347\277\224/20251112-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\255\231\351\271\255\347\277\224/20251113-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" "b/\345\255\231\351\271\255\347\277\224/20251113-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\255\231\351\271\255\347\277\224/20251114-\350\257\276\345\240\202\347\254\224\350\256\260 \344\275\234\344\270\232.md" "b/\345\255\231\351\271\255\347\277\224/20251114-\350\257\276\345\240\202\347\254\224\350\256\260 \344\275\234\344\270\232.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\255\231\351\271\255\347\277\224/20251117-\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\255\231\351\271\255\347\277\224/20251117-\350\257\276\345\240\202\347\254\224\350\256\260.md" deleted file mode 100644 index d0a7f2f07ecdc10254604281e5ac572b688c2173..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251117-\350\257\276\345\240\202\347\254\224\350\256\260.md" +++ /dev/null @@ -1,11 +0,0 @@ -### -1. 函数概念及作用 -- 函数是具有特定功能的代码段,其核心作用是将特定功能的代码封装起来,提高代码的复用性‌ -- 通过函数封装,可以对外提供一个简单的接口,使代码结构更清晰。 -2. 函数的参数 -- 函数可以接受参数,包括形参(形式上的参数)和实参(具体的值)‌ -- 函数内部可以通过arguments对象访问所有传入的参数。 -3. 作用域 -- 全局作用域‌:在整个script标签或单独的js文件中有效,变量在函数内外均可访问‌ -- ‌局部作用域(函数作用域)‌:在函数内部声明的变量,只能在函数内部使用 -- 作用域链‌:内部函数可以访问外部函数的变量,这种链式查找结构称为作用域链‌ diff --git "a/\345\255\231\351\271\255\347\277\224/20251119-\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\255\231\351\271\255\347\277\224/20251119-\350\257\276\345\240\202\347\254\224\350\256\260.md" deleted file mode 100644 index b522f1b417cb792551f1d15a57ff4188b14144bd..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251119-\350\257\276\345\240\202\347\254\224\350\256\260.md" +++ /dev/null @@ -1,62 +0,0 @@ - - - - - Document - - - - - - - - - - - Document - - - - - - - \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251120-\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\255\231\351\271\255\347\277\224/20251120-\350\257\276\345\240\202\347\254\224\350\256\260.md" deleted file mode 100644 index aadbb07984bd4e1403aace5c6b69280ddc21ebad..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251120-\350\257\276\345\240\202\347\254\224\350\256\260.md" +++ /dev/null @@ -1,27 +0,0 @@ -### -1. 基础概念 -- 定义:键值对的集合,用{}定义 -- 特点:动态类型、可嵌套、原型继承 -2. 创建方式 -- let obj = { name: "Alice", age: 25 }; -- function Person(name) { - this.name = name; -} - let person = new Person("Bob"); -3. 常用操作 -- 访问属性‌:obj.name 或 obj["name"] -- ‌修改属性‌:obj.age = 30 -- 删除属性‌:delete obj.age -- 遍历属性‌:for (let key in obj) { console.log(key, obj[key]) } -4. 特殊方法 -- Object.keys():返回属性名数组 -- Object.values():返回属性值数组 -- Object.entries():返回键值对数组 -5. 原型链 -- 所有对象继承自 Object.prototype -- 通过 __proto__ 访问原型 -6. 注意事项 -- 避免直接修改内置对象原型 -- 使用 const 定义不可变对象 -- 注意浅拷贝与深拷贝的区别 -- 提示:实际开发中建议使用class语法糖(ES6+)进行面向对象编程 \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251121-\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\255\231\351\271\255\347\277\224/20251121-\350\257\276\345\240\202\347\254\224\350\256\260.md" deleted file mode 100644 index 3dc5533ad4e875c3f8426bada99c1e1c1d013bcd..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251121-\350\257\276\345\240\202\347\254\224\350\256\260.md" +++ /dev/null @@ -1,2 +0,0 @@ -### -1. \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251124-\350\257\276\345\240\202\347\254\224\350\256\260\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210.md" "b/\345\255\231\351\271\255\347\277\224/20251124-\350\257\276\345\240\202\347\254\224\350\256\260\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210.md" deleted file mode 100644 index 9fa894ebe5cf3e9202f02965b27aad7f5bc21cda..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251124-\350\257\276\345\240\202\347\254\224\350\256\260\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210.md" +++ /dev/null @@ -1,16 +0,0 @@ -### -1. 数据对象的方法及其说明 -- concat() 连接两个或更多的数组,并返回结果 -- pop() 删除并返回数据中的最后一个元素 -- push() 向数组的尾部添加一个或多个元素,并返回新的长度 -- shift() 删除并返回数组中的第一个元素 -- splice() 删除元素,并向数组中添加新元素 -- unshift() 向数组的头部添加一个或多个元素,并返回新的长度 -- reverse() 颠倒数组中元素的顺序 -- sort() 对数组中的元素进行排序 -- slice() 从某个已有的数组中返回选定的元素 -- toSource() 代表对象的源代码 -- toString() 把数组转换为字符串,并返回结果 -- toLocaleString() 把数组转换为本地字符串,并返回结果 -- join() 把数据中的所有元素放入一个字符串,元素间通过指定的分隔号进行分隔 -- valueOf() 返回数组对象的原始值 \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251126-\350\257\276\345\240\202\347\254\224\350\256\260\346\255\243\344\276\247\350\241\250\350\276\276\345\274\217.md" "b/\345\255\231\351\271\255\347\277\224/20251126-\350\257\276\345\240\202\347\254\224\350\256\260\346\255\243\344\276\247\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 9f87bbcb9b130b9a6f9def2724ebce9f6c8afc6f..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251126-\350\257\276\345\240\202\347\254\224\350\256\260\346\255\243\344\276\247\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,22 +0,0 @@ -### -正则表达式 -
      -1. 正则表达式基础 -- 正则表达式的作用 -- 正则表达式的作用 -2. 正则表达式语法 -- 模式匹配符 -- 定位符与原义字符 -- 限定符与选择匹配符 -- 字符匹配符 -- 分组组合与反向引用符 -- 实际应用 -3. RegExp对象 -- 创建RegExp对象 -- RegExp对象的属性 -- RegExp对象的方法 -4. String对象中的模式匹配方法 -- match()方法 -- search()方法 -- relace()方法 -- split()方法 \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251127-\350\257\276\345\240\202\347\254\224\350\256\260\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\347\250\213\345\272\217\350\260\203\350\257\225.md" "b/\345\255\231\351\271\255\347\277\224/20251127-\350\257\276\345\240\202\347\254\224\350\256\260\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\347\250\213\345\272\217\350\260\203\350\257\225.md" deleted file mode 100644 index dd65591ca073343d4a9740c0073d68963f21bb00..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251127-\350\257\276\345\240\202\347\254\224\350\256\260\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\347\250\213\345\272\217\350\260\203\350\257\225.md" +++ /dev/null @@ -1,28 +0,0 @@ -### -异常处理与程序调试 -
      -1. 异常处理 -- 异常类型 -- 触发onerror事件处理异常 -- 使用try...catch...finally语句处理异常 -2. 程序调试 -- 使用alert()语句调试 -- 使用write()语句调试 -- 使用抛出自定义异常消息调试 -
      -JavaScript高级编程 -
      -1. 构造函数与原型 -- 构造函数 -- 原型对象prototype -- construtor -- 扩展内部对象 -2. 类和对象 -- 创建类和实例 -- 类的构造函数 -- 在类中添加方法 -- 类的继承 -- 静态成员 -3. 模块 -- 模块概述 -- ECMAScript6中的模块 \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251128-\350\257\276\345\240\202\347\254\224\350\256\260\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\345\255\231\351\271\255\347\277\224/20251128-\350\257\276\345\240\202\347\254\224\350\256\260\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 9d9e3f7a59ab204f7f9531435f79a6d97f53ebf9..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251128-\350\257\276\345\240\202\347\254\224\350\256\260\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,25 +0,0 @@ -事件处理 -
      -1. 事件与事件处理概述 -- 事件与事件名称 -- JavaScript的常用事件 -- 事件处理程序的调用 -2. DOM事件模型 -- DOM事件模型的种类 -- 注册与移除事件监听器 -3. 鼠标与键盘事件 -- 鼠标的单击事件 -- 鼠标的按下和松开事件 -- 鼠标的移入和移除事件 -- 鼠标的移动事件 -- 键盘事件 -4. 页面相关事件 -- onload事件 -- onresize事件 -5. 表单相关事件 -- 获得焦点与失去焦点事件 -- 失去焦点修改事件 -- 表单提交与重置事件 -6. 编辑事件 -- 文本编辑事件 -- 对象拖放事件 \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251201-\350\257\276\345\240\202\347\254\224\350\256\260\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\345\255\231\351\271\255\347\277\224/20251201-\350\257\276\345\240\202\347\254\224\350\256\260\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index bd6d076b4982d965e09b2670f4d37ebb2af72380..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251201-\350\257\276\345\240\202\347\254\224\350\256\260\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,26 +0,0 @@ -### -事件处理 -
      -1. 事件与事件处理概述 -- 事件与事件名称 -- JavaScript的常用事件 -- 事件处理程序的调用 -2. DOM事件模型 -- DOM事件模型的种类 -- 注册与移除事件监听器 -3. 鼠标和键盘事件 -- 鼠标的单机事件 -- 鼠标的按下和松开事件 -- 鼠标的移入与移出事件 -- 鼠标的移动事件 -- 键盘事件 -4. 页面相关事件 -- onload事件 -- onresize事件 -5. 表单相关事件 -- 获得焦点与失去焦点事件 -- 失去焦点修改事件 -- 表单提交与重置事件 -6. 编辑事件 -- 文本编辑事件 -- 对象拖放事件 diff --git "a/\345\255\231\351\271\255\347\277\224/20251203-\350\257\276\345\240\202\347\254\224\350\256\260Document\345\257\271\350\261\241.md" "b/\345\255\231\351\271\255\347\277\224/20251203-\350\257\276\345\240\202\347\254\224\350\256\260Document\345\257\271\350\261\241.md" deleted file mode 100644 index 5c1e907622f908e2203897df62ceda2c4224d890..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251203-\350\257\276\345\240\202\347\254\224\350\256\260Document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,16 +0,0 @@ -### -Document对象 -
      -1. Document对象概述 -2. Document对象的常用属性和方法 -- 常用属性 -- 常用方法 -3. Document对象的应用 -- 设置文档前景色和背景色 -- 设置动态标题栏 -- 获取URL -- 获取当前文档的状态 -- 在文档中输出数据 -- 打开新文档并输出内容 -- 动态添加HTML标记 -- 获取文本框并修改其内容 \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251204-\350\257\276\345\240\202\347\254\224\350\256\260\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\255\231\351\271\255\347\277\224/20251204-\350\257\276\345\240\202\347\254\224\350\256\260\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 124f59bce9c35efb22848d692e7d379856a8720a..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251204-\350\257\276\345\240\202\347\254\224\350\256\260\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,18 +0,0 @@ -### -文档对象模型 -
      -1. Dom概述 -2. DOM节点属性 -- 访问指定节点 -- 遍历文档树 -3. 节点 -- 创建节点 -- 插入节点 -- 复制节点 -- 删除与替换节点 -4. 获取文档中的指定元素 -- 通过元素的id属性获取函数 -- 通过元素的class属性获取函数 -5. 与DHTML相对应的DOM -- innerHTML和innerText属性 -- outerHTML和outText属性 \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251205-\350\257\276\345\240\202\347\254\224\350\256\260Window\345\257\271\350\261\241.md" "b/\345\255\231\351\271\255\347\277\224/20251205-\350\257\276\345\240\202\347\254\224\350\256\260Window\345\257\271\350\261\241.md" deleted file mode 100644 index 19ac1db293a4fddf060959b599cb2ed18d299e0f..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251205-\350\257\276\345\240\202\347\254\224\350\256\260Window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,19 +0,0 @@ -### -Window -
      -1. Window对象 -- 属性 -- 方法 -- 使用 -2. 对话框 -- 警告对话框 -- 确认对话框 -- 提示对话框 -3. 窗口事件 -4. 控制窗口 -- 移动窗口 -- 窗口滚动 -- 设置超时 -5. 窗口的打开与关闭 -- 打开窗口 -- 关闭窗口 \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251208-\350\257\276\345\240\202\347\254\224\350\256\260\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\255\231\351\271\255\347\277\224/20251208-\350\257\276\345\240\202\347\254\224\350\256\260\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index ac8fe4726eab29e11b7544b613d82ef12743acae..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251208-\350\257\276\345\240\202\347\254\224\350\256\260\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,13 +0,0 @@ -### -浏览器对象模型 -1. location对象 -- location对象的属性 -- location对象的方法 -2. navigator对象 -3. screen对象 -4. history对象 -- history对象的属性 -- history对象的方法 -2. location对象既是Window对象的属性,也是Document对象的属性。它提供了当前窗口中加载文档的信息,以及通常的导航功能 -3. location()对象的方法主要用于跳转或重新加载页面。比较常用的两个方法是assign()和reload()。 -4. 利用history对象可以实现访问窗口历史。history对象是一个只读的URL字符串数组,该对象主要用来存储最近访问网页的URL地址列表 \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251210-\350\257\276\345\240\202\347\254\224\350\256\260Style\345\257\271\350\261\241.md" "b/\345\255\231\351\271\255\347\277\224/20251210-\350\257\276\345\240\202\347\254\224\350\256\260Style\345\257\271\350\261\241.md" deleted file mode 100644 index e056cdab25d698062c2e9a08af047fcc2a85f673..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/20251210-\350\257\276\345\240\202\347\254\224\350\256\260Style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,14 +0,0 @@ -### -Style对象 -
      -1. Style对象 -2. 样式标签属性和样式属性 -3. 常用样式属性操作 -- 颜色和背景属性:backgroundColor属性用于设置或检索对象的背景颜色,其对应的样式标签属性为background-color属性 -- 边框属性:borderColor属性用于设置或检索对象的边框颜色,其对应的样式标签属性为border-color属性 -- 定位属性:操作DOM元素的CSS定位(position 相关) -
      获取/设置元素在页面中的坐标位置(如偏移量、滚动位置等) -- 字体属性:在JavaScript中,字体属性主要用于通过脚本动态控制DOM元素的字体样式(如字体类型、大小、粗细、颜色、行高、对齐方式等),核心是操作元素的style对象(对应css字体相关属性),也可通过getComputedStyle获取最终渲染的字体样式 -- 表格布局属性:在JavaScript中表格布局属性主要用于动态控制HTML表格(//
      /)的布局、样式与结构,核心分为两类: -
      操作表格的css布局属性(如表格宽度、单元格间距、边框合并、列宽规则等) -
      操作表格DOM结构的属性(如行数、列数、单元格索引、行列的增删改查) diff --git "a/\345\255\231\351\271\255\347\277\224/20251211-\350\257\276\345\240\202\347\254\224\350\256\260Form\345\257\271\350\261\241.md" "b/\345\255\231\351\271\255\347\277\224/20251211-\350\257\276\345\240\202\347\254\224\350\256\260Form\345\257\271\350\261\241.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\255\231\351\271\255\347\277\224/20251212-\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\255\231\351\271\255\347\277\224/20251212-\350\257\276\345\240\202\347\254\224\350\256\260.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\255\231\351\271\255\347\277\224/20251215-\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\255\231\351\271\255\347\277\224/20251215-\350\257\276\345\240\202\347\254\224\350\256\260.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\255\231\351\271\255\347\277\224/20251217-\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\255\231\351\271\255\347\277\224/20251217-\350\257\276\345\240\202\347\254\224\350\256\260.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\255\231\351\271\255\347\277\224/20251218-\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\255\231\351\271\255\347\277\224/20251218-\350\257\276\345\240\202\347\254\224\350\256\260.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\255\231\351\271\255\347\277\224/20251219-\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\255\231\351\271\255\347\277\224/20251219-\350\257\276\345\240\202\347\254\224\350\256\260.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\255\231\351\271\255\347\277\224/\344\275\234\344\270\232.md" "b/\345\255\231\351\271\255\347\277\224/\344\275\234\344\270\232.md" deleted file mode 100644 index 0e027cecf1e482bc59d604e7f0dd8ca0e3107700..0000000000000000000000000000000000000000 --- "a/\345\255\231\351\271\255\347\277\224/\344\275\234\344\270\232.md" +++ /dev/null @@ -1,1191 +0,0 @@ -20251114-流量控制+练习: - - - - - Document - - - - - - - - -3. - - - - - -20251117-循环判断+练习: -1. - - - - - Document - - - - - -2. - - - - - Document - - - - - -20251120-对象+练习 - -3. - - - - - Document - - - - - - - -20251124 -1. - - - - - Document - - - - - - -2. - -3. - -4. - -5. - - - - Document - - - - - - -
      - - -6. - -7. - -20251217 -1. - - - - - Document - - - - - - - -2. - - - - - Document - - -
      - -
      - - - -3. - - - - - Document - - -

      请选择课程

      -
      - C语言 - 机械制图 - 单片机 - 自动控制 - 传感器 - 高等数学 - 计算机基础 - Oracle数据库 - 商务英语 - PLG设计基础 -
      - - - -4. -综合练习1. - - - - - Document - - - 电影的<变相怪杰>的主演是谁? -
      - 布拉德皮特 - 亚当桑德勒 - 金凯特 - 杰夫丹尼 -
      - -
      -
      - -
      - - - -5. -综合练习2 - - - - - Document - - -
      - - - - - - -
      - - - -
      - - - -6. -综合练习3 -选择城市: -
      - - -
      - - -20251217-2 -1. -练习一 - - - - - Document - - - - - - - -2. -练习二 - - - - - Document - - - - - - - -3. -综合练习1 - - - - - Document - - - - - - -20251217-3 -1. -训练一 - - - - - Document - - - - - - -2. -训练二 - - - - - Document - - - - - -3. -训练三 - - - - - Document - - - - - - - - -4. -综合练习1 -
      - - - -
      - -5. -综合练习2 - - - - - Document - - -超链接 -
      - - -
      - - - - - -6. -综合练习3 - - - - - Document - - - - -
      - - - -20251210 -1. - - - - - Document - - -

      这是一行文本

      - - - - -2. - - - - - Document - - - -
      - - - - - -3. - - - - - Document - - - -

      HTML/CSS讨论区

      -
      JavaScript讨论区
      -
      c语言讨论区
      -
      Java讨论区
      -
      Android讨论区
      -
      Python讨论区
      - - - -js基础 - - - - - Document - - - - - - - 综合练习1 - - - - - -js入门 - - - - - - Document - - - - alert("http://www.mingrisoft.com") - - -运算符 - - - - - Document - - - - - - - - - - - - - - - Document - - - -
      - -
      - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251110-JavaScript-\347\273\203\344\271\240.md" "b/\345\262\263\345\215\223\351\230\263/20251110-JavaScript-\347\273\203\344\271\240.md" deleted file mode 100644 index 2584777db9eed499c2576f2786bd89d733460fb2..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251110-JavaScript-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - 第一个Javascript程序 - - - - alert("http://www.mingrisoft.com") - - - - diff --git "a/\345\262\263\345\215\223\351\230\263/20251112-JavaScript\347\273\203\344\271\240.md" "b/\345\262\263\345\215\223\351\230\263/20251112-JavaScript\347\273\203\344\271\240.md" deleted file mode 100644 index 9bc10cc1b5f9bf53480214ffe0b59a2dd34c0d5f..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251112-JavaScript\347\273\203\344\271\240.md" +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - 课后练习 - - - - - -

      - - - - - - - - - - - - - - - - - Document - - - - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251114-JavaScript\347\273\203\344\271\240.md" "b/\345\262\263\345\215\223\351\230\263/20251114-JavaScript\347\273\203\344\271\240.md" deleted file mode 100644 index aef07214a15450711404d11292a7921e9277d625..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251114-JavaScript\347\273\203\344\271\240.md" +++ /dev/null @@ -1,273 +0,0 @@ - - - - - - - panduan - - - - - - - - - - - - - - - Document - - - - - - - - - - - - - - - Document - - - - - - - - - - - - - - - - - - - - - - - - - - - - 流程控制语句 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 10X10 - - - -
      - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251117-JavaScript\347\254\254\345\233\233\347\253\240\345\207\275\346\225\260.md" "b/\345\262\263\345\215\223\351\230\263/20251117-JavaScript\347\254\254\345\233\233\347\253\240\345\207\275\346\225\260.md" deleted file mode 100644 index d533588626ef9fd4bb41df4cb429a1f574c8b170..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251117-JavaScript\347\254\254\345\233\233\347\253\240\345\207\275\346\225\260.md" +++ /dev/null @@ -1,39 +0,0 @@ -# 笔记 -## 函数的定义 - 在一个页面定义的函数名称必须唯一 - 1.匿名函数定义: - let getNameById = funstion(){ - - } - - 2.第一种定义方式传统 原始方式 - funstion getNameById(){ - - } - 3.箭头: - let getNameById = () = >{ - - } - arguments:用于调用函数时传入的参数(实际参数) -## 函数的返回值 - 有return,则有返回值,而通常不为undefined - 无return,总是私下返回一个undefined - - -# 作业 -## 实训一 - -## 实训二 - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251119-Javascript\347\273\203\344\271\240.md" "b/\345\262\263\345\215\223\351\230\263/20251119-Javascript\347\273\203\344\271\240.md" deleted file mode 100644 index da4b62363f82c94842efb4ca0ba17b1a93bc178c..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251119-Javascript\347\273\203\344\271\240.md" +++ /dev/null @@ -1,138 +0,0 @@ - - - - - - 练习3 - - - - - - - - - - - - - 练习4 - - - - - - - - - - - - - - 练习5 - - - - - - - - - - - - - - - 练习6 - - - - - - - - - - - - - 练习7 - - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251120-Javascript\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" "b/\345\262\263\345\215\223\351\230\263/20251120-Javascript\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" deleted file mode 100644 index eaf46dc8e826bb8c83a3ddcfbe22ae3d2329f2d5..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251120-Javascript\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" +++ /dev/null @@ -1,116 +0,0 @@ - - - - - - 综合练习1 - - - - - - - - - - - - - 综合练习2 - - - - - - - - 综合练习1 - - - - - - - - - - - - - - 综合练习3 - - - -

      短宽度空白表格(5行6列)

      -
      - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251121-Javascript\347\254\224\350\256\260\347\273\203\344\271\240.md" "b/\345\262\263\345\215\223\351\230\263/20251121-Javascript\347\254\224\350\256\260\347\273\203\344\271\240.md" deleted file mode 100644 index 76311630d84a7176b1530f640bac05b1ae08a48a..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251121-Javascript\347\254\224\350\256\260\347\273\203\344\271\240.md" +++ /dev/null @@ -1,162 +0,0 @@ - - - - - - Document - - - - - - - - - - - - - Document - - - - - - - - - - - - - Document - - - - - - - - - - - - - Document - - - - - - - - - - - - - Document - - -

      请输入要生成随机数的位数:

      -
      - - -
      - - - - - - - - - - - Document - - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251124-JavaScript\346\225\260\347\273\204string.md" "b/\345\262\263\345\215\223\351\230\263/20251124-JavaScript\346\225\260\347\273\204string.md" deleted file mode 100644 index 99a00f0b2220fed9eaf8a9d3f8ab1ab06da08b6b..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251124-JavaScript\346\225\260\347\273\204string.md" +++ /dev/null @@ -1,190 +0,0 @@ - - - - - - 综合练习1 - - - - - - - - - - - - - - 综合练习2 - - - -

      2022年国内手机销量排行榜(前五名)

      -
      - -
      -
      排名
      -
      品牌
      -
      市场份额
      -
      -
      - - - - - - - - - - - - - - 手机号检索(含0431) - - - -

      通讯录 - 查找含「0431」的手机号

      -
      -

      全部联系人手机号:

      -

      含「0431」的手机号:

      -
      - - - - - - - - - - - - 截取QQ邮箱中的QQ号 - - - -

      QQ邮箱:4006****66@qq.com

      -
      - 截取的QQ号: -
      - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251126-JavaScript\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\345\262\263\345\215\223\351\230\263/20251126-JavaScript\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 974f928e6a20b94562c00b340a01b6a526971cd3..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251126-JavaScript\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - Document - - - - - - - - - - - - - - Document - - - - - - - - - - - - - - Document - - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251127-JavaScript\345\274\202\345\270\270\345\244\204\347\220\206.md" "b/\345\262\263\345\215\223\351\230\263/20251127-JavaScript\345\274\202\345\270\270\345\244\204\347\220\206.md" deleted file mode 100644 index 4a9bb532989039b71e3a57aac5adbb4cf9e1c804..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251127-JavaScript\345\274\202\345\270\270\345\244\204\347\220\206.md" +++ /dev/null @@ -1,233 +0,0 @@ - - - - - - Document - - - - - - - - - - - - - - Document - - - - - - - - - - - - - 数组字母查询 - - - -
      - - - - - - -
      - - - - - - - - - - - - 注册信息验证 - - - -
      -

      注册信息验证

      -
      - -
      - - -
      - -
      - - -
      - - -
      -
      - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251128-JavaScript\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\345\262\263\345\215\223\351\230\263/20251128-JavaScript\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index a0f73c705afc7d85d76b36d3a1534dc4a6775b46..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251128-JavaScript\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,198 +0,0 @@ - - - - - - Document - - -
      - -function visible(cursor, i) { - if (i == 0) { - cursor.style.border = "none" - } else { - cursor.style.border = "5px solid black" - } - } - - - - - - - - - - - Document - - -

      中国的“国球”是( )

      -
      -
      A.篮球
      -
      B.排球
      -
      C.乒乓球
      -
      D.羽毛球
      -
      - - function choose(event) { - const key = event.key.toUpperCase(); - if (key === "C") { - document.getElementById('text').textContent = '乒乓球'; - alert('正确!'); - } else if (['A','B','D'].includes(key)) { - document.getElementById('text').textContent = event.target?.dataset.key || key; - alert('错误!'); - } - } - document.onkeydown = choose; - - - - - - - - - - - Document - - - function getTime() { - let now = new Date(); - const formatTime = now.toLocaleString('zh-CN'); - alert(`当前时间:${formatTime}`); - } - - - - - - - - - - - Document - - - function getWindowSize() { - let width = window.innerWidth; - let height = window.innerHeight; - alert(`窗口宽度:${width}px\n窗口高度:${height}px`) - } - - - - - - - - - - - - Document - - - function color(event) { - let obj = event.target; - obj.style.background = "red"; - obj.onblur = function () { - obj.style.background = "blue"; - }; - } -const inputs = document.querySelectorAll('select, input'); - inputs.forEach(input => input.onfocus = color); - - - - - - - - - - - Document - - - let yearSelect = document.getElementById('year'); - let currentYear = new Date().getFullYear(); - for (let i = currentYear; i >= 1900; i--) { - let option = document.createElement('option'); - option.value = i; - option.textContent = i + '年'; - yearSelect.appendChild(option); - } - - function showBirth() { - let year = yearSelect.value; - let month = document.getElementById('month').value; - let resultDom = document.getElementById('result'); - - if (year && month) { - let formatMonth = month.toString().padStart(2, '0'); - resultDom.textContent = `你的出生年月是:${year}年${formatMonth}月`; - } else { - resultDom.textContent = ''; - } - } - - -
      - - - - - - - - - - - - - - Document - - - function showBirth() { - let year = yearSelect.value; - let month = document.getElementById('month').value; - let resultDom = document.getElementById('result'); - - if (year && month) { - let formatMonth = month.toString().padStart(2, '0'); - resultDom.textContent = `你的出生年月是:${year}年${formatMonth}月`; - } else { - resultDom.textContent = ''; - } - } - - function resetBirth() { - document.getElementById('year').value = ''; - document.getElementById('month').value = ''; - document.getElementById('result').textContent = ''; - return true; - } - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251201-JavaScript.md" "b/\345\262\263\345\215\223\351\230\263/20251201-JavaScript.md" deleted file mode 100644 index ce39920c1204b165c5799b8e8aef11dcb106f030..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251201-JavaScript.md" +++ /dev/null @@ -1,101 +0,0 @@ - - - - -
      -
      -
      - -
      定义的文本
      - -
      - - - - - -

      第一题

      -
      - 欢迎购买明日科技图书 -
      - -

      第二题

      - - -

      第三题

      - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251203-JavaScript.md" "b/\345\262\263\345\215\223\351\230\263/20251203-JavaScript.md" deleted file mode 100644 index 74f0d1be7e56f16ce4fb5c8af6a45e0d2ce3f764..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251203-JavaScript.md" +++ /dev/null @@ -1,175 +0,0 @@ - - - - - - 主题切换 - - - - -

      李白《行路难·其一》

      -

      金樽清酒斗十千,玉盘珍羞直万钱。

      -

      停杯投箸不能食,拔剑四顾心茫然。

      -

      欲渡黄河冰塞川,将登太行雪满山。

      -

      闲来垂钓碧溪上,忽复乘舟梦日边。

      -

      行路难,行路难,多歧路,今安在?

      -

      长风破浪会有时,直挂云帆济沧海。

      - - - - - - - - - - - - - Document - - - - - 打开图片对话框 -
      -
      - - 示例图片 -
      -
      - - - - - - - - - - - - - - - 添加用户头像 - - - - -
      - - - - diff --git "a/\345\262\263\345\215\223\351\230\263/20251204JavaScript.md" "b/\345\262\263\345\215\223\351\230\263/20251204JavaScript.md" deleted file mode 100644 index a130911813b88d127c5674775ac355935048fcec..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251204JavaScript.md" +++ /dev/null @@ -1,148 +0,0 @@ - - - - - - 训练1 - - - -
      - - -
      - - - - - - - - - - - - - - - 训练2 - - - - - - -
      -
      - -
      - 我们紧紧相拥,头也不抬
      - 因为不想告别,就悄然离开
      - 不用认真的说,多舍不得你
      - 每一个未来,都有人在
      - 那你无需感慨,我别徘徊
      - 因为谁也没有想过再更改
      - 谁也没有想过再想回来 - - - - - - - - - - - - - - - 删除影片信息 - - -
      -
        -
      • 1.《金蝉脱壳》两大动作巨星联手
      • -
      • 2.《阿甘正传》励志而传奇的一生
      • -
      • 3.《爱乐之城》爱情与梦想的交织
      • -
      • 4.《头号玩家》游戏梦想照进现实
      • -
      -
      - - 输入影片咨询编号: - - - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251205JavaScript-widow.md" "b/\345\262\263\345\215\223\351\230\263/20251205JavaScript-widow.md" deleted file mode 100644 index 08c8251cedef093f254f726a2e16ad91d8bd7ed4..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251205JavaScript-widow.md" +++ /dev/null @@ -1,257 +0,0 @@ - - - - - - Document - - - -

      训练1:弹出警告对话框

      -

      播放歌曲:

      - - - - -
      - -

      训练2:弹出确认对话框

      -

      当前用户:游客

      - 退出登录 - -
      - -

      训练3:打开影片详情页面

      -

      点击图片查看详情:

      - 影片海报 -

      《流浪地球》

      - -
      - -

      训练4:自动关闭广告窗口

      - - - - - - - -

      简单计时器

      -
      00:00
      - - - -

      下降的窗口

      - - - - - - - - - -

      综合练习1:计算两个数的和并判断结果

      - -
      - -
      - -

      综合练习2:选择选项并输出结果

      - -
      - -
      - -

      综合练习3:循环显示图片

      - - -
      - - - - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" "b/\345\262\263\345\215\223\351\230\263/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" deleted file mode 100644 index 6925f5b08ea59bcf916e4629f0816b090aa5fde0..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - Document - - - - - - - - - - - - - - - Document - - - - - - - - - - - - - - Document - - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251210-style\345\257\271\350\261\241.md" "b/\345\262\263\345\215\223\351\230\263/20251210-style\345\257\271\350\261\241.md" deleted file mode 100644 index 16e92e1ea936987a530dff34ef8a7f874aa9e724..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251210-style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,242 +0,0 @@ - - - - - - Document - - -
      文本
      - - - - - - - - - - - - Document - - - - 示例图片 - - - - - - - - - - - - Document - - - - - - - - - - - - - - - 图片自由摆放(三角形初始位置) - - - - - 图片1 - 图片2 - 图片3 - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251211-form\345\257\271\350\261\241.md" "b/\345\262\263\345\215\223\351\230\263/20251211-form\345\257\271\350\261\241.md" deleted file mode 100644 index 21b6d09bc0d9dcb5ae16eca2c1b8123be56c001f..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251211-form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,337 +0,0 @@ - - - - - - 自动取票机 - - - -

      万达影城取票机

      - 姓名:

      - 兑换码:

      - - -
      - - - - - - - - - - - - - 协议调整 - - - - - - - - - - - - - - - - - - - - - 选课限制 - - - -
      -

      课程选择(最多选6门)

      - -
      C语言
      -
      机械制图
      -
      单片机
      -
      自动控制
      -
      传感器
      -
      高等数学
      -
      计算机基础
      -
      Oracle数据库
      -
      商务英语
      -
      PLC设计基础
      - -
      最多只能选择6门课程!
      -
      - - - - - - - - - - - - - - Document - - - -
      -

      电影《变相怪杰》的主演是谁?

      -
      - 布拉德·皮特 - - 亚当·桑德勒 - - 金·凯瑞 - - 杰夫·丹尼尔斯 -
      - - - -
      - - - - - - - - - - - - - Document - - - - - 看电影 - 听音乐 - 演奏乐器 - 打篮球 - 看书 - 上网 -
      - - - - - - - - - - - - - - - - - - - Document - - - - 选择城市: - - - - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251212-josn.md" "b/\345\262\263\345\215\223\351\230\263/20251212-josn.md" deleted file mode 100644 index 5c96164d92a35be7aca26c5eb742073f3fac50b4..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251212-josn.md" +++ /dev/null @@ -1,37 +0,0 @@ -一、什么是Json - -1、 - -(1)JSON(JavaScript Object Notation, JS对象标记)是一种轻量级的数据交换格式,目前使用特别广泛。 - -(2)采用完全独立于编程语言的文本格式来存储和表示数据。 - -(3)简洁和清晰的层次结构使得JSON成为理想的数据交换语言。 - -(4)易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。 - -2、 -  在JavaScript语言中,一切都是对象。因此,任何JavaScript支持的类型都可以通过JSON来表示,例如字符串、数字、对象、数组等。看看他的要求和语法格式: -(1)对象表示为键值对,数据由逗号分隔 -(2)花括号保存对象 -(3)方括号保存数组 - -3、 -  JSON键值对是用来保存JavaScript对象的一种方式,和JavaScript对象的写法也大同小异,键值对组合中的键名写在前面并用双引号""句裹,使用冒号:分隔,然后紧接着值: - - -{"name": "QinJiang"} -{"age": "3"} -{"sex": "男"} -4、JSON是JavaScript对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。 - -var obj = {a: 'Hello', b: 'World'}; //这是一个对象,注意键名也是可以使用引号包裹的 -var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串 -5、实现从JSON字符串转换为JavaScript对象,使用JSON.parse()方法: - -var obj = JSON.parse('{"a": "Hello", "b": "World"}'); -//结果是 {a: 'Hello', b: 'World'} -6、要实现从JavaScript对象转换为JSON字符串,使用JSON.stringify()方法: - -var json = JSON.stringify({a: 'Hello', b: 'World'}); -//结果是 '{"a": "Hello", "b": "World"}' \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251215.md" "b/\345\262\263\345\215\223\351\230\263/20251215.md" deleted file mode 100644 index d365f4564a67f000cf73791699e607d479a4224e..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251215.md" +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - Document - - - - - - - - - - - - - - \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251217.md" "b/\345\262\263\345\215\223\351\230\263/20251217.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\262\263\345\215\223\351\230\263/20251218.md" "b/\345\262\263\345\215\223\351\230\263/20251218.md" deleted file mode 100644 index 905636948f5bbd0c4e85cf55e7d0c65081bf59bf..0000000000000000000000000000000000000000 --- "a/\345\262\263\345\215\223\351\230\263/20251218.md" +++ /dev/null @@ -1,49 +0,0 @@ - // 练习1 - let aa = 10; - let bb = 3; - const jia = aa + bb; - const jian = aa - bb; - const cheng = aa * bb; - const chu = aa / bb; - const yu = aa % bb; - - console.log(`加:${jia},减:${jian},乘:${cheng},除:${chu},余:${yu}`); - - // 练习2 - const cgstr = "123"; - const cgnum = 456; - - console.log(+cgstr); - console.log(`${cgnum}`); - - // 练习3 - function compare(a, b) { - const 大于 = a > b; - const 等于 = a === b; - const 不等于 = a != b; - return { 大于, 等于, 不等于 }; - } - - const compareNum = compare(5, 3); - console.log(compareNum); - - // 练习4 - let x = "5"; - let y = 5; - let z = "5"; - - const comparexy = x == y; - const comparexy1 = x === y; - const comparexz = x == z; - const comparexz1 = x === z; - - console.log(`x == y:${comparexy},x === y:${comparexy1},x == z:${comparexz},x === z:${comparexz1}`); - - // 练习5 - let agecar = 25; - let hasLiscence = true; - let canDrive = (agecar > 18 && agecar < 60) && hasLiscence == true; - - let answer = canDrive ? '可以开车' : '不可以开车'; - - console.log(canDrive + answer); \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251219.md" "b/\345\262\263\345\215\223\351\230\263/20251219.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\262\263\345\215\223\351\230\263/\345\233\276\347\211\207imgs/PixPin_2025-11-10.png" "b/\345\262\263\345\215\223\351\230\263/\345\233\276\347\211\207imgs/PixPin_2025-11-10.png" deleted file mode 100644 index d9250e276163965873fcfd86a7073c630e292bad..0000000000000000000000000000000000000000 Binary files "a/\345\262\263\345\215\223\351\230\263/\345\233\276\347\211\207imgs/PixPin_2025-11-10.png" and /dev/null differ diff --git "a/\345\274\240\346\264\213\351\223\255/200\351\242\230.html" "b/\345\274\240\346\264\213\351\223\255/200\351\242\230.html" deleted file mode 100644 index a6d4ddef0f4595521fd4824e6784c5724142a2c2..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/200\351\242\230.html" +++ /dev/null @@ -1,67 +0,0 @@ - - - - - Document - - - - - - \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\274\240\346\264\213\351\223\255/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index a095fd53523d419461dd21608ba415b342bf6d62..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,26 +0,0 @@ -## 笔记 -### js代码使用 -```html - - - -``` -1. 使用时可以直接在body里打js,也可以用外部链接的使用js -## 作业 -1. 输出老子名言 -```html - -``` -2. 输出明日学校网址 -```html -内html - - -``` -```js -alert("http://www.mingrisoft.com"); -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251112-js\345\237\272\347\241\200+\344\275\234\344\270\232.md" "b/\345\274\240\346\264\213\351\223\255/20251112-js\345\237\272\347\241\200+\344\275\234\344\270\232.md" deleted file mode 100644 index b6395dccd4aec53b426ec6f188e60dec04c879ef..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251112-js\345\237\272\347\241\200+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,53 +0,0 @@ -## 作业 -1. 第二章训练1 -```JS -let w = 8848386; - document.write("
      ");
      -        document.write(w + "m \n");
      -```
      -2. 第二章训练2
      -```JS
      -     document.write("E:\\asfasdf\\sdafa\\sadfasf
      ") -``` -3. 第二章训练3 -```JS - let mm = 17100000 - document.write(mm + "km^2
      "); -``` -4. 第二章训练4 -```JS -let username = "郭靖"; - let usersex = "男"; - let userold = 20; - let height = "1.77m"; - let fongfu = "九阴真经"; - document.write("个人信息"); - document.write("名字:" + username + "
      "); - document.write("性别:" + usersex + "
      "); - document.write("年龄:" + userold + "
      "); - document.write("身高:" + height + "
      "); - document.write("功夫:" + fongfu + "
      "); -``` -5. 第二章综合1 -```JS - document.write("他强由他强,清风抚山岗
      他横任他横,明月照大江
      他自狠来他自恶,我自一口真气足
      ————《九阳神功》") - ``` - 6. 第二章综合2 - ```JS - let a1 = 6500 - let a2 = 500 - let a4 = 5000 - let a3 = 3 / 100 - let a5 = (a1 - a2) - (a1 - a2 - a4) * a3 - document.write("该员工的实际收入为" + a5 + "元") -``` -7. 第二章综合3 -```JS - - let day = 2024 % 4 === 0 && (2024 % 100 !== 0 || 2024 % 400 === 0); - const day2 = day ? 29 : 28; - - alert('2024年2月有' + day2 + '天'); -``` - - diff --git "a/\345\274\240\346\264\213\351\223\255/20251113-\350\277\220\347\256\227\347\254\246\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\345\274\240\346\264\213\351\223\255/20251113-\350\277\220\347\256\227\347\254\246\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 3ce87e1afc34fc81846db467230767f235618206..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251113-\350\277\220\347\256\227\347\254\246\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,97 +0,0 @@ -1. 第二章训练5 -```JS - let a = 10000; - let b = 2.75 / 100; - let c = 3; - let d = a + a * b * c; - document.write("本息合计:" + d + "元
      "); -``` -2. 第二章训练6 -```JS - let socor = 65 - let cj = socor > 60 - document.write("是否及格:" + cj); -``` -3. 第二章训练7 -```JS - let top1 = 30 - let bottom = 50 - let height1 = 30 - let mj = (top1 + bottom) * height1 / 2 - document.write("梯形田面积:" + mj) -``` -4. 第三章综合1 -```JS - let bmi = 23 - let jg - if (bmi < 20) { - jg = "体重过清" - } - if (bmi > 20 && bmi < 25) { - jg = "体重适中" - } - if (bmi > 25 && bmi < 30) { - jg = "体重过重" - } - if (bmi > 30 && bmi < 35) { - jg = "体重肥胖" - } - if (bmi > 35) { - jg = "非常肥胖" - } - document.write("BMI:" + bmi) - document.write("
      "); - document.write("结果:" + jg) -``` -5. 第三章综合2 -```JS - - document.write("") - document.write(""); - document.write(""); -``` -6. 电影院 -```JS - document.write(""); - for (let c = 1; c < 5; c++) { - document.write(""); - - for (let f = 1; f < 11; f++) { - if (c == 3 && f == 5) { - document.write(""); - continue; - } - if (c == 3 && f == 6) { - document.write(""); - continue; - } - document.write(""); - } - document.write(""); - } -``` -7. 综合3 -```JS - document.write("
      已售已售" + c + "排" + f + "座
      "); -for (let b = 0; b < 10; b++) { - document.write(""); - for (let c = 1; c < 11; c++) { - let mub = b * 10 + c - document.write(""); - - } - document.write(""); - } - document.write("
      " + mub + "
      "); -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251114-\345\276\252\347\216\257\345\233\240\346\236\234\344\275\234\344\270\232.md" "b/\345\274\240\346\264\213\351\223\255/20251114-\345\276\252\347\216\257\345\233\240\346\236\234\344\275\234\344\270\232.md" deleted file mode 100644 index f7f60e568d973043965594914531c159608ae8e6..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251114-\345\276\252\347\216\257\345\233\240\346\236\234\344\275\234\344\270\232.md" +++ /dev/null @@ -1,106 +0,0 @@ - -## 作业 - 1. 第三章训练1 - ```JS - let aa = 26 - let bb = 17 - let cc = 10 - let dd = 20 - let num = aa - if (num > bb) { - num = bb - } - if (num > cc) { - num = cc - } - if (num > dd) { - num = dd - } - document.write(num); -``` -2. 第三章训练2 -```JS - let j, t, header, foot - - - for (j = 1; j < 36; j++) { - for (t = 35; t > 0; t--) { - if (j + t == 35 && j * 2 + t * 4 == 94) { - document.write("鸡:" + j + "兔:" + t) - } - } - } -``` -2. 第三章训练2 -```JS - let apii = 23 - let api - if (apii <= 100) { - api = "良好" - } - if (apii > 100 && apii <= 200) { - api = "轻度污染" - } - if (apii > 200 && apii <= 300) { - api = "重度污染" - } - - document.write("api:" + apii) - document.write("
      "); - document.write("结果:" + api) - document.write("
      "); - document.write("
      "); -``` -3. 第三章训练3 -```js - - let jj = 3000 - let gg = 0 - do { - gg++ - money = jj + gg * 50 - 50 - document.write(`第${gg}年工资为:${money}`); - document.write("
      "); - } - while (gg < 5) { - - } -``` -6. 第三章训练6 -```JS - let sum, yy - sum = 0 - for (yy = 1; yy < 1001; yy++) { - if (yy % 65 !== 0) { - continue; - } - else { - sum += yy; - document.write(yy + "
      "); - document.write(sum + "
      "); - } - } - document.write("
      "); - document.write("
      "); -``` -7. 第三章训练7 -```js - document.write("尚未使用:"); - document.write(""); - for (let c = 1; c < 4; c++) { - document.write(""); - - for (let f = 1; f < 4; f++) { - if (c == 1 && f == 3) { - - continue; - } - if (c == 3 && f == 2) { - - continue; - } - document.write(""); - } - document.write(""); - } -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251117-\345\207\275\346\225\260\345\237\272\347\241\200\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\345\274\240\346\264\213\351\223\255/20251117-\345\207\275\346\225\260\345\237\272\347\241\200\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 86ba77229cb4cbef725661898180a90a0b93a6f8..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251117-\345\207\275\346\225\260\345\237\272\347\241\200\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,27 +0,0 @@ - - - ## 笔记 - - -1. 形参跟实参 - -- 形参是在函数定义时列出的变量,作为函数预期接收输入的占位符。在函数未被调用时,形参不占用存储单元,只有在函数调用时才会分配内存,调用结束后自动释放 - -- 实参是在函数调用时传递给函数的实际值,用于替换形参并执行函数。实参可以是常量、变量、表达式或函数返回值,但要求有确定的值。 -## 作业 -1. 获取完成收货地址 -```js - function address(sheng,shi,qu,xiang){ - document.write("收货地址:"+sheng+shi+qu+xiang) - - } - address("河南省","许昌市","长葛市","俭学街未来智慧城") -``` -2. 获取数字的绝对值 -```js - function number(num){ - Math.abs(num) - document.write("绝对值为:"+num) - } - number(-30) -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251119-\345\207\275\346\225\260+\345\257\271\350\261\241\345\237\272\347\241\200\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\345\274\240\346\264\213\351\223\255/20251119-\345\207\275\346\225\260+\345\257\271\350\261\241\345\237\272\347\241\200\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 94064312ef1439766b273a4c3b2c024cc0504a72..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251119-\345\207\275\346\225\260+\345\257\271\350\261\241\345\237\272\347\241\200\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,212 +0,0 @@ -## 笔记 - - -1. 内置函数 - -- parseInt() 将字符类型转化为整型:parselInt(string,[n]) - -主要将首位为数字的字符串转化为数字,如果字符串不是以数字开头,那么将返回NaN。 - -- parseFloat() 将字符类型转化为浮点类型:parseFloat(string) - -函数主要是将首位为数字的字符串转化成浮点型数字,如果字符串不是艺术字开头,那么将返回NaN。 - -- isNaN() 判断一个数值是否为NaN:isNaN(num) - -- isFinite() 判断一个数值是否有限 - -- eval() 求字符串中表达式的值 - -- encodeURI() 将URI字符串进行编码 - -- decodeURI() 对已编码的URI字符串进行解码 -## 作业 -1. 返回值比大小(训练3) -```js -function number(num1, num2) { - if (num1 > num2) { - return `${num1}>${num2}`; - - } - else { - return `${num1}<${num2}` - } - } - console.log(number(7, 10)); -``` -2. 获取最小数字(训练4) -```js -function numbers(nums1, nums2, nums3) { - let max = nums1 - if (max < nums2) { - max = nums2 - } - if (max < nums3) { - max = nums3 - } - return max; - } - document.write(numbers(16, 12, 17)) -``` -3. 是否享受优惠(5) -```js - function money(shop, wish, clothes) { - moneysum = shop + wish + clothes - return moneysum - } - function result() { - money(199, 156, 165) - if (moneysum > 500) { - return "享受优惠" - } - if (moneysum < 500) { - return "不享受优惠" - } - } - document.write(result()) -``` -4. 是否过本科线 -```js -function grade(chinese, math, english, ce) { - sum = chinese + math + english + ce - return sum - } - function result1() { - grade(108, 115, 126, 237) - if (sum > 550) { - return "达到本科线" - } - if (sum < 550) { - return "不达到本科线" - } - } - document.write(result1()) - -``` -5. 是否登录成功 -```js - let use = function (usename, usepwd) { - if (usename == "mr" && usepwd == "mrsoft") { - return "登录成功" - } - else { - return "登录失败" - } - } - document.write(use("mr", "mrsoft")) -``` -6. 获取1000以内能被3和5整除的正整数 -```js - let number = function (num) { - let row = 0 - - for (let n = 1; n <= num; n++) { - - if (n % 3 == 0 && n % 5 == 0) { - row++ - document.write(n+" ") - if (row % 7 == 0) { - document.write("
      ") - } - - } - } - - - } - document.write(number(1000)) -``` -### 综合训练 - -1. - -```html - - - -``` - -3. - - -```html - - - -``` diff --git "a/\345\274\240\346\264\213\351\223\255/20251120-Math,Date\345\257\271\350\261\241\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\345\274\240\346\264\213\351\223\255/20251120-Math,Date\345\257\271\350\261\241\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 17d9f095ef7d11c7feca090d01c7cef03e6e0bed..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251120-Math,Date\345\257\271\350\261\241\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,127 +0,0 @@ -## 笔记 - -1. 操作对象 - -- 访问属性:对象名[属性名] - -```html - - - -``` - -- 添加属性 - -```html - - - -``` - -- 删除属性:delete goods.number; - -- 添加方法 - -2. 遍历对象 - -- 语句:for...in -- 此循环语句用于遍历对象 - - -3. Math对象 - -- 提供大量的数学函数和数学常量 - - -4. Date对象 - -- 实现对日期跟时间的控制 -- 获取本地时间的月份时,通常会少一个月,记得+1 - -- 创建Date - -```html - - - -``` - - -## 作业 - - - - -1. - -```html - - - -``` - - -2. - -```js - - - let date1 = new Date('2023-05-01'); - let date2 = new Date('2023-06-07'); - - let timesDiff = date2.getTime() - date1.getTime(); - - let hoursDiff = timesDiff / 86400000; - - document.write("距离高考还有"+hoursDiff+"天"); - - -``` - - -3. - -```js - - function gosite(e) { - if (e.button == 0) { - alert('这是左键'); - } - - if (e.button == 1) { - alert('这是中键'); - } - - if (e.button == 2) { - alert('这是右键'); - } - } - - document.onmousedown = gosite; - - -``` - diff --git "a/\345\274\240\346\264\213\351\223\255/20251121-event\345\257\271\350\261\241\345\222\214\346\225\260\347\273\204\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\345\274\240\346\264\213\351\223\255/20251121-event\345\257\271\350\261\241\345\222\214\346\225\260\347\273\204\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 36ad4cee55b361527f28ffc31808ef24e5684ac7..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251121-event\345\257\271\350\261\241\345\222\214\346\225\260\347\273\204\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,114 +0,0 @@ -## 笔记 - -1. 定义数组 - -- arrayObiect = new Array();、 - -- 数组元素个数从0开始 - -- 数组可以指定数组的元素个数:arrayObject = new Array(size); - -- 指定数组元素:arrayObject = new Array(element1, element2, element3...); - -- 直接定义:arrayObject = [element1, element2, element3...]; - - -2. 数组的输入与输出 - -- 数组元素的输入: - (1)直接输入数组元素,在数组元素确定的情况下才可以使用: - arrayObj = new Array("cat", "dog", "horse", "pig"); - (2)利用元素组下标: - arrayObj = newArry(6) - arrayObj[2] = "cat"; - (3)用for语句 - var n = 6; - arrayObj = new Array() - for(var i = 0; i < n; i++) - { - arrayObj[i] = i; - } - -- 元素组输出 - -3. 获取元素组长度:array.length - -4. 增加元素组长度:array[array.length] = arrar.lrngth+1 - -5.数组对象与方法 - -- concat() 连接多个数组并返回新数组 - -- pop() 从数组末尾删除最后一个元素并返回该元素 - -- push() 向数组末尾添加一个或多个元素 - -- shift() 从数组开头删除第一个元素 - -- splice() 在指定位置增加或删除数组元素 - -- unshift() 向数组开头添加元素 - -- reverse() 颠倒数组中元素的顺序 - -- sort() 对数组内容进行排序 - -- slice() 提取数组指定部分生成新数组 - -- toSource() 代表对象的源代码 - -- toString() 把数组转换为字符串,并返回结果 - -- toLocaleString() 把数组转换为本地字符串,并返回结果 - -- join() 将数组所有元素转换为字符串 - -- valueOf() 返回数组对象的原始值 -## 综合题 - - -1. - -```js - - - document.write('请输入要生成的随机数位数:'); - document.write(''); - document.write(""); - document.write(""); - function RandomNum(a) { - let res = " "; - for (i = 1; i <= a; i++) { - let randomDigit = Math.floor(Math.random() * 6); - res += randomDigit; - } - alert(res); - } - document.write(''); - - -``` - - -2. - -```js - - let date1 = new Date('1996-06-09'); - let date2 = new Date(); - - let timesDiff = date2.getTime() - date1.getTime(); - - let daysDiff = timesDiff / 86400000; - - document.write('周星星距离出生到现在已经过了:
      ') - - document.write( - `${Math.floor(daysDiff)}天${Math.floor( - (daysDiff % 1) * 24 - )}小时${Math.floor((((daysDiff % 1) * 24) % 1) * 60)}分钟${Math.floor( - (((((daysDiff % 1) * 24) % 1) * 60) % 1) * 60 - )}秒` - ); - -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210+string\345\257\271\350\261\241.md" "b/\345\274\240\346\264\213\351\223\255/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210+string\345\257\271\350\261\241.md" deleted file mode 100644 index 40390259d275dcccf4183f3f766de5cc9274f97e..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210+string\345\257\271\350\261\241.md" +++ /dev/null @@ -1,156 +0,0 @@ -## 笔记 -concat():连接两个或更多的数组,并返回结果 - -pop():删除并返回数组中的最后一个元素 - -push():向数组的尾部添加一个或多个元素,并返回新的长度 - -shift():删除并返回数组中的第一个 - -### Sring对象 -```js - let str = new String(); -``` -1. length属性 - - 获取字符串的长度 -2. constructor属性 - - 引用当前对象的构造函数 -3. prototype属性 - - 可以为字符串对象添加自定义的属性或方法 - -#### 查找字符串 -1. charAt()方法 - - 返回字符串中指定位置的字符 -2. indexOf()方法 - - 返回某个字符串出现的位置 - -#### 截取字符串 -1. slice()方法 - - 截取字符串的片段 -2. substr()方法 - - 可以从字符串指定位置开始提取指定长度的字符串 -3. substring()方法 - - 提取字符串中两个指定位置索引号指定位置的字符 -## 作业 -### 第六章 -训练1 -```js -let arr1 = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"] - let date1 = new Date() - document.write("今天是:" + date1 + arr1[0]) -``` -训练2 -```js - let arr2 = [5, 7, 6, 3, 9, 2] - arr2.sort((a, b) => b - a) - document.write(arr2[0]) -``` -训练3 -```js - let arr3 = [1, 2, 3, 4, 5, 6] - document.write(arr3.slice(1, 5)) -``` -综合1 -```js - let arr4 = ["长春", "昌图西", "铁岭西"] - document.write(arr4) - document.write("
      ") - document.write(arr4.reverse()) -``` -综合2 -```js - - - -``` -### 第七章 -训练1 -```js - let arr5 = ["雪山飞狐", "连城诀", "天龙八部", "射雕英雄传", "鹿鼎记", "笑傲江湖", "书剑恩仇录", "神雕侠侣", "祈天屠龙记", "辟邪剑"] - for (let a = 0; a < 10; a++) { - if (arr5[a].length == 4) { - document.write(arr5[a] + " ") - } - } -``` -训练2 -```js - let arr6 = ["1330431", "1567766", "1304316", "1526567", "15804433", "1390431"] - for (let d = 0; d < 6; d++) { - if (arr6[d].indexOf("0431") !== -1) { - document.writeln(arr6[d]) - } - } -``` -训练3 -```js -let arr7 = "4006****66@qq.com" - document.writeln(arr7.substr(0, 10)) -``` -综合1 -```js -let arr8 = "abc@sina.com" - if (arr8.indexOf("@") !== -1 && arr8.indexOf(".") !== -1) { - alert("注册邮箱符合要求") - } - else { - alert("注册邮箱不符合要求") - } -``` -综合2 -```js - let arr9 = "123456789abcdefg" - let arr9split = arr9.split('') - let arr9result = "" - for (let i = 0; i < 6; i++) { - let arr9Random = Math.floor(Math.random() * arr9split.length) - arr9result += arr9split[arr9Random] - } - document.writeln(arr9result) -``` -综合3 -```js - function number(num) { - return num.toLocaleString(); - } - document.writeln(number(13625966)) -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\345\274\240\346\264\213\351\223\255/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\274\240\346\264\213\351\223\255/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\345\274\240\346\264\213\351\223\255/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 3d1ee3b32388bb7f8251035996b5f1b8f64d752f..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,92 +0,0 @@ -## 笔记 -## 1. try-catch-finally -捕获并处理异常,保证代码执行连续性: -```js -try { - // 可能抛出异常的代码 - riskyOperation(); -} catch (error) { - // 异常处理逻辑 - console.error('错误信息:', error.message); -} finally { - // 无论是否异常,始终执行(如释放资源) - console.log('最终执行'); -} -``` -- `try`:包裹可疑代码,触发异常后立即跳转到`catch` -- `catch`:接收异常对象(包含`message`/`stack`等属性),处理错误 -- `finally`:可选,**必须执行**(即使`try`/`catch`中有`return`) - - -### 2. throw 主动抛异常 -手动触发自定义异常: -```js -function checkAge(age) { - if (age < 0) { - // 抛出内置Error或自定义信息 - throw new Error('年龄不能为负数'); - // 也可抛其他类型:throw '非法年龄'; - } -} -``` -## 作业 -综合1 -```js - - 输入1-5数字: -
      - - - - - -``` -综合2 -```js - - 用户名:
      - 密码:
      - - - -``` diff --git "a/\345\274\240\346\264\213\351\223\255/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\345\274\240\346\264\213\351\223\255/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index d6537c58d2163fc3afda577bdc37848a1c9b1120..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,204 +0,0 @@ -## 笔记 -### 事件处理 -#### onload事件 -会在页面中或图像中加载完成后立即触发 -```js - -``` - -#### onresize事件 -改变浏览器页面大小触发 -```js - -``` - -### 表单事件 -```js -//获得焦点 - - -//失去焦点 - -``` - -```js -//表单提交事件 - - -//重置事件 - -``` -## 作业 -训练1 -```js - - - - - - Document - - - - - - - - - - - - -``` -训练2 -```js - -

      中国的“国足”是:

      -
      -
      A篮球
      -
      B足球
      -
      C乒乓球
      -
      D台球
      -
      - - - -``` -训练3 -```js - -``` -训练4 -```js - - - -``` -训练5 -```js - - - - -``` -训练67 -```js - - -
      - - - - - - - - - - -``` - diff --git "a/\345\274\240\346\264\213\351\223\255/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\274\240\346\264\213\351\223\255/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index ff37893a66f6170ab880802208e488f9523ed805..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,232 +0,0 @@ -### 笔记 -``` -**知识点**:使用 `draggable="true"` 属性使元素可拖放。 - -```javascript -// 使元素可拖放 -const draggableElement = document.getElementById("draggable"); -draggableElement.setAttribute("draggable", "true"); -``` - -### 2. 拖放事件生命周期 - -**知识点**:拖放操作涉及两个对象的事件:被拖元素(drag source)和目标区域(drop target)。 - -```javascript -// 被拖元素事件 -element.addEventListener("dragstart", handleDragStart); -element.addEventListener("dragend", handleDragEnd); - -// 目标区域事件 -target.addEventListener("dragover", handleDragOver); -target.addEventListener("drop", handleDrop); -``` - ---- - -## 拖放事件 - -### 3. dragstart 事件 - -**知识点**:开始拖动时触发,用于设置拖拽数据。 - -```javascript -function handleDragStart(e) { - e.dataTransfer.setData("text/plain", e.target.id); - e.target.classList.add("dragging"); -} -``` -### 练习 -```html - - -
      - -
      - - - - -

      中国的"国球"是()

      -

      A.篮球 B.排球 C.乒乓球 D.羽毛球

      -

      - - - - - -
      - - - - - -

      - - - - - - - - - - - - - - - - -

      - - - - -
      - 用户名:
      - 密码:
      - - - - - - - - - - - - - Document - - - - - - - - - - - - - -
      -
      - -
      -
      -
      - - -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251203-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\274\240\346\264\213\351\223\255/20251203-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index f4cc49c21ad88b33263f8fd86b5c38aafcede4c4..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251203-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,116 +0,0 @@ -### 笔记 -``` -1.getElementById()方法返回具有指定ID的元素。 -2.getElementsByTagName()方法返回具有指定标签名的元素集合。 -3.getElementsByName()方法返回具有指定类名的对象集合。 -4.querySelector()方法返回匹配指定CSS选择器的第一个元素 -5.querySelectorAll()方法返回匹配指定CSS选择器的所有元素 -6.createElement()方法用于创建一个新的元素节点 -``` -### 练习 -```html - - yiqwews - - - - - - - - - -
      - - - - - - - - - - Document - - - - - - - -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251204-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\274\240\346\264\213\351\223\255/20251204-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 9b95a20a7b477df73a875b870736976bbe0bcad9..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251204-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,206 +0,0 @@ -### 笔记 -``` -一、核心认知 -1. **本质**:HTML/XML 文档的树形节点映射,JS 操作页面的接口,`document` 为操作入口。 -2. **关键节点**:元素节点(操作核心,`nodeType=1`)、文本节点(`nodeType=3`)、文档节点(`document`,`nodeType=9`)。 -3. **层级**:`window→document→html→head/body→子元素`。 - -二、核心操作 -1. 元素选择 -| 方法 | 核心特点 | -|---------------------|---------------------------| -| `getElementById` | 性能最优,返回单个元素 | -| `getElementsBy*` | 动态集合,元素变化自动同步| -| `querySelector/All` | 支持CSS选择器,后者返回静态集合 | - -2. 节点操作 -- **创建插入**:`createElement`(创元素)、`createTextNode`(创文本,防XSS)、`appendChild`/`insertBefore`(插入)。 -- **删除替换**:`node.remove()`(自删)、`removeChild`(父删子)、`replaceChild`(替换)。 -- **安全**:优先`textContent`,慎用`innerHTML`。 - -3. 样式与属性 -- 样式:`elem.style`(行内)、`classList`(类名操作,推荐)、`getComputedStyle`(计算样式,只读)。 -- 属性:`getAttribute`/`setAttribute`(原生属性)、`dataset`(`data-*`属性)。 - -三、事件与优化 -1. **事件**:推荐`addEventListener`,关键事件`DOMContentLoaded`(初始化)、`beforeunload`(页面卸载提示);事件委托适配动态元素。 -2. **性能优化**:缓存元素、批量操作(`DocumentFragment`)、避免同步重排、高频事件节流防抖、删元素前解绑事件。 - -``` -### 练习 -```html - - - - - Document - - - - - -
      - - - - - - - - - Document - - - - -
      - -
      -    夜空中最亮的星
      -    能否听清
      -    那仰望的人
      -    心底的孤独和叹息
      -    夜空中最亮的星
      -    能否记起
      -    曾与我同行
      -    消失在风里的身影
      -        
      - - - - - -

      最新电影资讯

      -
        -
      • 1.《金蝉脱壳》
      • -
      • 2.《阿甘正传》
      • -
      • 3.《爱乐之城》
      • -
      • 4.《头号玩家》
      • -
      - 输入影片资讯编号: - - - - -
      -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 芒果
      • -
      -
        -
      • 西瓜
      • -
      • 蜜橘
      • -
      • 萝卜
      • -
      -
      - - - -

      在《倚天屠龙记》中,张三丰是_____派的掌门?

      - A.少林 - B.武当 - C.峨眉 - D.昆仑 - - - - 原超链接文本 - - - - - - - -
      - - 选中的表情 -
      - -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\274\240\346\264\213\351\223\255/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 01453b38e3226fb7ca4c1f25a331b43957da97b1..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,367 +0,0 @@ -### 笔记 -``` -document.title 获取 / 设置页面标题 -document.URL 获取当前页面完整 URL -document.body 获取 元素,可直接操作其样式和内容 - -getElementById() 根据元素 id 属性查询 -getElementsByTagName() 根据标签名查询 -getElementsByClassName() 根据元素 class 属性查询 -querySelector() CSS 选择器查询(第一个匹配) -createElement() 创建新的 HTML 元素 -appendChild() 将子元素添加到父元素的末尾 -replaceChild() 用新元素替换父元素中的某个子元素 -removeChild() 从父元素中删除指定子元素 -``` -### 练习 -```js -
      -

      消散对白(节选)

      -

      丁禹兮

      -

      原諒我真的不太會告別

      -

      也沒想過有這一天

      -

      以為你隨口承諾的永遠

      -

      就可以敵過時間

      -

      可你眼中深情的對白 如煙花短暫

      -

      新鮮感終歸不是愛

      -

      回憶在倒帶要怎麼釋懷?

      -

      說著放下卻陷入無限循環

      -

      可你眼中無情的對白 淚都流乾

      -

      卻不說答案

      -

      順其自然 隨冷風消散

      -

      可過了這麼久你怎麼還是我的短板

      -
      - - -``` - -```js - - - 退出登录 - -``` - -```js -
      -
      - 长乐曲 -
      -
      - 十年一品温如言 -
      -
      - -``` -```js - - - - - -
      -

      广告内容标题

      -

      这里是广告的具体内容

      -
      广告将在 5 秒后自动关闭
      -
      - -``` - -```js - - - - -``` -```js - - - - - -``` -```js - - -``` -```js -

      2024年奥运会举办城市问答

      -
      - -``` -```js - - - -
      - 轮播图片 -
      - - -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251208-windows\345\274\271\347\252\227.md" "b/\345\274\240\346\264\213\351\223\255/20251208-windows\345\274\271\347\252\227.md" deleted file mode 100644 index 1a5aa40b201856ba5cc80d19ff6ce48897056482..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251208-windows\345\274\271\347\252\227.md" +++ /dev/null @@ -1,32 +0,0 @@ -### 1. window(顶层对象) -#### (1)尺寸相关 -```js -// 视口尺寸(不含滚动条) -window.innerWidth / window.innerHeight -// 窗口整体尺寸(含浏览器边框) -window.outerWidth / window.outerHeight -``` -### (2)窗口操作 -```js -// 打开新窗口(慎用,易被浏览器拦截) -window.open(url, name, features) -// 关闭当前窗口 -window.close() -// 窗口滚动 -window.scrollTo(x, y) // 绝对滚动到指定坐标 -window.scrollBy(x, y) // 相对当前位置滚动 -``` -### (3)定时器 -```js -// 一次性定时器(延迟执行) -let timer1 = setTimeout(() => {}, 1000) // 1秒后执行 -clearTimeout(timer1) // 清除未执行的定时器 - -// 周期性定时器(重复执行) -let timer2 = setInterval(() => {}, 1000) // 每1秒执行一次 -clearInterval(timer2) // 清除周期性定时器 - -// ES6+ 精准动画定时器 -let timer3 = requestAnimationFrame(callback) -cancelAnimationFrame(timer3) // 清除动画定时器 -``` diff --git "a/\345\274\240\346\264\213\351\223\255/20251210-style.md" "b/\345\274\240\346\264\213\351\223\255/20251210-style.md" deleted file mode 100644 index 85c80c4fb5641b81b649099d12b84c0699f3aec4..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251210-style.md" +++ /dev/null @@ -1,110 +0,0 @@ -### 笔记 -``` -一、Style 对象核心概述 -- Style 对象是 JavaScript 操作 DOM 元素内联样式的核心接口,对应元素的 style 属性,仅控制内联样式`(
      )`,而非外部样式表或 ` - - -
      -

      管理员窗口

      -

      管理员操作区域

      - -
      - - - `); - - // 3. 强制刷新新窗口(确保内容渲染) - adminWin.document.close(); - }); - - -``` - diff --git "a/\345\274\240\346\264\213\351\223\255/20251211-from.md" "b/\345\274\240\346\264\213\351\223\255/20251211-from.md" deleted file mode 100644 index 04b43aca4c19b6117fdad6dd35a4e15af43957f8..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251211-from.md" +++ /dev/null @@ -1,75 +0,0 @@ -## 作业 -```html - - - - - -``` -```html - - - - Document - - - - -
      - html -
      -
      - css -
      -
      - c# -
      -
      - 数据库 -
      -
      - 不记得了 -
      - - - -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251212-json-fetch.md" "b/\345\274\240\346\264\213\351\223\255/20251212-json-fetch.md" deleted file mode 100644 index 8d996eb540191eb705636ff1d6654002c59214b4..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251212-json-fetch.md" +++ /dev/null @@ -1,168 +0,0 @@ -## JSON (JavaScript Object Notation) -### 什么是JSON -- 轻量级数据交换格式 -- 易于人阅读和编写 -- 易于机器解析和生成 -- 独立于语言的文本格式 - -### JSON语法 -```javascript -// 对象表示 -{"name": "张三", "age": 25, "city": "北京"} - -// 数组表示 -[{"name": "张三"}, {"name": "李四"}] - -// 嵌套结构 -{ - "students": [ - {"name": "张三", "scores": [85, 92, 78]}, - {"name": "李四", "scores": [90, 88, 95]} - ] -} -``` - -### JSON与JS对象转换 -```javascript -// JS对象转JSON字符串 -let obj = {name: "张三", age: 25}; -let jsonStr = JSON.stringify(obj); - -// JSON字符串转JS对象 -let str = '{"name": "张三", "age": 25}'; -let jsonObj = JSON.parse(str); -``` - -## Promise -### 什么是Promise -- 异步编程解决方案 -- 表示一个异步操作最终完成或失败的对象 -- 解决回调地狱问题 - -### Promise状态 -1. Pending(待定)- 初始状态 -2. Fulfilled(已成功)- 操作成功完成 -3. Rejected(已失败)- 操作失败 - -### Promise基本用法 -```javascript -// 创建Promise -let promise = new Promise((resolve, reject) => { - let success = true; - if (success) { - resolve("操作成功"); - } else { - reject("操作失败"); - } -}); - -// 使用Promise -promise - .then(result => console.log(result)) - .catch(error => console.log(error)); -``` - -### Promise链式调用 -```javascript -fetch('/api/data') - .then(response => response.json()) - .then(data => processData(data)) - .then(result => console.log(result)) - .catch(error => console.error(error)); -``` - -### async/await语法 -```javascript -async function fetchData() { - try { - let response = await fetch('/api/data'); - let data = await response.json(); - console.log(data); - } catch (error) { - console.error(error); - } -} -``` -## 作业 -```html - -
      - - - - - - - -``` - -```html - -
      - 篮球 - 足球 - 乒乓球 - 排球 - 台球 - 网球 - 羽毛球 - - - -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251215.md" "b/\345\274\240\346\264\213\351\223\255/20251215.md" deleted file mode 100644 index d31cec4b67a8f84d39fc1360188696b4733579bf..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251215.md" +++ /dev/null @@ -1,38 +0,0 @@ -## 练习 -```js - /* 变量 常量和数据类型 */ - // 练习1 - let name = 'tyh'; - const school = 'xx职业学院'; - console.log(`"${name}""${school}"`); - - // 练习2 - function getTypeof() { - let value = "123"; - return typeof value; - } - let typeName = getTypeof(); - console.log(typeName); - - // 练习3 - let age = 18; - age = 20; - console.log(age); - - // 练习4 - let stuName = '李四'; - let stuAge = 19; - let grade = true; - - console.log(`姓名:"${stuName}",类型:"${typeof stuName}"`); - console.log(`年龄:"${stuAge}",类型:"${typeof stuAge}"`); - console.log(`及格:"${grade}",类型:"${typeof grade}"`); - - // 练习5 - let tyNull = null; - let tyUnderfined = undefined; - - console.log(`underfined 变量:${tyUnderfined} 类型:${typeof tyUnderfined}`); - console.log(`null 变量:${tyNull} 类型:${typeof tyNull}`); - -``` \ No newline at end of file diff --git "a/\345\274\240\346\264\213\351\223\255/20251217.md" "b/\345\274\240\346\264\213\351\223\255/20251217.md" deleted file mode 100644 index 5d0022e94543a812e927010bf9f55ac7a41b3dc0..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251217.md" +++ /dev/null @@ -1,148 +0,0 @@ -## 笔记 - -- jquery是一个js库,为了方便dom操作 -- 和js一样,建议在body结束标签之前引用 -- 使用`$`符号来使用jQuery库能力,`$`符号实际是一个方法,当然方法在js中也是一个对象,所以其也有一些属性可以使用 -- jquery获取到的是jQuery,和原生拿到的动漫对象不同,但它们之间可以相互转换 - -- 相互转换方法: - -```html - -
      - - - - - -``` - -## 作业 - - -1. -- 题目描述: - 引入 jQuery 库,使用 $(document).ready() 确保 DOM 加载完成后执行代码,输出 "jQuery 已就绪" -- 输出示例: - 页面加载完成后控制台输出 "jQuery 已就绪" - -```html - - - - - -``` - -2. -- 题目描述: - 比较 $ 和 jQuery 的使用,验证它们是同一个对象 -- 输出示例: - true - -\\ 验证$和jQuery这两个符号使用的是不是同一种东西 - -```html - - - - - -``` - -3. - -- 题目描述: - 使用 jQuery 获取 id 为 "demo" 的元素,并输出该元素的 jQuery 对象 -- HTML 结构: - -```html - -
      演示内容
      - - - - - -``` - -4. - -- 题目描述: - 理解 jQuery 对象和原生 DOM 对象的区别,实现两者之间的转换 -- 输出示例: - jQuery对象转DOM对象:`$('#demo')[0] 或 $('#demo').get(0)` - DOM对象转jQuery对象:`$(domElement)` - -```html - -
      演示内容
      - - - - - -``` - -5. - -- 题目描述: -- 使用 jQuery 的链式调用,一次性完成多个操作 - -```html - -
      内容
      - - - - - -``` - - - - diff --git "a/\345\274\240\346\264\213\351\223\255/20251218.md" "b/\345\274\240\346\264\213\351\223\255/20251218.md" deleted file mode 100644 index 619ddafbd43c031dcb21524f192c7ecf0f401517..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251218.md" +++ /dev/null @@ -1,67 +0,0 @@ -## 笔记 - -### jQuery事件处理 - -- jQuery对象.on('click', function(){}) -- jQuery对象.click(function(){}) -- jQuery对象.trigger('click', function(){}) - -```html - - - -
      - 想一夜暴富然后混吃混合等死 -
      - - - - - -``` - - -### jQuery动画与效果 - -- 基础效果:显示、隐藏 show()、hide()、toggle() -- 进阶效果:淡入、淡出 fadeIn()、fadeOut() -- 高级效果:animate() - - -### jQuery DOM 操作 - -- 新增 append给按到的元素增加一个下级元素 -- 移除 remove 移除拿到的元素 -- text() 拿到文本内容, text('要设置的内容')可以修改纯文本内容 -- html() 拿到包含标签的内容,html('要射这的内容')可以修改包含标签的内容 - - - - - - - - - - diff --git "a/\345\274\240\346\264\213\351\223\255/20251219.md" "b/\345\274\240\346\264\213\351\223\255/20251219.md" deleted file mode 100644 index 6c0ca6cb35c6d416592fae47854b339fd1cbf17e..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\264\213\351\223\255/20251219.md" +++ /dev/null @@ -1,328 +0,0 @@ -```html - - - - - - - - 实践星球 - - - - - -
      - - -
      第" + c + "排第" + f + "个
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      序号标题内容摘要作者发布日期操作
      - - -
      - - -
      - - -
      - - -
      - - -
      - - -
      - - -
      - - -
      - - -
      - - - - - - - - -``` \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251110-\345\210\235\350\257\206js&\347\273\203\344\271\240.md" "b/\345\274\240\346\265\267\346\264\213/20251110-\345\210\235\350\257\206js&\347\273\203\344\271\240.md" deleted file mode 100644 index 7c61af8b92e5903e5222049a88802315b426f7ca..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251110-\345\210\235\350\257\206js&\347\273\203\344\271\240.md" +++ /dev/null @@ -1,37 +0,0 @@ -# 笔记 - -## JS 的核心作用 -- 实现页面交互:比如按钮点击、表单验证、轮播图切换。 -- 操作页面元素:修改文字、图片、样式,动态添加 / 删除内容。 -- 处理数据:解析接口数据、本地存储(如记住用户偏好)。 -- 控制行为:定时器、动画效果、页面跳转等。 - -# 作业 - -## 1 - -### 图片 -![alt text](imag/1110-1.png) - -### 代码 -```bash -
      - - -``` - - -## 2 - -### 图片 -![alt text](imag/1110-2.png) - -### 代码 -```bash - -alert("明日学院官网网址:http://www.mingrisoft.com"); -``` \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251112-js\345\237\272\347\241\200\346\225\231\345\255\246&\347\273\203\344\271\240.md" "b/\345\274\240\346\265\267\346\264\213/20251112-js\345\237\272\347\241\200\346\225\231\345\255\246&\347\273\203\344\271\240.md" deleted file mode 100644 index 875208fb61ba7e77005c51839ea1d1328247bbae..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251112-js\345\237\272\347\241\200\346\225\231\345\255\246&\347\273\203\344\271\240.md" +++ /dev/null @@ -1,82 +0,0 @@ -# 笔记 -## 基本类型 -- string:字符串("abc"、'123'、`模板字符串 ${变量}`) -- number:数字(整数、小数、NaN 非数字、Infinity 无穷大) -- boolean:布尔值(true/false) -- undefined:未定义(变量声明未赋值) -- null:空值(主动表示 “无”) -- symbol:唯一值(ES6+,用于对象唯一属性名) -- bigint:大整数(ES6+,解决超大数字精度问题,如 123n) - -## 引用类型 -- object:对象(包括普通对象、数组、函数、日期等) - -## 运算符 -1. 算术运算符 -+ - * / %(取余)++(自增)--(自减) - -2. 赋值运算符 -= += -= *= /= - -3. 比较运算符 -==(松散相等,自动类型转换)===(严格相等,不转类型)> < >= <= != !== - -4. 逻辑运算符 -&&(与)||(或)!(非) - -# 作业 - -### 1. -```bash - -``` - -### 2 -```bash -const windowsPath = "E:\\JavaScript\\code\\demo"; -console.log("Windows 文件夹路径:", windowsPath); -``` - - -### 3 -```bash - const russiaArea = 1709.82; - console.log(`俄罗斯国土面积:${russiaArea} 万平方公里`); -``` - -### 4 -```bash - -``` -### 4 -```bash -

      《九阳神功》心法

      -
      - - -``` \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251113-\345\205\266\344\273\226\350\277\220\347\256\227\347\254\246&\347\273\203\344\271\240.md" "b/\345\274\240\346\265\267\346\264\213/20251113-\345\205\266\344\273\226\350\277\220\347\256\227\347\254\246&\347\273\203\344\271\240.md" deleted file mode 100644 index 7387bbe06cc715415c333a278d0ffa3193af9f7a..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251113-\345\205\266\344\273\226\350\277\220\347\256\227\347\254\246&\347\273\203\344\271\240.md" +++ /dev/null @@ -1,114 +0,0 @@ -# 笔记 - -### typeof - -|数据类型| 示例| typeof 返回值| -|-------|------|----------------| -|数值(Number)| typeof 123 |"number"| -|字符串(String)| typeof "abc"| "string"| -|布尔值(Boolean)| typeof true |"boolean"、 -|undefined| typeof undefined| "undefined"| -|函数(Function)| typeof function(){} |"function"| -|symbol| typeof Symbol() |"symbol"| -|大整数(BigInt)| typeof 123n| "bigint"| -|对象(Object)| typeof {} |"object"| -|null| typeof null |"object"(特殊情况)| -|数组(Array)| typeof []| "object"(数组是特殊对象)| - -# 作业 - -```bash - let a = 10000; - let b = 2.75 / 100; - let c = 3; - let d = a + a * b * c; - document.write("本息合计:" + d + "元
      "); -``` -2. 第二章训练6 -```bash - let socor = 65 - let cj = socor > 60 - document.write("是否及格:" + cj); -``` -3. 第二章训练7 -```bash - let top1 = 30 - let bottom = 50 - let height1 = 30 - let mj = (top1 + bottom) * height1 / 2 - document.write("梯形田面积:" + mj) -``` -4. 第三章综合1 -```bash - let bmi = 23 - let jg - if (bmi < 20) { - jg = "体重过清" - } - if (bmi > 20 && bmi < 25) { - jg = "体重适中" - } - if (bmi > 25 && bmi < 30) { - jg = "体重过重" - } - if (bmi > 30 && bmi < 35) { - jg = "体重肥胖" - } - if (bmi > 35) { - jg = "非常肥胖" - } - document.write("BMI:" + bmi) - document.write("
      "); - document.write("结果:" + jg) -``` -5. 第三章综合2 -```bash - - document.write("") - document.write(""); - document.write(""); -``` -6. 电影院 -```bash - document.write(""); - for (let c = 1; c < 5; c++) { - document.write(""); - - for (let f = 1; f < 11; f++) { - if (c == 3 && f == 5) { - document.write(""); - continue; - } - if (c == 3 && f == 6) { - document.write(""); - continue; - } - document.write(""); - } - document.write(""); - } -``` -7. 综合3 -```bash - document.write("
      已售已售" + c + "排" + f + "座
      "); -for (let b = 0; b < 10; b++) { - document.write(""); - for (let c = 1; c < 11; c++) { - let mub = b * 10 + c - document.write(""); - - } - document.write(""); - } - document.write("
      " + mub + "
      "); \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251114-\344\275\234\344\270\232.md" "b/\345\274\240\346\265\267\346\264\213/20251114-\344\275\234\344\270\232.md" deleted file mode 100644 index 9472f9ee83088a6e76a6dd27358ff7e22672c883..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251114-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,104 +0,0 @@ -1. 第三章训练1 - ```bash - let aa = 26 - let bb = 17 - let cc = 10 - let dd = 20 - let num = aa - if (num > bb) { - num = bb - } - if (num > cc) { - num = cc - } - if (num > dd) { - num = dd - } - document.write(num); -``` -2. 第三章训练2 -```bash - let j, t, header, foot - - - for (j = 1; j < 36; j++) { - for (t = 35; t > 0; t--) { - if (j + t == 35 && j * 2 + t * 4 == 94) { - document.write("鸡:" + j + "兔:" + t) - } - } - } -``` -2. 第三章训练2 -```bash - let apii = 23 - let api - if (apii <= 100) { - api = "良好" - } - if (apii > 100 && apii <= 200) { - api = "轻度污染" - } - if (apii > 200 && apii <= 300) { - api = "重度污染" - } - - document.write("api:" + apii) - document.write("
      "); - document.write("结果:" + api) - document.write("
      "); - document.write("
      "); -``` -3. 第三章训练3 -```bash - - let jj = 3000 - let gg = 0 - do { - gg++ - money = jj + gg * 50 - 50 - document.write(`第${gg}年工资为:${money}`); - document.write("
      "); - } - while (gg < 5) { - - } -``` -6. 第三章训练6 -```bash - let sum, yy - sum = 0 - for (yy = 1; yy < 1001; yy++) { - if (yy % 65 !== 0) { - continue; - } - else { - sum += yy; - document.write(yy + "
      "); - document.write(sum + "
      "); - } - } - document.write("
      "); - document.write("
      "); -``` -7. 第三章训练7 -```bash - document.write("尚未使用:"); - document.write(""); - for (let c = 1; c < 4; c++) { - document.write(""); - - for (let f = 1; f < 4; f++) { - if (c == 1 && f == 3) { - - continue; - } - if (c == 3 && f == 2) { - - continue; - } - document.write(""); - } - document.write(""); - } -``` \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251117-\345\207\275\346\225\260.md" "b/\345\274\240\346\265\267\346\264\213/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index de6f2d1efbf6af0264a7317ada81dd6e12695bac..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,236 +0,0 @@ -## 笔记 -## 函数的定义 -在一个页面定义的函数名称必须唯一 -1. 匿名函数定义: - let getNameById = funstion(){ - } -2. 第一种定义方式传统 原始方式 - funstion getNameById(){ - } -3. 箭头: - let getNameById = () = >{ - } -arguments:用于调用函数时传入的参数(实际参数) -## 函数的返回值 -有return,则有返回值,而通常不为undefined -无return,总是私下返回一个undefined -## 内置函数 - paresInt():将字符型转换为整型 - (首位为数字的字符串转换成数字,如果字符串不是以数字开头,将返回NaN) - - parseFloat():将字符型转换为浮点型 - - iSNaN():判断一个数值是否为NaN - 如果num为NaN,返回值为true,否则为false - - isFinite():判断一个数值是否有限 - - eval():求字符串中表达式的值 - - ecodeURI():将URL字符串进行编码 - - decodeURL():对已编码的URL字符串进行解码 -# 作业 -## 实训一 -```bash - -``` -## 实训二 -```bash - -``` -## 实训三 -```bash - -``` -## 实训四 -```bash - -``` -## 实训五 -``` - -``` -## 实训六 -```bash - -``` -## 实训七 -```bash - - - - -``` -```js - - -

      - -``` -```js - - -``` -```js - - - -
      -

      行路难·其一

      -

      〔唐代〕李白

      -

      金樽清酒斗十千,玉盘珍羞直万钱。

      -

      停杯投箸不能食,拔剑四顾心茫然。

      -

      欲渡黄河冰塞川,将登太行雪满山。

      -

      闲来垂钓碧溪上,忽复乘舟梦日边。

      -

      行路难!行路难!多歧路,今安在?

      -

      长风破浪会有时,直挂云帆济沧海。

      -
      - - -``` -```js - - -
      点击打开图片
      - - - - -``` -```js - - - - -
      - -``` diff --git "a/\345\274\240\346\265\267\346\264\213/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\274\240\346\265\267\346\264\213/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 9b2bdacad4d608a08237ac2d45bfacca7c65ad19..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,442 +0,0 @@ -# 笔记 -## 一、核心认知 -1. **本质**:HTML/XML 文档的树形节点映射,JS 操作页面的接口,`document` 为操作入口。 -2. **关键节点**:元素节点(操作核心,`nodeType=1`)、文本节点(`nodeType=3`)、文档节点(`document`,`nodeType=9`)。 -3. **层级**:`window→document→html→head/body→子元素`。 - -## 二、核心操作 -### 1. 元素选择 -| 方法 | 核心特点 | -|---------------------|---------------------------| -| `getElementById` | 性能最优,返回单个元素 | -| `getElementsBy*` | 动态集合,元素变化自动同步| -| `querySelector/All` | 支持CSS选择器,后者返回静态集合 | - -### 2. 节点操作 -- **创建插入**:`createElement`(创元素)、`createTextNode`(创文本,防XSS)、`appendChild`/`insertBefore`(插入)。 -- **删除替换**:`node.remove()`(自删)、`removeChild`(父删子)、`replaceChild`(替换)。 -- **安全**:优先`textContent`,慎用`innerHTML`。 - -### 3. 样式与属性 -- 样式:`elem.style`(行内)、`classList`(类名操作,推荐)、`getComputedStyle`(计算样式,只读)。 -- 属性:`getAttribute`/`setAttribute`(原生属性)、`dataset`(`data-*`属性)。 - -## 三、事件与优化 -1. **事件**:推荐`addEventListener`,关键事件`DOMContentLoaded`(初始化)、`beforeunload`(页面卸载提示);事件委托适配动态元素。 -2. **性能优化**:缓存元素、批量操作(`DocumentFragment`)、避免同步重排、高频事件节流防抖、删元素前解绑事件。 - -# 代码 -```js - - - - -
      - -``` - -```js - - - -
      -
      - 夜空中最亮的星
      - 能否听清
      - 那仰望的人
      - 心底的孤独和叹息
      - 夜空中最亮的星
      - 能否记起
      - 曾与我同行
      - 消失在风里的身影 -
      - -``` -```js - - - - - - -
        -
      • 1. 热辣滚烫
      • -
      • 2. 飞驰人生3
      • -
      • 3. 哪吒之魔童闹海
      • -
      • 4. 唐探1900
      • -
      - -``` -```js - - - - - -
      -

      蔬菜列表

      -
        -
      • 西红柿
      • -
      • 黄瓜
      • -
      • 香蕉
      • -
      • 胡萝卜
      • -
      -
      -
      -

      水果列表

      -
        -
      • 苹果
      • -
      • 橙子
      • -
      • 菠菜
      • -
      • 草莓
      • -
      -
      - -``` -```js - - - - -
      -

      金庸《射雕英雄传》中,郭靖的降龙十八掌师从谁?

      -
      - -
      - -
      - - -
      - -
      -
      - -``` -```js - - - - - -
      - 百度 - -
      - -``` -```js - - - - - -
      - -
      -
      - -``` -```js - - - - -
      - 一生只爱一人 - - 点击将文本改为斜体 -
      - -``` -```js - - - - -
      - - - - - - -
      - -``` -```js - - - - -
      - - 选中的表情 -
      - \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251205-Window\345\257\271\350\261\241.md" "b/\345\274\240\346\265\267\346\264\213/20251205-Window\345\257\271\350\261\241.md" deleted file mode 100644 index 4fa07c14f40b181d44a07cb33f52bb2ebb8cf74b..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251205-Window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,330 +0,0 @@ -# 笔记 -## 一、核心定位 -1. **顶级对象**:浏览器全局作用域载体,所有全局变量/函数(`var`声明)均为其属性,可省略`window`直接调用;全局`this`指向`window`。 -2. **核心子对象**:包含`document`(DOM操作入口)、`location`(URL操作)、`history`(历史记录)、`navigator`(浏览器信息)、`localStorage/sessionStorage`(本地存储)等。 - -## 二、窗口基础操作 -1. **尺寸与滚动** - - 视口尺寸:`innerWidth/innerHeight`(含滚动条)、`document.documentElement.clientWidth`(不含,推荐); - - 滚动操作:`scrollTo(x,y)`(指定位置)、`scrollBy(dx,dy)`(相对滚动),支持`behavior:'smooth'`实现平滑滚动。 -2. **打开/关闭** - - `window.open()`打开新窗口(需用户交互触发,否则易被拦截),`close()`关闭窗口(仅脚本打开的窗口可自由关闭)。 - -## 三、全局方法 -1. **弹窗类**:`alert()`(提示)、`confirm()`(确认,返回布尔值)、`prompt()`(输入,返回字符串/`null`),均会阻塞代码执行。 -2. **定时器**:`setTimeout`(延迟执行)、`setInterval`(定时重复),需用`clearTimeout/clearInterval`清除;高性能动画优先用`requestAnimationFrame`。 - -## 四、核心事件 -- `load`(资源全加载,触发晚)、`resize`/`scroll`(高频事件,需节流优化)、`beforeunload`(页面卸载前提示保存)、`focus/blur`(窗口焦点变化)。 - -## 五、本地存储 -| 特性 | localStorage | sessionStorage | -|--------------|--------------------|--------------------| -| 有效期 | 永久(手动清除)| 会话结束失效 | -| 作用域 | 同源所有窗口共享 | 仅当前窗口/标签页 | -| 注意 | 仅存字符串,复杂数据需`JSON`序列化,不存敏感信息 | - -# 代码 -```html - -
      - - - -
      -
      - - -``` - -- 训练2 - -```html - - - -
      歌名错误!
      - -

      -
      - 11111111111111111
      - 111111111111111111
      - 11111111111111111111
      - 1111111111111111111111111 -
      - - - -``` - -- 训练3 - -```html - -

      最新电影资讯

      -
      -

      1.《金蝉脱壳》两大动作巨星联手

      -

      2.《啊甘正传》励志而传奇的一生

      -

      3.《爱乐之城》爱情与梦想的交织

      -

      4.《头号玩家》游戏梦想照进现实

      -
      - - - - - - - -``` - -- 训练4 - -```html - - - - -
      -
      -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 杧果
      • -
      -
      - -
      -
        -
      • 西瓜
      • -
      • 蜜橘
      • -
      • 萝卜
      • -
      -
      -
      - - - -``` - -- 训练5 - -```html - -

      在《倚天屠龙记》中,张三丰是______派的掌门?

      -
      -
      - - - - - -
      - - - - -``` - -- 综合1 - -```html - -
      - jnccuicausncuass -
      - 将粗体字改为斜体 - - - -``` - -- 综合2 - -```html - - 年 - - 月 - - 日 - - - -``` - -- 综合3 - -```html - - -
      - -
      - - -``` \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\274\240\346\265\267\346\264\213/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 205e04c9d629503ce9c07edbb59aa8aa0705f647..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,39 +0,0 @@ -# 笔记 -### 1. window -- 作用:控制浏览器窗口、全局弹窗、定时器 -- 必记语法: - - 弹窗:`alert("提示")`、`confirm("确认?")`(返回布尔值)、`prompt("输入:", "默认值")`(返回输入内容) - - 定时器:`setTimeout(函数, 毫秒)`(延迟执行1次)、`setInterval(函数, 毫秒)`(重复执行)、`clearInterval(定时器ID)`(停止) - - 窗口信息:`innerWidth`/`innerHeight`(可视区宽高) - -### 2. document -- 作用:操作当前HTML页面(隶属于BOM的window) -- 必记语法: - - 获取信息:`document.URL`(当前URL)、`document.title`(页面标题,可修改) - - 操作元素:`getElementById("id")`(通过ID找元素)、`document.body`(获取body元素) - - 修改样式:`document.body.style.backgroundColor = "black"` - -### 3. location -- 作用:控制URL、跳转、刷新 -- 必记语法: - - 跳转:`location.href = "https://xxx.com"`(设置URL) - - 刷新:`location.reload()`(true强制刷新) - - 获取信息:`location.host`(主机名)、`location.search`(URL参数?后面部分) - -### 4. history -- 作用:浏览器前进/后退 -- 必记语法: - - 后退:`history.back()`(等价浏览器后退键) - - 前进:`history.forward()`(等价浏览器前进键) - - 跳转:`history.go(数字)`(正数前进、负数后退,如go(-1)=back()) - -### 5. navigator -- 作用:获取浏览器/设备信息 -- 必记语法: - - 判断设备:`/Mobile|Android|iOS/.test(navigator.userAgent)`(是否移动设备) - - 基础信息:`navigator.appName`(浏览器名)、`navigator.platform`(操作系统) - -## 二、核心区别 -- BOM:操作**浏览器**(窗口、地址栏、历史记录) -- DOM:操作**页面元素**(HTML文档内容) -- 关系:DOM是BOM的子集(`window.document`) diff --git "a/\345\274\240\346\265\267\346\264\213/20251210-style\345\257\271\350\261\241.md" "b/\345\274\240\346\265\267\346\264\213/20251210-style\345\257\271\350\261\241.md" deleted file mode 100644 index bfc2e908b02af7e231f0546e072387ec109822c5..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251210-style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,180 +0,0 @@ -# Style笔记 -## 一、核心定位 -- `element.style`:仅操作**行内样式**(style="" 中的样式),返回 CSSStyleDeclaration 对象; -- 读取最终生效样式(含内嵌/外部样式):用 `window.getComputedStyle(element)`(只读,不可直接修改)。 - -## 二、属性操作核心规则 -1. **命名转换**:CSS 短横线式 → JS 驼峰式(如 `background-color` → `backgroundColor`,前缀如 `-webkit-` 保留后驼峰); -2. **值的要求**: - - 数值类属性(width/height 等)必须带单位(px/rem/%),且为字符串; - - CSS 关键字(auto/none/none)需用字符串包裹; -3. **优先级**:行内样式优先级最高(!important 除外)。 - -## 三、常用操作 -1. **单样式**:`element.style.属性 = 值`(写)、`element.style.getPropertyValue('属性名')`(读行内); -2. **批量样式**:`element.style.cssText = "样式1; 样式2"`(覆盖原有行内样式,拼接可保留); -3. **移除样式**:`element.style.removeProperty('属性名')`。 - -## 四、核心避坑点 -1. `element.style.xxx` 仅读手动设置的行内样式,未设置返回空,读最终样式用 `getComputedStyle`; -2. `getComputedStyle` 返回值只读,修改样式需通过 `element.style`; -3. 浏览器前缀属性(如 transform)需检测存在性后使用(如 `webkitTransform`/`msTransform`); -4. 避免直接写复合属性(如 border),拆分更易维护(特殊场景用 cssText 除外)。 - -# 作业: -## 1 -```js -
      我是你爸爸真伟大,养你这么大还是不听话
      - - - -``` -## 2 -```js -图片 - -``` -## 3 -```js -
      -
      HTML/CSS讨论区
      -
      JavaScript讨论区
      -
      C语言讨论区
      -
      Java讨论区
      -
      Android讨论区
      -
      Python讨论区
      -
      - - -``` - -## 4 -```js - - - - - 1 - 2 - 3 - - -``` - diff --git "a/\345\274\240\346\265\267\346\264\213/20251211-From\345\257\271\350\261\241.md" "b/\345\274\240\346\265\267\346\264\213/20251211-From\345\257\271\350\261\241.md" deleted file mode 100644 index 752d631d2c897e54d117f3db1eebe3c9a213fa9b..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251211-From\345\257\271\350\261\241.md" +++ /dev/null @@ -1,253 +0,0 @@ -# Form对象笔记 -## 一、核心定位 -Form 对象是操作 `` 表单的核心接口,封装表单控件、提交逻辑和验证能力,核心依赖 `elements` 集合操作表单控件。 - -## 二、获取方式(优先级) -1. `document.getElementById('formId')`(精准推荐); -2. `document.forms['formName']`/`document.forms[索引]`(兼容/批量); -3. 表单内元素反向获取:`input.form`。 - -## 三、控件操作核心 -### 1. 定位控件 -`form.elements.控件name`(推荐)/`form.elements[索引]`,单选/复选框同名返回**控件集合**。 - -### 2. 取值/赋值规则 -| 控件类型 | 获取值 | 设置值 | -|----------------|-------------------------|---------------------------------| -| 文本/密码/文本域 | `input.value` | `input.value = '内容'` | -| 单选框 | 找 `checked=true` 的value | `form.elements.name.value = '值'` | -| 复选框 | `checkbox.checked` | `checkbox.checked = true/false` | -| 下拉框 | `select.value` | `select.value = '选项值'` | -| 文件框 | `input.files`(只读)| 无法手动赋值(仅用户选择/拖放) | - -## 四、提交与验证 -### 1. 提交控制 -- 手动提交:`form.submit()`(不触发 `onsubmit`); -- 阻止默认提交:`e.preventDefault()`(异步提交必用); -- 推荐方式:监听 `submit` 事件,自定义逻辑后异步提交。 - -### 2. 验证 -- 原生验证:`form.checkValidity()`(校验返回布尔)、`form.reportValidity()`(校验+弹窗提示); -- 自定义验证:控件 `setCustomValidity('错误提示')`(清空需设空字符串)。 - -## 五、FormData 关键(异步提交) -1. 快速收集表单数据:`new FormData(form)`(自动含所有控件值,支持文件); -2. 可手动追加:`formData.append('key', '值')`; -3. 异步提交:`fetch`/`axios` 中直接作为 `body`,自动处理编码。 - -## 六、核心坑点 -1. 单选/复选框同名需遍历集合找 `checked=true` 的值,不可直接取 `value`; -2. `form.submit()` 不触发 `onsubmit` 事件,验证需监听 `submit` 事件; -3. 文件输入框 `value` 只读,仅能用户操作; -4. 下拉框直接设 `select.value` 即可选中,无需遍历 option(特殊场景除外)。 - -# 作业 - -## 1 -```js -输入兑换码:
      - -
      - - -``` -## 2 -```js - - - - - - -``` - -## 3 -```js - -

      选择课程(最多选6门)

      - 语文
      - 数学
      - 英语
      - 物理
      - 化学
      - 生物
      - 历史
      - 地理
      - - -``` -## 4 - -```js - - -

      选择题:2024年奥运会举办城市是?

      - - A. 罗马
      - B. 北京
      - C. 巴黎
      - D. 伦敦
      - - - - - -``` - -## 5 -```js - -

      选择兴趣爱好

      - - 阅读
      - 运动
      - 听歌
      - 编程
      - 旅游
      - - - - - - - - - -``` - - -## 6 -```js - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251212-API.md" "b/\345\274\240\346\265\267\346\264\213/20251212-API.md" deleted file mode 100644 index d4e8a19aca55bbc5f55795142cfac83c521e4045..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251212-API.md" +++ /dev/null @@ -1,24 +0,0 @@ -# JS 核心知识点笔记(JSON + Fetch API) -## 一、JSON -### 1. 核心概念 -JSON(JavaScript Object Notation):轻量级数据交换格式,跨语言、易读易解析,是前后端数据交互的主流格式。 - -### 2. 核心方法(必记) -| 方法 | 作用 | 示例 | -|------|------|------| -| `JSON.parse()` | 把JSON字符串 → JS对象/数组(处理后端返回数据) | `const obj = JSON.parse('{"name":"张三","age":20}')` | -| `JSON.stringify()` | 把JS对象/数组 → JSON字符串(向后端发送数据) | `const str = JSON.stringify({name:"张三",age:20})` | - -### 3. 关键注意点 -- 键名必须用**双引号**包裹(单引号/无引号均无效); -- 不支持函数、undefined 类型(序列化时会被忽略)。 - -## 二、Fetch API -### 1. 核心概念 -现代浏览器原生异步网络请求接口,替代传统 XMLHttpRequest,基于 Promise 实现,语法更简洁。 - -### 2. 关键要点(避坑核心) -1. 响应处理:Response 对象需手动解析(`json()`/`text()` 等),且解析操作是异步的; -2. 错误处理:仅网络错误/请求无法完成时触发 `catch`,HTTP 错误(404/500等)需通过 `response.ok` 判断; -3. Cookie 配置:默认不携带 Cookie,需手动配置 `credentials: 'include'`; -4. 请求中断:支持 `AbortController` 中断正在进行的请求。 \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251215-200\351\201\223.md" "b/\345\274\240\346\265\267\346\264\213/20251215-200\351\201\223.md" deleted file mode 100644 index 792c7b92853c58714f424b3678ea19186d83a965..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251215-200\351\201\223.md" +++ /dev/null @@ -1,75 +0,0 @@ -```javascript - -const score = 85; -let grade; - -if (score >= 90) { - grade = "优秀"; -} else if (score >= 80) { - grade = "良好"; -} else if (score >= 60) { - grade = "及格"; -} else { - grade = "不及格"; -} -console.log(grade); -``` - -### 2. for循环计算1到n累加和 -```javascript - -const n = 100; -let sum = 0; - -for (let i = 1; i <= n; i++) { - sum += i; -} -console.log(sum); -``` - -### 3. 遍历数组输出所有偶数 -```javascript - -const arr = [1, 2, 3, 4, 5, 6, 7, 8]; -const evenArr = []; - -for (let num of arr) { - if (num % 2 === 0) { - evenArr.push(num); - } -} -console.log(evenArr); -``` - -### 4. 判断是否为质数 -```javascript - -const num = 17; -let isPrime = true; - -if (num <= 1) { - isPrime = false; -} else { - for (let i = 2; i <= Math.sqrt(num); i++) { - if (num % i === 0) { - isPrime = false; - break; - } - } -} -console.log(isPrime); -``` - -### 5. while循环找小于n的3的倍数 -```javascript - -const n = 20; -const result = []; -let i = 3; - -while (i < n) { - result.push(i); - i += 3; -} -console.log(result); -``` \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251217-200\351\201\223.md" "b/\345\274\240\346\265\267\346\264\213/20251217-200\351\201\223.md" deleted file mode 100644 index 817ad3b38f1d65effab57ea463bc6b802a55c0f4..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251217-200\351\201\223.md" +++ /dev/null @@ -1,116 +0,0 @@ -### 6. switch语句判断星期 -```javascript - -const dayOfWeek = 1; -let info; - -switch (dayOfWeek) { - case 1: - case 2: - case 3: - case 4: - case 5: - info = "今天是工作日,要上班"; - break; - case 6: - case 7: - info = "今天是休息日,可休息"; - break; - default: - info = "输入的星期数无效"; -} -console.log(info); -``` - -### 7. for...of循环遍历数组 -```javascript - -const fruits = ['苹果', '香蕉', '橙子']; - -for (let fruit of fruits) { - console.log(fruit); -} -``` - -### 8. for...in循环遍历对象属性 -```javascript - -const person = { name: "张三", age: 20, city: "北京" }; - -for (let key in person) { - console.log(`${key}: ${person[key]}`); - -} -``` - -### 9. break和continue控制循环 -```javascript - -const arr = [-10, 20, -5, 60, 30, 70]; -let target = null; - -for (let num of arr) { - if (num < 0) { - continue; - } - if (num > 50) { - target = num; - break; - } -} -console.log("第一个大于50的正数:", target); -``` - -### 10. 嵌套循环打印九九乘法表 -```javascript -for (let i = 1; i <= 9; i++) { - let line = ""; - for (let j = 1; j <= i; j++) { - line += `${j}*${i}=${j*i}&npsp`; - } - console.log(line); -} -``` - -### 11. 条件运算符 vs if-else -```javascript - -const age = 18; - - -const status1 = age >= 18 ? '成年' : '未成年'; -console.log("三元运算符结果:", status1); - -// if-else -let status2; -if (age >= 18) { - status2 = '成年'; -} else { - status2 = '未成年'; -} -console.log("if-else结果:", status2); -``` - -### 12. 猜数字游戏 -```javascript - -const randomNum = Math.floor(Math.random() * 100) + 1; -let guess; - -while (true) { - - guess = prompt("请猜1-100之间的数字:"); - guess = Number(guess); - - if (isNaN(guess)) { - alert("请输入有效数字!"); - } else if (guess > randomNum) { - alert("太大了,再猜猜!"); - } else if (guess < randomNum) { - alert("太小了,再猜猜!"); - } else { - alert("恭喜你,猜对了!"); - break; - } -} -``` \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251218-200\351\201\223.md" "b/\345\274\240\346\265\267\346\264\213/20251218-200\351\201\223.md" deleted file mode 100644 index c98724bcf754b94990ff5feaf4fe43df72c4a2dc..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251218-200\351\201\223.md" +++ /dev/null @@ -1,72 +0,0 @@ -```js -function sumArray(arr) { - let sum = 0; - for (let i = 0; i < arr.length; i++) { - sum += arr[i]; - } - return sum; -} - - -console.log("1. 数组求和:", sumArray([1, 2, 3, 4])); // 10 - - -function mergeArrays(arr1, arr2) { - - return [...arr1, ...arr2]; - -} - -console.log("2. 数组合并:", mergeArrays([1, 2, 3, 4], ['a', 'b', 'c', 1])); - - -function countItem(arr, item) { - let count = 0; - arr.forEach(element => { - if (element === item) count++; - }); - return count; -} - -console.log("3. 元素计数:", countItem([1, 2, 4, 4, 3, 4, 3], 4)); // 3 - - -function findDuplicates(arr) { - const countMap = {}; - const duplicates = []; - - - arr.forEach(item => { - countMap[item] = (countMap[item] || 0) + 1; - }); - - for (const key in countMap) { - if (countMap[key] > 1) { - duplicates.push(Number(key)); - } - } - return duplicates; -} - -console.log("4. 重复元素:", findDuplicates([1, 2, 4, 4, 3, 3, 1, 5, 3])); // [1,3,4] - - -function removeItem(arr, item) { - return arr.filter(element => element !== item); -} - -console.log("5. 删除元素:", removeItem([1, 2, 3, 4, 2, 5], 2)); // [1,3,4,5] - - -function getPassedStudents(students) { - return students - .filter(student => student.score >= 60) - .map(student => student.name); -} - -console.log("6. 及格学生:", getPassedStudents([ - {name: "小明", score: 85}, - {name: "小红", score: 55}, - {name: "小刚", score: 90} -])); -``` \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/20251219-200\351\201\223.md" "b/\345\274\240\346\265\267\346\264\213/20251219-200\351\201\223.md" deleted file mode 100644 index 96106276ff1f05966290ef0d174cad564cf16c3b..0000000000000000000000000000000000000000 --- "a/\345\274\240\346\265\267\346\264\213/20251219-200\351\201\223.md" +++ /dev/null @@ -1,164 +0,0 @@ -```js -function doubleNumbers(arr) { - return arr.map(num => num * 2); -} - -console.log("7. 数字乘2:", doubleNumbers([1, 2, 3, 4, 5])); // [2,4,6,8,10] - - -function filterOddNumbers(arr) { - return arr.filter(num => num % 2 !== 0); -} - -console.log("8. 筛选奇数:", filterOddNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9])); - - -function sumWithReduce(arr) { - return arr.reduce((acc, curr) => acc + curr, 0); -} - -console.log("9. reduce求和:", sumWithReduce([10, 20, 30, 40, 50])); // 150 - -// 10. reduce找最大值 -function findMaxWithReduce(arr) { - return arr.reduce((max, curr) => curr > max ? curr : max, arr[0]); -} - -console.log("10. reduce找最大值:", findMaxWithReduce([3, 7, 2, 9, 1, 5])); // 9 - -// 11. find找第一个大于10的数字 -function findFirstGreaterThan10(arr) { - return arr.find(num => num > 10); -} - -console.log("11. find找大于10:", findFirstGreaterThan10([2, 5, 8, 12, 15, 7])); // 12 - -// 12. findIndex找第一个负数索引 -function findFirstNegativeIndex(arr) { - return arr.findIndex(num => num < 0); -} - -console.log("12. findIndex找负数索引:", findFirstNegativeIndex([1, 5, 3, -2, 8, -5])); // 3 - -// 13. some判断是否存在偶数 -function hasEvenNumber(arr) { - return arr.some(num => num % 2 === 0); -} - -console.log("13. some判断偶数:", hasEvenNumber([1, 3, 5, 7, 8])); // true - -// 14. every判断所有数字大于0 -function allGreaterThanZero(arr) { - return arr.every(num => num > 0); -} - -console.log("14. every判断大于0:", allGreaterThanZero([1, 2, 3, 4, 5])); // true -console.log("14. every判断大于0(含负数):", allGreaterThanZero([1, -2, 3])); // false - -// 15. sort数字数组升序 -function sortNumbersAsc(arr) { - // 注意:sort会修改原数组,先复制再排序 - return [...arr].sort((a, b) => a - b); -} - -console.log("15. 数字升序:", sortNumbersAsc([40, 100, 1, 5, 25, 10])); - -// 16. 按对象属性排序(年龄) -function sortByAge(students) { - - return [...students].sort((a, b) => a.age - b.age); -} - -console.log("16. 按年龄排序:", sortByAge([ - {name: "小明", age: 20}, - {name: "小红", age: 18}, - {name: "小刚", age: 22} -])); - -// 17. forEach遍历输出索引和元素 -function logElementsWithIndex(arr) { - console.log("17. 遍历元素和索引:"); - arr.forEach((element, index) => { - console.log(`索引${index}: ${element}`); - }); -} - -logElementsWithIndex(['apple', 'banana', 'orange']); - -// 18. reduce扁平化二维数组 -function flattenArray(arr) { - return arr.reduce((acc, curr) => acc.concat(curr), []); -} - -console.log("18. 数组扁平化:", flattenArray([[1, 2], [3, 4], [5, 6]])); - -// 19. reduce统计元素出现次数 -function countElements(arr) { - return arr.reduce((acc, curr) => { - acc[curr] = (acc[curr] || 0) + 1; - return acc; - }, {}); -} - -console.log("19. 统计元素次数:", countElements(['apple', 'banana', 'apple', 'orange', 'banana', 'apple'])); - -// 20. 链式调用:筛选>50商品→排序→取名称 -function processProducts(products) { - return products - .filter(product => product.price > 50) - .sort((a, b) => a.price - b.price) - .map(product => product.name); -} - -console.log("20. 商品处理:", processProducts([ - {name: "鼠标", price: 29}, - {name: "键盘", price: 89}, - {name: "显示器", price: 899}, - {name: "耳机", price: 199} -])); - -// 21. map+filter:乘2后筛选>10 -function doubleAndFilter(arr) { - return arr - .map(num => num * 2) - .filter(num => num > 10); -} -// 测试 -console.log("21. 乘2筛选:", doubleAndFilter([2, 5, 8, 3, 9])); - -// 22. reduce数组去重 -function uniqueArray(arr) { - return arr.reduce((acc, curr) => { - if (!acc.includes(curr)) { - acc.push(curr); - } - return acc; - }, []); -} -console.log("22. reduce去重:", uniqueArray([1, 2, 2, 3, 4, 4, 5, 1])); - -// 23. 计算学生平均分 -function calculateAverageScore(students) { - const total = students.reduce((sum, student) => sum + student.score, 0); - return total / students.length; -console.log("23. 平均分:", calculateAverageScore([ - {name: "小明", score: 85}, - {name: "小红", score: 92}, - {name: "小刚", score: 78}, - {name: "小丽", score: 88} -])); // 85.75 - -// 24. filter+map:筛选成年人并格式化 -function formatAdults(users) { - return users - .filter(user => user.age >= 18) // 筛选成年人 - .map(user => `${user.name}(${user.age}岁)`); // 格式化字符串 -} - -console.log("24. 格式化成年人:", formatAdults([ - {name: "张三", age: 17}, - {name: "李四", age: 20}, - {name: "王五", age: 25}, - {name: "赵六", age: 16} -])); -``` \ No newline at end of file diff --git "a/\345\274\240\346\265\267\346\264\213/imag/1110-1.png" "b/\345\274\240\346\265\267\346\264\213/imag/1110-1.png" deleted file mode 100644 index 6e7c2e692df71344972d82c1854a12d40cde2a0f..0000000000000000000000000000000000000000 Binary files "a/\345\274\240\346\265\267\346\264\213/imag/1110-1.png" and /dev/null differ diff --git "a/\345\274\240\346\265\267\346\264\213/imag/1110-2.png" "b/\345\274\240\346\265\267\346\264\213/imag/1110-2.png" deleted file mode 100644 index 12c2dfc44963efd4846df4f3507c7ee65816aeda..0000000000000000000000000000000000000000 Binary files "a/\345\274\240\346\265\267\346\264\213/imag/1110-2.png" and /dev/null differ diff --git "a/\345\274\240\351\271\217\347\277\224/20251110.md" "b/\345\274\240\351\271\217\347\277\224/20251110.md" deleted file mode 100644 index 1852bb93c9410af73f62642755f0217660ba7676..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251110.md" +++ /dev/null @@ -1,137 +0,0 @@ -# JavaScript 引入 HTML 的三种方式 - -## 1. 行内引入(嵌入式) - -直接在 HTML 标签的事件属性中写入 JavaScript 代码。 - -```html - - - - 行内引入示例 - - - - - - -
      - 悬停变色 -
      - - - - - - - -``` - -## 2. 内部引入(内嵌式) - -在 HTML 文件内的 ` - - -``` - -## 3. 外部引入(文件式) - -将 JavaScript 代码写在单独的 `.js` 文件中,通过 `src` 属性引入。 - -### HTML 文件 (index.html) - -```html - - - - 外部引入示例 - - - - -

      - - - - - -``` - -### JavaScript 文件 (script.js) - -```javascript -// 等待DOM加载完成 -document.addEventListener("DOMContentLoaded", function () { - const btn = document.getElementById("btn"); - const input = document.getElementById("textInput"); - const output = document.getElementById("output"); - - btn.addEventListener("click", function () { - output.textContent = "你点击了按钮!"; - }); - - input.addEventListener("input", function () { - output.textContent = "输入内容: " + this.value; - }); -}); -``` - -## 总结对比 - -| 方式 | 优点 | 缺点 | 适用场景 | -| ------------ | ------------------ | ------------------ | -------------------- | -| **行内引入** | 简单快速,易于测试 | 代码混乱,难以维护 | 简单测试,小功能 | -| **内部引入** | 代码集中,易于管理 | 只能在当前页面使用 | 单页面应用,简单项目 | -| **外部引入** | 代码复用,易于维护 | 需要额外 HTTP 请求 | 中大型项目,团队开发 | - -## 老子名言 - -```html - -``` - -## 明日学院官网地址 - -- js 代码 - -```js -alert("http://www.mingrisoft.com"); -``` - -- html 代码 - -```html - -``` - - diff --git "a/\345\274\240\351\271\217\347\277\224/20251112.md" "b/\345\274\240\351\271\217\347\277\224/20251112.md" deleted file mode 100644 index 5317afef3f36f0961932f26703b4fc58d05f795b..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251112.md" +++ /dev/null @@ -1,27 +0,0 @@ -### 练习1 -```html -

      个人信息

      - -``` -### 练习2 -```html - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251113.md" "b/\345\274\240\351\271\217\347\277\224/20251113.md" deleted file mode 100644 index c5d59951f5cc43be8d7524a598dd677d6afa25e0..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251113.md" +++ /dev/null @@ -1,104 +0,0 @@ -### 练习1 -```html - -``` -### 练习2 -```html - -``` -### 练习3 -```html - -``` -### 练习4 -```html - -``` -### 练习5 -```html - -``` -### 练习6 -```html - -``` -### 练习7 -```html - -``` -### 练习8 -```html - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251114.md" "b/\345\274\240\351\271\217\347\277\224/20251114.md" deleted file mode 100644 index 32540df8673460316eae967534defc7d9ef23b79..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251114.md" +++ /dev/null @@ -1,107 +0,0 @@ -### 练习1 -```html - -``` -### 练习2 -```html - -``` -### 练习3 -```html - -``` -### 练习4 -```html - -``` -### 练习5 -```html - -``` -### 练习6 -```html - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251117.md" "b/\345\274\240\351\271\217\347\277\224/20251117.md" deleted file mode 100644 index 9cd0e71ac72377e6f35494989594dc38a45a9592..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251117.md" +++ /dev/null @@ -1,63 +0,0 @@ -## 流程控制 - -### 判断 -- if -- if()...else... -- if...else if().. -- if...else if()...else -- switch...case - -### 循环 -- for(let i=0;i<10;i++){} -- while -- do...while - -### 循环控制 -- continue -- break - -## 函数 -- 匿名函数定义 -- let 关键字 = function (){} - -- 第一种定义方式:传统,原始方式 -```js -function getNameById(){ - // arguments关键字用于捕获调用函数时传入的参数(实际参数) - console.log(argumeents); -} -``` -- 箭头函数 -```js - let getNameById = (name,age) =>{ - console.log(name); - console.log(age); - } -``` -### 定义和调用 -- 定义可指定形象 -- 调用的时候可任意指定实参,也可以不指定 - -### 返回值 -- 有return,则有返回值,而且通常不为undefined -- 无return,总是私下返回一个undefined - -### 练习1 -```html - -``` -### 练习2 -```html - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251119.md" "b/\345\274\240\351\271\217\347\277\224/20251119.md" deleted file mode 100644 index ddee73671a7c6099daa91851e2186fb2132026e8..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251119.md" +++ /dev/null @@ -1,243 +0,0 @@ -## 函数 -1. 函数参数 - -- function 自定义函数名(形参1,形参1,。。。){函数体} - -2.函数返回值 - -- 基本类型(字符串、数字):按值传递,函数内修改不影响外部变量 -- 引用类型(对象、数组):按引用传递,函数内修改属性 / 元素会影响外部\ - -```js -function abs(ooo){ - ooo.name="李四"; -} -const person = {name:"张三"}; -abs(person); -console.log(person.name)//输出李四 -``` - -- 用return语句指定返回值,执行后立即退出函数 -- 无return时,默认返回undefined -- 箭头函数可省略,return 和大括号(单表达式场景):const double = x=>2*2 - - -### 练习1 -```js - -``` - -### 练习2 -```js - -``` - -### 练习3 -```js - -``` - -### 练习4 -```js - -``` - -### 练习5 -```js - -``` - -### 练习6 -```js - - - - -
      - -``` - -### 练习7 -```js - -``` - -### 练习8 -```js - -``` - -### 练习9 -```js - -``` - diff --git "a/\345\274\240\351\271\217\347\277\224/20251120.md" "b/\345\274\240\351\271\217\347\277\224/20251120.md" deleted file mode 100644 index 297d08302d4be3b9c45887ac4c13de9c63255b65..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251120.md" +++ /dev/null @@ -1,318 +0,0 @@ -# JavaScript 内置对象用法总结 - -## 1. Math 对象 - -### 1.1 数学常数 - -```javascript -Math.PI; // 圆周率 π ≈ 3.14159 -Math.E; // 自然常数 e ≈ 2.718 -Math.SQRT2; // 2的平方根 ≈ 1.414 -``` - -### 1.2 取整方法 - -```javascript -Math.round(4.7); // 5 - 四舍五入 -Math.floor(4.7); // 4 - 向下取整 -Math.ceil(4.3); // 5 - 向上取整 -Math.trunc(4.7); // 4 - 去除小数部分 -``` - -### 1.3 随机数生成 - -```javascript -Math.random(); // 0-1之间的随机数 -Math.floor(Math.random() * 100); // 0-99的随机整数 -``` - -### 1.4 最大值最小值 - -```javascript -Math.max(1, 5, 3); // 5 - 返回最大值 -Math.min(1, 5, 3); // 1 - 返回最小值 -``` - -### 1.5 幂和平方根 - -```javascript -Math.pow(2, 3); // 8 - 2的3次方 -Math.sqrt(16); // 4 - 平方根 -Math.cbrt(8); // 2 - 立方根 -``` - -### 1.6 三角函数 - -```javascript -Math.sin(Math.PI / 2); // 1 - 正弦函数 -Math.cos(Math.PI); // -1 - 余弦函数 -Math.tan(Math.PI / 4); // 1 - 正切函数 -``` - -## 2. Date 对象 - -### 2.1 创建日期对象 - -```javascript -new Date(); // 当前时间 -new Date("2024-01-15"); // 指定日期字符串 -new Date(2024, 0, 15); // 指定年月日(月份0-11) -``` - -### 2.2 获取日期时间 - -```javascript -const now = new Date(); -now.getFullYear(); // 2024 - 年份 -now.getMonth(); // 0 - 月份(0-11) -now.getDate(); // 15 - 日期(1-31) -now.getDay(); // 1 - 星期(0-6) -now.getHours(); // 10 - 小时(0-23) -now.getMinutes(); // 30 - 分钟(0-59) -``` - -### 2.3 设置日期时间 - -```javascript -const date = new Date(); -date.setFullYear(2025); // 设置年份 -date.setMonth(5); // 设置月份(0-11) -date.setDate(20); // 设置日期 -date.setHours(15, 30, 0); // 设置小时、分钟、秒 -``` - -### 2.4 日期格式化 - -```javascript -const now = new Date(); -now.toString(); // "Mon Jan 15 2024 10:30:25 GMT+0800" -now.toDateString(); // "Mon Jan 15 2024" -now.toTimeString(); // "10:30:25 GMT+0800" -now.toLocaleString(); // "2024/1/15 10:30:25" -``` - -### 2.5 时间戳 - -```javascript -const now = new Date(); -now.getTime(); // 1705309825123 - 毫秒时间戳 -Date.now(); // 1705309825123 - 当前时间戳 -``` - -### 2.6 日期计算 - -```javascript -const date1 = new Date("2024-01-01"); -const date2 = new Date("2024-01-15"); -const diff = date2 - date1; // 1209600000 - 毫秒差 -const days = diff / (1000 * 60 * 60 * 24); // 14 - 天数差 -``` - -## 3. Event 对象 - -### 3.1 事件监听 - -```javascript -// 添加事件监听 -element.addEventListener("click", function (event) { - console.log("元素被点击了"); -}); - -// 移除事件监听 -function handleClick(event) { - console.log("点击事件"); -} -element.removeEventListener("click", handleClick); -``` - -### 3.2 事件对象属性 - -```javascript -element.addEventListener("click", function (e) { - e.target; // 触发事件的元素 - e.currentTarget; // 绑定事件的元素 - e.type; // "click" - 事件类型 - e.clientX; // 50 - 鼠标X坐标 - e.clientY; // 100 - 鼠标Y坐标 - e.key; // "Enter" - 按键名称 -}); -``` - -### 3.3 阻止默认行为 - -```javascript -// 阻止链接跳转 -link.addEventListener("click", function (e) { - e.preventDefault(); - console.log("阻止了默认跳转行为"); -}); - -// 阻止表单提交 -form.addEventListener("submit", function (e) { - e.preventDefault(); - console.log("阻止了表单提交"); -}); -``` - -### 3.4 阻止事件冒泡 - -```javascript -child.addEventListener("click", function (e) { - e.stopPropagation(); - console.log("子元素点击,阻止冒泡到父元素"); -}); - -parent.addEventListener("click", function () { - console.log("父元素点击"); // 不会执行 -}); -``` - -### 3.5 鼠标事件 - -```javascript -element.addEventListener("click", function (e) { - console.log("单击事件"); -}); - -element.addEventListener("dblclick", function (e) { - console.log("双击事件"); -}); - -element.addEventListener("mouseover", function (e) { - console.log("鼠标移入"); -}); - -element.addEventListener("mouseout", function (e) { - console.log("鼠标移出"); -}); -``` - -### 3.6 键盘事件 - -```javascript -document.addEventListener("keydown", function (e) { - console.log(`按下按键: ${e.key}, 键码: ${e.keyCode}`); -}); - -document.addEventListener("keyup", function (e) { - console.log(`释放按键: ${e.key}`); -}); -``` - -### 3.7 表单事件 - -```javascript -input.addEventListener("focus", function (e) { - console.log("输入框获得焦点"); -}); - -input.addEventListener("blur", function (e) { - console.log("输入框失去焦点"); -}); - -input.addEventListener("input", function (e) { - console.log("输入内容:", e.target.value); -}); - -input.addEventListener("change", function (e) { - console.log("内容改变:", e.target.value); -}); -``` - -### 3.8 事件委托 - -```javascript -// 使用事件委托处理动态元素 -list.addEventListener("click", function (e) { - if (e.target.tagName === "LI") { - console.log("点击了列表项:", e.target.textContent); - } -}); -``` - -## 训练 1~3 - -```html - -``` - - -## 综合练习 - -```html - -``` - diff --git "a/\345\274\240\351\271\217\347\277\224/20251121.md" "b/\345\274\240\351\271\217\347\277\224/20251121.md" deleted file mode 100644 index baa82fb91fee6f1d18d782f5a95b54b15719afae..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251121.md" +++ /dev/null @@ -1,231 +0,0 @@ -# JavaScript 数组用法总结 - -## 1. 创建数组 - -### 1.1 字面量创建 -```javascript -const arr = [1, 2, 3, 4, 5] -``` - -### 1.2 构造函数创建 -```javascript -const arr = new Array(1, 2, 3) -``` - -### 1.3 创建空数组 -```javascript -const empty = [] -const withSize = new Array(5) // 创建长度为5的空数组 -``` - -## 2. 访问和修改元素 - -### 2.1 访问元素 -```javascript -const arr = ['a', 'b', 'c'] -console.log(arr[0]) // 'a' - 访问第一个元素 -``` - -### 2.2 修改元素 -```javascript -arr[1] = 'x' // ['a', 'x', 'c'] -``` - -### 2.3 数组长度 -```javascript -console.log(arr.length) // 3 -``` - -## 3. 添加和删除元素 - -### 3.1 末尾添加(push) -```javascript -arr.push('d') // ['a', 'b', 'c', 'd'] -``` - -### 3.2 末尾删除(pop) -```javascript -arr.pop() // ['a', 'b'] - 返回删除的元素 -``` - -### 3.3 开头添加(unshift) -```javascript -arr.unshift('z') // ['z', 'a', 'b', 'c'] -``` - -### 3.4 开头删除(shift) -```javascript -arr.shift() // ['a', 'b', 'c'] - 返回删除的元素 -``` - -## 4. 数组遍历 - -### 4.1 for循环 -```javascript -for (let i = 0; i < arr.length; i++) { - console.log(arr[i]) -} -``` - -### 4.2 forEach方法 -```javascript -arr.forEach(item => console.log(item)) -``` - -### 4.3 for...of循环 -```javascript -for (const item of arr) { - console.log(item) -} -``` - -## 5. 数组转换方法 - -### 5.1 map - 映射新数组 -```javascript -const doubled = [1, 2, 3].map(x => x * 2) // [2, 4, 6] -``` - -### 5.2 filter - 过滤元素 -```javascript -const evens = [1, 2, 3, 4].filter(x => x % 2 === 0) // [2, 4] -``` - -### 5.3 reduce - 累计计算 -```javascript -const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0) // 6 -``` - -## 6. 查找和判断 - -### 6.1 find - 查找元素 -```javascript -const found = [1, 2, 3].find(x => x > 1) // 2 -``` - -### 6.2 includes - 包含检查 -```javascript -const hasTwo = [1, 2, 3].includes(2) // true -``` - -### 6.3 indexOf - 查找索引 -```javascript -const index = [1, 2, 3].indexOf(2) // 1 -``` - -## 7. 数组操作 - -### 7.1 slice - 切片 -```javascript -const arr = [1, 2, 3, 4, 5] -const part = arr.slice(1, 3) // [2, 3] - 不改变原数组 -``` - -### 7.2 splice - 删除/添加 -```javascript -arr.splice(1, 2, 'a', 'b') // 从索引1删除2个元素,添加'a','b' -``` - -### 7.3 concat - 合并数组 -```javascript -const newArr = [1, 2].concat([3, 4]) // [1, 2, 3, 4] -``` - -## 8. 排序和反转 - -### 8.1 sort - 排序 -```javascript -const sorted = [3, 1, 2].sort() // [1, 2, 3] -``` - -### 8.2 reverse - 反转 -```javascript -const reversed = [1, 2, 3].reverse() // [3, 2, 1] -``` - -## 9. 数组判断 - -### 9.1 Array.isArray -```javascript -Array.isArray([1, 2, 3]) // true -Array.isArray('hello') // false -``` - -### 9.2 every - 所有元素满足条件 -```javascript -const allPositive = [1, 2, 3].every(x => x > 0) // true -``` - -### 9.3 some - 至少一个元素满足条件 -```javascript -const hasNegative = [1, -2, 3].some(x => x < 0) // true -``` - -## 10. 字符串转换 - -### 10.1 join - 数组转字符串 -```javascript -const str = ['a', 'b', 'c'].join('-') // 'a-b-c' -``` - -### 10.2 split - 字符串转数组 -```javascript -const arr = 'a,b,c'.split(',') // ['a', 'b', 'c'] -``` - -## 11. 其他实用方法 - -### 11.1 fill - 填充数组 -```javascript -const filled = new Array(3).fill(0) // [0, 0, 0] -``` - -### 11.2 flat - 数组扁平化 -```javascript -const flattened = [1, [2, 3]].flat() // [1, 2, 3] -``` - -### 11.3 findIndex - 查找索引 -```javascript -const index = [1, 2, 3].findIndex(x => x > 1) // 1 -``` - -## 12. 数组解构 - -### 12.1 基本解构 -```javascript -const [first, second] = [1, 2, 3] // first=1, second=2 -``` - -### 12.2 跳过元素 -```javascript -const [first, , third] = [1, 2, 3] // first=1, third=3 -``` - -### 12.3 剩余元素 -```javascript -const [first, ...rest] = [1, 2, 3, 4] // first=1, rest=[2,3,4] -``` - -### 练习 -```js - let begin =new Date(2023,4,1); - let ending = new Date(2023,5,1); - - let abc = ending.getTime() - begin.getTime(); - let aab = abc/(1000*60*60); - document.write(`2023年5月1日到2023年6月1日 中间间隔:${aab}小时`); - - let a = new Date(); - let year = a.getFullYear(); - let month = a.getMonth() + 1; - let date = a.getDate(); - - let ending = new Date(2026,6,7); - - let abc = ending - a; - let getabc = abc/(1000*60*60*24); - document.write(`${eval(Math.ceil(getabc))}`) - - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251124.md" "b/\345\274\240\351\271\217\347\277\224/20251124.md" deleted file mode 100644 index b68dae2127f9f73fc263befa8c8f95ffe5fd5018..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251124.md" +++ /dev/null @@ -1,478 +0,0 @@ -## String 的笔记 -### 一、核心概念梳理 -|比较方式| 关键字 / 方法| 作用| 适用场景| -|---|-----|----|----| -|引用比较| ==| 比较对象在堆中的地址| 判断两个变量是否指向同一对象| -|值比较| equals()| 比较字符串的实际内容| 判断字符串内容是否相同| -|忽略大小写值比较| equalsIgnoreCase()| 内容比较,忽略大小写| 如验证码、用户名比较| -|自然顺序比较| compareTo()| 按字典序比较,返回 int| 排序、大小判断| - -### 二、关键原理补充 -- 字符串常量池: -- 直接赋值的字符串(如 String s1 = "abc")会存入常量池,相同值的字符串复用同一对象; -- new String("abc") 会在堆中创建新对象,即使值相同,地址也不同。 -- equals() 底层: -- String 重写了 Object 的 equals(),先判断地址,再逐字符比较内容。 -- compareTo() 规则: -- 返回 0:内容相同; -- 返回负数:当前字符串 < 参数字符串; -- 返回正数:当前字符串 > 参数字符串; -- (按字符的 Unicode 编码逐位比较,第一个不同字符的差值即为返回值) -### 三、完整代码示例 -```java -运行 -public class StringCompareDemo { - public static void main(String[] args) { - // 1. 基础场景:常量池 vs 堆对象 - String s1 = "Java"; // 常量池 - String s2 = "Java"; // 复用常量池对象 - String s3 = new String("Java"); // 堆新对象 - String s4 = new String("Java"); // 堆另一个新对象 - - // 引用比较 (==) - System.out.println("1. 引用比较 (==):"); - System.out.println("s1 == s2: " + (s1 == s2)); // true(同一常量池对象) - System.out.println("s1 == s3: " + (s1 == s3)); // false(地址不同) - System.out.println("s3 == s4: " + (s3 == s4)); // false(两个堆对象) - - // 2. 值比较 (equals()) - System.out.println("\n2. 值比较 (equals()):"); - System.out.println("s1.equals(s2): " + s1.equals(s2)); // true - System.out.println("s1.equals(s3): " + s1.equals(s3)); // true - System.out.println("s3.equals(s4): " + s3.equals(s4)); // true - - // 3. 忽略大小写比较 (equalsIgnoreCase()) - String s5 = "java"; - System.out.println("\n3. 忽略大小写比较:"); - System.out.println("s1.equals(s5): " + s1.equals(s5)); // false - System.out.println("s1.equalsIgnoreCase(s5): " + s1.equalsIgnoreCase(s5)); // true - - // 4. 字典序比较 (compareTo()) - String s6 = "C++"; - String s7 = "Python"; - String s8 = "Java"; - System.out.println("\n4. 字典序比较 (compareTo()):"); - System.out.println("s1.compareTo(s6): " + s1.compareTo(s6)); // 74-67=7(J的Unicode比C大7) - System.out.println("s1.compareTo(s7): " + s1.compareTo(s7)); // 74-80=-6(J比P小6) - System.out.println("s1.compareTo(s8): " + s1.compareTo(s8)); // 0(内容相同) - - // 5. 特殊场景:空字符串/Null - String s9 = ""; - String s10 = null; - System.out.println("\n5. 特殊场景:"); - // 空字符串equals空字符串:true - System.out.println("s9.equals(\"\"): " + s9.equals("")); - // 避免NullPointerException:先判断非空 - System.out.println("s10 == null ? " + (s10 == null)); - // System.out.println(s10.equals(s9)); // 会抛出NullPointerException - } -} -``` -### 四、输出结果 -plaintext -1. 引用比较 (==): -s1 == s2: true -s1 == s3: false -s3 == s4: false - -2. 值比较 (equals()): -s1.equals(s2): true -s1.equals(s3): true -s3.equals(s4): true - -3. 忽略大小写比较: -s1.equals(s5): false -s1.equalsIgnoreCase(s5): true - -4. 字典序比较 (compareTo()): -s1.compareTo(s6): 7 -s1.compareTo(s7): -6 -s1.compareTo(s8): 0 - -5. 特殊场景: -- s9.equals(""): true -- s10 == null ? true -- 五、避坑指南 -- 避免用 == 比较字符串内容:除非明确要判断是否为同一对象; -- Null 安全:调用 equals() 前,确保调用方非 null(或用 Objects.equals(a, b)); -```java -运行 -// 安全写法:避免NullPointerException -System.out.println(Objects.equals(s10, s9)); // false -常量池优化:String.intern() 可将堆字符串加入常量池,复用对象: -java -运行 -String s3 = new String("Java").intern(); -System.out.println(s1 == s3); // true -``` -### 总结 -- 比较内容:优先用 equals()(忽略大小写用 equalsIgnoreCase()); -- 比较地址:用 ==(仅特殊场景需要); -- 排序 / 大小:用 compareTo(); -- 空值处理:注意 Null 安全,推荐 Objects.equals()。 - -## 练习 - -```js - - - - 手机品牌销量排名 (Top 5) - - - - -
      - - - -``` - -### 练习2 ,3,4,5 -```js - let aug = Array("星期日","星期一","星期二","星期三","星期四","星期五","星期天") - let abc = new Date(); - let aaa = abc.getDay(); - let bbb = aug[aaa]; - document.write(`今天的日期是${bbb}`); - - let arr = new Array(5,7,6,3,9,2); - arr.sort(); - console.log(arr); - console.log(arr[5]); - - let aug = new Array(1,2,3,4,5,6); - let aaa = aug.slice(1,5); - console.log(aaa); - - let arr = new Array("长春", "昌图西", "铁岭西", "沈阳北", "绥中北", "北京"); - document.write("途径站:" + arr); - let aaa = arr.reverse(); - document.write("
      反向站:"+aaa); -``` - -### 练习6,7,8,9,10,11,12 -```js - -``` -### 练习13 -```js - - - -
      - - - - -
      - 对应字母: -
      -
      - - -``` -### 练习14 -```js - - - -
      -

      用户注册

      -
      - - -
      -
      - - -
      -
      - -
      -
      - - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251126.md" "b/\345\274\240\351\271\217\347\277\224/20251126.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\274\240\351\271\217\347\277\224/20251127.md" "b/\345\274\240\351\271\217\347\277\224/20251127.md" deleted file mode 100644 index 739528080446c0e51166d4c14e6db3347d61f0ef..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251127.md" +++ /dev/null @@ -1,495 +0,0 @@ -# JavaScript 异常处理和程序调试总结 - -## 异常处理基础 - -### try-catch 语句 - -```javascript -try { - // 可能出错的代码 - const result = someUndefinedVariable + 1; -} catch (error) { - // 错误处理 - console.log("发生错误:", error.message); -} -``` - -### try-catch-finally 语句 - -```javascript -try { - console.log("尝试执行代码"); - throw new Error("自定义错误"); -} catch (error) { - console.log("捕获错误:", error.message); -} finally { - console.log("无论是否出错都会执行"); -} -``` - -## 错误类型 - -### Error - 基本错误类型 - -```javascript -try { - throw new Error("这是一个错误"); -} catch (error) { - console.log(error.name); // 'Error' - console.log(error.message); // '这是一个错误' -} -``` - -### TypeError - 类型错误 - -```javascript -try { - const obj = null; - obj.someMethod(); // 尝试调用null的方法 -} catch (error) { - console.log(error.name); // 'TypeError' -} -``` - -### ReferenceError - 引用错误 - -```javascript -try { - console.log(undefinedVariable); // 未定义变量 -} catch (error) { - console.log(error.name); // 'ReferenceError' -} -``` - -### SyntaxError - 语法错误 - -```javascript -try { - eval("const 123abc = 1;"); // 无效的变量名 -} catch (error) { - console.log(error.name); // 'SyntaxError' -} -``` - -### RangeError - 范围错误 - -```javascript -try { - const arr = new Array(-1); // 无效的数组长度 -} catch (error) { - console.log(error.name); // 'RangeError' -} -``` - -### URIError - URI 错误 - -```javascript -try { - decodeURIComponent("%"); // 无效的URI编码 -} catch (error) { - console.log(error.name); // 'URIError' -} -``` - -## 自定义错误 - -### 创建自定义错误类 - -```javascript -class ValidationError extends Error { - constructor(message, field) { - super(message); - this.name = "ValidationError"; - this.field = field; - } -} - -try { - throw new ValidationError("邮箱格式不正确", "email"); -} catch (error) { - console.log(`${error.name}: ${error.message} (字段: ${error.field})`); -} -``` - -### 使用自定义错误 - -```javascript -function validateEmail(email) { - if (!email.includes("@")) { - throw new ValidationError("无效的邮箱地址", "email"); - } - return true; -} - -try { - validateEmail("invalid-email"); -} catch (error) { - if (error instanceof ValidationError) { - console.log(`验证错误: ${error.message}`); - } -} -``` - -## 错误处理模式 - -### 条件判断预防错误 - -```javascript -// 不好的做法 -function getLength(str) { - return str.length; // 如果str为null会出错 -} - -// 好的做法 -function getLengthSafe(str) { - if (str && typeof str === "string") { - return str.length; - } - return 0; -} -``` - -### 可选链操作符 - -```javascript -const user = { - profile: { - name: "John", - }, -}; - -// 传统方式 -const userName = user && user.profile && user.profile.name; - -// 可选链方式 -const userNameSafe = user?.profile?.name; -console.log(userNameSafe); // 'John' - -// 即使属性不存在也不会报错 -const userAge = user?.profile?.age; -console.log(userAge); // undefined -``` - -### 空值合并运算符 - -```javascript -const input = null; -const value = input ?? "默认值"; -console.log(value); // '默认值' - -const count = 0; -const result = count ?? 100; -console.log(result); // 0 (0不是null或undefined) -``` - -## 调试方法 - -### console 调试方法 - -```javascript -// 基本日志 -console.log("普通日志信息"); - -// 警告信息 -console.warn("警告信息"); - -// 错误信息 -console.error("错误信息"); - -// 信息分组 -console.group("用户信息"); -console.log("姓名: John"); -console.log("年龄: 30"); -console.groupEnd(); - -// 表格显示 -const users = [ - { name: "John", age: 30 }, - { name: "Jane", age: 25 }, -]; -console.table(users); - -// 计时功能 -console.time("操作计时"); -// 执行一些操作 -for (let i = 0; i < 1000000; i++) {} -console.timeEnd("操作计时"); // 操作计时: 2.345ms -``` - -### debugger 语句 - -```javascript -function complexCalculation(a, b) { - debugger; // 执行到这里会暂停 - const result = a * b; - return result; -} - -const answer = complexCalculation(5, 10); -console.log(answer); -``` - -### 堆栈跟踪 - -```javascript -function functionA() { - functionB(); -} - -function functionB() { - functionC(); -} - -function functionC() { - console.trace("调用堆栈跟踪"); // 显示调用堆栈 -} - -functionA(); -``` - -## 异步错误处理 - -### Promise 错误处理 - -```javascript -fetch("/api/data") - .then((response) => response.json()) - .then((data) => console.log(data)) - .catch((error) => console.error("请求失败:", error)); -``` - -### async/await 错误处理 - -```javascript -async function fetchData() { - try { - const response = await fetch("/api/data"); - const data = await response.json(); - return data; - } catch (error) { - console.error("获取数据失败:", error); - throw error; // 重新抛出错误 - } -} - -// 调用async函数 -fetchData().catch((error) => { - console.log("外部错误处理:", error); -}); -``` - -### Promise.all 错误处理 - -```javascript -const promises = [ - fetch("/api/users"), - fetch("/api/posts"), - fetch("/api/comments"), -]; - -Promise.all(promises.map((p) => p.catch((e) => e))).then((results) => { - results.forEach((result, index) => { - if (result instanceof Error) { - console.log(`请求 ${index} 失败:`, result.message); - } else { - console.log(`请求 ${index} 成功`); - } - }); -}); -``` - -## 全局错误处理 - -### window.onerror - -```javascript -window.onerror = function (message, source, lineno, colno, error) { - console.log("全局错误:", message); - console.log("错误文件:", source); - console.log("错误位置:", lineno, ":", colno); - return true; // 阻止浏览器默认错误处理 -}; -``` - -### unhandledrejection 事件 - -```javascript -window.addEventListener("unhandledrejection", function (event) { - console.log("未处理的Promise拒绝:", event.reason); - event.preventDefault(); // 阻止浏览器默认错误提示 -}); -``` - -## 性能调试 - -### 性能测量 - -```javascript -// 使用 performance API -performance.mark("start"); - -// 执行需要测量的代码 -for (let i = 0; i < 1000000; i++) {} - -performance.mark("end"); -performance.measure("循环执行时间", "start", "end"); - -const measure = performance.getEntriesByName("循环执行时间")[0]; -console.log(`执行时间: ${measure.duration}ms`); -``` - -### 内存使用检查 - -```javascript -// 检查内存使用情况 -const memory = performance.memory; -console.log("已使用内存:", memory.usedJSHeapSize); -console.log("内存限制:", memory.jsHeapSizeLimit); -console.log("总堆大小:", memory.totalJSHeapSize); -``` - -## 最佳实践 - -### 具体的错误信息 - -```javascript -// 不好的做法 -throw new Error("操作失败"); - -// 好的做法 -throw new Error("用户注册失败: 邮箱已被使用"); -``` - -### 适当的错误层级 - -```javascript -function processUserData(userData) { - try { - validateUserData(userData); - saveToDatabase(userData); - } catch (error) { - if (error instanceof ValidationError) { - // 处理验证错误 - showUserError(error.message); - } else { - // 处理系统错误 - logSystemError(error); - showGenericError(); - } - } -} -``` - -### 错误日志记录 - -```javascript -function logError(error, context = {}) { - const errorLog = { - timestamp: new Date().toISOString(), - message: error.message, - stack: error.stack, - type: error.name, - context: context, - }; - - // 发送到错误监控服务 - sendToErrorService(errorLog); - - // 开发环境下在控制台显示 - if (process.env.NODE_ENV === "development") { - console.error("错误详情:", errorLog); - } -} -``` - -## 训练 - -```html - -``` - -- 效果图 - -![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第九章训练.gif) - -## 综合 - -```html - -``` - -- 效果图 - ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第九章综合.gif) diff --git "a/\345\274\240\351\271\217\347\277\224/20251128.md" "b/\345\274\240\351\271\217\347\277\224/20251128.md" deleted file mode 100644 index ede572ac111d9e506064a13680880a936c415482..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251128.md" +++ /dev/null @@ -1,490 +0,0 @@ -## JavaScript 异常处理与程序调试笔记 -### 一、JavaScript 异常处理核心 -1. 异常的定义与类型 -- 本质:程序执行时偏离预期逻辑的意外事件,未处理会导致程序终止或产生错误输出。 -- 核心价值:增强程序健壮性(容错)、提升错误可排查性、优化用户体验。 -- JS 常见异常类型(基于 Error 类派生): -- 异常类型 -- 触发场景 -示例 -- SyntaxError(语法错误) -- 代码违反 JS 语法规则(编译期报错) -- let a = 10; const a = 20;(重复声明) -- ReferenceError(引用错误) -- 访问未声明的变量 / 函数 / 属性 -- console.log(undefVar); -- TypeError(类型错误) -- 操作不符合变量类型要求 -- const str = '123'; str.push(4); -- RangeError(范围错误) -- 数值超出有效范围 -- [].length = -1;(数组长度为负数) -- URIError(URI 错误) -- encodeURI/decodeURI 处理无效 URI 时 -- decodeURI('%');(不完整的编码字符) -- 自定义异常 -- 业务逻辑错误(如参数非法、接口请求失败) -- 用户 ID 为空、登录态失效 - -2. 异常处理基本原则 -- 不滥用捕获:仅捕获可预测的异常,避免用 catch (e) {} 吞掉所有错误; -- 错误信息明确:包含「场景 + 原因 + 关键参数」,便于排查; -- 可恢复优先:处理后尽量让程序回归正常流程(如默认值兜底、重试); -- 避免阻塞主线程:异步操作的异常需单独处理,不影响整体执行。 - -### 二、异常处理语法 -1. 基础结构:try-catch-finally -语法格式 -```js -try { - // 可能抛出异常的代码(如 DOM 操作、接口请求、类型转换) -} catch (error) { - // 捕获异常后的处理逻辑(如打印日志、提示用户) - console.error("异常触发:", error); -} finally { - // 无论是否异常,必执行的代码(如释放资源、关闭弹窗) -} -``` - -- 核心说明 -- try:包裹 “风险代码”,仅能有一个; -- catch (error):捕获 try 中抛出的异常,error 对象包含 3 个关键属性: -- name:异常类型(如 TypeError); -- message:异常描述信息(如 str.push is not a function); -- stack:异常调用栈(包含文件名、行号,排查核心); -- finally:可选,常用于清理资源(如关闭文件、取消请求),即使 try/catch 中有 return 也会执行。 -示例:处理类型错误 -```js -function formatData(data) { - try { - // 假设 data 应为对象,尝试获取属性 - return data.name || "默认名称"; - } catch (error) { - // 捕获类型错误(如 data 是 null/undefined/字符串) - if (error instanceof TypeError) { - console.error("数据格式错误:", error.message); - return "默认名称"; // 兜底返回 - } - // 非预期异常重新抛出,避免吞掉 - throw error; - } finally { - console.log("数据格式化流程结束"); - } -} - -formatData(123); // 输出:数据格式错误:Cannot read properties of number (reading 'name') → 返回 "默认名称" -``` - -2. 主动抛出异常:throw 语句 -- 语法格式 -- throw 异常对象; // 可抛出 Error 实例、字符串、数字等(推荐 Error 实例) - -- 最佳实践 -- 优先抛出 Error 派生实例(保留 stack 调用栈),而非纯字符串 / 数字; -- 用于业务异常(如参数校验失败),明确中断异常流程。 -- 示例:主动抛出业务异常 -```js -function login(username, password) { - // 参数校验:主动抛出异常 - if (!username) { - throw new Error("业务异常:用户名不能为空"); - } - if (password.length { - throw new TypeError("业务异常:密码长度不能小于 6 位"); - } - // 正常登录逻辑... -} - -try { - login("zhangsan", "123"); -} catch (error) { - console.error(error.message); // 输出:业务异常:密码长度不能小于 6 位 -} -``` - -3. 自定义异常类 -场景 -区分 “系统异常” 和 “业务异常”,便于精准处理(如业务异常提示用户,系统异常上报监控)。 -实现方式(继承 Error 类) -// 自定义业务异常类 -```js -class BusinessError extends Error { - constructor(code, message) { - super(message); // 继承 Error 的 message 属性 - this.name = "BusinessError"; // 自定义异常名称(默认是 Error) - this.code = code; // 自定义错误码(如 400 参数错误、401 未授权) - } -} - -// 使用自定义异常 -function getUserInfo(userId) { - if (!userId) { - throw new BusinessError(400, "用户 ID 不能为空"); - } - if (typeof userId !== "string") { - throw new BusinessError(400, "用户 ID 必须是字符串类型"); - } - // 正常获取用户信息逻辑... -} - -// 捕获并区分异常 -try { - getUserInfo(123); -} catch (error) { - if (error instanceof BusinessError) { - // 业务异常:提示用户 - alert(`错误(${error.code}):${error.message}`); - } else { - // 系统异常:上报监控 - console.error("系统异常:", error); - // reportErrorToMonitor(error); // 伪代码:上报监控 - } -} -``` - -4. 异步操作的异常处理 -```js -(1)回调函数(Callback) -无 try-catch 机制,通过 “错误优先回调”(第一个参数为 error)处理: -const fs = require("fs"); // Node.js 模块 - -// 错误优先回调:err 为 null 表示无异常 -fs.readFile("test.txt", "utf8", (err, data) => { - if (err) { - console.error("文件读取失败:", err.message); - return; - } - console.log("文件内容:", data); -}); - -(2)Promise -方式 1:then 的第二个参数(仅捕获当前 Promise 的异常); -方式 2:catch 方法(捕获整个 Promise 链的异常,推荐); -// 模拟异步接口请求 -function fetchData() { - return new Promise((resolve, reject) => { - setTimeout(() => { - const success = false; - if (success) { - resolve({ code: 200, data: "成功数据" }); - } else { - reject(new Error("接口请求失败:服务器错误")); // 主动 reject 抛出异常 - } - }, 1000); - }); -} - -// 异常处理 -fetchData() - .then( - (res) => console.log("结果:", res), - (err) => console.error("then 捕获异常:", err) // 仅捕获 fetchData 的异常 - ) - .catch((err) => { - console.error("catch 捕获异常:", err); // 捕获整个链的异常(包括 then 中的错误) - }); - -(3)async/await -支持 try-catch-finally 语法,异常处理更直观(推荐): -async function getData() { - try { - const res = await fetchData(); // 等待 Promise 完成 - console.log("结果:", res); - return res; - } catch (error) { - // 捕获 fetchData 抛出的异常,或 await 后的代码异常 - console.error("异步请求异常:", error.message); - return null; // 兜底返回 - } finally { - console.log("异步请求流程结束"); - } -} - -getData(); -``` - -### 三、JavaScript 程序调试技巧 -1. 基础调试:console 系列 -- (1)常用方法 -- 方法 -- 用途 -- 示例 -- console.log() -- 输出普通信息(支持多参数、模板字符串) -- console.log("用户数据:", user, age); -- console.error() -- 输出错误信息(红色标记,保留调用栈) -- console.error("参数错误:", err); -- console.warn() -- 输出警告信息(黄色标记) -- console.warn("数据格式过时"); -- console.table() -- 格式化输出数组 / 对象(表格形式) -- console.table([{name: "张三"}, {name: "李四"}]); -- console.dir() -- 详细打印对象结构(展开所有属性) -- console.dir(document.body); -- console.time()/console.timeEnd() -- 计算代码执行时间 -- console.time("循环耗时"); for(let i=0;i;i++); console.timeEnd("循环耗时"); - -(2)占位符用法 -- console.log("姓名:%s,年龄:%d,是否成年:%s", "张三", 20, true); -- // 输出:姓名:张三,年龄:20,是否成年:true -- // 占位符:%s(字符串)、%d(数字)、%o(对象)、%c(样式) -- console.log("%c重要提示", "color: red; font-size: 16px;"); // 带样式输出 - -2. 浏览器调试工具(Chrome 为例) --(1)调试面板核心功能(F12 打开) -- 面板 -- 用途 -- 关键操作 -- Sources -- 断点调试、查看源代码 -- 1. 点击行号添加断点;2. F5 刷新触发;3. 单步调试(F10 步过、F11 步入、Shift+F11 步出) -- Console -- 执行临时代码、查看日志 -- 输入变量名查看值,支持 $0(当前选中元素)、$_(上一次结果) -- Network -- 监控网络请求(接口、资源加载) -- 筛选 XHR/Fetch 请求,查看请求头、响应体、耗时 -- Application -- 查看存储(LocalStorage、Cookie)、DOM 结构 - -修改存储数据后实时测试 - -Elements -- 查看 / 修改 DOM 元素和 CSS 样式 -- 断点监听 DOM 变化(右键元素 → Break on) - -(2)断点调试进阶 -- 条件断点:右键断点 → Edit Condition,输入表达式(如 i === 10),仅当表达式为 - - true 时触发; -- 异常断点:Sources 面板 → 勾选 Break on exceptions(暂停图标旁),程序抛出异常时- 自动断点; -- 日志断点:右键断点 → Add log point,输入日志内容(如 循环到第 {i} 次),不中断程- 序仅输出日志。 -3. 调试避坑指南 -- 避免用 alert() 调试:阻塞主线程,无法查看对象结构,且影响异步操作; -- 异步代码调试:async/await 可直接断点,Promise 需在 then/catch 中加断点,或使用日志断点; -- 生产环境调试: -- 保留 source-map(映射压缩前的源代码),但注意安全(避免暴露敏感逻辑); -- 使用 console.debug() 输出调试信息(生产环境可通过浏览器过滤隐藏); -- 排查 NaN/undefined 问题: -- 用 Number.isNaN() 判断 NaN(避免 == NaN,因 NaN 不等于任何值); -- 用 typeof variable === "undefined" 判断未定义变量。 - -### 四、实战场景:异常处理最佳实践 - -1. 接口请求异常处理(fetch 示例) -```js -async function request(url, options = {}) { - try { - const response = await fetch(url, options); - // 处理 HTTP 错误(如 404、500,fetch 仅网络错误会 reject) - if (!response.ok) { - throw new Error(`HTTP 错误:${response.status},${response.statusText}`); - } - const data = await response.json(); - // 处理业务错误(如接口返回 code 非 200) - if (data.code !== 200) { - throw new BusinessError(data.code, data.message); - } - return data.data; - } catch (error) { - if (error instanceof BusinessError) { - alert(`操作失败:${error.message}`); - } else if (error.message.includes("Failed to fetch")) { - alert("网络异常,请检查网络连接"); - } else { - console.error("请求异常:", error); - alert("系统异常,请稍后重试"); - } - return null; - } -} -``` -2. 函数参数校验异常 -```js -function calculateTotal(price, quantity) { - // 参数类型校验 - if (typeof price !== "number" || typeof quantity !== "number") { - throw new TypeError("价格和数量必须是数字类型"); - } - // 参数范围校验 - if (price < 0 || quantity < 0) { - throw new RangeError("价格和数量不能为负数"); - } - return price * quantity; -} - -// 使用时捕获异常 -try { - const total = calculateTotal(100, "5"); // 第二个参数是字符串 - console.log("总价:", total); -} catch (error) { - console.error("计算失败:", error.message); -} -``` -3. 全局异常捕获(兜底处理) -// 捕获同步代码异常 -```js -window.addEventListener("error", (event) => { - console.error("全局同步异常:", event.error); - // 上报监控(伪代码) - // reportError({ - // type: "sync", - // message: event.error.message, - // stack: event.error.stack, - // url: event.filename, - // line: event.lineno, - // column: event.colno - // }); - event.preventDefault(); // 阻止浏览器默认错误提示 -}); - -// 捕获 Promise 未处理的异常(如未加 catch 的 Promise reject) -window.addEventListener("unhandledrejection", (event) => { - console.error("全局 Promise 异常:", event.reason); - // 上报监控 - event.preventDefault(); // 阻止浏览器默认提示 -}); -``` - -五、核心总结 -- 异常处理:优先用 try-catch-finally(同步 /async/await)、Promise.catch(Promise),避免吞掉异常; -- 异常类型:区分系统异常(TypeError 等)和业务异常(自定义 BusinessError),精准处理; -- 调试技巧:浏览器 Sources 面板断点调试 + console 系列工具,高效定位问题; -- 最佳实践:参数校验前置、异常信息明确、全局兜底捕获、生产环境保留调试能力且兼顾安全。 - -## 练习 -```js -

      第一题

      -
      - -
      - -

      第二题

      -中国的“国球”是( )
      -篮球 -排球 -乒乓球 -羽毛球 - -

      第三题

      - - -

      欢迎访问本网站当前时间为:

      - - - -

      第四题

      - - -

      宽度:

      -

      高度:

      - - - -

      第五题

      -
      - - - -
      - - -

      第六题

      -
      - - -

      第七题

      - - 用户名:
      - 密 码:
      -
      - - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251201.md" "b/\345\274\240\351\271\217\347\277\224/20251201.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\345\274\240\351\271\217\347\277\224/20251203.md" "b/\345\274\240\351\271\217\347\277\224/20251203.md" deleted file mode 100644 index 3482a9b32711b0542ca041ac282e41b3de8f222d..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251203.md" +++ /dev/null @@ -1,214 +0,0 @@ -## 笔记 -1.getElementById()方法返回具有指定ID的元素。 -2.getElementsByTagName()方法返回具有指定标签名的元素集合。 -3.getElementsByName()方法返回具有指定类名的对象集合。 -4.querySelector()方法返回匹配指定CSS选择器的第一个元素 -5.querySelectorAll()方法返回匹配指定CSS选择器的所有元素 -6.createElement()方法用于创建一个新的元素节点 - -## 练习 -### 练习1,2 -``` js - - - - - -``` - -### 练习3 -``` js - - - -
      - - - -``` - -### 练习4 -``` js - - - - - - - -
      -

      李白《行路难•其一》

      -

      金樽清酒斗十千,玉盘珍羞直万钱。

      -

      停杯投箸不能食,拔剑四顾心茫然。

      -

      欲渡黄河冰塞川,将登太行雪满山。

      -

      闲来垂钓碧溪上,忽复乘舟梦日边。

      -

      行路难,行路难,多歧路,今安在?

      -

      长风破浪会有时,直挂云帆济沧海。

      -
      - - - -``` - -### 练习5 -``` js - - - - 打开图片对话框 - - - - - -``` - -### 练习6 -``` js - - - - - -
      - - - - -``` diff --git "a/\345\274\240\351\271\217\347\277\224/20251204.md" "b/\345\274\240\351\271\217\347\277\224/20251204.md" deleted file mode 100644 index 01df9e5529a4e8fee8052dc97ce5d3049573658a..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251204.md" +++ /dev/null @@ -1,214 +0,0 @@ -### 笔记 -``` -一、核心认知 -1. **本质**:HTML/XML 文档的树形节点映射,JS 操作页面的接口,`document` 为操作入口。 -2. **关键节点**:元素节点(操作核心,`nodeType=1`)、文本节点(`nodeType=3`)、文档节点(`document`,`nodeType=9`)。 -3. **层级**:`window→document→html→head/body→子元素`。 - -二、核心操作 -1. 元素选择 -| 方法 | 核心特点 | -|---------------------|---------------------------| -| `getElementById` | 性能最优,返回单个元素 | -| `getElementsBy*` | 动态集合,元素变化自动同步| -| `querySelector/All` | 支持CSS选择器,后者返回静态集合 | - -2. 节点操作 -- **创建插入**:`createElement`(创元素)、`createTextNode`(创文本,防XSS)、`appendChild`/`insertBefore`(插入)。 -- **删除替换**:`node.remove()`(自删)、`removeChild`(父删子)、`replaceChild`(替换)。 -- **安全**:优先`textContent`,慎用`innerHTML`。 - -3. 样式与属性 -- 样式:`elem.style`(行内)、`classList`(类名操作,推荐)、`getComputedStyle`(计算样式,只读)。 -- 属性:`getAttribute`/`setAttribute`(原生属性)、`dataset`(`data-*`属性)。 - -三、事件与优化 -1. **事件**:推荐`addEventListener`,关键事件`DOMContentLoaded`(初始化)、`beforeunload`(页面卸载提示);事件委托适配动态元素。 -2. **性能优化**:缓存元素、批量操作(`DocumentFragment`)、避免同步重排、高频事件节流防抖、删元素前解绑事件。 - -``` -### 练习 -```html - - - - - Document - - - - - - -
      - - - - - - - - - - - Document - - - - -
      - -
      -    夜空中最亮的星
      -    能否听清
      -    那仰望的人
      -    心底的孤独和叹息
      -    夜空中最亮的星
      -    能否记起
      -    曾与我同行
      -    消失在风里的身影
      -        
      - - - - - -

      最新电影资讯

      -
        -
      • 1.《金蝉脱壳》
      • -
      • 2.《阿甘正传》
      • -
      • 3.《爱乐之城》
      • -
      • 4.《头号玩家》
      • -
      - 输入影片资讯编号: - - - - -
      -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 芒果
      • -
      -
        -
      • 西瓜
      • -
      • 蜜橘
      • -
      • 萝卜
      • -
      -
      - - - -

      在《倚天屠龙记》中,张三丰是_____派的掌门?

      - A.少林 - B.武当 - C.峨眉 - D.昆仑 - - - - 原超链接文本 - - - - - - - -
      - - 选中的表情 -
      - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251205.md" "b/\345\274\240\351\271\217\347\277\224/20251205.md" deleted file mode 100644 index 01453b38e3226fb7ca4c1f25a331b43957da97b1..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251205.md" +++ /dev/null @@ -1,367 +0,0 @@ -### 笔记 -``` -document.title 获取 / 设置页面标题 -document.URL 获取当前页面完整 URL -document.body 获取 元素,可直接操作其样式和内容 - -getElementById() 根据元素 id 属性查询 -getElementsByTagName() 根据标签名查询 -getElementsByClassName() 根据元素 class 属性查询 -querySelector() CSS 选择器查询(第一个匹配) -createElement() 创建新的 HTML 元素 -appendChild() 将子元素添加到父元素的末尾 -replaceChild() 用新元素替换父元素中的某个子元素 -removeChild() 从父元素中删除指定子元素 -``` -### 练习 -```js -
      -

      消散对白(节选)

      -

      丁禹兮

      -

      原諒我真的不太會告別

      -

      也沒想過有這一天

      -

      以為你隨口承諾的永遠

      -

      就可以敵過時間

      -

      可你眼中深情的對白 如煙花短暫

      -

      新鮮感終歸不是愛

      -

      回憶在倒帶要怎麼釋懷?

      -

      說著放下卻陷入無限循環

      -

      可你眼中無情的對白 淚都流乾

      -

      卻不說答案

      -

      順其自然 隨冷風消散

      -

      可過了這麼久你怎麼還是我的短板

      -
      - - -``` - -```js - - - 退出登录 - -``` - -```js -
      -
      - 长乐曲 -
      -
      - 十年一品温如言 -
      -
      - -``` -```js - - - - - -
      -

      广告内容标题

      -

      这里是广告的具体内容

      -
      广告将在 5 秒后自动关闭
      -
      - -``` - -```js - - - - -``` -```js - - - - - -``` -```js - - -``` -```js -

      2024年奥运会举办城市问答

      -
      - -``` -```js - - - -
      - 轮播图片 -
      - - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251208.md" "b/\345\274\240\351\271\217\347\277\224/20251208.md" deleted file mode 100644 index 095ecb5e12ccc6549186e12152c4eefbef0b112d..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251208.md" +++ /dev/null @@ -1,211 +0,0 @@ -## 15章浏览器对象模型笔记 -### 核心概念 -- BOM(浏览器对象模型),以 window 为顶级对象,操作浏览器窗口 / 页面交互,核心对象:window、location、history、navigator、screen。 -1. window(顶级对象) -- 全局关联:全局变量 / 函数 → window 的属性 / 方法 -- 窗口尺寸:innerWidth/innerHeight(视口宽高) -- 窗口操作:open(url)(开新窗)、close()(关窗口) -- 弹窗:alert()、confirm()(返回布尔)、prompt()(返回输入值) -- 定时器: -- 一次性:setTimeout(回调, 延时) / clearTimeout(定时器) -- 循环:setInterval(回调, 间隔) / clearInterval(定时器) -2. location(URL 操作) -- 核心属性 -- href:完整 URL(赋值可跳转) -- search:查询参数(?xxx) -- hash:哈希值(#xxx) -- 常用方法 -- assign(url):跳转页面(有历史记录) -- replace(url):替换页面(无历史记录) -- reload():刷新页面 -3. history(历史记录) -- back():后退 -- forward():前进 -- go(数字):前进 / 后退指定页(正数前进,负数后退) -4. 其他常用 -- navigator.userAgent:获取浏览器信息 -- screen.width/height:屏幕分辨率 - -## 练习 -### 练习1,2 -```js - - - - 退出登录 -``` -### 练习3 -```js - - - -

      网站内容

      -

      广告会5秒后自动消失

      - - - - - -``` - -### 练习4 -```js - - - -``` - -### 练习5 -```js - - - - - - -``` - -### 练习6 -```js - - - -
      - - -``` - -### 练习7 -```js - - - -
      - - - - - -
      - - - -``` - -### 练习8 -```js - - - - - - -``` -### 练习9 -```js - -
      0
      - - - - -``` - - - diff --git "a/\345\274\240\351\271\217\347\277\224/20251210.md" "b/\345\274\240\351\271\217\347\277\224/20251210.md" deleted file mode 100644 index 077759e688257b273e5ffd66511e61f080fd0eb5..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251210.md" +++ /dev/null @@ -1,342 +0,0 @@ -## JavaScript Style 对象极简笔记 -一、Style 对象核心概念 -本质:封装 HTML 元素内联样式(style 属性)的对象(CSSStyleDeclaration),也可通过 getComputedStyle 获取元素最终渲染的计算样式(只读)。 -获取方式 -```javascript -运行 -// 内联样式(可写) -const inlineStyle = document.getElementById('box').style; -// 计算样式(只读,第二个参数为伪元素,无则传null) -const computedStyle = window.getComputedStyle(box, null); -``` -二、Style 对象的核心特性 -1. 样式属性的命名规则 -由于 JavaScript 中不允许使用连字符(-)作为属性名,CSS 样式属性在 Style 对象中需转换为驼峰命名法 - -|CSS 属性名| Style 对象属性名| 示例| -|---|---|---| -|background-color| backgroundColor| box.style.backgroundColor = 'red'; -|font-size| fontSize| box.style.fontSize = '16px'; -|border-radius| borderRadius| box.style.borderRadius = '8px';| -|text-align| textAlign| box.style.textAlign = 'center';| -|float| cssFloat(IE 为 styleFloat)| box.style.cssFloat = 'left';| - -2. 样式值的格式 -- 设置样式值时,必须包含单位(除少数无单位属性如 z-index、opacity),且值为字符串类型: -```javascript -运行 -// 正确:带单位(px) -box.style.width = '200px'; -box.style.fontSize = '18px'; - -// 正确:无单位属性 -box.style.zIndex = '999'; -box.style.opacity = '0.8'; - -// 错误:缺少单位 -// box.style.height = 100; -``` - -三、核心操作 -1. 设置样式 -```javascript -运行 -const box = document.getElementById('box'); -// 单个样式(带单位,字符串类型) -box.style.width = '200px'; -box.style.backgroundColor = 'red'; -// 批量样式(覆盖原有内联样式) -box.style.cssText = 'width: 200px; height: 100px; color: blue;'; -// 追加批量样式 -box.style.cssText += '; margin: 10px;'; -2. 读取样式 -javascript -运行 -// 内联样式:仅能读已设置的,未设置返回空字符串 -console.log(box.style.width); -// 计算样式:读最终渲染样式(支持所有样式) -console.log(computedStyle.width); -console.log(computedStyle.backgroundColor); -3. 移除样式 -javascript -运行 -// 单个样式:赋值为空或 removeProperty(参数为CSS原始属性名) -box.style.color = ''; -box.style.removeProperty('background-color'); -// 清空所有内联样式 -box.style.cssText = ''; -box.removeAttribute('style'); -``` -四、推荐用法:CSS 类切换(优于直接操作 Style) -```javascript -运行 -// 添加类 -box.classList.add('active'); -// 移除类 -box.classList.remove('active'); -// 切换类(存在则删,不存在则加) -box.classList.toggle('active'); -// 判断是否包含类 -box.classList.contains('active'); -``` -五、常见场景 -```javascript -运行 -// 显示/隐藏 -box.style.display = 'none'; // 不占空间 -box.style.display = 'block'; -box.style.visibility = 'hidden'; // 占空间 -// 过渡/动画 -box.style.transition = 'all 0.3s'; -box.style.animation = 'rotate 2s infinite'; -// CSS 变量操作 -box.style.setProperty('--main-color', 'green'); -console.log(computedStyle.getPropertyValue('--main-color')); -``` -六、注意事项 -- 内联样式优先级最高,易覆盖其他样式,优先用类切换。 -- 部分属性需加浏览器前缀(如 webkitTransform)。 -- 计算样式为只读,无法直接修改。 -- 样式值需带单位(z-index、opacity 等除外)。 - -## 练习 -### 练习1 -```js - -
      郭小东是东
      - - - - -``` -### 练习2 -```js - - - - -``` -### 练习3 -```js - - - - -
      -
      HTML/CSS讨论区
      -
      JavaScript讨论区
      -
      C语言讨论区
      -
      Java讨论区
      -
      Android讨论区
      -
      Python讨论区
      -
      - - - -``` -### 练习1 -```js - - - - - 图片1 - 图片2 - 图片3 - - - -``` -### 练习1 -```js - - - - 图片1 - 图片2 - 图片3 - - - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251211.md" "b/\345\274\240\351\271\217\347\277\224/20251211.md" deleted file mode 100644 index a9ce367493e8b163e3701a2d3d563b12abf83583..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251211.md" +++ /dev/null @@ -1,534 +0,0 @@ -# Form对象 - -## 什么是Form对象 -- Form对象代表HTML中的表单元素(``标签) -- 是Document对象的一个重要组成部分 -- 用于收集用户输入数据并提交到服务器 -- 提供了访问和操作表单元素的方法和属性 - -## 获取Form对象的方法 -```javascript -// 1. 通过getElementById() -let form = document.getElementById("myForm"); - -// 2. 通过表单名称 -let form = document.forms["formName"]; -// 或者 -let form = document.forms.formName; - -// 3. 通过索引(从0开始) -let form = document.forms[0]; - -// 4. 通过querySelector() -let form = document.querySelector("#myForm"); -``` - -## Form对象的常用属性 - -| 属性 | 描述 | -|------|------| -| action | 表单提交的URL地址 | -| method | 表单提交方法(GET或POST) | -| name | 表单名称 | -| target | 表单提交后在哪里显示响应 | -| elements | 表单中所有控件的集合 | -| length | 表单中控件的数量 | - -```javascript -// 示例 -let form = document.forms[0]; -console.log(form.action); // 获取表单action属性 -console.log(form.method); // 获取表单method属性 -console.log(form.name); // 获取表单名称 -``` - -## Form对象的常用方法 - -| 方法 | 描述 | -|------|------| -| submit() | 提交表单 | -| reset() | 重置表单 | - -```javascript -// 提交表单 -form.submit(); - -// 重置表单 -form.reset(); -``` - -## 访问表单元素 - -### 通过elements集合 -```javascript -let form = document.forms[0]; - -// 通过索引访问 -let firstElement = form.elements[0]; - -// 通过name属性访问 -let usernameInput = form.elements["username"]; - -// 获取元素数量 -let elementCount = form.elements.length; -``` - -### 通过表单元素的name属性直接访问 -```javascript -// 如果表单元素有name="username" -let usernameInput = form.username; -// 或者 -let usernameInput = form["username"]; -``` - -## 表单元素对象 - -### Input元素 -```javascript -let input = form.elements["inputName"]; - -// 常用属性 -input.value // 当前值 -input.type // 类型(text, password, email等) -input.name // 名称 -input.disabled // 是否禁用 -input.readOnly // 是否只读 -input.checked // 对于checkbox/radio是否选中 -``` - -### Select元素 -```javascript -let select = form.elements["selectName"]; - -// 常用属性 -select.options // 所有选项的集合 -select.selectedIndex // 当前选中项的索引 -select.value // 当前选中项的值 -select.length // 选项数量 - -// 获取选中项 -let selectedOption = select.options[select.selectedIndex]; -``` - -### Textarea元素 -```javascript -let textarea = form.elements["textareaName"]; - -// 常用属性 -textarea.value // 当前文本内容 -textarea.name // 名称 -textarea.rows // 行数 -textarea.cols // 列数 -``` - -## 表单事件处理 - -### onSubmit事件 -```javascript -// 方法1:在HTML中指定 -// - -// 方法2:通过JavaScript绑定 -form.onsubmit = function(event) { - // 验证表单 - if (!validateForm()) { - event.preventDefault(); // 阻止表单提交 - return false; - } - // 表单验证通过,正常提交 -}; - -// 方法3:使用addEventListener(推荐) -form.addEventListener("submit", function(event) { - // 验证表单 - if (!validateForm()) { - event.preventDefault(); // 阻止表单提交 - return; - } - // 表单验证通过,正常提交 -}); -``` - -### onReset事件 -```javascript -form.onreset = function() { - return confirm("确定要重置表单吗?"); -}; -``` - -## 表单验证示例 - -```javascript -function validateForm() { - let form = document.forms["myForm"]; - let username = form.elements["username"].value; - let email = form.elements["email"].value; - - // 验证用户名 - if (username == null || username == "") { - alert("用户名不能为空"); - return false; - } - - // 验证邮箱 - let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - if (!emailRegex.test(email)) { - alert("邮箱格式不正确"); - return false; - } - - return true; // 验证通过 -} -``` - -## 实际应用示例 - -### 动态创建表单 -```javascript -// 创建表单元素 -let form = document.createElement("form"); -form.action = "/submit"; -form.method = "post"; - -// 创建输入框 -let usernameInput = document.createElement("input"); -usernameInput.type = "text"; -usernameInput.name = "username"; -usernameInput.placeholder = "请输入用户名"; - -// 创建提交按钮 -let submitBtn = document.createElement("input"); -submitBtn.type = "submit"; -submitBtn.value = "提交"; - -// 添加元素到表单 -form.appendChild(usernameInput); -form.appendChild(submitBtn); - -// 添加表单到页面 -document.body.appendChild(form); -``` - -### 表单数据序列化 -```javascript -function serializeForm(form) { - let formData = []; - - for (let i = 0; i < form.elements.length; i++) { - let element = form.elements[i]; - - // 跳过没有name属性的元素和禁用的元素 - if (!element.name || element.disabled) { - continue; - } - - // 处理不同类型的元素 - if (element.type === "checkbox" || element.type === "radio") { - if (element.checked) { - formData.push(encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value)); - } - } else { - formData.push(encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value)); - } - } - - return formData.join("&"); -} - -// 使用示例 -let form = document.forms[0]; -let serializedData = serializeForm(form); -console.log(serializedData); -``` - -## 使用FormData对象(现代方法) - -```javascript -// 创建FormData对象 -let form = document.forms[0]; -let formData = new FormData(form); - -// 添加额外数据 -formData.append("timestamp", Date.now()); - -// 发送数据到服务器 -fetch("/submit", { - method: "POST", - body: formData -}) -.then(response => response.json()) -.then(data => console.log(data)) -.catch(error => console.error(error)); -``` - -## 常见技巧和注意事项 - -### 1. 禁用提交按钮防止重复提交 -```javascript -form.onsubmit = function() { - let submitBtn = this.querySelector("input[type='submit']"); - submitBtn.disabled = true; - submitBtn.value = "提交中..."; - - // 在一定时间后重新启用按钮(防止网络问题导致一直禁用) - setTimeout(() => { - submitBtn.disabled = false; - submitBtn.value = "提交"; - }, 5000); - - return true; -}; -``` - -### 2. 表单自动填充检测 -```javascript -// 检测表单字段是否被自动填充 -function checkAutofill() { - let inputs = form.querySelectorAll("input"); - inputs.forEach(input => { - if (input.value && !input.classList.contains("filled")) { - input.classList.add("autofilled"); - } - }); -} -``` - -### 3. 表单字段依赖关系 -```javascript -// 根据一个字段的值改变另一个字段的状态 -let countrySelect = form.elements["country"]; -let stateInput = form.elements["state"]; - -countrySelect.onchange = function() { - if (this.value === "USA") { - stateInput.disabled = false; - } else { - stateInput.disabled = true; - stateInput.value = ""; - } -}; -``` - -## 总结 - -Form对象是Web开发中处理用户输入的关键部分。通过JavaScript操作Form对象,我们可以: -1. 获取和设置表单属性 -2. 访问表单中的各个元素 -3. 进行表单验证 -4. 控制表单提交行为 -5. 动态创建和修改表单 - -# 作业 - -```html - -
      -
      1. 取票功能
      - -
      -
      -
      -
      2. 文本区域调整高度
      - - - -
      -
      -
      -
      3. 课程选择(最多6门)
      - C语言
      - 机械制图
      - 单片机
      - 自动控制
      - 传感器
      - 高等数学
      - 计算机基础
      - Oracle数据库
      - 商务英语
      - PLC设计基础
      -
      -
      -
      -
      -
      4. 问答题
      -

      电影《变相怪杰》的主演是谁?

      - 布拉德·皮特
      - 亚当·桑德勒
      - 金凯瑞
      - 杰夫·丹尼尔斯
      - -
      -
      -
      -
      -
      5. 爱好选择
      - 看电影
      - 听音乐
      - 演奏乐器
      - 打篮球
      - 看书
      - 上网
      - - - -
      -
      -
      -
      6. 城市选择
      - 选择省份: - - 选择城市: - -
      - - - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251212.md" "b/\345\274\240\351\271\217\347\277\224/20251212.md" deleted file mode 100644 index dc271b79d163cd77b06bd05338b5ed80ee87157c..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251212.md" +++ /dev/null @@ -1,87 +0,0 @@ -# Promise与JSON - -## JSON (JavaScript Object Notation) -### 什么是JSON -- 轻量级数据交换格式 -- 易于人阅读和编写 -- 易于机器解析和生成 -- 独立于语言的文本格式 - -### JSON语法 -```javascript -// 对象表示 -{"name": "张三", "age": 25, "city": "北京"} - -// 数组表示 -[{"name": "张三"}, {"name": "李四"}] - -// 嵌套结构 -{ - "students": [ - {"name": "张三", "scores": [85, 92, 78]}, - {"name": "李四", "scores": [90, 88, 95]} - ] -} -``` - -### JSON与JS对象转换 -```javascript -// JS对象转JSON字符串 -let obj = {name: "张三", age: 25}; -let jsonStr = JSON.stringify(obj); - -// JSON字符串转JS对象 -let str = '{"name": "张三", "age": 25}'; -let jsonObj = JSON.parse(str); -``` - -## Promise -### 什么是Promise -- 异步编程解决方案 -- 表示一个异步操作最终完成或失败的对象 -- 解决回调地狱问题 - -### Promise状态 -1. Pending(待定)- 初始状态 -2. Fulfilled(已成功)- 操作成功完成 -3. Rejected(已失败)- 操作失败 - -### Promise基本用法 -```javascript -// 创建Promise -let promise = new Promise((resolve, reject) => { - let success = true; - if (success) { - resolve("操作成功"); - } else { - reject("操作失败"); - } -}); - -// 使用Promise -promise - .then(result => console.log(result)) - .catch(error => console.log(error)); -``` - -### Promise链式调用 -```javascript -fetch('/api/data') - .then(response => response.json()) - .then(data => processData(data)) - .then(result => console.log(result)) - .catch(error => console.error(error)); -``` - -### async/await语法 -```javascript -async function fetchData() { - try { - let response = await fetch('/api/data'); - let data = await response.json(); - console.log(data); - } catch (error) { - console.error(error); - } -} -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251215.md" "b/\345\274\240\351\271\217\347\277\224/20251215.md" deleted file mode 100644 index 09fc0228cb2ec8390e10433d9d2f25621618ead2..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251215.md" +++ /dev/null @@ -1,28 +0,0 @@ -### 练习 -```js -1. - let name = "ggb"; - let SCHOOL ="猪猪职业技术学院"; - document.write(name+SCHOOL); - - 2. - let value = 123; - document.write(typeof value); - - 3. - let age = 18; - age = 20; - document.write(age); - - 4. - let a = "李四"; - let b = 19; - let c = true; - document.write("姓名:李四,类型:" +typeof a,"
      年龄:19,类型:"+typeof b,"
      及格:true,类型:"+typeof c ); - - 5. - let a= undefined; - let b= null; - document.write("undefined 变量: undefined, 类型: "+typeof a,"
      null 变量: null, 类型: "+typeof b) - -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251217.md" "b/\345\274\240\351\271\217\347\277\224/20251217.md" deleted file mode 100644 index c6e7da1405d4d9974022abfd71a9b1f3a085c000..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251217.md" +++ /dev/null @@ -1,39 +0,0 @@ -### 练习 - -```js -7. - let num; - console.log("var 声明前访问 num:", num); - num = 123; - console.log("var 声明后访问 num:", num); - try { - console.log("let 声明前访问 str:", str); - } catch (err) { - console.log("let 声明前访问结果:", "ReferenceError(暂时性死区)"); - } - let str = "hello"; - console.log("let 声明后访问 str:", str); - try { - console.log("const 声明前访问 flag:", flag); - } catch (err) { - console.log("const 声明前访问结果:", "ReferenceError(暂时性死区)"); - } - const flag = true; - console.log("const 声明后访问 flag:", flag); - console.log("\n" + "var 声明会提升,但值为 undefined let 和 const 存在暂时性死区"); - - 8. - let name ="张三"; - let age = 20; - let score = 85; - console.log(`${name}今年${age}岁,考了${score}分,${score >= 60 ? '及格' : '不及格'}`); - - 9. - let a = 10; - let b = 3; - let c= a/b; - console.log(a+b); - console.log(a-b); - console.log(c.toFixed(2)); - console.log(a%b); -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251218.md" "b/\345\274\240\351\271\217\347\277\224/20251218.md" deleted file mode 100644 index e0c7d42777d687e59e28d249eb1a3527c42ec12e..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251218.md" +++ /dev/null @@ -1,75 +0,0 @@ -### 练习 -```js -10. - let a = 123; - console.log(typeof a); - a="456"; - console.log(typeof a); - - 11. - let a = 5; - let b = 3; - function abc(a, b) { - let ab = a > b; - let ac = a === b; - let bc = a !== b; - return { - ab, - ac, - bc - }; - } - let result = abc(a, b); - console.log(`a>b: ${result.ab}`); - console.log(`a===b: ${result.ac}`); - console.log(`a!==b: ${result.bc}`); - - 12. - let x = "5"; - let y = 5; - let z = "5"; - function abc(x, y, z) { - let a = x == y; - let b = x == z; - let c = x === y; - let d = x === z; - return { - a, - b, - c, - d - }; - } - let result = abc(x,z,y); - console.log(`x == y: ${result.a}`); - console.log(`x == z: ${result.b}`); - console.log(`x === y: ${result.c}`); - console.log(`x === z: ${result.d}`); - - 13. - let age=25; - let hasLicense = true; - if(1860 || hasLicense == true){ - console.log('true(可以开车)'); - }else{ - console.log('false(不可以开车)'); - } - - 14. - let a = "5"+3; - console.log(a); - let b="5"-3; - console.log(b); - let c= true+1; - console.log(c); - let d="10"*"2"; - console.log(d); - - 15. - let a = +"123"; - console.log(a); - let b = -"45"; - console.log(b) - let c = !!"hello"; - console.log(c); -``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251219.md" "b/\345\274\240\351\271\217\347\277\224/20251219.md" deleted file mode 100644 index 6deb100fc3199b0dd8b05585a94a33717ec0c342..0000000000000000000000000000000000000000 --- "a/\345\274\240\351\271\217\347\277\224/20251219.md" +++ /dev/null @@ -1,172 +0,0 @@ -### 练习 - -```js -16. - let a= 5.8; - let b= 7; - if(b%2 == 0){ - console.log('为偶数'); - }else{ - console.log('为基数'); - } - console.log(~~5.8); - - 17. - let score = 85; - let dox = score >=60?'及格':'不及格'; - console.log(dox); - - 流程控制 - - 1. - let a=91; - if(a>90){ - console.log('优秀'); - }else if(a>80){ - console.log('良好'); - }else if(a>60){ - console.log('及格'); - }else{ - console.log('不及格'); - } - - 2. - let a= 0; - for(i=1;i<=100;i++){ - a=a+i; - } - console.log(a); - - 3. - let a=[1,2,3,4,5,6,7,8] - for(i=0;i<=a.length;i++){ - let num = a[i]; - if(num%2==0){ - console.log(num); - } - } - - 4. - let a=17; - console.log(a%a==0 && a%1==0); - - 5. - let n = 20; - let m = 3; - let a = []; - while (m < n) { - a.push(m) - m +=3; - } - console.log(a); - - 6. - let a = 1; - let dayOfWeek; - switch (a) { - case 1: - dayOfWeek = "今天是工作日,要上班" - break; - case 2: - dayOfWeek = "今天是工作日,要上班" - break; - case 3: - dayOfWeek = "今天是工作日,要上班" - break; - case 4: - dayOfWeek = "今天是工作日,要上班" - break; - case 5: - dayOfWeek = "今天是工作日,要上班" - break; - case 6: - dayOfWeek = "今天是周末,不用上班" - break; - case 7: - dayOfWeek = "今天是周末,不用上班" - break; - } - console.log(dayOfWeek); - - 7. - let a=["苹果","香蕉","橙子"]; - for(let b of a){ - console.log(b); - } - - 8. - let a = { - name: "张三", - age: "20", - city: "北京" - }; - for(let b in a){ - console.log(`${a[b]}`); - } - - 9. - let a = [26, 20, 60, 90]; - let b = null; - for (let i = 0; i < a.length; i++) { - let ab=a[i] - if(ab<0){ - console.log(`跳过所以负数: ${ab}`); - continue; - } - if(ab>50){ - b = ab; - } - console.log(b); - } - - 10. - for(let i = 1; i <= 9; i++) { - let a=''; - for(let j=1;j<=i;j++){ - a += `${j}*${i}=${j*i} ` - } - console.log(a); - } - - 11. - let age = 18; - - let status = age >= 18 ? '成年' : '未成年'; - console.log(status); - - if (age >= 18) { - status = '成年'; - } else { - status = '未成年'; - } - console.log(status); - - 12. - let a = Math.floor(Math.random()*100)+1; - let b; - while(true){ - let input = prompt("请输入数字"); - b=Number(input); - if(b>a){ - alert("太大了") - }else if(b - - -2.外部嵌入 -外部引入:通过标签引入外部Js文件。 - -在页面输出 - - -页面弹框 - - -控制台输出 - - - -3.内部嵌入 -内嵌脚本:在HTML文档中使用 - - - -``` -![alt text](./图片/lzmy.png) - -``` - - - - - - - 输出明日学院的官网地址 - - - - - - - -``` -![alt text](./图片/mzdz.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251112-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" "b/\346\226\271\344\275\263\347\272\257/20251112-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" deleted file mode 100644 index 8e9672c1e82ca3b2996ce7a28e2b311de7376d37..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251112-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" +++ /dev/null @@ -1,136 +0,0 @@ -# 笔记 -1.转义字符“\”可以防止引号匹配混乱现象 - -2.转义字符\n换行 - -3.可以在声音变量后对变量赋值 -eg:let a; - a=1; - -4.运算符: -+-*/加减乘除 -%取余 -+= -i++或++i:(i--或--i) -eg:i=1,i++输出为1,但值为2 - ++i输出为2,值为2 - -5.比较运算符 -<> <= >= -==表面值判断,不涉及数据类型 -===表面值和类型一起判断 -!= 不涉及数据类型 -!== 同时判断表面值和类型 - -6.赋值运算符 -= -+= --= -*= -/= -%= - - -# 练习 - -``` - - - - - - - Document - - - - - - -
      - - - -
      - - - -
      - - - -
      - - - - - - - - - - - - - - - - - - - - -``` -![alt text](./图片/eyejt.png) -![alt text](./图片/xlt.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" "b/\346\226\271\344\275\263\347\272\257/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" deleted file mode 100644 index bb7ee80c59206ade7aa4784dd0931dff18b0cb4d..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" +++ /dev/null @@ -1,90 +0,0 @@ -# 笔记 -1.逻辑运算符: -&&逻辑与:都真为真 -||逻辑或:一真则真 -!取反(!a<5,当为真结果是假,假取真) - -2.条件运算符: -表达式?结果1:结果2(真左假右) - -3.逗号运算符:多个表达式排一起,整个表达式值为最后一个表达式的值 - -4.typeof运算符:返回数据类型 -# 练习 -``` - - - - - - - BMI 判定 - - - -第一题: - - -第二题: - - - - -第三题: - - -第四题: - - - - -``` -![alt text](./图片/stzj.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251114-\345\276\252\347\216\257\347\273\203\344\271\240.md" "b/\346\226\271\344\275\263\347\272\257/20251114-\345\276\252\347\216\257\347\273\203\344\271\240.md" deleted file mode 100644 index 970b2a187f2d1480a32c7b57db62f7026a36f308..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251114-\345\276\252\347\216\257\347\273\203\344\271\240.md" +++ /dev/null @@ -1,158 +0,0 @@ -``` - - - - - - - Document - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` -![alt text](./图片/xh.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251117-\345\207\275\346\225\260.md" "b/\346\226\271\344\275\263\347\272\257/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index 7fe36b5e2e3cce8ced8a58f0a6a88f6c9d6ca2d6..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,56 +0,0 @@ -# 笔记-循环 - -1.循环语句 -for(){} -while(){} -do{}while() - -——————break终止循环;continue终止这次循环开始下一轮循环—————— - -2.判断语句 -if(){} - -if(){}else{} - -if(){}else if(){}else{} - -Switch(){ - 值1:执行;break; - 值2:执行;break; - ... -} - -# 笔记-函数 -传统函数:function 函数名(){} -匿名函数:let a =function(){} -箭头函数:let a =()=>{} - -# 练习 -1. -``` - -``` -2. -``` - - -``` -![alt text](./图片/hst.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251119-\345\206\205\347\275\256\345\207\275\346\225\260.md" "b/\346\226\271\344\275\263\347\272\257/20251119-\345\206\205\347\275\256\345\207\275\346\225\260.md" deleted file mode 100644 index e19cb4a7350a440cc66e31fae05d34cdbb86f3d0..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251119-\345\206\205\347\275\256\345\207\275\346\225\260.md" +++ /dev/null @@ -1,220 +0,0 @@ -# 笔记 -内置函数 -parseInt():将字符转成整型 - -parseFloat():将字符转成浮点型 - -isNaN():判断一个数值是否为NaN - -isFinite():判断一个数值是否有限 - -eval():计算表达式的总值 -示例 -result = eval("2 + 3 * 4") -print(result) # 输出: 14 - -encodeURI():将字符串进行编码 - -decodeURI():对已编码的字符串进行解码 -# 练习 - -``` - -``` -![alt text](./图片/ymxs.png) -```` - - - - - - - Document - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -```` -![alt text](./图片/hszt.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251120-\345\257\271\350\261\241.md" "b/\346\226\271\344\275\263\347\272\257/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index 50cc3b1a075cbb5c44502e51b0d351b91812b345..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,168 +0,0 @@ -# 笔记 -1.对象的创建: -let name={ - 属性:值, - 属性2:值二, - ... - 属性n:值 -} - -2.添加属性 -name.属性=“” - -3.删除属性 -delete name.属性 - -4.遍历 -for(name in 函数名){} - -5.内部对象 -Math属性 -Date属性 -Event响应事件 - -# 练习 -``` - - - - - - - Document - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` -![alt text](./图片/sjc.png) - -``` - -``` -![alt text](./图片/sbzj.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251121-\346\225\260\347\273\204.md" "b/\346\226\271\344\275\263\347\272\257/20251121-\346\225\260\347\273\204.md" deleted file mode 100644 index 89837953b661e8162c3ebcc2da6e341eb8f0ac47..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251121-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,92 +0,0 @@ -# 笔记 -数组: -1.创建:ame=[1,2,3,...n] -2.添加:name.push('尾部添加新的元素') -3.删除最后一个:name.pop() -4.删除第一个 :name.shift() -5.输出索引值:name[索引值] -6.遍历 - - -# 练习 -``` - - -``` -![alt text](./图片/xq.png) - -``` - - -``` -![alt text](./图片/zdz.png) - -``` - - -``` -![alt text](./图片/wws.png) - -``` - - -``` -![alt text](./图片/tjz.png) - -``` - - -``` -![alt text](./图片/sjph.png) diff --git "a/\346\226\271\344\275\263\347\272\257/20251124-string\345\257\271\350\261\241.md" "b/\346\226\271\344\275\263\347\272\257/20251124-string\345\257\271\350\261\241.md" deleted file mode 100644 index 5303ffc083569b98b1140387fab190b5c34dd75f..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251124-string\345\257\271\350\261\241.md" +++ /dev/null @@ -1,170 +0,0 @@ -# 笔记 -slice(start, end):截取字符串中 start 到 end(不含 end)的部分,返回新字符串 -trim():去除字符串首尾的空白字符 -split(separator, limit):按指定分隔符(separator)分割字符串,imit 用于限制返回数组的最大长度 -concat():拼接多个字符串 -# 练习 -``` - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` -![alt text](./图片/dxlxt.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251126-\346\255\243\345\210\231.md" "b/\346\226\271\344\275\263\347\272\257/20251126-\346\255\243\345\210\231.md" deleted file mode 100644 index e44059b273849e5dc2f5b11b8d9cd31a1e3215d5..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251126-\346\255\243\345\210\231.md" +++ /dev/null @@ -1,16 +0,0 @@ -# 笔记 -g:全局匹配 -i:忽略大小写 -str.replace(regexp, replacement):替换匹配项 -``` -let str = "abac123abc"; -// 1. 无 g 修饰符:只替换第一个匹配项 -str.replace(/a/, "x"); // "xbac123abc"(仅第一个 "a" 换为 "x") - -// 2. 加 g 修饰符:全局替换所有匹配项 -str.replace(/a/g, "x"); // "xbxc123xbc"(所有 "a" 换为 "x") - -// 3. 加 i 修饰符:忽略大小写替换 -const str2 = "AbcA123"; -str2.replace(/a/gi, "x"); // "xbcx123"(不管 A/a 都替 -``` \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251127-\345\274\202\345\270\270\345\244\204\347\220\206.md" "b/\346\226\271\344\275\263\347\272\257/20251127-\345\274\202\345\270\270\345\244\204\347\220\206.md" deleted file mode 100644 index a1316767ee8150a302b99d508aadcdd6bc2c8914..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251127-\345\274\202\345\270\270\345\244\204\347\220\206.md" +++ /dev/null @@ -1,143 +0,0 @@ -# 笔记 -``` -基本结构 -try { - // 可能发生异常的代码(核心执行逻辑) -} catch (error) { - // 异常发生时执行(捕获错误,处理异常) -} finally { - // 无论是否发生异常,都会执行(可选,用于清理资源) -} -``` -error.message:错误描述 -error.name:错误类型 - -throw 异常值:主动抛出异常 -throw new Error("错误") - -new Error("错误"):创建一个包含错误信息的对象 -# 练习 -``` - - -``` -![alt text](./图片/bzc.png) - -``` - - - ``` -![alt text](./图片/cwlx.png) -![alt text](./图片/xxcw.png) - -``` - - - - 用户名:

      - 密码:

      - - - -``` -![alt text](./图片/gscw.png) - -``` - - -

      - - -

      - - - 对应字母:

      - - -``` -![alt text](./图片/czdy.png) -![alt text](./图片/czys.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251128-\344\272\213\344\273\266.md" "b/\346\226\271\344\275\263\347\272\257/20251128-\344\272\213\344\273\266.md" deleted file mode 100644 index c80c44984fb1ead98e5ddb1fd6a6cff40d65b02c..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251128-\344\272\213\344\273\266.md" +++ /dev/null @@ -1,265 +0,0 @@ -# 笔记 -``` -鼠标事件 -click 鼠标单击元素 -dblclick 鼠标双击元素 -mouseover 鼠标移入元素(含子元素) -mouseout 鼠标移出元素(含子元素) -mousemove 鼠标在元素内移动 -``` -``` -键盘事件 -keydown 按下键盘按键(任意键) -keyup 松开键盘按键 -input 输入框内容变化 -``` -``` -表单事件 -submit 提交表单 -change 表单元素值改变且失去焦点 -focus 元素获得焦点 -``` -``` -窗口事件 -load 页面所有资源加载完成 -DOMContentLoaded DOM 结构加载完成(无需等资源) -resize 窗口大小改变 -scroll 页面或元素滚动 -``` -addEventListener 绑定 -元素.addEventListener(事件名, 处理函数, 事件流配置) -[标准绑定方式,支持同一事件绑定多个处理函数,还能控制事件流(冒泡 / 捕获)。] - -e.preventDefault() 阻止事件的默认行为(如阻止表单提交) -e.stopPropagation() 阻止事件冒泡(避免父元素触发相同事件) -e.key 键盘事件中,获取按下的按键名称 - -# 练习 - -``` - - - - - - - Document - - - - - - 丁禹兮 - - - - - - - -
      -

      题目:中国国球是()?

      -

      A. 篮球 B. 兵乓球 C. 羽毛球 D. 排球

      -

      请按键盘上的 A/B/C/D 键选择答案

      -

      -
      - - - - - - -

      - - - - - - -

      - - - - - - -
      -

      -

      - -
      - - - - - - - - -
      - - - - - - - -
      - - - - - -
      - -
      - - -
      - - - - - - - - -``` -![alt text](./图片/dyx1.png) -![alt text](./图片/dyx2.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" "b/\346\226\271\344\275\263\347\272\257/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" deleted file mode 100644 index 0efcf7df645102aec8187b0c017cf436556d8574..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" +++ /dev/null @@ -1,239 +0,0 @@ -# 笔记 -``` -复制:onbeforcopy复制到剪切板触发 oncopy复制页面内容触发 -剪切:onbeforecut oncut -粘贴:onbeforepaste onpaste -选择:onseletc 文本选中「完成后」 onselectstart 元素的文本开始被选中前触发的事件「开始前」 -``` -``` -拖放事件 -dragstart 用户开始拖拽元素时 -drag 拖拽过程中持续触发 -dragenter 拖拽元素进入目标容器时 -dragover 拖拽元素在目标容器内悬停时 -dragleave 拖拽元素离开目标容器时 -drop 用户在目标容器内释放鼠标时 -``` -# 练习 -``` - - - - - -
      - 可拖动图片 -
      - -``` -![alt text](./图片/ckxs.png) -``` - - - - -
      拖拽我到矩形里
      -
      - -``` -![alt text](./图片/tzwz1.png) -![alt text](./图片/tzwz2.png) -``` - - - - -
      鼠标移到我身上看看
      - -``` -![alt text](./图片/bdbs.png) -``` - - - - - - -``` -![alt text](./图片/gdxg.png) -``` - - - - - - - -``` diff --git "a/\346\226\271\344\275\263\347\272\257/20251203-doc\345\257\271\350\261\241.md" "b/\346\226\271\344\275\263\347\272\257/20251203-doc\345\257\271\350\261\241.md" deleted file mode 100644 index 585f63c10831efe95a4b05d78070fb215986bcfb..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251203-doc\345\257\271\350\261\241.md" +++ /dev/null @@ -1,183 +0,0 @@ -# 笔记 -``` -document.title 获取 / 设置页面标题 -document.URL 获取当前页面完整 URL -document.body 获取 元素,可直接操作其样式和内容 - -getElementById() 根据元素 id 属性查询 -getElementsByTagName() 根据标签名查询 -getElementsByClassName() 根据元素 class 属性查询 -querySelector() CSS 选择器查询(第一个匹配) -createElement() 创建新的 HTML 元素 -appendChild() 将子元素添加到父元素的末尾 -replaceChild() 用新元素替换父元素中的某个子元素 -removeChild() 从父元素中删除指定子元素 -``` -# 练习 -``` - - - - - -``` -``` - - -

      - -``` -``` - - -``` -``` - - - -
      -

      行路难·其一

      -

      〔唐代〕李白

      -

      金樽清酒斗十千,玉盘珍羞直万钱。

      -

      停杯投箸不能食,拔剑四顾心茫然。

      -

      欲渡黄河冰塞川,将登太行雪满山。

      -

      闲来垂钓碧溪上,忽复乘舟梦日边。

      -

      行路难!行路难!多歧路,今安在?

      -

      长风破浪会有时,直挂云帆济沧海。

      -
      - - -``` -``` - - -
      点击打开图片
      - - - - -``` -``` - - - - -
      - -``` \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251204-\346\226\207\346\241\243\345\257\271\350\261\241.md" "b/\346\226\271\344\275\263\347\272\257/20251204-\346\226\207\346\241\243\345\257\271\350\261\241.md" deleted file mode 100644 index 38e86ff1fbd3b4b17e03d6619055b3366cf9215c..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251204-\346\226\207\346\241\243\345\257\271\350\261\241.md" +++ /dev/null @@ -1,453 +0,0 @@ - # 笔记 -``` -节点属性: -nodeType 标识节点类型 -nodeName 节点名称 -nodeValue 节点值 -childNodes 获取当前节点的所有子节点 -firstChild 获取第一个子节点 -lastChild 获取最后一个子节点 -nextSibling 获取下一个兄弟节点 -previousSibling 获取上一个兄弟节点 -parentNode 获取当前节点的父节点 -``` -``` -节点创建等: -createElement 创建元素节点 -createTextNode 创建文本节点 -appendChild 将子节点添加到父节点的子节点末尾 -insertBefore(new,ref) 将 new插入到 ref之前,没有则替换 -removeChild 从父节点中删除指定子节点 -replaceChild() 可替换节点啊 -``` -``` -获取元素: -getElementById 全局获取单个唯一 ID 元素 -getElementsByClassName 全局 / 局部获取批量 Class 元素 -querySelector 获取第一个匹配 CSS 选择器的元素 -querySelectorAll 复杂选择器 / 批量静态元素 遍历 -``` -``` -innerHTML 动态插入 -innerText 仅操作纯文字 -outerHTML 替换整个元素 -``` -# 练习 - - ``` - - - - -
      - -``` - -``` - - - -
      -
      - 夜空中最亮的星
      - 能否听清
      - 那仰望的人
      - 心底的孤独和叹息
      - 夜空中最亮的星
      - 能否记起
      - 曾与我同行
      - 消失在风里的身影 -
      - -``` -``` - - - - - - -
        -
      • 1. 热辣滚烫
      • -
      • 2. 飞驰人生3
      • -
      • 3. 哪吒之魔童闹海
      • -
      • 4. 唐探1900
      • -
      - -``` -``` - - - - - -
      -

      蔬菜列表

      -
        -
      • 西红柿
      • -
      • 黄瓜
      • -
      • 香蕉
      • -
      • 胡萝卜
      • -
      -
      -
      -

      水果列表

      -
        -
      • 苹果
      • -
      • 橙子
      • -
      • 菠菜
      • -
      • 草莓
      • -
      -
      - -``` -``` - - - - -
      -

      金庸《射雕英雄传》中,郭靖的降龙十八掌师从谁?

      -
      - -
      - -
      - - -
      - -
      -
      - -``` -``` - - - - - -
      - 百度 - -
      - -``` -``` - - - - - -
      - -
      -
      - -``` -``` - - - - -
      - 一生只爱一人 - - 点击将文本改为斜体 -
      - -``` -``` - - - - -
      - - - - - - -
      - -``` -``` - - - - -
      - - 选中的表情 -
      - -``` diff --git "a/\346\226\271\344\275\263\347\272\257/20251205-win\345\257\271\350\261\241.md" "b/\346\226\271\344\275\263\347\272\257/20251205-win\345\257\271\350\261\241.md" deleted file mode 100644 index 048c90f27c4d69beb6a267c2d0f48fb8e2ad9c8f..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251205-win\345\257\271\350\261\241.md" +++ /dev/null @@ -1,414 +0,0 @@ -# 笔记 -window.resizeTo(w,h) 调整窗口大小 -confirm(message) 弹出确认框 -setTimeout(fn, delay) 延迟 delay 毫秒执行函数(一次性) -setInterval(fn, interval) 每隔 interval 毫秒执行函数(循环) -clearInterval(timer) 清除 setInterval 定时器 - -# 练习 -``` - - -
      -

      消散对白(节选)

      -

      丁禹兮

      -

      原諒我真的不太會告別

      -

      也沒想過有這一天

      -

      以為你隨口承諾的永遠

      -

      就可以敵過時間

      -

      可你眼中深情的對白 如煙花短暫

      -

      新鮮感終歸不是愛

      -

      回憶在倒帶要怎麼釋懷?

      -

      說著放下卻陷入無限循環

      -

      可你眼中無情的對白 淚都流乾

      -

      卻不說答案

      -

      順其自然 隨冷風消散

      -

      可過了這麼久你怎麼還是我的短板

      -
      - - -``` -![alt text](./图片/xsdb.png) -``` - - - 退出登录 - -``` - -``` - - - - -
      - -
      - 长乐曲 -
      - -
      - 十年一品温如言 -
      -
      - -``` -``` - - - - - - -
      -

      广告内容标题

      -

      这里是广告的具体内容

      -
      广告将在 5 秒后自动关闭
      -
      - -``` -![alt text](./图片/gg.png) -``` - - - - -``` -``` - - - - - - - - -``` -``` - - -``` -``` - -

      2024年奥运会举办城市问答

      -
      - -``` -``` - - - - -
      - 轮播图片 -
      - - -``` \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" "b/\346\226\271\344\275\263\347\272\257/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" deleted file mode 100644 index 26add3205af62adfa2e8a2d7c82c0e9d8e644df5..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" +++ /dev/null @@ -1,13 +0,0 @@ -# 笔记 -``` -location方法: -assign():跳转新页面 -reload():重新载入当前页面 -``` - -``` -history方法: -back():退回前一页 -forward():重新进入下一页 -go():进入指定的网友 -``` diff --git "a/\346\226\271\344\275\263\347\272\257/20251210-style\345\257\271\350\261\241.md" "b/\346\226\271\344\275\263\347\272\257/20251210-style\345\257\271\350\261\241.md" deleted file mode 100644 index f6b19c78716de62149fd3273271c8c220f0611d8..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251210-style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,240 +0,0 @@ - -``` -
      -

      此情可待成追忆

      -

      只是当时已惘然

      -
      - - -``` - -``` - - 丁禹兮 - - - -``` - -``` - - - - - -``` - -``` - - - - - - - - -``` \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251211-form\345\257\271\350\261\241.md" "b/\346\226\271\344\275\263\347\272\257/20251211-form\345\257\271\350\261\241.md" deleted file mode 100644 index bdf6e6ac2f8e8d0eac2500c491d4560aa979a875..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251211-form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,194 +0,0 @@ - -``` - -``` - - - - -``` - - - - -``` - - -``` -
      - 语文 - 数学 - 英语 - 物理 - 化学 - 生物 - 历史 - 地理 - 政治 -
      - - -``` - - -``` -
      - A. 错误答案
      - B. 正确答案
      - C. 错误答案
      - -
      - -``` - - -``` -
      - - - -
      - 阅读
      - 运动
      - 听歌
      - 摄影
      - 绘画
      -
      -
      - -``` - -``` - - - -``` \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251212-json.md" "b/\346\226\271\344\275\263\347\272\257/20251212-json.md" deleted file mode 100644 index d75d341c899ace3aaad30566444b00c1954b017b..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251212-json.md" +++ /dev/null @@ -1,10 +0,0 @@ -# JSON 基本语法规则 -1.数据以键值对(key: value) 形式存在,键必须用双引号包裹; -2.键值对之间用逗号分隔,最后一个键值对后不能加逗号; -3.整体数据要么是对象({}),要么是数组([])(这是 JSON 仅有的两种顶层结构); -4.不支持注释(// 或 /* */); -5.支持 字符串 数字 布尔值 数组 数组 null ;不支持函数、日期对象(需转为字符串)。 - -# 序列化和反序列 -JS 对象 → 字符串 :使用 JSON.stringify(),将 JavaScript 对象 / 数组转为 JSON 格式的字符串 -字符串 → JS 对象 :使用 JSON.parse(),将 JSON 格式的字符串转为 JavaScript 对象 / 数组 \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251215-\347\254\224\350\256\260.md" "b/\346\226\271\344\275\263\347\272\257/20251215-\347\254\224\350\256\260.md" deleted file mode 100644 index 37021fba597184df8b34105415790ce46ed2f288..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251215-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,3 +0,0 @@ -var 函数作用域 / 全局作用域 -let 块级作用域({}内) -const 块级作用域(专门声明常量) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251217-\345\210\200\344\271\220\347\254\246 .md" "b/\346\226\271\344\275\263\347\272\257/20251217-\345\210\200\344\271\220\347\254\246 .md" deleted file mode 100644 index ac11cfc36d14f1b65b401ec0b86e47ea6ea55e31..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251217-\345\210\200\344\271\220\347\254\246 .md" +++ /dev/null @@ -1,18 +0,0 @@ -$是 jQuery 提供的 “元素选择器函数”,是前端开发里 jQuery 框架的标志性语法 -``` -let d4 = $('#d4'); → 等价于用原生 JS 写document.getElementById('d4') -``` - -``` -方法: -hide() 隐藏匹配的元素 -show() 显示匹配的元素 -toggle() 切换元素的显示 / 隐藏状态 -``` -``` - - - - - -``` diff --git "a/\346\226\271\344\275\263\347\272\257/20251218-jQ\345\212\250\347\224\273.md" "b/\346\226\271\344\275\263\347\272\257/20251218-jQ\345\212\250\347\224\273.md" deleted file mode 100644 index 6977aa7d58b467e53cf271151eb33210f1b1ef1e..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251218-jQ\345\212\250\347\224\273.md" +++ /dev/null @@ -1,17 +0,0 @@ -fadeIn() 淡入显示元素(从透明到不透明) -fadeOut() 淡出隐藏元素(从不透明到透明) -fadeToggle() 切换淡入 / 淡出状态 -``` -// 淡入后执行回调 -$('.box').fadeIn(500, function() { - alert('淡入动画完成!'); -}); -``` - -``` -text() 获取 / 设置元素文本内容(纯文本) -html() 获取 / 设置元素 HTML 内容(含标签) -val() 获取 / 设置表单元素的值 -``` - -![alt text](./图片/JQdh.JPG) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251219-z.md" "b/\346\226\271\344\275\263\347\272\257/20251219-z.md" deleted file mode 100644 index 3feadd0e198ddf2260712d75d51a239c97870db7..0000000000000000000000000000000000000000 --- "a/\346\226\271\344\275\263\347\272\257/20251219-z.md" +++ /dev/null @@ -1 +0,0 @@ -![alt text](./图片/z.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/JQdh.JPG" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/JQdh.JPG" deleted file mode 100644 index 01ff2c807895ea66856e5bdc8246a23f6325a604..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/JQdh.JPG" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/bdbs.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/bdbs.png" deleted file mode 100644 index 8ba45c19c35f4dc069776191def4846af00c4991..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/bdbs.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/bzc.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/bzc.png" deleted file mode 100644 index 837033b1e98a484b8aa0aa6d4adb31ebf02363f7..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/bzc.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/ckxs.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/ckxs.png" deleted file mode 100644 index c374acafe1ce796466a5a8ffde1c218a58dd19a7..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/ckxs.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/cwlx.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/cwlx.png" deleted file mode 100644 index 4a98a4219317b44ceef1b52c71dff84def76db18..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/cwlx.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/czdy.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/czdy.png" deleted file mode 100644 index 00781b777406bb0e8631abce93cc6fddc3d9d080..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/czdy.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/czys.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/czys.png" deleted file mode 100644 index 16f450282c1fe965069772b9b9f58d3ffaab75ac..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/czys.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/dxlxt.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/dxlxt.png" deleted file mode 100644 index 2a105303d98f62f6d56ea334e698bc8001ffa558..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/dxlxt.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/dyx1.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/dyx1.png" deleted file mode 100644 index 2e79b8d9472bd2e0c61bf83fc18b6c145ac927a5..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/dyx1.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/dyx2.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/dyx2.png" deleted file mode 100644 index 9b7410ef8b20213abdd49a373c805d2dea94b11b..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/dyx2.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/eyejt.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/eyejt.png" deleted file mode 100644 index 8728a8959b12918d4c585d89609231060a63e458..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/eyejt.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/gdxg.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/gdxg.png" deleted file mode 100644 index 2808d25ecac999de3d80506832831fc1e29e0be5..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/gdxg.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/gg.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/gg.png" deleted file mode 100644 index f3496a3c3f7cdb19e3fca8647ecc91dd354950eb..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/gg.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/gscw.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/gscw.png" deleted file mode 100644 index aa1fffd7369ecd7af7575c175e02cfe1523f98f1..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/gscw.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/hst.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/hst.png" deleted file mode 100644 index eea3e69a3e5ea74c736f54bfaa62c8ce6642e55b..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/hst.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/hszt.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/hszt.png" deleted file mode 100644 index c3523c56ac99c0aad606602e06a732dd7afd30df..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/hszt.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/lzmy.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/lzmy.png" deleted file mode 100644 index 9106cfb113d20e26190b7c12f3306084ef338828..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/lzmy.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/mzdz.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/mzdz.png" deleted file mode 100644 index 73cf0c22972cad44b9924655175082393bc01ce1..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/mzdz.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/sbzj.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/sbzj.png" deleted file mode 100644 index 151f72f63bbd4122760ac2405fd6e725d04cfca0..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/sbzj.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/sjc.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/sjc.png" deleted file mode 100644 index 525b6258161ff393bc2830111533e7766295f3f8..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/sjc.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/sjph.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/sjph.png" deleted file mode 100644 index 11a188d20133837dc86bfecb326b26dac117bda8..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/sjph.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/stzj.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/stzj.png" deleted file mode 100644 index 4f652f70fb12d6d72c2663d6b51d1723ed9ae3a0..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/stzj.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/tjz.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/tjz.png" deleted file mode 100644 index f97e500d4adf3ea3fe0fd3082df2b93ba17650bd..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/tjz.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/tzwz1.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/tzwz1.png" deleted file mode 100644 index b7ade322c61cae0d22cf7da8c4aba075d161b88a..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/tzwz1.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/tzwz2.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/tzwz2.png" deleted file mode 100644 index 74571cd49e61484e0f5e8440fdd410680c7600a3..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/tzwz2.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/wws.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/wws.png" deleted file mode 100644 index 1f9e3749721f4b902251cca06110c3e106ecf930..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/wws.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xh.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xh.png" deleted file mode 100644 index 635b6c4d17a999e93c13a5f8a31d1193fca90496..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xh.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xlt.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xlt.png" deleted file mode 100644 index c84f9cc9b1ecf7ca7af0ed4624f3803343f39279..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xlt.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xq.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xq.png" deleted file mode 100644 index 2fa28e080d3d7a2bb7901d06dd5e64edf9744d1a..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xq.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xsdb.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xsdb.png" deleted file mode 100644 index 67431f7fb5cad8c3245c25e8021fb5f0f0af5426..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xsdb.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xxcw.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xxcw.png" deleted file mode 100644 index 67fb70512a1558674404c8c6f63b133b9e1b39c0..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xxcw.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/ymxs.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/ymxs.png" deleted file mode 100644 index 4650e224533741b207c067038ca73a06027479dd..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/ymxs.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/z.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/z.png" deleted file mode 100644 index e90d35904c3fbb163def57f159798ab91f746acc..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/z.png" and /dev/null differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/zdz.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/zdz.png" deleted file mode 100644 index 204b63b2ac1ff4abfbfa31b0fc3a47d4ad86cc2f..0000000000000000000000000000000000000000 Binary files "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/zdz.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/20251110-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251110-\344\275\234\344\270\232.md" deleted file mode 100644 index 27f9cadec2e16ea79a167e19df734b3d131187e6..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251110-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,33 +0,0 @@ -## 作业 -![js1](.\图片imgs\js1.png) -```html -输出老子的名言 - - ``` -![js2](.\图片imgs\js2.png) -```html - - ``` - ```javascript - alert("https://gitee.com/grade24") - ``` - ## 笔记 - ## 一、JS 数据类型 -### JS 数据类型分为基本数据类型和引用数据类型,核心区别在于存储方式和访问机制。 -### 1. 基本数据类型(值类型) -### 直接存储值,占用空间小,复制时传递值本身: -### Number:数字类型(整数、小数、NaN、Infinity),如123、3.14; -### String:字符串类型,单 / 双引号包裹,如'hello'、"JS"; -### Boolean:布尔类型,仅true(真)和false(假)两个值; -### Undefined:未定义类型,变量声明未赋值时默认值,如let a;则a为undefined; -### Null:空值类型,主动表示 “空”,typeof 检测返回object(历史遗留 bug); -### Symbol(ES6+):唯一标识符,避免属性名冲突,如Symbol('key'); -### BigInt(ES6+):大整数类型,解决 Number 精度限制,后缀n,如9999999999999999n。 -### 2. 引用数据类型(引用类型) -### 存储内存地址,值存于堆内存,复制时传递地址: -### Object:对象类型,键值对集合,如{name: '张三', age: 20}; -### Array:数组类型,有序数据集合,如[1, 2, 3]; -### Function:函数类型,可执行代码块,如function fn() {}; -### 其他:Date(日期)、RegExp(正则)等。 \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251112-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251112-\344\275\234\344\270\232.md" deleted file mode 100644 index 149544398b9a4c74fd6722aece4037bcd981bf9a..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251112-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,41 +0,0 @@ -## 作业 -![js3](.\图片imgs\js3.png) -![js4](.\图片imgs\js4.png) -```html - - ``` - ## 笔记 - ### 二、常量与变量 -### 1. 变量(可变值) -### 定义:用let(ES6+)或var声明,值可修改; -### 特点:let块级作用域,无变量提升,不能重复声明;var函数级作用域,有变量提升,可重复声明; -### 2. 常量(不可变值) -### 定义:用const声明,必须初始化,值不可直接修改; -### 特点:块级作用域,不可重复声明;引用类型常量,地址不可改,内部属性可改; \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251113-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251113-\344\275\234\344\270\232.md" deleted file mode 100644 index 4c5e8c4802728c06e978f6c2da49723e38956ad0..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251113-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,214 +0,0 @@ -## 作业 -![js5](.\图片imgs\js5.png) -```html - - -``` -![js6](.\图片imgs\js6.png) -```html - - -``` -## 笔记 -### 1.算术运算符:用于数值计算,包括 +(加)、-(减)、*(乘)、/(除)、%(取余)、++(自增)、--(自减)。注意 + 也可用于字符串拼接,++/-- 放在变量前(先运算后赋值)或后(先赋值后运算)结果不同。 - -### 2.赋值运算符:给变量赋值,基础是 =,还有复合形式如 +=(a += b 即 a = a + b)、-=、*= 等,简化运算与赋值结合的操作。 - -### 3.比较运算符:比较两个值,返回布尔值。包括 ==(宽松相等,可能类型转换)、===(严格相等,类型和值都需相同)、!=、!==、>、<、>=、<=。 - -### 4.逻辑运算符:处理布尔值运算,&&(与,两边都为真才真)、||(或,一边为真就真)、!(非,取反)。会短路求值,即前半部分可确定结果时,后半部分不执行。 - -### 5.条件运算符(三目运算符):条件 ? 表达式1 : 表达式2,条件为真执行表达式 1,否则执行表达式 2,用于简化简单的条件判断。 - -### 6.其他:如 typeof(返回值的类型字符串)、,(逗号运算符,返回最后一个表达式结果)等,用于特定场景的操作。 \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251114-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251114-\344\275\234\344\270\232.md" deleted file mode 100644 index 64af7991a5fc6c61d01f637c42af72a504c37858..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251114-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,156 +0,0 @@ -## 作业 -![js7](.\图片imgs\js7.png) -```html - -``` -![js8](.\图片imgs\js8.png) -```html - -``` diff --git "a/\346\234\261\346\203\240\346\203\240/20251117-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251117-\344\275\234\344\270\232.md" deleted file mode 100644 index 6729f47498e9e2d8679235e9e910ac76fa19a6aa..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251117-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,124 +0,0 @@ -## 作业 -```html - - - -``` -## 笔记 - -### 函数的定义 -- 函数声明(传统,原始方式):```function functionName(parameters) { - return value; -}``` -- 匿名函数(函数表达式):``` -const functionName = function(parameters) { - return value; -}; -const functionName = function myFunction(parameters) { - return value; -};``` -- 箭头函数:``` -const functionName = (parameters) => { - return value; -}; -const functionName = parameter => { - return value; -}; -const functionName = (parameters) => value;```s \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251119-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251119-\344\275\234\344\270\232.md" deleted file mode 100644 index 1411821fa82edb2476506c7c06d3ede4c5824743..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251119-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,92 +0,0 @@ -## 作业 -![js9](.\图片imgs\js9.png) -```html - - - - - - -``` -## 笔记 -### 函数 - -1.函数的返回值 - -- 在函数中返回一个值,以便于被其他函数使用。 - -2.递归函数 - -- 在函数自身的函数体调用自身。如处理阶乘问题 - -- 定义递归函数的两个必要条件 - - - 一个结束递归(终点) - - - 一个递归调用(靠近终点的一步) - -3. js中的内置函数 - -- 主要内置函数 diff --git "a/\346\234\261\346\203\240\346\203\240/20251120-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251120-\344\275\234\344\270\232.md" deleted file mode 100644 index f1614be79b0f12e27350fd46e34910fa7b73398e..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251120-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,94 +0,0 @@ -## 作业 -![js10](.\图片imgs\js10.png) -```html - - -``` -## 笔记 -### 对象的定义 - -- 一个使用大括号包裹内容的容器。 - -- 注意: 在对象中,this 关键字通常指向调用该方法的对象本身。 - -### 操作对象 - -1. 访问属性 - -- “对象名.属性名” - -- “对象名[属性名]” - -2. 添加属性 - -- "对象名 新属性.新值" - -3. 删除属性 - -- “delete 对象名.属性值;” - -4.添加方法 - -5.遍历对象 - -- for...in 循环: 用于遍历对象自身的和继承的可枚举属性(不推荐直接用于遍历数据属性)。 -- Object.keys() / Object.values() / Object.entries(): 推荐用于遍历对象的属性、值或键值对。它们只返回对象自身的属性。 \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251121-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251121-\344\275\234\344\270\232.md" deleted file mode 100644 index 764a51380f7560749aaebb8908ae4cb34d041705..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251121-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,74 +0,0 @@ -## 作业 -![js11](.\图片imgs\js11.png) -```html - - - -
      -

      请输入要生成随机数的位数

      - - - - -``` -![js12](.\图片imgs\js12.png) -```html - -``` -## 笔记 -### Event对象 - -- Event对象代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。 -- 常见事件类型: - - click: 鼠标点击元素。 - - dblclick: 鼠标双击元素。 - - mouseover / mouseout: 鼠标移入 / 移出元素。 - - keydown / keyup: 键盘按键按下 / 松开。 - - input / change: 表单元素内容变化。 - - submit: 表单提交。 - - load: 页面或图像加载完成。 -- Event 对象的常用属性和方法: - - event.type: 返回事件的类型(如 "click")。 - - event.target: 返回触发事件的元素(事件源)。 - - event.currentTarget: 返回当前正在处理事件的元素(即事件监听器所绑定的元素)。 - - event.preventDefault(): 阻止事件的默认行为(如阻止链接跳转、表单提交)。 - - event.stopPropagation(): 阻止事件在 DOM 树中向上冒泡。 - - event.key: (对于键盘事件) 返回按下的键名。 - - event.clientX / event.clientY: (对于鼠标事件) 返回鼠标在浏览器窗口可视区的 X/Y 坐标。 \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251124-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251124-\344\275\234\344\270\232.md" deleted file mode 100644 index 8ce179ba001a2e2ce0bbd69ac734c75d5c092250..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251124-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,185 +0,0 @@ -# 作业: -```html - - - - -``` - - - - -# 笔记: -## 一、数组(Array)​ -- 定义:有序、可重复的元素集合,支持索引访问(下标从 0 开始)。​ -- 创建方式:​ -- 字面量:const arr = [1, 2, 3]​ -- 构造函数:const arr = new Array(1, 2, 3)​ -- 核心特性:有序、可重复、可存任意类型(数字、字符串、对象等)。​ -- 常用方法:​ -- 增删:push()(尾增)、pop()(尾删)、shift()(头删)、unshift()(头增)​ -- 遍历:forEach()、map()、filter()​ -- 查找:find()、indexOf()​ -- 注意:通过索引操作高效,查找非索引元素需遍历。​ -## 二、集合(Set)​ -- 定义:ES6 新增,无序、不可重复的元素集合,无索引。​ -- 创建方式:const set = new Set([1, 2, 3])(参数为可迭代对象)​ -- 核心特性:无序、去重、可存任意类型(引用类型按地址去重)。​ -- 常用方法:​ -- 增删查:add()、delete()、has()、clear()​ -- 遍历:forEach()、for...of​ -- 长度:size 属性(无 length)​ -- 注意:去重高效,无索引无法通过下标访问,需转数组([...set])后操作。 \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251126-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251126-\344\275\234\344\270\232.md" deleted file mode 100644 index 8c2b00bbf536eb83b243a68c76fea30c4d0db785..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251126-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,86 +0,0 @@ -# 作业 -```html - - - - -``` -# 笔记: -## 一、正则表达式(RegExp)​ -- 定义:描述字符模式的对象,用于匹配、查找、替换字符串中的特定字符组合。​ -- 创建方式:​ -- 字面量:const reg = /pattern/flags(如 /abc/g,pattern 为匹配模式,flags 为修饰符)​ -- 构造函数:const reg = new RegExp('pattern', 'flags')(如 new RegExp('abc', 'g'))​ -- 核心修饰符(flags):​ -- g:全局匹配(不匹配一次后停止)​ -- i:忽略大小写(匹配时不区分字母大小写)​ -- m:多行匹配(将 ^ 和 $ 视为每行的开头和结尾)​ -- 常用元字符(pattern 核心):​ -- 基础:.(匹配任意单个字符,除换行)、\d(匹配数字)、\w(匹配字母 / 数字 / 下划线)​ -- 边界:^(匹配字符串开头)、$(匹配字符串结尾)​ -- 量词:*(匹配 0 次或多次)、+(匹配 1 次或多次)、?(匹配 0 次或 1 次)、{n}(匹配 n - 次)​ -- 常用方法:​ -- 正则对象方法:test(str)(判断字符串是否匹配,返回布尔值)、exec(str)(返回匹配结果数- 组,无匹配则为 null)​ -- 字符串方法:match(reg)(返回匹配结果数组)、replace(reg, newStr)(替换匹配的字符)、- split(reg)(按匹配规则分割字符串) \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251127-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251127-\344\275\234\344\270\232.md" deleted file mode 100644 index 6a6757d85e562542adeebde6dc3c1c885a410e1c..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251127-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,75 +0,0 @@ -# 作业: -```html - - Document - - - -

      输入1-5的数字:

      -
      - - - -``` -# 笔记: -## 一、异常处理(Error Handling)​ -- 异常定义:代码执行中出现的错误(如语法错误、逻辑错误、引用错误),会中断程序默认执行流程。​ -- 核心处理语句:​ -- try...catch:捕获并处理异常​ -- try:包裹可能抛出异常的代码块​ -- catch(err):捕获 try 中抛出的异常,err 为异常对象(含 message 错误信息、name 错误类型)​ -- finally:无论 try 中是否抛出异常,都会执行的代码块(常用于释放资源,如关闭请求)​ -- throw:主动抛出自定义异常(可抛字符串、对象等),触发 catch 捕获​ -- 示例:if (num < 0) throw new Error('数字不能为负');​ -- 常见错误类型:​ -- SyntaxError:语法错误(如括号不闭合)​ -- ReferenceError:引用未定义的变量​ -- TypeError:类型错误(如对非函数变量调用)​ -- RangeError:范围错误(如数组长度设为负数)​ -## 二、程序调试(Debugging)​ -- 核心目的:定位代码中的错误,验证逻辑正确性。​ -- 常用调试方法:​ -- console 方法:​ -- console.log():输出普通信息(最常用)​ -- console.error():输出错误信息(标红显示,便于区分)​ -- console.warn():输出警告信息(黄色提示)​ -- console.table():以表格形式输出数组 / 对象(清晰展示结构化数据) \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251128-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251128-\344\275\234\344\270\232.md" deleted file mode 100644 index 11459d6ef2c5e4ca56117cd19bcec9b5a7d2da5b..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251128-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,58 +0,0 @@ -# 作业: -```html - - -``` -# 笔记 -## 一、核心表单事件(常用优先) -- submit -- 触发:点击提交按钮( - - - - - -``` -## 笔记 -### Document对象的常用属性和方法 -1. 常用属性 - -| 属性名 | 作用 | 示例 | -|-----------------------|----------------------------------------------------------------------|----------------------------------------------------------------------| -| document.title | 获取 / 设置页面标题(``标签内容) | `document.title = "新标题";`(动态改标题) | -| document.body | 获取`<body>`标签对象 | `document.body.style.backgroundColor = "red";`(改页面背景) | -| document.URL | 获取当前页面完整 URL(只读) | `console.log(document.URL);`(打印地址栏链接) | -| document.readyState | 获取文档加载状态:<br>1. `loading`(加载中)<br>2. `interactive`(可交互,DOM 加载完)<br>3. `complete`(完全加载) | 监听文档加载完成:<br>```javascript<br>if(document.readyState === "complete") { ... }<br>``` | -| document.documentElement | 获取`<html>`根标签 | `let html = document.documentElement;`(获取根标签,适配视口高度) | \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251204-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251204-\344\275\234\344\270\232.md" deleted file mode 100644 index b653fd16d981e47ccba3d166fcde91e9e4f3f7f0..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251204-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,73 +0,0 @@ -## 作业 -```html - <title>Document - - - - - - 我是文本内容 - - - - - - -
      - - - -``` -## 笔记 -### DOM 节点属性 -1. 访问指定节点 -2. 遍历文档树 -### 节点 -1. 创建节点 - -| 方法 | 作用 | 示例 | 注意点 | -| :--- | :--- | :--- | :--- | -| `document.createElement('标签名')` | 创建元素节点 | `let newDiv = document.createElement('div');` | 仅创建节点,需通过 `appendChild`/`insertBefore` 插入文档才会显示 | -| `document.createTextNode('文本')` | 创建文本节点 | `let text = document.createTextNode('Hello');` | 可通过 `newDiv.appendChild(text)` 追加到元素节点中,纯文本无标签 | -| `document.createAttribute('属性名')` | 创建属性节点 | `let attr = document.createAttribute('class'); attr.value = 'box'; newDiv.setAttributeNode(attr);` | 1. 需手动设置 `value` 赋值属性值;
      2. 更简洁替代:`newDiv.setAttribute('class','box')`;
      3. 创建后需通过 `setAttributeNode` 绑定到元素 | diff --git "a/\346\234\261\346\203\240\346\203\240/20251205-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251205-\344\275\234\344\270\232.md" deleted file mode 100644 index 3d51533bde20cfc290bc90e74b9327377247ee8b..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251205-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,113 +0,0 @@ -## 作业 -```html - - -

      最新电影资讯

      -
        -
      • 1《金蝉脱壳》两大动作巨星联手
      • -
      • 2《阿甘正传》励志而传奇的一生
      • -
      • 3《爱乐之城》爱情与梦想的交织
      • -
      • 4《头号玩家》游戏梦想照进显示
      • -
      -
      输入影片咨询编号: - - -
      - - - - - - -
      • 黄瓜
      • 茄子
      • 芒果
      -
      • 西瓜
      • 蜜橘
      • 萝卜
      - - - - -
      -

      在倚天屠龙记中,张三丰是___派的掌门?

      -
      -
      - A 少林 - B 武当 - C 峨眉 - D 昆仑 -
      - - - -``` -## 笔记 -1. 对话框 - -- 警告对话框 - - alert('提示文本'); - - 弹出提示框,仅 “确定” 按钮 - - 无返回值;阻塞代码执行,直到点击确定 - -- 确认对话框 - - let res = confirm('确认文本'); - - 弹出确认框(确定 / 取消) - - 点击 “确定” 返回 true,“取消” 返回 false;常用作操作确认(如删除) -- 提示对话框 - - let res = prompt('提示文本', '默认值'); - - 弹出输入框(确定 / 取消) - - 点击 “确定” 返回输入内容(字符串),“取消” 返回 null;可获取用户输入 -2. 窗口的关闭和打开 \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251208-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251208-\344\275\234\344\270\232.md" deleted file mode 100644 index 5cd71f2aae2401f7710e0b24bf98173a4020f4d3..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251208-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,111 +0,0 @@ -## 作业 -```html - - - - - - Document - - - -
      - - - - - - - -
      1234566654
      - - - - 打开图片对话框 - -``` -## 笔记 -### 浏览器对象模型 - | - -#### location对象 - -| 属性 | 作用 | -|--------------|--------------------------| -| `href` | 完整URL(可读写)| -| `protocol` | 协议(带冒号)| -| `host` | 主机+端口 | -| `hostname` | 主机名(不含端口)| -| `port` | 端口号(无则空)| -| `pathname` | 路径(以/开头)| -| `search` | 查询参数(以?开头)| -| `hash` | 锚点(以#开头,用于页面内跳转) | -| `origin` | 协议+主机+端口(只读)| - -| 方法 | 作用 | -|---------------------|----------------------------------------------------------------------| -| `location.assign(url)` | 跳转到指定URL,可回退到原页面(保留历史记录)| -| `location.replace(url)` | 跳转到指定URL,替换当前历史记录(无法回退)| -| `location.reload(force)` | 刷新页面;`force=true` 强制从服务器刷新(忽略缓存),默认从缓存刷 | -| `location.href = url` | 等价于`assign`,最常用的跳转方式 - -#### navigator对象 - -| 属性 | 作用 | -|---------------------|----------------------------------------------------------------------| -| `userAgent` | 浏览器用户代理字符串(核心!识别浏览器/系统/设备)| -| `platform` | 浏览器运行的系统平台 | -| `language` | 浏览器默认语言 | -| `onLine` | 布尔值,判断浏览器是否联网(`true`=在线)| -| `appName` | 浏览器名称(多为"Netscape",兼容性差,不推荐)| -| `appVersion` | 浏览器版本(包含内核信息,可读性差)| - -#### screen对象 - -| 属性 | 作用 | -|---------------------|----------------------------------------------------------------------| -| `width`/`height` | 屏幕总宽度/高度(像素,包含系统任务栏/菜单栏)| -| `availWidth`/`availHeight` | 屏幕可用宽度/高度(像素,排除任务栏/菜单栏,实际可显示区域)| -| `colorDepth` | 屏幕颜色深度(多为24/32,代表色彩还原度)| -| `pixelDepth` | 屏幕像素深度(与colorDepth值一致,仅兼容不同浏览器)| \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251210-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251210-\344\275\234\344\270\232.md" deleted file mode 100644 index 096c6ab594ad1322b3563a4ce7e79c184817f50f..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251210-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,160 +0,0 @@ -## 作业 -```html - - - - - - - - 图片 - - - - -
        -
      • HTML/CSS讨论区
      • -
      • JavaScript讨论区
      • -
      • C语言讨论区
      • -
      • Java讨论区
      • -
      • Android讨论区
      • -
      • Pyhton讨论区
      • -
      - - - -``` -## 笔记 -### 样式标签属性和样式属性 -- 样式标签属性:直接写在 HTML 标签上的style属性,优先级最高(行内样式),语法:<标签 style="属性名: 值;"> - -例:```
      ``` - -- 样式属性: - -操作 DOM 样式时用驼峰命名(如paddingLeft、fontSize),语法:元素.style.属性名 = "值"; - -例:div.style.color = "blue"; div.style.paddingLeft = "20px"; -### 常用样式属性操作 -1. 颜色和背景属性 - -| 用途 | CSS 属性 | JS 属性 | 核心值 / 示例 | 语法说明 | 考点备注 | -| :------------- | :---------------- | :---------------- | :------------------------------------- | :------------------------------------------------------------------------ | :--------------------------- | -| 文字颜色 | color | color | 十六进制(#ff0000)、RGB(rgb(255,0,0))、英文(red) | CSS 语法:`color: 颜色值;`
      JS 语法:`元素.style.color = "颜色值";` | 行内/JS 修改优先级高于样式表 | -| 背景颜色 | background-color | backgroundColor | rgb(93,180,93)、#f5f5f5、rgba(93,180,93,0.8) | CSS 语法:`background-color: 颜色值;`
      JS 语法:`元素.style.backgroundColor = "颜色值";` | 区分 `background` 复合属性 | -| 背景图片 | background-image | backgroundImage | url("img/bg.png")、url('../bg.jpg') | CSS 语法:`background-image: url("图片路径");`
      JS 语法:`元素.style.backgroundImage = "url('图片路径')";` | JS 中路径需嵌套单/双引号 | -| 背景是否重复 | background-repeat | backgroundRepeat | no-repeat、repeat、repeat-x、repeat-y | CSS 语法:`background-repeat: 取值;`
      JS 语法:`元素.style.backgroundRepeat = "取值";` | 控制背景图平铺方向/是否平铺 | -| 背景定位 | background-position | backgroundPosition | center、20px 10px、50% 0、right bottom | CSS 语法:`background-position: X轴值 Y轴值;`
      JS 语法:`元素.style.backgroundPosition = "X轴值 Y轴值";` | 复合值用空格分隔(X轴 Y轴) | - -2. 边框属性 - -| 用途 | CSS 属性 | JS 属性 | 核心值 / 示例 | 考点备注 | -| -------------- | ---------------- | --------------- | ---------------------- | --------------------------------- | -| 复合边框 | border | border | 1px solid #ccc | 顺序:宽度 + 样式 + 颜色 | -| 单方向边框 | border-left/top | borderLeft/top | 2px dashed red | 常用作侧边装饰(如菜单边框) | -| 边框圆角 | border-radius | borderRadius | 8px、50%(圆形) | 高频考:按钮 / 头像圆角 | -| 边框是否显示 | border-style | borderStyle | solid(实线)/dashed(虚线)/none | 设为 none 可隐藏边框 | -3. 定位属性 - -| 用途 | CSS 属性 | JS 属性 | 核心值 / 示例 | 考点备注 | -| ---------- | ---------------------- | --------------------- | ------------------------------ | --------------------------------- | -| 定位方式 | position | position | static(默认)/relative/absolute/fixed | absolute 需配合父级 relative | -| 偏移量 | left/top/right/bottom | left/top/right/bottom | 20px、50% | 仅定位非 static 时生效 | -| 外边距 | margin | margin | 10px、0 auto(水平居中) | 块级元素水平居中核心 | -| 内边距 | padding | padding | 20px、10px 20px(上下 / 左右) | JS 中paddingLeft等驼峰写法 | -| 显示 / 隐藏 | display | display | block/inline/inline-block/none | none 完全隐藏(不占位置) | -| \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251211-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251211-\344\275\234\344\270\232.md" deleted file mode 100644 index 44fb94d18613c01f87a0ec2f6827ec5457306335..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251211-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,104 +0,0 @@ -## 作业 -```html - -
      用户协议
      - - - - - - -

      请选择相应课程

      -
      -    c语言
      -    机械制图
      -    单片机
      -    自动控制
      -    传感器
      -    高等数学
      -    计算机基础
      -    Oracle数据库
      -    商务英语
      -    PLC设计基础
      -    
      - - - - -
      电影《变相怪杰》的主演是谁?
      - 布拉德·皮特 - 亚当·桑德勒 - 金·凯瑞 - 杰夫·丹尔斯 - -
      - -
      - - -``` -## 笔记 -### 访问表单与表单元素的方法 - -| 方法 | 语法 | 特点 | -|------|------|------| -| 通过id(最常用) | `document.getElementById('formId')` | 精准、高效,优先使用 | -| 通过name属性 | `document.forms['formName']` / `document.formName` | 兼容性好,注意name唯一 | -| 通过下标(不推荐) | `document.forms[0]` | 依赖表单在页面中的顺序,易出错 | - -**易错点**:querySelectorAll 返回类数组,需通过[0]取单个元素,如document.querySelectorAll('[name=province]')[0],直接.value会返回 undefined。 - -### Form对象的属性、方法与事件 - -| 属性/方法 | 作用 | 示例 | -|------|------|------| -| `elements` | 返回表单内所有元素的集合(类数组) | `formObj.elements[0]` → 第一个表单元素 | -| `action` | 获取/设置表单提交的URL | `formObj.action = 'http://xxx.com/submit'` | -| `method` | 获取/设置提交方式(GET/POST) | `formObj.method = 'POST'` | -| `enctype` | 获取/设置表单编码类型(如文件上传用multipart/form-data) | - | -| `name` | 表单名称,对应`document.forms[name]` | - | -| `reset()` | 重置表单到初始状态 | `formObj.reset()` | -| `submit()` | 手动提交表单(替代按钮点击) | `formObj.submit()` | \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251212-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251212-\344\275\234\344\270\232.md" deleted file mode 100644 index c5244e86acaf2c2a58c7582e36e045cef4e084c7..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251212-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,14 +0,0 @@ - -## 笔记 - -### json - -- json是一种数据传输格式,其形态为字符串 - -**序列化和反序列化**: -序列化是将对象转化为JSON字符串的过程,而反序列化则是将JSON字符串转化为对象的过程。 - -| 操作 | 定义 | 核心目标 | 常用场景 | -| --- | --- | --- | --- | -| 序列化(JSON.stringify) | 将 JavaScript 对象 / 数组转为 JSON 字符串 | 把内存中的数据转为可传输 / 存储的格式 | 前端向后端传参、本地存储数据 | -| 反序列化(JSON.parse) | 将 JSON 字符串转回 JavaScript 对象 / 数组 | 把传输 / 存储的字符串还原为可操作的 JS 数据 | 接收后端返回数据、读取本地存储 | diff --git "a/\346\234\261\346\203\240\346\203\240/20251215-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251215-\344\275\234\344\270\232.md" deleted file mode 100644 index a28151242f79f86b9e435ea5884323d6410b5acf..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251215-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,105 +0,0 @@ -## 作业 -```html - - - - - - Document - - - -
        -
      • 1.《金蝉脱壳》
      • -
      • 2.《阿甘正传》
      • -
      • 3.《爱乐之城》
      • - -
      - 输入编号: - - - - - - - Document - - -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 草莓
      • -
      -
        -
      • 苹果
      • -
      • 西瓜
      • -
      • 萝卜
      • -
      - - - -
      - 这一题选() - ABCD - - - - -``` -## 笔记 -let arr=[1,3,4,4,3,1,2]; - -**arr.indexof()** -从左到右开始,查找传入的元素是否在数组中,如果找到,则返回第一个找到数组的下标,如果没有则返回-1 - -**arr.lastIndexof()** -从右开始,查找传入的元素是否在数组中,如果找到,则返回第一个找到元素的下标,如果没有则返回-1 -``` \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251217-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251217-\344\275\234\344\270\232.md" deleted file mode 100644 index c0867c6448bf712c8326f6235412f5ee6ee2ee1f..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251217-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,86 +0,0 @@ -## 作业 -```html - - 我是链接 - - -
      - - - - 文本内容 - 粗体改斜体 - -``` -## 笔记 -### jQuery基础 -- 和js的引用一样,建议在body结束标签之前引用。 - -- 使用`$`来使用jQuery库的能力,`$`符号实际上是一个方法,当然方法在js中也是一对象,所以其也有一些属性可以使用 - -- jquery可以获得jQuery,和原生js拿到的对象不同,但它们间可以互相转换 - - - let div=$('div')拿到jquery对象 - - - div[0]拿到dom对象 - - - $(div[0]又可以重新转换为jquery对象) - - 原生js拿到的接过,通常是dom对象 - - jquery拿到的结果,通常是jQuery对象 - - - let div=$('div'); - - 将jQuery对象转换成dom对象 - - let domEl = div[0]; - - 将dom对象重新转换为jquery对象 - - let jQueryObj = $(domEl); - ### jQuery选择器与操作 - - - 基础选择器 - - 标签选择器 - - 类名选择器 - - id选择器 - - 关系选择器 - - 子代选择器` ` - - 直接子代选择器`>` - - 兄弟选择器`~` - - 相邻兄弟选择器`+` - - 高级选择器 - - 属性表达器 - - 伪类表达器 - - 伪元素表达器 - - - - - - - - diff --git "a/\346\234\261\346\203\240\346\203\240/20251218-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251218-\344\275\234\344\270\232.md" deleted file mode 100644 index af93987a2ab5c280a7aefd4b9d2236747ab44a02..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251218-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,27 +0,0 @@ -## 笔记 - -### jQuery事件处理 - -事件绑定函数第二种情形: - -let d4 = document.getElementById('d4'); - -d4.onclick = function(){} - -d4.addEventListener('click',function(){}) - -- jQuery对象.on('click',function(){}) -- jQuery对象.click(function(){}) -- jQuery对象.trigger('click',function(){}) -- $(function(){}) - -**jQuery的初始化数据的搞法** - - $(document).ready(function(){}) - $(document).on('reay',function(){}) - $(function(){ - console.log(1); - }) -### jQuery动画与效果 -- 基础效果:显示、隐藏 show()、hide()、toggle() -- 进阶效果:淡入、淡出 fadeIn()、fadeOut() \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251219-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251219-\344\275\234\344\270\232.md" deleted file mode 100644 index 43d7940262aa894944ed8abc7c4d3e52da91a4df..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\203\240\346\203\240/20251219-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,209 +0,0 @@ -## 作业 -```html - - - -
      -

      博客列表

      - -
      -
      - -
      -
      -
      第" + c + "排第" + f + "个
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      序号标题内容摘要作者发布日期操作
      1OpenCVSharp:HOG行人检测概述HOG行人检测是一种基于方向梯度直方图特征的计算机视觉...minnnnnns2025-12-18
      1OpenCVSharp:HOG行人检测概述HOG行人检测是一种基于方向梯度直方图特征的计算机视觉...minnnnnns2025-12-18
      1OpenCVSharp:HOG行人检测概述HOG行人检测是一种基于方向梯度直方图特征的计算机视觉...minnnnnns2025-12-18
      1OpenCVSharp:HOG行人检测概述HOG行人检测是一种基于方向梯度直方图特征的计算机视觉...minnnnnns2025-12-18
      1OpenCVSharp:HOG行人检测概述HOG行人检测是一种基于方向梯度直方图特征的计算机视觉...minnnnnns2025-12-18
      1OpenCVSharp:HOG行人检测概述HOG行人检测是一种基于方向梯度直方图特征的计算机视觉...minnnnnns2025-12-18
      1OpenCVSharp:HOG行人检测概述HOG行人检测是一种基于方向梯度直方图特征的计算机视觉...minnnnnns2025-12-18
      1OpenCVSharp:HOG行人检测概述HOG行人检测是一种基于方向梯度直方图特征的计算机视觉...minnnnnns2025-12-18
      1OpenCVSharp:HOG行人检测概述HOG行人检测是一种基于方向梯度直方图特征的计算机视觉...minnnnnns2025-12-18
      1OpenCVSharp:HOG行人检测概述HOG行人检测是一种基于方向梯度直方图特征的计算机视觉...minnnnnns2025-12-18
      - - - - -``` \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js1.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js1.png" deleted file mode 100644 index cd90b13e16a634edeba1b7a2d7dd33b7de52d837..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js1.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js10.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js10.png" deleted file mode 100644 index c7f9cdae0343e97970602a135c0bb4945983d904..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js10.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js11.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js11.png" deleted file mode 100644 index 3c0f3244904addcf5b4d635a4fa31442ce0848aa..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js11.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js12.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js12.png" deleted file mode 100644 index 8bcb27accb1048ce9aa9ff7e390a8e04fd0a0e8b..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js12.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js2.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js2.png" deleted file mode 100644 index 6424073626fd8d06bfcc25abf61802240959fa2c..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js2.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js3.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js3.png" deleted file mode 100644 index b2ff3c97f4fb1e9c3d254cddc894ba0b41c589d6..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js3.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js4.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js4.png" deleted file mode 100644 index 22481ca36213648bb33708377f57e338f8ee5a04..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js4.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js5.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js5.png" deleted file mode 100644 index a485378358eb6fb6a1825d71f9807090f0f7f3ce..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js5.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js6.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js6.png" deleted file mode 100644 index 6c023be48701e1b9f53cd30f72f8857f96933608..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js6.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js7.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js7.png" deleted file mode 100644 index 18d482db98c94eeac39c8649ad937c69b945d5e0..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js7.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js8.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js8.png" deleted file mode 100644 index de81e8d0d238619684f5aa117b3c8775dd24da95..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js8.png" and /dev/null differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js9.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js9.png" deleted file mode 100644 index 0a3f549d19a7878d0ab6b4b69ec421aaa12d7f4f..0000000000000000000000000000000000000000 Binary files "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js9.png" and /dev/null differ diff --git "a/\346\235\216\346\231\250\346\273\224/20251217-200\347\273\203\344\271\240.md" "b/\346\235\216\346\231\250\346\273\224/20251217-200\347\273\203\344\271\240.md" index 50d8e85f61d9fb4e59593f59b7f069fb44da2653..07157a109e23ac9a0b448dbdc15a12810008bfa8 100644 --- "a/\346\235\216\346\231\250\346\273\224/20251217-200\347\273\203\344\271\240.md" +++ "b/\346\235\216\346\231\250\346\273\224/20251217-200\347\273\203\344\271\240.md" @@ -73,91 +73,4 @@ document.write("今天是工作日,不要上班"); break; } -``` - -7. -```bash - let arr = [ - '苹果', '香蕉', '橙子' - ]; - for(let value of arr){ - document.write(value); - } -``` - -8. -```bash - let object = { name: '张三', age: 20, city: '北京' }; - for (const property in object) { - console.log(`${property}: ${object[property]}`); - } -``` - -9. -```bash - let arr = [-5, 1, 4, 50, 60]; - for (const num of arr) { - if (num < 0) { - continue; - } - if (num > 50) { - document.write(num); - break; - } - } -``` - -10. -```bash - for(let i = 1 ;i<=9;i++){ - for(let j = 1;j<=9;j++){ - document.write(`${i}*${j}=${i*j}
      `); - } - } -``` - -11. -```bash - let age = 18; - let status1,status2; - - status1 = age >=18?'成年':'未成年'; - - if (age >= 18) { - status2 = '成年'; - } else { - status2 = '未成年'; - } - - console.log("三元运算符实现:"); - console.log(`let status1 = age >= 18 ? '成年' : '未成年'; 结果:${status1}`); - - console.log("\nif-else 实现:"); - console.log(`if (age >= 18) { status2 = '成年'; } else { status2 = '未成年'; } 结果:${status2}`); -``` - -12. -```bash - let num = Math.floor(Math.random() * 100) + 1; - while (true) { - let guess = prompt('请输入你猜测的数字(1-100):'); - if(guess ===null){ - alert('游戏已取消'); - continue; - } - if (guess < 1 || guess > 100) { - alert('请输入区域内的数字!'); - } else { - if (guess > num) { - alert('太大啦!'); - } - if (guess == num) { - alert('恭喜你猜对啦!'); - break; - } - if (guess < num) { - alert('太小啦!'); - } - } - } ``` \ No newline at end of file diff --git "a/\346\235\216\346\231\250\346\273\224/20251218-200\347\273\203\344\271\240.md" "b/\346\235\216\346\231\250\346\273\224/20251218-200\347\273\203\344\271\240.md" index 890a604c2b2a77c43d9d8a8e952d630be7975657..819a68346177badc5a60bb73780d8b04499ec6bc 100644 --- "a/\346\235\216\346\231\250\346\273\224/20251218-200\347\273\203\344\271\240.md" +++ "b/\346\235\216\346\231\250\346\273\224/20251218-200\347\273\203\344\271\240.md" @@ -38,46 +38,4 @@ } console.log(counts(arr,item)); -``` - -4. -```bash - let arr = [1,2,4,4,3,3,1,5,3]; - function find(arr){ - const countMap = new Map(); - const duplicates = []; - - for (const item of arr){ - countMap.set(item,(countMap.get(item)||0)+1); - } - - for(const [key,value] of countMap){ - if(value>=2){ - duplicates.push(key); - } - } - return duplicates; - } - console.log(find(arr)); -``` - -5. -```bash - let arr = [1,2,3,4,2,5] - let item = 2; - function remove(arr,item){ - return arr.filter(element => element !==item); - } - console.log(remove(arr,item)); -``` - -6. -```bash - let arr = [{ name: "小明", score: 85 }, { name: "小红", score: 55 }, { name: "小刚", score: 90 }]; - function getPassed(arr) { - return arr - .filter(arr => arr.score >= 60) - .map(arr => arr.name); - } - console.log(getPassed(arr)); ``` \ No newline at end of file diff --git "a/\346\235\216\346\231\250\346\273\224/20251219-200\347\273\203\344\271\240.md" "b/\346\235\216\346\231\250\346\273\224/20251219-200\347\273\203\344\271\240.md" index 8336e207583157057e98eb361251a21c0575b022..5a418cc2f3ba4c4060147cfbe61c99eb7fc7c2e1 100644 --- "a/\346\235\216\346\231\250\346\273\224/20251219-200\347\273\203\344\271\240.md" +++ "b/\346\235\216\346\231\250\346\273\224/20251219-200\347\273\203\344\271\240.md" @@ -34,143 +34,4 @@ return arr.reduce((prev, curr) => Math.max(prev, curr), arr[0]); } console.log(maxNum(arr)); -``` - -11. -```bash - let arr = [2, 5, 8, 12, 15, 7]; - function firstMaxNum(arr) { - return arr.find(num => num > 10); - } - console.log(firstMaxNum(arr)); -``` - -12. -```bash - let arr = [1, 5, 3, -2, 8, -5]; - function firstNegativeNum(arr) { - return arr.findIndex(num => num < 0); - } - console.log(firstNegativeNum(arr)); -``` - -13. -```bash - let arr = [1, 3, 5, 7, 8]; - function evenNum(arr) { - return arr.some(num => num % 2 == 0); - } - console.log(evenNum(arr)); -``` - -14. -```bash - let arr = [1, 2, 3, 4, 5]; - function allNum(arr) { - return arr.every(num => num > 0); - } - console.log(allNum(arr)); -``` - -15. -```bash - let arr = [40, 100, 1, 5, 25, 10]; - function allNum(arr) { - return arr.sort((a, b) => a - b); - } - console.log(allNum(arr)); -``` - -16. -```bash - let arr = [{ name: "小明", age: 20 }, { name: "小红", age: 18 }, { name: "小刚", age: 22 }]; - function allNum(arr) { - return [...arr].sort((a, b) => a.age - b.age); - } - console.log(allNum(arr)); -``` - -17. -```bash - let arr = ['apple', 'banana', 'orange']; - function printArr(arr) { - let output = ''; - arr.forEach((item, index) => { - output += `索引${index}: ${item} `; - }); - console.log(output.trim()); - } - printArr(arr); -``` - -18. -```bash - let arr = [[1, 2], [3, 4], [5, 6]]; - function flattening(arr) { - return arr.reduce((acc, curr) => acc.concat(curr), []); - } - console.log(flattening(arr)); -``` - -19. -```bash - let arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']; - function appear(arr) { - return arr.reduce((acc, curr) => { - acc[curr] = (acc[curr] ?? 0) + 1; - return acc; - }, {}); - } - console.log(appear(arr)); -``` -20. -```bash - let arr = [{ name: "鼠标", price: 29 }, { name: "键盘", price: 89 }, { name: "显示器", price: 899 }, { name: "耳机", price: 199 }]; - function name(arr) { - return arr - .filter(arr => arr.price > 50) - .sort((a, b) => a.price - b.price); - } - console.log(name(arr)); -``` -21. -```bash - let arr = [2, 5, 8, 3, 9]; - function name(arr) { - return arr - .map(num => num * 2) - .filter(num => num > 10); - } - console.log(name(arr)); -``` -22. -```bash - let arr = [1, 2, 2, 3, 4, 4, 5, 1]; - function deduplication(arr) { - return arr.reduce((acc, curr) => { - !acc.includes(curr) && acc.push(curr); - return acc; - }, []); - } - console.log(deduplication(arr)); -``` -23. -```bash - let arr = [{ name: "小明", score: 85 }, { name: "小红", score: 92 }, { name: "小刚", score: 78 }, { name: "小丽", score: 88 }]; - function averageScore(arr) { - if (arr.length === 0) return 0; - const totalScore = arr.reduce((acc, curr) => acc + curr.score, 0); - return totalScore / arr.length - } - console.log(averageScore(arr)); -``` -24. -```bash - let arr = [{ name: "张三", age: 17 }, { name: "李四", age: 20 }, { name: "王五", age: 25 }, { name: "赵六", age: 16 }]; - function adults() { - return arr - .filter(arr => arr.age > 18) - .map(item => `${item.name}(${item.age}岁)`); - } - console.log(adults(arr)); ``` \ No newline at end of file diff --git "a/\346\235\216\346\231\250\346\273\224/20251222-200\347\273\203\344\271\240.md" "b/\346\235\216\346\231\250\346\273\224/20251222-200\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..9184f19389e61a23889690d34dc90c2d67b3c8ce --- /dev/null +++ "b/\346\235\216\346\231\250\346\273\224/20251222-200\347\273\203\344\271\240.md" @@ -0,0 +1,86 @@ +7. +```bash + let arr = [ + '苹果', '香蕉', '橙子' + ]; + for(let value of arr){ + document.write(value); + } +``` + +8. +```bash + let object = { name: '张三', age: 20, city: '北京' }; + for (const property in object) { + console.log(`${property}: ${object[property]}`); + } +``` + +9. +```bash + let arr = [-5, 1, 4, 50, 60]; + for (const num of arr) { + if (num < 0) { + continue; + } + if (num > 50) { + document.write(num); + break; + } + } +``` + +10. +```bash + for(let i = 1 ;i<=9;i++){ + for(let j = 1;j<=9;j++){ + document.write(`${i}*${j}=${i*j}
      `); + } + } +``` + +11. +```bash + let age = 18; + let status1,status2; + + status1 = age >=18?'成年':'未成年'; + + if (age >= 18) { + status2 = '成年'; + } else { + status2 = '未成年'; + } + + console.log("三元运算符实现:"); + console.log(`let status1 = age >= 18 ? '成年' : '未成年'; 结果:${status1}`); + + console.log("\nif-else 实现:"); + console.log(`if (age >= 18) { status2 = '成年'; } else { status2 = '未成年'; } 结果:${status2}`); +``` + +12. +```bash + let num = Math.floor(Math.random() * 100) + 1; + while (true) { + let guess = prompt('请输入你猜测的数字(1-100):'); + if(guess ===null){ + alert('游戏已取消'); + continue; + } + if (guess < 1 || guess > 100) { + alert('请输入区域内的数字!'); + } else { + if (guess > num) { + alert('太大啦!'); + } + if (guess == num) { + alert('恭喜你猜对啦!'); + break; + } + if (guess < num) { + alert('太小啦!'); + } + } + } +``` \ No newline at end of file diff --git "a/\346\235\216\346\231\250\346\273\224/20251224-200\347\273\203\344\271\240.md" "b/\346\235\216\346\231\250\346\273\224/20251224-200\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..86ff9f5b23a065341b2b1ab328f6fef419c11d37 --- /dev/null +++ "b/\346\235\216\346\231\250\346\273\224/20251224-200\347\273\203\344\271\240.md" @@ -0,0 +1,41 @@ +4. +```bash + let arr = [1,2,4,4,3,3,1,5,3]; + function find(arr){ + const countMap = new Map(); + const duplicates = []; + + for (const item of arr){ + countMap.set(item,(countMap.get(item)||0)+1); + } + + for(const [key,value] of countMap){ + if(value>=2){ + duplicates.push(key); + } + } + return duplicates; + } + console.log(find(arr)); +``` + +5. +```bash + let arr = [1,2,3,4,2,5] + let item = 2; + function remove(arr,item){ + return arr.filter(element => element !==item); + } + console.log(remove(arr,item)); +``` + +6. +```bash + let arr = [{ name: "小明", score: 85 }, { name: "小红", score: 55 }, { name: "小刚", score: 90 }]; + function getPassed(arr) { + return arr + .filter(arr => arr.score >= 60) + .map(arr => arr.name); + } + console.log(getPassed(arr)); +``` \ No newline at end of file diff --git "a/\346\235\216\346\231\250\346\273\224/20251225-200\347\273\203\344\271\240.md" "b/\346\235\216\346\231\250\346\273\224/20251225-200\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..b9f3d2606c1a63aaf7f94cdbf108fef955da667c --- /dev/null +++ "b/\346\235\216\346\231\250\346\273\224/20251225-200\347\273\203\344\271\240.md" @@ -0,0 +1,111 @@ +14. +```bash + let arr = [1, 2, 3, 4, 5]; + function allNum(arr) { + return arr.every(num => num > 0); + } + console.log(allNum(arr)); +``` + +15. +```bash + let arr = [40, 100, 1, 5, 25, 10]; + function allNum(arr) { + return arr.sort((a, b) => a - b); + } + console.log(allNum(arr)); +``` + +16. +```bash + let arr = [{ name: "小明", age: 20 }, { name: "小红", age: 18 }, { name: "小刚", age: 22 }]; + function allNum(arr) { + return [...arr].sort((a, b) => a.age - b.age); + } + console.log(allNum(arr)); +``` + +17. +```bash + let arr = ['apple', 'banana', 'orange']; + function printArr(arr) { + let output = ''; + arr.forEach((item, index) => { + output += `索引${index}: ${item} `; + }); + console.log(output.trim()); + } + printArr(arr); +``` + +18. +```bash + let arr = [[1, 2], [3, 4], [5, 6]]; + function flattening(arr) { + return arr.reduce((acc, curr) => acc.concat(curr), []); + } + console.log(flattening(arr)); +``` + +19. +```bash + let arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']; + function appear(arr) { + return arr.reduce((acc, curr) => { + acc[curr] = (acc[curr] ?? 0) + 1; + return acc; + }, {}); + } + console.log(appear(arr)); +``` +20. +```bash + let arr = [{ name: "鼠标", price: 29 }, { name: "键盘", price: 89 }, { name: "显示器", price: 899 }, { name: "耳机", price: 199 }]; + function name(arr) { + return arr + .filter(arr => arr.price > 50) + .sort((a, b) => a.price - b.price); + } + console.log(name(arr)); +``` +21. +```bash + let arr = [2, 5, 8, 3, 9]; + function name(arr) { + return arr + .map(num => num * 2) + .filter(num => num > 10); + } + console.log(name(arr)); +``` +22. +```bash + let arr = [1, 2, 2, 3, 4, 4, 5, 1]; + function deduplication(arr) { + return arr.reduce((acc, curr) => { + !acc.includes(curr) && acc.push(curr); + return acc; + }, []); + } + console.log(deduplication(arr)); +``` +23. +```bash + let arr = [{ name: "小明", score: 85 }, { name: "小红", score: 92 }, { name: "小刚", score: 78 }, { name: "小丽", score: 88 }]; + function averageScore(arr) { + if (arr.length === 0) return 0; + const totalScore = arr.reduce((acc, curr) => acc + curr.score, 0); + return totalScore / arr.length + } + console.log(averageScore(arr)); +``` +24. +```bash + let arr = [{ name: "张三", age: 17 }, { name: "李四", age: 20 }, { name: "王五", age: 25 }, { name: "赵六", age: 16 }]; + function adults() { + return arr + .filter(arr => arr.age > 18) + .map(item => `${item.name}(${item.age}岁)`); + } + console.log(adults(arr)); +``` \ No newline at end of file diff --git "a/\346\235\216\346\231\250\346\273\224/20251226-200\347\273\203\344\271\240.md" "b/\346\235\216\346\231\250\346\273\224/20251226-200\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..aaeed9e4500acf7e32ce6d40858e526b16244f8e --- /dev/null +++ "b/\346\235\216\346\231\250\346\273\224/20251226-200\347\273\203\344\271\240.md" @@ -0,0 +1,26 @@ +11. +```bash + let arr = [2, 5, 8, 12, 15, 7]; + function firstMaxNum(arr) { + return arr.find(num => num > 10); + } + console.log(firstMaxNum(arr)); +``` + +12. +```bash + let arr = [1, 5, 3, -2, 8, -5]; + function firstNegativeNum(arr) { + return arr.findIndex(num => num < 0); + } + console.log(firstNegativeNum(arr)); +``` + +13. +```bash + let arr = [1, 3, 5, 7, 8]; + function evenNum(arr) { + return arr.some(num => num % 2 == 0); + } + console.log(evenNum(arr)); +``` \ No newline at end of file diff --git "a/\346\235\216\346\231\250\346\273\224/24\347\272\247\345\205\250\346\240\210\345\274\200\345\217\221\346\226\271\345\220\221js\347\273\203\344\271\240\351\233\206.md" "b/\346\235\216\346\231\250\346\273\224/24\347\272\247\345\205\250\346\240\210\345\274\200\345\217\221\346\226\271\345\220\221js\347\273\203\344\271\240\351\233\206.md" index 60721ee29703e713142c3792a313cfa89f382bb1..79f49569d46ddd881b1cc7fa310e804e3d11ca5d 100644 --- "a/\346\235\216\346\231\250\346\273\224/24\347\272\247\345\205\250\346\240\210\345\274\200\345\217\221\346\226\271\345\220\221js\347\273\203\344\271\240\351\233\206.md" +++ "b/\346\235\216\346\231\250\346\273\224/24\347\272\247\345\205\250\346\240\210\345\274\200\345\217\221\346\226\271\345\220\221js\347\273\203\344\271\240\351\233\206.md" @@ -452,20 +452,19 @@ 9. ```bash let arr = [10, 20, 30, 40, 50]; - function sum(arr) { - // 累加器(acc)和当前元素(curr)参数,设置初始值0 - return arr.reduce((acc, curr) => acc + curr, 0); + function sum2(arr) { + return arr.reduce((a, b) => a + b, 0); } - console.log(sum(arr)); + console.log(sum2(arr)); // 输出 150 ``` 10. ```bash let arr = [3, 7, 2, 9, 1, 5]; - function maxNum(arr) { - return arr.reduce((prev, curr) => Math.max(prev, curr), arr[0]); + function findMax(arr) { + return arr.reduce((a, b) => a > b ? a : b, arr[0]); } - console.log(maxNum(arr)); + console.log(findMax(arr)); ``` 11. @@ -525,21 +524,19 @@ 17. ```bash let arr = ['apple', 'banana', 'orange']; - function printArr(arr) { - let output = ''; - arr.forEach((item, index) => { - output += `索引${index}: ${item} `; - }); - console.log(output.trim()); + function printArrWithIndex(arr) { + arr.forEach((item, index) => { + console.log(`索引${index}: ${item}`); + }); } - printArr(arr); + printArrWithIndex(arr); ``` 18. ```bash let arr = [[1, 2], [3, 4], [5, 6]]; function flattening(arr) { - return arr.reduce((acc, curr) => acc.concat(curr), []); + return arr.reduce((a, b) => a.concat(b), []); } console.log(flattening(arr)); ``` diff --git "a/\346\235\216\347\216\253\345\246\244/20251110-js\345\211\215\350\250\200.md" "b/\346\235\216\347\216\253\345\246\244/20251110-js\345\211\215\350\250\200.md" deleted file mode 100644 index fb2a1e4f24af707d31a5be6c758a1aa3c720c70f..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251110-js\345\211\215\350\250\200.md" +++ /dev/null @@ -1,43 +0,0 @@ -##笔记 - -### web前端核心技术 -1.HTML -2.css -3.JavaScript - -### web前端框架 -1. react facebook -2. vue 尤雨溪 vue3 -3. angluar2 谷歌 - -### 全栈 -1. 前端 -- vue3 -- react - -2. 后端 -- c# -- java -- python -- c/c++ -- 汇编语言 -- 二进制 -- nodejs -- go -- php - -## 作业 -1. 在WebStom工具中直接嵌入JavaScript代码,在页面中输出老子的名言“千里之行,始于足下” -```html - -``` - -2. 在HTML文件中调用外部JavaScript文件,在页面中显示 对话框,对话框中输入明日学院的官网地址http://www.mingrisoft.com -```html - -``` -```ja -alert("http://www.mingrisoft.com"); -``` \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251112-js\345\237\272\347\241\200.md" "b/\346\235\216\347\216\253\345\246\244/20251112-js\345\237\272\347\241\200.md" deleted file mode 100644 index 14752b09bfcc34dc2ae56ca4805360d35e8d51e0..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251112-js\345\237\272\347\241\200.md" +++ /dev/null @@ -1,116 +0,0 @@ -## 笔记 - -### 数据类型 -1. 数值型 -- 十进制 -- 十六进制 -- 八进制 -- 浮点型数据 -- 特殊值infinity -- 特殊值NaN - -2. 变量声明 -- let:块级作用域,可重新赋值(推荐)。 -- const:块级作用域,不可重新赋值(声明常量)。 -- var:函数级作用域(尽量避免,存在变量提升问题)。 - -3. 数据类型 -- 基本类型:number(数字)、string(字符串)、boolean(布尔)、null(空)、undefined(未定义)、symbol(唯一标识)、bigint(大整数)。 -- 引用类型:object(对象)、array(数组)、function(函数)等。 -- 类型判断:typeof(基本类型)、instanceof(引用类型)、Object.prototype.toString.call()(通用)。 - -4. 运算符 -- 算术运算符:+、-、*、/、%、++、--。 -- 比较运算符:==(松散相等,自动转换类型)、===(严格相等,类型 + 值均相等,推荐)。 -- 逻辑运算符:&&(与)、||(或)、!(非)。 -- 条件运算符:condition ? expr1 : expr2(三目运算符)。 - - -### 作业 -1. -``` -let height = "珠穆朗玛峰的高度为8848.86米" -document.write(height) -``` -2. -``` - document.write("E:\\JavaScipt\\Code\\demo"); -``` - -3. -``` -let area = "17100000"; -``` - -4. -```html -

      个人信息

      - -``` - -5. -```html - - -``` - -6. -```html - -``` - -7. -```html - -``` - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/\346\235\216\347\216\253\345\246\244/20251113-js\345\237\272\347\241\2002.md" "b/\346\235\216\347\216\253\345\246\244/20251113-js\345\237\272\347\241\2002.md" deleted file mode 100644 index b5db4e791c174328cfdd60f2ebe2633abc1c0387..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251113-js\345\237\272\347\241\2002.md" +++ /dev/null @@ -1,129 +0,0 @@ -## 笔记 -1. 逻辑运算符: -- &&逻辑与:都真为真 -- ||逻辑或:一真则真 -- !取反(!a<5,当为真结果是假,假取真) - -2. 条件运算符: -表达式?结果1:结果2(真左假右) - -3. 逗号运算符:多个表达式排一起,整个表达式值为最后一个表达式的值 - -4.typeof运算符:返回数据类型 -## 作业 -1. -```html - -``` - -2. -``` - let score = 65; - let result = score>60 ? "及格":"不及格" - document.write("周星星英语成绩:"+ result); -``` - -3. -``` - let tops = 30; - let dot = 50; - let height = 30; - let areas = (tops+dot)*height/2; - document.write("梯形稻田的面积:"+areas); -``` - -4. -``` - let bmi = 23; - if(bmi<20){ - document.write("BMI:"+bmi+"
      结果:体重过轻") - } - if(bmi>20 && bmi < 25){ - document.write("BMI:"+bmi+"
      结果:体重适中") - } - if(bmi>25 && bmi <30){ - document.write("BMI:"+bmi+"
      结果:体重过重") - } - if(bmi>30 && bmi < 35){ - document.write("BMI:"+bmi+"
      结果:体重肥胖") - } -``` - -5. -``` -
      - 请选择您的出生年月: - - -
      - -``` - -6. -```html -
      - - -``` - -7. -``` -for(let i =1; i <= 3; i++){ - for(let j =1; j <= 10; j++){ - if(i == 3 && j == 5){ - continue; - } - if(i == 3 && j == 6){ - continue; - } - document.write(i+"排"+j+"座"); - } - } -``` \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251114-\344\275\234\344\270\232.md" "b/\346\235\216\347\216\253\345\246\244/20251114-\344\275\234\344\270\232.md" deleted file mode 100644 index f1737a2a4ea7a330e14efa77062f135529ad9a62..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251114-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,142 +0,0 @@ -## 作业 - -1. -``` -let a = 26; - let b = 17; - let c = 10; - let d = 20; - let res = a; - if (res > b) { - res = b; - } - if (res > c) { - res = c; - } - if (res > d) { - res = d - } - document.write("最小值:" + res); -``` - -2. -``` -let kq = 56; - if (kq <= 100) { - document.write("空气良好") - } - if (kq > 101 && kq <= 200) { - document.write("空气轻度污染") - } - if (kq > 201 && kq <= 300) { - document.write("空气中度污染") - } - if (kq > 300) { - document.write("空气重度污染") - } - -``` - -3. -``` -let moth = 11; - let season; - switch (moth) { - case 12: - case 1: - case 2: - season = "冬季"; - break; - case 3: - case 4: - case 5: - season = "春季"; - break; - case 6: - case 7: - case 8: - season = "夏季"; - break; - case 9: - case 10: - case 11: - season = "秋季"; - break - } - document.write("当前" + moth + "月份是" + season); -``` - -4. -``` -let workYear = 1; - let baseSalary = 3000; - let yearlyIncrease = 50; - let totalYear = 5; - - do { - let actualSalary = baseSalary + (workYear - 1) * yearlyIncrease; - document.write("第" + workYear + "年的实际工资为:" + actualSalary + "元
      "); - workYear++; - } while (workYear <= totalYear); -``` - -5. -``` - document.write("
      ") - - let totalHeads = 35; - let totalLegs = 94; - - let chickenCount = 0; - let rabbitCount = 0; - let found = 0; - - for (let chicken = 0; chicken < totalHeads; chicken++) { - let rabbit = totalHeads - chicken; - let legs = chicken * 2 + rabbit * 4; - - if (legs === totalLegs) { - chickenCount = chicken; - rabbitCount = rabbit; - found = true; - break; - } - } - - if (found) { - document.write("鸡的数量:" + chickenCount); - document.write("
      兔的数量:" + rabbitCount); - } -``` - -6. -``` -let total = 0; - for (let num = 1; num <= 1000; num++) { - if (num % 65 !== 0) { - continue; - } - total += num; - } - document.write("1~1000所有65的倍数的数字之和:" + total); -``` - -7. -``` - const seats = [ - [false, false, true], // 第1排:第3个卡位被使用(索引2) - [false, false, false], // 第2排:全部未使用 - [false, true, false] // 第3排:第2个卡位被使用(索引1) - ]; - - console.log("尚未使用的卡位:"); - for (let row = 0; row < 3; row++) { - for (let col = 0; col < 3; col++) { - if (!seats[row][col]) { - document.write(`第${row + 1}排第${col + 1}个`); - } - } - } -``` - - diff --git "a/\346\235\216\347\216\253\345\246\244/20251117-\345\207\275\346\225\260.md" "b/\346\235\216\347\216\253\345\246\244/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index 3359c77c1f118115a588d986f733d6cedd852da7..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,40 +0,0 @@ -## 笔记 - -### 判断 -- if -- if()...else... -- if...else if()... -- if...else if()...else -- switch...case - -### 循环 -- for(let i=0;i<10;i++) -- while -- do...while - -### 循环控制 -- continue -- break - -### 函数 -#### 定义和调用 -- 定义可指定形参 -- 调用的时候可任意指定形参,也可不指定 - - -## 作业 -1. -``` - function address(province,city,zone,detailed){ - document.write(`地址:${province}省 ${city}市 ${zone}区 ${detailed}`); - } - address("广西","桂林","清秀","山里") -``` - -2. -``` -function absolute(a){ - document.write(`-30的绝对值是:${Math.abs(a)}`); - } - absolute(-30); -``` \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251119-\345\206\205\347\275\256\345\207\275\346\225\260.md" "b/\346\235\216\347\216\253\345\246\244/20251119-\345\206\205\347\275\256\345\207\275\346\225\260.md" deleted file mode 100644 index 79583a672a904dab8e62ab20ecef27e6b7950836..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251119-\345\206\205\347\275\256\345\207\275\346\225\260.md" +++ /dev/null @@ -1,198 +0,0 @@ -## 笔记 -### 内置函数 -|函数|描述| -|---|---| -|parseInt()|将字符型转换为整型| -|parseFloat()|将字符型转换为浮点型| -|isNaN()|判断一个数值是否为NaN -|isFinite()|判读一个数值是否有限| -|eval()|求字符串中表达式的值| -|encodeURI()|将URI字符串进行编码| -|decodeURI()|将已编码的URI字符串进行解码| - -### 对象 -1. 访问属性 -``` -//创建goods对象 -var goods= { - name= "呵呵" -} -//输出name属性 -document.write(goods.name) -``` - -2. 添加属性 -goods.age= "16" - -3. 删除属性 -delete goods.age.number - - -## 作业 - -1. -```js - function fib(n, i = 1, a = 1, b = 1) { - // 终止条件:超出项数则停止 - if (i > n) return; - // 输出当前项(空格分隔) - console.log(i === n ? a : a + ' ', end = ''); - // 递归调用:更新参数计算下一项 - fib(n, i + 1, b, a + b); - } - fib(5); -``` - -2. -```js -function number(a,b){ - if(a>b){ - console.log("a>b") - } - if(aa") - } - } - number(2,5) - - function number(a,b,c){ - let n = a; - if(n>b){ - n = b; - } - if(n>c){ - n = c; - } - console.log("最小值:"+n); - } - number(20,35,10); -``` - -3. -```js - function yes(a, b,c){ - let total = a+b+c; - if(total > 500){ - total = total*0.9; - console.log(`享受优惠后的价格为${total}`) - }else{ - console.log(`不享受优惠后的价格为${total}`) - } - } - yes(199,156,165); - -``` - -4. -```js - function score(chinese,inglish,lizong){ - let text = chinese+inglish+lizong; - if(text > 550){ - console.log('该考生成绩达到本科线'); - }else{ - console.log('该考生成绩未达到本科线'); - } - } - score(108,115,126,237) -``` - -5. -```js - function login(name,password){ - if(name === "mr" && password === "mrsoft"){ - console.log("登录成功"); - }else{ - console.log("登录不成功,请重新登录"); - } - } - login("mr","mrsoft"); - - let num =0; - function number(){ - for(let i =1;i<1000;i++){ - if(i % 5=== 0 && i%3===0){ - document.write(i+' '); - num++; - if(num % 7 ===0){ - document.write('
      '); - } - } - } - } - number(); -``` - -6. -```js - function mage(age){ - if(age >0 && age <=6){ - console.log(`${age}岁正处于童年时期`); - } - if(age >7 && age <=17){ - console.log(`${age}岁正处于少年时期`); - } - if(age >18 && age <=40){ - console.log(`${age}岁正处于青年时期`); - } - if(age >41 && age <=65){ - console.log(`${age}岁正处于中年时期`); - } - if(age >66){ - console.log(`${age}岁正处于老年时期`); - } - } - mage(20); -``` - -7. -```js - function day(year,moth){ - switch(moth){ - case 1: - case 3: - document.write(`${year}年${moth}月有30天`) - break; - case 4: - case 6: - document.write(`${year}年${moth}月有31天`) - break; - - } - } - day(2024,6); -``` - -8. -```js - - - - -
      - - - - -``` - - diff --git "a/\346\235\216\347\216\253\345\246\244/20251120-\345\257\271\350\261\241.md" "b/\346\235\216\347\216\253\345\246\244/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index 779069135464473f770b088cb162cdae5465ea0d..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,102 +0,0 @@ -## 笔记 - -### 对象 -- 就是一个使用大括号包裹内容的一个容器 -- CRUD create创建 select查询 update修改/更新 delete删除 - -### 内置对象 -- window是js中唯一的全局变量 -- Math -- Date -- Event - -## 作业 -1. -``` -let day1 = new Date(2023, 4, 1); - let day2 = new Date(2023, 5, 1); - let time = day2.getTime() - day1.getTime(); - let houer = time / (1000 * 60 * 60); - console.log(houer); -``` - -2. -``` - let date = new Date(2023, 5, 7); - let date1 = new Date() - let day = Math.ceil((date - date1) / (1000 * 60 * 60) / 24); - console.log(day + "天"); -``` - -3. -``` -// 监听页面点击事件 - document.addEventListener('mousedown', function (event) { - let buttonText; - // 根据button属性判断按键 - switch (event.button) { - case 0: - buttonText = "左键"; - break; - case 1: - buttonText = "中键(滚轮)"; - break; - case 2: - buttonText = "右键"; - break; - default: - buttonText = "未知按键"; - } - // 弹出提示 - alert(`您单击了鼠标${buttonText}`); - }); - - // 阻止右键默认菜单(避免干扰) - document.addEventListener('contextmenu', function (e) { - e.preventDefault(); - }); -``` - -4. -``` -

      请输入要生成的随机数位数:

      - - - - -``` - -5. -``` -

      周星星从出生到现在已度过了

      - -``` - diff --git "a/\346\235\216\347\216\253\345\246\244/20251121-event\345\257\271\350\261\241\357\274\214\346\225\260\347\273\204.md" "b/\346\235\216\347\216\253\345\246\244/20251121-event\345\257\271\350\261\241\357\274\214\346\225\260\347\273\204.md" deleted file mode 100644 index 82f6aed2ecfd248ff7d032c9f0d85090537dcfef..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251121-event\345\257\271\350\261\241\357\274\214\346\225\260\347\273\204.md" +++ /dev/null @@ -1,33 +0,0 @@ -## 笔记 -### event对象 -|类别|属性名|描述| -|---|---|---| -|事件标识|type|事件类型(字符串),如 click、keydown、mouseover| -|目标元素|target|实际触发事件的最具体元素(事件流底层)| -| |currentTarget|当前处理事件的元素(事件监听器绑定的元素),非箭头函数中 this 指向它| -|事件特性|bubbles|布尔值,事件是否可冒泡| -||cancelable|布尔值,事件是否可阻止默认行为|鼠标坐标|clientX/clientY|浏览器可视区内坐标(不含滚动、边框)| -| |pageX/pageY|整个文档内坐标(含滚动部分)| -|键盘相关|key|按下键的字符串表示(如 a、Enter)| -| |code|按下物理键的代码(如 KeyA、ShiftLeft)| -|修饰键|ctrlKey/shiftKey|事件触发时对应修饰键是否按下(布尔值)| -| |altKey/metaKey|(metaKey 对应 Windows 徽标键 / Mac Command 键)| - -### 数组对象的方法及其说明 -|方法|说明| -|---|---| -|concat|连接两个或更多的数组,并返回结果| -|pop()|删除并返回数组中的最后一个元素| -|push()|向数组的尾部添加一个或多个元素,并返回新的长度| -|shift()|删除并返回数组中的第一个新元素| -|splice()|删除元素,并向数组中添加新元素| -|unshift()|向数组的头部添加一个或多添加一个或多个元素,并返回新的元素| -|reverse()|颠倒数组中元素的顺序| -|sort()|对数组中的元素进行排序| -|slice()|从某个已有的数组中返回选定的元素| -|toSource()|代表对象源代码| -|toString()|把数组转换为字符串,并返回结果| -|toLocaleString()|把数组转换为本地字符串,并返回结果| -|join()|把数组中的所有元素放入一个字符串,元素间通过指定的分隔符进行分隔| -|value()|返回数组对象的原始值| - diff --git "a/\346\235\216\347\216\253\345\246\244/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210+string\345\257\271\350\261\241.md" "b/\346\235\216\347\216\253\345\246\244/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210+string\345\257\271\350\261\241.md" deleted file mode 100644 index 49ae3f5513c456f00a590c376706a11ec11ae4f7..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210+string\345\257\271\350\261\241.md" +++ /dev/null @@ -1,206 +0,0 @@ -## 笔记 -concat():连接两个或更多的数组,并返回结果 - -pop():删除并返回数组中的最后一个元素 - -push():向数组的尾部添加一个或多个元素,并返回新的长度 - -shift():删除并返回数组中的第一个 - -### Sring对象 -```js - let str = new String(); -``` -1. length属性 - - 获取字符串的长度 -2. constructor属性 - - 引用当前对象的构造函数 -3. prototype属性 - - 可以为字符串对象添加自定义的属性或方法 - -#### 查找字符串 -1. charAt()方法 - - 返回字符串中指定位置的字符 -2. indexOf()方法 - - 返回某个字符串出现的位置 - -#### 截取字符串 -1. slice()方法 - - 截取字符串的片段 -2. substr()方法 - - 可以从字符串指定位置开始提取指定长度的字符串 -3. substring()方法 - - 提取字符串中两个指定位置索引号指定位置的字符 - -#### 字符串大小转换 -1. toLowerCase()方法 - - 把字符串转换成小写 -2. toUpperCase()方法 - - 把字符串转换成小写 - -## 作业 -### 第六章 -1. -```js - // 星期数组 - const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; - // 获取当前日期和星期 - const now = new Date(); - const today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${week[now.getDay()]}`; - - // 输出结果 - console.log(today); // 例如:2024-5-20 星期一 -``` - -2. -```js - let number = [5, 7, 6, 3, 9, 2]; - let max = Math.max.apply(null, number); - document.write(max); -``` - -3. -```js - let arr = [1,2,3,4,5,6]; - let x= arr.slice(1,5); - document.write(x); -``` - -综合1. -```js - let arr1 = ['长春','昌图西','铁岭西','沈阳北','绥中北','北京']; - let x = arr1.join(' '); - document.write(`途径站: ${x}`); - let y = arr1.reverse(); - let a = y.join(' '); - document.write(`
      反向站: ${a}`); -``` - -综合2 -```js - - - - - - 2022年国内手机销量排行 - - - - - - - - - - - - - - -
      排名手机品牌市场份额
      - - - - -``` - -### 第七章 -1. -```js - let book = "《雪山飞狐》,《连城诀》,《天龙八部》,《射雕英雄传》,《鹿鼎记》,《笑傲江湖》,《书剑恩仇录》,《神雕侠侣》,《倚天屠龙》,《碧血剑》"; - - let fourBook = book.match(/《[\u4e00-\u9fa5]{4}》/g); - document.write(fourBook); -``` - -2. -```js - let phoneNubmber = [ - "1330431****","1567766****","1304316****","1523567****", - "1580433****","139****0431" - ]; - - let phone0431 = phoneNubmber.filter(phone => phone.includes("0431")); - document.write(phone0431); -``` - -3. -```js -let email = "4006****66@qq.com"; - let x = email.indexOf("@"); - let qq = email.substr(0,x); - document.write(qq); -``` - -综合1. -```js - let email = "abc@sian.com"; - // 简单判断:有@、有.、且.在@后面 - let hasAt = email.indexOf('@') !== -1; - let hasDot = email.indexOf('.') !== -1; - let dotAfterAt = email.indexOf('.') > email.indexOf('@'); - - // 输出结果 - if (hasAt && hasDot && dotAfterAt) { - alert(`${email} 是有效邮箱`); - } else { - alert(`${email} 是无效邮箱`); - } -``` - -综合2. -```js - let numberChar = '0123456789ABCDEFG'.split(''); - let randomStr = ''; - - for(let i = 0; i < 6; i++){ - let randomIndex = Math.floor(Math.random() * numberChar.length); - randomStr += numberChar[randomIndex]; - } - document.write(randomStr); -``` - -综合3. -```js - function formatNumber(num) { - return num.toString() - .split('').reverse().join('') - .replace(/(\d{3})/g, '$1,') - .split('').reverse().join(''); - } - - // 测试 - console.log(formatNumber(1362599)); - console.log(formatNumber(1234)); - console.log(formatNumber(987654321)); -``` \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\346\235\216\347\216\253\345\246\244/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index a7a8269615729ba7bdae9213f70065d9cfe7cda0..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,53 +0,0 @@ -## 正则表达式 - 正则表达式描述了一种字符串的匹配模式,即通过使用一系列普通字符串和特殊字符串来构建能够明确描述文本字符串的匹配模式,可以用来检查一个字符串是否含有某个字符串、将匹配的字符串替换或者从某个字符串中去除某个符合条件的字符串等。 - -1. exec():在字符串中执行查找匹配,返回一个数组或null。 -2. test():测试字符串是否匹配正则表达式,返回true或false。 -3. match():在字符串中执行查找匹配,返回一个数组或null。 -4. search():测试字符串中的匹配,返回匹配的位置索引或-1。 -5. replace():在字符串中执行查找匹配,并使用替换字符串替换匹配到的子字符串。 -6. split():使用正则表达式或固定字符串分隔字符串,并将结果存储在数组中。 - -#### 基本匹配符:‌ - -- . - 匹配除换行符外的任意单个字符 -- \d - 匹配数字字符,等价于[0-9] -- \D - 匹配非数字字符,等价于[^0-9] -- \w - 匹配单词字符(字母、数字、下划线) -- \W - 匹配非单词字符 -- \s - 匹配空白字符(空格、制表符、换行符等) -- \S - 匹配非空白字符 - -#### ‌字符类:‌ - -- [abc] - 匹配方括号内的任意一个字符 -- [^abc] - 匹配不在方括号内的任意字符 -- [a-z] - 匹配指定范围内的字符 -‌ -#### 量词:‌ - -- *匹配前一个元素零次或多次 -- +匹配前一个元素一次或多次 -- ? 匹配前一个元素零次或一次 -- {n} 匹配前一个元素恰好n次 -- {n,} 匹配前一个元素至少n次 -- {n,m} 匹配前一个元素n到m次 -‌ -#### 边界匹配:‌ - -- ^ - 匹配字符串的开始 -- $ - 匹配字符串的结束 -- \b - 匹配单词边界 -- \B - 匹配非单词边界 - -#### ‌分组和引用:‌ - -- (pattern) - 捕获分组 -- (?:pattern) - 非捕获分组 -- | - 或操作符 - -##### 修饰符:‌ - -- g - 全局匹配 -- i - 忽略大小写 -- m - 多行模式 \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\346\235\216\347\216\253\345\246\244/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index c483d22859fffbd4426e88d0cd26d5887e65fead..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,144 +0,0 @@ -## 笔记 -## 1. try-catch-finally -捕获并处理异常,保证代码执行连续性: -```js -try { - // 可能抛出异常的代码 - riskyOperation(); -} catch (error) { - // 异常处理逻辑 - console.error('错误信息:', error.message); -} finally { - // 无论是否异常,始终执行(如释放资源) - console.log('最终执行'); -} -``` -- `try`:包裹可疑代码,触发异常后立即跳转到`catch` -- `catch`:接收异常对象(包含`message`/`stack`等属性),处理错误 -- `finally`:可选,**必须执行**(即使`try`/`catch`中有`return`) - - -### 2. throw 主动抛异常 -手动触发自定义异常: -```js -function checkAge(age) { - if (age < 0) { - // 抛出内置Error或自定义信息 - throw new Error('年龄不能为负数'); - // 也可抛其他类型:throw '非法年龄'; - } -} -``` - -## 作业 -### 训练1. -```js - try { - let str = "我喜欢JavaScript"; - let result = str.subStr(2); - } catch (error) { - alert("对象不支持此方法"); - } -``` - -### 训练2. -```js -try{ - let str = "我喜欢JavaScript"; - let result = str.subStr(2); - }catch(error){ - alert(`错误类型:${error.name}\n错误信息:${error.message}`); - } -``` - -### 综合1. -```js - - 输入1~5的数字
      - -
      - - - - -``` - -### 综合2. -```js - - - -
      - -
      - - - - -``` - -### 监听回车键事件 -```js - - 用户名:
      - 密码:
      - - -``` - diff --git "a/\346\235\216\347\216\253\345\246\244/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\346\235\216\347\216\253\345\246\244/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 4bffb49683f2187372c2bc4ff7acd26f5ed50c89..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,221 +0,0 @@ -## 笔记 -### 事件处理 -#### onload事件 -会在页面中或图像中加载完成后立即触发 -```js - -``` - -#### onresize事件 -改变浏览器页面大小触发 -```js - -``` - -### 表单事件 -```js -//获得焦点 - - -//失去焦点 - -``` - -```js -//表单提交事件 - - -//重置事件 - -``` - -## 作业 -### 训练1. -```js -body> - - - - - -``` - -### 训练2. -```js - -

      中国的“国球”是()。

      -
      - A.篮球 - B.排球 - C兵乓球 - D.羽毛球 -
      -

      - - - -``` - -### 训练3. -```js - - - -``` - -### 训练4. -```js - - - -``` - -### 训练5. -```js - - - -
      - - -
      - - - -``` - -### 训练6. -```js -body> - -

      请选择你的出生年月

      - - - -

      你的出生日期是:

      - - - - -``` - -### 训练7. -```js - -

      用户登录

      -
      - 用户名:

      - 密码:

      - - -
      - - -``` \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251203-Document\345\257\271\350\261\241.md" "b/\346\235\216\347\216\253\345\246\244/20251203-Document\345\257\271\350\261\241.md" deleted file mode 100644 index 3de719dd597531aa22f456dcb36da5c25c930a2d..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251203-Document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,232 +0,0 @@ -## 笔记 -### 常用属性 - -|属性|方法| -|---|---| -|body|提供对元素的直接访问| -cookie|获取或设置与当前文档有关的所有cookie -domain|获取当前文档的域名 -lastModified|获取文档最后修改的日期和时间 -referrer|获取载入当前文档的URL -title|获取或设置当前文档的标题 -URL|获取当前文档的URL - -### 常用方法 -|方法|说明| -|---|---| -close|关闭当前用Document.open()方法打开的输入流 -getElementById()|返回指定id对象 -getElementByName()|返回带有指定名称的对象集合 -getElementByTagName()|返回带有指定标签名的对象集合 -open()|打开一个文档输入流并接收write()和writeln()方法创建页面内容 -write()|向文档写入HTML或js语句 -writeln()|向文档写入HTML或js语句,并以换行符写入 -createElement|创建一个HTML标记 - - -### 设置文档背景色和前景色 -style.backgroundColer - -style.color - -### 设置延迟时间 -setTiemout("title",1000) - - -### 获取当前文档状态 -状态值|说明 -uninitialized|还未开始载入 -loading|文档正在加载 -interactive|已加载,用户可以和文档进行交互 -complete|载入完成 - -## 作业 -### 训练1 -```js - - - - - -``` - -### 训练2 -```js - -``` - -### 训练3 -```js -
      - -
      - - -``` - -### 综合1 -```js - - - - - - - Document - - - - -
      -

      李白《行路难•其一》

      -

      金樽清酒斗十千,玉盘珍羞直万钱。

      -

      停杯投箸不能食,拔剑四顾心茫然。

      -

      欲渡黄河冰塞川,将登太行雪满山。

      -

      闲来垂钓碧溪上,忽复乘舟梦日边。

      -

      行路难,行路难,多歧路,今安在?

      -

      长风破浪会有时,直挂云帆济沧海。

      -
      - - - - - -``` - -### 综合2 -```js - - - - - - - Document - - - - - 打开图片对话框 - -
      -
      - - - -
      -
      - - - - - -``` - -### 综合3 -```js - - - - - - Document - - - -
      - - - - -``` \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251204-DOM\350\212\202\347\202\271\345\261\236\346\200\247.md" "b/\346\235\216\347\216\253\345\246\244/20251204-DOM\350\212\202\347\202\271\345\261\236\346\200\247.md" deleted file mode 100644 index a250689b7ba7f71f0adccddbe1b9c4a11163f80e..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251204-DOM\350\212\202\347\202\271\345\261\236\346\200\247.md" +++ /dev/null @@ -1,44 +0,0 @@ -## 笔记 -### DOM常用的节点属性及其说明 -|属性|说明|属性|说明| -|---|---|---|----| -|nodeName|节点的名称|firstChild|返回当前节点的第一个子节点| -|nodeValue|节点的值,通常只应用于本文节点|lastChild|返回当前节点的最后一个子节点| -|nodeType|节点的类型|previousSibling|返回当前节点的前一个兄弟节点| -|parentNode|返回当前节点的父节点|nextSibling|返回当前节点的后一个兄弟节点| -|childNodes|子节点列表|attributes|元素的属性列表| - -### 节点 -1. 创建节点appendChild() -```js -obj.appendChild(newChild) -``` - -2. 插入节点insertBrfore() -```js -obj.insertBefore(new.ref) -``` - -3. 复制节点cloneNode() -```js -obj.cloneNode(deep) -``` - -4. 删除节点removeChild() -```js -obj.removeChild(oldChild) -``` - -5. 替换节点replaceChild() -```js -obj.replaceChild(new,old) -``` - -### 获取文档中的指定元素 -1. getElementById() 根据id获取元素/节点 -2. getElementsByName() 根据name属性获取元素 -3. getElementsByTagName() 根据标签名称获取元素集合 -4. getElementsByClassName() 根据class的值获取元素集合 -5. querySelector() 根据选择器获取元素(只获取第一个匹配元素) -6. querySelectorAll() 根据选择器获取元素集合 - diff --git "a/\346\235\216\347\216\253\345\246\244/20251205-Window\345\257\271\350\261\241.md" "b/\346\235\216\347\216\253\345\246\244/20251205-Window\345\257\271\350\261\241.md" deleted file mode 100644 index f56790cc7ce1991e5e8f7a4cd49ab31e06f001de..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251205-Window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,480 +0,0 @@ -## 笔记 -1. innerHTML和innerTwxt属性 -2. outerHTML和outerText属性 - -### Window对话框 -1. alert():弹出一个警告对话框 -2. confirm():在确认对话框中显示指定的字符串 -3. prompt():弹出一个提示对话框 - -## 作业 -### 训练1 -```js - - - - - - Document - - -
      - - - -
      -
      - - - - -``` - -### 训练2 -```js - - - - - - Document - - -
      -
      - 窗外的麻雀 在电线杆上多嘴
      - 你说这一句 很有夏天的感觉
      - 手中的铅笔 在纸上来来回回
      - 我用几行字形容你是我的谁
      - 秋刀鱼的滋味 猫跟你都想了解
      - 初恋的香味就这样被我们寻回
      - 那温暖的阳光 像刚摘的鲜艳草莓
      - 你说你舍不得吃掉这一种感觉
      -
      - - -
      - - - - - -``` - -### 训练3 -```js - - - - - - Document - - - -
      -

      最新电影资讯

      -
        -
      • 1.《金蝉脱壳》两大动作巨星联手
      • -
      • 2.《阿甘正传》励志而传奇的一生
      • -
      • 3.《爱乐之城》爱情与梦想的交织
      • -
      • 4.《头号玩家》游戏梦想照进现实
      • -
      - - 输入影片资讯编号: - - - -
      - - - - -``` - -### 训练4 -```js - - - - - - Document - - -

      蔬菜列表

      -
        -
      • 青菜
      • -
      • 黄瓜
      • -
      • 西红柿
      • -
      • 草莓
      • -
      - -

      水果列表

      -
        -
      • 苹果
      • -
      • 香蕉
      • -
      • 橙子
      • -
      • 西兰花
      • -
      - - - - - - -``` - -### 训练5 -```js - - - - - - - Document - - - -

      - 在《倚天屠龙》中,张三丰是____派的掌门? -

      -
      - A 少林 - B 武当 - C 峨眉 - D 昆仑 - -
      -
      - - - - - - -``` - -### 综合1 -```js - - - - - - Document - - -
      -

      一生只爱一个人

      - 将粗体改为斜体 -
      - - - - -``` - -### 综合2 -```js - - - - - - - Document - - - - - - - - - - - -``` - -### 综合3 -```js - - - - - - 表情选择器 - - - - - - -
      - - - - -``` diff --git "a/\346\235\216\347\216\253\345\246\244/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\346\235\216\347\216\253\345\246\244/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index fcd86eab035ed19e53bbe6fe4ca428af837bcaaf..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,229 +0,0 @@ -## 笔记 -### 1.window -- 作用:控制浏览器窗口、全局弹窗、定时器 -- 必记语法: - - 弹窗:alert("提示")、confirm("确认?")(返回布尔-值)、prompt("输入:", "默认值")(返回输入内容) - - 定时器:setTimeout(函数, 毫秒)(延迟执行1次)、- setInterval(函数, 毫秒)(重复执行)、clearInterval(定时器ID)(停止) - - 窗口信息:innerWidth/innerHeight(可视区宽高) -### 2. document -- 作用:操作当前HTML页面(隶属于BOM的window) --必记语法: - - 获取信息:document.URL(当前URL)、document.title(页面标题,可修改) - - 操作元素:getElementById("id")(通过ID找元素)、document.body(获取body元素) - - 修改样式:document.body.style.backgroundColor = "black" -### 3. location -- 作用:控制URL、跳转、刷新 -- 必记语法: - - 跳转:location.href = "https://xxx.com"(设置URL) - - 刷新:location.reload()(true强制刷新) - - 获取信息:location.host(主机名)、location.search(URL参数?后面部分) -### 4. history -- 作用:浏览器前进/后退 -- 必记语法: - - 后退:history.back()(等价浏览器后退键) - - 前进:history.forward()(等价浏览器前进键) - - 跳转:history.go(数字)(正数前进、负数后退,如go(-1)=back()) -### 5. navigator -- 作用:获取浏览器/设备信息 -- 必记语法: - - 判断设备:/Mobile|Android|iOS/.test(navigator.userAgent)(是否移动设备) - - 基础信息:navigator.appName(浏览器名)、navigator.platform(操作系统) - -## 作业 -### 训练1 -```JS - - - -``` - -### 训练2 -```JS - 退出登录 - - -``` - -### 训练3 -```JS - - - - - 影片列表 - 打开详情页 - - - -
      - 影片1 - 影片2 - 影片3 -
      - - - - -``` - -### 训练4 -```js - - - -``` - -### 综合1 -```js - -``` - -### 综合2 -```js -
      - -``` - -### 综合3 -```js -
      - - - - - -
      - - -``` diff --git "a/\346\235\216\347\216\253\345\246\244/20251210-style\345\257\271\350\261\241.md" "b/\346\235\216\347\216\253\345\246\244/20251210-style\345\257\271\350\261\241.md" deleted file mode 100644 index 79909f41b9563204e3975cb0cc389dc39530a5e9..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251210-style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,104 +0,0 @@ -## 笔记 - -|CSS 原生属性| style 对象属性名| 用途| 取值示例| 注意事项| -|---|---|---|---|---| -|color| color| 文字颜色| "red"、"#333"、"rgb(255,0,0)"| 读取时浏览器自动转为 rgb 格式| -|background-color| backgroundColor 背景色| "skyblue"、"#f5f5f5"| 支持透明值 "transparent"| -|width| width| 宽度| "200px"、"50%"、"10rem"| 必须带单位,无单位无效| -|height| height| 高度| "150px"、"auto" "auto"| 为默认值(清除自定义高度)| -|font-size| fontSize| 字体大小| "16px"、"1.2em"| 单位必填| -|font-weight| fontWeight| 字体粗细| "bold"、"600"、"normal"| 数字无需引号| -|text-align| textAlign| 文本对齐| "center"、"left"、"right"| 关键字需字符串形式| -|margin| margin| 外边距(复合属性)| "10px"、"10px 20px"| 也可单独设置| marginLeft/Top 等| -|padding| padding| 内边距(复合属性)| "8px"、"5px 10px 15px"| 单独设置 paddingLeft/Top 等更灵活| -|border| border| 边框(复合属性)| "2px solid #000"| 单独设置 borderColor/Width/Style| -|border-radius| borderRadius| 圆角| "5px"、"50%"(圆形)| 支持单个角(borderTopLeftRadius)| -|display| display| 显示模式| "none"、"block"、"flex"、"inline"| 隐藏用 "none",显示用 "block" 等| -|visibility| visibility| 可见性| "hidden"、"visible"| 隐藏时保留占位| -|opacity| opacity| 透明度| 0(完全透明)~1(不透明)| 数字直接赋值(无需引号)| -|cursor| cursor| 鼠标指针| "pointer"、"default"、"crosshair"| 关键字需字符串| -|overflow| overflow| 溢出处理| "hidden"、"auto"、"scroll"| 单独设置 overflowX/overflowY| -|position| position| 定位方式| "relative"、"absolute"、"fixed"| 配合 top/left 等使用| -|top| top| 上偏移(定位元素)| "20px"、"-10px"| 需先设置 position 非 static| -|left| left| 左偏移(定位元素)| "30px"、"50%"| 同上| -|transform| transform| 变形(旋转 / 缩放等)| "rotate(30deg)"、"scale(1.2)"| 字符串形式,需带单位(deg)| -|box-shadow| boxShadow| 阴影| "0 0 10px #666"、"0 2px 8px rgba(0,0,0,0.3)"| 多阴影用逗号分隔| -|z-index| zIndex| 层级优先级| 1、10、999(数字)| 无需引号,定位元素有效| -|line-height| lineHeight| 行高| "24px"、"1.5"(倍数)| - -## 作业 -### 训练1 -```js -
      张鹏翔是翔
      - - - -``` - -### 训练2 -```js - - - -``` - -### 综合2 - - - diff --git "a/\346\235\216\347\216\253\345\246\244/20251211-Form\345\257\271\350\261\241.md" "b/\346\235\216\347\216\253\345\246\244/20251211-Form\345\257\271\350\261\241.md" deleted file mode 100644 index 1d7073ad070938f51c8213aea874fc16e8ff806e..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251211-Form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,250 +0,0 @@ -## 笔记 -### Form 对象核心属性 -|属性名|说明| 示例| -|----|---|---| -|elements| 返回表单内所有控件的HTMLCollection(按顺序 /name/id 访问)| form.elements.username(获取 name="username" 的输入框)| -|name| 表单的 name 属性值| form.name // "myFormName"| -|id|表单的 id 属性值| form.id // "myForm"| -|action| 表单提交的目标 URL(对应
      )| form.action = "/api/submit"(动态修改提交地址)| -|method| 提交方式(GET/POST 等)| form.method = "POST""" -|enctype| 表单数据编码类型(默认 application/x-www-form-urlencoded,文件上传用 multipart/form-data)| form.enctype = "multipart/form-data"| -|target| 提交后响应的展示目标(_self/_blank/_parent/_top)| form.target = "_blank"| -|autocomplete| 是否开启自动补全(on/off)| form.autocomplete = "off"| -|noValidate| 是否禁用浏览器默认验证(对应 novalidate 属性)| form.noValidate = true| - -### Form 对象核心事件 -|事件名| 触发时机| 常用操作| -|----|---|---| -|submit| 表单提交时(点击提交按钮 / 按回车)| 阻止默认提交、验证表单、异步提交数据| -|reset| 表单重置时(点击重置按钮 / 调用 reset ())| 阻止默认重置、提示用户确认| -|input| 表单控件值变化时(实时监听)| 实时验证、动态提示| -|change| 控件值变化且失去焦点时| 验证单个控件、更新数据| -|invalid| 控件验证失败时(checkValidity ()/ 提交)| 自定义验证提示、阻止默认提示| - -## 笔记 -### 训练1 -```js -

      万达影城自动取票

      - 兑换码: - -
      - - -``` - -### 训练2 -```js - - - - -``` - -### 训练3 -```js -

      请选择课程

      - C语音
      - 机械制图
      - 单片机
      - 自动控制
      - 传感器
      - 高等数学
      - 计算机基础
      - Oracle数据库
      - 商务英语
      - PLC设计基础
      - - - - -``` - -### 综合1 -```js -

      电影《变相怪杰》的主演是谁?

      - 布拉德▪皮特 - 亚当▪桑德勒 - 金▪凯瑞 - 杰夫▪丹尼尔斯 -
      - - - -``` - -### 综合2 -```js -看电影 - 听音乐 - 演奏乐器 - 打篮球 - 看书 - 上网 - -
      - - - - - -``` - -### 综合3 -```js -选择城市: - - - - -``` diff --git "a/\346\235\216\347\216\253\345\246\244/20251212-JSON.md" "b/\346\235\216\347\216\253\345\246\244/20251212-JSON.md" deleted file mode 100644 index 8d5c22ca8b917e730f65c4aa9431448e9c596f50..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251212-JSON.md" +++ /dev/null @@ -1,19 +0,0 @@ -## 笔记 - -### JSON.stringify() -- 作用:将 JS 对象 / 数组转为 JSON 字符串; -```javascript -// 转换为 JSON 字符串 -const obj = { name: "张三", age: 25 }; -const jsonStr = JSON.stringify(obj); -console.log(jsonStr); // '{"name":"张三","age":25}' -``` - -### JSON.parse() -- 作用:将 JSON 字符串解析为 JS 对象 / 数组; -```javascript -// 解析 JSON 字符串 -const jsonStr = '{"name": "张三", "age": 25}'; -const obj = JSON.parse(jsonStr); -console.log(obj.name); // "张三" -``` \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251215.md" "b/\346\235\216\347\216\253\345\246\244/20251215.md" deleted file mode 100644 index cdc1c3122412eee5cb061a0424f9bf133c2967d6..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251215.md" +++ /dev/null @@ -1,14 +0,0 @@ -```html - -``` \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251217-Jquery.md" "b/\346\235\216\347\216\253\345\246\244/20251217-Jquery.md" deleted file mode 100644 index c3e7330e4f90326a3db2e3ae6c034d6e99551801..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251217-Jquery.md" +++ /dev/null @@ -1,28 +0,0 @@ -## 笔记 -### JQuery - - 是一个js库,为了方便dom操作 - - 和js的引用一样,建议在body结束标签之前引用 - - 使用`$`来使用jQuery库的能力,`$`符号实际是一个方法,当然方法在js中也是一个对象,所以其也有一些属性可以使用 - - jquery获取到的是jQuery,和原生js拿到的dom对象不同,但它们间可以互相转换 - - let div=$('div')拿到jquery对象 - - div[0]拿到dom对象 - - $(div[0])又可以重新转换为jquery对象 -### jQuery选择器与操作 - - 基础选择器 - - 标签选择器 - - 类名选择器 - - id选择器 - - 关系选择器 - - 子代选择器` ` - - 直接子代选择器 > - - 兄弟选择器 ~ - - 相邻兄弟选择器 + - - 高级选择器 - - 属性选择器 - - 伪类选择器 - - 伪元素选择器 -### jQuery DOM操作 - - 新增append给拿到的元素增加一个下级元素 - - 移除remove移除拿到元素 - - text()拿到文本内容,text('要设置的内容')可以修改纯文本内容 - - html()拿到包含标签的内容,html('要设置的内容')可以修改包含标签的内容 diff --git "a/\346\235\216\347\216\253\345\246\244/20251218-jQuery\344\272\213\344\273\266.md" "b/\346\235\216\347\216\253\345\246\244/20251218-jQuery\344\272\213\344\273\266.md" deleted file mode 100644 index 0ac28d93cc6a4325901f19e09e4b9e561446641c..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251218-jQuery\344\272\213\344\273\266.md" +++ /dev/null @@ -1,10 +0,0 @@ -## 笔记 -### jQuery事件处理 -- jQuery对象.on('click',funtion(){}) -- jQuery对象.cklick(funtion(){}) -- jQuery对象.trigger('click',funtion(){}) - -### jQuery 动画与效果 -- 基础效果:显示、隐藏 show()、hide()、toggle() -- 进阶效果:淡入、淡出 fadeIn()、fadeDut() -- 高级效果:animate() \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251219.md" "b/\346\235\216\347\216\253\345\246\244/20251219.md" deleted file mode 100644 index d9de047bb9c35735f02e1029952ee278681e5cdc..0000000000000000000000000000000000000000 --- "a/\346\235\216\347\216\253\345\246\244/20251219.md" +++ /dev/null @@ -1,64 +0,0 @@ -### 变量、长量和基础数据类型 -- var let定义变量,请忘记var,后续只使用let -- const定义常量,常量名全大写 -- 数据类型 - - 基础数据类型 - - string - - number - - boolean - - underfined - - null - - 复合数据类型 - - 对象 - - 数组 - - 函数 -### 运算符和数据类型转换 -- + - * / % -- 逻辑运算 -- 赋值运算 = += -+ ++ --等 - -### 流程控制 -- 判断 - - if - - if...else - - if...else if() - - id...else if()...else -- 循环 - - for - - while - - do...while -- 三元运算 - -### 数组 -- 改变数组本身的方法 - - sort 排序,接受一个比较器 - - push pop 从尾部添加、删除 - - unshift shift 万能方法 删除元素、添加元素、修改元素 - - reverse 倒置 - - fill 填充 -- 不改变数组本身的方法 - - concat 拼接数组 - - slice 截取 - - map 将一个函数用在数组的每一个元素,并将处理后的结果放入新的数组 - - filter 将一个函数用在数组的每个元素上,如果这个元素运算的结果为true,则将元素放入新的数组,反之不放,最终得到新的数组 - - reduce - - forEach - - find - - findIndex - - every - - includes - - indexOf - - lastIndexOf - - join -- 高阶函数 - - 一个函数符,接受另外一个函数作为其参数,则称函数f为高阶函数 - -### 函数 -- 函数定义 三种定义方式 -- 函数参数 可传可不传,不会因为没有参数而报错 -- 函数返回值 如果没有返回值,则默认返回underfind - -### 对象 -- 包含在一对大括号的内容 -- 键值对,键也就是属性,值也就是属性值 -- 也可以使用类似数组的形式访问某个值,或者为其添加新的属性 \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251110-js\345\272\224\347\224\250+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251110-js\345\272\224\347\224\250+\347\273\203\344\271\240.md" deleted file mode 100644 index f34f8d33b4589bec889c3cfddfc375967c862109..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251110-js\345\272\224\347\224\250+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,76 +0,0 @@ -## JavaScript在HTML中的应用 -### 前端框架 -react - -vue - -### 后端 -c# - -java - -python - -go - -lua - -易语言 - -### js输出 -输出到控制台 -```js -console.log('') -``` -弹窗 -```js -alert('') -``` - - -行内 -```js - - - -``` - -内嵌 -```js - - - -``` - -外部嵌入 -```js - - - - -``` -## 综合练习2 -![alt text](./img/20251110练习2.PNG) -```js - - - - -``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251112-\346\225\260\346\215\256\347\261\273\345\236\213\345\217\230\351\207\217.md" "b/\346\235\216\351\233\250\347\277\224/20251112-\346\225\260\346\215\256\347\261\273\345\236\213\345\217\230\351\207\217.md" deleted file mode 100644 index 4dbf291de51e648738949698ede9afb982adcdf7..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251112-\346\225\260\346\215\256\347\261\273\345\236\213\345\217\230\351\207\217.md" +++ /dev/null @@ -1,154 +0,0 @@ -## 数据类型常量和变量 -### 变量名 -let -const -### 运算符 -+ - * / % ++ -- -### 比较运算符 -< > <= >= == === != !== - -### 赋值运算符 -= += -= *= /= %= - -### 逻辑运算符 -&& || ! -### 条件运算符 -a?'b':'c' - - -### 训练题1 -![alt text](./img/20251112训练1.png) -```js - - - - -``` -### 训练题2 -![alt text](./img/20251112训练2.png) -```js - - - - - -``` -### 训练题3 -![alt text](./img/20251112训练3.png) -```js - - - - -``` -### 训练题4 - -![alt text](./img/20251112训练4.png) -```js - - - - -``` -### 训练题5 -![alt text](./img/20251112训练5.png) -```js - - - - -``` -### 训练题6 -![alt text](./img/20251112训练6.png) -```js - - - - -``` -### 训练题7 -![alt text](./img/20251112训练7.png) -```js - - - - -``` -### 综合练习1 -```js -![alt text](./img/20251112综合练习1.png) -综合练习1.html - - - - -``` - -### 综合练习2 -![alt text](./img/20251112综合练习2.png) -```js - - - - -``` - -### 综合练习3 - -![alt text](./img/20251112综合练习3.png) -```js - - - - -``` - - diff --git "a/\346\235\216\351\233\250\347\277\224/20251113-\350\277\220\347\256\227\347\254\246+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251113-\350\277\220\347\256\227\347\254\246+\347\273\203\344\271\240.md" deleted file mode 100644 index 71970935545d25b02188cdf3545a8649656f92bd..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251113-\350\277\220\347\256\227\347\254\246+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,157 +0,0 @@ -## 运算符 -### 逻辑运算符 -- && 逻辑与 -- || 逻辑或 -- 逻辑非 - -### 条件运算符 -- 表达式?结果1:结果2 - -### 其他运算符 -1. 逗号运算符 -```js -var a,b,c,d; -a=(b=5,c=6,d=7) -allert('a的值为7'); -``` -2. typeof运算符 - - -数据类型|返回值| -|---|---| -|数值|number| -|字符串|string| -|布尔值|boolean| -|undefined|undefined| -|null|objecct| -|对象|object| -|函数|function| - -```js -let a = 1; -alert(typeof a) - -3. new 运算符 -对象实例名称 == new 对象类型() -对象实例名称 == new 对象类型 - - -``` -### 影厅座位表 -![alt text](./img/20251113影厅座位表.png) -```js - - - - -``` -### 综合练习1 -![alt text](./img/20251113综合练习1.png) -```js - - - - -``` - -### 综合练习2 -![alt text](./img/20251113综合练习2.png) -```js - - - 请选择你的出生年月: - - - - - - -``` - - -### 综合练习3 -![alt text](./img/20251113综合练习3.png) -```js - - - - -
      - - -
      - - - - -``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\256\255\347\273\203+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\256\255\347\273\203+\347\273\203\344\271\240.md" deleted file mode 100644 index 72aecf8824aa2943bc325918f6240b523a688be2..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\256\255\347\273\203+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,162 +0,0 @@ -## 流程控制训练 -### 训练1 -![alt text](./img/20251114训练1.PNG) -```js - - - - -``` - -### 训练2 -![alt text](./img/20251114训练2.PNG) -```js - - - -``` -### 训练3 -![alt text](./img/20251114训练3.PNG) -```js - - - -``` -### 训练4 -![alt text](./img/20251114训练4.PNG) -```js - - - - -``` - -### 训练5 -![alt text](./img/20251114训练5.PNG) -```js - - - -``` -### 训练6 -![alt text](./img/20251114训练6.PNG) -```js - - -``` -### 训练7 -![alt text](./img/20251114训练7.PNG) -```js - - -``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251117-\345\276\252\347\216\257\345\210\244\346\226\255+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251117-\345\276\252\347\216\257\345\210\244\346\226\255+\347\273\203\344\271\240.md" deleted file mode 100644 index e5d89765cea14c76608ce8d0b8913762eedaf56f..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251117-\345\276\252\347\216\257\345\210\244\346\226\255+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,46 +0,0 @@ -## 循环 -for() -while() -do...while() - -## 判断 -if -if...else -if...if else -if...if else...else - -## 循环控制 -return - -conntent - -## 形参 -1. 定义函数时可调用形参 - -2. 定义函数可以调用形参,也可不调用形参 - -### 训练1 -```js - - - - -``` - -### 训练2 -```js - - - - -``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251119-\345\207\275\346\225\260+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251119-\345\207\275\346\225\260+\347\273\203\344\271\240.md" deleted file mode 100644 index a14c8f9c53eed35c60814da54991a051e7b09bf2..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251119-\345\207\275\346\225\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,255 +0,0 @@ -## 函数 -### js的内置函数 - -|函数|描述| -|---|---| -|parseInt|将字符型转化为整形| -|parseFloat|将字符型转化为浮点型| -|isNaN|判断一个数值是否为NaN| -|isFinite|判断一个数值是否为有限| -|eval|求字符串中表达式的值| -|encodeURI()|将URI字符串进行编码| -|decodeURI()|对已编码的URI字符串进行解码| - -### 操作对象 -#### 访问属性 -```js -let goods = { - name:"无线", - age:166, - number:3 -} -document.write(goods.name); -document.write(goods.age); -document.write(goods.number); -``` - -#### 添加属性 -```js -let goods = { - name:"无线", - age:166, - number:3 -} - -goods.brand = '罗技' -``` - -#### 删除属性 -```js -let goods = { - name:"无线", - age:166, - number:3 -} - -delete goods.number; -``` - -### 训练3 -```js - - -``` - -### 训练4 -```js - - -``` - -### 训练5 -```js - - -``` - -### 训练6 -```js - - -``` - -### 训练7 -```js - - -``` -### 训练8 -```js - - -``` - -### 综合练习1 -```js - - -``` - -### 综合练习2 -```js - - -``` - -### 综合练习3 -```js - - - - -
      - - - - -``` - -### 斐波那契 -```js - - -``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251120-\345\257\271\350\261\241+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251120-\345\257\271\350\261\241+\347\273\203\344\271\240.md" deleted file mode 100644 index bbc86f6982a5a1b3718dc8a43d40320106d71a00..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251120-\345\257\271\350\261\241+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,113 +0,0 @@ -## 对象 - -### 遍历对象 -for..in循环语句专门用于遍历对象 -```js - for(va in object){ - ...star - } -``` - -### Math对象 -abs()绝对值 - -### Date对象 -实现对日期和时间的控制 -let date = new Date(); -let date = new Date(dateVal); -let date = new Date(year,month,date[,hours[,minutes[,seconds[[,ms]]]]]); - -### Event对象 -Event对象用于描述事件 -1. altKey -2. ctrlKey -3. shiftKey -用于返回事件被触发时按键是否被按下,3个属性都是Boolean类型 -### 训练1 -```js - - -``` - -### 训练2 -```js - - -``` - - -### 训练3 -```js - - -``` - - -### 综合训练1 -```js - - 请输入要生成随机数的位数: -
      - - - - - -``` - -### 综合训练2 -```js - - -``` - - - diff --git "a/\346\235\216\351\233\250\347\277\224/20251121-Event\345\257\271\350\261\241\345\222\214\346\225\260\347\273\204.md" "b/\346\235\216\351\233\250\347\277\224/20251121-Event\345\257\271\350\261\241\345\222\214\346\225\260\347\273\204.md" deleted file mode 100644 index 9ba0a094d772f333fce85485690650dddc420f20..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251121-Event\345\257\271\350\261\241\345\222\214\346\225\260\347\273\204.md" +++ /dev/null @@ -1,36 +0,0 @@ -## Event对象 - -元素添加事件,event用于调用某个方法 -```js -document.addEventListener('click', function cl(event) { - event.preventDefault(); -}) -``` -1. altKey属性 - - 用于返回是否被按下触发 -2. ctrlKey属性 - - 用于返回是否被按下触发 -3. shiftKey属性 - - 用于返回是否被按下触发 -4. button属性 - - 用于获取事件发生时用户按的鼠标键 -5. clientX属性 - - 用于获取鼠标指针在浏览器窗口中的X坐标 -6. clientY属性 - - 用于获取鼠标指针在浏览器窗口中的Y坐标 -7. x属性用于设置或获取鼠标指针位置相当于position属性 -8. y属性用于设置或获取鼠标指针位置相当于position属性 - -## 数组 -直接定义数组 -let arr = ["0","1"]; -1. concat() 方法 - - 用于将其他数组连接到当前数组的末尾 -2. shift() 方法 - - 用于把数组的第一个元素删除 -3. pop() 方法 - - 用于删除并返回数组的最后一个元素 -4. push() 方法 - - 用于向数组的末尾添加一个或多个元素 -5. unshift() 方法 - - 向数组的头部添加一个或多个元素 \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251124-\351\233\206\345\220\210String\345\257\271\350\261\241-\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251124-\351\233\206\345\220\210String\345\257\271\350\261\241-\347\273\203\344\271\240.md" deleted file mode 100644 index c58d730d747b8582241a8a365deb1c17928e887d..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251124-\351\233\206\345\220\210String\345\257\271\350\261\241-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,291 +0,0 @@ -## Map集合 -### 创建MAP -```js -let m = new Map(); - -//格式 -let m = new Map([ - ["key","value"], - ["key","value"] -]); - -``` -1. size属性 - - 获取键值对的数量 -2. set()方法 - - 设置键值对,返回整个Map结构 -3. get() - - 获取某个就键值对的值 -4. has()方法 - - 返回一个布尔值,表示某个键是否在Map中 -5. delete()方法 - - 删除Map中某个元素 -6. clear()方法 - - 清除Map中的所有元素 - -#### Map集合的遍历 -```js -for(let [key,value] of m.entries()){ - document.write(key + '' +value); -} -``` - -## Sring对象 -```js - let str = new String(); -``` -1. length属性 - - 获取字符串的长度 -2. constructor属性 - - 引用当前对象的构造函数 -3. prototype属性 - - 可以为字符串对象添加自定义的属性或方法 - -#### 查找字符串 -1. charAt()方法 - - 返回字符串中指定位置的字符 -2. indexOf()方法 - - 返回某个字符串出现的位置 - -#### 截取字符串 -1. slice()方法 - - 截取字符串的片段 -2. substr()方法 - - 可以从字符串指定位置开始提取指定长度的字符串 -3. substring()方法 - - 提取字符串中两个指定位置索引号指定位置的字符 - -#### 字符串大小转换 -1. toLowerCase()方法 - - 把字符串转换成小写 -2. toUpperCase()方法 - - 把字符串转换成小写 - -#### 连接和拆分字符串 -1. concat()方法 - 连接两个或多个字符串 -2. split()方法 - 把一个字符串分割成字符串数组 - -#### 第六章 -训练1 -```js - - -``` - -训练2 -```js - - -``` -训练3 -```js - - -``` - -综合练习1 -```js - - -``` -综合练习2 -```js - - - - Document - - - - - - -
      - - - -``` - - -#### 第七章 - -训练1 -```js - -``` -训练2 -```js - -``` -训练3 -```js - -``` - - -综合练习1 -```js - -``` - -综合练习2 -```js - -``` - -综合练习3 -```js - -``` - - - - - - diff --git "a/\346\235\216\351\233\250\347\277\224/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217+\347\273\203\344\271\240.md" deleted file mode 100644 index 76c8511e805840a564ba08b025768e7f63dc6338..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,183 +0,0 @@ -## 正则表达式 -#### 正则表达式的方法 -1. exec():在字符串中执行查找匹配,返回一个数组或null。 -2. test():测试字符串是否匹配正则表达式,返回true或false。 -3. match():在字符串中执行查找匹配,返回一个数组或null。 -4. search():测试字符串中的匹配,返回匹配的位置索引或-1。 -5. replace():在字符串中执行查找匹配,并使用替换字符串替换匹配到的子字符串。 -6. split():使用正则表达式或固定字符串分隔字符串,并将结果存储在数组中。 - -#### 基本匹配符:‌ - -- . - 匹配除换行符外的任意单个字符 -- \d - 匹配数字字符,等价于[0-9] -- \D - 匹配非数字字符,等价于[^0-9] -- \w - 匹配单词字符(字母、数字、下划线) -- \W - 匹配非单词字符 -- \s - 匹配空白字符(空格、制表符、换行符等) -- \S - 匹配非空白字符 - -#### ‌字符类:‌ - -- [abc] - 匹配方括号内的任意一个字符 -- [^abc] - 匹配不在方括号内的任意字符 -- [a-z] - 匹配指定范围内的字符 -‌ -#### 量词:‌ - -- *匹配前一个元素零次或多次 -- +匹配前一个元素一次或多次 -- ? 匹配前一个元素零次或一次 -- {n} 匹配前一个元素恰好n次 -- {n,} 匹配前一个元素至少n次 -- {n,m} 匹配前一个元素n到m次 -‌ -#### 边界匹配:‌ - -- ^ - 匹配字符串的开始 -- $ - 匹配字符串的结束 -- \b - 匹配单词边界 -- \B - 匹配非单词边界 - -#### ‌分组和引用:‌ - -- (pattern) - 捕获分组 -- (?:pattern) - 非捕获分组 -- | - 或操作符 - -##### 修饰符:‌ - -- g - 全局匹配 -- i - 忽略大小写 -- m - 多行模式 - -#### 训练1 -```js - - -``` -#### 训练2 -```js - - -``` -#### 训练3 -```js - - -``` -#### 训练4 -```js - - -``` -#### 综合练习1 -```js - - 邮箱 - - - - - -``` -#### 综合练习2 -```js - - 用户名 - - -
      - 密码 - - -
      - - - -``` -#### 综合练习3 -```js - - 姓名 - -
      - 移动电话 - - -
      - - - - -``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251127-\345\274\202\345\270\270+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251127-\345\274\202\345\270\270+\347\273\203\344\271\240.md" deleted file mode 100644 index ad17ed42d4b29d77b594e985527fd17ee3600798..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251127-\345\274\202\345\270\270+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,150 +0,0 @@ -## 异常处理与程序调试 -#### 触发onerror事件处理异常 -```js -//ms 异常信息:获取异常信息 -//Url URL:获取发生异常的文件绝对路径 -//Line 行号:给定发生异常文件的行号 -//window.onerror windows对象触发 - window.onerror = function(ms,Url,Line){ - somestatements; - return true; - } - - -//document.images[0] 第一张图片对象触发 - document.images[0].onerror = function(){ - somestatements; - return true; - } -``` - -## 使用try...catch...finally语句处理异常 -```java - try{ - - }catch(){ - - }finally{ - - } -``` - -## 事件处理 -1. 取消事件传递 -```js -function someHamdle(event){ - event.stopPropagation(); -} -``` - -2. 默认处理 - -取消事件默认动作 -```js -function someHamdle(event){ - event.preventDefault(); -} -``` - -#### 训练1 -```js - - -``` -#### 训练2 -```js - - -``` -#### 综合练习1 -```js - - 输入1-5的数字 -
      - - -
      - - - - -``` -#### 综合练习2 -```js - - 用户名: - -
      - 密码: - -
      - - - - -``` -#### 回车 -```js - - - 输入框 - -
      - - -
      - - - -``` diff --git "a/\346\235\216\351\233\250\347\277\224/20251128-\344\272\213\344\273\266\345\244\204\347\220\206+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251128-\344\272\213\344\273\266\345\244\204\347\220\206+\347\273\203\344\271\240.md" deleted file mode 100644 index fc6ae8fc3c39a7fdf193a3c8a696a34be575cb0c..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251128-\344\272\213\344\273\266\345\244\204\347\220\206+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,314 +0,0 @@ -## 事件处理 -#### onload事件 -会在页面中或图像中加载完成后立即触发 -```js - -``` - -#### onresize事件 -改变浏览器页面大小触发 -```js - -``` - -## 表单事件 -```js -//获得焦点 - - -//失去焦点 - -``` - -```js -//表单提交事件 - - -//重置事件 - -``` - -#### 练习1 -```js - - - - - -``` - -#### 练习2 -```js - - - 中国的“国球”是() -
      - - - -
      - -
      -A. 篮球 B. 排球 C.乒乓球 D.羽毛球
      -    
      - - - - - -``` - -#### 练习3 -```js - - - - -``` - -#### 练习4 -```js - - - - -``` - -#### 练习5 -```js - - - - - - - - -``` - - -#### 练习6 -```js - - - - - - - - - - - - -``` - - - - -#### 练习7 -```js - -
      - 用户名 - -
      - 密码 - -
      - - -
      - - - -``` - - -#### 练习8 -```js - ondragover 某个对象被拖拽到另一个容器时触发 ondragleave 拖拽对象离开容器时触发 ondrop 对象在被拖拽过程释放鼠标触发 - -``` - - - -#### 练习9 -```js - - - - -
      -
      - -
      -
      -
      - - -``` - -#### 综合练习1 -```js - - 欢迎购买明日科技图书 - - - -``` - -#### 综合练习2 -```js - - - - - -``` - - -#### 综合练习3 -```js - - - - - -``` - - - - - - diff --git "a/\346\235\216\351\233\250\347\277\224/20251201-\346\213\226\346\213\275\346\226\271\346\263\225.md" "b/\346\235\216\351\233\250\347\277\224/20251201-\346\213\226\346\213\275\346\226\271\346\263\225.md" deleted file mode 100644 index 0bc308460dad0bf728d2e6a519a9bf7957a34447..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251201-\346\213\226\346\213\275\346\226\271\346\263\225.md" +++ /dev/null @@ -1,17 +0,0 @@ -## 拖拽方法 -### 事件详解 -#### 拖拽源事件(被拖拽元素) -1. dragstart:当用户开始拖拽一个元素时触发。通常在此事件中设置拖拽数据(如拖拽元素的ID)和拖拽效果。 - -2. drag:拖拽过程中连续触发(类似于mousemove事件)。 - -3. dragend:拖拽结束(松开鼠标)时触发,无论拖拽成功与否都会触发。 - -#### 放置目标事件(放置区域) -1. dragenter:当拖拽元素进入放置区域时触发。通常用于给放置区域添加视觉反馈。 - -2. dragover:当拖拽元素在放置区域上方移动时连续触发。必须在此事件中调用event.preventDefault()才能允许放置。 - -3. dragleave:当拖拽元素离开放置区域时触发。通常用于移除视觉反馈。 - -4. drop:当拖拽元素在放置区域释放时触发。必须在此事件中调用event.preventDefault()才能执行放置操作。通常在此事件中处理拖拽数据的接收和处理。 diff --git "a/\346\235\216\351\233\250\347\277\224/20251203-Document\345\257\271\350\261\241+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251203-Document\345\257\271\350\261\241+\347\273\203\344\271\240.md" deleted file mode 100644 index 2cab559c1ff4e3dc272d0185909b36520cbef2fe..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251203-Document\345\257\271\350\261\241+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,227 +0,0 @@ -## Doucment对象 -### 常用属性 - -|属性|方法| -|---|---| -|body|提供对元素的直接访问| -cookie|获取或设置与当前文档有关的所有cookie -domain|获取当前文档的域名 -lastModified|获取文档最后修改的日期和时间 -referrer|获取载入当前文档的URL -title|获取或设置当前文档的标题 -URL|获取当前文档的URL - -### 常用方法 -|方法|说明| -|---|---| -close|关闭当前用Document.open()方法打开的输入流 -getElementById()|返回指定id对象 -getElementByName()|返回带有指定名称的对象集合 -getElementByTagName()|返回带有指定标签名的对象集合 -open()|打开一个文档输入流并接收write()和writeln()方法创建页面内容 -write()|向文档写入HTML或js语句 -writeln()|向文档写入HTML或js语句,并以换行符写入 -createElement|创建一个HTML标记 - - -### 设置文档背景色和前景色 -style.backgroundColer - -style.color - -### 设置延迟时间 -setTiemout("title",1000) - - -### 获取当前文档状态 -状态值|说明 -uninitialized|还未开始载入 -loading|文档正在加载 -interactive|已加载,用户可以和文档进行交互 -complete|载入完成 - - -#### 训练1 -```js - - - - - -``` - -#### 训练2 -```js - - -``` - -#### 训练3 -```js - - - - - - -``` - -#### 综合练习1 -```js - - - - - - -``` - -#### 综合练习2 -```js - - - 超链接 -
      - - -
      - - - -``` - -#### 综合练习3 -```js - - - - - - -
      - - - -``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213+\347\273\203\344\271\240.md" deleted file mode 100644 index ce727c9ab51bac31bedc8a8522755685fd9f6781..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,432 +0,0 @@ -## 文档对象模型 -### Dom节点属性 -属性|说明| -|---|---| -|nodeName|节点的名称| -|nodeValue|节点的值,通常只用于文本节点| -nodeTyep|节点的类型 -parentNode|返回当前节点的父节点 -childNodes|子节点列表 -firstChild|返回当前节点的第一个子节点 -lastChild|返回当前节点的最后一个子节点 -previousSibling|返回当前节点的前一个兄弟节点 -nextSibling|返回当前节点的后一个兄弟节点 -attributes|元素的属性列表 - - -### 节点 -1. 创建节点 - - obj.appendChild(newChild) -2. 插入节点 - - obj.insertBefore(new,ref) -3. 复制节点 - - obj.cloneNode(deep) -4. 删除节点 - - obj.removeChild(oldChild) -5. 替换节点 - - obj.replaceChild(new,old) - -### 获取文档中的指定元素 -1. 通过元素的id属性获取元素 - - document.getElementById("userId"); - -2. 通过元素的class属性获取元素 - - document.getElementByClassName("userId"); - -### 训练1 -```js - - - -
      - - - - -
      - -
      - -
      - - - -``` - -### 训练2 -```js - -

      最新电影资讯

      -
        - -
      -
      - - -
      - - - -``` - - -### 训练3 -```js - -

      最新电影资讯

      -
        -
      1. dadsasd
      2. -
      3. dfsasdsada
      4. -
      -
      - - - - -
      - - - - -``` - - -### 训练4 -```js - - - - -
      -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 芒果
      • -
      -
        -
      • 西瓜
      • -
      • 蜜桔
      • -
      • 萝卜
      • -
      -
      - - - - -``` - -### 训练5 -```js - -

      在《在倚天屠龙记》中,张三丰是_派的掌门

      - - A.少林 - - A.武当 - - A.峨眉 - - A.昆仑 - -
      - - - - -``` - -### 训练6 -```js - - 链接 - - - - -``` - -### 训练7 -```js - - -
      - - - -``` - -### 综合练习1 -```js - - - -

      一生只爱一个人

      - 粗体改为斜体 - - - -``` - -### 综合练习2 -```js - - - - - - - - -``` -### 综合练习3 -```js - - - - - 请选择表情: - - -
      -
      - - - - - -``` - - - diff --git "a/\346\235\216\351\233\250\347\277\224/20251205-\344\270\216DHTML\345\222\214innerText\345\261\236\346\200\247+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251205-\344\270\216DHTML\345\222\214innerText\345\261\236\346\200\247+\347\273\203\344\271\240.md" deleted file mode 100644 index ce342717bbf0355e1fa1e5020fd380918a0b3266..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251205-\344\270\216DHTML\345\222\214innerText\345\261\236\346\200\247+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,268 +0,0 @@ -## 与DHTML和innerText属性 -1. innerHTML属性 - - 可以为指定文本替换元素的内容 - -2. innerText属性 - - 只能声明文本 - -3. outerHTML属性 - - 对元素本身进行修改 - -4. outerText属性 - - 只能修改文本 - -## Window对象 -window对象是JavaScript中的一个全局对象,它代表了浏览器的一个窗口,可以控制窗口的大小位置等 - -### window对象的属性和方法 - -#### 常用属性 - -1. window.document: 指向窗口中载入的DOM文档。 - -2. window.location: 获取或设置窗口对象的位置,即当前的URL。 - -3. window.navigator: 返回浏览器的信息,如版本号。 - -4. window.screen: 返回与窗口相关的屏幕对象的引用,包括屏幕的高度和宽度。 - -5. window.innerHeight 和 window.innerWidth: 获取浏览器窗口的内部高度和宽度,包括滚动条。 - -#### 常用方法 - -1. window.open(): 打开一个新窗口。 - -2. window.close(): 关闭当前窗口。 - -3. window.resizeTo() 和 window.resizeBy(): 调整当前窗口的尺寸。 - -4. window.moveTo() 和 window.moveBy(): 移动当前窗口。 - -5. window.alert(), window.confirm(), 和 window.6. prompt(): 显示对话框,用于与用户交互。 - -#### 事件处理 - -1. window.addEventListener(): 为window上的特定事件类型注册一个事件处理器。 - -2. window.removeEventListener(): 从window上移除一个事件监听器。 - -#### 其他特性 - -1. window.history: 提供了浏览器历史的操作能力。 - -2. window.localStorage 和 window.sessionStorage: 提供了本地存储和会话存储的功能,用于存储数据。 - - -### 训练1 -```js - - - - - - - - - -``` -### 训练2 -```js - - 退出登录 - - - -``` -### 训练3 -```js - - 点击打开图片的详情页面 -
      - - - - -``` -### 训练4 -```js - - -``` -### 训练5 -```js - - -``` -### 训练6 -```js - - - - - - -``` -### 综合练习1 -```js - - -v -``` -### 综合练习2 -```js - - - - -
      - -
      - - - -``` -### 综合练习3 -```js - -
      - - - -``` - - - - diff --git "a/\346\235\216\351\233\250\347\277\224/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213+\347\273\203\344\271\240.md" deleted file mode 100644 index e0b2af160a5f2696491232031469166d91f29053..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,132 +0,0 @@ -## 浏览器对象模型 -### location对象 -提供当前对象窗口中加载文档的信息,以及导航功能 - -|属性|说明| -|---|---| -href:| 设置或返回完整的URL。 -protocol:| 设置或返回URL的协议部分(例如http:或https:)。 -host:| 设置或返回URL的主机名和端口号。 -hostname:| 设置或返回URL的主机名。 -port:| 设置或返回URL的端口号。 -pathname:| 设置或返回URL的路径部分。 -search:| 设置或返回URL的查询部分(从问号?开始)。 -hash:| 设置或返回URL的锚部分(从井号#开始)。 - -### location对象的方法 -1. assign()方法 - - 用于跳转到新的页面 -2. reload() - - 用于重新载入当前页面 - -### navigator对象 -属性|说明 -|---|---| -appCodeName|获取浏览器代码名 -userAgent|获取浏览器的整体信息 -appName|获取浏览器名称 -appVersion|获取浏览器的版本号 -platform|获取当前计算机的操作系统 -cookieEnabled|判断是否启用Cookies - - -### screen对象 -属性|说明 -|---|---| -availHeight:| 返回屏幕的高度(不包括 Windows 任务栏)。 -availWidth:| 返回屏幕的宽度(不包括 Windows 任务栏)。 -colorDepth:| 返回目标设备或缓冲器上的调色板的比特深度。 -height:| 返回屏幕的总高度。 -pixelDepth:| 返回屏幕的颜色分辨率(每像素的位数)。 -width:| 返回屏幕的总宽度。 - - -### history对象 -属性|说明 -|---|---| -length|历史列表中的URL数量 -current|当前文档的URL -next|历史列表的下一个URL -previous|历史列表的前一个URL - -方法|说明 -|---|---| -back()|退回前一页 -forward()|重新进入下一页 -go()|进入指定的网页 - -#### 练习1 -```js - - - - - -``` - -#### 练习2 -```js - - - - - -``` -#### 综合练习1 -```js - - - - - -``` -#### 综合练习2 -```js - -
      -

      管理员登录

      -
      - - - - - - - Top - - - -``` - diff --git "a/\346\235\216\351\233\250\347\277\224/20251210-Style\345\257\271\350\261\241+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251210-Style\345\257\271\350\261\241+\347\273\203\344\271\240.md" deleted file mode 100644 index b6e79b6fe6722e14c4bc7257400ea64be6b0a101..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251210-Style\345\257\271\350\261\241+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,210 +0,0 @@ -## Style对象 -```js -document.getElementById().style.属性 -``` -#### 颜色和背景属性 -1. backgroundColor属性 - - 设置背景颜色 -2. color属性 - - 设置颜色 -3. backgroundImage属性 - - 设置背景图片 -4. backgroundPosition属性 - - 设置背景图片的位 -5. backgroundRepeat属性 - - 背景图片如何铺排 -6. backgroundAttachment属性 - - 背景图片随对象内容滚动还是固定 -#### 定位属性 -1. clip属性 - - 检索或设置对象的可视区域,区域外的部分是透明的,必须将postion的值设置为absolute,clip才能使用 -2. top属性 - - 定位对象上边界位置 -3. left属性 - - 定位对象左边界位置 -4. paddingTop属性 - - 定位父对象顶端相关位置 -5. position属性 - - 对象的定位方式 - -#### 练习1 -```js - -

      这是一行文本

      - - - -``` - -#### 练习2 -```js - - - -
      - -
      - - -``` -#### 综合练习1 -```js - - - - -

      HTML/CSS讨论区

      -
      JavaScript讨论区
      -
      C语音讨论区
      -
      Java讨论区
      -
      Android讨论区
      -
      Python讨论区
      - - - -``` -#### 综合练习2 -```js - - - - -
      - -
      -
      - -
      -
      - -
      - - - - - -``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251211-Form\345\257\271\350\261\241+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251211-Form\345\257\271\350\261\241+\347\273\203\344\271\240.md" deleted file mode 100644 index 2c88c6775e468adec9bae181787ffebeece3dca7..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251211-Form\345\257\271\350\261\241+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,228 +0,0 @@ -## Form对象 -### js访问表单 -1. document.forms[] 按编号进行访问 -2. document.formname 按名称进行访问 -3. document.getElementById("") 定位访问表单 - -### Form对象的属性,方法与事件 -属性|说明 -|---|---| -name|返回或设置表单的名称 -action|返回或设置表单提交的URL -method|返回或设置表单提交的方式,可取值为get或post -encoding|返回或设置表单信息提交的编码方式 -id|返回或设置表单的id -target|返回或设置提交表单时目标窗口的打开方式 -elements|返回表单对象中的元素构成的数组,数组中的元素也是对象 - - -#### 练习1 -```js - - 兑换码: - - - - - -``` -#### 练习2 -```js - -
      - - -
      - - - -``` -#### 练习3 -```js - -

      请选择课程

      -
      - c语言 - 机械制图 - 单片机 - 自动控制 - 传感器 - 高等数学 - 计算机基础 - Oracle数据库 - 商务英语 - PLC设计基础 -
      - - -``` -#### 综合练习1 -```js - - 电影的<变相怪杰>的主演是谁? -
      - 布拉德皮特 - 亚当桑德勒 - 金凯特 - 杰夫丹尼 -
      - -
      -
      - -
      - - - - -``` -#### 综合练习2 -```js - -
      - 看电影 - 听音乐 - 演奏乐器 - 打篮球 - 看书 - 上网 -
      - - - -
      - - - -``` -#### 综合练习3 -```js - - 选择城市: - - - - - - -``` - diff --git "a/\346\235\216\351\233\250\347\277\224/20251212-JSON+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251212-JSON+\347\273\203\344\271\240.md" deleted file mode 100644 index 684326e2ea7f0c10933eb18a57fb5a00e8218981..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251212-JSON+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,277 +0,0 @@ -## JSON -### JSON语法规则 -#### 对象方式获取JSON -```js -{ - "name":"张三", - "age":18,"gender" - :"男" -} -``` -#### -```js -[ - {"name":"张三","age":18,"gender":"男"}, - {"name":"张三","age":18,"gender":"男"}, - {"name":"张三","age":18,"gender":"男"} -] -``` - -### JSON对象 -#### 获取值 -```js -let arr = { - "name":'张三', - "age": 18, - "gender":'男' -} -docwrite.log(arr.name); -``` - -### 遍历JSON对象 -```js -let arr = { - "name":'张三', - "age": 18, - "gender":'男' -} -for(let key in arr){ - docwrite.log(key+''+arr[key]); -} -``` - -### 嵌套JSON对象 -```js -let arr = { - "name":'张三', - "age": 18, - "gender":'男', - "con":{ - "email": 'mr@', - "qq":"12..." - } -} -docwrite.log(arr.con.email); -``` - -### JSON数组 -```js - let arr = [ - { - name: '张三', - age: 18, - gender: '男' - }, - { - name: '张三', - age: 18, - gender: '男' - - } - ] - docwrite.log(arr[0].name); - -``` - -### JSON对象中的嵌套数组 -```js -let arr = { - "name":'张三', - "age": 18, - "gender":'男', - "con":[ - {"a":'a',lis:[]} - {"b": 'b',lis:[]} - ] -} -docwrite.log(arr.con.email); -``` - -### JSON序列化和反序列化 -```js - let arr = { - name: '张三', - age: 18, - gender: '男' - } - - console.log(arr); - - let ja = JSON.stringify(arr); - console.log(ja); - console.log(JSON.parse(ja)); -``` - -#### 练习1 -```js - - - -``` -#### 练习2 -```js - - - -``` -#### 综合练习1 -```js - - - - - -``` -#### 综合练习2 -```js - - - - - - - -``` diff --git "a/\346\235\216\351\233\250\347\277\224/20251215-jQuery\345\237\272\347\241\200.md" "b/\346\235\216\351\233\250\347\277\224/20251215-jQuery\345\237\272\347\241\200.md" deleted file mode 100644 index 39dde8f207c2ba375c6ed775725a762a417334fd..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251215-jQuery\345\237\272\347\241\200.md" +++ /dev/null @@ -1,37 +0,0 @@ -## jQuery基础 -### jQuery 基础 - - 是一个js库,为了方便dom操作 - - 和js的引用一样,建议在body结束标签之前引用 - - 使用$来使用jQuery库的能力,$符号实际是一个方法,当然方法在- js中也是一个对象,所以其也有一些属性可以使用 - - jquery获取到的是jQuery,和原生js拿到的dom对象不同,但它们间可以相互转换 - - let div=$('div')拿到jquery对象 - - div[0]拿到dom对象 - - $(div[0])又可以重新转换为jquery对象 -### jQuery 选择器与操作 - - 基础选择器 - - 标签选择器 - - 类名选择器 - - id选择器 - - 关系选择器 - - 子代选择器 - - 直接子代选择器 > - - 兄弟选择器 ~ - - 相邻兄弟选择器 + - - 高级选择器 - - 属性选择器 - - 伪类选择器 -### 伪元素选择器 - - jQuery 事件处理 - - jQuery对象.on('click',function(){}) - - jQuery对象.click(function(){}) - - jQuery对象.trigger('click',function(){}) - - $(function(){}) -### jQuery 动画与效果 - - 基础效果:显示、隐藏 show()、hide()、toggle() - - 进阶效果:淡入、淡出 fadeIn()、fadeOut() - - 高级效果:animate() - - jQuery DOM 操作 - - 新增 append给拿到的元素增加一个下级元素 - - 移除 remove 移除拿到的元素 - - text() 拿到文本内容 ,text('要设置的内容')可以修改纯文本内容 - - html() 拿到包含标签的内容 ,html('要设置的内容')可以修改包含标签的内容 \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251217-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225.md" "b/\346\235\216\351\233\250\347\277\224/20251217-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225.md" deleted file mode 100644 index 723e57200d5fbe6ddcb4b9815c6d365f209154db..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251217-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225.md" +++ /dev/null @@ -1,34 +0,0 @@ -## 核心数据结构及用法 -### 数组 - - 改变数组本身的方法 - - sort 排序,接受一个比较器 - - push pop 从尾部添加、删除 - - unshift shift 从头部添加、删除 - - splice 万能方法 删除元素、添加元素、修改元素 - - reverse 倒置 - - fill 填充 - - 不改变数组本身的方法 - - concat 拼接数组 - - slice 截取 - - map 将一个函数用在数组的每一个元素上,并将处理后的结果放入新的数组 - - filter 将一个函数用在数组的每个元素上,如果这个元素运算的结果为true,则将元素放入新的数组,反之不放,最终得到新的数组 - - reduce 将一个函数用在数组的前2个元素上,计算后的结果作为同一个函数第一个参数和数组的第三元素作为第二参数进行运算 - - forEach 遍历 - - find 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素,否则最终返回undefined - - findIndex 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素下标,否则最终返回undefined - - every - - some - - includes - - indexOf - - lastIndexOf - - join -### 高阶函数 -一个函数f,接受另外一个函数作为其参数,则称函数f为高阶函数 -#### 函数 - - 函数定义 三种定义方式 - - 函数参数 可传可不传,不会因为没有参数而报错 - - 函数返回值 如果没有返回值,则默认返回undefined - 对象 - - 包含在一对大括号中的内容 - - 键值对,键也就是属性,值也就属性值 - - 也可以使用类似于数组的形式访问某个值,或者为其添加新的属性 \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251218-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225.md" "b/\346\235\216\351\233\250\347\277\224/20251218-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225.md" deleted file mode 100644 index 10adf07b35d6e2beecba13b2833bb24aa25190da..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251218-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225.md" +++ /dev/null @@ -1,27 +0,0 @@ -## Javascript基础 - - 开发环境与初体验 - - 编辑器 - - 常用编辑器 - - 记事本 - - Sublime Text4 - - vim - - webstorm - - Trae - - HBuilderX - - DreamWeave - - 我们选用的编辑器 - - Visual Studio Code - - 变量、常量和基础数据类型 - - var let定义变量,请忘记var,后续只使用let - - const定义常量,常量名全大写 - - 数据类型 - - 基础数据类型 - - string - - number - - boolean - - underfined - - null - - 复合数据类型 - - 对象 - - 数组 - - 函数 diff --git "a/\346\235\216\351\233\250\347\277\224/20251219-\350\277\220\347\256\227\347\254\246\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213\350\275\254\346\215\242.md" "b/\346\235\216\351\233\250\347\277\224/20251219-\350\277\220\347\256\227\347\254\246\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213\350\275\254\346\215\242.md" deleted file mode 100644 index 5247eb3d7d6f8efa5b90568e76aa8bd887d518cb..0000000000000000000000000000000000000000 --- "a/\346\235\216\351\233\250\347\277\224/20251219-\350\277\220\347\256\227\347\254\246\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213\350\275\254\346\215\242.md" +++ /dev/null @@ -1,19 +0,0 @@ -## 运算符和数据类型转换 - - / % - - 逻辑运算 - - null undefined 0 '' 这些字面量参与逻辑运算时,作为- - - - false,其余的值作为true - - 短路运算 true || 表达式 false && 表达式 - - 赋值运算 = += -+ ++ --等 - - parseInt parseFloat 乘1变数字 加空字符串变字符串 - - 流程控制 - - 判断 - - if - - if ... else - - if ... else if() - - if ... else if()... else - - switch - - 循环 - - for - - while - - do...while - - 三元运算 \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2401.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2401.PNG" deleted file mode 100644 index 3e057cf7866dbbccc544be5c25b86d475a31ecde..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2401.PNG" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2402.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2402.PNG" deleted file mode 100644 index c7bc42f6504dde2ee1d3e3022fc639008ebf2c2f..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2402.PNG" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2401.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2401.png" deleted file mode 100644 index ddb3c5fc481f9e337a157c3ab40391e4fe8239dc..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2401.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2402.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2402.png" deleted file mode 100644 index ed6928a88f1a4446015872c74a57c77354ef4f3a..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2402.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2403.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2403.png" deleted file mode 100644 index c5270ffbb92734c158242b8807a83118a2eae21f..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2403.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2031.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2031.png" deleted file mode 100644 index a0874df3650a338503242af4174e4c9ae5c02520..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2031.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2032.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2032.png" deleted file mode 100644 index c3dcd3b221a9a766083057ec6c72694c5e0de7da..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2032.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2033.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2033.png" deleted file mode 100644 index 91765ba0aa3f1d2e2918fa417ac7b28f1eaf264a..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2033.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2034.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2034.png" deleted file mode 100644 index 435c496565439bd6da740db7f399e70d113950a2..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2034.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2035.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2035.png" deleted file mode 100644 index fd2a4b078c1cb8b551551e00a3a07c9689664c73..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2035.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2036.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2036.png" deleted file mode 100644 index 57c377774f77557a0c6703a0793fff90cc7cfcdc..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2036.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2037.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2037.png" deleted file mode 100644 index ae3451563c5660724a9dfab793f7c3a05d4de4f7..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2037.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251113\345\275\261\345\216\205\345\272\247\344\275\215\350\241\250.png" "b/\346\235\216\351\233\250\347\277\224/img/20251113\345\275\261\345\216\205\345\272\247\344\275\215\350\241\250.png" deleted file mode 100644 index bb1e251f7bd57f00de8ccdd50e767421a101e3de..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251113\345\275\261\345\216\205\345\272\247\344\275\215\350\241\250.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2401.png" "b/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2401.png" deleted file mode 100644 index 4dc59ce634b6890002630962ea33d03a296fb215..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2401.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2402.png" "b/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2402.png" deleted file mode 100644 index 48b68cc2f8c4edd527fffefc6de5877ccaa1ce46..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2402.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2403.png" "b/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2403.png" deleted file mode 100644 index a16c4285603a07590da9c5eb653c3f7fa05cc2fa..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2403.png" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2031.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2031.PNG" deleted file mode 100644 index c1ad91bc0ac776c1e23ab04f72161eb829f83af1..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2031.PNG" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2032.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2032.PNG" deleted file mode 100644 index 9ed280f90192771777b2ddc7be736b576ca64c77..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2032.PNG" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2033.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2033.PNG" deleted file mode 100644 index 20c5da24ff8f4dfbe3b55e3846a3f330433af00f..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2033.PNG" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2034.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2034.PNG" deleted file mode 100644 index 1c084a7e6c4bceeebca114fa811493fc073657c4..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2034.PNG" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2035.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2035.PNG" deleted file mode 100644 index 61b49b01c45457428162c43f60c0ad8045a28cbe..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2035.PNG" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2036.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2036.PNG" deleted file mode 100644 index e7dc0674beadf888122279a6524ab1c64771a14b..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2036.PNG" and /dev/null differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2037.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2037.PNG" deleted file mode 100644 index d4c96f30a4db5dbe6a2f7cc262d48ecfa494a93b..0000000000000000000000000000000000000000 Binary files "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2037.PNG" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/20251110-js\347\254\254\344\270\200\350\257\276.md" "b/\346\235\250\345\205\211\346\262\243/20251110-js\347\254\254\344\270\200\350\257\276.md" deleted file mode 100644 index 1cb8b2437a98a8a9191be1be2a970744d874f9f3..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251110-js\347\254\254\344\270\200\350\257\276.md" +++ /dev/null @@ -1,41 +0,0 @@ -# 笔记 -### js的使用 -- 内部 - ```html - - - -``` -- 外部(需要创建一个外部js文件) -```html - - - -``` -# 练习 -内部(输出老子名言) -关键代码 -```html - - - -``` -效果图 -![alt text](11-10(1)-1.gif) - -外部(弹窗明日学院) -关键代码 -```html - - - -``` -```js -alert("https://www.mingrisoft.com/"); -``` -效果图 -![alt text](11-10(2)-1.gif) \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251112-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" "b/\346\235\250\345\205\211\346\262\243/20251112-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" deleted file mode 100644 index 7acb3bdd7705c409cd8d614cd366a89206453def..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251112-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" +++ /dev/null @@ -1,80 +0,0 @@ -# 笔记 -- 1.js区分大小写 -- 2.小驼峰 userName Age 第一个单词第一个字母小写 后面的单词首字母大写 -- 3.i++ 使用i之后 加1,++i 使用i之前 加1 - -# 练习 -效果图 -![alt text](screenshots.gif) -代码 -```html - -``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251113-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" "b/\346\235\250\345\205\211\346\262\243/20251113-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" deleted file mode 100644 index ae66afc38f525a3654c12b33d07042f748aa0843..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251113-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" +++ /dev/null @@ -1,174 +0,0 @@ -# 笔记 - - -# 练习 -- 1代码 -```html - - - -
      -

      -
      - -
      - - - -``` - -效果图 -![alt text](screenshots.gif) -- 2代码 -```html - - - -
      - - - -``` -效果图 -![alt text](screenshots-1.gif) \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251114-\347\273\203\344\271\240.md" "b/\346\235\250\345\205\211\346\262\243/20251114-\347\273\203\344\271\240.md" deleted file mode 100644 index fa4e562cdcbd5de389ae135edba6f837d2dea2a8..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251114-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,103 +0,0 @@ -# 练习 -代码 -```html - - - - -``` -效果图 -![alt text](screenshots.gif) \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251117-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" "b/\346\235\250\345\205\211\346\262\243/20251117-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" deleted file mode 100644 index 3d9b611c630679ed2f7853815d02f1ac93474965..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251117-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" +++ /dev/null @@ -1,23 +0,0 @@ -# 笔记 -### JavaScript 函数有三种定义方式:**函数声明、函数表达式和构造函数**。函数声明有预解析特性,优先级高于变量声明。函数表达式是将匿名函数赋值给变量,而构造函数方式会导致代码被解析两次,影响性能。 - -# 练习 -## -```html - -``` -# 效果图 - -![alt text](image.png) \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251119-\345\207\275\346\225\260\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" "b/\346\235\250\345\205\211\346\262\243/20251119-\345\207\275\346\225\260\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" deleted file mode 100644 index f5655b2f2e7f24357c854593382e2d5e6f9c6027..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251119-\345\207\275\346\225\260\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" +++ /dev/null @@ -1,151 +0,0 @@ -# 笔记 - -### 函数描述 -- parseInt:将字符型转化为整形 -- parseFloat:将字符型转化为浮点型 -- isNaN:判断一个数值是否为NaN -- isFinite:判断一个数值是否为有限 -- eval:求字符串中表达式的值 -- encodeURI():将URI字符串进行编码 -- decodeURI():对已编码的URI字符串进行解码 - -# 练习 - -```html - - - -``` - -# 效果图 -![alt text](image.png) -![alt text](image-2.png) -![alt text](image-4.png) \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251120-\345\257\271\350\261\241\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" "b/\346\235\250\345\205\211\346\262\243/20251120-\345\257\271\350\261\241\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" deleted file mode 100644 index 7ac52ed24dd4289b7721b13e5d9d6aec34c6462b..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251120-\345\257\271\350\261\241\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" +++ /dev/null @@ -1,99 +0,0 @@ -# 笔记 - -### for..in循环语句专门用于遍历对象 -```js - for(va in object){ - ...star - } -``` - -# 练习 -### 代码 - -```html - - -

      请输入要生成随机数的位数:

      -
      - - -
      - - -

      熊大出生到现在已经过了:

      - - - - - - -``` -### 效果图 -![alt text](<20251120 (1).gif>) -![alt text](<20251120 (2).gif>) \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251121-\346\225\260\347\273\204\345\257\271\350\261\241\347\254\224\350\256\260.md" "b/\346\235\250\345\205\211\346\262\243/20251121-\346\225\260\347\273\204\345\257\271\350\261\241\347\254\224\350\256\260.md" deleted file mode 100644 index 96191c8fe609442453ad154b2ab35af5f1318810..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251121-\346\225\260\347\273\204\345\257\271\350\261\241\347\254\224\350\256\260.md" +++ /dev/null @@ -1,21 +0,0 @@ -# 笔记 - -### 数组基础概念 - -数组是存储数据的有序集合,可以包含任意数据类型。每个数据称为数组元素,元素的位置称为索引,索引从0开始计数。JavaScript数组长度可以动态改变,且同一个数组中可以存储不同类型的数据。 - -#### 创建数组 - -数组有两种基本创建方式:字面量方式和构造函数方式23。 - -``` -javascriptCopy Code// 字面量方式 -let arr1 = ['哈哈', '你好', 1, 2, {'name':'哈哈'}]; -let arr2 = []; // 空数组 -let arr3 = [1, 2, 3]; // 有内容的数组 - -// 构造函数方式 -let arr4 = new Array('哈哈', 1, 24); -let arr5 = new Array(); // 空数组 -let arr6 = new Array(10); // 长度为10的数组 -``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251124-\346\225\260\347\273\204.md" "b/\346\235\250\345\205\211\346\262\243/20251124-\346\225\260\347\273\204.md" deleted file mode 100644 index b551b50f96f9d6b60e464effaa08e13e7e6873cf..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251124-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,111 +0,0 @@ -# 练习 -## 一 -```html -function getWeekday() { - - let currentDate = new Date(); - - - let dayIndex = currentDate.getDay(); - - - let daysOfWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; - - - return daysOfWeek[dayIndex]; - - - } - - console.log(`今天是: ${Date()} ${getWeekday()}`); -``` - -## 二 -```html -let arr = new Array(5, 7, 6, 3, 9, 2); - - arr.sort() - - console.log(arr); - - console.log(arr.slice(-1)); - - - document.write("
      "); - document.write("
      "); - - let aee = new Array(1, 2, 3, 4, 5, 6); - - console.log(aee.slice(2, 5)); -``` - -## 三 -```html -let koo = new Array("长春", "昌图西", "铁岭北", "沈阳北", "绥中北", "北京"); - - console.log(koo); - - console.log(koo.reverse()); -``` - -## 四 -```html -let shu = Array("《雪山飞狐》", "《连城诀》", "《天龙八部》", "《射雕英雄传》", "《鹿鼎记》", "《笑傲江湖》", "《书剑恩仇录》", "《神雕侠侣》", "《倚天屠龙记》", "《碧血剑》"); - let fournname = ""; - for (let i = 0; i < shu.length; i++) { - - if (shu[i].length == 6) { - fournname += shu[i] + ""; - } - } - -``` - -## 五 -```html - let vas = Array("1330431****", "1567766****", "1304316****", "1526567****", "1580433****", "139****0431"); - let result = ""; - for (let i = 0; i < vas.length; i++) { - - if (vas[i].includes("0431")) { - result += vas[i] + ""; - } - } - console.log(`包含'0431'的号码:, ${result}`); -``` - -## 六 -```html -let arr ="abc@sina.com"; - if(arr.indexOf("@") ==3 && arr.indexOf(".") == 8){ - alert("注册邮箱符合要求"); - }else{ - alert("注册邮箱不符合要求"); - }; -``` -## 七 -```html -function formatNumberWithCommas(num) { - let str = String(num).trim(); - let reversedStr = str.split('').reverse().join(''); - let result = []; - for (let i = 0; i < reversedStr.length; i += 3) { - result.push(reversedStr.slice(i, i + 3)); - } - return result.join(',').split('').reverse().join(''); - } - let testNum = 13625966; - console.log(formatNumberWithCommas(testNum)); -``` -## 八 -```html -function randomString() { - const chars = "0123456789ABCDEFG"; - let randomStr = ""; - for (let i = 0; i < 6; i++) { - const randomIndex = Math.floor(Math.random() * chars.length); - randomStr += chars[randomIndex]; - } - document.getElementById("result").innerText = randomStr; - } -``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251126-\346\255\243\345\210\231.md" "b/\346\235\250\345\205\211\346\262\243/20251126-\346\255\243\345\210\231.md" deleted file mode 100644 index 81672576c0e356c9ee4d05e8c084d40266c879c3..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251126-\346\255\243\345\210\231.md" +++ /dev/null @@ -1,24 +0,0 @@ -## 正则表达 -## 一、创建正则 -1. **字面量方式**:`/pattern/flags` - 例:`const reg = /abc/g;` -2. **构造函数方式**:`new RegExp(pattern, flags)` - 例:`const reg = new RegExp('abc', 'g');` - -## 二、修饰符(flags) -- `g`:全局匹配(不匹配一次就停止) -- `i`:忽略大小写 -- `m`:多行模式(`^`/`$`匹配每行开头/结尾) -- `s`:dotAll模式(`.`匹配换行符`\n`) -- `u`:Unicode模式(支持UTF-16字符,如`\u{1F600}`) -- `y`:粘连模式(从lastIndex位置开始匹配) - -## 三、核心元字符 -### 字符类 -- `.`:匹配除换行符外的任意字符(`s`修饰符可匹配换行) -- `[abc]`:匹配a/b/c中任意一个 -- `[^abc]`:匹配非a/b/c的字符 -- `[a-z]`:匹配小写字母,`[0-9]`匹配数字 -- `\d`:数字(等价`[0-9]`),`\D`:非数字 -- `\w`:字母/数字/下划线(等价`[a-zA-Z0-9_]`),`\W`:非单词字符 -- `\s`:空白符(空格/制表符/换行等),`\S`:非空白符 \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251127-\345\274\202\345\270\270.md" "b/\346\235\250\345\205\211\346\262\243/20251127-\345\274\202\345\270\270.md" deleted file mode 100644 index e39034593594c882cd98c6308aa8985aad977d5a..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251127-\345\274\202\345\270\270.md" +++ /dev/null @@ -1,114 +0,0 @@ -# 异常 -## 一、基本概念 -异常(Error):程序执行过程中出现的**非正常情况**(如语法错误、类型错误、逻辑错误等),会中断代码默认执行流程。 - - -## 二、核心语法 -### 1. try-catch-finally -捕获并处理异常,保证代码执行连续性: -```js -try { - // 可能抛出异常的代码 - riskyOperation(); -} catch (error) { - // 异常处理逻辑 - console.error('错误信息:', error.message); -} finally { - // 无论是否异常,始终执行(如释放资源) - console.log('最终执行'); -} -``` -- `try`:包裹可疑代码,触发异常后立即跳转到`catch` -- `catch`:接收异常对象(包含`message`/`stack`等属性),处理错误 -- `finally`:可选,**必须执行**(即使`try`/`catch`中有`return`) - -# 练习 -## 训练一 -```js - -``` -## 训练二 -```js - -``` -## 综练一 -```js -
      -

      输入1~5的数字:

      - -
      - -
      - -``` -## 综练二 -```js -
      - -
      - -
      - -
      - -``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251128-\350\241\250\345\215\225.md" "b/\346\235\250\345\205\211\346\262\243/20251128-\350\241\250\345\215\225.md" deleted file mode 100644 index 3ddefa9a954ac9d0d46b22463ee3849bedc10152..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251128-\350\241\250\345\215\225.md" +++ /dev/null @@ -1,101 +0,0 @@ -# 笔记 - -## 一、基本概念 -事件:用户/浏览器对文档或元素的**交互行为**(如点击、输入、加载),是JS实现交互的核心机制。 - - -## 二、事件绑定方式 -### 1. HTML 内联绑定(不推荐) -直接在HTML标签中写事件处理代码,耦合度高: -```html - -``` - -### 2. DOM 属性绑定 -通过DOM元素属性赋值,简单但不支持多处理器: -```js -const btn = document.querySelector('button'); -btn.onclick = function() { - console.log('点击事件触发'); -}; -// 覆盖前一个事件 -btn.onclick = () => console.log('新的点击事件'); -``` - -### 3. 事件监听器(推荐) -`addEventListener(type, handler, options)`:支持绑定多个事件处理器,更灵活: -```js -const btn = document.querySelector('button'); -// 绑定事件 -btn.addEventListener('click', () => console.log('点击1')); -btn.addEventListener('click', () => console.log('点击2')); // 可共存 - -// 第三个参数:{ capture: 捕获阶段触发, once: 只触发一次, passive: 禁止preventDefault } -btn.addEventListener('click', handler, { once: true }); // 仅触发一次 -``` - - -## 三、事件对象(Event) -事件触发时自动传入处理器的参数,包含事件相关信息: -```js -element.addEventListener('click', (e) => { - e.target; // 触发事件的目标元素(实际点击的元素) - e.currentTarget; // 绑定事件的元素(this) - e.type; // 事件类型(如'click') - e.clientX/e.clientY; // 鼠标相对于视口的坐标 - e.preventDefault(); // 阻止默认行为(如a标签跳转、表单提交) - e.stopPropagation(); // 阻止事件冒泡/捕获 -}); -``` - - -## 四、事件流(冒泡与捕获) -事件在DOM树中的传播过程,分三个阶段: -1. **捕获阶段**:从window→document→目标元素的父级→目标元素(`capture: true`时触发) -2. **目标阶段**:事件到达目标元素 -3. **冒泡阶段**:从目标元素→父级→document→window(默认触发阶段) - -```js -// 捕获阶段触发 -parent.addEventListener('click', () => console.log('父元素捕获'), { capture: true }); -// 冒泡阶段触发(默认) -parent.addEventListener('click', () => console.log('父元素冒泡')); -``` - - -## 五、事件委托(事件代理) -利用事件冒泡,将子元素事件绑定到父元素,减少事件绑定数量,支持动态元素: -```js -// 父元素ul代理li的点击事件 -const ul = document.querySelector('ul'); -ul.addEventListener('click', (e) => { - if (e.target.tagName === 'LI') { // 判断目标元素 - console.log('点击了li:', e.target.textContent); - } -}); -``` - - -## 六、常见事件类型 -### 1. 鼠标事件 -- `click`:点击(左键) -- `dblclick`:双击 -- `mousedown/mouseup`:鼠标按下/松开 -- `mouseover/mouseout`:鼠标移入/移出(含子元素) -- `mouseenter/mouseleave`:鼠标移入/移出(不含子元素,无冒泡) - -### 2. 键盘事件 -- `keydown/keyup`:键盘按下/松开 -- `keypress`:字符键按下(已废弃) - -### 3. 表单事件 -- `submit`:表单提交 -- `change`:表单元素值改变(失焦后触发) -- `input`:输入实时触发 -- `focus/blur`:获取/失去焦点 - -### 4. 文档/窗口事件 -- `load`:页面/资源加载完成 -- `DOMContentLoaded`:DOM解析完成(无需等待资源) -- `resize`:窗口大小改变 -- `scroll`:页面滚动 \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251201-\346\226\207\346\241\243\345\257\271\350\261\241.md" "b/\346\235\250\345\205\211\346\262\243/20251201-\346\226\207\346\241\243\345\257\271\350\261\241.md" deleted file mode 100644 index 7a0f67f3e11e5d18524e8950d04548a79e67b878..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251201-\346\226\207\346\241\243\345\257\271\350\261\241.md" +++ /dev/null @@ -1,40 +0,0 @@ -# JavaScript Document 笔记 -## 核心属性 -- document.title:获取/设置文档标题 -- document.URL:获取当前文档 URL -- document.domain:获取/设置域名 -- document.body:获取文档主体元素 -- document.readyState:文档加载状态("loading"、"interactive"、"complete") -## 查找元素方法 -- document.getElementById(id):通过 ID 查找元素 -- document.querySelector(selector):通过 CSS 选择器查找单个元素 -- document.querySelectorAll(selector):通过 CSS 选择器查找所有匹配元素 -## 创建和操作元素 -- document.createElement(tagName):创建元素节点 -- document.appendChild(node):添加子节点 -- document.removeChild(node):移除子节点 -- document.replaceChild(newNode, oldNode):替换子节点 -## 事件监听 -- DOMContentLoaded:文档解析完成事件 -- load:页面完全加载事件 -- addEventListener(event, handler):添加事件监听器 -## 示例代码 -```js - -// 创建元素 -const newDiv = document.createElement("div"); -newDiv.textContent = "新元素"; -document.body.appendChild(newDiv); - -// 查找元素 -const element = document.getElementById("myElement"); -element.style.color = "red"; - -// 事件监听 -document.addEventListener("DOMContentLoaded", () => { - console.log("文档加载完成"); -}); - -``` - - diff --git "a/\346\235\250\345\205\211\346\262\243/20251203-Document\345\257\271\350\261\241.md" "b/\346\235\250\345\205\211\346\262\243/20251203-Document\345\257\271\350\261\241.md" deleted file mode 100644 index f6160c2d23e9cb1c9c2c50ea1ecb1451677cdb80..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251203-Document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,194 +0,0 @@ -# JavaScript Document 对象精华笔记 -## 一、核心属性 -- document.title:获取/设置文档标题 -- document.URL:获取当前文档 URL -- document.domain:获取/设置域名 -- document.body:获取文档主体元素 -- document.readyState:文档加载状态("loading"、"interactive"、"complete") -## 二、查找元素方法 -- document.getElementById(id):通过 ID 查找元素 -- ocument.querySelector(selector):通过 CSS 选择器查找单个元素 -- document.querySelectorAll(selector):通过 CSS 选择器查找所有匹配元素 -## 三、创建和操作元素 -- document.createElement(tagName):创建元素节点 -- document.appendChild(node):添加子节点 -- document.removeChild(node):移除子节点 -- document.replaceChild(newNode, oldNode):替换子节点 -## 四、事件监听 -- DOMContentLoaded:文档解析完成事件 -- load:页面完全加载事件 -- addEventListener(event, handler):添加事件监听器 -## 五、示例代码 -```js - -// 创建元素 -const newDiv = document.createElement("div"); -newDiv.textContent = "新元素"; -document.body.appendChild(newDiv); - -// 查找元素 -const element = document.getElementById("myElement"); -element.style.color = "red"; - -// 事件监听 -document.addEventListener("DOMContentLoaded", () => { - console.log("文档加载完成"); -}); - -``` - - -## 作业 -第一题 -```bash - - - - - - Document - - -

      郑伟杰

      - - - -``` -第二题 -```BASH - - - - - - Document - - - - - -``` -第三题 -```bash - - - - - - - Document - - - -
      李春涛是我同桌 -
      - - - - - -``` -第四题 -```bash - - - - - - - Document - - - - -
      -

      李白《行路男》

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -
      - - - - -``` -第五题 -```bash - - - - - - Document - - - 打开图片对话框 - - - -``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251204-DOM.md" "b/\346\235\250\345\205\211\346\262\243/20251204-DOM.md" deleted file mode 100644 index e1d31cb4a1a769b374fc9dd713b0f40253275d8e..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251204-DOM.md" +++ /dev/null @@ -1,57 +0,0 @@ -# JavaScript DOM 笔记 -## 标准属性(id、class、src 等) -javascript -运行 -const img = document.querySelector('img'); -// 获取属性 -console.log(img.src); -console.log(img.alt); -// 设置属性 -img.src = 'new.jpg'; -img.alt = '新图片'; -// 移除属性 - - -## 作业 -第一题 -```bash - - - - - - - Document - - - - - - -
      - - - - -``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251205-Window\345\257\271\350\261\241.md" "b/\346\235\250\345\205\211\346\262\243/20251205-Window\345\257\271\350\261\241.md" deleted file mode 100644 index d1ab67ce64562f1468dbf24e8359ac613d826a7f..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251205-Window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,40 +0,0 @@ -# JavaScript Window 对象精华笔记 -## 核心属性 -- window.location:获取/设置当前页面的 URL -- window.document:获取文档对象 -- window.innerWidth/outerWidth:获取窗口内部/外部宽度 -- window.innerHeight/outerHeight:获取窗口内部/外部高度 -- window.navigator:获取浏览器信息 -## 方法 -- window.open(url, target):打开新窗口/标签页 -- window.close():关闭当前窗口 -- window.alert(message):显示警告框 -- window.confirm(message):显示确认框 -- window.prompt(message, defaultValue):显示输入框 -- window.setTimeout(function, delay):延迟执行函数 -- window.setInterval(function, interval):周期执行函数 -- window.clearTimeout(timeoutId):取消延迟执行 -- window.clearInterval(intervalId):取消周期执行 -## 事件 -- load:页面完全加载事件 -- unload:页面卸载事件 -- resize:窗口大小改变事件 -- scroll:滚动事件 -## 示例代码 -```js - -// 打开新窗口 -window.open("https://example.com", "_blank"); - -// 显示警告框 -window.alert("这是一个警告框"); - -// 延迟执行函数 -const timeoutId = window.setTimeout(() => { - console.log("延迟执行"); -}, 2000); - -// 取消延迟执行 -window.clearTimeout(timeoutId); - -``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213\347\254\224\350\256\260.md" "b/\346\235\250\345\205\211\346\262\243/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213\347\254\224\350\256\260.md" deleted file mode 100644 index 6161dd3099b6304fa74b0f2cc669a1ba2dfa9265..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213\347\254\224\350\256\260.md" +++ /dev/null @@ -1,101 +0,0 @@ -# JavaScript 浏览器对象模型(BOM) 精简笔记 -## 一、核心概念 -BOM(Browser Object Model):浏览器对象模型,无统一官方标准,用于操作浏览器窗口及组件,核心是 `window` 对象。 -`window` 是浏览器的全局对象,所有 BOM 特性均挂载其上,全局变量/函数会自动成为 `window` 的属性/方法。 - -## 二、核心对象 -### 1. window(顶层对象) -#### (1)尺寸相关 -```js -// 视口尺寸(不含滚动条) -window.innerWidth / window.innerHeight -// 窗口整体尺寸(含浏览器边框) -window.outerWidth / window.outerHeight -``` -### (2)窗口操作 -```js -// 打开新窗口(慎用,易被浏览器拦截) -window.open(url, name, features) -// 关闭当前窗口 -window.close() -// 窗口滚动 -window.scrollTo(x, y) // 绝对滚动到指定坐标 -window.scrollBy(x, y) // 相对当前位置滚动 -``` -### (3)定时器 -```js -// 一次性定时器(延迟执行) -let timer1 = setTimeout(() => {}, 1000) // 1秒后执行 -clearTimeout(timer1) // 清除未执行的定时器 - -// 周期性定时器(重复执行) -let timer2 = setInterval(() => {}, 1000) // 每1秒执行一次 -clearInterval(timer2) // 清除周期性定时器 - -// ES6+ 精准动画定时器 -let timer3 = requestAnimationFrame(callback) -cancelAnimationFrame(timer3) // 清除动画定时器 -``` -### 2. location(地址栏对象) -#### (1)核心属性 -| 属性 | 说明 | 示例 | -|------------|-------------------------------|-------------------------------------------| -| href | 完整 URL(可修改实现跳转)| location.href = 'https://www.baidu.com' | -| protocol | 网络协议(http/https 等)| location.protocol | -| host | 域名 + 端口号 | location.host | -| pathname | URL 路径部分 | location.pathname | -| search | 查询参数(? 开头)| location.search | -| hash | 哈希值(# 开头,锚点)| location.hash | - -### (2)核心方法 -```js -location.reload() // 刷新页面(传true:强制刷新,不走缓存) -location.assign(url) // 跳转新页面(可通过浏览器后退返回原页面) -location.replace(url) // 替换当前页面(无法后退返回原页面) -``` -### 3. history(历史记录对象) -```js -history.back() // 后退一页(等同于点击浏览器后退按钮) -history.forward() // 前进一页(等同于点击浏览器前进按钮) -history.go(n) // 跳转指定步数(n=1前进,n=-1后退,n=0刷新) -history.pushState(state, title, url) // 添加历史记录(不刷新页面) -history.replaceState(state, title, url) // 替换当前历史记录(不刷新) -``` - -### 4. navigator(浏览器信息对象) -常用属性: -```js -navigator.userAgent // 浏览器UA字符串(用于判断浏览器/设备类型) -navigator.language // 浏览器默认语言(如zh-CN、en-US) -navigator.onLine // 网络连接状态(true=在线,false=离线) -``` -### 5. screen(屏幕信息对象) -````js -screen.width / screen.height // 设备屏幕总分辨率 -screen.availWidth / screen.availHeight // 屏幕可用分辨率(不含任务栏/状态栏) -```` - -## 三、常用 BOM 事件 -```js -// 窗口加载完成(DOM结构+所有资源加载完毕) -window.onload = () => { - console.log('页面完全加载') -} - -// 窗口尺寸变化时触发 -window.onresize = () => { - console.log('窗口尺寸改变:', window.innerWidth) -} - -// 窗口滚动时触发 -window.onscroll = () => { - console.log('页面滚动了') -} - -// 页面即将离开(关闭/刷新/跳转)时触发 -window.onbeforeunload = (e) => { - e.preventDefault() - e.returnValue = '' // 触发浏览器离开确认提示 - return '' -} -``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251210-Style\345\257\271\350\261\241.md" "b/\346\235\250\345\205\211\346\262\243/20251210-Style\345\257\271\350\261\241.md" deleted file mode 100644 index dd4b17c8c7b99facabce032b7af95d6939e56115..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251210-Style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,252 +0,0 @@ -# JavaScript Style 对象笔记 - -## 一、Style 对象核心概述 -- Style 对象是 JavaScript 操作 DOM 元素内联样式的核心接口,对应元素的 style 属性,仅控制内联样式`(
      )`,而非外部样式表或 ` - - - 1 - 2 - 3 - - -``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251211-From\345\257\271\350\261\241.md" "b/\346\235\250\345\205\211\346\262\243/20251211-From\345\257\271\350\261\241.md" deleted file mode 100644 index bd4c0e38cd4517bd3675d15c8c2533e512f04b97..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251211-From\345\257\271\350\261\241.md" +++ /dev/null @@ -1,232 +0,0 @@ -# 笔记 -## 验证 -### 1. 提交控制 -- 手动提交:`form.submit()`(不触发 `onsubmit`); -- 阻止默认提交:`e.preventDefault()`(异步提交必用); -- 推荐方式:监听 `submit` 事件,自定义逻辑后异步提交。 - -### 2. 验证 -- 原生验证:`form.checkValidity()`(校验返回布尔)、`form.reportValidity()`(校验+弹窗提示); -- 自定义验证:控件 `setCustomValidity('错误提示')`(清空需设空字符串)。 - -## 五、FormData 关键(异步提交) -1. 快速收集表单数据:`new FormData(form)`(自动含所有控件值,支持文件); -2. 可手动追加:`formData.append('key', '值')`; -3. 异步提交:`fetch`/`axios` 中直接作为 `body`,自动处理编码。 - -## 六、核心坑点 -1. 单选/复选框同名需遍历集合找 `checked=true` 的值,不可直接取 `value`; -2. `form.submit()` 不触发 `onsubmit` 事件,验证需监听 `submit` 事件; -3. 文件输入框 `value` 只读,仅能用户操作; -4. 下拉框直接设 `select.value` 即可选中,无需遍历 option(特殊场景除外)。 - -# 作业 - -## 1 -```js -输入兑换码:
      - -
      - - -``` -## 2 -```js - - - - - - -``` - -## 3 -```js - -

      选择课程(最多选6门)

      - 语文
      - 数学
      - 英语
      - 物理
      - 化学
      - 生物
      - 历史
      - 地理
      - - -``` -## 4 - -```js - - -

      选择题:2024年奥运会举办城市是?

      - - A. 罗马
      - B. 北京
      - C. 巴黎
      - D. 伦敦
      - - - - - -``` - -## 5 -```js - -

      选择兴趣爱好

      - - 阅读
      - 运动
      - 听歌
      - 编程
      - 旅游
      - - - - - - - - - -``` - - -## 6 -```js - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251212-API.md" "b/\346\235\250\345\205\211\346\262\243/20251212-API.md" deleted file mode 100644 index 020754dcf2c205bdd9781ddae53ae9ac17788518..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251212-API.md" +++ /dev/null @@ -1,18 +0,0 @@ -# JS 核心知识点笔记(JSON + Fetch API) -## 一、JSON -### 1. 核心概念 -JSON(JavaScript Object Notation):轻量级数据交换格式,跨语言、易读易解析,是前后端数据交互的主流格式。 - -### 2. 核心方法(必记) -| 方法 | 作用 | 示例 | -|------|------|------| -| `JSON.parse()` | 把JSON字符串 → JS对象/数组(处理后端返回数据) | `const obj = JSON.parse('{"name":"张三","age":20}')` | -| `JSON.stringify()` | 把JS对象/数组 → JSON字符串(向后端发送数据) | `const str = JSON.stringify({name:"张三",age:20})` | - -### 3. 关键注意点 -- 键名必须用**双引号**包裹(单引号/无引号均无效); -- 不支持函数、undefined 类型(序列化时会被忽略)。 - -## 二、Fetch API -### 1. 核心概念 -现代浏览器原生异步网络请求接口,替代传统 XMLHttpRequest,基于 Promise 实现,语法更简洁。 diff --git "a/\346\235\250\345\205\211\346\262\243/20251215-\347\254\224\350\256\260.md" "b/\346\235\250\345\205\211\346\262\243/20251215-\347\254\224\350\256\260.md" deleted file mode 100644 index 6e6c7cd29c6c7e814817a3e222547d7f149cd373..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251215-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,28 +0,0 @@ -## jQuery基础 -### jQuery 基础 - - 是一个js库,为了方便dom操作 - - 和js的引用一样,建议在body结束标签之前引用 - - 使用$来使用jQuery库的能力,$符号实际是一个方法,当然方法在- js中也是一个对象,所以其也有一些属性可以使用 - - jquery获取到的是jQuery,和原生js拿到的dom对象不同,但它们间可以相互转换 - - let div=$('div')拿到jquery对象 - - div[0]拿到dom对象 - - $(div[0])又可以重新转换为jquery对象 -### jQuery 选择器与操作 - - 基础选择器 - - 标签选择器 - - 类名选择器 - - id选择器 - - 关系选择器 - - 子代选择器 - - 直接子代选择器 > - - 兄弟选择器 ~ - - 相邻兄弟选择器 + - - 高级选择器 - - 属性选择器 - - 伪类选择器 -### 伪元素选择器 - - jQuery 事件处理 - - jQuery对象.on('click',function(){}) - - jQuery对象.click(function(){}) - - jQuery对象.trigger('click',function(){}) - - $(function(){}) \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251217-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225.md" "b/\346\235\250\345\205\211\346\262\243/20251217-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225.md" deleted file mode 100644 index e87002d5c3620a8f5286add4266d33f96e250e19..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251217-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204\345\217\212\347\224\250\346\263\225.md" +++ /dev/null @@ -1,26 +0,0 @@ -## 核心数据结构及用法 -### 数组 - - 改变数组本身的方法 - - sort 排序,接受一个比较器 - - push pop 从尾部添加、删除 - - unshift shift 从头部添加、删除 - - splice 万能方法 删除元素、添加元素、修改元素 - - reverse 倒置 - - fill 填充 - - 不改变数组本身的方法 - - concat 拼接数组 - - slice 截取 - - map 将一个函数用在数组的每一个元素上,并将处理后的结果放入新的数组 - - filter 将一个函数用在数组的每个元素上,如果这个元素运算的结果为true,则将元素放入新的数组,反之不放,最终得到新的数组 - - reduce 将一个函数用在数组的前2个元素上,计算后的结果作为同一个函数第一个参数和数组的第三元素作为第二参数进行运算 - - forEach 遍历 - - find 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素,否则最终返回undefined - - findIndex 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素下标,否则最终返回undefined - - every - - some - - includes - - indexOf - - lastIndexOf - - join -### 高阶函数 -一个函数f,接受另外一个函数作为其参数,则称函数f为高阶函数 \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251218-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204.md" "b/\346\235\250\345\205\211\346\262\243/20251218-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204.md" deleted file mode 100644 index 86c16cfa7e1abcb1909848986bbce44ad352e70d..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251218-\346\240\270\345\277\203\346\225\260\346\215\256\347\273\223\346\236\204.md" +++ /dev/null @@ -1,27 +0,0 @@ -## Javascript基础 - - 开发环境与初体验 - - 编辑器 - - 常用编辑器 - - 记事本 - - Sublime Text4 - - vim - - webstorm - - Trae - - HBuilderX - - DreamWeave - - 我们选用的编辑器 - - Visual Studio Code - - 变量、常量和基础数据类型 - - var let定义变量,请忘记var,后续只使用let - - const定义常量,常量名全大写 - - 数据类型 - - 基础数据类型 - - string - - number - - boolean - - underfined - - null - - 复合数据类型 - - 对象 - - 数组 - - 函数 \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251219-\350\277\220\347\256\227\347\254\246\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213\350\275\254\346\215\242.md" "b/\346\235\250\345\205\211\346\262\243/20251219-\350\277\220\347\256\227\347\254\246\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213\350\275\254\346\215\242.md" deleted file mode 100644 index 5247eb3d7d6f8efa5b90568e76aa8bd887d518cb..0000000000000000000000000000000000000000 --- "a/\346\235\250\345\205\211\346\262\243/20251219-\350\277\220\347\256\227\347\254\246\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213\350\275\254\346\215\242.md" +++ /dev/null @@ -1,19 +0,0 @@ -## 运算符和数据类型转换 - - / % - - 逻辑运算 - - null undefined 0 '' 这些字面量参与逻辑运算时,作为- - - - false,其余的值作为true - - 短路运算 true || 表达式 false && 表达式 - - 赋值运算 = += -+ ++ --等 - - parseInt parseFloat 乘1变数字 加空字符串变字符串 - - 流程控制 - - 判断 - - if - - if ... else - - if ... else if() - - if ... else if()... else - - switch - - 循环 - - for - - while - - do...while - - 三元运算 \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(1).gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(1).gif" deleted file mode 100644 index c9afa364ce3e23c767fd654e8c85ac38f1b63315..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(1).gif" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(2).gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(2).gif" deleted file mode 100644 index cd4ffeff234ea2d58fe07d211747544aaa43187f..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(2).gif" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1112.gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1112.gif" deleted file mode 100644 index 6fe6ef893c896e085ae6a6f6093b51a97c47ac9c..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1112.gif" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113 (2).gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113 (2).gif" deleted file mode 100644 index c929a74725e4b8dc421ca7591afcbbcf990d0a94..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113 (2).gif" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113.gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113.gif" deleted file mode 100644 index bd3633fa41397e66a753b16e3c4a4ef1dfb4c178..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113.gif" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1114.gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1114.gif" deleted file mode 100644 index 76560e467f6e54983feeeb437e32612cc81b83ea..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1114.gif" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251117.png" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251117.png" deleted file mode 100644 index ee072a0c052c13e1255745089f9bfe05b54cb25a..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251117.png" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (1).png" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (1).png" deleted file mode 100644 index 31e7e40e5dfb37bf7ea9a0f249cf83302742b925..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (1).png" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (2).png" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (2).png" deleted file mode 100644 index 803aef26d6a51fac14ccd45019ea2497e24e8ed9..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (2).png" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (3).png" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (3).png" deleted file mode 100644 index 62d06edaec8719be03c22c573464e0121ed625c1..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (3).png" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (4).png" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (4).png" deleted file mode 100644 index 62d06edaec8719be03c22c573464e0121ed625c1..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (4).png" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (5).png" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (5).png" deleted file mode 100644 index bb92fec72e3778dac20bf94e0dd0339256c0e9bc..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251119 (5).png" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251120 (1).gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251120 (1).gif" deleted file mode 100644 index 42364d256f356df0ad9f6dbfd44533ed87b59ecc..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251120 (1).gif" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251120 (2).gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251120 (2).gif" deleted file mode 100644 index 98e5b39354ee2deae9a119023a139f8edb429f2a..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251120 (2).gif" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251124 (1).gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251124 (1).gif" deleted file mode 100644 index 9839b4b30a3721e12716d3be78fcc6795787a9f8..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251124 (1).gif" and /dev/null differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251124 (2).gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251124 (2).gif" deleted file mode 100644 index 92311d9e7ee138384690979f53e766234224f12a..0000000000000000000000000000000000000000 Binary files "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/20251124 (2).gif" and /dev/null differ diff --git "a/\346\236\227\345\211\221\351\224\213/20251110-\344\275\234\344\270\232+\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251110-\344\275\234\344\270\232+\347\254\224\350\256\260.md" deleted file mode 100644 index afbd5e54ae340ff4f728506201d3764c8c5f3062..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251110-\344\275\234\344\270\232+\347\254\224\350\256\260.md" +++ /dev/null @@ -1,19 +0,0 @@ -![](./屏幕截图 2025-11-16 173644.png) -1.后端 - - C# asp.net core - - java springboot springcloud springmvc - - python Django - - - - - 输出老子的名言 - - - - - - \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251112-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251112-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 8c19ff01c84188491737f36d1b0d619a79d8f0b0..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251112-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,210 +0,0 @@ -##笔记 - - 转义字符让双引号单引号不混乱:"/'包含单引号内容" - - - -```html - - - - - Document - - - - - -``` - - - -```html - - - - - Document - - - - - -``` - - - - -```html - - - - - Document - - - - - -``` - - - - -```html - - - - - Document - - - - - -``` - - - -```html - - - - - Document - - - - - -``` - - - -```html - - - - - Document - - - - - -``` - - - - -```html - - - - - Document - - - - - -``` - - - -```html - - - - - Document - - - - - -``` - - - -```html - - - - - Document - - - - - -``` - - -```html - - - - - Document - - - - - -``` \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251113-\344\275\234\344\270\232+\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251113-\344\275\234\344\270\232+\347\254\224\350\256\260.md" deleted file mode 100644 index b088bbf12b3bc30cadcbcb915ac94be3df9fd39d..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251113-\344\275\234\344\270\232+\347\254\224\350\256\260.md" +++ /dev/null @@ -1,173 +0,0 @@ -##笔记 - - 表达式:一串数据间输出结果:5+3<3+8等 - - '' "" O null undefind都当成false去运算 -```html - - - - - Document - - - - - - - -``` - -```html - - - - - 判断身高质量指数 - - - - - -``` - - -```html - - - - - - Document - - - - - - - -``` - - - -```html - - - - - Document - - - - - - -``` - - - -```html - - - - - Document - - - - - -``` \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251114-\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251114-\344\275\234\344\270\232.md" deleted file mode 100644 index 3fb3af367b289e275effc53ab14426fa83364991..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251114-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,115 +0,0 @@ -##笔记 - -```html - - - - - Document - - - - - -``` - -```html - - - - - - Document - - - - - - - -``` - - -```html - - - - - Document - - - - - -``` - - - -```html - - - - - Document - - - - - -``` \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251117-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251117-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 1816b197125b5df123fb3ace5db90fed8fde06c2..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251117-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,52 +0,0 @@ -## 笔记 -### 判断 -- if -- if()...else... -- if...else if()... -- if...else if()...else -- switch...case - -## 第一题 -```html - - - - - Document - - - - - -``` - -##第二题 -```html - - - - - Document - - - - - -``` - diff --git "a/\346\236\227\345\211\221\351\224\213/20251119-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251119-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 1aa135789bd213d7b3316fae97f1c5166157df89..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251119-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,304 +0,0 @@ -## 练习 - - js中两大数据结构:对象和数组。 - - parseInt:参数值拿不到时可用于调试值,如:输出NaN说明该字符串不可转成数值(NaN不是数值) -##第一题 -```html - - - - - - Document - - - - - - - -``` - - -##第二题 -```html - - - - - - Document - - - - - - - - -##第三题 -```html - - - - - - Document - - - - - - - -``` - -##第四题 -```html - - - - - - Document - - - - - - - -``` - - -##第五题 -```html - - - - - - Document - - - - - - - -``` - -##第六题 -```html - - - - - - - Document - - - -
      - - - - -``` - -##综合一 -```html - - - - - - Document - - - - - - - -``` - -##综合二 -```html - - - - - - Document - - - - - - - -``` - -##综合三 -```html - - - - - - Document - - - - - - - - - - - - - - \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251120-\344\275\234\344\270\232+\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251120-\344\275\234\344\270\232+\347\254\224\350\256\260.md" deleted file mode 100644 index d5af0f22ba40eed4029b99b5271a6c38981156e8..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251120-\344\275\234\344\270\232+\347\254\224\350\256\260.md" +++ /dev/null @@ -1,149 +0,0 @@ -## 练习 - - ceil向上取整 - - floor向下取整 - - max(x,y,...) - - min(x,y) - - round()四舍五入 -## 训练一 -```html - - - - - - Document - - - -
      - - - - -``` -
      - -## 训练2 -```html - - - - - - Document - - - -
      - - - - -``` - - -## 训练3 -```html - - - - - - Document - - - - - - - -``` - -## 综合一 -```html - - - - - - Document - - - -

      请输入要生成随机数的位数:

      -
      - - -
      - - - - -``` - - -## 综合二 -```html - - - - - Document - - -

      周星星从出生到现在已度过了

      - - - diff --git "a/\346\236\227\345\211\221\351\224\213/20251121-\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251121-\347\254\224\350\256\260.md" deleted file mode 100644 index cc75a2d5e20b1fc27beecfb4c9f7a48cdd8337c4..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251121-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,6 +0,0 @@ -## 笔记 -// 升序 -numbers.sort((a, b) => a - b);//返回 负数(a - b < 0:a比b轻 ):a 排在 b 前面, - -// 降序 -numbers.sort((a, b) => b - a);//返回 正数(a比b重):a 排在 b 后面 \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251124-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251124-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 9d8b10a07268c614b3482cc9672ced7499751f21..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251124-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,320 +0,0 @@ -## 笔记 ---二维数组 -let m = new Map([ - ["key","value"], - ["key","value"] -]); -## 练习一 -```html - - - - - - Document - - - - - - - -``` -## 练习二 -```html - - - - - - Document - - - - - - - -``` -##练习三 -```html - - - - - - Document - - - - - - - -``` -## 综合一 -```html - - - - - - Document - - - - - - - -``` -## 综合二 -```html - - - - - - Document - - - - -
      - - - - -``` - -## 训练1 -```html - - - - - - Document - - - -
      - - - - -``` -## 训练2 -```html - - - - - - Document - - - -
      - - - - -``` - -##训练3 -```html - - - - - - Document - - - -
      - - - - -``` -##综合1 -```html - - - - - - Document - - - -
      - - -
      - - - - -``` - -##综合2 -```html - - - - - - Document - - - -
      -
      - -
      - - - - -``` -##综合3 -```html - - - - - Document - - -
      - - - \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251126-\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251126-\347\254\224\350\256\260.md" deleted file mode 100644 index 2d642c408c9b317084ae9316febeac1e7a2ab32a..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251126-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,6 +0,0 @@ -## 笔记 -1. exec():在字符串中执行查找匹配,返回一个数组或null。 -2. test():测试字符串是否匹配正则表达式,返回true或false。 -3. match():在字符串中执行查找匹配,返回一个数组或null。 -4. search():测试字符串中的匹配,返回匹配的位置索引或-1。 -5. replace():在字符串中执行查找匹配,并使用替换字符串替换匹配到的子字符串。 \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251127-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251127-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index e23ee3019aa6dee8c6203f7b94408c8ac6bb1331..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251127-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,124 +0,0 @@ -## 笔记 -//ms 异常信息:获取异常信息 -//Url URL:获取发生异常的文件绝对路径 -//Line 行号:给定发生异常文件的行号 -## 练习一 -```html - - - - - Document - - - - - -``` -## 练习二 -```html - - - - - Document - - - - - -``` -## 综合一 -```html - - - - - - Document - - - -
      -
      - - -
      - -
      - - - - -``` -## 综合二 -```html - - - - - - Document - - - -
      - 用户名: - -
      - 密码: - -
      - -
      - - - - \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251128-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251128-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 5e7a49ab7e21f1f2d9b1108da88c9f458e41ba96..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251128-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,308 +0,0 @@ -## 笔记 -//获得焦点 --- - -//失去焦点 --- -## 训练一 -```html -
      - - - - - - Document - - - - - - - - -
      - -``` -## 训练2 -```html -
      - - - - - - Document - - - -

      中国的“国球”是()

      -

      A.篮球 B.排球 C.乒乓球 D.羽毛球

      -

      - - - - -``` -
      -
      - -## 训练3 -```html - -``` -
      - - - - - - Document - - - -
      - - - - -
      -``` -## 训练4 -```html - - - - - Document - - -
      - - - -``` -## 训练5 -```html - - - - - Document - - -
      - - -
      - - - -``` -## 训练6 - - - - - Document - - - - - - - -``` -## 训练7 -```html - - - - - Document - - -
      - 账号:
      - 密码:
      -
      -
      - - - -``` -## 训练8 -```html - - - - - Document - - - - - -## 训练9 - - - - - - - - -

      拖动到矩形中

      -
      - - - -``` -## 综合一 -```html - - - - -实现文字变色和放大 - - - - -欢迎购买明日科技图书 - - -``` -## 综合二 -```html - - - - -模拟开灯和关灯的效果 - - - - - - - -``` -## 综合三 -```html - - - - -操作按钮的样式 - - - - - - - diff --git "a/\346\236\227\345\211\221\351\224\213/20251201-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251201-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 1e4bef09510f0007cac662aad655982a574d76c2..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251201-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,4 +0,0 @@ -## 笔记 - - // 拖拽过程中(移动时连续触发)drag - - // 拖拽结束(松开鼠标时)dragend - - // 进入放置区域dragenter \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251203-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251203-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 8baa70bae359d0ae7c65a8a69dcf6b9515144d04..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251203-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,178 +0,0 @@ -## 笔记 -## 学习内容 - - getElementById()返回指定ID对象 - - querySelector():它返回文档中与指定的css选择器匹配的第一个元素。如果没有找到匹配项,则返回null - - createEiement():根据指定名称创建元素 - - appendchild():将一个节点(元素)作为最后个子元素添加到别一个元素中 -## 训练一 -```html - - - - - - Document - - - - - - - - -``` -## 训练二 -```html - - - - - - Document - - - -
      - - - - -``` - -##训练三 -```html - - - - - - Document - - - -
      - -

      - - - - -``` -## 综合一 -```html - - - - - - Document - - - - - - - - -``` -## 综合二 -```html - - - - - Document - - - 打开图片对话框 -
      - - - -``` -## 综合三 -```html - - - - - - Document - - - - -

      - - - - -``` \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251204-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251204-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 64cc459cab0fb6ae4da0de391d089d768026e7cf..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251204-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,10 +0,0 @@ - ## 笔记 - - 增:创建 - - appendChild()--插入节点末尾 - - createElement() --创建标签 - - createTextNode() --添加文本 - - insertBefore()- 插入标签 - - cloneNode()-复制标签 - - 删: - - removeChild() - - 替换节点replaceChild() \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251205-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251205-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 4d605982103ed600f374072facf66ff5381cb192..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251205-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,350 +0,0 @@ -## 笔记 -## 学习内容 - - Window属性:document,location; - - 方法:alert-点击确定前,后续代码不执行。confirm(),prompt() -## 练习一 -```html - - - - - Document - - - - - - - - - -``` -## 练习二 -```html - - - - - Document - - -
      - - - - - -``` -## 练习三 -```html - - - - - Document - - - -

      最新电影资讯

      -
        -
      • 《金蝉脱壳》两大动作巨星联手
      • -
      • 《阿甘正传》励志而传奇的一生
      • -
      • 《爱乐之城》爱情与梦想的交汇
      • -
      • 《头号玩家》游戏梦想照进现实
      • -
      - 输入影片资讯编号: - - - - - -``` -## 练习四 -```html - - - - - - Document - - - -
      -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 芒果
      -
        -
      • 西瓜
      • -
      • 蜜橙
      • -
      • 萝卜
      -
      - - - - - -``` -## 练习五 -```html - - - - - Document - - -

      在《倚天屠龙记》中,张三丰是_____派的掌门?

      - - - - - - - - -
      - - - - -``` -## 练习六 -```html - - - - - Document - - - - - -``` -## 综合一 -```html - - - - -粗体字改为斜体字 - - - -
      一生只爱一个人
      -将粗体改为斜体 - - -``` -## 综合二 -```html - - - - -实现年、月、日的联动功能 - - - - -
      - - - -
      - - -``` -## 综合三 -```html - - - - -选择表情图片 - - - -
      - - -
      -
      - - - -``` \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251208-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251208-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 8d649fd9600100a7f932e13b18cfc4bf50a8abd1..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251208-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,291 +0,0 @@ -## 笔记 -1. **单样式**:`element.style.属性 = 值`(写)、`element.style.getPropertyValue('属性名')`(读行内); -2. **批量样式**:`element.style.cssText = "样式1; 样式2"`(覆盖原有行内样式,拼接可保留); -3. **移除样式**:`element.style.removeProperty('属性名')`。 -## 练习一 -```html -
      - - - - - Document - - - 账号: -
      - 密码: -
      - - - - - -``` -## 练习二 -```html - - - - - - Document - - - - 退出登录 - - - - -``` -## 练习三 -```html - - - - - Document - - - - - - -``` -## 练习四 -```html - - - - - Document - - - - - - -``` -## 练习五 -```html - - - - - Document - - - - - -``` -## 练习六 -```html -
      - - - - - - - Document - - - - - - - - - - - - -
      -``` -## 综合一 -```html - - - - - - Document - - - - - - - -``` -## 综合二 -```html - - - - - Document - - - - - -``` -## 综合三 -```html -
      - - - - - - Document - - - - -
      -
      -
      -
      -
      -
      -
      - - - - -
      diff --git "a/\346\236\227\345\211\221\351\224\213/20251210-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251210-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 5888e8b3fb57c48cdaea54a7cf36a3b0f83e6a8d..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251210-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,178 +0,0 @@ -## 笔记 - - 获取信息:`document.URL`(当前URL)、`document.title`(页面标题,可修改) - - 操作元素:`getElementById("id")`(通过ID找元素)、`document.body`(获取body元素) - - 修改样式:`document.body.style.backgroundColor = "black"` -## 练习一 -```html - - - - - - Document - - - - - - - - - -``` -## 练习二 -```html - - - - - Document - - - -
      - - - -``` -## 综合一 -```html - - - - - - Document - - - - -
      -
      HTML/CSS讨论区
      -
      JavaScript讨论区
      -
      C语言讨论区
      -
      Java讨论区
      -
      Android讨论区
      -
      Python讨论区
      -
      - - - - -``` -##综合二 -```html - - - - - Document - - - - 这个可以移动 - - - -``` \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251211-\344\275\234\344\270\232+\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251211-\344\275\234\344\270\232+\347\254\224\350\256\260.md" deleted file mode 100644 index 9326aea52e0b9a59c51a65f964f272bc8133a6c5..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251211-\344\275\234\344\270\232+\347\254\224\350\256\260.md" +++ /dev/null @@ -1,273 +0,0 @@ -## 笔记 -- 手动提交:`form.submit()`(不触发 `onsubmit`); -- 阻止默认提交:`e.preventDefault()`(异步提交必用); -- 推荐方式:监听 `submit` 事件,自定义逻辑后异步提交。 -## 练习一 -```html - - - - - Document - - - - - -``` -## 练习二 -```html - - - - - Document - - - - - - - - - -``` -## 练习三 -```html - - - - - - 请选择课程 - - - -

      请选择课程

      -
      - -
      - -
      - -
      - -
      - -
      - -
      - -
      - -
      - -
      - -
      -
      - - - - - -``` -## 综合一 -```html - - - - - Document - - -

      电影《变相怪杰》的主演是谁?

      - - - - - - - - -
      - - - - -``` -## 综合二 -```html - - - - - - Document - - - - - - - - - - - - - - -
      - - - - - - - -``` -## 综合三 -```html - - - - - Document - - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251212-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251212-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index d08402ef780fcd6296ff440b9c892f59b7f0f626..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251212-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,4 +0,0 @@ -1. 响应处理:Response 对象需手动解析(`json()`/`text()` 等),且解析操作是异步的; -2. 错误处理:仅网络错误/请求无法完成时触发 `catch`,HTTP 错误(404/500等)需通过 `response.ok` 判断; -3. Cookie 配置:默认不携带 Cookie,需手动配置 `credentials: 'include'`; -4. 请求中断:支持 `AbortController` 中断正在进行的请求。 \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251215-\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251215-\347\254\224\350\256\260.md" deleted file mode 100644 index bdc6b4e3eb20ec0b06d46b610818a9c6a5d7856f..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251215-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,7 +0,0 @@ -## 笔记 -### 层级选择器 -```javascript -$('parent child') // 后代元素 -$('parent > child') // 直接子元素 -$('prev + next') // 相邻兄弟 -$('prev ~ siblings') // 所有兄弟 \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251217-\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251217-\347\254\224\350\256\260.md" deleted file mode 100644 index 264fed754a62cc2d361e65a7e2240c7ea33b0800..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251217-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,22 +0,0 @@ -## 笔记 -// 类操作 -$('#el').addClass('active') // 添加类 -$('#el').removeClass('active') // 移除类 -$('#el').toggleClass('active') // 切换类 -$('#el').hasClass('active') // 判断类 -``` - -### 元素操作 -```javascript -// 创建元素 -const $newEl = $('
      新元素
      '); - -// 添加元素 -$('#parent').append($newEl) // 末尾添加 -$('#parent').prepend($newEl) // 开头添加 -$('#el').after($newEl) // 之后添加 -$('#el').before($newEl) // 之前添加 - -// 删除元素 -$('#el').remove() // 删除元素 -$('#el').empty() \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251218-\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251218-\347\254\224\350\256\260.md" deleted file mode 100644 index 4808798789223e378faaff9d928e305fa52180d7..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251218-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,11 +0,0 @@ -## 笔记 -// 滑动效果 -$('#el').slideDown(300) // 下滑显示 -$('#el').slideUp() // 上滑隐藏 -$('#el').slideToggle() // 切换滑动 - -// 淡入淡出 -$('#el').fadeIn() // 淡入 -$('#el').fadeOut() // 淡出 -$('#el').fadeToggle() // 切换淡入淡出 -$('#el').fadeTo(500, 0.5) // 淡到50%透明度 \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251219-\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251219-\347\254\224\350\256\260.md" deleted file mode 100644 index e71fc65273c06f9230648db1cf4232c945b97dc6..0000000000000000000000000000000000000000 --- "a/\346\236\227\345\211\221\351\224\213/20251219-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,17 +0,0 @@ -## 笔记 -### 流程控制 -```javascript -// 条件语句 -if (condition) { /* 代码块 */ } -else if (condition) { /* 代码块 */ } -else { /* 代码块 */ } - -// 循环语句 -for (let i = 0; i < 10; i++) { /* 代码块 */ } -while (condition) { /* 代码块 */ } -do { /* 代码块 */ } while (condition); - -// 分支语句 -switch (expression) { - case value1: /* 代码块 */; break; - default: /* 代码块 */;} \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/1.jpg" "b/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/1.jpg" deleted file mode 100644 index f7e83ae730ae383ffb547bff700823efbc4faab8..0000000000000000000000000000000000000000 Binary files "a/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/1.jpg" and /dev/null differ diff --git "a/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/2.jpg" "b/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/2.jpg" deleted file mode 100644 index ff9180f8423c2948e01b39b837a5a8636bc4fc58..0000000000000000000000000000000000000000 Binary files "a/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/2.jpg" and /dev/null differ diff --git "a/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/3.jpg" "b/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/3.jpg" deleted file mode 100644 index 5ab8ae7c2530276aceead8fe3f6a153a24b23769..0000000000000000000000000000000000000000 Binary files "a/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/3.jpg" and /dev/null differ diff --git "a/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/4.jpg" "b/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/4.jpg" deleted file mode 100644 index ba10ea210e3e223bb0abf33d5fc784388db1d523..0000000000000000000000000000000000000000 Binary files "a/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/4.jpg" and /dev/null differ diff --git "a/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/5.jpg" "b/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/5.jpg" deleted file mode 100644 index eec4e0be04c214fcfefa3dbdcc4b3e68cb480d95..0000000000000000000000000000000000000000 Binary files "a/\346\236\227\345\211\221\351\224\213/\347\205\247\347\211\207/5.jpg" and /dev/null differ diff --git "a/\346\257\233\351\221\253\347\216\211/20251110-JavaScript\345\237\272\347\241\200\350\257\255\346\263\225.md" "b/\346\257\233\351\221\253\347\216\211/20251110-JavaScript\345\237\272\347\241\200\350\257\255\346\263\225.md" deleted file mode 100644 index d71f549b96e65b702b82dc2c05448573dfba6782..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251110-JavaScript\345\237\272\347\241\200\350\257\255\346\263\225.md" +++ /dev/null @@ -1,93 +0,0 @@ -## 笔记 - -# 前端语言 - --HTML: 用于定义网页的结构和内容。 - --CSS: 用于设计网页的样式和布局。 - --JavaScript: 实现动态交互功能,是前端开发的核心语言。 - --TypeScript: JavaScript 的超集,增加了静态类型检查。 - --框架与库: 包括 React.js、Vue.js、Angular.js、jQuery 等,简化了前端开发流程。 - --移动端语言: 如 Swift 和 Kotlin,用于开发移动端应用的前端部分。 - - -# 后端语言 -后端语言用于处理服务器逻辑、数据库操作以及与前端的通信。 - -Python: 简单易学,常用于 Web 开发(如 Django 和 Flask 框架)。 - -Java: 跨平台语言,适合大型企业级应用开发。 - -PHP: 专注于 Web 开发,支持快速构建动态网站。 - -Ruby: 以 Ruby on Rails 框架闻名,适合快速开发。 - -Node.js: 基于 JavaScript 的后端运行时,适合高并发场景。 - -C#: 微软开发的语言,常用于 .NET 平台的后端开发。 - -Go: 谷歌推出的高性能语言,适合构建高并发的服务器应用。 - - -训练1 -```html - -``` -训练2 -```html - -``` -训练3 -```html - -``` - -训练4 -```html -

      个人信息

      - -``` - -综合练习1 -```html - -``` -综合练习2 -```html - - - -``` diff --git "a/\346\257\233\351\221\253\347\216\211/20251112-\346\225\260\345\200\274\347\261\273\345\236\213.md" "b/\346\257\233\351\221\253\347\216\211/20251112-\346\225\260\345\200\274\347\261\273\345\236\213.md" deleted file mode 100644 index 6a396cd6fd7a68e8168903feae229eb43100d0eb..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251112-\346\225\260\345\200\274\347\261\273\345\236\213.md" +++ /dev/null @@ -1,73 +0,0 @@ -## JavaScript基础 - -# 数据类型 - - 数值类 - - - 字符类型 - - - 布尔型 - - - 特殊数据类型 - -# 常量和变量 - - 常量:程序运行过程中保持不变的数据(数值型常量,true和false是布尔型常量等) - - - 变量:程序中已经命名的存储单元,主要作用是为数据操作提供存储信息的容器 - -# 运算符 - -算法运算符 - - -字符串运算符 - - -比较运算符 - - -赋值运算符 - - -逻辑运算符 - - -条件运算符 - - -其他运算符 - - -远算符的优先级和结合性 - - 综合训练1(第2章) - ```html - - ``` - - 综合训练2 - ```html - - ``` - - 综合训练3 - ```html - - ``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251113-\346\225\260\345\200\274\347\261\273\345\236\213.md" "b/\346\257\233\351\221\253\347\216\211/20251113-\346\225\260\345\200\274\347\261\273\345\236\213.md" deleted file mode 100644 index 7b2283f1cebc741b81ca85315af05daadbc6cdc5..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251113-\346\225\260\345\200\274\347\261\273\345\236\213.md" +++ /dev/null @@ -1,167 +0,0 @@ -## 运算符 -| 运算符类别 | 具体运算符 | 描述 | 示例 | -|------------------|---------------------|----------------------------------------------------------------------|---------------------------------------| -| **比较运算符** | `==` | 松散相等:仅比较值,忽略数据类型 | `5 == "5" → true`;`1 == true → true` | -| | `===` | 严格相等:同时比较值和数据类型(推荐使用) | `5 === "5" → false`;`1 === true → false` | -| | `!=` | 松散不相等:值不相等时返回 true(忽略类型) | `5 != "5" → false`;`1 != 2 → true` | -| | `!==` | 严格不相等:值或类型不同时返回 true | `5 !== "5" → true`;`1 !== 1 → false` | -| | `>` | 左侧值大于右侧值时返回 true | `10 > 5 → true`;`3 > 7 → false` | -| | `<` | 左侧值小于右侧值时返回 true | `2 < 6 → true`;`8 < 3 → false` | -| | `>=` | 左侧值大于或等于右侧值时返回 true | `5 >= 5 → true`;`4 >= 6 → false` | -| | `<=` | 左侧值小于或等于右侧值时返回 true | `3 <= 5 → true`;`7 <= 2 → false` | -| **赋值运算符** | `=` | 基础赋值:将右侧值赋给左侧变量 | `let a = 10;`(a 被赋值为 10) | -| | `+=` | 加法赋值:`a += b` 等价于 `a = a + b` | `let a = 3; a += 2;`(a 变为 5) | -| | `-=` | 减法赋值:`a -= b` 等价于 `a = a - b` | `let b = 8; b -= 3;`(b 变为 5) | -| | `*=` | 乘法赋值:`a *= b` 等价于 `a = a * b` | `let c = 2; c *= 4;`(c 变为 8) | -| | `/=` | 除法赋值:`a /= b` 等价于 `a = a / b` | `let d = 10; d /= 2;`(d 变为 5) | -| | `%=` | 取模赋值:`a %= b` 等价于 `a = a % b`(取余数) | `let e = 7; e %= 3;`(e 变为 1) | -| **三元运算符** | `condition ? expr1 : expr2` | 条件判断:若 condition 为 true,返回 expr1;否则返回 expr2(简化 if-else) | `let max = 5 > 3 ? 5 : 3;`(max 为 5) | -| | | 支持嵌套使用(多层条件判断) | `let level = score >= 90 ? "优秀" : score >= 60 ? "及格" : "不及格";` | - -训练5(第1章) -```html - -``` - -训练6 -```html - -``` - -训练7 -```html - -``` - -综合训练1(第3章) -```html - -``` - -综合训练2 -```html - -``` - -综合训练3 -```html - - - - -
      - -``` - -万达影城 -```html - - - - -``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\346\257\233\351\221\253\347\216\211/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" deleted file mode 100644 index 750b062e4565c4ec80a9ef675ec04360ca111a6c..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" +++ /dev/null @@ -1,130 +0,0 @@ -训练1 -```html - -``` - -训练2 -```html - -``` - -训练3 -```html - -``` - -训练4 -```html - -``` - -训练5 -```html - -``` - -训练6 -```html - -``` - -训练7 -```html - -``` - diff --git "a/\346\257\233\351\221\253\347\216\211/20251117-\345\207\275\346\225\260 .md" "b/\346\257\233\351\221\253\347\216\211/20251117-\345\207\275\346\225\260 .md" deleted file mode 100644 index 15184f678959b084abd37100f259825843993ffc..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251117-\345\207\275\346\225\260 .md" +++ /dev/null @@ -1,66 +0,0 @@ -## 函数笔记 - -function:在同一个页面下,函数名必须是唯一的,并且要区分大小写 - -Parameter:用于指定参数列表,当使用多个参数的时候,参数见必须用逗号隔开,一个函数最多可以包括225个函数 - -定义函数的格式 - - -function 自定义函数名 -(参数1,参数2) -{ - - 函数体 -} - -训练1 -```html - -``` - -训练2 -```html - -``` - -训练3 -```html - -``` - - -训练4 -```html - -``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251119-\345\214\277\345\220\215\345\207\275\346\225\260.md" "b/\346\257\233\351\221\253\347\216\211/20251119-\345\214\277\345\220\215\345\207\275\346\225\260.md" deleted file mode 100644 index 8c035cdf7e9fe99364a8ea5c0a2af70cfd7663cc..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251119-\345\214\277\345\220\215\345\207\275\346\225\260.md" +++ /dev/null @@ -1,178 +0,0 @@ -## 匿名函数 - -1.表达式定义匿名函数 - -let 变量名=function(参数1,参数2){ - 函数体 -}; - -2.使用function()构造定义匿名函数 - -let 变量名=new function("参数1","参数2" ,..."函数体"); - - -```关键代码`` - -训练5 -```html - -``` - -训练6 -```html - -``` - - -训练7 -```html - -``` - - -训练8 -```html - - -``` - -综合实践1 -```html - -``` - - -综合实践2 -```html - -``` - -综合实践3 -```html - -``` - - -数列 -```html - -``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251120-\345\257\271\350\261\241.md" "b/\346\257\233\351\221\253\347\216\211/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index eb26bf105332ef1f95074f3edc2bdcd9c5f3915a..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,96 +0,0 @@ -## 笔记 - -对象:变量和函数的集合,对象包含两个元素:属性和方法 - -内部对象:静态对象和动态对象 - -静态对象:引用静态对象的属性和方法的时候,不需要用new关键字创建对象实例,直接使用“对象名.成员”的方式来访问其属性和方法 - -动态对象:当引用动态对象的属性和方法的时候,必须用new关键词创建一个对象实例,然后才能使用“对象名.成员”的方式来访问其属性和方法 - -Math对象(静态对象):let 对象名:Math.属性(值1,值2); - -训练1 -```html - -``` - -训练2 -```html - -``` - -训练3 -```html - - -``` - -综合实践1 -```html - - - - 请输入要生成随机数的位数:

      -

      - - -
      - -``` - -综合实践2 -```html - -``` - -6.2 -```html - -``` - -6.3 -```html - -``` - -综合6.1 -```html - -``` - - -6.2 -```html - -``` - -7.2 -```html - -``` - -7.3 -```html - -``` - -综合7.1 -```html - -``` - -综合7.2 -```html - -``` - -综合7.3 -```html - -``` - -9.1 -```html - -``` - -综合9.1 -```html - ; - - ; - -``` - -综合9.2 -```html - -``` - -11.2 -```html - - - 中国的“国球”是() -
      - - - -
      - -
      -A. 篮球 B. 排球 C.乒乓球 D.羽毛球
      -    
      - - - - -``` - -11.3 -```html - - - - -``` - -11.4 -```html - - - - -``` - - -11.5 -```html - - - - - - - -``` - -11.6 -```html - - - - - - - - - - -``` - -11.7 -```html - -
      - 用户名 - -
      - 密码 - -
      - - -
      - - - -``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251201-\346\213\226\346\213\275.md" "b/\346\257\233\351\221\253\347\216\211/20251201-\346\213\226\346\213\275.md" deleted file mode 100644 index d61bd39acd4cf7d67985dbe3d4fcca400fcab162..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251201-\346\213\226\346\213\275.md" +++ /dev/null @@ -1,137 +0,0 @@ -## 拖拽笔记 -### 编辑事件 -#### 文本编辑事件 -- 文本编辑事件是对浏览器的内容进行复制、剪切、粘贴和选择时所触发的事件。 -1. 复制事件 -- 包括**onbeforecopy**(将网页内容复制到粘贴板)和**oncopy**(在网页复制内容) -- 注意:onbeforecopy、oncopy调用的是自定义函数,必须在函数名称前加return语句,否则都会允许复制。 - -2. 剪切事件 -- 包括**onbeforecut**(内容被剪切到系统剪贴板触发)和**oncut**(被选中的内容被选中时触发) -- 适用范围:仅作用于input、textarea等可编辑元素,普通静态文本无法触发 -- 不允许在 ``````显示任何标记(比如:"<"和">"符号,可用"<"和">"代替) -3. 粘贴事件 -- 包括**onbeforepaste**(粘贴到页面触发)和**onpaste**(内容被粘贴时触发) -- 仅作用于可编辑元素,粘贴目标需处于可输入状态 -- 用return语句返回true或false是无效的 -4. 选择事件 -- 包括**onbeforeselect**(开始对文本内容选择时触发)和**onselect**(文本内容被选择时触发) -#### 对象拖放事件 -1. 拖放对象事件 -- 拖放事件包括ondrag、ondragend和ondragstart事件 - - ondragstart 按住鼠标开始拖的一瞬间(只触发 1 次) - - ondrag 拖拽过程中一直触发(动一下就触发) - - ondragend 松开鼠标 / 取消拖拽的一瞬间(只触发 1 次) -2. 放置目标事件 -- 包括ondragenter、ondragover、ondragleave、ondrop - - ondragenter 拖的东西刚进目标区域的一瞬间 - - ondragover 拖的东西在目标区域里移动时,一直触发 - - ondragleave 拖的东西离开目标区域的一瞬间 - - ondrop 松开鼠标,把东西放到目标上的一瞬间 - -11.8 -```html - ondragover 某个对象被拖拽到另一个容器时触发 ondragleave 拖拽对象离开容器时触发 ondrop 对象在被拖拽过程释放鼠标触发 -``` - -练习9 -```js - - - - -
      -
      - -
      -
      -
      - - -``` - -#### 综合练习1 -```js - - 欢迎购买明日科技图书 - - - -``` - -#### 综合练习2 -```js - - - - - -``` - - -#### 综合练习3 -```js - - - - - -``` diff --git "a/\346\257\233\351\221\253\347\216\211/20251203-\346\226\207\346\241\243\345\257\271\350\261\241.md" "b/\346\257\233\351\221\253\347\216\211/20251203-\346\226\207\346\241\243\345\257\271\350\261\241.md" deleted file mode 100644 index 2472578505b75c34c1d9ec77dd37407d52fffd49..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251203-\346\226\207\346\241\243\345\257\271\350\261\241.md" +++ /dev/null @@ -1,236 +0,0 @@ -## ## Doucment对象 -### 常用属性 - -|属性|方法| -|---|---| -|body|提供对元素的直接访问| -cookie|获取或设置与当前文档有关的所有cookie -domain|获取当前文档的域名 -lastModified|获取文档最后修改的日期和时间 -referrer|获取载入当前文档的URL -title|获取或设置当前文档的标题 -URL|获取当前文档的URL - -### 常用方法 -|方法|说明| -|---|---| -close|关闭当前用Document.open()方法打开的输入流 -getElementById()|返回指定id对象 -getElementByName()|返回带有指定名称的对象集合 -getElementByTagName()|返回带有指定标签名的对象集合 -open()|打开一个文档输入流并接收write()和writeln()方法创建页面内容 -write()|向文档写入HTML或js语句 -writeln()|向文档写入HTML或js语句,并以换行符写入 -createElement|创建一个HTML标记 - - -### 设置文档背景色和前景色 -style.backgroundColer - -style.color - -### 设置延迟时间 -setTiemout("title",1000) - - -### 获取当前文档状态 -状态值|说明 -uninitialized|还未开始载入 -loading|文档正在加载 -interactive|已加载,用户可以和文档进行交互 -complete|载入完成 - - -训练1 -```html - - 123 - - -``` - -训练2 -```html - - - -``` - -训练3 -```html - - - -
      - -
      -

      - - -``` - -综合1 -```html - - - - -
      - -
      -
      - 李白《行路难•其一》 -
      -
      - 金樽清酒斗十千,玉盘珍羞直万钱。 - 停杯投箸不能食,拔剑四顾心茫然。 - 欲渡黄河冰塞川,将登太行雪满山。 - 闲来垂钓碧溪上,忽复乘舟梦日边。 - 行路难!行路难!多歧路,今安在? - 长风破浪会有时,直挂云帆济沧海。 -
      - - -``` - -综合2 -```html - - - 超链接 -
      - - -
      - - - -``` - -综合3 -```html - - - - - - -
      - - - -``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\346\257\233\351\221\253\347\216\211/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index e1f4e15ecf77a5cf530ca12a3ecbb9169c7831b0..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,351 +0,0 @@ -### 文档对象模型 - 获取DOM元素。--返回集合或单个元素 - -getElementById()-给Id用 -getElementsByClassName() -给class用(通过类名) -getElementsByTagName() -给标签用 -querySelector() -给class选择器用(通过.类名) -querySelectorAll() -给class选择器用 - -处理DOM节点的方法 - -appendChild()--插入节点末尾 -createElement() --创建标签 -createTextNode() --添加文本 -insertBefore()- 插入标签 -cloneNode()-复制标签 -删: -removeChild() -替换节点replaceChild() - -训练1 -```html - - - 添加 -
      - - - -``` - -训练2 -```html -

      请输入这首歌的歌名:

      - - 提交 -
      - -``` - -训练3 -```html - -
        -
      • 1.《金蝉脱壳》两大动作巨星联手
      • -
      • 2.《阿甘正传》励志而传奇的一生
      • -
      • 3.《爱尔兰梦》爱情与梦想的交织
      • -
      • 4.《头号玩家》游戏梦想照进现实
      • -
      -

      输入影片资讯编号:

      - -``` - - -训练4 -```html -
      -

      蔬菜:

      -
        -
      • 番茄
      • -
      • 黄瓜
      • -
      • 土豆
      • -
      • 香蕉
      • -
      -
      -
      -

      水果:

      -
        -
      • 草莓
      • -
      • 橙子
      • -
      • 葡萄
      • -
      • 香蕉
      • -
      -
      - - -``` - -训练5 -```html -

      在《倚天屠龙记》中,张三丰是______派的掌门?

      - A 少林
      - B 武当
      - C 峨眉
      - D 昆仑
      - -
      - - -``` - - -训练6 -```html - 百度一下

      - - -``` - - -训练7 -```html - - -
      - -``` - -训练1 -```html -

      综合练习1:将粗体字改为斜体字

      -

      一生只爱一个人,一世只怀一种愁。

      - - -``` - - -训练2 -```html - - - - -``` - -训练3 -```html - -
      😊
      - -``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251205-Windows\345\257\271\350\261\241.md" "b/\346\257\233\351\221\253\347\216\211/20251205-Windows\345\257\271\350\261\241.md" deleted file mode 100644 index 9d78f72b0d8a0af013fa141ff5514a4ae451d4a6..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251205-Windows\345\257\271\350\261\241.md" +++ /dev/null @@ -1,253 +0,0 @@ -## 与DHTML和innerText属性 -1. innerHTML属性 - - 可以为指定文本替换元素的内容 - -2. innerText属性 - - 只能声明文本 - -3. outerHTML属性 - - 对元素本身进行修改 - -4. outerText属性 - - 只能修改文本 - -### Window对象 - -1. 对话框 - -- 警告对话框 - - alert('提示文本'); - - 弹出提示框,仅 “确定” 按钮 - - 无返回值;阻塞代码执行,直到点击确定 - -- 确认对话框 - - let res = confirm('确认文本'); - - 弹出确认框(确定 / 取消) - - 点击 “确定” 返回 true,“取消” 返回 false;常用作操作确认(如删除) -- 提示对话框 - - let res = prompt('提示文本', '默认值'); - - 弹出输入框(确定 / 取消) - - 点击 “确定” 返回输入内容(字符串),“取消” 返回 null;可获取用户输入 -2. 窗口的关闭和打开 - -(1). 打开窗口 - -- 语法:let newWin = window.open('URL', '窗口名', '参数'); -- 核心参数: - - URL:要打开的页面地址(空字符串打开空白页); - - - 窗口名:自定义名称(或_blank新窗口 /_self当前窗口); - - - 可选参数:width=500,height=300,top=100,left=100(设置窗口大小 / 位置)。 - - - -### 训练1 -```js - - - - - - - - - -``` -### 训练2 -```js - - 退出登录 - - - -``` -### 训练3 -```js - - 点击打开图片的详情页面 -
      - - - - -``` -### 训练4 -```js - - -``` -### 训练5 -```js - - -``` -### 训练6 -```js - - - - - - -``` -### 综合练习1 -```js - - -v -``` -### 综合练习2 -```js - - - - -
      - -
      - - - -``` -### 综合练习3 -```js - -
      - - - -``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\346\257\233\351\221\253\347\216\211/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 2dd3c62261bad90c658e6527966f55782175fbbd..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,55 +0,0 @@ -## 浏览器对象模型 - -### location对象 - - 作用:用于跳转或者重新加载页面 - - assign():用于跳转新的页面 - 语法:location.assign("网址") - - reload():用于重新载入当前页面 - 语法:location.reload() - -### navigator对象 - -作用:提供当前浏览器的详细信息 - -appCodeName:获取浏览器代码名 - -userAgent:获取浏览器的整体信息 - -appName:获取浏览器名称 - -appVersion:获取浏览器的版本号 - -platform:获取当前计算机的操作系统 - -cookieEnabled:判断是否启用Cookies - -### screen对象 - -作用:反应当前用户的屏幕设置 - -### history对象 - -作用:是一个只读的URL字符串数组,用来存储最近访问网页的URL地址列表 - -#### 属性 - -length:历史列表中的URL数量 - -current:当前文档的URL - -next:历史列表下一下 - -previous:历史列表的前一个 - -#### 方法 - -back():退回前一页 - -forward():重新进入下一页 - -go():进入指定的网页 - - diff --git "a/\346\257\233\351\221\253\347\216\211/20251210-style.md" "b/\346\257\233\351\221\253\347\216\211/20251210-style.md" deleted file mode 100644 index 1147c853734333016c7310cb3fa76cfa2a92540b..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251210-style.md" +++ /dev/null @@ -1,216 +0,0 @@ -## 一、Style 对象核心概述 -- Style 对象是 JavaScript 操作 DOM 元素内联样式的核心接口,对应元素的 style 属性,仅控制内联样式`(
      )`,而非外部样式表或 ` - - -
      -
      - - - - - - - - - - - - Document - - - - -
      -
        -
      • HTML/CSS讨论区
      • -
      • JavaScript
      • -
      • C语言
      • -
      • Java
      • -
      • Android
      • -
      • Python
      • -
      - -
      - - - - -``` - -```js - - - - - 1 - 2 - 3 - - -``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251211-form.md" "b/\346\257\233\351\221\253\347\216\211/20251211-form.md" deleted file mode 100644 index 6761b88311214defc06094c972f0b6e100284034..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251211-form.md" +++ /dev/null @@ -1,222 +0,0 @@ -## 验证 -### 1. 提交控制 -- 手动提交:`form.submit()`(不触发 `onsubmit`); -- 阻止默认提交:`e.preventDefault()`(异步提交必用); -- 推荐方式:监听 `submit` 事件,自定义逻辑后异步提交。 - -### 2. 验证 -- 原生验证:`form.checkValidity()`(校验返回布尔)、`form.reportValidity()`(校验+弹窗提示); -- 自定义验证:控件 `setCustomValidity('错误提示')`(清空需设空字符串)。 - -## 五、FormData 关键(异步提交) -1. 快速收集表单数据:`new FormData(form)`(自动含所有控件值,支持文件); -2. 可手动追加:`formData.append('key', '值')`; -3. 异步提交:`fetch`/`axios` 中直接作为 `body`,自动处理编码。 - -## 六、核心坑点 -1. 单选/复选框同名需遍历集合找 `checked=true` 的值,不可直接取 `value`; -2. `form.submit()` 不触发 `onsubmit` 事件,验证需监听 `submit` 事件; -3. 文件输入框 `value` 只读,仅能用户操作; -4. 下拉框直接设 `select.value` 即可选中,无需遍历 option(特殊场景除外)。 - - - 训练1核心代码 - -```html - -
      请输入电影票兑换码:
      - - - - -``` - -- 训练2核心代码 - -```html - -
      用户协议
      - - - - - -``` - -- 训练3核心代码 - -```html - -

      请选择相应课程

      -
      -    c语言
      -    机械制图
      -    单片机
      -    自动控制
      -    传感器
      -    高等数学
      -    计算机基础
      -    Oracle数据库
      -    商务英语
      -    PLC设计基础
      -    
      - - - -``` - -- 综合练习1核心代码 - -```html - -
      电影《变相怪杰》的主演是谁?
      - 布拉德·皮特 - 亚当·桑德勒 - 金·凯瑞 - 杰夫·丹尔斯 - -
      - -
      - - -``` - -- 综合练习2核心代码 - -```html - -
      - - - - - - - -
      看电影 - 听音乐 - 演奏乐器 - 打篮球 - 看书 - 上网 -
      - - - -
      -
      - - -``` - -- 综合练习3核心代码 - -```html - -
      - - -
      - - -``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251212-api.md" "b/\346\257\233\351\221\253\347\216\211/20251212-api.md" deleted file mode 100644 index b1079c2def25a16dc84cd4364c625f1a34d38dbf..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251212-api.md" +++ /dev/null @@ -1,40 +0,0 @@ -## api - -### 一、什么是 Fetch API - -Fetch API 是浏览器提供的新一代异步网络请求接口,用于替代传统的 XMLHttpRequest(XHR),提供更简洁、更强大的 Promise 风格 API,支持请求 / 响应拦截、流式处理、跨域等特性,是现代前端处理网络请求的主流方案。 - -核心特点 - - -基于 Promise,支持 async/await 语法,代码更易读、易维护; - - -采用模块化设计,请求(Request)、响应(Response)、头信息(Headers)分离; - - -支持多种数据格式(JSON、FormData、Blob、文本等); - - -原生支持跨域请求(需服务端配置 CORS); - - -可中断请求(通过 AbortController)。 - - ```js - // 第一步:调用 fetch,传入要请求的地址 -fetch('https://api.example.com/hello') // 这里替换成实际接口地址 - // 第二步:处理服务器的响应,解析成能看懂的 JSON 数据 - .then(response => response.json()) - // 第三步:拿到解析后的数据,使用它 - .then(data => { - console.log('拿到的数据:', data); // 在控制台打印数据 - }) - // 第四步:如果出错(比如断网、地址错),捕获错误 - .catch(error => { - console.log('请求出错了:', error); - }); - ``` - - -fetch('地址'): 告诉浏览器:“去这个地址拿数据” - -.then(res => res.json()): 服务器返回的数据是 “原始格式”,这一步转成我们能直接用的 JS 对象(最常用) - -.then(data => { ... }): 拿到转好的数据,想怎么用就怎么用(比如显示在页面上) - -.catch(error => { ... }): 任何环节出错(比如地址错、断网),都会走到这里 \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251215-\345\233\236\351\241\276form\347\237\245\350\257\206\347\202\271.md" "b/\346\257\233\351\221\253\347\216\211/20251215-\345\233\236\351\241\276form\347\237\245\350\257\206\347\202\271.md" deleted file mode 100644 index d4f748a7a935b0221186bdeaf96cb47eafe93515..0000000000000000000000000000000000000000 --- "a/\346\257\233\351\221\253\347\216\211/20251215-\345\233\236\351\241\276form\347\237\245\350\257\206\347\202\271.md" +++ /dev/null @@ -1,84 +0,0 @@ -## 笔记 -回顾了form对象的知识点 - -### 200 -```html - - -2.外部嵌入 -外部引入:通过标签引入外部Js文件。 - -在页面输出 - - -页面弹框 - - -控制台输出 - - - -3.内部嵌入 -内嵌脚本:在HTML文档中使用 - - - -``` -![alt text](./图片/lzmy.png) - -``` - - - - - - - 输出明日学院的官网地址 - - - - - - - -``` -![alt text](./图片/mzdz.png) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251112-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251112-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 8e9672c1e82ca3b2996ce7a28e2b311de7376d37..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251112-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,136 +0,0 @@ -# 笔记 -1.转义字符“\”可以防止引号匹配混乱现象 - -2.转义字符\n换行 - -3.可以在声音变量后对变量赋值 -eg:let a; - a=1; - -4.运算符: -+-*/加减乘除 -%取余 -+= -i++或++i:(i--或--i) -eg:i=1,i++输出为1,但值为2 - ++i输出为2,值为2 - -5.比较运算符 -<> <= >= -==表面值判断,不涉及数据类型 -===表面值和类型一起判断 -!= 不涉及数据类型 -!== 同时判断表面值和类型 - -6.赋值运算符 -= -+= --= -*= -/= -%= - - -# 练习 - -``` - - - - - - - Document - - - - - - -
      - - - -
      - - - -
      - - - -
      - - - - - - - - - - - - - - - - - - - - -``` -![alt text](./图片/eyejt.png) -![alt text](./图片/xlt.png) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251113-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251113-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index bb7ee80c59206ade7aa4784dd0931dff18b0cb4d..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251113-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,90 +0,0 @@ -# 笔记 -1.逻辑运算符: -&&逻辑与:都真为真 -||逻辑或:一真则真 -!取反(!a<5,当为真结果是假,假取真) - -2.条件运算符: -表达式?结果1:结果2(真左假右) - -3.逗号运算符:多个表达式排一起,整个表达式值为最后一个表达式的值 - -4.typeof运算符:返回数据类型 -# 练习 -``` - - - - - - - BMI 判定 - - - -第一题: - - -第二题: - - - - -第三题: - - -第四题: - - - - -``` -![alt text](./图片/stzj.png) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251114-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251114-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 970b2a187f2d1480a32c7b57db62f7026a36f308..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251114-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,158 +0,0 @@ -``` - - - - - - - Document - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` -![alt text](./图片/xh.png) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251117-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251117-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 7fe36b5e2e3cce8ced8a58f0a6a88f6c9d6ca2d6..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251117-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,56 +0,0 @@ -# 笔记-循环 - -1.循环语句 -for(){} -while(){} -do{}while() - -——————break终止循环;continue终止这次循环开始下一轮循环—————— - -2.判断语句 -if(){} - -if(){}else{} - -if(){}else if(){}else{} - -Switch(){ - 值1:执行;break; - 值2:执行;break; - ... -} - -# 笔记-函数 -传统函数:function 函数名(){} -匿名函数:let a =function(){} -箭头函数:let a =()=>{} - -# 练习 -1. -``` - -``` -2. -``` - - -``` -![alt text](./图片/hst.png) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251119-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251119-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index e19cb4a7350a440cc66e31fae05d34cdbb86f3d0..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251119-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,220 +0,0 @@ -# 笔记 -内置函数 -parseInt():将字符转成整型 - -parseFloat():将字符转成浮点型 - -isNaN():判断一个数值是否为NaN - -isFinite():判断一个数值是否有限 - -eval():计算表达式的总值 -示例 -result = eval("2 + 3 * 4") -print(result) # 输出: 14 - -encodeURI():将字符串进行编码 - -decodeURI():对已编码的字符串进行解码 -# 练习 - -``` - -``` -![alt text](./图片/ymxs.png) -```` - - - - - - - Document - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -```` -![alt text](./图片/hszt.png) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251120-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251120-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 50cc3b1a075cbb5c44502e51b0d351b91812b345..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251120-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,168 +0,0 @@ -# 笔记 -1.对象的创建: -let name={ - 属性:值, - 属性2:值二, - ... - 属性n:值 -} - -2.添加属性 -name.属性=“” - -3.删除属性 -delete name.属性 - -4.遍历 -for(name in 函数名){} - -5.内部对象 -Math属性 -Date属性 -Event响应事件 - -# 练习 -``` - - - - - - - Document - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` -![alt text](./图片/sjc.png) - -``` - -``` -![alt text](./图片/sbzj.png) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251121-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251121-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index d7c44f990bd5fa5fd7cb339e6dc0c05ba0030677..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251121-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,8 +0,0 @@ -# 笔记 -数组: -1.创建:ame=[1,2,3,...n] -2.添加:name.push('尾部添加新的元素') -3.删除最后一个:name.pop() -4.删除第一个 :name.shift() -5.输出索引值:name[索引值] -6.遍历 diff --git "a/\347\216\213\347\210\275\345\256\207/20251124-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251124-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 5303ffc083569b98b1140387fab190b5c34dd75f..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251124-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,170 +0,0 @@ -# 笔记 -slice(start, end):截取字符串中 start 到 end(不含 end)的部分,返回新字符串 -trim():去除字符串首尾的空白字符 -split(separator, limit):按指定分隔符(separator)分割字符串,imit 用于限制返回数组的最大长度 -concat():拼接多个字符串 -# 练习 -``` - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` -![alt text](./图片/dxlxt.png) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251126-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251126-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index e44059b273849e5dc2f5b11b8d9cd31a1e3215d5..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251126-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,16 +0,0 @@ -# 笔记 -g:全局匹配 -i:忽略大小写 -str.replace(regexp, replacement):替换匹配项 -``` -let str = "abac123abc"; -// 1. 无 g 修饰符:只替换第一个匹配项 -str.replace(/a/, "x"); // "xbac123abc"(仅第一个 "a" 换为 "x") - -// 2. 加 g 修饰符:全局替换所有匹配项 -str.replace(/a/g, "x"); // "xbxc123xbc"(所有 "a" 换为 "x") - -// 3. 加 i 修饰符:忽略大小写替换 -const str2 = "AbcA123"; -str2.replace(/a/gi, "x"); // "xbcx123"(不管 A/a 都替 -``` \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251127-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251127-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index a1316767ee8150a302b99d508aadcdd6bc2c8914..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251127-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,143 +0,0 @@ -# 笔记 -``` -基本结构 -try { - // 可能发生异常的代码(核心执行逻辑) -} catch (error) { - // 异常发生时执行(捕获错误,处理异常) -} finally { - // 无论是否发生异常,都会执行(可选,用于清理资源) -} -``` -error.message:错误描述 -error.name:错误类型 - -throw 异常值:主动抛出异常 -throw new Error("错误") - -new Error("错误"):创建一个包含错误信息的对象 -# 练习 -``` - - -``` -![alt text](./图片/bzc.png) - -``` - - - ``` -![alt text](./图片/cwlx.png) -![alt text](./图片/xxcw.png) - -``` - - -
      - 用户名:

      - 密码:

      - -
      - -``` -![alt text](./图片/gscw.png) - -``` - - -

      - - -

      - - - 对应字母:

      - - -``` -![alt text](./图片/czdy.png) -![alt text](./图片/czys.png) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251128-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251128-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index c80c44984fb1ead98e5ddb1fd6a6cff40d65b02c..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251128-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,265 +0,0 @@ -# 笔记 -``` -鼠标事件 -click 鼠标单击元素 -dblclick 鼠标双击元素 -mouseover 鼠标移入元素(含子元素) -mouseout 鼠标移出元素(含子元素) -mousemove 鼠标在元素内移动 -``` -``` -键盘事件 -keydown 按下键盘按键(任意键) -keyup 松开键盘按键 -input 输入框内容变化 -``` -``` -表单事件 -submit 提交表单 -change 表单元素值改变且失去焦点 -focus 元素获得焦点 -``` -``` -窗口事件 -load 页面所有资源加载完成 -DOMContentLoaded DOM 结构加载完成(无需等资源) -resize 窗口大小改变 -scroll 页面或元素滚动 -``` -addEventListener 绑定 -元素.addEventListener(事件名, 处理函数, 事件流配置) -[标准绑定方式,支持同一事件绑定多个处理函数,还能控制事件流(冒泡 / 捕获)。] - -e.preventDefault() 阻止事件的默认行为(如阻止表单提交) -e.stopPropagation() 阻止事件冒泡(避免父元素触发相同事件) -e.key 键盘事件中,获取按下的按键名称 - -# 练习 - -``` - - - - - - - Document - - - - - - 丁禹兮 - - - - - - - -
      -

      题目:中国国球是()?

      -

      A. 篮球 B. 兵乓球 C. 羽毛球 D. 排球

      -

      请按键盘上的 A/B/C/D 键选择答案

      -

      -
      - - - - - - -

      - - - - - - -

      - - - - - - -
      -

      -

      - -
      - - - - - - - - -
      - - - - - - - -
      - - - - - -
      - -
      - - -
      - - - -
      - - - - -``` -![alt text](./图片/dyx1.png) -![alt text](./图片/dyx2.png) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251201-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251201-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 0efcf7df645102aec8187b0c017cf436556d8574..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251201-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,239 +0,0 @@ -# 笔记 -``` -复制:onbeforcopy复制到剪切板触发 oncopy复制页面内容触发 -剪切:onbeforecut oncut -粘贴:onbeforepaste onpaste -选择:onseletc 文本选中「完成后」 onselectstart 元素的文本开始被选中前触发的事件「开始前」 -``` -``` -拖放事件 -dragstart 用户开始拖拽元素时 -drag 拖拽过程中持续触发 -dragenter 拖拽元素进入目标容器时 -dragover 拖拽元素在目标容器内悬停时 -dragleave 拖拽元素离开目标容器时 -drop 用户在目标容器内释放鼠标时 -``` -# 练习 -``` - - - - - -
      - 可拖动图片 -
      - -``` -![alt text](./图片/ckxs.png) -``` - - - - -
      拖拽我到矩形里
      -
      - -``` -![alt text](./图片/tzwz1.png) -![alt text](./图片/tzwz2.png) -``` - - - - -
      鼠标移到我身上看看
      - -``` -![alt text](./图片/bdbs.png) -``` - - - - - - -``` -![alt text](./图片/gdxg.png) -``` - - - - - - - -``` diff --git "a/\347\216\213\347\210\275\345\256\207/20251203-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251203-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 585f63c10831efe95a4b05d78070fb215986bcfb..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251203-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,183 +0,0 @@ -# 笔记 -``` -document.title 获取 / 设置页面标题 -document.URL 获取当前页面完整 URL -document.body 获取 元素,可直接操作其样式和内容 - -getElementById() 根据元素 id 属性查询 -getElementsByTagName() 根据标签名查询 -getElementsByClassName() 根据元素 class 属性查询 -querySelector() CSS 选择器查询(第一个匹配) -createElement() 创建新的 HTML 元素 -appendChild() 将子元素添加到父元素的末尾 -replaceChild() 用新元素替换父元素中的某个子元素 -removeChild() 从父元素中删除指定子元素 -``` -# 练习 -``` - - - - - -``` -``` - - -

      - -``` -``` - - -``` -``` - - - -
      -

      行路难·其一

      -

      〔唐代〕李白

      -

      金樽清酒斗十千,玉盘珍羞直万钱。

      -

      停杯投箸不能食,拔剑四顾心茫然。

      -

      欲渡黄河冰塞川,将登太行雪满山。

      -

      闲来垂钓碧溪上,忽复乘舟梦日边。

      -

      行路难!行路难!多歧路,今安在?

      -

      长风破浪会有时,直挂云帆济沧海。

      -
      - - -``` -``` - - -
      点击打开图片
      - - - - -``` -``` - - - - -
      - -``` \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251204-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251204-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 38e86ff1fbd3b4b17e03d6619055b3366cf9215c..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251204-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,453 +0,0 @@ - # 笔记 -``` -节点属性: -nodeType 标识节点类型 -nodeName 节点名称 -nodeValue 节点值 -childNodes 获取当前节点的所有子节点 -firstChild 获取第一个子节点 -lastChild 获取最后一个子节点 -nextSibling 获取下一个兄弟节点 -previousSibling 获取上一个兄弟节点 -parentNode 获取当前节点的父节点 -``` -``` -节点创建等: -createElement 创建元素节点 -createTextNode 创建文本节点 -appendChild 将子节点添加到父节点的子节点末尾 -insertBefore(new,ref) 将 new插入到 ref之前,没有则替换 -removeChild 从父节点中删除指定子节点 -replaceChild() 可替换节点啊 -``` -``` -获取元素: -getElementById 全局获取单个唯一 ID 元素 -getElementsByClassName 全局 / 局部获取批量 Class 元素 -querySelector 获取第一个匹配 CSS 选择器的元素 -querySelectorAll 复杂选择器 / 批量静态元素 遍历 -``` -``` -innerHTML 动态插入 -innerText 仅操作纯文字 -outerHTML 替换整个元素 -``` -# 练习 - - ``` - - - - -
      - -``` - -``` - - - -
      -
      - 夜空中最亮的星
      - 能否听清
      - 那仰望的人
      - 心底的孤独和叹息
      - 夜空中最亮的星
      - 能否记起
      - 曾与我同行
      - 消失在风里的身影 -
      - -``` -``` - - - - - - -
        -
      • 1. 热辣滚烫
      • -
      • 2. 飞驰人生3
      • -
      • 3. 哪吒之魔童闹海
      • -
      • 4. 唐探1900
      • -
      - -``` -``` - - - - - -
      -

      蔬菜列表

      -
        -
      • 西红柿
      • -
      • 黄瓜
      • -
      • 香蕉
      • -
      • 胡萝卜
      • -
      -
      -
      -

      水果列表

      -
        -
      • 苹果
      • -
      • 橙子
      • -
      • 菠菜
      • -
      • 草莓
      • -
      -
      - -``` -``` - - - - -
      -

      金庸《射雕英雄传》中,郭靖的降龙十八掌师从谁?

      -
      - -
      - -
      - - -
      - -
      -
      - -``` -``` - - - - - -
      - 百度 - -
      - -``` -``` - - - - - -
      - -
      -
      - -``` -``` - - - - -
      - 一生只爱一人 - - 点击将文本改为斜体 -
      - -``` -``` - - - - -
      - - - - - - -
      - -``` -``` - - - - -
      - - 选中的表情 -
      - -``` diff --git "a/\347\216\213\347\210\275\345\256\207/20251205-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251205-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 048c90f27c4d69beb6a267c2d0f48fb8e2ad9c8f..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251205-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,414 +0,0 @@ -# 笔记 -window.resizeTo(w,h) 调整窗口大小 -confirm(message) 弹出确认框 -setTimeout(fn, delay) 延迟 delay 毫秒执行函数(一次性) -setInterval(fn, interval) 每隔 interval 毫秒执行函数(循环) -clearInterval(timer) 清除 setInterval 定时器 - -# 练习 -``` - - -
      -

      消散对白(节选)

      -

      丁禹兮

      -

      原諒我真的不太會告別

      -

      也沒想過有這一天

      -

      以為你隨口承諾的永遠

      -

      就可以敵過時間

      -

      可你眼中深情的對白 如煙花短暫

      -

      新鮮感終歸不是愛

      -

      回憶在倒帶要怎麼釋懷?

      -

      說著放下卻陷入無限循環

      -

      可你眼中無情的對白 淚都流乾

      -

      卻不說答案

      -

      順其自然 隨冷風消散

      -

      可過了這麼久你怎麼還是我的短板

      -
      - - -``` -![alt text](./图片/xsdb.png) -``` - - - 退出登录 - -``` - -``` - - - - -
      - -
      - 长乐曲 -
      - -
      - 十年一品温如言 -
      -
      - -``` -``` - - - - - - -
      -

      广告内容标题

      -

      这里是广告的具体内容

      -
      广告将在 5 秒后自动关闭
      -
      - -``` -![alt text](./图片/gg.png) -``` - - - - -``` -``` - - - - - - - - -``` -``` - - -``` -``` - -

      2024年奥运会举办城市问答

      -
      - -``` -``` - - - - -
      - 轮播图片 -
      - - -``` \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251208-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251208-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 26add3205af62adfa2e8a2d7c82c0e9d8e644df5..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251208-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,13 +0,0 @@ -# 笔记 -``` -location方法: -assign():跳转新页面 -reload():重新载入当前页面 -``` - -``` -history方法: -back():退回前一页 -forward():重新进入下一页 -go():进入指定的网友 -``` diff --git "a/\347\216\213\347\210\275\345\256\207/20251210-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251210-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index f6b19c78716de62149fd3273271c8c220f0611d8..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251210-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,240 +0,0 @@ - -``` -
      -

      此情可待成追忆

      -

      只是当时已惘然

      -
      - - -``` - -``` - - 丁禹兮 - - - -``` - -``` - - - - - -``` - -``` - - - - - - - - -``` \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251211-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251211-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index bdf6e6ac2f8e8d0eac2500c491d4560aa979a875..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251211-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,194 +0,0 @@ - -``` - -``` - - - - -``` - - - - -``` - - -``` -
      - 语文 - 数学 - 英语 - 物理 - 化学 - 生物 - 历史 - 地理 - 政治 -
      - - -``` - - -``` -
      - A. 错误答案
      - B. 正确答案
      - C. 错误答案
      - -
      - -``` - - -``` -
      - - - -
      - 阅读
      - 运动
      - 听歌
      - 摄影
      - 绘画
      -
      -
      - -``` - -``` - - - -``` \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251212-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251212-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index d75d341c899ace3aaad30566444b00c1954b017b..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251212-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,10 +0,0 @@ -# JSON 基本语法规则 -1.数据以键值对(key: value) 形式存在,键必须用双引号包裹; -2.键值对之间用逗号分隔,最后一个键值对后不能加逗号; -3.整体数据要么是对象({}),要么是数组([])(这是 JSON 仅有的两种顶层结构); -4.不支持注释(// 或 /* */); -5.支持 字符串 数字 布尔值 数组 数组 null ;不支持函数、日期对象(需转为字符串)。 - -# 序列化和反序列 -JS 对象 → 字符串 :使用 JSON.stringify(),将 JavaScript 对象 / 数组转为 JSON 格式的字符串 -字符串 → JS 对象 :使用 JSON.parse(),将 JSON 格式的字符串转为 JavaScript 对象 / 数组 \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251215-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251215-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 37021fba597184df8b34105415790ce46ed2f288..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251215-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,3 +0,0 @@ -var 函数作用域 / 全局作用域 -let 块级作用域({}内) -const 块级作用域(专门声明常量) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251217-\347\254\224\350\256\260+\344\275\234\344\270\232 .md" "b/\347\216\213\347\210\275\345\256\207/20251217-\347\254\224\350\256\260+\344\275\234\344\270\232 .md" deleted file mode 100644 index ac11cfc36d14f1b65b401ec0b86e47ea6ea55e31..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251217-\347\254\224\350\256\260+\344\275\234\344\270\232 .md" +++ /dev/null @@ -1,18 +0,0 @@ -$是 jQuery 提供的 “元素选择器函数”,是前端开发里 jQuery 框架的标志性语法 -``` -let d4 = $('#d4'); → 等价于用原生 JS 写document.getElementById('d4') -``` - -``` -方法: -hide() 隐藏匹配的元素 -show() 显示匹配的元素 -toggle() 切换元素的显示 / 隐藏状态 -``` -``` - - - - - -``` diff --git "a/\347\216\213\347\210\275\345\256\207/20251218-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251218-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 6977aa7d58b467e53cf271151eb33210f1b1ef1e..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251218-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1,17 +0,0 @@ -fadeIn() 淡入显示元素(从透明到不透明) -fadeOut() 淡出隐藏元素(从不透明到透明) -fadeToggle() 切换淡入 / 淡出状态 -``` -// 淡入后执行回调 -$('.box').fadeIn(500, function() { - alert('淡入动画完成!'); -}); -``` - -``` -text() 获取 / 设置元素文本内容(纯文本) -html() 获取 / 设置元素 HTML 内容(含标签) -val() 获取 / 设置表单元素的值 -``` - -![alt text](./图片/JQdh.JPG) \ No newline at end of file diff --git "a/\347\216\213\347\210\275\345\256\207/20251219-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\347\216\213\347\210\275\345\256\207/20251219-\347\254\224\350\256\260+\344\275\234\344\270\232.md" deleted file mode 100644 index 3feadd0e198ddf2260712d75d51a239c97870db7..0000000000000000000000000000000000000000 --- "a/\347\216\213\347\210\275\345\256\207/20251219-\347\254\224\350\256\260+\344\275\234\344\270\232.md" +++ /dev/null @@ -1 +0,0 @@ -![alt text](./图片/z.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251110-js\345\255\246\344\271\240\345\274\225\345\205\245\346\226\271\345\274\217.md" "b/\347\275\227\347\232\223\346\231\250/20251110-js\345\255\246\344\271\240\345\274\225\345\205\245\346\226\271\345\274\217.md" deleted file mode 100644 index c0c994354687975ba3b6ce11a7047d69e9001592..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251110-js\345\255\246\344\271\240\345\274\225\345\205\245\346\226\271\345\274\217.md" +++ /dev/null @@ -1,73 +0,0 @@ -## 笔记 - -### JavaScript 主要引入方式详解 - -#### 1. 行内引入(嵌入式) - -- 核心形式:将 JS 代码直接嵌入 HTML 标签的属性中,依赖事件触发或特定前缀执行。 - - 事件属性:如 `onclick`、`onmouseover` 等,例如 - - ```html - - ``` - -- **本质**:JS 代码与 HTML 标签完全耦合,属于最原始的引入方式 -- **特点**:仅适合单元素的极简交互,代码无法复用,维护性极差,仅临时测试或极端简单场景使用 - -#### 2. 内部引入(内嵌式) - -- 核心形式:通过` - ``` - -- **特点**:代码与 HTML 分离但同文件,无需额外请求,适合中小型单页应用的独立逻辑,复用性较低 - -- **注意**:内部引入需将` - ``` - -- **特点**:代码与 HTML 完全分离,可复用性极强,支持按需加载和模块化,是大型项目的标准引入方式 - -## 作业 - -### 第一题 - -#### 关键代码 - -```html - -

      - - -``` - -#### 效果展示 - -![](./Image/20251110_Image/show01.png) - -### 第二题 - -#### 关键代码 - -```html - -``` - -#### 效果展示 - -![](./Image/20251110_Image/show02.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251112-js\345\237\272\347\241\200.md" "b/\347\275\227\347\232\223\346\231\250/20251112-js\345\237\272\347\241\200.md" deleted file mode 100644 index e9ac89e67d6604e06b30f72aaf34d3a05e95d146..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251112-js\345\237\272\347\241\200.md" +++ /dev/null @@ -1,111 +0,0 @@ -## 笔记 - -### 数据类型 -#### 基本类型 - -| 类型 | 说明及典型示例 | 关键特点 | -| --------- | ------------------------------------ | ----------------------------------------------------- | -| Number | 整数 (10)、浮点数 (3.14)、NaN | NaN 表示非数字,`isNaN()`判断;Infinity 表示无穷大 | -| String | 单 / 双引号 ("hi")、反引号 (`a${b}`) | 反引号支持模板字符串和换行 | -| Boolean | true(真)、false(假) | 0、""、null、undefined 会被转为 false | -| Null | let a = null | 表示 “空”,主动赋值;typeof 检测为 object(历史问题) | -| Undefined | let b;(声明未赋值) | 表示 “未定义”,变量默认初始值 | - -### 常量和变量 - -| 类型 | 声明方式 | 作用域范围 | 核心规则 | -| ---- | -------- | ------------------------ | -------------------------------------------------------- | -| 变量 | let | 块级({} 内,如 if/for) | 可重新赋值,同一作用域不可重复声明 | -| 变量 | var | 函数级(函数内) | 可重复声明,存在 “变量提升”(声明提前到顶部) | -| 常量 | const | 块级 | 必须初始化,不可重新赋值;引用类型内部可改(如对象属性) | - -### 运算符 - -| 类型 | 常用运算符 | 关键说明 | -| ---------- | ----------------------- | ------------------------------------------------------------ | -| 算术运算符 | `+`、`-`、`*`、`/`、`%`(取余) | `+` 可拼接字符串(如 '2' + 3 → '23') | -| 赋值运算符 | `=`、`+=`(a+=b 即 a=a+b) | 简化赋值操作 | -| 比较运算符 | `==`(宽松)、`===`(严格) | `==` 会自动类型转换(0 == false → true);`===` 需类型和值都相同 | -| 逻辑运算符 | `&&`(与)、`\|\|` (或)、`!`(非) | 短路逻辑:`&& `遇 `false `返回该值,`\|\|` 遇 `true` 返回该值,`!`取反 | -| 自增自减 | `++`、`--` | 前置(`++a`:先加后用);后置(`a++`:先用后加) | -| 三元运算符 | 条件?结果 1 : 结果 2 | 简化简单 if 判断(如 age>18?' 成年 ':' 未成年 ') | - -## 作业 - -### 第一部分一至七题 - -#### 关键代码 - -```html -
      -

      -
      -
      -

      -

      -

      -
      - -``` - -#### 效果展示 - -![](./Image/20251112_Image/show01.png) - -### 第二部分一、二、三题 - -#### 关键代码 - -```html -

      - -``` - -#### 效果展示 - -![](./Image/20251112_Image/show02.png) - -![](./Image/20251112_Image/show03.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251113-jsDOM\344\273\213\347\273\215.md" "b/\347\275\227\347\232\223\346\231\250/20251113-jsDOM\344\273\213\347\273\215.md" deleted file mode 100644 index c302a4023cf297f0cbf87f12343948ebbe66038d..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251113-jsDOM\344\273\213\347\273\215.md" +++ /dev/null @@ -1,191 +0,0 @@ -## 笔记 - -### DOM 核心概念 - -DOM 全称 **Document Object Model(文档对象模型)**,一句话说透核心:**把 HTML 页面变成 JS 能识别、能操作的 “树状对象体系”,是 JS 与 HTML 交互的唯一桥梁**。 - -### DOM 到底是什么? - -- 本质是 **“结构化的节点对象集合”**: - 1. 先按 HTML 嵌套关系,形成 “树状结构”(父子、兄弟节点层级); - 2. 再把 HTML 里的标签、文字、属性等,都变成 “DOM 节点对象”; - 3. 自带一套操作 API(比如 `getElementById`),让 JS 能 “抓节点、改节点”。 -- 通俗类比:HTML 是 “建筑图纸”(只能看),DOM 是 “可交互的建筑模型”(能拆改、能调整)—— 没有 DOM,JS 就 “看不见” 页面元素,更没法操作。 - -### 核心结构:DOM 树 - -HTML 标签的嵌套关系,在 DOM 里会变成 “树状结构”,每个组成部分都是 “节点”,关键分 3 类: - -| 节点类型 | 作用 | 示例 | -| ---------------- | ------------------------------------ | --------------------------- | -| Document(树根) | 代表整个 HTML 文档,所有操作的起点 | JS 里的 `document` 对象 | -| 元素节点(树枝) | 对应 HTML 标签,是最常操作的对象 | `
      `、` - - - - -``` - -##### 对应的 DOM 树(直观层级) - -```plaintext -Document(树根) -└── html(根标签节点) - ├── head(元素节点) - │ └── title(元素节点) - │ └── "我的页面"(文本节点) - └── body(元素节点) - ├── h1(元素节点) - │ └── "标题"(文本节点) - └── select(元素节点,id="mySelect-year") - └── option(元素节点) - └── "1949年"(文本节点) -``` - -### 为什么需要 DOM? - -1. 结构化呈现:把杂乱的 HTML 标签,按层级整理成 “树”,JS 能顺着树快速找节点; -2. 可操作性:让 JS 能修改页面内容、样式、属性(比如改文字、换颜色、加标签); -3. 互动基础:支持监听点击、输入等事件(比如点击按钮弹出内容),是所有页面交互的核心。 - -### 总结 - -**DOM 是包含各类节点(文档节点、元素节点、文本节点等)的树状模型,`getElementBy`等 API 的作用是从 DOM 树中查找并返回「匹配的元素节点」,若找到则返回该元素节点对象,没找到则返回 `null`,然后对其进行对应操作。** - -## 作业 - -### 第一部分一、二、三题 - -#### 关键代码 - -```html -
      -
      -
      -
      -
      - 年份: - 月份: -
      -
      - -
      -
      - -``` - -#### 效果展示 - -![](./Image/20251113_Image/show01.png) - -### 第二部分 - -#### 关键代码 - -```html -
      -
      -
      - -``` - -#### 效果展示 - -![](./Image/20251113_Image/show02.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251114-js\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\347\275\227\347\232\223\346\231\250/20251114-js\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" deleted file mode 100644 index 5f792bbab85d4940673273e199a645fdc685037b..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251114-js\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" +++ /dev/null @@ -1,190 +0,0 @@ -## 笔记 - -### 分支结构(根据条件执行不同代码) - -#### if 语句 - -- 作用:满足条件则执行对应代码块,否则跳过 -- 三种形式: - - 单条件:`if (条件) { 满足时执行 }` - - 双条件:`if (条件) { 满足时执行 } else { 不满足时执行 }` - - 多条件:`if (条件1) { 满足1执行 } else if (条件2) { 满足2执行 } else { 都不满足执行 }` -- 关键:条件为布尔值(true 执行,false 跳过),非布尔值会自动隐式转换(如 0→false、非 0 数字→true、空字符串→false) - -#### switch 语句 - -- 作用:根据一个变量 / 表达式的多个可能值,执行对应代码块 -- 核心规则: - - 匹配原则:`===` 严格匹配,`case`必须为一个固定值,不能为条件 - - 必须加 `break`:否则会穿透到下一个 `case` 执行 - - `default`:所有 `case` 都不匹配时执行(可选) - -### 循环结构 - -#### for 循环(已知循环次数) - -- 语法:`for (初始化变量; 循环条件; 变量更新) { 循环体 }` -- 适用场景:数组遍历、固定次数的重复操作(如循环 10 次) -- 关键:循环条件为 true 时继续执行,false 时退出;避免死循环(如条件永远为 true) - -#### while 循环(未知循环次数,先判断后执行) - -- 语法:`while (循环条件) { 循环体; 变量更新 }` -- 特点:先判断条件,不满足则一次都不执行 -- 注意:必须在循环体内更新变量,否则会陷入死循环 - -#### do...while 循环(未知循环次数,先执行后判断) - -- 语法:`do { 循环体; 变量更新 } while (循环条件)` -- 特点:至少执行一次循环体,再判断条件 -- 适用场景:需要确保代码块至少运行一次的场景(如表单验证重试) - -### 循环控制语句(调整循环执行) - -#### break - -- 作用:立即退出当前循环(或 switch 语句),后续代码不再执行 -- 场景:找到目标值后终止循环、满足特定条件时退出 - -#### continue - -- 作用:跳过当前循环的剩余代码,直接进入下一次循环判断 -- 注意:仅跳过当前次,不终止整个循环 - -### 关键注意点 - -1. 代码块 {}:单条语句可省略,但建议始终添加(提高可读性、避免语法错误) -2. 条件判断:优先使用 === 严格相等,避免 == 隐式转换导致的意外结果 -3. 死循环:循环条件必须有终止可能(如 i++、i--),否则会导致页面卡死 -4. 嵌套控制:多层循环 / 分支中,break/continue 仅作用于当前所在层级 - -## 作业 - -### 第一、二、三题 - -#### 关键代码 - -```html - -``` - -#### 效果展示 - -![](./Image/20251114_Image/show01.png) - -### 第四、五题 - -#### 关键代码 - -```html - -``` - -#### 效果展示 - -![](./Image/20251114_Image/show02.png) - -### 第六、七题 - -#### 关键代码 - -```html - -``` - -#### 效果展示 - -![](./Image/20251114_Image/show03.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251117-js\345\207\275\346\225\260.md" "b/\347\275\227\347\232\223\346\231\250/20251117-js\345\207\275\346\225\260.md" deleted file mode 100644 index 72917d1b9f85e39b3d8fae5fc77fe0a8b3d94847..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251117-js\345\207\275\346\225\260.md" +++ /dev/null @@ -1,133 +0,0 @@ -## 笔记 - -### 函数 - -函数是 JavaScript 中封装代码、实现复用的核心机制,通过 `function` 关键字定义,可接收参数、执行逻辑并返回结果。 - -### 形参和实参 - -- **形参(形式参数)**:函数定义时括号内声明的变量,用于接收调用时传入的值,仅在函数内部有效。 - -- **实参(实际参数)**:函数调用时括号内传入的具体值,会传递给对应的形参。 - -- 补充: - - - 无形参函数传入实参时,实参存储在 `arguments` 对象(传统函数)或通过剩余参数(`...args`)获取(箭头函数)。 - - 有形参函数不传入实参时,形参值为`undefined`。 - - 为避免出错,建议按照强类型语言的语法书写函数,js特性多以了解为主。 - -### 函数的定义方式 - -#### 函数声明 - -使用 `function` 关键字开头,声明函数名,可在声明前后调用(函数提升)。 - -```javascript -function add(a, b) { - return a + b; -} -``` - -#### 函数表达式 - -将函数赋值给变量,需先定义再调用,可匿名也可命名。 - -```javascript -// 匿名函数表达式 -const subtract = function(a, b) { - return a - b; -}; -// 命名函数表达式 -const multiply = function mul(a, b) { - return a * b; -}; -``` - -#### 箭头函数 - -简洁语法,无自己的 `this`、`arguments`,不能作为构造函数。单形参时可以省略括号,无参和多参时不能省略。 - -```javascript -const divide = (a, b) => a / b; // 单表达式可省略大括号和 return -// 多语句需加括号和 return -const calculate = (a, b) => { - const sum = a + b; - return sum * 2; -}; -``` - -注意:函数表达式和箭头函数不具备函数提升特性,提前调用会报错。 - -### 直接调用 - -通过函数名 + 括号调用,是最常用的方式。 - -```javascript -const result = add(2, 3); // 5 -``` - -### 函数的返回值 - -- 函数通过 `return` 语句返回结果,执行到 `return` 后立即终止函数执行,后续代码不再运行。 - -```javascript -function test() { - return '结果'; - console.log('这句话不会执行'); -} -``` - -- 若函数无 `return` 语句或 `return` 后无值,默认返回 `undefined`。 - -```javascript -function noReturn() {} -console.log(noReturn()); // undefined -``` - -- 一个函数只能有一个返回值,若需返回多个值,可通过数组或对象包裹。 - -```javascript -// 数组形式返回多个值 -function getNumbers() { - return [1, 2, 3]; -} -const [a, b, c] = getNumbers(); - -// 对象形式返回多个值 -function getUser() { - return { name: 'Alice', age: 20 }; -} -const { name, age } = getUser(); -``` - -## 作业 - -### 第一、二题 - -#### 关键代码 - -```html - -``` - -#### 效果展示 - -![](./Image/20251117_Image/show01.png) diff --git "a/\347\275\227\347\232\223\346\231\250/20251119-js\345\257\271\350\261\241.md" "b/\347\275\227\347\232\223\346\231\250/20251119-js\345\257\271\350\261\241.md" deleted file mode 100644 index 9d18471cbf984248f460e0c8bd63376a86f047d0..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251119-js\345\257\271\350\261\241.md" +++ /dev/null @@ -1,479 +0,0 @@ -## 笔记 - -### 对象的创建 - -对象是**键值对的集合**(键为字符串 / Symbol,值为任意类型:基本类型、函数、对象等),用于存储和组织相关数据与功能,最常用的创建语法如下: - -```js -// 基础语法:对象字面量 -let 对象名 = { 键1: 值1, 键2: 值2, ... }; - -// 示例1:基础用法 -let person = { - name: "张三", - age: 25, - isStudent: false, - sayHi: function() { - console.log("你好!"); - } -}; - -// 示例2:ES6+ 简写(属性名与变量名一致、方法简写) -let name = "李四"; -let age = 30; -let user = { - name, // 简写:等同于 name: name - age, - sayHi() { // 方法简写:等同于 sayHi: function() {} - console.log(`我是${this.name}`); - } -}; -``` - -### 对象操作 - -#### 增 - -直接通过**点语法 / 方括号语法**赋值即可(属性不存在时自动添加,[]内为字符串): - -```js -let obj = { name: "赵六" }; - -// 1. 添加普通属性 -obj.age = 32; // 点语法添加 -obj["gender"] = "男"; // 方括号语法添加 - -// 2. 添加方法 -obj.sayHello = function() { - console.log(`你好,我是${this.name}`); -}; - -// 3. 添加动态属性(ES6+) -let attrName = "hobbies"; -obj[attrName] = ["读书", "旅行"]; - -console.log(obj); -// 输出:{ name: "赵六", age: 32, gender: "男", sayHello: [Function], hobbies: ["读书", "旅行"] } -``` - -#### 删 - -通过 `delete` 运算符删除对象的**自身属性**(不影响原型链上的属性): - -```js -let obj = { name: "钱八", age: 35, gender: "男" }; - -// 删除自身属性 -delete obj.age; // 点语法指定属性 -delete obj["gender"]; // 方括号语法指定属性 - -console.log(obj); // 输出:{ name: "钱八" }(age 和 gender 已删除) - -// 特性说明: -// 1. 删除不存在的属性:返回 true(无报错) -delete obj.hobbies; // 输出:true - -// 2. 无法删除原型链上的属性 -let parent = { name: "父对象" }; -let child = Object.create(parent); // child 的原型是 parent -child.age = 20; -delete child.name; // 尝试删除原型上的 name,失败 -console.log(child.name); // 输出:父对象(仍能访问原型属性) - -// 3. 无法删除通过 var/let/const 声明的全局变量(非对象属性) -let globalVar = 10; -delete globalVar; // 输出:false(删除失败) -``` - -#### 改 - -若属性已存在,通过**点语法 / 方括号语法**重新赋值即可覆盖原有值: - -```js -let obj = { name: "孙七", age: 27 }; - -// 修改现有属性 -obj.name = "孙七修改后"; // 点语法修改 -obj["age"] = 28; // 方括号语法修改 - -console.log(obj); // 输出:{ name: "孙七修改后", age: 28 } - -// 注意:不可写属性无法修改(需通过属性描述符定义) -let obj2 = Object.defineProperty({}, "age", { - value: 30, - writable: false // 设为不可写 -}); -obj2.age = 35; // 失败(严格模式下报错) -console.log(obj2.age); // 输出:30(值未改变) -```` -#### 查 - -两种核心方式,根据属性名特点选择: - -- **点语法**:简洁直观,适合属性名为合法标识符(无特殊字符、非关键字) -- **方括号语法**:支持动态属性名、特殊字符属性名(如连字符、数字开头) - -```js -let obj = { - name: "王五", - "user-age": 28, // 特殊字符属性名(必须用引号包裹) - hobbies: ["篮球", "游戏"] -}; - -// 点语法访问 -console.log(obj.name); // 输出:王五 -console.log(obj.hobbies[0]); // 输出:篮球(访问对象中的数组元素) - -// 方括号语法访问 -console.log(obj["user-age"]); // 输出:28(特殊字符属性名必须用方括号) -let key = "name"; -console.log(obj[key]); // 输出:王五(动态属性名,变量key对应属性名) -console.log(obj[`hobbies`][1]); // 输出:游戏(模板字符串作为属性名) - -// 访问不存在的属性:返回 undefined -console.log(obj.gender); // 输出:undefined -``` - - -#### 添加方法 - -对象定义时直接添加: - -```javascript -const person = { - name: "张三", - age: 25, - // 方法定义 - sayHello: function() { - console.log(`你好,我是${this.name}。`); - }, - // ES6+ 方法简写(更推荐) - introduce() { - console.log(`我今年${this.age}岁。`); - } -}; - -person.sayHello(); // 输出:你好,我是张三。 -person.introduce(); // 输出:我今年25岁。 -``` - -动态添加方法:在对象创建之后,通过点语法或方括号语法给它添加新方法。 - -```javascript -const person = { - name: "李四" -}; - -// 使用点语法 -person.sayHi = function() { - console.log("Hi!"); -}; - -// 使用方括号语法 -person["sayGoodbye"] = function() { - console.log("Goodbye!"); -}; - -person.sayHi(); // 输出:Hi! -person.sayGoodbye(); // 输出:Goodbye! -``` - -#### 遍历对象 - -遍历对象主要是为了获取对象中所有的**键(key)和值(value)**。 - -##### `for...in` 循环(最常用) - -`for...in` 循环用于遍历对象自身的和继承的**可枚举属性**(不包括 `Symbol` 属性)。 - -**语法:** - -```javascript -for (const key in 对象) { - // 执行代码 -} -``` - -**示例:** - -```javascript -const person = { - name: "张三", - age: 25, - city: "北京" -}; - -for (const key in person) { - // hasOwnProperty 用于判断属性是否是对象自身的(不包括继承的) - if (person.hasOwnProperty(key)) { - console.log(key + ": " + person[key]); - } -} -// 输出: -// name: 张三 -// age: 25 -// city: 北京 -``` - -**注意事项:** - -- `for...in` 会遍历对象原型链上的属性,所以通常需要配合 `hasOwnProperty()` 来过滤掉继承的属性。 -- 遍历顺序不一定是插入顺序,对于数字键会按升序排列,字符串键按插入顺序。 - -##### `Object.keys()` 方法 - -`Object.keys()` 方法返回一个包含对象自身所有**可枚举属性**(不包括 `Symbol` 属性)的字符串数组。 - -**语法:** - -```javascript -Object.keys(对象) -``` - -**示例:** - -```javascript -const person = { - name: "张三", - age: 25, - city: "北京" -}; - -const keys = Object.keys(person); -console.log(keys); // 输出:["name", "age", "city"] - -keys.forEach(key => { - console.log(key + ": " + person[key]); -}); -// 输出: -// name: 张三 -// age: 25 -// city: 北京 -``` - -**注意事项:** - -- `Object.keys()` 只返回对象自身的属性,不包括继承的属性。 -- 返回的是一个数组,所以可以使用数组的方法(如 `forEach`、`map` 等)进行遍历。 - -##### `Object.values()` 方法 - -`Object.values()` 方法返回一个包含对象自身所有**可枚举属性**(不包括 `Symbol` 属性)的值的数组。 - -**语法:** - -```javascript -Object.values(对象) -``` - -**示例:** - -```javascript -const person = { - name: "张三", - age: 25, - city: "北京" -}; - -const values = Object.values(person); -console.log(values); // 输出:["张三", 25, "北京"] - -values.forEach(value => { - console.log(value); -}); -// 输出: -// 张三 -// 25 -// 北京 -``` - -##### `Object.entries()` 方法 - -`Object.entries()` 方法返回一个包含对象自身所有**可枚举属性**(不包括 `Symbol` 属性)的键值对数组。 - -**语法:** - -```javascript -Object.entries(对象) -``` - -**示例:** - -```javascript -const person = { - name: "张三", - age: 25, - city: "北京" -}; - -const entries = Object.entries(person); -console.log(entries); -// 输出:[["name", "张三"], ["age", 25], ["city", "北京"]] - -entries.forEach(([key, value]) => { - console.log(key + ": " + value); -}); -// 输出: -// name: 张三 -// age: 25 -// city: 北京 -``` - -**总结:** - -- 如果需要遍历键和值,推荐使用 `Object.entries()`。 -- 如果只需要键,使用 `Object.keys()`。 -- 如果只需要值,使用 `Object.values()`。 -- `for...in` 由于会遍历原型链,现在已经不推荐用于遍历对象的自身属性。 - -#### - -## 作业 - -### 第一部分第三至八题 - -#### 关键代码 - -```js - -``` - -#### 效果展示 - -![](./Image/20251119_Image/show01.png) - -### 第二部分一、二、三题 - -#### 关键代码 - -```html - -``` - -#### 效果展示 - -![](./Image/20251119_Image/show02.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251120-js\345\206\205\351\203\250\345\257\271\350\261\241Math&Date.md" "b/\347\275\227\347\232\223\346\231\250/20251120-js\345\206\205\351\203\250\345\257\271\350\261\241Math&Date.md" deleted file mode 100644 index 8470598e38da7162141cefaf4378e0408e2a0990..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251120-js\345\206\205\351\203\250\345\257\271\350\261\241Math&Date.md" +++ /dev/null @@ -1,113 +0,0 @@ -## 笔记 - -### Math常用方法 - -| 方法 | 描述 | 示例 | 结果 | -| --------------- | --------------------------------------------- | ----------------- | ---- | -| `Math.floor(x)` | **向下取整**(返回小于或等于 `x` 的最大整数) | `Math.floor(3.9)` | `3` | -| `Math.ceil(x)` | **向上取整**(返回大于或等于 `x` 的最小整数) | `Math.ceil(3.1)` | `4` | -| `Math.round(x)` | **四舍五入**到最接近的整数 | `Math.round(3.5)` | `4` | -| `Math.trunc(x)` | **去除小数部分**(直接截掉小数点后的数字) | `Math.trunc(3.9)` | `3` | -| `Math.max(a, b, ...)` | 返回所有参数中的**最大值** | `Math.max(1, 3, 2)` | `3` | -| `Math.min(a, b, ...)` | 返回所有参数中的**最小值** | `Math.min(1, 3, 2)` | `1` | -| `Math.abs(x)` | 返回 `x` 的**绝对值** | `Math.abs(-5)` | `5` | -| `Math.pow(x,y)` | 返回一个`x`的`y`**次方** | `Math.pow(3,3)` | `27` | -| `Math.random()` | 返回一个 `0`(包含)到 `1`(不包含)之间的伪随机数 | `Math.random()` | `[0, 1)` | - -### Date 常用方法 - -#### 创建 Date 对象 - -| 方法 | 描述 | 示例 | -| ------------------------------------------------------------ | --------------------------------------------------------- | ----------------------------------- | -| `new Date()` | 创建一个表示**当前日期和时间**的 Date 对象 | `const now = new Date();` | -| `new Date(dateString)` | 通过一个日期字符串创建 Date 对象 | `new Date("2023-10-27");` | -| `new Date(year, month, day, [hours, [minutes, [seconds, [ms]]]])` | 通过指定的年、月、日等创建 Date 对象(**月份从 0 开始**) | `new Date(2023, 9, 27, 14, 30, 0);` | - -#### Date常用方法 - -| 方法 | 描述 | 示例(假设日期为 2023-10-27) | -| --------------- | ------------------------------------------------------------ | ----------------------------- | -| `getFullYear()` | 返回**年份**(4 位数) | `2023` | -| `getMonth()` | 返回**月份**(0-11,0 表示一月) | `9` (表示十月) | -| `getDate()` | 返回一个月中的**某一天**(1-31) | `27` | -| `getDay()` | 返回一周中的**某一天**(0-6,0 表示星期日) | `5` (表示星期五) | -| `getHours()` | 返回**小时**(0-23) | `14` | -| `getMinutes()` | 返回**分钟**(0-59) | `30` | -| `getSeconds()` | 返回**秒**(0-59) | `45` | -| `getTime()` | 返回从 Unix 纪元(1970 年 1 月 1 日 00:00:00 UTC)到该日期的**毫秒数**(时间戳) | `1672502400000` | -| `toString()` | 将 Date 对象转换为一个人类可读的字符串 | `"Fri Oct 27 2023 14:30:45 GMT+0800 (中国标准时间)"` | -| `toLocaleString()` | 将 Date 对象转换为一个**本地格式**的日期和时间字符串 | `"2023/10/27 14:30:45"` | -| `toLocaleDateString()` | 将 Date 对象转换为一个**本地格式**的日期字符串 | `"2023/10/27"` | -| `toLocaleTimeString()` | 将 Date 对象转换为一个**本地格式**的时间字符串 | `"14:30:45"` | -| `toISOString()` | 将 Date 对象转换为一个符合 **ISO 格式**的字符串(UTC 时间) | `"2023-10-27T06:3` | - -## 作业 - -### 第一部分第一、二、三题 - -#### 关键代码 - -```html - -``` - -#### 效果展示 - -![](./Image/20251120_Image/show01.png) - - - -### 第二部分第一、二题 - -#### 关键代码 - -```html - -``` - -#### 效果展示 - -![](./Image/20251120_Image/show02.png) diff --git "a/\347\275\227\347\232\223\346\231\250/20251121-js\345\206\205\351\203\250\345\257\271\350\261\241Event&\346\225\260\347\273\204.md" "b/\347\275\227\347\232\223\346\231\250/20251121-js\345\206\205\351\203\250\345\257\271\350\261\241Event&\346\225\260\347\273\204.md" deleted file mode 100644 index 012303e099b28198e1cc678dbcfeeb9332c4c7ac..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251121-js\345\206\205\351\203\250\345\257\271\350\261\241Event&\346\225\260\347\273\204.md" +++ /dev/null @@ -1,207 +0,0 @@ -## 笔记 - -### 事件与Event - -#### 事件的核心概念 - -- **事件**:用户操作(如点击、输入)或浏览器行为(如页面加载完成)触发的行为。 -- **事件流**:事件触发后在 DOM 树中的传播顺序,分为 **冒泡阶段**(从触发元素向上传播)和 **捕获阶段**(从顶层元素向下传播)。 -- **事件处理程序**:响应事件的函数(如点击按钮后执行的逻辑)。 - -#### Event常用方法 - -| 事件类型 | 触发场景 | 示例 | -| ----------- | --------------------------------- | ---------------------- | -| `click` | 鼠标左键点击元素 | 按钮点击、链接跳转 | -| `dblclick` | 鼠标左键双击元素 | 双击编辑文本 | -| `mouseover` | 鼠标移入元素(含子元素) | hover 提示框 | -| `mouseout` | 鼠标移出元素(含子元素) | hover 提示框消失 | -| `mousemove` | 鼠标在元素内移动 | 拖拽功能、鼠标轨迹 | -| `keydown` | 键盘按下(按住时连续触发) | 输入框快捷键、游戏控制 | -| `keyup` | 键盘松开 | 输入完成验证 | -| `input` | 输入框内容变化(实时触发) | 搜索框联想、实时校验 | -| `change` | 输入框内容确认变化(失焦 / 回车) | 下拉框选择、文件上传 | -| `focus` | 元素获得焦点(如点击输入框) | 输入框激活样式 | -| `blur` | 元素失去焦点(如点击输入框外) | 输入框失活、内容保存 | -| `submit` | 表单提交(点击提交按钮 / 回车) | 登录表单、搜索表单 | -| `load` | 页面 / 资源(图片、脚本)加载完成 | 页面初始化逻辑 | -| `resize` | 浏览器窗口大小改变 | 响应式布局调整 | -| `scroll` | 页面 / 元素滚动 | 滚动加载、回到顶部 | - -#### 事件绑定 - -##### HTML 属性绑定(不推荐,耦合度高) - -直接在 HTML 标签中通过 `on事件名` 属性指定处理函数,仅适用于简单场景。 - -```html - - - - -``` - -**缺点**:HTML 与 JS 耦合,无法绑定多个同类型事件。 - -##### DOM 属性绑定(简单场景可用) - -通过 JS 获取 DOM 元素后,直接给 `on事件名` 属性赋值(函数引用或匿名函数)。 - -```html - - - -``` - -**缺点**:同一事件只能绑定一个处理函数(后续绑定会覆盖前一个)。 - -##### `addEventListener`(推荐,功能最强) - -DOM 标准方法,支持绑定多个同类型事件、控制事件流(冒泡 / 捕获)、移除事件。 - -**语法:** - -```javascript -元素.addEventListener(事件名, 处理函数, [捕获阶段标志]); -// 第三个参数:true=捕获阶段触发,false=冒泡阶段触发(默认false) -``` - -**示例:** - -```html - - - -``` - -**优点**: - -- 支持多个同类型事件(按绑定顺序触发); -- 可控制事件流(捕获 / 冒泡); -- 可通过 `removeEventListener` 移除事件(避免内存泄漏)。 - -### 数组 - -#### 数组的创建 - -**创建方式:** - -```javascript -// 1. 字面量创建(最常用) -let arr1 = []; // 空数组 -let arr2 = [1, "hello", true, { name: "张三" }]; // 包含多种类型元素 - -// 2. 构造函数创建 -let arr3 = new Array(); // 空数组 -let arr4 = new Array(5); // 创建长度为5的空数组(元素为undefined) -let arr5 = new Array(1, 2, 3); // 创建包含指定元素的数组 -``` - ------- - -#### 数组操作 - -##### 增 - -| 方法 | 描述 | 示例代码 | 结果(原数组变化) | -| ----------------------------- | ---------------------------------------------- | ------------------------------------------------------------ | ------------------ | -| `push(element1,...)` | 在数组 **末尾** 添加一个 / 多个元素 | let arr = [1,2]; arr.push(3,4); | arr 变为 [1,2,3,4] | -| `unshift(element1,...)` | 在数组 **开头** 添加一个 / 多个元素 | let arr = [3,4]; arr.unshift(1,2); | arr 变为 [1,2,3,4] | -| `splice(start, 0, item1,...)` | 在指定索引 `start` 处 **插入** 一个 / 多个元素 | let arr = [1,4]; arr.splice (1, 0, 2, 3); // 索引 1 处插入,删除 0 个元素 | arr 变为 [1,2,3,4] | - -##### 删 - -| 方法 | 描述 | 示例代码 | 结果(原数组变化) | -| ---------------------------- | ------------------------------------------------------ | ------------------------------------------------------------ | ---------------------------------------- | -| `pop()` | 删除数组 **末尾** 的最后一个元素 | let arr = [1,2,3]; arr.pop(); | arr 变为 [1,2](返回被删除的元素 3) | -| `shift()` | 删除数组 **开头** 的第一个元素 | let arr = [1,2,3]; arr.shift(); | arr 变为 [2,3](返回被删除的元素 1) | -| `splice(start, deleteCount)` | 从指定索引 `start` 开始,**删除** `deleteCount` 个元素 | let arr = [1,2,3,4]; arr.splice (1, 2); // 索引 1 开始,删除 2 个元素 | arr 变为 [1,4](返回被删除的元素 [2,3]) | - -##### 改 - -| 方式 | 描述 | 示例代码 | 结果(原数组变化) | -| --------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------ | -| 索引直接赋值 | 通过元素的索引直接修改其值 | let arr = [1,2,3]; arr[1] = 20; | arr 变为 [1,20,3] | -| `splice(start, deleteCount, item1,...)` | 从指定索引 `start` 开始,**替换** `deleteCount` 个元素为新元素 | let arr = [1,2,3,4]; arr.splice (1, 2, "a", "b"); // 索引 1 开始,删除 2 个,插入 2 个 | arr 变为 [1,"a","b",4](返回被删除的元素 [2,3]) | - -##### 查 - -| 方法 | 描述 | 示例代码 | 结果 | -| ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | --------- | -| 索引直接访问 | 通过元素的索引直接访问其值 | let arr = [10, 20, 30]; console.log(arr[1]); | 输出 20 | -| `indexOf(element)` | 返回指定元素在数组中 **第一次出现** 的索引(无则返回 -1) | let arr = [10, 20, 30, 20]; arr.indexOf(20); | 返回 1 | -| `lastIndexOf(element)` | 返回指定元素在数组中 **最后一次出现** 的索引(无则返回 -1) | let arr = [10, 20, 30, 20]; arr.lastIndexOf(20); | 返回 3 | -| `includes(element)` | 判断数组是否包含指定元素(返回布尔值) | let arr = [10, 20, 30]; arr.includes(20); | 返回 true | -| `find(callback)` | 返回数组中 **第一个满足回调函数条件** 的元素(无则返回 undefined) | let arr = [5, 12, 8, 130]; arr.find(item => item > 10); | 返回 12 | -| `findIndex(callback)` | 返回数组中 **第一个满足回调函数条件** 的元素的索引(无则返回 -1) | let arr = [5, 12, 8, 130]; arr.findIndex(item => item > 10); | 返回 1 | - -##### 遍历 - -遍历数组中的每个元素并进行操作。 - -| 方法 | 描述 | 示例代码 | -| ------------------- | ----------------------------------------------- | ------------------------------------------------------------ | -| `for` 循环 | 使用索引遍历数组,最传统的方式 | let arr = [1,2,3]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } | -| `forEach(callback)` | 遍历数组,对每个元素执行 `callback`(无返回值) | let arr = [1,2,3]; arr.forEach((item, index) => console.log(item, index)); | -| `for...of` 循环 | 遍历数组元素(ES6+,简洁直观) | let arr = [1,2,3]; for (let item of arr) { console.log(item); } | - ------- - -#### 数组的常用方法 - -除了上述操作方法外,还有一些常用的数组处理方法。 - -| 方法 | 描述 | 示例代码 | -| ----------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `map(callback)` | 遍历数组,对每个元素执行 `callback`,返回 **新数组**(元素为回调返回值) | let arr = [1,2,3]; let newArr = arr.map (item => item * 2); //newArr 为 [2,4,6] | -| `filter(callback)` | 遍历数组,筛选出 **满足条件**(回调返回 true)的元素,返回新数组 | let arr = [1,2,3,4]; let newArr = arr.filter (item => item > 2); //newArr 为 [3,4] | -| `reduce((acc, cur) => ..., initialValue)` | 数组累加器,对数组元素逐个处理,返回最终累加结果 | let arr = [1,2,3,4]; let sum = arr.reduce ((acc, cur) => acc + cur, 0); //sum 为 10 | -| `sort((a,b) => ...)` | 对数组元素排序(默认按 Unicode 编码排序,需自定义比较函数) | let arr = [3,1,2]; arr.sort ((a,b) => a - b); // 升序 → [1,2,3] | -| `reverse()` | 反转数组元素的顺序 | let arr = [1,2,3]; arr.reverse(); → [3,2,1] | -| `join(separator)` | 将数组元素拼接为字符串,`separator` 为分隔符(默认逗号) | let arr = [1,2,3]; arr.join("-"); → "1-2-3" | -| `concat(arr1, arr2,...)` | 合并多个数组,返回 **新数组** | let arr1 = [1,2]; let arr2 = [3,4]; let newArr = arr1.concat(arr2); → [1,2,3,4] | -| `slice(start, end)` | 截取数组(从 `start` 索引开始,到 `end` 索引结束,不包含 `end`),返回新数组 | let arr = [1,2,3,4]; arr.slice (1, 3); → [2,3](原数组不变) | -| `flat(depth)` | 数组扁平化(将多维数组转为一维 / 指定深度) | let arr = [1, [2, [3]]]; arr.flat(2); → [1,2,3] | - diff --git "a/\347\275\227\347\232\223\346\231\250/20251124-jsString\345\257\271\350\261\241.md" "b/\347\275\227\347\232\223\346\231\250/20251124-jsString\345\257\271\350\261\241.md" deleted file mode 100644 index dd4f64eb2d9ae45a441e36e0219a6d5c073771f8..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251124-jsString\345\257\271\350\261\241.md" +++ /dev/null @@ -1,122 +0,0 @@ -## 笔记 - -### String常用方法 - -| 方法名 | 描述 | 示例 | -| --------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `charAt(index)` | 返回指定位置的字符 | `let str = 'hello'; console.log(str.charAt(1)); // 输出 'e'` | -| `concat(str1, str2, ...)` | 连接一个或多个字符串,并返回新的字符串 | `let str1 = 'hello'; let str2 = 'world'; console.log(str1.concat(', ', str2)); // 输出 'hello, world'` | -| `endsWith(searchString[, length])` | 判断字符串是否以指定的字符串结尾 | `let str = 'hello world'; console.log(str.endsWith('world')); // 输出 true` | -| `indexOf(searchValue[, fromIndex])` | 返回指定字符串在原字符串中第一次出现的位置,如果没有找到则返回 -1 | `let str = 'hello world'; console.log(str.indexOf('l')); // 输出 2` | -| `lastIndexOf(searchValue[, fromIndex])` | 返回指定字符串在原字符串中最后一次出现的位置,如果没有找到则返回 -1 | `let str = 'hello world'; console.log(str.lastIndexOf('l')); // 输出 9` | -| `length` | 返回字符串的长度 | `let str = 'hello'; console.log(str.length); // 输出 5` | -| `replace(searchValue, replaceValue)` | 在字符串中用一些字符替换另一些字符,返回替换后的新字符串。`searchValue` 可以是字符串或正则表达式 | `let str = 'hello world'; console.log(str.replace('world', 'javascript')); // 输出 'hello javascript'` | -| `slice(start[, end])` | 提取字符串的某个部分,并以新的字符串返回被提取的部分 | `let str = 'hello world'; console.log(str.slice(0, 5)); // 输出 'hello'` | -| `split([separator[, limit]])` | 将字符串分割成子字符串数组 | `let str = 'hello,world'; console.log(str.split(',')); // 输出 ['hello', 'world']` | -| `startsWith(searchString[, position])` | 判断字符串是否以指定的字符串开头 | `let str = 'hello world'; console.log(str.startsWith('hello')); // 输出 true` | -| `substring(start[, end])` | 返回字符串中指定的两个索引之间的字符 | `let str = 'hello world'; console.log(str.substring(0, 5)); // 输出 'hello'` | -| `toLowerCase()` | 将字符串转换为小写形式 | `let str = 'HELLO'; console.log(str.toLowerCase()); // 输出 'hello'` | -| `toUpperCase()` | 将字符串转换为大写形式 | `let str = 'hello'; console.log(str.toUpperCase()); // 输出 'HELLO'` | -| `trim()` | 删除字符串两端的空白字符 | `let str =' hello '; console.log(str.trim()); // 输出 'hello'` | - -## 作业 - -### 第一部分 - -#### 关键代码 - -```html - -``` - -#### 效果展示 - -![](./Image/20251124_Image/show01.png) - -### 第二部分 - -#### 关键代码 - -```html - -``` - -#### 效果展示 - -![](./Image/20251124_Image/show02.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251126-js\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\347\275\227\347\232\223\346\231\250/20251126-js\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 7bbb02e461558522b5db82e95b851f8425e6f713..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251126-js\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,10 +0,0 @@ -## 笔记 - -| 方法名 | 所属对象 | 描述 | 语法 | 返回值 | 示例 | -| --------- | -------- | -------------------------------------------- | --------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `test` | `RegExp` | 检查字符串是否匹配正则表达式 | `regexObj.test(str)` | `boolean`,匹配返回 `true`,否则返回 `false` | `const regex = /abc/; const str = 'abcdef'; console.log(regex.test(str)); // true` | -| `exec` | `RegExp` | 在字符串中执行搜索匹配 | `regexObj.exec(str)` | 匹配成功返回包含匹配信息的数组,否则返回 `null`。数组的第一个元素是完整匹配项,后续元素是捕获组(如果有) | `const regex = /(\d+)/; const str = 'There are 12 items'; const result = regex.exec(str); if (result) { console.log(result[0]); // '12',完整匹配项 console.log(result[1]); // '12',第一个捕获组 }` | -| `match` | `String` | 使用正则表达式对字符串进行匹配,返回匹配结果 | `str.match(regex)` | 若未使用全局标志 `g`,返回包含第一个匹配项及捕获组(如果有)的数组,否则返回 `null`;若使用全局标志 `g`,返回包含所有匹配项的数组 | `const str = 'apple, banana, cherry'; const regex = /banana/; const result1 = str.match(regex); console.log(result1); // ['banana'] const regexGlobal = /\w+/g; const result2 = str.match(regexGlobal); console.log(result2); // ['apple', 'banana', 'cherry']` | -| `search` | `String` | 搜索字符串中匹配正则表达式的位置 | `str.search(regex)` | 若匹配成功,返回第一个匹配项的起始位置;否则返回 `-1` | `const str = 'Find the word here'; const regex = /word/; console.log(str.search(regex)); // 10` | -| `replace` | `String` | 用替换字符串替换匹配正则表达式的子字符串 | `str.replace(regex, replacement)` | 返回替换后的新字符串 | `const str = 'Hello, world'; const regex = /world/; const newStr = str.replace(regex, 'JavaScript'); console.log(newStr); // 'Hello, JavaScript'` | -| `split` | `String` | 根据正则表达式分割字符串 | `str.split(regex[, limit])` | 返回分割后的字符串数组。`limit` 可指定数组的最大长度 | `const str = 'a,b,c,d'; const regex = /,/; const arr = str.split(regex); console.log(arr); // ['a', 'b', 'c', 'd'] const arrLimited = str.split(regex, 2); console.log(arrLimited); // ['a', 'b']` | \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251127-js\345\274\202\345\270\270\345\244\204\347\220\206&\344\272\213\344\273\266\347\233\221\345\220\25401.md" "b/\347\275\227\347\232\223\346\231\250/20251127-js\345\274\202\345\270\270\345\244\204\347\220\206&\344\272\213\344\273\266\347\233\221\345\220\25401.md" deleted file mode 100644 index c46be4dfb6198cc1304f7c9ea4d849d1ddb34893..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251127-js\345\274\202\345\270\270\345\244\204\347\220\206&\344\272\213\344\273\266\347\233\221\345\220\25401.md" +++ /dev/null @@ -1,153 +0,0 @@ -## 笔记 - -### 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 -
      -
      - 用户名:
      - 密 码:
      - - -``` - -#### 效果展示 - -![](./Image/20251127_Image/show01.gif) - -### 第二部分 - -#### 关键代码 - -```html -
      -

      联系方式

      -
      -
      - - -
      -
      - - -
      -
      - - -
      - -
      -
      - -``` - -#### 效果展示 - -![](./Image/20251127_Image/show02.gif) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251128-js\344\272\213\344\273\266\347\233\221\345\220\25402.md" "b/\347\275\227\347\232\223\346\231\250/20251128-js\344\272\213\344\273\266\347\233\221\345\220\25402.md" deleted file mode 100644 index d79a757fc27cbbe320ea679e07e6443eb184c6b8..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251128-js\344\272\213\344\273\266\347\233\221\345\220\25402.md" +++ /dev/null @@ -1,363 +0,0 @@ -## 笔记 - -# 事件对象(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 -
      - -
      -
      - 中国的“国球”是什么(   -

      A.篮球B.排球C.乒乓球D.羽毛球

      -
      -
      -
      - - - -
      -
      -
      -
      - 用户名:
      - 密 码:
      -
      -
      - -``` -#### 效果展示 -![](./Image/20251128_Image/show01.gif) -### 第二部分 -#### 关键代码 -```html - -``` -#### 效果展示 -![](./Image/20251128_Image/show02.gif) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251201-js\344\272\213\344\273\266\347\233\221\345\220\25403.md" "b/\347\275\227\347\232\223\346\231\250/20251201-js\344\272\213\344\273\266\347\233\221\345\220\25403.md" deleted file mode 100644 index 0517431f707f0b362b1fbb87900c9f14eb25e88c..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251201-js\344\272\213\344\273\266\347\233\221\345\220\25403.md" +++ /dev/null @@ -1,107 +0,0 @@ -## 笔记 - -### 文本编辑事件 - -#### 核心事件(文本 / 内容操作) - -- `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 - -
      - 拖拽我到下方区域 -
      -
      - 请将上方文本拖放到这里 -
      - - -``` - -#### 效果展示 -![20251201Show01](https://qiniu.lhchen.asia//20251201Show01.gif) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251203-jsDOM\345\257\271\350\261\241\345\217\212\345\205\266\345\270\270\347\224\250\346\226\271\346\263\225.md" "b/\347\275\227\347\232\223\346\231\250/20251203-jsDOM\345\257\271\350\261\241\345\217\212\345\205\266\345\270\270\347\224\250\346\226\271\346\263\225.md" deleted file mode 100644 index c5c2f471ff517c39689b28bcf44a8225faf0b335..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251203-jsDOM\345\257\271\350\261\241\345\217\212\345\205\266\345\270\270\347\224\250\346\226\271\346\263\225.md" +++ /dev/null @@ -1,203 +0,0 @@ -## 笔记 - -### Document 对象常用属性 - -#### 基础结构相关 - -- `document.documentElement`:获取 HTML 根元素(`` 标签) -- `document.head`:获取文档的 `` 元素 -- `document.body`:获取文档的 `` 元素 -- `document.title`:获取或设置文档的标题(对应 `` 标签内容) -- `document.URL`:获取当前文档的完整 URL -- `document.domain`:获取当前文档的域名(跨域相关场景常用) -- `document.referrer`:获取跳转至当前文档的前一个页面 URL(来源页面) - -#### 元素获取相关(便捷属性) - -- `document.forms`:获取文档中所有 `<form>` 元素的集合(HTMLCollection) -- `document.images`:获取文档中所有 `<img>` 元素的集合(HTMLCollection) -- `document.links`:获取文档中所有 `<a>` 标签(带 href 属性)和 `<area>` 元素的集合(HTMLCollection) -- `document.scripts`:获取文档中所有 `<script>` 元素的集合(HTMLCollection) -- `document.styleSheets`:获取文档中所有样式表(包括 `<style>` 和外部 CSS)的集合 - -#### 文档状态与元信息 - -- `document.readyState`:获取文档加载状态(loading:加载中;interactive:DOM 可交互;complete:完全加载完成) -- `document.characterSet`:获取或设置文档的字符编码(如 UTF-8) -- `document.doctype`:获取文档的 DOCTYPE 声明 -- `document.documentURI`:与 URL 类似,返回文档的统一资源标识符(部分场景下与 URL 等效) - -#### 其他常用属性 - -- `document.cookie`:获取或设置当前文档的 Cookie(字符串格式,需自行解析/拼接) -- `document.defaultView`:获取文档所属的窗口对象(即 window,部分浏览器兼容场景使用) -- `document.activeElement`:获取当前文档中获得焦点的元素(如输入框、按钮等) - -### Document 对象常用方法 - -#### 元素查询方法 - -- `querySelector(selector)`:根据 CSS 选择器获取第一个匹配的元素(返回单个 DOM 元素,支持复杂选择器) -- `querySelectorAll(selector)`:根据 CSS 选择器获取所有匹配的元素(NodeList,静态集合,不动态更新) - -#### 元素创建与插入/删除 - -- `createElement(tagName)`:创建一个指定标签名的新 DOM 元素 -- `createTextNode(text)`:创建一个文本节点(包含指定文本内容) -- `createDocumentFragment()`:创建文档片段(用于批量插入元素,提升性能,不直接属于 DOM 树) -- `appendChild(child)`:将子元素添加到指定父元素的末尾(若子元素已存在,会移动位置) -- `insertBefore(newChild, referenceChild)`:在参考子元素之前插入新子元素 -- `removeChild(child)`:删除指定的子元素(需通过父元素调用) -- `replaceChild(newChild, oldChild)`:用新子元素替换旧子元素 - -#### 文档操作与加载 - -- `write(text)`:向文档中写入内容(可写 HTML 字符串,加载期间使用,加载完成后会覆盖文档) -- `writeln(text)`:与 write 类似,末尾自动添加换行符 -- `open()`:打开文档输出流(配合 write 使用,较少单独使用) -- `close()`:关闭文档输出流(结束 write 写入操作) -- `getSelection()`:获取用户在文档中选中的文本内容(返回 Selection 对象) - -## 作业 - -### 第一部分 - -#### 关键代码 - -```html - <div class="left-section"> - <h1 class="section-title">训练</h1> - <div class="base-card small-card" id="colorSwapCard"> - 天行健君子以自强不息<br>地势坤君子以厚德载物 - </div> - <div class="btn-group"> - <input type="button" class="common-btn" id="colorSwapBtn" value="交互颜色"> - <input type="button" class="common-btn" id="urlFetchBtn" value="获取地址"> - </div> - <div class="base-card small-card" id="textAppendCard"></div> - <div class="input-group"> - <input type="text" class="text-input-box" id="userInputTxt" placeholder="请输入文字"> - <input type="button" class="common-btn" id="textAppendBtn" value="添加"> - </div> - </div> - <div class="right-section"> - <h1 class="section-title">综合练习</h1> - <div class="base-card large-card" id="themeChangeCard"> - <h2>李白《行路难・其一》</h2> - 金樽清酒斗十千,玉盘珍羞直万钱。<br> - 停杯投箸不能食,拔剑四顾心茫然。<br> - 欲渡黄河冰塞川,将登太行雪满山。<br> - 闲来垂钓碧溪上,忽复乘舟梦日边。<br> - 行路难!行路难!多歧路,今安在?<br> - 长风破浪会有时,直挂云帆济沧海。<br> - </div> - <input type="button" class="common-btn" id="themeChangeBtn" value="切换主题"> - <div class="image-container" id="imageDialogArea"> - <a href="" id="imageOpenLink">打开图片对话框</a> - </div> - <div class="avatar-container"> - <input type="button" class="common-btn" id="addAvatarBtn" value="添加用户头像"> - <div class="avatar-list" id="avatarListContainer"></div> - </div> - </div> - <script> - // 训练1 - const colorSwapBtn = document.querySelector('#colorSwapBtn'); - const colorSwapCard = document.querySelector('#colorSwapCard'); - function swapBgTextColor() { - // getComputedStyle()获取实参dom元素的全局样式 - let targetCardStyle = getComputedStyle(colorSwapCard) - let currentBgColor = targetCardStyle.backgroundColor - let currentTextColor = targetCardStyle.color - colorSwapCard.style.backgroundColor = currentTextColor - colorSwapCard.style.color = currentBgColor - } - colorSwapBtn.addEventListener('click', swapBgTextColor) - - // 训练2 - const urlFetchBtn = document.querySelector('#urlFetchBtn'); - function fetchPageUrl() { - let pageUrl = document.URL - console.log(pageUrl); - - } - urlFetchBtn.addEventListener("click", fetchPageUrl) - - // 训练3 - const textAppendCard = document.querySelector('#textAppendCard') - const userInputTxt = document.querySelector('#userInputTxt') - const textAppendBtn = document.querySelector('#textAppendBtn') - function appendInputText() { - let textSpan = document.createElement("span") - let inputContent = document.createTextNode(userInputTxt.value) - // appendChild()将实参的dom节点添加到调用的dom节点列表中的尾部 - textSpan.appendChild(inputContent); - textAppendCard.appendChild(textSpan); - } - textAppendBtn.addEventListener("click", appendInputText) - - // 综合练习01 - const themeChangeBtn = document.querySelector('#themeChangeBtn'); - const themeChangeCard = document.querySelector('#themeChangeCard') - let themeIndex = 0 - function switchCardTheme() { - // 数组存储前景色和背景色,省略 - const foregroundColors = []; - const backgroundColor = []; - themeChangeCard.style.color = foregroundColors[themeIndex] - themeChangeCard.style.backgroundColor = backgroundColor[themeIndex] - themeIndex++ - if (themeIndex == foregroundColors.length) { - themeIndex = 0 - } - } - themeChangeBtn.addEventListener("click", switchCardTheme) - - // 综合练习02:图片对话框 - const imageOpenLink = document.querySelector('#imageOpenLink') - const imageDialogArea = document.querySelector('#imageDialogArea') - let dialogContainer = document.createElement("div") - let imageWrapper = document.createElement("div") - let deleteLink = document.createElement("a") - let deleteText = document.createTextNode("删除") - deleteLink.appendChild(deleteText) - let imgElement = document.createElement('img') - imgElement.src = "https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/chat/static/image/logo-icon-white-bg.72df0b1a.png" - function openImageDialog(e) { - e.preventDefault(); - imageWrapper.appendChild(imgElement) - dialogContainer.appendChild(deleteLink) - dialogContainer.appendChild(imageWrapper) - imageDialogArea.appendChild(dialogContainer) - } - imageOpenLink.addEventListener("click", openImageDialog) - function removeImageDialog() { - imageDialogArea.removeChild(dialogContainer) - } - deleteLink.addEventListener("click", removeImageDialog) - - // 综合练习03 - </script> - <script> - let addAvatarBtn = document.querySelector("#addAvatarBtn"); - let avatarListContainer = document.querySelector("#avatarListContainer") - let avatarIndex = 0 - function addUserAvatar() { - // 数组存储头像地址,省略 - const userAvatarUrls = []; - let avatarImage = document.createElement("img") - avatarImage.src = userAvatarUrls[avatarIndex] - avatarImage.className = "avatar-item" - avatarImage.alt = `用户头像${avatarIndex + 1}` - avatarListContainer.appendChild(avatarImage) - avatarIndex++ - if (avatarIndex == userAvatarUrls.length){ - alert("头像数量达到上限") - } - } - addAvatarBtn.addEventListener("click", addUserAvatar) - </script> -``` - -#### 效果展示 -![20251203Show01](https://qiniu.lhchen.asia//20251203Show01.gif) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251204-jsDOM\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\347\275\227\347\232\223\346\231\250/20251204-jsDOM\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 616ddc780922d033d79ba9506716cf368bc8d1c5..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251204-jsDOM\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,341 +0,0 @@ -## 笔记 - -### 节点属性 - -#### 通用节点属性(所有节点共享) - -- `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://cdn.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') - let yearHTML = "" - for (let i = 1949; i <= 2049; i++) { - let str = `<option value = "${i}">${i}年</option>` - yearHTML += str - } - item02Year.innerHTML = yearHTML; - let monthHTML = "" - for (let i = 1; i <= 12; i++) { - let str = `<option value = "${i}">${i}月</option>` - monthHTML += str - } - item02Month.innerHTML = monthHTML - function myItem02Date() { - let year = item02Year.value - let month = item02Month.value - let dayNumber = new Date(year, month, 0) - let datehHTML = "" - for (let i = 1; i <= dayNumber.getDate(); i++) { - let str = `<option value = "${i}">${i}\日</option>` - datehHTML += str - } - item02Day.innerHTML = datehHTML - console.log(`${year}年${month}月有${dayNumber.getDate()}天`); - - } - item02Year.addEventListener("change", myItem02Date) - item02Month.addEventListener("change", myItem02Date) - //综合练习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/\347\275\227\347\232\223\346\231\250/20251205-jswindow\345\257\271\350\261\241.md" "b/\347\275\227\347\232\223\346\231\250/20251205-jswindow\345\257\271\350\261\241.md" deleted file mode 100644 index ce1687213c85b317fedfa2ec9d5fb08c04354892..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251205-jswindow\345\257\271\350\261\241.md" +++ /dev/null @@ -1,212 +0,0 @@ -## 笔记 - -window 是浏览器全局对象,代表浏览器窗口。包含全局属性(如 document、location)、方法(如 alert、setTimeout),以及事件(如 load、resize)。全局变量 / 函数默认挂载其上,是 DOM 和 BOM 的核心访问入口。 - -### 常用方法 - -| 方法/属性 | 作用说明 | 示例代码 | -| ----------------------------- | --------------------------------------------------------- | ------------------------------------------------------------ | -| window.open() | 打开新窗口/标签页,可指定 URL、窗口尺寸、位置等参数 | `window.open('https://example.com', '_blank', 'width=500,height=300')` | -| window.close() | 关闭当前窗口(仅对 `window.open()` 打开的窗口生效) | `const newWin = window.open(); newWin.close();` | -| window.innerWidth/innerHeight | 获取窗口可视区域宽/高(含滚动条,只读) | `const w = window.innerWidth; const h = window.innerHeight;` | -| setTimeout(fn, delay) | 延迟指定毫秒执行一次函数,返回定时器 ID | `const timer = setTimeout(() => console.log('延迟执行'), 1000);` | -| clearTimeout(timerId) | 清除 `setTimeout` 创建的定时器 | `clearTimeout(timer);` | -| setInterval(fn, interval) | 每隔指定毫秒重复执行函数,返回定时器 ID | `const timer = setInterval(() => console.log('重复执行'), 1000);` | -| clearInterval(timerId) | 清除 `setInterval` 创建的定时器 | `clearInterval(timer);` | -| window.alert(message) | 显示无返回值的警告弹窗 | `window.alert('操作成功!');` | -| window.confirm(message) | 显示确认弹窗,返回布尔值(确认:true/取消:false) | `const res = window.confirm('确定删除?'); if(res) { /* 执行删除 */ }` | -| window.prompt(text, def) | 显示输入弹窗,返回输入内容(取消返回 null),def 为默认值 | `const name = window.prompt('请输入姓名', '张三');` | -| window.scrollTo(x, y) | 滚动到文档指定坐标,支持平滑滚动配置 | `window.scrollTo({ top: 0, behavior: 'smooth' }); // 平滑回到顶部` | -| window.scrollBy(x, y) | 相对当前位置滚动指定距离 | `window.scrollBy(0, 100); // 向下滚动 100px` | - -## 作业 - -### 第一部分 - -#### 关键代码 - -```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 diff --git "a/\347\275\227\347\232\223\346\231\250/20251208-jsBOM\345\257\271\350\261\241.md" "b/\347\275\227\347\232\223\346\231\250/20251208-jsBOM\345\257\271\350\261\241.md" deleted file mode 100644 index 5e0834dfbaa6f40b157289c5d84fe460c54b39c3..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251208-jsBOM\345\257\271\350\261\241.md" +++ /dev/null @@ -1,55 +0,0 @@ -## 笔记 - -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/\347\275\227\347\232\223\346\231\250/20251210-jsStyle\345\257\271\350\261\241.md" "b/\347\275\227\347\232\223\346\231\250/20251210-jsStyle\345\257\271\350\261\241.md" deleted file mode 100644 index 4af2db8e7ad3ea30209b990bd03ebc95b763c342..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251210-jsStyle\345\257\271\350\261\241.md" +++ /dev/null @@ -1,156 +0,0 @@ -## 笔记 - -### 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/\347\275\227\347\232\223\346\231\250/20251211-jsForm\345\257\271\350\261\241.md" "b/\347\275\227\347\232\223\346\231\250/20251211-jsForm\345\257\271\350\261\241.md" deleted file mode 100644 index d43a3d854f73bd3468242ed99075d4866ae3c9a5..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251211-jsForm\345\257\271\350\261\241.md" +++ /dev/null @@ -1,246 +0,0 @@ -## 笔记 - -### 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/\347\275\227\347\232\223\346\231\250/20251212-jsJSON\346\225\260\346\215\256\346\240\274\345\274\217.md" "b/\347\275\227\347\232\223\346\231\250/20251212-jsJSON\346\225\260\346\215\256\346\240\274\345\274\217.md" deleted file mode 100644 index 5d9df0ca46133ac904efb32701a66f81c3563416..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251212-jsJSON\346\225\260\346\215\256\346\240\274\345\274\217.md" +++ /dev/null @@ -1,69 +0,0 @@ -## 笔记 - -### JSON 基础格式 - -#### 对象 - -- 结构:花括号 `{}` 包裹,内部是唯一字符串键 + 值的键值对,键值用 `:` 分隔,键值对间用 `,` 分隔 -- 示例: - -```json -{ - "name": "张三", - "age": 25, - "isMember": true, - "address": {"city": "北京", "area": "朝阳"} -} -``` - -#### 数组 - -- 结构:方括号 `[]` 包裹,值为任意合法 JSON 类型,值之间用 `,` 分隔 -- 示例: - -```json -[123, "测试", false, null, ["a", "b"], {"key": "value"}] -``` - -#### 简单数据类型 - -| 类型 | 规则 | 示例 | -| ------ | --------------------- | ------------- | -| 字符串 | 双引号包裹 | `"JSON 笔记"` | -| 数字 | 整数 / 浮点数,无引号 | `99`、`1.68` | -| 布尔值 | 仅 `true`/`false` | `false` | -| null | 表示空值,无引号 | `null` | - -### JSON的转换 - -#### 序列化(JS 对象 → JSON 字符串) - -- 方法:`JSON.stringify(value[, replacer[, space]])` -- 作用:将 JS 对象 / 数组 / 基本类型转为标准 JSON 字符串 -- 示例: - -```javascript -const jsObj = { name: "李四", age: 30, hobbies: ["跑步", "听歌"] }; -// 基础转换 -const jsonStr = JSON.stringify(jsObj); -// 格式化输出(2个空格缩进) -const prettyStr = JSON.stringify(jsObj, null, 2); -``` - -- 注意:函数、undefined 会被忽略,循环引用对象会报错 - -#### 反序列化(JSON 字符串 → JS 对象) - -- 方法:`JSON.parse(text[, reviver])` -- 作用:将合法 JSON 字符串转为 JS 对象 / 数组 -- 示例: - -```javascript -const jsonStr = '{"name":"李四","age":30}'; -// 基础解析 -const jsObj = JSON.parse(jsonStr); -// 解析时处理数据(如年龄+1) -const handledObj = JSON.parse(jsonStr, (key, val) => key === "age" ? val + 1 : val); -``` - -- 注意:JSON 字符串必须合法(如键为双引号),否则报错 \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251215-js.......md" "b/\347\275\227\347\232\223\346\231\250/20251215-js.......md" deleted file mode 100644 index 48a9745e3c7e8e526fd5f798e391c3be812c4290..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251215-js.......md" +++ /dev/null @@ -1,7 +0,0 @@ -## 笔记 - -什么都没有...... - -## 作业 - -什么都没有...... \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251217-jsjQuery\345\272\22301.md" "b/\347\275\227\347\232\223\346\231\250/20251217-jsjQuery\345\272\22301.md" deleted file mode 100644 index 21e29732e1e901e3eb2836862900e14e70e46e95..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251217-jsjQuery\345\272\22301.md" +++ /dev/null @@ -1,565 +0,0 @@ -## 笔记 - -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/\347\275\227\347\232\223\346\231\250/20251218-jsjQuery\345\272\22302.md" "b/\347\275\227\347\232\223\346\231\250/20251218-jsjQuery\345\272\22302.md" deleted file mode 100644 index cc7ea85337703eea5df4a2426bd396fca20c5dda..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251218-jsjQuery\345\272\22302.md" +++ /dev/null @@ -1,332 +0,0 @@ -## 笔记 - -### 动画效果 - -#### 基础显示隐藏 - -| 方法 | 说明 | -| ---------- | -------------------------------------- | -| `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/\347\275\227\347\232\223\346\231\250/20251219-js\346\225\260\347\273\204\351\253\230\347\272\247\346\226\271\346\263\225.md" "b/\347\275\227\347\232\223\346\231\250/20251219-js\346\225\260\347\273\204\351\253\230\347\272\247\346\226\271\346\263\225.md" deleted file mode 100644 index b83e5043b76cbf84e970134debec121f69fb26e5..0000000000000000000000000000000000000000 --- "a/\347\275\227\347\232\223\346\231\250/20251219-js\346\225\260\347\273\204\351\253\230\347\272\247\346\226\271\346\263\225.md" +++ /dev/null @@ -1,129 +0,0 @@ -## 笔记 - -### 数组核心属性 - -| 属性名 | 说明 | 示例 | -| ----------------- | --------------------------------------------------- | ------------------------------------------------------ | -| `length` | 表示数组元素的个数,可读写(修改会截断 / 扩展数组) | `const arr = [1,2,3]; arr.length = 2; // arr变为[1,2]` | -| `constructor` | 指向数组构造函数 `Array` | `arr.constructor === Array // true` | -| `prototype` | 数组原型(用于扩展方法,非实例属性) | `Array.prototype.myMethod = () => {}` | -| `Symbol.iterator` | 迭代器接口(支持`for...of`遍历) | `for (let item of arr) {}` | - -### 二、数组方法分类基础版本(是否修改原数组) - -#### 2.1 会修改原数组的方法 - -这类方法直接操作原数组,执行后原数组的内容 / 结构会发生变化。 - -| 方法名 | 功能 | 示例 | -| -------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `push()` | 向数组末尾添加一个 / 多个元素,返回新长度 | `const arr = [1,2]; arr.push(3); // arr变为[1,2,3]` | -| `pop()` | 删除数组最后一个元素,返回被删除的元素 | `const arr = [1,2,3]; arr.pop(); // arr变为[1,2]` | -| `unshift()` | 向数组开头添加一个 / 多个元素,返回新长度 | `const arr = [2,3]; arr.unshift(1); // arr变为[1,2,3]` | -| `shift()` | 删除数组第一个元素,返回被删除的元素 | `const arr = [1,2,3]; arr.shift(); // arr变为[2,3]` | -| `splice(start, deleteCount, ...items)` | 增 / 删 / 改数组元素,返回被删除的元素数组 | `const arr = [1,2,3]; arr.splice(1,1,4); // arr变为[1,4,3]` | -| `sort((a,b) => {})` | 对数组元素排序(默认按字符串 Unicode 码点),返回排序后的数组 | `const arr = [3,1,2]; arr.sort(); // arr变为[1,2,3]` | -| `reverse()` | 反转数组元素顺序,返回反转后的数组 | `const arr = [1,2,3]; arr.reverse(); // arr变为[3,2,1]` | -| `fill(value, start, end)` | 用指定值填充数组(覆盖指定范围),返回填充后的数组 | `const arr = [1,2,3]; arr.fill(0,1,2); // arr变为[1,0,3]` | -| `copyWithin(target, start, end)` | 复制数组指定范围元素到目标位置,返回修改后的数组 | `const arr = [1,2,3,4]; arr.copyWithin(0,2); // arr变为[3,4,3,4]` | - -#### 2.2 不修改原数组的方法 - -这类方法不会改变原数组,而是返回新数组(或其他类型值),原数组保持原样。 - -##### (1)返回新数组的方法 - -| 方法名 | 功能 | 示例 | -| -------------------------- | ---------------------------------------------- | ------------------------------------------------------------ | -| `slice(start, end)` | 截取数组指定范围元素,返回新数组(含头不含尾) | `const arr = [1,2,3]; const newArr = arr.slice(1); // newArr=[2,3],arr仍为[1,2,3]` | -| `concat(...arrays/values)` | 拼接数组 / 值,返回新数组 | `const arr1 = [1,2]; const arr2 = arr1.concat(3,[4]); // arr2=[1,2,3,4],arr1不变` | -| `map((item) => {})` | 遍历数组,对每个元素处理后返回新数组 | `const arr = [1,2]; const newArr = arr.map(i => i*2); // newArr=[2,4],arr仍为[1,2]` | -| `filter((item) => {})` | 过滤数组元素,返回符合条件的新数组 | `const arr = [1,2,3]; const newArr = arr.filter(i => i>1); // newArr=[2,3],arr不变` | -| `flat(depth)` | 扁平化数组,返回新数组(depth 为扁平化深度) | `const arr = [1,[2,[3]]]; const newArr = arr.flat(2); // newArr=[1,2,3],arr不变` | -| `flatMap((item) => {})` | `map + flat(1)` 结合,返回新数组 | `const arr = [1,2]; const newArr = arr.flatMap(i => [i,i*2]); // newArr=[1,2,2,4]` | -| `with(index, value)` | 替换数组指定索引的元素,返回新数组(ES2023) | `const arr = [1,2]; const newArr = arr.with(0, 3); // newArr=[3,2],arr仍为[1,2]` | - -##### (2)返回非数组值的方法 - -| 方法名 | 功能 | 示例 | -| -------------------------------------- | ------------------------------------------ | ------------------------------------------------------ | -| `forEach((item) => {})` | 遍历数组(无返回值,仅执行回调) | `arr.forEach(i => console.log(i)); // 原数组不变` | -| `find((item) => {})` | 返回第一个符合条件的元素(无则 undefined) | `arr.find(i => i>1); // 原数组不变` | -| `findIndex((item) => {})` | 返回第一个符合条件的元素索引(无则 - 1) | `arr.findIndex(i => i>1); // 原数组不变` | -| `includes(value, start)` | 判断数组是否包含指定值,返回布尔值 | `arr.includes(2); // 原数组不变` | -| `indexOf(value, start)` | 返回指定值首次出现的索引(无则 - 1) | `arr.indexOf(2); // 原数组不变` | -| `lastIndexOf(value, start)` | 返回指定值最后出现的索引(无则 - 1) | `arr.lastIndexOf(2); // 原数组不变` | -| `every((item) => {})` | 判断所有元素是否符合条件,返回布尔值 | `arr.every(i => i>0); // 原数组不变` | -| `some((item) => {})` | 判断是否有元素符合条件,返回布尔值 | `arr.some(i => i>1); // 原数组不变` | -| `reduce((acc, item) => {}, init)` | 累加 / 归并数组,返回最终归并值 | `arr.reduce((sum, i) => sum+i, 0); // 原数组不变` | -| `reduceRight((acc, item) => {}, init)` | 从右到左归并数组,返回最终归并值 | `arr.reduceRight((sum, i) => sum+i, 0); // 原数组不变` | -| `join(separator)` | 将数组转为字符串,返回拼接后的字符串 | `arr.join(','); // 原数组不变` | -| `toString()` | 将数组转为字符串(默认用逗号分隔) | `arr.toString(); // 原数组不变` | -| `toLocaleString()` | 按本地化规则转为字符串 | `arr.toLocaleString(); // 原数组不变` | -| `entries()` | 返回迭代器(包含索引和值) | `for (let [i, v] of arr.entries()) {} // 原数组不变` | -| `keys()` | 返回索引迭代器 | `for (let i of arr.keys()) {} // 原数组不变` | -| `values()` | 返回值迭代器 | `for (let v of arr.values()) {} // 原数组不变` | - -我已为你优化表格中「完整语法(标注必选 / 可选参数)」和「参数说明」字段的排版,通过换行让内容更易读,同时保留原有的逻辑和格式: - -### 三、数组方法分类完整版本(是否修改原数组) - -#### 3.1修改原数组的方法 - -这类方法直接操作原数组,执行后原数组的内容 / 结构会发生变化,返回值标注在说明中。 - -| 方法名 | 功能 | 完整语法(标注必选 / 可选参数) | 参数说明 | 示例 | -| -------------- | ----------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `push()` | 向数组末尾添加 1 + 元素,返回新长度 | `array.push(...items)`<br>✅ `items`:要添加的元素(1 个或多个) | `items`:<br>- 必选<br>- 任意类型的元素,数量不限 | `const arr = [1,2]; arr.push(3,4); // arr变为[1,2,3,4],返回4` | -| `pop()` | 删除数组最后一个元素,返回被删除的元素 | `array.pop()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.pop(); // arr变为[1,2],返回3` | -| `unshift()` | 向数组开头添加 1 + 元素,返回新长度 | `array.unshift(...items)`<br>✅ `items`:要添加的元素(1 个或多个) | `items`:<br>- 必选<br>- 任意类型的元素,数量不限 | `const arr = [2,3]; arr.unshift(1); // arr变为[1,2,3],返回3` | -| `shift()` | 删除数组第一个元素,返回被删除的元素 | `array.shift()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.shift(); // arr变为[2,3],返回1` | -| `splice()` | 增 / 删 / 改数组元素,返回被删除的元素数组 | `array.splice(start, deleteCount, ...items)`<br>✅ `start`:起始索引<br>❓ `deleteCount`:删除数量(默认删到末尾)<br>❓ `items`:要添加的元素(可选) | - `start`:<br> 必选,整数,指定操作起始位置(负数表示倒数)<br>- `deleteCount`:<br> 可选,非负整数,要删除的元素数量(0 则不删除)<br>- `items`:<br> 可选,要插入到数组中的元素 | `const arr = [1,2,3]; arr.splice(1,1,4); // arr变为[1,4,3],返回[2]` | -| `sort()` | 排序数组元素(默认按字符串 Unicode 码点),返回排序后的数组 | `array.sort(compareFn)`<br>❓ `compareFn(a, b)`:排序对比函数(可选) | - `compareFn`:<br> 可选,回调函数,接收两个参数:<br> ✅ `a`:第一个用于比较的元素<br> ✅ `b`:第二个用于比较的元素<br> 返回值:<0 则 a 排 b 前,=0 则位置不变,>0 则 b 排 a 前 | `const arr = [3,1,2]; arr.sort((a,b) => a-b); // arr变为[1,2,3],返回[1,2,3]` | -| `reverse()` | 反转数组元素顺序,返回反转后的数组 | `array.reverse()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.reverse(); // arr变为[3,2,1],返回[3,2,1]` | -| `fill()` | 用指定值填充数组(覆盖指定范围),返回填充后的数组 | `array.fill(value, start, end)`<br>✅ `value`:填充值<br>❓ `start`:起始索引(默认 0)<br>❓ `end`:结束索引(默认数组长度,不含) | - `value`:<br> 必选,任意类型,填充到数组的值<br>- `start`:<br> 可选,整数,填充起始位置(负数表示倒数)<br>- `end`:<br> 可选,整数,填充结束位置(不含) | `const arr = [1,2,3]; arr.fill(0,1,2); // arr变为[1,0,3],返回[1,0,3]` | -| `copyWithin()` | 复制数组指定范围元素到目标位置,返回修改后的数组 | `array.copyWithin(target, start, end)`<br>✅ `target`:目标位置索引<br>❓ `start`:复制起始索引(默认 0)<br>❓ `end`:复制结束索引(默认数组长度,不含) | - `target`:<br> 必选,整数,复制元素要粘贴到的位置<br>- `start`:<br> 可选,整数,复制起始位置(负数表示倒数)<br>- `end`:<br> 可选,整数,复制结束位置(不含) | `const arr = [1,2,3,4]; arr.copyWithin(0,2); // arr变为[3,4,3,4],返回[3,4,3,4]` | - -#### 3.2不修改原数组的方法 - -这类方法不会改变原数组,返回新数组 / 非数组值,原数组保持原样。 - -##### (1)返回新数组的方法 - -| 方法名 | 功能 | 完整语法(标注必选 / 可选参数) | 参数说明 | 示例 | -| ----------- | ---------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `slice()` | 截取数组指定范围元素,返回新数组(含头不含尾) | `array.slice(start, end)`<br>❓ `start`:起始索引(默认 0)<br>❓ `end`:结束索引(默认数组长度,不含) | - `start`:<br> 可选,整数,截取起始位置(负数表示倒数)<br>- `end`:<br> 可选,整数,截取结束位置(不含) | `const arr = [1,2,3]; const newArr = arr.slice(1); // newArr=[2,3],arr仍为[1,2,3]` | -| `concat()` | 拼接数组 / 值,返回新数组 | `array.concat(...arrays/values)`<br>❓ `arrays/values`:要拼接的数组或值(可选) | `arrays/values`:<br>- 可选<br>- 任意数量的数组或单个值(任意类型) | `const arr1 = [1,2]; const arr2 = arr1.concat(3,[4]); // arr2=[1,2,3,4],arr1不变` | -| `map()` | 遍历数组,对每个元素处理后返回新数组 | `array.map(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:处理函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 map 的原数组(可选) | - `callback`:<br> 必选,对每个元素的处理逻辑,返回处理后的值<br>- `thisArg`:<br> 可选,指定 callback 内 this 的指向<br>- `currentValue`:<br> 必选,数组中正在处理的当前元素<br>- `index`:<br> 可选,当前元素在数组中的索引<br>- `array`:<br> 可选,调用 map 的原数组 | `const arr = [1,2]; const newArr = arr.map((item, idx) => item*2); // newArr=[2,4],arr不变` | -| `filter()` | 过滤数组元素,返回符合条件的新数组 | `array.filter(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:筛选函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 filter 的原数组(可选) | - `callback`:<br> 必选,返回布尔值(true 保留元素,false 过滤)<br>- `thisArg`:<br> 可选,指定 callback 内 this 的指向<br>- `currentValue`:<br> 必选,数组中正在处理的当前元素<br>- `index`:<br> 可选,当前元素在数组中的索引<br>- `array`:<br> 可选,调用 filter 的原数组 | `const arr = [1,2,3]; const newArr = arr.filter((item) => item>1); // newArr=[2,3],arr不变` | -| `flat()` | 扁平化数组,返回新数组 | `array.flat(depth)`<br>❓ `depth`:扁平化深度(默认 1) | `depth`:<br>- 可选<br>- 非负整数,指定扁平化的层级(Infinity 表示无限层级) | `const arr = [1,[2,[3]]]; const newArr = arr.flat(2); // newArr=[1,2,3],arr不变` | -| `flatMap()` | `map + flat(1)`结合,返回新数组 | `array.flatMap(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:处理函数(同 map)<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 flatMap 的原数组(可选) | - `callback`:<br> 必选,返回单个值或数组(最终会被扁平化 1 层)<br>- 其他参数同 map | `const arr = [1,2]; const newArr = arr.flatMap(i => [i,i*2]); // newArr=[1,2,2,4]` | -| `with()` | 替换数组指定索引的元素,返回新数组(ES2023) | `array.with(index, value)`<br>✅ `index`:要替换的索引<br>✅ `value`:新值 | - `index`:<br> 必选,整数,要替换的元素索引(负数表示倒数)<br>- `value`:<br> 必选,任意类型,替换后的新值 | `const arr = [1,2]; const newArr = arr.with(0, 3); // newArr=[3,2],arr仍为[1,2]` | - -##### (2)返回非数组值的方法 - -| 方法名 | 功能 | 完整语法(标注必选 / 可选参数) | 参数说明 | 示例 | -| ------------------ | ------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `forEach()` | 遍历数组(无返回值,仅执行回调) | `array.forEach(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:遍历执行的函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 forEach 的原数组(可选) | - `callback`:<br> 必选,无返回值(返回值会被忽略)<br>- `thisArg`:<br> 可选,指定 callback 内 this 的指向<br>- `currentValue`:<br> 必选,数组中正在处理的当前元素<br>- `index`:<br> 可选,当前元素在数组中的索引<br>- `array`:<br> 可选,调用 forEach 的原数组 | `arr.forEach((item, idx) => console.log(idx, item)); // 原数组不变` | -| `find()` | 返回第一个符合条件的元素(无则 undefined) | `array.find(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:查找条件函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 find 的原数组(可选) | - `callback`:<br> 必选,返回布尔值(true 则返回当前元素)<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.find(item => item>1); // 返回2,arr不变` | -| `findIndex()` | 返回第一个符合条件的元素索引(无则 - 1) | `array.findIndex(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:查找条件函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 findIndex 的原数组(可选) | - `callback`:<br> 必选,返回布尔值(true 则返回当前索引)<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.findIndex(item => item>1); // 返回1,arr不变` | -| `includes()` | 判断数组是否包含指定值,返回布尔值 | `array.includes(value, start)`<br>✅ `value`:要查找的值<br>❓ `start`:起始查找索引(默认 0) | - `value`:<br> 必选,任意类型,要查找的目标值<br>- `start`:<br> 可选,整数,查找起始位置(负数表示倒数) | `const arr = [1,2,3]; arr.includes(2); // 返回true,arr不变` | -| `indexOf()` | 返回指定值首次出现的索引(无则 - 1) | `array.indexOf(value, start)`<br>✅ `value`:要查找的值<br>❓ `start`:起始查找索引(默认 0) | - `value`:<br> 必选,任意类型,要查找的目标值<br>- `start`:<br> 可选,整数,查找起始位置(负数表示倒数) | `const arr = [1,2,3]; arr.indexOf(2); // 返回1,arr不变` | -| `lastIndexOf()` | 返回指定值最后出现的索引(无则 - 1) | `array.lastIndexOf(value, start)`<br>✅ `value`:要查找的值<br>❓ `start`:起始查找索引(默认数组长度 - 1) | - `value`:<br> 必选,任意类型,要查找的目标值<br>- `start`:<br> 可选,整数,反向查找的起始位置(负数表示倒数) | `const arr = [1,2,2,3]; arr.lastIndexOf(2); // 返回2,arr不变` | -| `every()` | 判断所有元素是否符合条件,返回布尔值 | `array.every(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:判断函数<br> ❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 every 的原数组(可选) | - `callback`:<br> 必选,返回布尔值(所有元素返回 true 则最终为 true)<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.every(item => item>0); // 返回true,arr不变` | -| `some()` | 判断是否有元素符合条件,返回布尔值 | `array.some(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:判断函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 some 的原数组(可选) | - `callback`:<br> 必选,返回布尔值(任意元素返回 true 则最终为 true)<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.some(item => item>2); // 返回true,arr不变` | -| `reduce()` | 累加 / 归并数组,返回最终归并值 | `array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`<br>✅ `callback`:归并函数<br>❓ `initialValue`:累加器初始值(可选)<br>callback 参数:<br>✅ `accumulator`:累加器(累计结果)<br>✅ `currentValue`:当前处理的元素<br>❓ `currentIndex`:当前元素索引(可选)<br>❓ `array`:调用 reduce 的原数组(可选) | - `callback`:<br> 必选,返回累计结果(会作为下一次的 accumulator)<br>- `initialValue`:<br> 可选,累加器初始值(无则用数组第一个元素)<br>- `accumulator`:<br> 必选,累计的结果值<br>- `currentValue`:<br> 必选,当前处理的元素<br>- `currentIndex`:<br> 可选,当前元素索引<br>- `array`:<br> 可选,调用 reduce 的原数组 | `const arr = [1,2,3]; arr.reduce((sum, item) => sum+item, 0); // 返回6,arr不变` | -| `reduceRight()` | 从右到左归并数组,返回最终归并值 | `array.reduceRight(callback(accumulator, currentValue, currentIndex, array), initialValue)`<br>✅ `callback`:归并函数(同 reduce)<br>❓ `initialValue`:累加器初始值(可选)<br>callback 参数:同 reduce | 同 reduce,仅遍历顺序为从右到左 | `const arr = [1,2,3]; arr.reduceRight((sum, item) => sum+item, 0); // 返回6,arr不变` | -| `join()` | 将数组转为字符串,返回拼接后的字符串 | `array.join(separator)`<br>❓ `separator`:分隔符(默认逗号) | `separator`:<br>- 可选<br>- 字符串,元素之间的分隔符(空字符串则无分隔) | `const arr = [1,2,3]; arr.join(','); // 返回"1,2,3",arr不变` | -| `toString()` | 将数组转为字符串(默认用逗号分隔) | `array.toString()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.toString(); // 返回"1,2,3",arr不变` | -| `toLocaleString()` | 按本地化规则转为字符串 | `array.toLocaleString(locales, options)`<br>❓ `locales`:语言 / 地区代码(可选)<br>❓ `options`:格式化选项(可选) | - `locales`:<br> 可选,如 "zh-CN"、"en-US"<br>- `options`:<br> 可选,对象,配置格式化规则 | `const arr = [1234, new Date()]; arr.toLocaleString(); // 按本地格式返回字符串` | -| `entries()` | 返回迭代器(包含索引和值) | `array.entries()`<br>无参数 | 无 | `for (let [i, v] of arr.entries()) {} // 原数组不变` | -| `keys()` | 返回索引迭代器 | `array.keys()`<br>无参数 | 无 | `for (let i of arr.keys()) {} // 原数组不变` | -| `values()` | 返回值迭代器 | `array.values()`<br>无参数 | 无 | `for (let v of arr.values()) {} // 原数组不变` | - -#### 标注说明 - -- ✅:参数为**必选** -- ❓:参数为**可选** -- 回调函数的返回值:除标注外,`map`返回处理后的值、`filter`返回布尔值、`find/findIndex`返回布尔值、`every/some`返回布尔值、`reduce/reduceRight`返回累计值,`forEach`无返回值(返回 undefined)。 -- `thisArg`参数:所有带`thisArg`的方法,若省略则 callback 内的`this`指向:非严格模式下为全局对象,严格模式下为 undefined \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show01.png" deleted file mode 100644 index c171d01045ecfb07982eaeb5f75f55d2aa281ab0..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show01.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show02.png" deleted file mode 100644 index c3171c331dd7de445f310348aad1e84b6671e87c..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show02.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show01.png" deleted file mode 100644 index 333b5a1c1351c1b24fbe60cb64b2f2d8d4558750..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show01.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show02.png" deleted file mode 100644 index b0b53c99a6200442ebfa39f11ccb1926bbf10c47..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show02.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show03.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show03.png" deleted file mode 100644 index b1cc315013fe50ded101395fc614e13a35604e12..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show03.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show01.png" deleted file mode 100644 index 60f1d24cf6f6e4d65ac2b7ea1856b233688e9ec3..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show01.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show02.png" deleted file mode 100644 index 9d5dad8e7a1443236dc4d1eb34361d8522a2a3d7..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show02.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show01.png" deleted file mode 100644 index 9ab848b350f706c1d707b94b005c3061297d92e1..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show01.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show02.png" deleted file mode 100644 index 2a4b80b876c23ce98d5b41beb5681352ddda1042..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show02.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show03.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show03.png" deleted file mode 100644 index 877c5fc50f1514b361cc3705497a6b930cd758ff..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show03.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251117_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251117_Image/show01.png" deleted file mode 100644 index 3aa10d5dadda2eca1f91d86eb2f47a0261be2a75..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251117_Image/show01.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251119_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251119_Image/show01.png" deleted file mode 100644 index 05483b381ed801bd5c7ae78367612e359fcc2e4f..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251119_Image/show01.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251119_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251119_Image/show02.png" deleted file mode 100644 index 120966f70b7057b5bd402f71b22896a49d64b178..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251119_Image/show02.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251120_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251120_Image/show01.png" deleted file mode 100644 index a7cd7ab535ab56d2a6028e1854c2b10139ecc2b0..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251120_Image/show01.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251120_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251120_Image/show02.png" deleted file mode 100644 index 94dc07b2c7d36d07c6083317dff407962eb53f72..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251120_Image/show02.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251124_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251124_Image/show01.png" deleted file mode 100644 index 192f108fd85c651c5d80f0f88f8915df0be37e47..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251124_Image/show01.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251124_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251124_Image/show02.png" deleted file mode 100644 index 1ac9b147bba4a9d9190ab1f358beb6b34b7d403c..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251124_Image/show02.png" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251127_Image/show01.gif" "b/\347\275\227\347\232\223\346\231\250/Image/20251127_Image/show01.gif" deleted file mode 100644 index c270418f52aa162daea235ae6777cf361c3e5df1..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251127_Image/show01.gif" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251127_Image/show02.gif" "b/\347\275\227\347\232\223\346\231\250/Image/20251127_Image/show02.gif" deleted file mode 100644 index 410d55d0779e2515b4b735c0c4ead4cd13cc5d19..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251127_Image/show02.gif" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251128_Image/show01.gif" "b/\347\275\227\347\232\223\346\231\250/Image/20251128_Image/show01.gif" deleted file mode 100644 index 271f77ac60020c876603191c22e9ef6b8849f4c6..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251128_Image/show01.gif" and /dev/null differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251128_Image/show02.gif" "b/\347\275\227\347\232\223\346\231\250/Image/20251128_Image/show02.gif" deleted file mode 100644 index a88473f5d330dff9111d0c2fa789b80cfe0cc240..0000000000000000000000000000000000000000 Binary files "a/\347\275\227\347\232\223\346\231\250/Image/20251128_Image/show02.gif" and /dev/null differ diff --git "a/\350\265\226\345\277\227\350\261\252/20251110-JavaScript\347\232\204\345\272\224\347\224\250.md" "b/\350\265\226\345\277\227\350\261\252/20251110-JavaScript\347\232\204\345\272\224\347\224\250.md" deleted file mode 100644 index 6fa0d5c9029a13a28f3b5524fe274edfc1c65f10..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251110-JavaScript\347\232\204\345\272\224\347\224\250.md" +++ /dev/null @@ -1,32 +0,0 @@ -一.JavaScript在HTML中的应用 -```html - 1.直接嵌入标签元素中使用 - <input type="button" value="xx" onclick="xx()"> - 2.内部引用式(嵌入式) - <script> - </script> - 3.外部引用式 - <script src="./xx.js"></script> -``` - - -练习一 -```html - <script> - document.write("千里之行,始于足下") - </script> -``` -![alt text](Snipaste_2025-11-10_17-05-27.png) - -练习二 -```html - <div> - <input type="button" value="web" onclick="log()"> - </div> - <script> - function log(){ - alert('http://www.mingrisoft.com') - } - </script> -``` -![alt text](Snipaste_2025-11-10_17-02-03.png) \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251112-JavaScript\345\237\272\347\241\200.md" "b/\350\265\226\345\277\227\350\261\252/20251112-JavaScript\345\237\272\347\241\200.md" deleted file mode 100644 index 9c7be80dbf80215e129135af69aebababad5d944..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251112-JavaScript\345\237\272\347\241\200.md" +++ /dev/null @@ -1,71 +0,0 @@ -训练一 -```html - <script> - document.write("8848.86m"); - </script> -``` - -训练二 -```html - <script> - let demo ="\ E:\JavaScript\Code\demo \ "; - document.write(demo); - </script> -``` - -训练三 -```html - <script> - let area ="17100000m²"; - document.write(area); - </script> -``` - -训练四 -```html - <script> - let area ="个人信息 <br> 姓名:郭靖 <br> 性别:男 <br> 年龄:20 <br> 身高:1.77m <br> 武功:九阴真经、降龙十八掌"; - document.write(area); - </script> -``` -![alt text](Snipaste_2025-11-12_16-47-49.png) - - - -综合训练一 -```html - <script> - let content = "\ 他强由他强,清风拂山岗\n 他横由他横,明月照大江 \n 他自狠来他自恶,我自一口真气足 \n ————《九阳神功》 \ " - console.log(content); - </script> -``` -![alt text](Snipaste_2025-11-12_11-02-28.png) -综合训练二 -```html - <script> - let earning= "6500"; - let deduct="500"; - let taxstart="5000"; - let tax = "0.03" - let content = (earning-deduct)-((earning-deduct-taxstart)*tax); - document.write("该员工的实际收入为"+content+"元"); - </script> -``` -![alt text](Snipaste_2025-11-12_11-16-31.png) - -综合训练三 -```html - <input type="button" value="天数" onclick="day()"> - <script> - function day(){ - let year ="2024"; - let divisor ="4"; - if(year%4==0 && year%100!=0){ - alert(year+"年2月有29天") - }else{ - alert(year+"年2月有28天") - } - } - </script> -``` -![alt text](Snipaste_2025-11-12_16-19-46.png) \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251113-JavaScript\350\277\220\347\256\227\347\254\246.md" "b/\350\265\226\345\277\227\350\261\252/20251113-JavaScript\350\277\220\347\256\227\347\254\246.md" deleted file mode 100644 index ee170d7f2cd49feb0a504a103eb264423d873196..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251113-JavaScript\350\277\220\347\256\227\347\254\246.md" +++ /dev/null @@ -1,53 +0,0 @@ -一.逻辑运算符 -```bash - 运算符 描 述 示 例 - && 逻辑与 a&&b 当a和b都为真时,结果为真,否则为假 - || 逻辑或 a||b 当a为真或者b为真时,结果为真,否则为假 - ! 逻辑非 !a 当a为假时,结果为真,否则为假 -``` - -二.typeof运算符 -```bash - 数据类型 返回值 - 数值 number - 字符串 string - 布尔值 bollean - undefined undefined - null object - 对象 object - 函数 function -``` - -训练五 -```html - <script> - let saving ="100000"; - let year="3"; - let accrual="0.0275"; - let sum=(Number(saving) * Number(year) * Number(accrual)) + Number(saving); - document.write("本息合计为"+sum); - </script> -``` - -训练六 -```html - <script> - let grade ="65"; - if(grade>=60 && grade<=100){ - document.write("及格") - }else if(grade>0 && grade<60){ - document.write("不及格") - } - </script> -``` - -训练七 -```html - <script> - let toplong="30"; - let height="30" - let botlong="50" - let area= ((Number(toplong)+Number(botlong))*Number(height))/2 ; - document.write(area) - </script> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251114-JavaScript\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\350\265\226\345\277\227\350\261\252/20251114-JavaScript\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" deleted file mode 100644 index c8a2c06140109f8c48617d61a302486e7ae95cb7..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251114-JavaScript\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" +++ /dev/null @@ -1,212 +0,0 @@ -训练1 -```html - <script> - let num1=26; - let num2=17; - let num3=10; - let num4=20; - let num=num1; - if(num1>num2){ - num=num2; - } - if(num2>num3){ - num=num3; - } - if(num3>num4){ - num=num4; - } - document.write("最小值为"+num); - </script> -``` - -训练2 -```html - <script> - let api="56"; - if(api>=0 && api<=100){ - document.write("良好"); - }else if(api>=101 && api<=200){ - document.write("轻度污染"); - }else if(api>=201 && api<=300){ - document.write("重度污染") - } - </script> -``` - -训练3 -```html - <script> - let season = ""; - let month = 11; - switch (month) { - case 1: - season = "冬天" - break; - case 2: - season = "冬天" - break; - case 3: - season = "春天" - break; - case 4: - season = "春天" - break; - case 5: - season = "春天" - break; - case 6: - season = "夏天" - break; - case 7: - season = "夏天" - break; - case 8: - season = "夏天" - break; - case 9: - season = "秋天" - break; - case 10: - season = "秋天" - break; - case 11: - season = "秋天" - break; - case 12: - season = "冬天" - break; - } - document.write(month+"月份属于"+season); - </script> -``` - -训练4 -```html - <script> - let inhence = 50; - let basewage = 3000; - let year = 1; - let liyear = 5; - do { - let inwage = (year - 1) * inhence; - let realwage = basewage + inwage; - document.write("第"+year+"年的实际工资为"+realwage+"<br>") - year++; - } while (year <= liyear); - </script> -``` - -训练5 -```html - <script> - let totalhead = 35; - let totalfeet = 94; - for (let chicken = 0; chicken <= totalhead; chicken++) { - let rabbit = totalhead - chicken; - if (chicken * 2 + rabbit * 4 === totalfeet) { - document.write("鸡的数量为"+ rabbit); - document.write("<br>"); - document.write("兔的数量为:" + chicken); - break; - } - } - </script> -``` - -训练6 -```html - <script> - let sum = 0; - for (let i = 1; i <= 1000; i++) { - if (i % 65 !== 0) { - continue; - } - sum+=i - } - document.write("和为:"+sum); - </script> -``` - -训练7 -```html - <script> - document.write("尚未使用的卡位:"); - for (let row = 1; row <= 3; row++) { - document.write("<br>"); - for (let col = 1; col <= 3; col++) { - if (((row == 1 && col == 3) || (row == 3 && col == 2))) { - continue; - } - document.write("第" + row + "排第" + col + "个"); - } - } - </script> -``` - -综合练习1 -```html - <script> - let bmi ="23"; - document.write("BMI:"+Number(bmi)) - document.write("<br>") - if(bmi<20){ - document.write("结果: 体重过轻") - }else if(bmi>=20 && bmi<25){ - document.write("结果: 体重适中") - }else if(bmi>=25 && bmi<30){ - document.write("结果: 体重过重") - }else if(bmi>=30 && bmi<35){ - document.write("结果: 肥胖") - }else if(bmi>35){ - document.write("结果: 非常肥胖") - } - </script> -``` - -综合练习2 -```html - <body> - 请选择您的出生年月: - <select id="year"></select> - <select id="month"></select> - <script> - for(let i = 2025; i >= 1999; i--) { - const option = document.createElement('option'); - option.value = i; - option.text = i; - document.getElementById('year').appendChild(option); - } - - for(let i = 1; i <= 12; i++) { - const option = document.createElement('option'); - option.value = i; - option.text = i + '月'; - document.getElementById('month').appendChild(option); - } - </script> -</body> -``` - -综合练习3 -```html - <style> - table{ - border-collapse: collapse; - } -</style> -<body> - <script> - const table = document.createElement('table'); - table.border = '1'; - for (let i = 0; i < 10; i++) { - const row = document.createElement('tr'); - for (let j = 0; j < 10; j++) { - const cell = document.createElement('td'); - cell.textContent = i * 10 + j + 1; - row.appendChild(cell); - } - table.appendChild(row); - } - document.body.appendChild(table); - </script> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251117-JavaScript\345\207\275\346\225\260.md" "b/\350\265\226\345\277\227\350\261\252/20251117-JavaScript\345\207\275\346\225\260.md" deleted file mode 100644 index 70362a3d7d9c5fbf163a015ec9bf0b1ae2388841..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251117-JavaScript\345\207\275\346\225\260.md" +++ /dev/null @@ -1,42 +0,0 @@ -一.函数的定义 -```html - 1.匿名函数定义 - <script> - let getNameById = function(){ - - }; - </script> - 2.传统定义 - <script> - funciton getNameById(){ - - } - </script> - 3.箭头定义 - <script> - let getNameById = ()=>{ - - } - </script> -``` - -训练1 -```html - <script> - function address(province,city,area,detail){ - document.write(province+city+area+detail); - } - address("福建省","龙岩市","新罗区","闽西职业技术学院"); - </script> -``` - -训练2 -```html - <script> - function absolute(){ - let num = -30; - document.write(num+"的绝对值为"+Math.abs(num)) - } - absolute(); - </script> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251119-JavaScript\345\207\275\346\225\260.md" "b/\350\265\226\345\277\227\350\261\252/20251119-JavaScript\345\207\275\346\225\260.md" deleted file mode 100644 index 601b7b43bcac1b09331ca1840953734bcc8e4084..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251119-JavaScript\345\207\275\346\225\260.md" +++ /dev/null @@ -1,210 +0,0 @@ -训练3 -```html - <script> - function compare(num1,num2){ - let result= document.write("更大的为"+Math.max(num1,num2)); - return result; - } - compare("9","10") - </script> -``` - -训练4 -```html - <script> - function compare(num1,num2,num3){ - let result= document.write("最小的为"+Math.min(num1,num2,num3)); - return result; - } - compare("16","12","17") - </script> -``` - -训练5 -```html - <script> - function discount(sum){ - if(sum>=500){ - document.write("可以享受优惠活动"); - }else if(sum>=0 && sum<500){ - document.write("消费总额不满500元,不可以享受优惠活动"); - } - } - function num(num1,num2,num3){ - discount(sum=num1+num2+num3); - } - num("199","156","165"); - </script> -``` - -训练6 -```html - <script> - function line(sum){ - if(sum>=550){ - document.write("达到本科分数线"); - }else if(sum>=0 && sum<550){ - document.write("未达到本科分数线"); - } - } - function num(num1,num2,num3,num4){ - line(sum=num1+num2+num3+num4); - } - num("108","115","126","237"); - </script> -``` - -训练7 -```html - <script> - function register(chat,pwd){ - if(chat=="mr" && pwd=="mrsoft"){ - document.write("登录成功"); - }else if(chat=="mr" && pwd!="mrsoft"){ - document.write("密码错误"); - } - } - register("mr","mrsoft"); - </script> -``` - -训练8 -```html - <script> - function divide() { - let num = "0"; - let item = "0"; - for (let i = 0; i <= 1000; i++) { - if (i % 3 == 0 && i % 5 == 0) { - num = i; - document.write(num + " "); - item++; - } - if (item % 7 == 0) { - document.write("<br>"); - } - } - } - divide(); - </script> -``` - -综合训练1 -```html - <script> - function age(num) { - if (num > 0 && num <= 6) { - alert(num + "正处在童年"); - } else if (num > 7 && num <= 17) { - alert(num + "正处在少年"); - } else if (num > 18 && num <= 40) { - alert(num + "正处在青年"); - } else if (num > 41 && num <= 65) { - alert(num + "正处在中年"); - } else if (num >= 66) { - alert(num + "正处在老年") - } - } - age("20"); - </script> -``` - -综合训练2 -```html - <script> - function date(year,month){ - let day1="30"; - let day2="31"; - if(month==1){ - alert(year+"年"+month+"月有"+day2+"天"); - } - if(month==2){ - if(year%4==0 && year%100!=0){ - alert(year+"年"+month+"月有28天"); - }else{ - alert(year+"年"+month+"月有29天") - } - } - if(month==3){ - alert(year+"年"+month+"月有"+day2+"天"); - } - if(month==4){ - alert(year+"年"+month+"月有"+day1+"天"); - } - if(month==5){ - alert(year+"年"+month+"月有"+day2+"天"); - } - if(month==6){ - alert(year+"年"+month+"月有"+day1+"天"); - } - if(month==7){ - alert(year+"年"+month+"月有"+day2+"天"); - } - if(month==8){ - alert(year+"年"+month+"月有"+day2+"天"); - } - if(month==9){ - alert(year+"年"+month+"月有"+day1+"天"); - } - if(month==10){ - alert(year+"年"+month+"月有"+day2+"天"); - } - if(month==11){ - alert(year+"年"+month+"月有"+day1+"天"); - } - if(month==12){ - alert(year+"年"+month+"月有"+day2+"天"); - } - } - date("2024","6"); - </script> -``` - -综合训练3 -```html - <style> - table{ - border-collapse: collapse; - } -</style> -<body> - <script> - function table(){ - document.write('<table border=1>'); - document.write('<tr>'); - document.write('<td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td>'); - document.write('</tr>'); - document.write('<tr>'); - document.write('<td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td>'); - document.write('</tr>'); - document.write('<tr>'); - document.write('<td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td>'); - document.write('</tr>'); - document.write('<tr>'); - document.write('<td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td>'); - document.write('</tr>'); - document.write('<tr>'); - document.write('<td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td><td width=80px height=60px></td>'); - document.write('</tr>'); - } - table(); - </script> -``` - -斐波那契数列 -```html - <script> - function num(n) { - if (n === 0) return 0; - if (n === 1) return 1; - if (n >= 2) { - return num(n-1)+num(n-2); - } - } - const result = []; - for (let i = 0; i < 10; i++) { - result.push(num(i)); - } - document.write(result); - </script> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251120-JavaScript\345\257\271\350\261\241.md" "b/\350\265\226\345\277\227\350\261\252/20251120-JavaScript\345\257\271\350\261\241.md" deleted file mode 100644 index fbf0ca4a489b72d5ff950c8cb76642aa8a4b50df..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251120-JavaScript\345\257\271\350\261\241.md" +++ /dev/null @@ -1,74 +0,0 @@ -训练1 -```html - <script> - let startdate=new Date(2023,4,1); - let enddate=new Date(2023,5,1); - let date=enddate.getTime()-startdate.getTime(); - let dates=Math.ceil(date/(1000*60*60)); - document.write("间隔小时数为"+dates+"小时"); - </script> -``` - -训练2 -```html - <script> - let date1=new Date(2023,5,7); - let date2=new Date(2025,10,20); - let date3=date1.getTime()-date2.getTime(); - let dates=Math.ceil(date3/(1000*60*60*24)); - document.write("距2023年高考还有"+dates+"天"); - </script> -``` - -训练3 -```html - <script> - function btn(e){ - if(e.button==0){ - alert("刚刚单击了鼠标左键"); - }else if(e.button==1){ - alert("刚刚单击了鼠标中键") - }else if(e.button==2){ - alert("刚刚单击了鼠标右键") - } - } - document.onmousedown=btn; - </script> -``` - -综合练习1 -```html -<body> - 请输入要生成随机数的位数:</br> - <form name="form"> - <input type="text" name="digit"> - <input type="button" value="生成" onclick="ran(form.digit.value)"/> - </form> - <script> - function ran(digit) { - let result = ""; - for (i = 0; i < digit; i++) { - result = result + (Math.floor(Math.random() * 6) + 1); - } - alert(result); - } - </script> -</body> -``` - -综合练习2 -```html - <script> - let birthday = new Date(1996, 5, 9); - let now = new Date(); - let day = now.getTime() - birthday.getTime(); - let days = Math.floor(day / (1000 * 60 * 60 * 24)); - let hours = Math.floor((day % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) - let minute = Math.floor(day % (1000 * 60 * 60) / (1000 * 60)) - let second = Math.floor(day % (1000 * 60) / (1000)) - document.write(days + "<br>"); - document.write(hours + "<br>") - document.write(minute + "<br>") - document.write(second) - </script> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251121-JavaScript\346\225\260\347\273\204.md" "b/\350\265\226\345\277\227\350\261\252/20251121-JavaScript\346\225\260\347\273\204.md" deleted file mode 100644 index 3c21d25e8548c4b7d609ea26c3ed209a0c9d6465..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251121-JavaScript\346\225\260\347\273\204.md" +++ /dev/null @@ -1,28 +0,0 @@ -一.定义空数组 -```html - 1.定义空数组 - <script> - let arrayObject = new Array(); - </script> - 2.添加数组元素 - <script> - let arrayObject = new Array(); - arr[0]="html"; - arr[1]="css"; - </script> -``` -二.指定数组长度 -```html - <script> - let arrayObject = new Array(3); - arr[0]="html"; - arr[1]="css"; - arr[2]="javascript"; - </script> -``` -三.指定数组元素 -```html - <script> - let arrayObject = new Array("html","css","javascript"); - </script> -``` diff --git "a/\350\265\226\345\277\227\350\261\252/20251124-JavaScript\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210string\345\257\271\350\261\241.md" "b/\350\265\226\345\277\227\350\261\252/20251124-JavaScript\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210string\345\257\271\350\261\241.md" deleted file mode 100644 index 4d4ce6b211fc0eded777b06180412608b9c5a9da..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251124-JavaScript\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210string\345\257\271\350\261\241.md" +++ /dev/null @@ -1,173 +0,0 @@ -一.数组对象的方法 -```html - 1.concat()方法 (用于将其他数组连接到当前数组的尾端) - (1)在数组的尾部添加数组元素 - <script> - let arr = new Array(1,2,3,4,5,6,7,8) - document.write(arr.concat(9,10)); - </script> - (2)在数组的尾部添加其他数组 - <script> - let arr1 = new Array("cat","dog","horse") - let arr2 = new Array("pig","cow","goat"); - document.write(arr1.concat(arr2)); - </script> - - 2.join()方法 (用于将数组中的所有元素放入一个字符串中) - <script> - let arr = new Array("cat","dog","horse","pig") - document.write(arr.join("&")); - </script> - - 3.splice()方法 (删除元素) - <script> - let arr=[1,2,3,4,5,6,7,8] - arr.splice(1,1); - // 第一位是从哪一位开始删除,第二个参数设置的是删除几个 - </script> - - 4.slice()方法 (从某个已有的数组中返回选定的元素) - <script> - let arr=[1,2,3,4,5,6,7,8]; - arr.slice(0,5); - // 两个都是索引左闭右开 - </script> -``` - -制作表格 -```html - <script> - let table = (row, col, width, height, bordercolor) => { - let colstr = ""; - for (let i = 0; i < col; i++) { - colstr += '<td style="width:' + width + 'px;border:1px solid' + bordercolor + '">111</td>'; - } - let rowstr = ""; - for (let i = 0; i < row; i++) { - rowstr += '<tr style="height:' + height + 'px;">' + colstr + '</tr>'; - } - let tablestr = '<table>'+rowstr+'</table>'; - document.write(tablestr) - } - table(6, 3, 80, 30, 'black'); - </script> -``` - -训练1 -```html - <script> - let date=new Array("2025-11-24","星期一"); - document.write(date); - </script> -``` - -训练2 -```html - <script> - Array.prototype.max=function(){ - return Math.max(...this); - } - let number=[5,7,6,3,9,2]; - document.write(number.max()); - </script> -``` - -训练3 -```html - <script> - let num=[1,2,3,4,5,6]; - let arr=num.slice(1,5); - document.write(arr); - </script> -``` - -综合训练1 -```html - <script> - let station=["长春","昌图西","铁岭西","沈阳北","绥中北","北京"]; - document.write("途径站:"+station+"<br>"); - document.write("反向站:"+station.reverse()); - </script> -``` - -综合训练2 -```html - -``` - -string对象 -训练1 -```html - <script> - let arr=new Array("《雪山飞狐》","《连城记》","《天龙八部》","《射雕英雄传》","《鹿鼎记》","《笑傲江湖》","《书剑恩仇录》","《神雕侠侣》","《倚天屠龙记》","《碧血剑》"); - let fourname=""; - for(let i=0;i<arr.length;i++){ - if(arr[i].length==6){ - fourname+=arr[i]; - } - } - document.write(fourname); - </script> -``` -训练2 -```html - <script> - let arr = new Array("1330431****", "1567766****", "1304316****", "1526567****","1580433****", "139****0431"); - let result = arr.filter(number => number.includes("0431")); - document.write(result); - </script> -``` -训练3 -```html - <script> - let arr = "4006****66@qq.com"; - document.write(arr.substr(0,10)); - </script> -``` -综合训练1 -```html - <script> - let arr ="abc@sina.com"; - if(arr.indexOf("@") < arr.indexOf(".")){ - alert("注册邮箱符合要求"); - }else("注册邮箱不符合要求"); - </script> -``` -综合训练2 -```html - <script> - function randomstring() { - let str = '0123456789ABCDEFG'; - let sp = str.split(''); - let randomstr = ''; - - for (let i = 0; i < 6; i++) { - let num = Math.floor(Math.random() * splength); - randomstr += sp[num]; - } - return randomstr; - } - document.write(randomstring()); - </script> -``` -综合训练3 -```html - <script> - function formatNum(num) { - let numStr = num.toString(); - let result = ''; - let count = 0; - for (let i = numStr.length - 1; i >= 0; i--) { - count++; - result = numStr[i] + result; - if (count % 3 == 0 && i != 0) { - result = ',' + result; - } - } - return result; - } - document.write(formatNum(13625966)); -</script> -``` - - diff --git "a/\350\265\226\345\277\227\350\261\252/20251126-JavaScript\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\350\265\226\345\277\227\350\261\252/20251126-JavaScript\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 0ea6bb17de9da7902759d42bcf04de8815de701f..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251126-JavaScript\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,8 +0,0 @@ -一.正则表达式 -```bash - 字符串.match(正则) 返回匹配到的字符串 - 字符串.replace(正则,'要替换的字符串') 返回替换后的完整字符串 - - 正则.exec(字符串) 返回匹配到的字符串,所在的位置,完整字符串 - 正则.test(字符串) 返回匹配字符串的结果:true false -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251127-JavaScript\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\347\250\213\345\272\217\350\260\203\350\257\225.md" "b/\350\265\226\345\277\227\350\261\252/20251127-JavaScript\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\347\250\213\345\272\217\350\260\203\350\257\225.md" deleted file mode 100644 index d7ec818674afbcb88e55314b468f567dbe86ffd3..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251127-JavaScript\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\347\250\213\345\272\217\350\260\203\350\257\225.md" +++ /dev/null @@ -1,81 +0,0 @@ -训练1 -```html - <script> - let arr = "我喜欢JavaScript"; - try { - throw new Error("模拟执行出错"); - } catch (err) { - console.log("对象不支持此方法", err.message); - } finally { - console.log("结束"); - } -</script> -``` - -训练2 -```html - <script> - let arr ="我喜欢JavaScript"; - try{ - throw new Error("模拟执行错误"); - }catch(err){ - let errmes = err.message; - let errna = err.name; - console.log("错误类型为:"+errna+"错误信息为:"+errmes); - }finally{ - console.log("结束"); - } -</script> -``` - -综合训练1 -```html - <body> - 输入1~5的数字:<br><input type="text" id="input"><button onclick="find()">查找</button><br> - <input type="text" id="result" readonly><br> - - <script> - const arr = ["A", "B", "C", "D", "E"]; - - function find() { - let inputVal = document.getElementById("input").value; - let result = document.getElementById("result"); - result.value = ""; - try { - const num = Number(inputVal); - if (num < 1 || num > 5) { - throw new Error("输入1~5的数字") - } - result.value = arr[num - 1]; - } catch (err) { - alert(err.message); - } finally { - document.getElementById("input").value = ""; - } - } - </script> - </body> -``` - -综合训练2 -```html - <body> - 用户名:<input type="text" id="u"><br> - 密码:<input type="password" id="p"><br> - <button onclick="">测试</button> - - <script> - function check() { - const u = document.getElementById('u').value.trim(); - const p = document.getElementById('p').value.trim(); - try { - if (!/^[a-z0-9]{3,8}$/i.test(u)) throw "用户名错误"; - if (!/^(?=.*[a-z])(?=.*\d).{6,12}$/i.test(p)) throw "密码错误"; - alert("符合要求"); - } catch (e) { - alert("不符合要求"+e); - } - } - </script> -</body> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251128-JavaScript\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\350\265\226\345\277\227\350\261\252/20251128-JavaScript\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 2a420d84328282cffa5c1ba5eb38806cdcbb073f..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251128-JavaScript\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,159 +0,0 @@ -训练1 -```html - <style> - #bgc { - width: 100px; - height: 100px; - background-color: red; - } -</style> - -<body> - <div id="bgc"></div> - - <script> - let di = document.getElementById('bgc'); - function mouseover() { - di.style.border ='1px solid black'; - } - function mouseout(){ - di.style.border='none'; - } - di.addEventListener('mouseover',mouseover) - di.addEventListener('mouseout',mouseout) - </script> -</body> -``` - -训练2 -```html - <body> - <p>中国的“国球”是()。</p> - <p>A. 篮球</p> - <p>B. 排球</p> - <p>C. 乒乓球</p> - <p>D. 羽毛球</p> - <p id="result"></p> - <script> - let correctAnswer = 'C'; - let resultDisplay = document.getElementById('result'); - document.addEventListener('keydown', function(event) { - let userPressed = event.key.toUpperCase(); - if (userPressed === 'A' || userPressed === 'B' || userPressed === 'C' || userPressed === 'D') { - if (userPressed === correctAnswer) { - resultDisplay.textContent = '答对了'; - } else { - resultDisplay.textContent = '答错了,正确答案是 ' + correctAnswer + '。'; - - } - } - }); - </script> -``` - -训练3 -```html -<body> - <h2>当前时间是:</h2> - <p id="time"></p> - <script> - let time=new Date(); - let timedocument=document.getElementById('time'); - timedocument.textContent=time.toLocaleString(); - </script> -</body> - -``` - -训练4 -```html -<body> - <h1>窗口尺寸:</h1> - <p id="size"></p> - <script> - let size = document.getElementById('size'); - function updatesize() { - let width = window.innerWidth; - let height = window.innerHeight; - size.textContent =`宽度:${width},高度:${height}`; - } - window.addEventListener('resize', updatesize); - updatesize(); - </script> -</body> -``` - -训练5 -```html - 0<style> - #bgc { - width: 100px; - height: 100px; - background-color: red; - border: 1px solid yellow; - } - </style> - <body> - <div id="bgc"></div> - - <script> - let di = document.getElementById('bgc'); - function mouseover() { - di.style.border ='1px solid black'; - } - function mouseout(){ - di.style.border=''; - } - di.addEventListener('mouseover',mouseover) - di.addEventListener('mouseout',mouseout) - </script> - </body> -``` - -训练6 -```html - <body> - 请选择您的出生年月: - <select id="year"></select> - <select id="month"></select> - <script> - for(let i = 2025; i >= 1999; i--) { - const option = document.createElement('option'); - option.value = i; - option.text = i; - document.getElementById('year').appendChild(option); - } - - for(let i = 1; i <= 12; i++) { - const option = document.createElement('option'); - option.value = i; - option.text = i + '月'; - document.getElementById('month').appendChild(option); - } - </script> -</body> -``` - -训练7 -```html - <body> - <h2>登录</h2> - <form onreset="return Reset()"> - 用户名: <input type="text" name="username" id="username"><br><br> - 密码: <input type="password" name="password" id="password"><br><br> - <input type="submit" value="登录"> - <input type="reset" value="重置"> - </form> - <script> - function Reset() { - return confirm('确定要重置所有输入信息吗?'); - } - </script> -</body> -``` - -训练8 -```html - -``` - diff --git "a/\350\265\226\345\277\227\350\261\252/20251201-JavaScript\346\213\226\346\213\275.md" "b/\350\265\226\345\277\227\350\261\252/20251201-JavaScript\346\213\226\346\213\275.md" deleted file mode 100644 index f6832b35f1f9f04acfb1ac0c3bee71c501523b0e..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251201-JavaScript\346\213\226\346\213\275.md" +++ /dev/null @@ -1,62 +0,0 @@ -综合练习1 -```html - <body> - <div id="text">欢迎购买明日科技图书</div> - - <script> - let content = document.getElementById('text'); - function mouseover() { - content.style.fontSize = '20px'; - } - function mouseout() { - content.style.fontSize = '16px'; - } - content.addEventListener('mouseover', mouseover); - content.addEventListener('mouseout', mouseout); - </script> -</body> -``` - -综合练习2 -```html - <body> - <input type="button" id="bto" value="关灯" onclick="btnswitch()"> - - <script> - let switchstatus = true; - - function btnswitch() { - let color = switchstatus ? 'black' : 'white'; - let btnvalue = switchstatus ? '开灯' : '关灯'; - let body = document.body.style.backgroundColor = color; - let btn=document.getElementById('bto').value=btnvalue; - switchstatus = !switchstatus; - } - </script> -</body> -``` - -综合练习3 -```html - <style> - #test{ - color: black; - background-color: white; - } -</style> -<body> - <input type="button" id="test" value="测试" onclick="testcolor()"> - - <script> - let switchstatus= true; - function testcolor(){ - let bgc=switchstatus? 'white' : 'green' - let content=switchstatus?'black':'white' - let con=document.getElementById('test').style.color=content; - let bg=document.getElementById('test').style.backgroundColor=bgc; - switchstatus=!switchstatus; - } - - </script> -</body> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251203-JavaScriptDocument\345\257\271\350\261\241.md" "b/\350\265\226\345\277\227\350\261\252/20251203-JavaScriptDocument\345\257\271\350\261\241.md" deleted file mode 100644 index cab0c5e7aeef9be9453b00573765a95f4c6fd11b..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251203-JavaScriptDocument\345\257\271\350\261\241.md" +++ /dev/null @@ -1,158 +0,0 @@ -训练1 -```html - <style> - #content{ - width: 100px; - height: 20px; - color: black; - background-color: red; - } -</style> -<body> - <input type="button" id="changecolor" value="交互颜色" onclick="stwitchbtn()"> - <div id="content"> 这是文档内容</div> - <script> - let butstatus=true; - function stwitchbtn(){ - let color=butstatus?'red':'black'; - let bgc=butstatus?'black':'red'; - let colorbtn=document.getElementById('content').style.color=color; - let bgcbtn=document.getElementById('content').style.backgroundColor=bgc; - butstatus=!butstatus; - } - </script> -</body> -``` - -训练2 -```html - <script> - document.write(`当前文档的文件名称:${document.URL}`) - </script> -``` - -训练3 -```html - <body> - <input type="button" id="insert" value="添加文字" onclick="addword()"> - <script> - let count=1; - function addword(){ - let word = document.createElement('div'); - word.innerText=`这是新增的第${count}个内容`; - document.body.appendChild(word); - count++; - } - </script> -</body> -``` - -综合训练1 -```html - <style> - #cont{ - font-size: 20px; - } -</style> -<body> - <select name="color" id="changecolor" onchange="change()"> - <option value="blue">蓝色背景</option> - <option value="green">绿色背景</option> - <option value="red">红色背景</option> - </select> - <pre id="cont"> - 李白《行路难·其一》 - 金樽清酒斗十千,玉盘珍羞直万钱。 - 停杯投箸不能食,拔剑四顾心茫然。 - 欲渡黄河冰塞川,将登太行雪满山。 - 闲来垂钓碧溪上,忽复乘舟梦日边。 - 行路难,行路难,多歧路,今安在? - 长风破浪会有时,直挂云帆济沧海。 - </pre> - <script> - function change() { - let contact = document.getElementById('changecolor'); - let content = document.getElementById('cont'); - let color = contact.value; - let bgc = document.body; - switch (color) { - case 'blue': - content.style.color = 'red'; - bgc.style.backgroundColor = 'blue'; - break; - case 'green': - content.style.color = 'blue'; - bgc.style.backgroundColor = 'green'; - break; - case 'red': - content.style.color = 'green'; - bgc.style.backgroundColor = 'red'; - break; - } - } - </script> -</body> -``` - -综合练习2 -```html - <style> - #modal { - display: none; - } - .close { - background-color: white; - cursor: pointer; - } - </style> - <body> - <a href="#" onclick="show()">打开图片</a> - <div id="modal"> - <span class="close" onclick="hide()">关闭</span> - <img src="./OIP-C.webp" class="square"></div> - </div> - <script> - function show() { - document.getElementById('modal').style.display = 'flex'; - } - function hide() { - document.getElementById('modal').style.display = 'none'; - } - </script> - </body> -``` - -综合训练3 -```html - <style> - #button{ - position: fixed; - } - .square { - width: 100px; - height: 100px; - display: none; - margin: 10px; - float: left; - margin-top: 50px; - } -</style> -<body> - <button id="button" onclick="show()">添加用户头像</button> - <div class="square" style="background: red;"></div> - <div class="square" style="background: green;"></div> - <div class="square" style="background: blue;"></div> - <div class="square" style="background: yellow;"></div> - <div class="square" style="background: pink;"></div> - <script> - let num = 0; - let squares = document.querySelectorAll('.square'); - function show() { - if (num < squares.length) { - squares[num].style.display = 'block'; - num++; - } - } - </script> -</body> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251204-JavaScript\350\212\202\347\202\271.md" "b/\350\265\226\345\277\227\350\261\252/20251204-JavaScript\350\212\202\347\202\271.md" deleted file mode 100644 index 36ede271d5d4fbe8d0f03313b6f3b2d73d54a057..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251204-JavaScript\350\212\202\347\202\271.md" +++ /dev/null @@ -1,105 +0,0 @@ -训练1 -```html - <body> - <input type="text" id="txt" placeholder="请输入文本"> - <select id="mycolor"> - <option value="red">红色</option> - <option value="blue">蓝色</option> - <option value="pink">粉色</option> - <option value="yellow">黄色</option> - <option value="green">绿色</option> - </select> - <input type="button" id="add" value="添加"> - <div id="content"></div> - - <script> - let mycolor = document.getElementById('mycolor'); - let txt = document.getElementById('txt'); - let add = document.getElementById('add'); - let cont = document.getElementById('content'); - - add.addEventListener('click', function () { - let txtval = txt.value; - let color = mycolor.value; - let main = document.createElement('p'); - main.innerText = txtval; - main.style.color = color; - cont.appendChild(main); - txt.value = ''; - }) - </script> -</body> -``` - -训练2 -```html - <body> - <input type="text" id="txt" placeholder="请输入歌名"> - <input type="button" id="search" value="查询"> - <div id="name"></div> - <pre id="lyric"> - 翻开回忆角落 完美的生活 - 以为幸福都可以掌握 - 仔细回味当初 那个故事背后 - OH 原来是我 犯下从没承认的错 - 我从来没想过 我会这样做 - 从来没爱过 所以爱错 - </pre> - - <script> - let name = document.getElementById('name'); - let lyric = document.getElementById('lyric'); - let txt = document.getElementById('txt') - let search = document.getElementById('search'); - - search.addEventListener('click', function () { - name.innerText=''; - let txtval = txt.value; - let song = document.createElement('p'); - if (txtval == "爱错") { - song.innerText = txtval; - name.appendChild(song); - }else{ - song.innerText="歌名错误"; - name.appendChild(song); - } - }) - </script> -</body> -``` - -训练3 -```html - <style> - #all { - list-style: none; - } -</style> -<body> - <ul id="all"> - <h2>最新电影资讯</h2> - <li id="1">1.《金蝉脱壳》两大动作巨星联手</li> - <li id="2">2.《阿甘正传》励志而传奇的一生</li> - <li id="3">3.《爱乐之城》爱情与梦想的交织</li> - <li id="4">4.《头号玩家》游戏梦想照进现实</li> - </ul> - <div> - 输入影片咨询编号: - <input type="text" id="txt"> - <input type="button" id="del" value="删除"> - </div> - <script> - let txt=document.getElementById('txt'); - let del=document.getElementById('del'); - let all=document.getElementById('all'); - del.addEventListener('click',function(){ - let txtval=txt.value; - let delval=document.getElementById(txtval); - if(delval){ - all.removeChild(delval); - txt.value=''; - } - }) - </script> -</body> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251205-JavaScript\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\350\265\226\345\277\227\350\261\252/20251205-JavaScript\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 252996e6b5897e86ac5463810678d0a9f3c0acf2..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251205-JavaScript\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,179 +0,0 @@ - - -训练4 -```html - <style> - .box{ - display: flex; - } -</style> -<body> - <div class="box"> - <ul id="list1"> - <li id="item1">黄瓜</li> - <li id="item2">茄子</li> - <li id="item3">杧果</li> - </ul> - <ul id="list2"> - <li id="item4">西瓜</li> - <li id="item5">蜜橘</li> - <li id="item6">萝卜</li> - </ul> - </div> - <input type="button" id="move" value="移动"> - <script> - let move=document.getElementById('move'); - let list1=document.getElementById('list1'); - let item3=document.getElementById('item3'); - let list2=document.getElementById('list2'); - let item6=document.getElementById('item6'); - move.addEventListener('click',function(){ - list1.appendChild(item6); - list2.appendChild(item3); - - }) - </script> -</body> -``` - -训练5 -```html - <body> - <h2>在《倚天屠龙记》中,张三丰是_____派的掌门</h2> - <input type="radio" id="item1" name="selectval" >A 少林 - <input type="radio" id="item2" name="selectval" >B 武当 - <input type="radio" id="item3" name="selectval" >C 峨眉 - <input type="radio" id="item4" name="selectval" >D 昆仑 - <p></p> - <input type="button" id="submit" value="提交答案"> - <script> - let submitbtn = document.getElementById('submit'); - let radiobtn = document.getElementsByName('selectval'); - submitbtn.addEventListener('click',function(){ - if(document.getElementById('item2').checked){ - alert("答案正确") - }else{ - alert("答案错误") - } - }) - </script> -</body> -``` - -训练6 -```html - <body> - <a href="#" id="link">文本</a> - <input type="button" id="alter" value="修改"> - <div id="al"></div> - <script> - let alter=document.getElementById('alter'); - let link=document.getElementById('link'); - alter.addEventListener('click',function(){ - link.textContent='新的文本'; - link.href='$'; - }) - </script> -</body> -``` - -训练7 -```html - <body> - <input type="button" id="add" value="添加"> - <div id="box"></div> - <script> - let add = document.getElementById('add'); - let box = document.getElementById('box'); - add.addEventListener('click', function () { - box.innerHTML = '<img src="./下载.webp">'; - }) - </script> -</body> -``` - -综合练习1 -```html - <style> - #content{ - font-weight: bold; - } -</style> -<body> - <div id="content">一生只爱一人</div> - <a href="#" id="alter">将粗体改为斜体</a> - <script> - let con=document.getElementById('content'); - let alter=document.getElementById('alter'); - alter.addEventListener('click',function(){ - con.style.fontWeight='normal'; - con.style.fontStyle='italic'; - }); - </script> -</body> -``` - -综合练习2 -```html - <body> - <select id="year"></select> - <select id="month"></select> - <select id="day"></select> - <script> - for(let i = 2025; i >= 1999; i--) { - const option = document.createElement('option'); - option.value = i; - option.text = i; - document.getElementById('year').appendChild(option); - } - - for(let i = 1; i <= 12; i++) { - const option = document.createElement('option'); - option.value = i; - option.text = i + '月'; - document.getElementById('month').appendChild(option); - } - function setDays() { - day.innerHTML = ''; - let days = new Date(year.value, month.value, 0).getDate(); - for(let i = 1; i <= days; i++) { - let opt = document.createElement('option'); - opt.value = i; - opt.text = i + '日'; - day.appendChild(opt); - } - } - setDays(); - year.onchange = month.onchange = setDays; - </script> -</body> - -``` - -综合练习3 -```html - <body> - <div id="box"> - 请选择表情: - <select id="sel"> - <option id="happy">高兴</option> - <option id="cry">哭泣</option> - <option id="angry">生气</option> - </select> - - </div> - - <script> - let sel = document.getElementById('sel'); - let box = document.getElementById('box'); - sel.addEventListener('change',function(){ - let emotion=this.value; - let emoji=''; - switch(emotion) { - case 'happy': - box.innerHTML='<img src="./OIP-C.webp">'; - } - }) - </script> -</body> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251208-JavaScriptWindow\345\257\271\350\261\241\345\222\214\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\350\265\226\345\277\227\350\261\252/20251208-JavaScriptWindow\345\257\271\350\261\241\345\222\214\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 40ca8960d0cb10dacd835f9c7d5488586afa959e..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251208-JavaScriptWindow\345\257\271\350\261\241\345\222\214\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,62 +0,0 @@ -Window对象 -训练1 -```html - <body> - 两只老虎<input type="button" id="music" value="播放"> - <script> - music.addEventListener('click',function(){ - alert("只有会员才能播放歌曲,请登录"); - }) - </script> -</body> -``` - -训练2 -```html - <body> - <a href="#" id="escape">退出登录</a> - <script> - escape.addEventListener('click',function(){ - let esc = window.confirm("您确定退出登录吗") - if(esc==true){ - window.close(); - } - }) - - </script> -</body> -``` - -训练3 -```html - <body> - <input type="button" id="op" value="打开详情"> - <script> - op.addEventListener('click',function(){ - window.open("detail.html","new","height=500,width=500"); - }) - </script> -</body> -``` - -一.location对象 -```bash - portocol 页面使用的协议,通常是“http:”或“https:” - hostname 服务器域名 - port 请求的端口号 - host 服务器名及端口号 - origin URL的源地址,只读属性 - href 完整的URL地址 - pathname URL中的路径和文件名 - search URL的查询字符串 -``` - -二.navigator对象 -```bash - appCodeName 获取浏览器代码名 - userAgent 获取浏览器的整体信息 - appName 获取浏览器名称 - appVersion 获取浏览器的版本号 - platform 获取当前计算机的操作系统 - cookieEnabled 判断是否启用Cookies -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251210-JavaScriptStyle\345\257\271\350\261\241.md" "b/\350\265\226\345\277\227\350\261\252/20251210-JavaScriptStyle\345\257\271\350\261\241.md" deleted file mode 100644 index ac81eee84b18f4527737e32f37aac302610eff17..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251210-JavaScriptStyle\345\257\271\350\261\241.md" +++ /dev/null @@ -1,113 +0,0 @@ -一.获取 Style 对象 -```javascript - 通过 DOM 元素的 style 属性直接获取: - let box = document.getElementById('box'); - let boxStyle = box.style; -``` - -二.常用样式属性操作 -```javascript -(1).颜色和背景属性 - 1.backgroundColor属性 - box.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'; - 2.color属性 - box.style.color = '#333'; - 3.backgroundImage属性 - box.style.backgroundImage = 'url(图片路径)'; - 4.backgroundPosition属性 - box.style.backgroundPosition = 'left'; - 5.backgroundRepeat属性 - box.style.backgroundRepeat = 'no-repeat' -``` - -训练1 -```html - <style> - #cont{ - font-size: 16px; - } -</style> -<body> - <div id="cont">文本内容</div> - <input type="button" id="changebig" value="放大"> - <script> - let cont = document.getElementById('cont'); - let size = 16; - let changebig=document.getElementById('changebig'); - changebig.addEventListener('click', function () { - size=size+2; - cont.style.fontSize = size+'px'; - }) - </script> -</body> -``` - -训练2 -```html - <style> - #bgc { - width: 200px; - height: 200px; - background-image: url(./OIP-C.jpg); - } -</style> -<body> - <img id="bgc" > - <script> - let di = document.getElementById('bgc'); - function mouseover() { - di.style.border ='5px double blue'; - } - function mouseout(){ - di.style.border='none'; - } - di.addEventListener('mouseover',mouseover) - di.addEventListener('mouseout',mouseout) - </script> -</body> -``` - -综合训练1 -```html - <style> - .item { - width: 140px; - height: 40px; - margin-bottom: 5px; - background-color: rgba(46, 47, 49, 0.267); - color: white; - border-radius: 0px 10px 10px 0px; - line-height: 40px; - } -</style> -<body> - <div class="box"> - <div class="item">HTML/CSS讨论区</div> - <div class="item">JavaScript讨论区</div> - <div class="item">C语言讨论区</div> - <div class="item">Java讨论区</div> - <div class="item">Android讨论区</div> - <div class="item">Python讨论区</div> - </div> - <script> - let item = document.getElementsByClassName('item'); - for (let i = 0; i < item.length; i++) { - let count = item[i]; - function mouseover() { - this.style.backgroundColor = 'rgb(162, 162, 167)'; - this.style.width = '160px'; - this.style.color = 'black'; - this.style.cursor = 'pointer'; - } - function mouseout() { - this.style.backgroundColor = 'rgba(46, 47, 49, 0.267)'; - this.style.width = '140px'; - this.style.color = 'white'; - this.style.cursor = 'default'; - } - count.addEventListener('mouseover', mouseover); - count.addEventListener('mouseout', mouseout); - } - </script> -</body> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251211-JavaScriptForm\345\257\271\350\261\241.md" "b/\350\265\226\345\277\227\350\261\252/20251211-JavaScriptForm\345\257\271\350\261\241.md" deleted file mode 100644 index bc4169687b951275d686f64b0084aa83d606cd24..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251211-JavaScriptForm\345\257\271\350\261\241.md" +++ /dev/null @@ -1,183 +0,0 @@ -一.表单属性 -```html - 1.获取用户名(text) - <script> - let username = document.querySelector('[name=username]').value; - console.log('用户名:',username); - </script> - 2.获取性别(单选) - <script> - let genderEle = document.querySelectorAll('[name=gender]'); - let gender = genderEle[0].checked?genderEle[0].value : genderEle[1].value; - console.log(gender); - </script> - 3.获取爱好(多选) - <script> - let hobbyEle = document.querySelectorAll('[name=hobby]'); - let hobby =[]; - for(let i = 0;i < hobbyEle.length;i++){ - if(hobbyEle[i].checked){ - hobby.push(hobbyEle[i].value); - } - } - </script> - 4.获取年月份(下拉框) - <script> - let year = document.querySelector('[name=year]').value; - let month = document.querySelector('[name=month]').value; - console.log(year); - console.log(month); - </script> - 5.获取文本域内容 - <script> - let introduction = document.querySelector('[name=introduction]').value; - console.log(introduction); - </script> -``` - -训练1 -```html - <body> - <input type="text" name="convert" placeholder="请输入兑换码" id="exchange"> - <input type="button" name="sub" value="提交" onclick="result()"> - <script> - function result(){ - let text = document.getElementById('exchange').value; - if(text==='99632570063166'){ - alert("取票成功"); - }else{ - alert("取票失败"); - } - } - </script> -</body> -``` - -训练2 -```html - <body> - <textarea id="txt"> - 111111111111111111111111111111111 - </textarea> - <button onclick="addHeight()">增高</button> - <button onclick="reduceHeight()">降低</button> - <script> - let txt = document.getElementById('txt'); - function addHeight() { - txt.style.height = txt.offsetHeight + 20 + 'px'; - } - function reduceHeight() { - txt.style.height = txt.offsetHeight - 20 + 'px'; - } - </script> -</body> -``` - -训练3 -```html -<body> - <h2>请选择课程</h2> - <input type="checkbox" name="sel" id="c1">C语言</br> - <input type="checkbox" name="sel" id="c2">机械制图</br> - <input type="checkbox" name="sel" id="c3">单片机</br> - <input type="checkbox" name="sel" id="c4">自动控制</br> - <input type="checkbox" name="sel" id="c5">传感器</br> - <input type="checkbox" name="sel" id="c6">高等数学</br> - <input type="checkbox" name="sel" id="c7">计算机基础</br> - <input type="checkbox" name="sel" id="c8">Oracle数据库</br> - <input type="checkbox" name="sel" id="c9">商务英语</br> - <input type="checkbox" name="sel" id="c10">PLC设计基础</br> - <script> - let sel = document.querySelectorAll('[name=sel]'); - for (let i = 0; i < sel.length; i++) { - sel[i].onclick = function () { - let count = 0; - for (let j = 0; j < sel.length; j++) { - if (sel[j].checked) { - count++; - } - } - if (count > 6) { - alert('您最多可以选择6门课程'); - this.checked = false; - } - } - } - </script> -</body> -``` - -综合训练1 -```html - <body> - 电影《变相怪杰》的主演是谁?<p></p> - <input type="radio" name="lead" id="c1">布拉德·皮特 - <input type="radio" name="lead" id="c2">亚当·桑德勒 - <input type="radio" name="lead" id="c3">金·凯瑞 - <input type="radio" name="lead" id="c4">杰夫·丹尼尔斯 - <p></p> - <input type="button" value="提交答案" id="sub" onclick="cli()"> - <div id="answer"></div> - <script> - let lead =document.querySelectorAll('[name=lead]'); - let sub = document.getElementById('sub'); - let answer =document.getElementById('answer'); - function cli(){ - let isCorrect = false; - for (let i = 0; i < lead.length; i++) { - if (lead[i].checked && lead[i].id === 'c3') { - isCorrect = true; - break; - } - } - if (isCorrect) { - answer.textContent = '答案正确'; - } else { - answer.textContent = '答案错误'; - } - } - </script> -</body> -``` - -综合训练2 -```html - <body> - <input type="checkbox" name="hobbies" id="movie">看电影 - <input type="checkbox" name="hobbies" id="music">听音乐 - <input type="checkbox" name="hobbies" id="instrument">演奏乐器 - <input type="checkbox" name="hobbies" id="basketball">打篮球 - <input type="checkbox" name="hobbies" id="book">看书 - <input type="checkbox" name="hobbies" id="web">上网 - <p></p> - <input type="button" id="allselect" value="全选"> - <input type="button" id="allnot" value="全不选"> - <input type="button" id="reverse" value="反选"> - <script> - let hob=document.querySelectorAll('[name=hobbies]'); - let butselect=document.getElementById('allselect'); - let butnot=document.getElementById('allnot'); - let butre=document.getElementById('reverse'); - - butselect.addEventListener('click',function(){ - for(let i=0;i<=hob.length;i++){ - hob[i].checked=true; - } - }); - butnot.addEventListener('click',function(){ - for(let i=0;i<=hob.length;i++){ - hob[i].checked=false; - } - }); - butre.addEventListener('click',function(){ - for(let i=0;i<=hob.length;i++){ - if(hob[i].checked){ - hob[i].checked=false; - }else{ - hob[i].checked=true; - } - } - }); - </script> -</body> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251212-JavaScriptJSON.md" "b/\350\265\226\345\277\227\350\261\252/20251212-JavaScriptJSON.md" deleted file mode 100644 index 43bec31fdbebee694ffa15d76b74471d5a8ca68e..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251212-JavaScriptJSON.md" +++ /dev/null @@ -1,14 +0,0 @@ -一.JSON 字符串转 JS 对象 -```html -<script> - let jsonStr = '{"name":"张三","age":22}'; - let obj = JSON.parse(jsonStr); -</script> -``` - -二.JS 对象转 JSON 字符串 -```html -<script> - let newJsonStr = JSON.stringify(obj); -</script> -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251215-JavaScript\347\273\203\344\271\240.md" "b/\350\265\226\345\277\227\350\261\252/20251215-JavaScript\347\273\203\344\271\240.md" deleted file mode 100644 index fc6c5dc14c00c33125580254f04b4027d797879e..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251215-JavaScript\347\273\203\344\271\240.md" +++ /dev/null @@ -1,90 +0,0 @@ -函数 -1.题目描述: 编写一个函数 greet,接收一个名字参数,返回问候语 "你好,XXX!" -输入示例: "小明" -输出示例: "你好,小明!" -```js - function greet(name){ - return`你好,${name}`; - } - console.log(greet('小明')); -``` -2.题目描述: 编写一个函数 max,接收两个数字参数,返回较大的那个数 -输入示例: 15, 23 -输出示例: 23 -```js - function max(num1, num2) { - if(num1>num2){ - return num1; - }else{ - return num2; - } - } - console.log(max(20,19)); -``` -3.题目描述: 编写一个函数 calculateArea,可以计算矩形面积(两个参数)或正方形面积(一个参数),使用默认参数实现 -输入示例: 5, 10 或 5 -输出示例: 50 或 25 -```js - function calculateArea(width, length = width) { - return length * width; - } - console.log(`${calculateArea(5, 10)}或${calculateArea(5)}`); -``` -4.题目描述: 编写一个箭头函数 filterEven,接收一个数组,返回所有偶数组成的新数组 -输入示例: [1, 2, 3, 4, 5, 6] -输出示例: [2, 4, 6] -```js - function filterEven(num) { - let result = []; - for (let i = 0; i < num.length; i++) { - let all = num[i]; - if (all % 2 === 0) { - result.push(all) - } - } - return result; - } - console.log(filterEven([1, 2, 3, 4, 5, 6])); -``` -5.题目描述: 编写一个函数 sumAll,使用剩余参数接收任意数量的数字,返回它们的总和 -输入示例: 1, 2, 3, 4, 5 -输出示例: 15 -```js - function sumAll(...num) { - let sm = 0; - for(let i=0;i<num.length;i++){ - sm+=num[i]; - } - return sm; - } - console.log(sumAll(1,2,3)); -``` - -jQuery -1.题目描述: 引入 jQuery 库,使用 $(document).ready() 确保 DOM 加载完成后执行代码,输出 "jQuery 已就绪" -输出示例: 页面加载完成后控制台输出 "jQuery 已就绪" -```js - $(document).ready(function(){ - console.log("jQuery已就绪"); - }) -``` - -2.题目描述: 比较 $ 和 jQuery 的使用,验证它们是同一个对象 -输出示例: true -```js - $(document).ready(function(){ - let compare = ($===jQuery); - console.log(compare); - }) -``` - -3.题目描述: 使用 jQuery 获取 id 为 "demo" 的元素,并输出该元素的 jQuery 对象 -HTML 结构: -<div id="demo">演示内容</div> - -```js - $(document).ready(function () { - let demoElement = $("#demo"); - console.log(demoElement); - }); -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251217-JavaScriptjQuery.md" "b/\350\265\226\345\277\227\350\261\252/20251217-JavaScriptjQuery.md" deleted file mode 100644 index 1b1506b2e7b2f70c50d063e3e5094095cd1955fb..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251217-JavaScriptjQuery.md" +++ /dev/null @@ -1,16 +0,0 @@ -一.jQuery基础 -```javascript - let div=$('div'); - //将jQuery对象转换为dom对象 - let domEL=div[0]; - //将dom对象重新转换为jQuery对象 - let jQueryObj=$(domEL); -``` - -二.jQuery DOM操作 -```javascript - 1.新增append给拿到的元素增加下级元素 - 2.移除remove移除拿到的元素 - 3.text()拿到文本内容,text('要设置的内容')可以修改纯文本内容 - 4.html()拿到包含标签的内容,html('要设置的内容')可以修改包含标签的内容 -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251218-JavaScriptjQuery.md" "b/\350\265\226\345\277\227\350\261\252/20251218-JavaScriptjQuery.md" deleted file mode 100644 index 22f5e28eaccb7084e327c8c97f7db1f226578f50..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251218-JavaScriptjQuery.md" +++ /dev/null @@ -1,141 +0,0 @@ -一.基础选择器 -```js -$("#id") ID 选择器 选中指定 ID 的元素 -$(".class") 类选择器 选中指定类名的所有元素 -$("tag") 标签选择器 选中指定标签的所有元素 -$("*") 通配符选择器 选中所有元素 -$("div,p") 组合选择器 选中 div 和 p 元素 - - // 选中 ID 为 "box" 的元素,修改文本 - $("#box").text("Hello jQuery"); - - // 选中所有 class 为 "item" 的元素,添加样式 - $(".item").css("color", "red"); - - // 选中所有 p 标签,隐藏元素 - $("p").hide(); -``` -二.层级选择器 -```js -后代选择器 $("parent child") 选中父元素下所有后代元素 -子元素选择器 $("parent > child") 选中父元素下直接子元素 -相邻兄弟选择器 $("prev + next") 选中 prev 元素后紧邻的 next 元素 - - // 选中 ul 下所有 li 元素 - $("ul li").css("margin", "5px"); - // 选中 div 下直接子元素 p - $("div > p").css("font-size", "16px"); -``` - -三.过滤选择器 -```js - 以: 开头,筛选元素 - - // 选中第一个 li 元素 - $("li:first").css("background", "yellow"); - - // 选中最后一个 li 元素 - $("li:last").css("background", "green"); - - // 选中索引为 2 的 li 元素(索引从 0 开始) - - $("li:eq(2)").css("font-weight", "bold"); - // 选中所有偶数索引的 li 元素 - $("li:even").css("color", "blue"); -``` - -四.jQuery DOM操作 -```js - text() 获取 / 设置元素的文本内容 - html() 获取 / 设置元素的 HTML 内容 - val() 获取 / 设置表单元素的值 - - // 设置 HTML - $("#box").html("<h1>jQuery 教程</h1>"); - - // 设置输入框值 - $("input").val("请输入内容"); -``` - -五.元素增删改 -```js - append() 向元素内部末尾添加子元素 - prepend() 向元素内部开头添加子元素 - after() 在元素外部后面插入元素 - before() 在元素外部前面插入元素 - remove() 删除元素(含子元素) - empty() 清空元素内部所有内容 - - // 向 ul 末尾添加 li 元素 - $("ul").append("<li>新选项</li>");、 - - // 在 div 前面插入 p 元素 - $("div").before("<p>前置内容</p>"); - - // 删除指定元素 - $(".delete").remove(); - - // 清空元素内容 - $("#box").empty(); -``` - -六.jQuery事件处理 -```js - click() 点击事件 - dblclick() 双击事件 - mouseenter() 鼠标进入事件 - mouseleave() 鼠标离开事件 - change() 表单元素值改变事件 - submit() 表单提交事件 - - // 点击事件 - $("#btn").click(function() { - alert("按钮被点击了!"); - - // $(this) 指向当前触发事件的元素 - $(this).text("已点击"); - }); - - // 鼠标进入/离开 - $("#box").mouseenter(function() { - $(this).css("background", "red"); - }).mouseleave(function() { - $(this).css("background", "blue"); - }); -``` - -七.jQuery动画效果 -```js - 1.基础显示隐藏 - // 显示元素(可加时长,单位 ms) - $("#box").show(1000); - - // 隐藏元素 - $("#box").hide(500); - - // 切换显示/隐藏 - $("#box").toggle(300); - - 2.滑动动画 - // 下滑显示 - $("#box").slideDown(800); - - // 上滑隐藏 - $("#box").slideUp(600); - - // 切换滑动 - $("#box").slideToggle(); - - 3.淡入淡出 - // 淡入 - $("#box").fadeIn(700); - - // 淡出 - $("#box").fadeOut(400); - - // 切换淡入淡出 - $("#box").fadeToggle(); - - // 淡到指定透明度(0-1) - $("#box").fadeTo(500, 0.5); -``` diff --git "a/\350\265\226\345\277\227\350\261\252/20251219-JavaScript\345\237\272\347\241\200.md" "b/\350\265\226\345\277\227\350\261\252/20251219-JavaScript\345\237\272\347\241\200.md" deleted file mode 100644 index 0540ee3aa731e02ee6e81f4b953bc2b2d2d740dd..0000000000000000000000000000000000000000 --- "a/\350\265\226\345\277\227\350\261\252/20251219-JavaScript\345\237\272\347\241\200.md" +++ /dev/null @@ -1,29 +0,0 @@ -一.变量、常量和基础数据类型 -```js - 1.var let定义变量,后续只使用let - 2.const定义常量,常量名全大写 - 3.数据类型 - 基础数据类型 - string - number - boolean - underfined - null - 复合数据类型 - 对象 - 数组 - 函数 -``` -二.流程判断 -```js -1.判断 - if - if...else - if ... else if() - if ... else if()... else - switch -2.循环 - for - while - do...while -``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\270\200.png" "b/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\270\200.png" deleted file mode 100644 index 45d1613a53a4d4e4bc63f3817f0cbd6b89198ff2..0000000000000000000000000000000000000000 Binary files "a/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\270\200.png" and /dev/null differ diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\272\214.png" "b/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\272\214.png" deleted file mode 100644 index 4c9532cb57c0bb2d89cbc2eb1334b75c9a3d5e62..0000000000000000000000000000000000000000 Binary files "a/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\272\214.png" and /dev/null differ diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\200.png" "b/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\200.png" deleted file mode 100644 index a056e7a456f7b51c4f5ec74adf91beb6fb250d17..0000000000000000000000000000000000000000 Binary files "a/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\200.png" and /dev/null differ diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\211.png" "b/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\211.png" deleted file mode 100644 index 6a86adc3b6baa750f2b10920e97e7fadff78639c..0000000000000000000000000000000000000000 Binary files "a/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\211.png" and /dev/null differ diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\272\214.png" "b/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\272\214.png" deleted file mode 100644 index a741497760d438178cd8107eca50614592f5d140..0000000000000000000000000000000000000000 Binary files "a/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\272\214.png" and /dev/null differ diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251112\350\256\255\347\273\203\345\233\233.png" "b/\350\265\226\345\277\227\350\261\252/image/20251112\350\256\255\347\273\203\345\233\233.png" deleted file mode 100644 index 23250ffa2b1f53bb9764c2596b50162a398270b1..0000000000000000000000000000000000000000 Binary files "a/\350\265\226\345\277\227\350\261\252/image/20251112\350\256\255\347\273\203\345\233\233.png" and /dev/null differ diff --git "a/\350\265\265\344\277\212\350\261\252/20251110-JavaScript\344\271\213\345\274\225\345\205\245.md" "b/\350\265\265\344\277\212\350\261\252/20251110-JavaScript\344\271\213\345\274\225\345\205\245.md" deleted file mode 100644 index fc2e5763dc6f47eb2df2471c30a7f29f612a35da..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251110-JavaScript\344\271\213\345\274\225\345\205\245.md" +++ /dev/null @@ -1,82 +0,0 @@ -## 笔记 - -1. 一、JavaScript 基础认知 - - 1. 什么是 JavaScript? - - - **定义**:一种跨平台、面向对象的脚本语言,主要用于网页交互(前端),也可通过 Node.js 用于后端开发。 - - - **核心作用**: - - - 动态修改网页内容(HTML/CSS) - - - 处理用户交互(点击、输入等) - - - 发送网络请求(AJAX/fetch) - - - 操作浏览器存储(Cookie、LocalStorage) - - 2. 运行环境 - - - 浏览器端:嵌入 HTML 中执行,每个浏览器都有 JavaScript 引擎(如 Chrome 的 V8 引擎)。 - - - 服务器端:通过 Node.js 运行,脱离浏览器独立执行。 - - 3. 如何在 HTML 中引入 JS? - - ```html - <!-- 1. 内嵌式:直接写在 script 标签中 --> - <script> - console.log("Hello JavaScript!"); // 控制台输出(F12 打开控制台查看) - </script> - - <!-- 2. 外链式:引入外部 .js 文件(推荐,分离代码) --> - <script src="index.js"></script> - - <!-- 3. 行内式:直接写在 HTML 元素事件中(不推荐,耦合度高) --> - <button onclick="alert('点击成功')">点击我</button> - ``` - - 注意:script 标签可放在 <head> 或 <body> 末尾,建议放 body 末尾(避免阻塞页面加载)。 - -## 作业 - -1. - -``` -<script> - // 方式1:通过 document.write 直接写入页面(最简单) - document.write("<h3>老子名言:千里之行始于足下</h3>"); - - // (可选)方式2:创建元素插入页面(更灵活,保留可修改性) - // const quote = document.createElement("p"); - // quote.textContent = "老子名言:千里之行始于足下"; - // document.body.appendChild(quote); - </script> -``` - -2. - -- html文件 - -``` -<!DOCTYPE html> -<html lang="zh-CN"> -<head> - <meta charset="UTF-8"> - <title>显示明日学院官网 - - - - - - -``` - -- 外部JavaScript文件(showUrl.js) - -``` -// 弹出对话框显示官网地址(alert() 是浏览器内置弹窗方法) -alert("明日学院官网地址:http://www.mingrisoft.com"); -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251112-JavaScript\350\257\255\346\263\225\345\237\272\347\241\200.md" "b/\350\265\265\344\277\212\350\261\252/20251112-JavaScript\350\257\255\346\263\225\345\237\272\347\241\200.md" deleted file mode 100644 index 903573b563454d3a0b94365fa0298fcbabd15e9b..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251112-JavaScript\350\257\255\346\263\225\345\237\272\347\241\200.md" +++ /dev/null @@ -1,156 +0,0 @@ -## 笔记 - -**一、声明方式 ** - -3 种声明方式: - -```javascript -let a = 10; // 函数级作用域,存在变量提升(不推荐) -let b = 20; // 块级作用域,无变量提升(推荐) -const c = 30; // 块级作用域,常量(值不可修改),必须初始化 -``` - -命名规则:字母、数字、_、$ 组成,不能以数字开头,区分大小写,避免关键字(let、var、if 等) - -二、**运算符** - -- 算术运算符:+、-、*、/、%(取余)、++(自增)、--(自减) - -- 赋值运算符:=、+=、-=、*=、/= - -- 比较运算符:==(值相等)、===(值和类型都相等,推荐)、>、<、>=、<= - -- 逻辑运算符:&&(与)、||(或)、!(非) - -- 三元运算符:条件 ? 表达式1 : 表达式2(简洁的 if-else) - -(2)基本数据类型 - -| 类型 | 描述 | 示例 | -| :-------: | --------------------- | -------------- | -| Number | 数字(整数 / 浮点数 | 123、3.14、NaN | -| String | 字符串(单 / 双引号) | 'hello'、"JS" | -| Boolean | 布尔值(真 / 假) | true、false | -| Undefined | 未定义(声明未赋值) | let x; | -| Null | 空值(主动赋值为空) | let y = null; | -| Symbol | 唯一标识(ES6+) | Symbol('id') | - -**三、转义字符** - -#### 常用转义字符列表 - -| 转义字符 | 描述 | 示例 | 输出结果 | -| -------- | ----------------- | -------------------------------- | --------------------------- | -| `\'` | 单引号 | `console.log('It\'s a cat')` | `It's a cat` | -| `\"` | 双引号 | `console.log("He said \"Hi\"")` | `He said "Hi"` | -| `\\` | 反斜杠本身 | `console.log("Path: C:\\Users")` | `Path: C:\Users` | -| `\n` | 换行符(LF) | `console.log("Line 1\nLine 2")` | Line 1Line 2 | -| `\r` | 回车符(CR) | `console.log("Hello\rWorld")` | `World`(覆盖前半部分) | -| `\t` | 水平制表符(Tab) | `console.log("Name:\tTom")` | `Name: Tom` | -| `\b` | 退格符 | `console.log("abc\bd")` | `abd`(删除前一个字符 `c`) | -| `\f` | 换页符 | 较少使用,用于分页场景 | | -| `\v` | 垂直制表符 | 较少使用,用于垂直对齐 | | - -## 作业 - -p25 - -1. - -```javascript - document.write('珠穆朗玛峰的高度≈8848.86m
      '); -``` - -2. - -```javascript -p>文件夹demo路径:

      - -``` - -p28 - -3. - -```javascript - let area = 17100000 + 'km' + '\u00B2'; - document.write(`俄罗斯的国土面积 ≈ ${area}`); -``` - -4. - -```javascript -

      个人信息:

      - -``` - - - -p39 - -综合练习1 - -```javascript - -``` - - - -综合练习2 - -```javascript - -``` - -综合练习3 - -```javascript - -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251113-JavaScript\346\225\260\346\215\256\347\261\273\345\236\213.md" "b/\350\265\265\344\277\212\350\261\252/20251113-JavaScript\346\225\260\346\215\256\347\261\273\345\236\213.md" deleted file mode 100644 index a76b2e917c0260d2db6dff98a77f8fd6b42d5b6b..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251113-JavaScript\346\225\260\346\215\256\347\261\273\345\236\213.md" +++ /dev/null @@ -1,466 +0,0 @@ -## 笔记 - -# JavaScript 核心子知识点笔记:typeof、数据类型转换、表达式 - -## 一、typeof 语法与使用规则 - -### 1. 核心作用 - -判断变量 / 值的数据类型,返回一个 **字符串**(表示类型名称),是前端调试和类型判断的基础工具。 - -### 2. 语法格式 - -```javascript -// 语法1:判断变量 -typeof 变量名; - -// 语法2:判断直接值(字面量) -typeof 直接值; -``` - -### 3. 完整返回值对照表(含特殊情况) - -| 被判断的值 / 变量 | typeof 返回结果(字符串) | 说明 | -| ----------------- | ------------------------- | ---------------------------------- | -| 字符串(String) | `"string"` | 含单引号、双引号、模板字符串 | -| 数字(Number) | `"number"` | 整数、小数、`NaN`、`Infinity` | -| 布尔值(Boolean) | `"boolean"` | 仅 `true`/`false` | -| undefined | `"undefined"` | 变量声明未赋值或直接写 `undefined` | -| null | `"object"` | 历史遗留 bug(重点注意!) | -| 对象(Object) | `"object"` | 普通对象、数组、日期对象等 | -| 数组(Array) | `"object"` | 数组本质是 “类对象” 结构 | -| 函数(Function) | `"function"` | 唯一能被 typeof 区分的对象子类型 | -| Symbol | `"symbol"` | ES6+ 唯一标识类型 | -| BigInt | `"bigint"` | ES10+ 大整数类型 | - -### 4. 实用示例(含易错点) - -```javascript -// 1. 基本类型判断(正常情况) -typeof "abc"; // "string" -typeof 123; // "number" -typeof NaN; // "number"(NaN 是“非数字的数字类型”) -typeof true; // "boolean" -typeof undefined; // "undefined" -let x; -typeof x; // "undefined"(变量声明未赋值) - -// 2. 特殊情况(重点记) -typeof null; // "object"(bug,需单独判断 null) -typeof []; // "object"(数组需用 Array.isArray() 判断) -typeof {}; // "object" -typeof function() {}; // "function"(唯一例外的对象类型) - -// 3. 正确判断 null 和数组(补充方法) -let a = null; -a === null; // true(判断 null 必须用 ===) - -let b = [1,2,3]; -Array.isArray(b); // true(专门判断数组的方法) -``` - -### 5. 注意事项 - -- typeof 是 **运算符**,不是函数,无需加括号(`typeof(x)` 也能运行,但非必需)。 - -- 无法区分 `null`、普通对象、数组(需配合其他方法,如 `=== null`、`Array.isArray()`)。 - -- 对未声明的变量使用 typeof 不会报错,返回"undefined"(特殊特性): - - ```javascript - typeof unDeclaredVar; // "undefined"(未声明变量,不报错) - // unDeclaredVar; // 直接访问会报错:ReferenceError - ``` - -## 二、数据类型转换规则(核心重点) - -JS 是弱类型语言,变量类型会**自动转换**(隐式转换),也可通过方法**手动转换**(显式转换),转换核心围绕 “基本类型之间的转换”。 - -### 1. 显式转换(主动控制,推荐使用) - -手动调用内置方法转换,结果可预期,避免隐式转换的陷阱。 - -#### (1)转换为字符串(String) - -| 转换方法 | 示例 | 结果 | -| ---------------- | --------------------------- | ------------- | -| String (值) | String(123)、String(true) | "123"、"true" | -| 变量.toString () | let num=456; num.toString() | "456" | - -- 注意:undefined和null不能用toString()(会报错),需用String(): - - ```javascript - String(undefined); // "undefined" - String(null); // "null" - // undefined.toString(); // 报错:TypeError - ``` - -#### (2)转换为数字(Number) - -| 转换方法 | 示例 | 结果 | -| ----------------------- | --------------------------------------- | -------------------- | -| Number (值) | Number("123")、Number("123abc") | 123、NaN | -| parseInt (字符串,进制) | parseInt("123")、parseInt("123.45") | 123、123(只取整数) | -| parseFloat (字符串) | parseFloat("123.45")、parseFloat("abc") | 123.45、NaN | - -- 关键规则: - - - 字符串纯数字(含正负号、小数点)→ 正常转换(如 `"123.45"` → 123.45)。 - - 字符串含非数字字符 → 转换为 `NaN`(如 `"123abc"` → NaN)。 - - 空字符串 `""`、空格字符串 `" "` → 0(`Number("")` → 0)。 - - `true` → 1,`false` → 0;`undefined` → NaN;`null` → 0。 - -- 示例: - - ```javascript - Number("100"); // 100 - Number("100.5"); // 100.5 - Number("100a"); // NaN - Number(""); // 0 - Number(null); // 0 - Number(undefined); // NaN - - parseInt("123.89"); // 123(忽略小数部分) - parseInt("abc123"); // NaN(非数字开头) - parseFloat("3.1415"); // 3.1415 - ``` - -#### (3)转换为布尔值(Boolean) - -| 转换方法 | 示例 | 结果 | -| ------------ | -------------------------- | ----------- | -| Boolean (值) | Boolean(0)、Boolean("abc") | false、true | - -- 核心规则: - - 只有 6 个值转换为 false( falsy 值),其余全为 true: - - - falsy 值:`0`、`NaN`、`""`(空字符串)、`undefined`、`null`、`false`。 - - - 示例: - - ```javascript - Boolean(0); // false - Boolean(""); // false - Boolean(NaN); // false - Boolean(null); // false - Boolean(undefined); // false - Boolean(" "); // true(空格字符串非空) - Boolean(123); // true - Boolean({}); // true(对象/数组转换为布尔值都是 true) - Boolean([]); // true - ``` - -### 2. 隐式转换(自动触发,需避坑) - -JS 在特定场景下自动转换类型,常见触发场景: - -#### (1)算术运算(`+`、`-`、`*`、`/`、`%`) - -- 规则:除 `+` 外,其他运算符会自动将操作数转为数字。 - -- `+` 运算符:只要有一个操作数是字符串,就会触发**字符串拼接**;否则转为数字相加。 - -- 示例: - - ```javascript - // 非 + 运算符:转为数字运算 - 10 - "5"; // 5("5" → 5) - "12" * 3; // 36("12" → 12) - "10" / "2"; // 5 - "abc" - 2; // NaN("abc" → NaN,NaN 参与运算结果还是 NaN) - - // + 运算符:字符串拼接 vs 数字相加 - "10" + 20; // "1020"(有字符串,拼接) - 10 + true; // 11(true → 1,数字相加) - 10 + null; // 10(null → 0,数字相加) - 10 + undefined; // NaN(undefined → NaN) - ``` - -#### (2)比较运算(`==`、`>`、`<` 等) - -- 规则: - - - `==`(非全等):会先自动转换类型,再比较值(尽量不用,优先用 `===`)。 - - `>`、`<`:会将操作数转为数字再比较。 - -- 示例: - - ```javascript - // == 隐式转换 - 10 == "10"; // true("10" → 10) - 0 == ""; // true("" → 0) - false == 0; // true(false → 0) - null == undefined; // true(特殊规则,无类型转换) - NaN == NaN; // false(NaN 不等于任何值,包括自己) - - // >、< 转换为数字 - "20" > 15; // true("20" → 20) - "abc" > 10; // false("abc" → NaN,NaN 与任何值比较都是 false) - ``` - -#### (3)逻辑运算(`&&`、`||`、`!`) - -- 规则:`!`(非运算)会先将操作数转为布尔值,再取反;`&&`、`||` 会判断操作数的 “真值 / 假值”,返回原始值(而非布尔值)。 - -- 示例: - - ```javascript - !""; // true("" → false,取反为 true) - !0; // true - !"abc"; // false("abc" → true,取反为 false) - - // &&:找第一个假值,无则返回最后一个真值 - "" && "hello"; // ""(第一个假值) - 10 && 20; // 20(无假值,返回最后一个) - - // ||:找第一个真值,无则返回最后一个假值 - "" || "hello"; // "hello"(第一个真值) - 0 || null; // null(无真值,返回最后一个) - ``` - -### 3. 转换总结 - -- 优先使用**显式转换**(`String()`、`Number()`、`Boolean()`),代码更易读。 -- 避免使用 `==`,用 `===`(全等)判断(不转换类型,直接比较值和类型)。 -- 记住 6 个 falsy 值,避免隐式转换踩坑。 - -## 三、表达式(代码执行的基本单元) - -### 1. 定义 - -由**操作数**(变量、字面量、函数调用等)和**运算符**组成的代码片段,最终会计算出一个**结果**(值)。 - -### 2. 表达式分类(按功能) - -#### (1)算术表达式(结果为数字) - -由算术运算符组成,用于计算数值。 - -```javascript -10 + 20 * 3; // 70(先乘后加,遵循运算符优先级) -(10 + 20) * 3; // 90(括号改变优先级) -100 / 25; // 4 -5 % 2; // 1(取余) -``` - -#### (2)字符串表达式(结果为字符串) - -由字符串拼接运算符 `+` 组成。 - -```javascript -"Hello" + " " + "World"; // "Hello World" -let name = "张三"; -"你好," + name; // "你好,张三" -``` - -#### (3)比较表达式(结果为布尔值) - -由比较运算符组成,用于判断条件。 - -```javascript -10 > 5; // true -"123" === 123; // false(类型不同) -age >= 18; // 取决于 age 的值(true/false) -``` - -#### (4)逻辑表达式(结果为真值 / 假值的原始值) - -由逻辑运算符组成,用于组合条件。 - -```javascript -true && false; // false -10 > 5 || 3 > 10; // true -!(age < 18); // 对 age < 18 的结果取反 -``` - -#### (5)赋值表达式(结果为赋值后的值) - -由赋值运算符组成,用于给变量赋值(可链式赋值)。 - -```javascript -let a = 10; // 表达式结果为 10,变量 a 被赋值为 10 -let b = c = 20; // 链式赋值,先给 c 赋 20,再给 b 赋 20,结果为 20 -let x = 5 + 3; // 先计算 5+3=8,再赋值给 x,表达式结果为 8 -``` - -#### (6)函数调用表达式(结果为函数的返回值) - -调用函数时组成的表达式,结果是函数的返回值(无 return 则为 undefined)。 - -```javascript -function add(a, b) { - return a + b; -} -add(10, 20); // 30(表达式结果为 30) -console.log("Hello"); // undefined(console.log 无返回值) -``` - -### 3. 表达式与语句的区别(关键) - -| 特性 | 表达式 | 语句 | -| ------------ | ------------------------- | ------------------------------- | -| 核心功能 | 计算结果 | 执行操作(如声明、循环、判断) | -| 是否有返回值 | 有(必须算出一个值) | 无(或返回 undefined) | -| 示例 | `1+2`、`a=10`、`add(3,4)` | `let a;`、`if(...)`、`for(...)` | - -- 注意:赋值表达式(`a=10`)是表达式(有返回值 10),而变量声明(`let a=10`)是语句(无返回值)。 - -### 4. 运算符优先级(简化版,需牢记) - -表达式中运算符的执行顺序(优先级高的先执行,同优先级从左到右): - -1. 括号 `()` → 最高优先级(优先计算括号内的内容)。 -2. 一元运算符:`!`(非)、`++`(自增)、`--`(自减)、`typeof`。 -3. 算术运算符:`*`(乘)、`/`(除)、`%`(取余) → 高于 `+`(加)、`-`(减)。 -4. 比较运算符:`>`、`<`、`>=`、`<=` → 高于 `==`、`===`、`!=`、`!==`。 -5. 逻辑运算符:`&&`(与) → 高于 `||`(或)。 -6. 赋值运算符:`=`、`+=`、`-=` 等 → 最低优先级。 - -- 示例(优先级验证): - - ```javascript - // 算术优先级:* 高于 + - 2 + 3 * 4; // 14(先算 3*4=12,再算 2+12) - - // 比较优先级高于逻辑 && - 5 > 3 && 10 < 20; // true(先算 5>3 和 10<20,再算 &&) - - // 一元运算符 ! 优先级高 - !10 > 5; // false(先算 !10=false,再算 false>5) - - // 括号改变优先级 - (2 + 3) * 4; // 20(先算括号内 2+3=5) - ``` - - - -## 四、核心易错点总结 - -1. `typeof null` 返回 `"object"`,需用 `=== null` 单独判断。 -2. `NaN` 不等于任何值(包括自己),判断是否为 NaN 需用 `isNaN(值)` 或 `Number.isNaN(值)`(后者更严格)。 -3. 隐式转换中,`+` 既可能是数字相加,也可能是字符串拼接,需注意操作数类型。 -4. 表达式有返回值,语句无返回值,避免混淆(如 `a=10` 是表达式,`let a=10` 是语句)。 -5. 优先级:括号 > 一元运算符 > 算术 > 比较 > 逻辑 > 赋值。 - - - -## 作业: - -p37 - -5. - -```javascript - -``` - -6. - -```javascript - -``` - -7. - -```javascript - -``` - -p54 - -例.3.10 - -```javascript - -``` - -p55 - -综合练习1 - -```javascript - -``` - -综合练习2 - -```html - let year; - let month; - document.write('请选择您的出生年月:'); - document.write(''); - document.write(''); -``` - -综合练习3 - -```javascript -let row; - document.write(''); - document.write(''); - for (row = 1; row <= 100; row++) { - if (row % 10 == 0) { - document.write(``); - document.writeln("") - } - else{ - document.write(``); - } - } - document.write(''); - document.write('
      ${row}
      ${row}
      '); -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251114-JavaScript\350\257\255\345\217\245.md" "b/\350\265\265\344\277\212\350\261\252/20251114-JavaScript\350\257\255\345\217\245.md" deleted file mode 100644 index 7f5b5e528c2653b4edf23d2ed0d559f977566dc2..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251114-JavaScript\350\257\255\345\217\245.md" +++ /dev/null @@ -1,139 +0,0 @@ -## 作业 - -1.p48 - -```javascript - - -``` - -3. - -``` - - -``` - -4. - -``` - - -``` - -5. - -``` - - -``` - -6. - -``` - - -``` - -7. - -``` - - -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251117-JavaScript\344\271\213\345\207\275\346\225\260.md" "b/\350\265\265\344\277\212\350\261\252/20251117-JavaScript\344\271\213\345\207\275\346\225\260.md" deleted file mode 100644 index 6735090417ef0557666b3c282032319536b21ad0..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251117-JavaScript\344\271\213\345\207\275\346\225\260.md" +++ /dev/null @@ -1,202 +0,0 @@ -## 笔记 - -*JavaScript*语句 - -## 条件判断语句(根据条件执行不同代码) - -### 1. if 语句(单条件) - -```javascript -let age = 18; -if (age >= 18) { - console.log("成年"); // 条件为true时执行 -} -``` - -### 2. if-else 语句(二选一) - -```javascript -let num = -30; -if (num > 0) { - console.log("正数"); -} else { - console.log("非正数"); // num=-30时执行 -} -``` - -### 3. if-else if-else 语句(多条件) - -```javascript -let score = 85; -if (score >= 90) { - console.log("优秀"); -} else if (score >= 70) { - console.log("良好"); // 85满足此条件,执行 -} else { - console.log("及格/不及格"); -} -``` - -### 4. switch 语句(等值匹配多分支) - -```javascript -let day = 3; -switch (day) { - case 1: - console.log("周一"); - break; // 跳出switch,避免穿透 - case 3: - console.log("周三"); // day=3时执行 - break; - default: - console.log("其他日期"); // 无匹配时执行 -} -``` - -## 三 - -## 跳转语句(控制代码执行流程) - -### 1.break 语句(跳出循环或 switch) - -```javascript -// 循环到3时跳出 -for (let i = 1; i <= 5; i++) { - if (i === 3) break; - console.log(i); // 输出:1 2 -} -``` - -### 2. continue 语句(跳过本次循环,进入下一次) - -```javascript -// 跳过偶数,打印奇数 -for (let i = 1; i <= 5; i++) { - if (i % 2 === 0) continue; - console.log(i); // -``` - -# JavaScript for 循环语句(简洁实用笔记) - -for 循环是 JS 中最常用的循环语句,适合**已知循环次数**的场景,语法灵活、控制精准。 - -- ## 循环语句(重复执行代码) - - ### 1. for 循环(适合已知循环次数) - - ```javascript - // 循环1-5,打印每个数字 - for (let i = 1; i <= 5; i++) { - console.log(i); // 输出:1 2 3 4 5 - } - ``` - - ### 2. while 循环(适合未知循环次数,先判断后执行) - - ```javascript - let count = 0; - // 计数到3时停止 - while (count < 3) { - console.log(count); // 输出:0 1 2 - count++; - } - ``` - - ### 3. do-while 循环(先执行后判断,至少执行 1 次) - - ```javascript - let num = 1; - do { - console.log(num); // 输出:1 2 - num++; - } while (num <= 2); - ``` - -## 函数定义(核心 3 种) - -1. **函数声明**(有提升,可提前调用) - -```javascript -function add(a, b) { - return a + b; -} -``` - -1. **函数表达式**(无提升,需先定义再调用) - -```javascript -const sub = function(a, b) { - return a - b; -}; -``` - -1. **箭头函数** - -```javascript -const multiply = (a, b) => a * b; // 单语句直接返回 -const sum = (a, b, c) => { // 多语句需大括号+return - const total = a + b + c; - return total; -}; -``` - -## 函数参数 - -- **默认值**:`function greet(name = "Guest") {}`(传 undefined 时生效) -- **剩余参数**:`function sumAll(...nums) {}`(接收多余实参为数组) -- **形实参不一致**:实参少则多余形参为 undefined,实参多可通过剩余参数获取 - -## this 指向(关键) - -- 普通函数:谁调用就指向谁(全局调用→window/global,对象调用→该对象) -- 箭头函数:无自身 this,继承外层作用域的 this -- 改变 this:`call(obj, 1,2)`、`apply(obj, [1,2])`(立即执行),`bind(obj)`(返回新函数) - -## 闭包(简单理解) - -- 内层函数引用外层函数变量,且内层函数被外部使用 -- 用途:封装私有变量 - -```javascript -function createCounter() { - let count = 0; - return () => count++; // 内层函数引用count,形成闭包 -} -const counter = createCounter(); -console.log(counter()); // 1 -``` - -# 函数返回值 - -## 核心规则 - -1. 用 `return` 关键字指定返回值,执行到 `return` 后函数立即终止(后续代码不执行) -2. 无 `return` 或 `return` 后无内容,函数默认返回 `undefined` - - - -## 作业 - -训练1 - -```javascript - -``` - -训练2 - -```javascript - -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251119-JavaScript\345\207\275\346\225\260\345\217\212\345\257\271\350\261\241.md" "b/\350\265\265\344\277\212\350\261\252/20251119-JavaScript\345\207\275\346\225\260\345\217\212\345\257\271\350\261\241.md" deleted file mode 100644 index f927329e119a4f622907bc0f1718388d67d8bb37..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251119-JavaScript\345\207\275\346\225\260\345\217\212\345\257\271\350\261\241.md" +++ /dev/null @@ -1,265 +0,0 @@ - - -## 笔记 - -### 参数 - -- **形参**:函数定义时的 “占位符”(如 `add(a, b)` 中的 `a`、`b`) -- **实参**:函数调用时传入的 “实际值”(如 `add(1, 2)` 中的 `1`、`2`) - -### 返回值(return) - -- 函数执行后通过 `return` 向外输出结果,执行到 `return` 后立即终止函数 - -- 无return或return后无内容,默认返回undefined - - ```javascript - function foo() { - console.log("执行"); - return; // 后续代码不执行 - console.log("不会执行"); - } - foo(); // 输出"执行",返回undefined - ``` - -### 闭包(重要) - -- 定义:内层函数引用外层函数的变量,且内层函数被外部访问,形成闭包 - -- 作用:保留外层函数的变量和作用域,实现 “数据私有化” - - ```javascript - function createCounter() { - let count = 0; // 被闭包引用,不会销毁 - return function() { - return ++count; - }; - } - const counter = createCounter(); - console.log(counter()); // 1 - console.log(counter()); // 2(count 被保留) - ``` - - - -### this 关键字 - -指向 “函数调用时的上下文对象”,取决于调用方式(箭头函数无自身this) - -| 调用方式 | this 指向 | -| --------------- | ---------------------------------------- | -| 普通函数调用 | 全局对象(浏览器:window,Node:global) | -| 对象方法调用 | 该对象 | -| 构造函数调用 | 新创建的实例对象 | -| call/apply/bind | 手动指定的对象 | - -```javascript -const person = { - name: "Tom", - sayName() { - console.log(this.name); // this 指向 person - } -}; -person.sayName(); // Tom -``` - - - -### 递归函数(自身调用自身) - -- 必须有 “终止条件”,否则会无限递归导致栈溢出 - -- 示例:斐波那契数列(之前的核心案例) - - ```javascript - function fib(n) { - if (n <= 2) return 1; // 终止条件 - return fib(n - 1) + fib(n - 2); // 自身调用 - } - ``` - -

      对象 - -## 一、对象的定义(3 种方式) - -### 1. 对象字面量(最常用) - -直接用 `{}` 包裹键值对,简洁直观,日常开发首选。 - -```javascript -// 语法:{ 键1: 值1, 键2: 值2, ... } -const person = { - name: "Alice", // 属性(值为字符串) - age: 20, // 属性(值为数字) - isStudent: true, // 属性(值为布尔值) - hobbies: ["读书", "跑步"], // 属性(值为数组) - sayHi: function() { // 方法(值为函数) - console.log(`Hi, 我是${this.name}`); - }, - address: { // 嵌套对象 - city: "北京", - area: "朝阳区" - } -}; -``` - -- 键(key):默认是字符串(可省略引号,特殊字符需加引号,如 `"user-name": "xxx"`) -- 值(value):可是任意数据类型(字符串、数字、数组、函数、对象等) - -### 2. 构造函数(new Object ()) - -通过 `new Object()` 创建空对象,再动态添加属性 / 方法,适合不确定初始结构的场景。 - -```javascript -const car = new Object(); -// 动态添加属性 -car.brand = "特斯拉"; -car.price = 300000; -// 动态添加方法 -car.run = function() { - console.log(`${this.brand} 正在行驶`); -}; -``` - -## 作业 - -1.斐波那契数列 - - - -训练5 - -```javascript - -``` - -训练6 - -```javascript - -``` - -训练7 - -```javascript - -``` - -训练8 - -```javascript - -``` - -综合练习1 - -```javascript - -``` - -综合练习2 - -```javascript -function getDaysInMonth(year, month) { - function isLeapYear() { - return (year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0); - } - switch (month) { - case 1: case 3: case 5: case 7: case 8: case 10: case 12: - return 31; // 大月:31天 - case 4: case 6: case 9: case 11: - return 30; // 小月:30天 - case 2: - return isLeapYear() ? 29 : 28; - default: - return "月份错误!请传入1-12之间的整数"; - } -} -console.log(getDaysInMonth(2024, 6)); -``` - -综合练习3 - -```javascript - -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251120-JavaScript\344\271\213\345\257\271\350\261\241.md" "b/\350\265\265\344\277\212\350\261\252/20251120-JavaScript\344\271\213\345\257\271\350\261\241.md" deleted file mode 100644 index a4873ec619aaffe6b8b9e98aa8a34fc0065c5656..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251120-JavaScript\344\271\213\345\257\271\350\261\241.md" +++ /dev/null @@ -1,212 +0,0 @@ -## 笔记 - -## 对象的创建方式(4 种常用) - -| 创建方式 | 语法示例 | 适用场景 | -| ------------- | ------------------------------------------------------------ | ---------------------------- | -| 1. 对象字面量 | `const obj = { key1: value1, key2: value2 }` | 单个对象,简洁高效(最常用) | -| 2. 构造函数 | `const obj = new Object(); obj.key = value;` | 动态添加属性(较少用) | -| 3. 工厂函数 | `function createObj(name) { return { name, sayHi() {} } } const obj = createObj("张三");` | 批量创建结构相同的对象 | -| 4. ES6 类 | `class Obj { constructor(name) { this.name = name; } sayHi() {} } const obj = new Obj("张三");` | 面向对象编程,批量实例化 | - -## 对象的核心操作(增删改查) - -### 1. 访问属性(查) - -- 点语法(常用):`对象.键名`(键名需为合法标识符,无特殊字符) -- 方括号语法:`对象["键名"]`(支持特殊字符、动态键) - -```javascript -const user = { username: "admin", "favorite-color": "红色" }; -console.log(user.username); // 输出:admin(点语法) -console.log(user["favorite-color"]); // 输出:红色(特殊键必须用方括号) - -// 动态键 -const key = "username"; -console.log(user[key]); // 输出:admin -``` - -### 2. 修改属性(改) - -直接给已有键重新赋值: - -```javascript -user.age = 26; // 点语法修改 -user["favorite-color"] = "蓝色"; // 方括号修改 -``` - -### 3. 添加属性(增) - -给新键赋值即可: - -```javascript -user.gender = "男"; // 新增属性gender -user["hobby"] = "编程"; // 新增属性hobby -``` - -### 4. 删除属性(删) - -用 `delete` 关键字: - -```javascript -delete user.hobby; // 删除hobby属性 -console.log(user.hobby); // 输出:undefined(属性已不存在) -``` - -## 对象的关键特性 - -### 1. 引用类型的坑 - -- 赋值 / 传参传递的是 “引用地址”,不是对象副本,修改一个会影响所有引用: - -```javascript -const obj1 = { a: 1 }; -const obj2 = obj1; // obj2复制obj1的引用 -obj2.a = 2; -console.log(obj1.a); // 输出:2(obj1也被修改) -``` - -### 2. 键名的规则 - -- 默认隐式转为字符串(如 `123` 键 → `"123"`) -- 可使用 Symbol 作为键(保证唯一性): - -```javascript -const sym = Symbol("key"); -const obj = { [sym]: "唯一值" }; -``` - -### 3. this 关键字 - -- 对象方法中,`this` 指向当前对象: - -```javascript -const person = { - name: "张三", - sayName() { console.log(this.name); } // this指向person -}; -person.sayName(); // 输出:张三 -``` - -## 常见内置对象(JS 自带) - -- 基础工具:`String`(字符串)、`Number`(数字)、`Boolean`(布尔) -- 数据结构:`Array`(数组)、`Object`(对象)、`Map`(映射)、`Set`(集合) -- 功能工具:`Date`(日期)、`Math`(数学计算)、`RegExp`(正则) -- 浏览器宿主对象:`window`(窗口)、`document`(文档)、DOM 元素(如 div 对象) - -## 常用技巧 - -1. 遍历对象的键值对: - -```javascript -const obj = { a: 1, b: 2 }; -// 方式1:for...in(遍历可枚举属性) -for (let key in obj) { - console.log(key, obj[key]); // 输出:a 1、b 2 -} -// 方式2:Object.keys/values/entries(推荐) -Object.keys(obj); // 获取所有键:["a", "b"] -Object.values(obj); // 获取所有值:[1, 2] -Object.entries(obj); // 获取键值对数组:[["a",1], ["b",2]] -``` - -## 作业 - -训练1 - -```javascript - -``` - -训练2 - -```javascript - -``` - -训练3 - -```javascript - -``` - -综合训练1 - -``` - - - - - -``` - -综合训练2 - -```javascript - -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251121-JavaScript\344\271\213\346\225\260\347\273\204.md" "b/\350\265\265\344\277\212\350\261\252/20251121-JavaScript\344\271\213\346\225\260\347\273\204.md" deleted file mode 100644 index ebe8fb5673c461547c467c17c20413407ef5863e..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251121-JavaScript\344\271\213\346\225\260\347\273\204.md" +++ /dev/null @@ -1,132 +0,0 @@ -## 笔记 - -## 一、数组的创建 - -### 1. 字面量方式(最常用) - -```javascript -// 创建空数组 -const arr1 = []; - -// 创建包含元素的数组 -const arr2 = [1, 'hello', true, { name: '张三' }, [1, 2, 3]]; -``` - -### 2. 构造函数方式 - -```javascript -// 创建空数组 -const arr3 = new Array(); - -// 创建指定长度的数组(初始值为 undefined) -const arr4 = new Array(5); - -// 创建包含元素的数组 -const arr5 = new Array(1, 'hello', true); -``` - -**注意**: - -- `new Array(5)` 创建一个长度为 5 的空数组,而不是包含一个元素 `5` 的数组。 -- 如果要创建包含单个数字元素的数组,应使用字面量方式 `[5]`,或 `new Array('5')`(不推荐)。 - -## 二、数组的访问和修改 - -### 1. 访问元素 - -通过索引访问数组元素,索引从 0 开始: - -```javascript -const arr = ['a', 'b', 'c', 'd']; - -console.log(arr[0]); // 输出 'a'(第一个元素) -console.log(arr[2]); // 输出 'c'(第三个元素) -console.log(arr[arr.length - 1]); // 输出 'd'(最后一个元素) -``` - -### 2. 修改元素 - -直接通过索引修改数组元素: - -```javascript -const arr = ['a', 'b', 'c']; - -arr[1] = 'x'; // 将索引 1 的元素修改为 'x' -console.log(arr); // 输出 ['a', 'x', 'c'] -``` - -### 3. 数组的长度 - -通过 `length` 属性获取或修改数组的长度: - -```javascript -const arr = [1, 2, 3, 4]; - -console.log(arr.length); // 输出 4(数组长度) - -arr.length = 2; // 缩短数组长度为 2 -console.log(arr); // 输出 [1, 2] - -arr.length = 5; // 增加数组长度为 5,新增元素为 undefined -console.log(arr); // 输出 [1, 2, undefined, undefined, undefined] -``` - -## 三、数组的核心方法 - -数组提供了大量内置方法,用于操作数组元素。以下是最常用的方法分类整理: - -### 1. 增删改查(改变原数组) - -#### (1) 添加元素 - -- `push(element1, ..., elementN)`:在数组末尾添加一个或多个元素,返回新的长度。 - - ```javascript - const arr = [1, 2, 3]; - arr.push(4, 5); - console.log(arr); // 输出 [1, 2, 3, 4, 5] - ``` - -- `unshift(element1, ..., elementN)`:在数组开头添加一个或多个元素,返回新的长度。 - - ```javascript - const arr = [3, 4, 5]; - arr.unshift(1, 2); - console.log(arr); // 输出 [1, 2, 3, 4, 5] - ``` - -#### (2) 删除元素 - -- `pop()`:删除数组最后一个元素,返回被删除的元素。 - - ```javascript - const arr = [1, 2, 3, 4]; - const last = arr.pop(); - console.log(arr); // 输出 [1, 2, 3] - console.log(last); // 输出 4 - ``` - -- `shift()`:删除数组第一个元素,返回被删除的元素。 - - ```javascript - const arr = [1, 2, 3, 4]; - const first = arr.shift(); - console.log(arr); // 输出 [2, 3, 4] - console.log(first); // 输出 1 - ``` - -- `splice(start, deleteCount, item1, ..., itemN)`:从指定索引开始删除元素,并可选地添加新元素,返回被删除的元素数组。 - - ```javascript - const arr = [1, 2, 3, 4, 5]; - - // 删除索引 2 开始的 2 个元素(3,4) - const deleted = arr.splice(2, 2); - console.log(arr); // 输出 [1, 2, 5] - console.log(deleted); // 输出 [3, 4] - - // 从索引 1 开始删除 0 个元素,添加 'a', 'b' - arr.splice(1, 0, 'a', 'b'); - console.log(arr); // 输出 [1, 'a', b', 2, 5] - ``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251124-JavaScript\344\271\213\346\225\260\347\273\204\345\217\212string\345\257\271\350\261\241.md" "b/\350\265\265\344\277\212\350\261\252/20251124-JavaScript\344\271\213\346\225\260\347\273\204\345\217\212string\345\257\271\350\261\241.md" deleted file mode 100644 index 284bcb1209bead481d92606df486b9c5309cd126..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251124-JavaScript\344\271\213\346\225\260\347\273\204\345\217\212string\345\257\271\350\261\241.md" +++ /dev/null @@ -1,386 +0,0 @@ -## 笔记 - -### 数组的常用方法 - -按功能分类整理,区分**会修改原数组**和**不会修改原数组**的方法。 - -#### (1)增删改查(修改原数组) - -| 方法 | 说明 | 示例 | -| ------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------- | -| `push(item1, ...)` | 向数组**末尾**添加元素,返回新长度 | `arr.push(4); // [1,2,3,4]` | -| `pop()` | 删除数组**末尾**元素,返回被删元素 | `arr.pop(); // 返回3,数组变为[1,2]` | -| `unshift(item1, ...)` | 向数组**开头**添加元素,返回新长度 | `arr.unshift(0); // [0,1,2,3]` | -| `shift()` | 删除数组**开头**元素,返回被删元素 | `arr.shift(); // 返回1,数组变为[2,3]` | -| `splice(start, deleteCount, item...)` | 从`start`位置删除`deleteCount`个元素,插入新元素,返回被删元素数组 | `arr.splice(1, 1, 'a'); // 从索引1删1个,插入'a'` | -| `reverse()` | 反转数组,返回反转后的数组 | `arr.reverse(); // [3,2,1]` | -| `sort()` | 对数组排序,默认按字符串 Unicode 码排序,返回排序后数组 | `arr.sort((a,b)=>a-b); // 数字升序` | - -#### (2)遍历 / 迭代(不修改原数组) - -| 方法 | 说明 | 示例 | -| --------------------------------------------- | --------------------------------------------- | ---------------------------------------------------- | -| `forEach((item, index, arr) => {})` | 遍历数组,无返回值 | `arr.forEach((item) => console.log(item))` | -| `map((item, index, arr) => {})` | 遍历数组,返回新数组(每个元素为回调返回值) | `arr.map(item => item * 2) // [2,4,6]` | -| `filter((item, index, arr) => {})` | 过滤数组,返回符合条件的新数组 | `arr.filter(item => item > 2) // [3]` | -| `find((item, index, arr) => {})` | 返回第一个符合条件的元素,无则返回`undefined` | `arr.find(item => item > 1) // 2` | -| `findIndex((item, index, arr) => {})` | 返回第一个符合条件的元素索引,无则返回`-1` | `arr.findIndex(item => item > 3) // -1` | -| `every((item, index, arr) => {})` | 检测所有元素是否符合条件,返回布尔值 | `arr.every(item => item > 0) // true` | -| `some((item, index, arr) => {})` | 检测是否有至少一个元素符合条件,返回布尔值 | `arr.some(item => item > 2) // true` | -| `reduce((acc, item, index, arr) => {}, init)` | 累加器,将数组缩减为单个值(从左到右) | `arr.reduce((acc, item) => acc + item, 0) // 6` | -| `reduceRight((acc, item) => {}, init)` | 累加器,从右到左遍历 | `arr.reduceRight((acc, item) => acc + item, 0) // 6` | - -#### (3)数组拼接 / 截取(不修改原数组) - -| 方法 | 说明 | 示例 | -| ----------------------- | ------------------------------------------------ | ---------------------------------- | -| `concat(arr1, arr2...)` | 拼接多个数组 / 元素,返回新数组 | `[1,2].concat([3,4]) // [1,2,3,4]` | -| `slice(start, end)` | 截取从`start`到`end`(不包含)的元素,返回新数组 | `arr.slice(0,2) // [1,2]` | -| `join(separator)` | 将数组转为字符串,用`separator`分隔,默认逗号 | `arr.join('-') // "1-2-3"` | - -#### (4)其他常用方法 - -| 方法 | 说明 | 示例 | -| -------------------------- | ------------------------------------------------- | ------------------------------------------------------ | -| `indexOf(item, start)` | 查找元素首次出现的索引,无则返回`-1` | `arr.indexOf(2) // 1` | -| `lastIndexOf(item, start)` | 查找元素最后出现的索引,无则返回`-1` | `arr.lastIndexOf(2) // 1` | -| `includes(item, start)` | 判断数组是否包含指定元素,返回布尔值 | `arr.includes(3) // true` | -| `flat(depth)` | 扁平化数组,`depth`为扁平化深度(默认 1) | `[1,[2,[3]]].flat(2) // [1,2,3]` | -| `flatMap((item) => {})` | `map`+`flat(1)`的结合,返回新数组 | `arr.flatMap(item => [item, item*2]) // [1,2,2,4,3,6]` | -| `fill(value, start, end)` | 用`value`填充数组(从`start`到`end`),修改原数组 | `arr.fill(0, 1, 3) // [1,0,0]` | - -### 4. 数组的注意事项 - -1. 数组是引用类型 - - :赋值和传参时传递的是地址,修改副本会影响原数组(深拷贝需手动实现)。 - - ```javascript - const arr = [1,2]; - const arr2 = arr; - arr2.push(3); - console.log(arr); // [1,2,3] - ``` - - - -2. **数组的索引**:默认是从 0 开始的数字索引,也可添加字符串属性,但不会计入`length`。 - -3. **空数组与稀疏数组**:`[1,,3]`是稀疏数组(中间元素为`empty`),遍历需注意跳过空元素。 - -4. **`sort()`的坑**:默认按字符串排序,数字排序需传入比较函数`(a,b)=>a-b`(升序)/`(a,b)=>b-a`(降序)。 - -## String 对象笔记 - -String 对象用于处理文本字符串,JS 中字符串有**原始值**和**对象形式**两种,原始值会自动装箱为 String 对象以调用方法。 - -### 1. 字符串的创建 - -```javascript -// 1. 原始值方式(推荐) -const str1 = 'hello world'; -const str2 = 'a'; - -// 2. 构造函数方式(不推荐,会创建对象) -const str3 = new String('hello'); -console.log(typeof str3); // "object" - -// 3. 模板字符串(ES6,支持换行和变量插值) -const name = 'JS'; -const str4 = `Hello ${name} -这是换行的内容`; -``` - -### 2. 字符串的核心属性 - -| 属性 | 说明 | -| ------------- | ------------------------------------- | -| `length` | 获取字符串的长度(字符个数) | -| `constructor` | 指向 String 构造函数 | -| `prototype` | String 的原型对象,用于扩展字符串方法 | - -示例: - -```javascript -const str = 'hello'; -console.log(str.length); // 5 -``` - -### 3. 字符串的常用方法 - -字符串是**不可变的**,所有方法都不会修改原字符串,而是返回新字符串。 - -#### (1)字符访问 - -| 方法 | 说明 | 示例 | -| ------------------- | --------------------------------------------- | -------------------------- | -| `charAt(index)` | 返回指定索引的字符 | `'hello'.charAt(0) // "h"` | -| `charCodeAt(index)` | 返回指定索引字符的 Unicode 编码 | `'A'.charCodeAt(0) // 65` | -| `[]` | 直接通过索引访问(ES5+),无则返回`undefined` | `'hello'[1] // "e"` | - -#### (2)查找与匹配 - -| 方法 | 说明 | 示例 | -| --------------------------------- | ------------------------------------------------ | ------------------------------------------ | -| `indexOf(searchValue, start)` | 查找子串首次出现的索引,无则返回`-1` | `'hello'.indexOf('l') // 2` | -| `lastIndexOf(searchValue, start)` | 查找子串最后出现的索引,无则返回`-1` | `'hello'.lastIndexOf('l') // 3` | -| `includes(searchValue, start)` | 判断是否包含子串,返回布尔值 | `'hello'.includes('ll') // true` | -| `startsWith(searchValue, start)` | 判断是否以指定子串开头,返回布尔值 | `'hello'.startsWith('he') // true` | -| `endsWith(searchValue, length)` | 判断是否以指定子串结尾(`length`为字符串长度) | `'hello'.endsWith('lo') // true` | -| `search(regexp)` | 查找与正则匹配的子串,返回首次索引,无则返回`-1` | `'hello'.search(/l/) // 2` | -| `match(regexp)` | 匹配正则,返回匹配结果数组(无则`null`) | `'123a456'.match(/\d+/g) // ["123","456"]` | -| `matchAll(regexp)` | 匹配所有正则结果,返回迭代器 | `[...'123a456'.matchAll(/\d+/g)]` | - -#### (3)截取与拼接 - -| 方法 | 说明 | 示例 | -| ----------------------- | ------------------------------------------------------- | -------------------------------- | -| `slice(start, end)` | 截取从`start`到`end`(不包含)的子串 | `'hello'.slice(1,3) // "el"` | -| `substring(start, end)` | 类似`slice`,但`start>end`时会交换,负数视为 0 | `'hello'.substring(3,1) // "el"` | -| `substr(start, length)` | 从`start`开始截取`length`个字符(已废弃,建议用 slice) | `'hello'.substr(1,2) // "el"` | -| `concat(str1, str2...)` | 拼接多个字符串,返回新字符串 | `'a'.concat('b','c') // "abc"` | -| `+` | 字符串拼接运算符(更常用) | `'a' + 'b' // "ab"` | - -#### (4)替换与分割 - -| 方法 | 说明 | 示例 | -| --------------------------------------- | -------------------------------- | ----------------------------------------- | -| `replace(searchValue, replaceValue)` | 替换第一个匹配的子串(支持正则) | `'hello'.replace('l', 'x') // "hexo"` | -| `replaceAll(searchValue, replaceValue)` | 替换所有匹配的子串(ES2021+) | `'hello'.replaceAll('l', 'x') // "hexxo"` | -| `split(separator, limit)` | 按分隔符分割字符串,返回数组 | `'a,b,c'.split(',') // ["a","b","c"]` | - -#### (5)大小写转换 - -| 方法 | 说明 | 示例 | -| --------------- | -------- | ---------------------------------- | -| `toUpperCase()` | 转为大写 | `'hello'.toUpperCase() // "HELLO"` | -| `toLowerCase()` | 转为小写 | `'HELLO'.toLowerCase() // "hello"` | - -#### (6)去除空白 - -| 方法 | 说明 | 示例 | -| -------------------------- | ---------------- | --------------------------------- | -| `trim()` | 去除首尾空白字符 | `' hello '.trim() // "hello"` | -| `trimStart()`/`trimLeft()` | 去除开头空白 | `' hello'.trimStart() // "hello"` | -| `trimEnd()`/`trimRight()` | 去除结尾空白 | `'hello '.trimEnd() // "hello"` | - -#### (7)填充与重复 - -| 方法 | 说明 | 示例 | -| ----------------------------- | -------------------------------------- | ----------------------------------- | -| `padStart(length, padString)` | 开头填充字符,直到字符串长度为`length` | `'123'.padStart(5, '0') // "00123"` | -| `padEnd(length, padString)` | 结尾填充字符,直到字符串长度为`length` | `'123'.padEnd(5, '0') // "12300"` | -| `repeat(count)` | 重复字符串`count`次,返回新字符串 | `'a'.repeat(3) // "aaa"` | - -### 4. 字符串的注意事项 - -1. 不可变性 - - :字符串的任何方法都不会修改原字符串,需重新赋值接收返回值。 - - ```javascript - let str = 'hello'; - str.toUpperCase(); - console.log(str); // "hello"(原字符串不变) - str = str.toUpperCase(); // "HELLO"(重新赋值) - ``` - -2. **模板字符串的优势**:支持换行、变量插值(`${变量}`),避免拼接字符串的繁琐。 - -3. **正则匹配**:`match`、`search`、`replace`等方法支持正则表达式,需注意正则标志(`g`全局、`i`忽略大小写)。 - -4. **字符编码**:`charCodeAt`返回 UTF-16 编码,可用于字符与编码的转换。 - -## 三、数组与字符串的相互转换 - -1. **数组转字符串**:`arr.join(separator)` 或 `arr.toString()`。 -2. **字符串转数组**:`str.split(separator)` 或 `Array.from(str)`。 - -示例: - -```javascript -// 数组转字符串 -const arr = [1,2,3]; -console.log(arr.join('-')); // "1-2-3" - -// 字符串转数组 -const str = 'hello'; -console.log(str.split('')); // ["h","e","l","l","o"] -console.log(Array.from(str)); // ["h","e","l","l","o"] -``` - -## 作业 - -训练1 - -```JavaScript - -``` - -训练2 - -````JavaScript - -```` - -训练3 - -```javascript -const arr = [1,2,3,4,5,6]; -// 第二个元素索引为1,倒数第二个元素索引为-2(或4) -const result = arr.slice(1, -1); -console.log(result); // [2,3,4,5] -``` - -综合练习1 - -```javascript - -``` - -综合练习2 - -````JavaScript - - - -
      排名品牌市场份额
      - - -```` - -string - -训练1 - -```JavaScript - let arr = ["《雪山飞狐》", "《连城诀》", "《天龙八部》", "《射雕英雄传》", "《鹿鼎记》", "《笑傲江湖》", "《书剑恩仇记》", "《神雕侠侣》", "《倚天屠龙记》", "《碧血剑》"]; - let fourname = ""; - for (let i = 0; i < arr.length; i++) { - if (arr[i].length == 6) { - fourname += arr[i] + " " - } - } - document.write("四个字的书籍为:" + fourname); -``` - -训练2 - -```JavaScript - let contacts = [ - '1330431****', - '1567766****', - '1304316****', - '1526567****', - '1580433****', - '139****0431' - ]; - let resulet = contacts.filter(phone => phone.includes('0431')); - document.write('含有0431的手机号:
      '); - resulet.forEach( - (phone, index) => { - document.write(`${index + 1}. ${phone}
      `); - } - ); -``` - -训练3 - -```JavaScript - let number = '4006****66@qq.com'; - document.write('QQ号为:' + number.substr(0, 10)); -``` - -综合练习1 - -```JavaScript - let str = "abc@sina.com"; - if (str.indexOf("@") == 3 && str.indexOf(".") == 8) { - alert("此网站为有效邮箱网站"); - } else { - alert("此网站为无效邮箱网站"); - } -``` - -综合练习2 - -```JavaScript - let charPool = '0123456789ABCDEFG'; - let randomStr = ''; - for (let i = 0; i < 6; i++) { - let randomIndex = Math.floor(Math.random() * charPool.length); - randomStr += charPool[randomIndex]; - } - let strArray = randomStr.split(''); - document.write('生成的6位随机字符串:', randomStr + '
      '); - document.write('split()拆分后的数组:', strArray); -``` - -综合练习3 - -```JavaScript - 1. (AI) - function formatNumber(num) { - // 将数字转为字符串并反转 - const str = num.toString().split('').reverse().join(''); - let result = ''; - // 每3位添加逗号 - for (let i = 0; i < str.length; i++) { - if (i > 0 && i % 3 === 0) { - result += ','; - } - result += str[i]; - } - // 再次反转恢复顺序并返回 - return result.split('').reverse().join(''); - } - - // 测试 - console.log(formatNumber(13625966)); // 输出:13,625,966 -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251126-JavaScript\346\255\243\345\210\231.md" "b/\350\265\265\344\277\212\350\261\252/20251126-JavaScript\346\255\243\345\210\231.md" deleted file mode 100644 index 51363489b0090e390875bf6aca657a8f0846b689..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251126-JavaScript\346\255\243\345\210\231.md" +++ /dev/null @@ -1,6 +0,0 @@ -## 笔记 - -- 字符串.match(正则) 返回匹配到的字符串 -- 字符串.replace(正则,'要替换的字符串') 返回替换后的完整字符串 -- 正则.exec(字符串) 返回匹配到的字符串、所在的位置,完整字符串 -- 正则.test(字符串) 返回匹配字符串的结果:true false \ No newline at end of file diff --git "a/\350\265\265\344\277\212\350\261\252/20251127-JavaScript\344\271\213\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225.md" "b/\350\265\265\344\277\212\350\261\252/20251127-JavaScript\344\271\213\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225.md" deleted file mode 100644 index 9ab42fce06818868755cfdf8c608e8313f0c8f2e..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251127-JavaScript\344\271\213\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225.md" +++ /dev/null @@ -1,504 +0,0 @@ -## 笔记 - -## 一、异常处理核心概念 - -### 1. 什么是异常? - -异常是程序执行过程中发生的**意外错误**(如语法错误、逻辑错误、运行时错误),会导致程序终止执行。 - -- 常见异常类型: - - 语法错误(SyntaxError):代码语法不符合 JS 规范(如括号不匹配、关键字拼写错误) - - 类型错误(TypeError):操作对象类型错误(如调用 undefined 的方法、给非函数类型变量传参) - - 引用错误(ReferenceError):使用未声明的变量 / 函数 - - 范围错误(RangeError):数值超出有效范围(如数组长度为负数) - - 自定义异常:手动抛出的业务异常(如参数校验失败) - -### 2. 异常处理的目的 - -- 避免程序崩溃,保证核心逻辑正常执行 -- 优雅捕获错误,提供友好的错误提示 -- 记录错误信息,便于问题排查 -- 控制错误传播范围,避免影响全局 - -## 二、异常处理语法 - -### 1. try-catch-finally - -用于捕获代码块中可能发生的异常,是 JS 最基础的异常处理机制。 - -#### 语法结构: - -```javascript -try { - // 可能发生异常的代码(核心业务逻辑) - riskyOperation(); -} catch (error) { - // 异常捕获后执行的逻辑(错误处理) - console.error("捕获到异常:", error); -} finally { - // 无论是否发生异常,都会执行的代码(资源释放、清理操作) - cleanupResources(); -} -``` - -#### 关键说明: - -- `try` 块:包裹可能出错的代码,一旦发生异常,立即跳转到 `catch` 块 -- `catch (error)`:接收异常对象,包含错误信息(`error.message`)、错误类型(`error.name`)、错误堆栈(`error.stack`) -- `finally` 块:可选,常用于关闭文件、清除定时器、释放网络连接等**必须执行**的操作 -- 执行流程: - - 无异常:`try` → `finally` - - 有异常:`try`(异常点)→ `catch` → `finally` - -#### 示例: - -```javascript -function parseJSON(str) { - try { - return JSON.parse(str); // 可能抛出 SyntaxError(JSON 格式错误) - } catch (error) { - console.error("JSON 解析失败:", error.message); - return null; // 提供默认返回值,避免程序中断 - } finally { - console.log("解析操作完成(无论成功与否)"); - } -} - -parseJSON('{"name": "张三"}'); // 成功:返回对象,执行 finally -parseJSON('{name: "张三"}'); // 失败:捕获错误,返回 null,执行 finally -``` - -### 2. throw 手动抛出异常 - -用于主动抛出自定义异常,适用于业务规则校验(如参数合法性检查)。 - -#### 语法: - -```javascript -throw 异常对象; // 可抛出字符串、数字、对象等,推荐抛出 Error 实例 -``` - -#### 推荐用法(抛出 Error 实例): - -```javascript -function getUserById(id) { - if (typeof id !== "number" || id < 1) { - // 抛出类型错误,包含详细信息 - throw new TypeError("用户 ID 必须是大于 0 的数字"); - } - if (!userExists(id)) { - // 抛出自定义业务异常 - throw new Error(`未找到 ID 为 ${id} 的用户`); - } - return getUserData(id); -} -``` - -#### 注意: - -- 抛出异常后,后续代码不会执行,需配合 `try-catch` 捕获 -- 尽量使用 `Error` 及其子类(TypeError、ReferenceError 等),便于统一处理错误堆栈 - -### 3. try-catch 与异步代码 - -#### 问题:`try-catch` 无法直接捕获**异步代码**中的异常(如 setTimeout、Promise、async/await) - -```javascript -// 无效:异步代码的异常不会被外层 try-catch 捕获 -try { - setTimeout(() => { - throw new Error("异步代码异常"); - }, 100); -} catch (error) { - console.error("捕获失败:", error); -} -``` - -#### 解决方案: - -##### (1)异步回调函数内捕获 - -```javascript -setTimeout(() => { - try { - throw new Error("异步代码异常"); - } catch (error) { - console.error("捕获成功:", error); - } -}, 100); -``` - -##### (2)Promise 异常处理(.catch ()) - -```javascript -// Promise 内的异常会被 .catch() 捕获 -new Promise((resolve, reject) => { - throw new Error("Promise 执行异常"); -}) - .then((result) => console.log(result)) - .catch((error) => console.error("Promise 捕获异常:", error)); - -// 异步操作的异常(如网络请求) -fetch("/api/user") - .then((res) => res.json()) - .catch((error) => console.error("请求失败:", error)); -``` - -##### (3)async/await 异常处理(try-catch) - -`async/await` 语法糖允许用同步的 `try-catch` 捕获异步异常,更简洁: - -```javascript -async function fetchUser() { - try { - const res = await fetch("/api/user"); // 异步请求 - const data = await res.json(); - return data; - } catch (error) { - console.error("请求异常:", error); - return null; - } -} - -fetchUser(); -``` - -### 4. 错误边界(Error Boundary)- React 场景 - -React 中,组件内的异常会导致整个组件树崩溃,可通过**错误边界组件**捕获子组件异常: - -```javascript -class ErrorBoundary extends React.Component { - constructor(props) { - super(props); - this.state = { hasError: false }; - } - - static getDerivedStateFromError(error) { - // 更新状态,显示错误 fallback UI - return { hasError: true }; - } - - componentDidCatch(error, errorInfo) { - // 记录错误日志(如上报到监控系统) - console.error("组件异常:", error, errorInfo); - } - - render() { - if (this.state.hasError) { - return

      抱歉,组件加载失败

      ; // 错误提示 UI - } - return this.props.children; // 正常渲染子组件 - } -} - -// 使用:包裹可能出错的子组件 - - - -``` - -## 三、错误对象详解 - -捕获的 `error` 对象包含以下核心属性(标准 Error 实例): - -| 属性 | 说明 | -| --------------- | ------------------------------------------------------------ | -| `error.name` | 错误类型(如 "SyntaxError"、"TypeError") | -| `error.message` | 错误描述信息(可读的错误原因) | -| `error.stack` | 错误堆栈跟踪(包含错误发生的文件、行号、调用栈),用于定位问题 | - -#### 示例:打印错误详情 - -```javascript -try { - const obj = undefined; - obj.getName(); // 抛出 TypeError -} catch (error) { - console.log("错误类型:", error.name); // "TypeError" - console.log("错误信息:", error.message); // "Cannot read properties of undefined (reading 'getName')" - console.log("错误堆栈:", error.stack); // 包含文件路径、行号、调用栈 -} -``` - -## 四、程序调试技巧 - -### 1. 控制台调试(console 方法) - -最基础的调试方式,通过打印日志观察变量状态和执行流程。 - -| 方法 | 说明 | 示例 | -| ------------------------------------ | ------------------------------------- | ------------------------------------------------------- | -| `console.log()` | 打印普通日志(支持多参数、格式化) | `console.log("用户信息:", user)` | -| `console.error()` | 打印错误日志(红色高亮,包含堆栈) | `console.error("参数错误:", err)` | -| `console.warn()` | 打印警告日志(黄色高亮) | `console.warn("接口即将废弃")` | -| `console.table()` | 以表格形式打印数组 / 对象(直观查看) | `console.table([{id:1}, {id:2}])` | -| `console.dir()` | 打印对象的详细结构(展开查看属性) | `console.dir(document.body)` | -| `console.time()`/`console.timeEnd()` | 测量代码执行时间 | `console.time("循环"); loop(); console.timeEnd("循环")` | -| `console.trace()` | 打印当前调用栈(定位函数调用路径) | `console.trace("调用栈跟踪")` | - -### 2. 断点调试(浏览器 DevTools) - -#### 核心步骤: - -1. 打开浏览器开发者工具(F12 或 Ctrl+Shift+I),切换到 **Sources** 面板 -2. 在左侧文件树中找到要调试的 JS 文件 -3. 点击代码行号左侧,设置**断点**(行号变红) -4. 刷新页面或触发相关操作,程序会在断点处暂停 -5. 使用调试控制栏操作: - - 继续执行(F8):跳到下一个断点 - - 单步执行(F10):执行下一行代码(不进入函数) - - 单步进入(F11):进入当前函数内部 - - 单步跳出(Shift+F11):跳出当前函数 - - 暂停 / 恢复(F8):暂停或恢复程序执行 - -#### 高级断点技巧: - -- 条件断点 - - :右键断点 → Edit Condition,输入表达式(仅当表达式为 true 时暂停) - - - 示例:`user.id === 10`(仅当用户 ID 为 10 时触发) - -- 日志断点 - - :右键断点 → Edit Log Point,输入日志内容(不暂停程序,仅打印日志) - - - 示例:`"用户名称:" + user.name` - -- 异常断点 - - :Sources 面板 → 勾选 Break on exceptions(遇到未捕获异常时暂停) - - - 勾选 Pause on caught exceptions(遇到捕获的异常也暂停) - -- **DOM 断点**:Elements 面板 → 右键 DOM 元素 → Break on → 选择触发条件(如元素属性变化、子元素修改) - -#### 调试时查看信息: - -- **Scope 面板**:查看当前作用域的变量(局部变量、闭包、全局变量) -- **Watch 面板**:添加自定义表达式(如 `user.age > 18`),实时查看结果 -- **Call Stack 面板**:查看当前函数调用栈(定位函数调用路径) -- **Console 面板**:调试暂停时,可直接输入代码执行(如修改变量值、调用函数) - -### 3. VS Code 断点调试 - -#### 配置步骤: - -1. 安装 VS Code 及 JavaScript 相关插件(如 Debugger for Chrome) - -2. 打开项目文件夹,创建.vscode/launch.json配置文件: - - ```json - { - "version": "0.2.0", - "configurations": [ - { - "type": "chrome", // 浏览器调试 - "request": "launch", - "name": "调试 Chrome", - "url": "http://localhost:5500", // 本地服务地址(需启动本地服务器) - "webRoot": "${workspaceFolder}" // 项目根目录 - } - ] - } - ``` - -3. 在代码行号左侧设置断点,点击左侧「运行和调试」面板 → 启动调试(F5) - -4. VS Code 会自动打开 Chrome 并附加调试器,操作与浏览器 DevTools 类似 - -### 4. 日志上报与监控 - -#### 生产环境调试核心:捕获并上报错误日志 - -1. **全局异常捕获**: - - ```javascript - // 捕获未处理的同步异常 - window.addEventListener("error", (event) => { - console.error("全局同步异常:", event.error); - // 上报到后端监控系统 - reportError({ - type: "sync", - message: event.error.message, - stack: event.error.stack, - url: window.location.href, - time: new Date().toISOString() - }); - }); - - // 捕获未处理的 Promise 异常(如未写 .catch() 的 Promise) - window.addEventListener("unhandledrejection", (event) => { - console.error("全局 Promise 异常:", event.reason); - reportError({ - type: "promise", - message: event.reason.message, - stack: event.reason.stack, - url: window.location.href, - time: new Date().toISOString() - }); - event.preventDefault(); // 阻止浏览器默认提示 - }); - ``` - -2. **日志上报工具**: - - - 自研:通过 `fetch` 或 `XMLHttpRequest` 发送错误信息到后端接口 - - 第三方工具:Sentry、Fundebug、阿里云日志服务等(支持错误堆栈解析、告警通知) - -## 五、最佳实践 - -### 1. 异常处理最佳实践 - -- 只捕获**可预期的异常**,不滥用 try-catch(避免掩盖真正的错误) - -- 捕获异常后要 - - 处理 - - (如返回默认值、提示用户、重试操作),不要空 catch - - ```javascript - // 错误示例:空 catch 掩盖错误 - try { /* 代码 */ } catch (e) {} - - // 正确示例:处理异常 - try { /* 代码 */ } catch (e) { - console.error("错误:", e); - showUserMessage("操作失败,请重试"); - } - ``` - -- 异步代码必须处理异常(Promise 加 `.catch()`,async/await 用 try-catch) - -- 抛出异常时提供**详细的错误信息**(便于排查),避免模糊描述 - -- 生产环境隐藏敏感错误信息(如数据库密码),只暴露用户友好提示 - -### 2. 调试最佳实践 - -- 开发环境使用断点调试,生产环境依赖日志上报 -- 调试前先梳理代码逻辑,定位可能出错的范围(缩小调试范围) -- 使用 `console.log` 时添加明确的标识(如 `console.log("循环后的数据:", data)`),避免日志混乱 -- 调试完成后删除无用的调试代码(或用注释屏蔽) -- 利用 Source Map 关联压缩后的代码与源码(生产环境调试必备) - -### 3. 常见问题排查技巧 - -- 语法错误:查看控制台报错的行号,检查括号、分号、引号是否匹配 - -- 类型错误:检查变量是否定义、是否为预期类型(如 `typeof`、`instanceof` 验证) - -- 异步错误:确认异步操作的回调 / Promise/await 是否正确处理异常 - -- 性能问题:用 `console.time()` 或浏览器 Performance 面板分析代码执行时间,定位耗时操作 - -- 跨域错误:检查接口是否配置 CORS,或使用代理解决跨域问题 - - - - - - ## 作业 - - 训练1 - - ```javascript - - ``` - - - -训练2 - -```javascript - -``` - -综合练习1 - -```html - -
      - - -``` - -综合练习2 - -```javascript -用户名:
      - 密码:
      - - -``` - -回车键监听 - -``` -用户名:
      - 密码:
      - - -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251128-JavaScript\344\271\213\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\350\265\265\344\277\212\350\261\252/20251128-JavaScript\344\271\213\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 9e762412f77cefdb1108bfc0880d151e311846d3..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251128-JavaScript\344\271\213\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,357 +0,0 @@ -## 笔记 - -## 事件的基本概念 - -### 1. 什么是事件? - -- 事件是浏览器或用户触发的**行为动作**(如点击按钮、页面加载完成、输入文字、鼠标移动等)。 -- 事件处理的核心逻辑:**监听事件触发 → 执行预设函数(事件处理函数)**。 - -### 常见事件类型 - -按场景分类,常用事件包括: - -| 事件类别 | 典型事件 | 说明 | -| --------------- | ------------------------------------------------------------ | --------------------------------------- | -| 鼠标事件 | `click`、`dblclick`、`mouseover`、`mouseout`、`mousedown`、`mouseup` | 与鼠标操作相关 | -| 键盘事件 | `keydown`、`keyup`、`keypress`(已废弃) | 键盘按键操作(`keypress` 不支持功能键) | -| 表单事件 | `submit`、`input`、`change`、`focus`、`blur` | 表单元素交互(提交、输入、焦点变化) | -| 文档 / 窗口事件 | `load`、`DOMContentLoaded`、`resize`、`scroll`、`error` | 页面加载、窗口大小变化、滚动等 | -| 触摸事件 | `touchstart`、`touchmove`、`touchend` | 移动设备触摸操作(需兼容移动端时使用) | - -## 事件处理的 3 种核心方式 - -JavaScript 中绑定事件处理函数的方式有 3 种,各有优劣,需根据场景选择。 - -### 1. HTML 内联属性(不推荐) - -直接在 HTML 标签中通过 `onXXX` 属性绑定事件,事件处理函数为全局函数。 - -#### 示例: - -```html - - - - -``` - -#### 优缺点: - -- 优点:写法简单,适合快速测试。 -- 缺点: - - HTML 与 JavaScript 耦合度高,维护困难; - - 事件处理函数必须是全局函数,污染全局作用域; - - 无法绑定多个同名事件(后定义的会覆盖前一个)。 - -### 2. DOM 属性绑定(简单场景可用) - -通过 DOM 元素的 `onXXX` 属性直接赋值事件处理函数(可以是匿名函数或命名函数)。 - -#### 示例: - -```javascript -// 获取 DOM 元素 -const btn = document.getElementById('myBtn'); - -// 方式 1:匿名函数(无法解绑) -btn.onclick = function() { - alert('按钮被点击了(DOM 属性方式)'); -}; - -// 方式 2:命名函数(支持解绑) -function handleBtnClick() { - alert('命名函数绑定'); -} -btn.onclick = handleBtnClick; - -// 解绑事件(赋值为 null) -btn.onclick = null; -``` - -#### 优缺点: - -- 优点:写法简洁,无 HTML 耦合,支持解绑。 -- 缺点: - - 同一事件只能绑定一个处理函数(后绑定的覆盖前一个); - - 无法控制事件流(捕获 / 冒泡)。 - -### 3. `addEventListener` 方法(推荐,主流方式) - -W3C 标准方法,支持为同一元素的同一事件绑定多个处理函数,且能控制事件流(捕获 / 冒泡),是最灵活、最常用的方式。 - -#### 语法: - -``` -element.addEventListener(eventType, handler, useCapture); -``` - -eventType`:事件类型字符串(不带 `on`,如 `click`、`input`); - -`handler`:事件处理函数(可接收 `event` 对象作为参数); - -useCapture:布尔值(可选,默认false): - -- `false`:事件在**冒泡阶段**触发(默认行为); -- `true`:事件在**捕获阶段**触发。 - -#### 示例: - -```javascript -const btn = document.getElementById('myBtn'); - -// 绑定第一个处理函数 -function handler1(e) { - console.log('处理函数 1 触发'); -} -btn.addEventListener('click', handler1); - -// 绑定第二个处理函数(不会覆盖,会依次执行) -btn.addEventListener('click', function(e) { - console.log('处理函数 2 触发'); -}); - -// 解绑事件(必须使用命名函数,匿名函数无法解绑) -btn.removeEventListener('click', handler1); -``` - -#### 优缺点: - -- 优点: - - 支持绑定多个同一事件的处理函数(按绑定顺序执行); - - 可通过 `useCapture` 控制事件流; - - 支持解绑(需保留处理函数引用); - - 不污染全局作用域,耦合度低。 -- 缺点:语法略繁琐,IE8 及以下不支持(需兼容时用 `attachEvent`,但现在已基本淘汰)。 - -## 事件对象(Event Object) - -当事件触发时,浏览器会自动创建一个**事件对象(Event)**,并作为参数传递给事件处理函数。该对象包含事件相关的详细信息(如触发元素、鼠标位置、键盘按键等)。 - -### 1. 核心属性和方法 - -| 属性 / 方法 | 说明 | -| ---------------------------- | ------------------------------------------------ | -| `target` | 事件**实际触发的元素**(最内层元素) | -| `currentTarget` | 事件**绑定的元素**(当前处理函数所属元素) | -| `type` | 事件类型(如 `click`、`input`) | -| `preventDefault()` | 阻止事件的**默认行为**(如表单提交、链接跳转) | -| `stopPropagation()` | 阻止事件**冒泡或捕获**(停止事件流传播) | -| `stopImmediatePropagation()` | 阻止事件流传播,且阻止同一事件的后续处理函数执行 | -| `clientX`/`clientY` | 鼠标相对于浏览器可视区域的坐标 | -| `pageX`/`pageY` | 鼠标相对于文档(页面)的坐标(含滚动距离) | -| `key` | 键盘事件中按下的按键名称(如 `Enter`、`a`) | - -### 2. 常用示例 - -```javascript -// 阻止链接默认跳转行为 -const link = document.querySelector('a'); -link.addEventListener('click', function(e) { - e.preventDefault(); // 阻止链接跳转 - console.log('链接被点击,但未跳转'); -}); - -// 区分 target 和 currentTarget(事件冒泡场景) -const parent = document.getElementById('parent'); -const child = document.getElementById('child'); - -parent.addEventListener('click', function(e) { - console.log('currentTarget(绑定元素):', e.currentTarget.id); // parent - console.log('target(实际触发元素):', e.target.id); // 点击 child 时输出 child,点击 parent 时输出 parent -}); - -// 阻止事件冒泡 -child.addEventListener('click', function(e) { - e.stopPropagation(); // 阻止事件向上传播到 parent - console.log('child 被点击,事件不冒泡'); -}); -``` - -## 作业 - -训练1 - -```javascript -; - -``` - -训练2 - -``` -

      中国的国球是()

      -

      A. 篮球 B. 排球 C. 乒乓球 D. 羽毛球

      -

      按键盘 A/B/C/D 选择答案

      -

      - - -``` - -p189 - -``` -

      - -``` - -``` -

      - -``` - -``` -
      -

      -

      - -
      - - - -``` - -``` -
      - - - - - - - -
      - -``` - -``` -
      - -
      - - -
      - - - -
      - -``` \ No newline at end of file diff --git "a/\350\265\265\344\277\212\350\261\252/20251201-JavaScript\344\271\213\344\272\213\344\273\266.md" "b/\350\265\265\344\277\212\350\261\252/20251201-JavaScript\344\271\213\344\272\213\344\273\266.md" deleted file mode 100644 index 81561d01799e0b3efa97d59c467227ce5cab3d4e..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251201-JavaScript\344\271\213\344\272\213\344\273\266.md" +++ /dev/null @@ -1,568 +0,0 @@ -## 事件的核心概念 - -### 1. 事件的本质 - -- 事件(Event)是浏览器或用户触发的**行为信号**,例如点击按钮、输入文本、网络请求完成等。 -- 事件处理的核心流程:`触发事件 → 事件传播 → 执行处理函数`,本质是「行为与逻辑的映射」。 - -### 2. 常见事件类型(补充高频场景) - -按使用场景分类,补充实际开发中高频用到的事件及细节: - -| 事件类别 | 常见事件 | 关键说明 | -| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| 鼠标事件 | `click`、`dblclick`、`mouseover`/`mouseout`、`mousemove`、`mousedown`/`mouseup` | `mouseover`/`mouseout` 会冒泡,`mouseenter`/`mouseleave` 不冒泡(性能更优) | -| 键盘事件 | `keydown`、`keyup`、`keypress`(已弃用) | `keydown` 按下时触发(支持所有键),`keyup` 松开时触发;`key` 比 `code` 更易读 | -| 表单事件 | `submit`、`input`、`change`、`focus`/`blur`、`input`、`reset` | `input` 实时响应输入(含粘贴 / 删除),`change` 失焦或回车时触发(值变化才触发) | -| 文档 / 窗口事件 | `load`、`DOMContentLoaded`、`resize`、`scroll`、`unload`、`beforeunload` | `DOMContentLoaded` DOM 解析完成即触发(无需等资源),`load` 需等所有资源加载完成 | -| 触摸事件 | `touchstart`、`touchend`、`touchmove`、`touchcancel` | 移动设备专用,需注意 `touchmove` 触发频率高,需配合节流;`touchcancel` 用于异常中断(如来电) | -| 媒体事件 | `play`、`pause`、`ended`、`timeupdate` | 音频 / 视频元素专用,如播放状态变化、进度更新 | -| 其他常用事件 | `contextmenu`(右键菜单)、`error`(资源加载错误)、`hashchange`(URL hash 变化) | `error` 可监听图片、脚本加载失败;`hashchange` 用于单页应用路由监听 | - -### 3. 事件对象(Event)详解 - -事件触发时,浏览器自动创建 `Event` 实例(常用参数名 `e`/`event`),包含事件上下文信息,补充高频属性和注意点: - -```javascript -btn.addEventListener('click', (e) => { - // 核心属性 - e.type; // 事件类型(如 "click") - e.target; // 事件源元素(原始触发元素,冒泡时不变) - e.currentTarget; // 绑定事件的元素(当前处理事件的元素) - e.bubbles; // 布尔值,判断事件是否可冒泡 - e.cancelable; // 布尔值,判断事件是否可阻止默认行为 - - // 坐标相关(鼠标/触摸事件) - e.clientX / e.clientY; // 相对于视口的坐标(不含滚动距离) - e.pageX / e.pageY; // 相对于文档的坐标(含滚动距离) - e.screenX / e.screenY; // 相对于屏幕的坐标 - - // 方法 - e.preventDefault(); // 阻止默认行为(如跳转、表单提交) - e.stopPropagation(); // 阻止事件传播(冒泡/捕获) - e.stopImmediatePropagation(); // 阻止传播 + 同一元素后续处理函数执行 - e.composedPath(); // 返回事件传播路径的元素数组(穿透 Shadow DOM 时有用) -}); -``` - -#### 关键区别 - -- `e.target` vs `e.currentTarget`:点击子元素时,`target` 是子元素,`currentTarget` 是绑定事件的父元素(事件委托核心)。 -- `e.clientX` vs `e.pageX`:页面滚动后,`pageX` 会包含滚动距离,`clientX` 始终以视口为基准。 - -## 二、事件绑定的 3 种方式(对比优化) - -### 1. HTML 内联绑定(强烈不推荐) - -直接在 HTML 标签中通过 `onXXX` 属性绑定,**耦合度极高**,无法复用逻辑,且存在安全风险(如注入攻击)。 - -```html - - - -``` - -### 2. DOM 元素属性绑定(不推荐) - -通过给 DOM 元素的 `onXXX` 属性赋值函数,**同一事件只能绑定一个处理函数**(后续绑定会覆盖),且无法控制事件阶段。 - -```javascript -const btn = document.querySelector('button'); -btn.onclick = () => console.log('第一次绑定'); -btn.onclick = () => console.log('覆盖第一次'); // 覆盖前一个绑定 - -// 解除绑定 -btn.onclick = null; -``` - -### 3. `addEventListener` 绑定(推荐,补充细节) - -W3C 标准方式,支持多处理函数、事件阶段控制、灵活解绑,是实际开发的首选。 - -#### 完整语法 - -```javascript -element.addEventListener( - type: string, // 事件类型(不含 on,如 "click") - listener: EventListener | EventListenerObject, // 处理函数或带 handleEvent 方法的对象 - options?: boolean | AddEventListenerOptions // 配置项 -); -``` - -#### 配置项详解(AddEventListenerOptions) - -| 配置项 | 类型 | 说明 | -| --------- | ----------- | ------------------------------------------------------------ | -| `capture` | boolean | `true`:捕获阶段触发;`false`:冒泡阶段触发(默认) | -| `once` | boolean | `true`:事件触发一次后自动解绑(无需手动调用 removeEventListener) | -| `passive` | boolean | `true`:告知浏览器不会调用 `preventDefault()`,优化滚动 / 触摸性能(避免浏览器等待判断) | -| `signal` | AbortSignal | 通过 AbortController 控制事件解绑(支持批量解绑) | - -#### 进阶示例 - -```javascript -const btn = document.querySelector('button'); - -// 1. 绑定多个处理函数(按顺序执行) -function handler1() { console.log('handler1'); } -function handler2() { console.log('handler2'); } -btn.addEventListener('click', handler1); -btn.addEventListener('click', handler2); - -// 解除单个处理函数(必须传原函数引用,匿名函数无法解绑) -btn.removeEventListener('click', handler1); - -// 2. 一次性事件(once: true) -btn.addEventListener('click', () => console.log('只触发一次'), { once: true }); - -// 3. 优化滚动性能(passive: true) -window.addEventListener('scroll', () => console.log('滚动'), { passive: true }); - -// 4. 批量解绑(AbortController) -const controller = new AbortController(); -const { signal } = controller; - -btn.addEventListener('click', () => console.log('可批量解绑'), { signal }); -window.addEventListener('resize', () => console.log('可批量解绑'), { signal }); - -// 批量解除所有绑定了该 signal 的事件 -controller.abort(); -``` - -#### 注意点 - -- 匿名函数无法通过 `removeEventListener` 解绑,需保留函数引用。 -- `passive: true` 时,若调用 `e.preventDefault()`,浏览器会报警告且该方法失效。 - -## 三、事件流(捕获与冒泡,补充原理) - -### 1. 事件流的本质 - -DOM 是树形结构,事件触发时不会只停留在目标元素,而是会沿 DOM 树传播,这就是事件流。DOM 2 级事件规范定义了「捕获 → 目标 → 冒泡」的三阶段传播机制。 - -### 2. 三阶段详细流程(以点击子元素为例) - -1. **捕获阶段**:事件从 `window` 出发,依次向下传播到目标元素的父级,最终到达目标元素(`window → document → html → body → 父元素 → 目标元素`)。 -2. **目标阶段**:事件到达触发事件的目标元素,执行目标元素上的事件处理函数。 -3. **冒泡阶段**:事件从目标元素出发,依次向上传播到父级,最终回到 `window`(`目标元素 → 父元素 → body → html → document → window`)。 - -#### 可视化示例(点击「孩子」元素) - -```html -
      祖父 -
      父亲 -
      孩子
      -
      -
      - - -``` - -输出顺序(严格遵循三阶段): - -```plaintext -祖父(捕获)→ 父亲(捕获)→ 孩子(捕获)→ 孩子(冒泡)→ 父亲(冒泡)→ 祖父(冒泡) -``` - -### 3. 阻止事件传播的正确用法 - -#### (1)阻止冒泡 `e.stopPropagation()` - -阻止事件向上传播,后续冒泡阶段的处理函数不会执行,但**目标阶段和捕获阶段的函数不受影响**。 - -```javascript -child.addEventListener('click', (e) => { - console.log('孩子'); - e.stopPropagation(); // 阻止冒泡 -}); - -// 点击孩子时,父亲、祖父的冒泡函数不执行,捕获函数仍执行 -``` - -#### (2)阻止默认行为 `e.preventDefault()` - -仅阻止浏览器对事件的默认处理,**不影响事件传播**(冒泡 / 捕获仍会继续)。 - -```html -百度 - -``` - -#### (3)`e.stopImmediatePropagation()` - -同时阻止:① 事件传播(冒泡 / 捕获);② 同一元素上后续绑定的同类型事件处理函数。 - -```javascript -btn.addEventListener('click', () => console.log('第一个函数')); -btn.addEventListener('click', (e) => { - console.log('第二个函数'); - e.stopImmediatePropagation(); -}); -btn.addEventListener('click', () => console.log('第三个函数')); // 不会执行 - -// 点击按钮时,仅输出「第一个函数」「第二个函数」,第三个函数被阻止 -``` - -## 四、事件委托(事件代理,补充进阶用法) - -### 1. 核心原理 - -利用事件**冒泡机制**,将子元素的事件统一绑定到**稳定的父元素**上,通过 `e.target` 判断触发元素,从而执行对应逻辑。核心优势是「一次绑定,多元素复用;动态元素,自动适配」。 - -### 2. 适用场景(补充细节) - -- 动态生成的元素(如分页列表、弹窗内容),无法提前绑定事件。 -- 大量同级子元素(如表格行、列表项),减少事件绑定次数(优化内存占用)。 -- 元素频繁销毁 / 重建(如标签页切换),避免重复绑定 / 解绑。 - -### 3. 进阶实现(精准匹配 + 兼容嵌套) - -实际开发中,子元素可能有嵌套结构(如 `
    • 内容
    • `),需通过 `closest()` 精准匹配目标元素: - -```html -
        -
      • 列表项1
      • -
      • 列表项2
      • -
      - - - -``` - -#### 关键技巧 - -- `e.target.closest(selector)`:从当前元素向上查找匹配选择器的最近元素(兼容嵌套,比 `tagName` 更灵活)。 -- 父元素必须「稳定」:即不会被 DOM 操作删除或替换(如 `body`、页面根容器)。 - -### 4. 事件委托的边界情况 - -- 若父元素本身有同类型事件,需避免冲突(可通过 `e.currentTarget` 判断)。 -- 若子元素有阻止冒泡的逻辑,事件委托会失效(需避免子元素随意阻止冒泡)。 - -## 五、常见问题与工程化最佳实践(补充实战技巧) - -### 1. 事件绑定与解绑的工程化方案 - -- 避免重复绑定 - - :多次绑定同一函数会导致多次执行,可通过「绑定前先解绑」或「状态标记」避免: - - ```javascript - // 方案1:绑定前解绑 - function handler() { console.log('处理函数'); } - btn.removeEventListener('click', handler); // 先解绑(避免重复) - btn.addEventListener('click', handler); - - // 方案2:状态标记 - let isBound = false; - if (!isBound) { - btn.addEventListener('click', handler); - isBound = true; - } - ``` - -- 批量解绑 - - :使用 AbortController批量解绑多个事件(适合组件卸载时清理): - - ```javascript - class MyComponent { - constructor() { - this.controller = new AbortController(); - this.bindEvents(); - } - - bindEvents() { - const { signal } = this.controller; - window.addEventListener('scroll', this.handleScroll, { signal }); - btn.addEventListener('click', this.handleClick, { signal }); - } - - // 组件卸载时批量解绑 - destroy() { - this.controller.abort(); - } - } - ``` - -### 2. 事件冲突与兼容处理 - -- 鼠标事件与触摸事件冲突 - - :移动设备会同时触发触摸事件和鼠标事件(延迟约 300ms),需区分处理: - - ```javascript - let isTouch = false; - element.addEventListener('touchstart', (e) => { - isTouch = true; - console.log('触摸操作'); - }); - - element.addEventListener('click', (e) => { - if (isTouch) { - isTouch = false; - return; // 跳过触摸事件触发的鼠标事件 - } - console.log('鼠标操作'); - }); - ``` - -- 阻止默认行为的兼容性:部分事件(如touchmove)在部分浏览器中默认阻止会报错,需先判断e.cancelable: - - ```javascript - element.addEventListener('touchmove', (e) => { - if (e.cancelable) { - e.preventDefault(); // 仅在可取消时执行 - } - }); - ``` - - - -### 3. 性能优化(补充实战场景) - -- 防抖(debounce) - - :适用于「输入搜索、窗口 resize、按钮防抖点击」等场景(避免频繁触发): - - ```javascript - function debounce(fn, delay = 300) { - let timer = null; - return function(...args) { - clearTimeout(timer); - timer = setTimeout(() => fn.apply(this, args), delay); - }; - } - - // 输入框搜索(300ms 内无输入才执行搜索) - input.addEventListener('input', debounce((e) => { - console.log('搜索:', e.target.value); - })); - ``` - -- 节流(throttle):适用于「滚动加载、触摸滑动、高频点击」等场景(控制触发频率): - - ```javascript - function throttle(fn, interval = 300) { - let lastTime = 0; - return function(...args) { - const now = Date.now(); - if (now - lastTime >= interval) { - lastTime = now; - fn.apply(this, args); - } - }; - } - - // 滚动加载(每 500ms 仅执行一次) - window.addEventListener('scroll', throttle(() => { - if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) { - console.log('加载更多'); - } - }, 500)); - ``` - -- 避免高频事件的冗余计算:在mousemove、touchmove - - 等高频事件中,尽量减少 DOM 操作和复杂计算,可通过「请求动画帧(requestAnimationFrame)」优化: - - ```javascript - element.addEventListener('mousemove', throttle((e) => { - requestAnimationFrame(() => { - // DOM 操作(如跟随鼠标移动元素) - element.style.left = `${e.clientX}px`; - }); - }, 16)); // 约 60fps - ``` - -### 4. 错误处理与调试技巧 - -- 事件处理函数的错误捕获:避免单个事件处理函数报错导致页面崩溃,需添加错误捕获: - - ```javascript - btn.addEventListener('click', async (e) => { - try { - await fetchData(); // 可能报错的异步操作 - } catch (err) { - console.error('点击事件处理失败:', err); - // 友好提示用户 - } - }); - ``` - -- 调试事件流:通过e.composedPath() - - 查看事件传播路径,快速定位事件触发问题: - - ```javascript - element.addEventListener('click', (e) => { - console.log('事件传播路径:', e.composedPath()); - }); - ``` - - - -### 5. 现代框架中的事件处理(补充关联) - -- React/Vue 等框架的事件处理本质是对原生事件的封装(如 React 的 `onClick` 是原生 `click` 的封装)。 -- 框架的「事件委托」:React 会将所有事件绑定到 `document` 上,通过事件委托分发,减少 DOM 事件绑定次数。 -- 框架中的「合成事件」:React 会创建合成事件对象(SyntheticEvent),统一跨浏览器行为,且会自动绑定 `this`(无需手动 `bind`)。 - -## 六、总结(核心要点提炼) - -1. 事件处理的核心是「理解事件流」:捕获 → 目标 → 冒泡,这是事件委托、阻止传播的基础。 -2. 绑定方式优先级:`addEventListener`(推荐)> DOM 属性绑定 > HTML 内联绑定(禁止)。 -3. 优化技巧:动态元素用「事件委托」,高频事件用「防抖 / 节流」,批量解绑用「AbortController」。 -4. 避坑重点:区分 `e.target`/`e.currentTarget`,避免随意阻止冒泡,`passive: true` 不与 `preventDefault()` 混用。 - -## 作业 - -```JavaScript - - - - -
      -
      -
      - -
      定义的文本
      - -
      - -``` - -``` -

      第一题

      -
      - 欢迎购买明日科技图书 -
      - -``` - - - -```JavaScript -

      第二题

      - - -``` - -``` -

      第三题

      - - -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251203-JavaScript\344\271\213Document\345\257\271\350\261\241.md" "b/\350\265\265\344\277\212\350\261\252/20251203-JavaScript\344\271\213Document\345\257\271\350\261\241.md" deleted file mode 100644 index 8e925df23562d3a56a174187bb98e30f06e9d555..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251203-JavaScript\344\271\213Document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,298 +0,0 @@ -## 笔记 - -Document 对象是浏览器 DOM(文档对象模型)的核心,代表整个 HTML/XML 文档,是操作页面内容、结构和样式的入口,所有页面元素都是它的子节点。 - -## 一、核心概念 - -1. **获取方式**:全局可直接通过 `document` 访问(无需声明,浏览器内置)。 - -2. **本质**:继承自 `Node` 和 `EventTarget`,属于 DOM 树的根节点(除 `document.documentElement`(``)外)。 - -3. 作用 - - : - - - 查找 / 获取页面元素; - - 创建 / 修改 / 删除 DOM 节点; - - 操作文档元信息(标题、URL、编码等); - - 监听文档级事件(加载、点击等); - - 操作 cookie、本地存储(间接)。 - -## 二、核心属性 - -| 属性名 | 说明 | 示例 | -| -------------------------- | ------------------------------------------------------- | --------------------------------------------------- | -| `document.URL` | 返回文档完整 URL(只读) | `console.log(document.URL); // 完整地址` | -| `document.location` | 等价于 `window.location`,可读写 URL(跳转 / 修改参数) | `document.location.href = 'https://xxx.com';` | -| `document.title` | 读写文档标题(`` 标签内容) | `document.title = '新标题';` | -| `document.domain` | 返回当前文档的域名(只读,如 `www.baidu.com`) | `console.log(document.domain);` | -| `document.characterSet` | 返回文档编码(如 `UTF-8`) | `console.log(document.characterSet);` | -| `document.documentElement` | 指向 `<html>` 根元素 | `document.documentElement.style.fontSize = '16px';` | -| `document.body` | 指向 `<body>` 元素(最常用的操作入口) | `document.body.style.backgroundColor = '#fff';` | -| `document.head` | 指向 `<head>` 元素 | `document.head.appendChild(linkTag);` | -| `document.forms` | 返回页面所有 `<form>` 元素的集合(HTMLCollection) | `const form = document.forms[0];` | -| `document.images` | 返回页面所有 `<img>` 元素的集合 | `const img = document.images[0];` | -| `document.links` | 返回页面所有 `<a>`(带 href)/`<area>` 元素的集合 | `const link = document.links[0];` | -| `document.cookie` | 读写文档的 Cookie(需遵循同源策略) | `document.cookie = 'name=test; path=/';` | -| `document.referrer` | 返回跳转至当前页面的上一个页面 URL(空则无来源) | `console.log(document.referrer);` | - -## 三、常用方法(按场景分类) - -### 1. 获取 / 查找元素(高频) - -| 方法 | 说明 | 示例 | -| ----------------------------- | ------------------------------------------------------------ | -------------------------------------------------------- | -| `getElementById(id)` | 通过 ID 获取单个元素(唯一,返回 Element/null) | `const box = document.getElementById('box');` | -| `getElementsByTagName(tag)` | 通过标签名获取元素集合(HTMLCollection,动态更新) | `const divs = document.getElementsByTagName('div');` | -| `getElementsByClassName(cls)` | 通过类名获取元素集合(HTMLCollection,动态更新) | `const items = document.getElementsByClassName('item');` | -| `querySelector(selector)` | 通过 CSS 选择器获取**第一个匹配**的元素(返回 Element/null) | `const firstItem = document.querySelector('.item');` | -| `querySelectorAll(selector)` | 通过 CSS 选择器获取**所有匹配**的元素(NodeList,静态集合) | `const allItems = document.querySelectorAll('.item');` | - -> 注意: -> -> -> -> - `getElementByXXX` 系列返回 “动态集合”(元素变化会实时更新); -> - `querySelectorAll` 返回 “静态集合”(获取后不受元素变化影响); -> - ID 选择器优先级最高,`querySelector` 支持复杂选择器(如 `#box .item > p`)。 - -### 2. 创建 / 添加 / 删除节点 - -| 方法 | 说明 | 示例 | -| --------------------------- | ------------------------------------------------------- | ---------------------------------------------------- | -| `createElement(tag)` | 创建新元素节点(如 div、a) | `const newDiv = document.createElement('div');` | -| `createTextNode(text)` | 创建文本节点 | `const textNode = document.createTextNode('Hello');` | -| `appendChild(node)` | 将节点添加到父节点的**最后**一个子节点后 | `document.body.appendChild(newDiv);` | -| `prependChild(node)` | 将节点添加到父节点的**第一个**子节点前(ES6+) | `document.body.prepend(newDiv);` | -| `insertBefore(new, target)` | 将新节点插入到目标节点**之前** | `parent.insertBefore(newDiv, targetDiv);` | -| `replaceChild(new, old)` | 用新节点替换旧节点 | `parent.replaceChild(newDiv, oldDiv);` | -| `removeChild(node)` | 删除指定子节点(需通过父节点调用) | `parent.removeChild(oldDiv);` | -| `cloneNode(deep)` | 克隆节点(deep 为 true 则克隆子节点,false 仅克隆自身) | `const clone = newDiv.cloneNode(true);` | - -### 3. 文档加载 / 事件相关 - -| 方法 | 说明 | 示例 | -| ------------------------------- | -------------------------------------------------- | ---------------------------------------------------------- | -| `addEventListener(type, fn)` | 为文档绑定事件(如加载、点击) | `document.addEventListener('click', () => {});` | -| `removeEventListener(type, fn)` | 移除文档绑定的事件(需与绑定的函数引用一致) | `document.removeEventListener('click', fn);` | -| `readyState` | 文档加载状态(`loading`/`interactive`/`complete`) | `if (document.readyState === 'complete') {}` | -| `DOMContentLoaded` 事件 | DOM 加载完成(无需等待图片 / 样式),替代 `onload` | `document.addEventListener('DOMContentLoaded', () => {});` | -| `write(text)` | 向文档写入内容(覆盖原有内容,慎用) | `document.write('<p>测试</p>');` | -| `writeln(text)` | 写入内容并换行(等价于 `write(text + '\n')`) | `document.writeln('测试行');` | - -### 4. 其他实用方法 - -| 方法 | 说明 | 示例 | -| ------------------------ | ------------------------------------------------- | ------------------------------------------------------------ | -| `getElementByName(name)` | 通过 `name` 属性获取元素(如表单输入框) | `const input = document.getElementByName('username');` | -| `hasFocus()` | 判断文档是否有焦点(如输入框激活时返回 true) | `console.log(document.hasFocus());` | -| `importNode(node, deep)` | 从另一个文档复制节点到当前文档(deep 克隆子节点) | `const imported = document.importNode(iframeDoc.body, true);` | -| `createAttribute(name)` | 创建属性节点(如 `class`/`src`) | `const attr = document.createAttribute('class'); attr.value = 'box'; newDiv.setAttributeNode(attr);` | - -## 四、常见使用场景 - -### 1. 提取当前页面文件名(简化版) - -```javascript -// 从 URL 中提取文件名(含扩展名,剔除参数/哈希) -const fileName = document.URL.split('/').pop().split(/[?#]/)[0]; -console.log('当前文件名:', fileName); -``` - -### 2. 等待 DOM 加载完成后操作 - -```javascript -// 推荐方式(无需等待图片/样式) -document.addEventListener('DOMContentLoaded', () => { - const box = document.getElementById('box'); - box.style.color = 'red'; -}); -``` - -### 3. 动态创建并添加元素 - -```javascript -// 创建 div 并添加到 body -const newDiv = document.createElement('div'); -newDiv.className = 'content'; -newDiv.textContent = '动态创建的元素'; -document.body.appendChild(newDiv); -``` - -### 4. 修改页面标题和编码 - -```javascript -// 修改标题 -document.title = '新的页面标题'; -// 查看编码 -console.log('文档编码:', document.characterSet); -``` - -## 五、注意事项 - -1. **DOM 操作性能**:频繁操作 DOM 会触发重排 / 重绘,建议批量操作(如先创建文档片段 `DocumentFragment`,再一次性添加)。 -2. **空值判断**:`getElementById`/`querySelector` 可能返回 `null`,操作前需判断(如 `if (box) { box.style... }`)。 -3. **动态集合 vs 静态集合**:`getElementsByClassName` 是动态集合,`querySelectorAll` 是静态集合,遍历前建议转为数组(`[...collection]`)。 -4. **`document.write` 慎用**:在 DOM 加载完成后调用会覆盖整个页面,仅适合页面加载时临时写入。 -5. **跨域限制**:`document.domain` 仅能设置为当前域名的子域,跨域文档无法直接操作对方的 `document`。 - -## 六、核心总结 - -1. `document` 是操作页面的核心入口,所有元素查找、创建都基于它; -2. 优先使用 `querySelector/querySelectorAll`(灵活支持 CSS 选择器),ID 查找用 `getElementById`(性能最优); -3. 操作 DOM 前务必等待 `DOMContentLoaded`,避免元素未加载导致的报错; -4. 区分 “动态集合” 和 “静态集合”,避免遍历过程中集合变化引发的问题; -5. 慎用 `document.write` 和直接修改 `document.body`,防止覆盖 / 破坏页面结构。 - - ## 作业 - - - -训练1 - -```javascript -<button id="btn" onclick="fn()">关灯</button> - - <script> - let btn = document.getElementById('btn'); - let body = document.body; - let isDark = false; - - function fn() { - isDark = !isDark; - if (isDark) { - body.style.backgroundColor = '#000'; // 黑色背景 - body.style.color = '#fff'; // 白色文字 - btn.textContent = '开灯'; - } else { - body.style.backgroundColor = ''; - body.style.color = ''; - btn.textContent = '关灯'; - } - } - </script> -``` - -训练2 - -```javascript - document.write("<b>当前页面的URL:</b>"+document.URL); -``` - -训练3 - -```javascript -<button id="btn">添加文字</button> -<div id="container" style="margin-top:20px;"></div> - -<script> - let i = 0; // 计数索引 - // 点击按钮添加文字 - document.getElementById('btn').onclick = () => { - // 创建p标签,设置文字和基础样式 - let p = document.createElement('p'); - p.textContent = `第${++i}个文字`; - p.style.margin = '5px 0'; - // 添加到容器 - document.getElementById('container').appendChild(p); - }; -</script> -``` - -综合练习1 - -```javascript - <select id="themeSelect"> - <option value="light">亮色模式</option> - <option value="dark">暗黑模式</option> - <option value="green">绿色主题</option> - <option value="blue">蓝色主题</option> - </select> - - <script> - // 获取DOM元素 - let themeSelect = document.getElementById('themeSelect'); - let body = document.body; - - // 定义主题样式配置(便于维护) - let themeConfig = { - light: { - bgColor: '', // 清空行内样式,恢复默认 - textColor: '' - }, - dark: { - bgColor: '#000', // 黑色背景 - textColor: '#fff' // 白色文字 - }, - green: { - bgColor: '#e6f7e6', // 浅绿背景 - textColor: '#2d6a2d' // 深绿文字 - }, - blue: { - bgColor: '#e6f0ff', // 浅蓝背景 - textColor: '#2d56a2' // 深蓝文字 - } - }; - - // 主题切换函数 - function changeTheme() { - let selectedTheme = themeSelect.value; - let theme = themeConfig[selectedTheme]; - body.style.backgroundColor = theme.bgColor; - body.style.color = theme.textColor; - } - - // 绑定下拉框变更事件 - themeSelect.addEventListener('change', changeTheme); - </script> -``` - -综合练习2 - -```javascript -<a href="javascript:;" id="showLink">打开图片对话框</a> - - <!-- 图片对话框(初始隐藏) --> - <div id="dialog" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0008;text-align:center;padding-top:50px;"> - <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.DLuPa8rinIDOh1mNxhcfjwHaHZ?w=179&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" alt="图片"> - <!-- 关闭按钮 --> - <button id="closeBtn" style="margin-top:10px;">关闭</button> - </div> - - <script> - // 获取元素 - let link = document.getElementById('showLink'); - let dialog = document.getElementById('dialog'); - let closeBtn = document.getElementById('closeBtn'); - - // 显示对话框 - link.onclick = () => dialog.style.display = 'block'; - // 关闭对话框 - closeBtn.onclick = () => dialog.style.display = 'none'; - </script> -``` - -综合练习3 - -```javascript -<button id="btn">添加头像</button> -<div id="container"></div> - -<script> - let i = 0; - // 点击按钮添加头像 - document.getElementById('btn').onclick = function() { - i++; - // 创建img元素 - let img = document.createElement('img'); - img.src = `https://ui-avatars.com/api/?name=${i}`; - img.style.width = '50px'; - img.style.height = '50px'; - img.style.borderRadius = '50%'; - img.style.margin = '5px'; - // 添加到容器 - document.getElementById('container').appendChild(img); - }; -</script> -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251204-JavaScript\344\271\213\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213DOM.md" "b/\350\265\265\344\277\212\350\261\252/20251204-JavaScript\344\271\213\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213DOM.md" deleted file mode 100644 index c44b6782dda314778887f8b8ea8ab9fd8897e33f..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251204-JavaScript\344\271\213\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213DOM.md" +++ /dev/null @@ -1,439 +0,0 @@ -## 笔记 - -## 一、DOM 基础概念 - -### 1. 什么是 DOM - -DOM(Document Object Model,文档对象模型)是浏览器将 HTML/XML 文档解析后生成的**树形结构**,提供了 JavaScript 操作文档内容、结构和样式的接口,本质是一套跨平台、语言无关的 API。 - -### 2. DOM 树结构 - -- **文档节点(Document)**:根节点,代表整个 HTML/XML 文档。 -- **元素节点(Element)**:HTML 标签(如 `<div>`、`<p>`),DOM 操作的核心对象。 -- **文本节点(Text)**:标签内的文本内容(如 `<p>hello</p>` 中的 `hello`)。 -- **属性节点(Attribute)**:标签的属性(如 `class="box"`)。 -- **注释节点(Comment)**:文档中的注释 `<!-- 注释 -->`。 - -### 3. 核心特点 - -- 实时性:DOM 操作会立即反映到页面上。 -- 跨节点关联:每个节点都有指向父、子、兄弟节点的属性。 -- 操作不可逆:修改 DOM 后,原结构会被覆盖(除非手动备份)。 - -## 二、DOM 节点获取 - -### 1. 基础获取方法(返回单个元素) - -| 方法 | 说明 | 示例 | -| ---------------------------------- | ------------------------------------- | ----------------------------------------------------- | -| `document.getElementById(id)` | 通过 ID 获取元素(唯一) | `const box = document.getElementById('box')` | -| `document.querySelector(selector)` | 通过 CSS 选择器获取**第一个**匹配元素 | `const firstP = document.querySelector('.content p')` | - -### 2. 获取多个元素(返回集合) - -| 方法 | 说明 | 示例 | -| ---------------------------------------- | ------------------------------------------- | ------------------------------------------------------- | -| `document.getElementsByTagName(tag)` | 通过标签名获取(HTMLCollection) | `const lis = document.getElementsByTagName('li')` | -| `document.getElementsByClassName(class)` | 通过类名获取(HTMLCollection) | `const items = document.getElementsByClassName('item')` | -| `document.querySelectorAll(selector)` | 通过 CSS 选择器获取所有匹配元素(NodeList) | `const allP = document.querySelectorAll('.content p')` | - -### 3. 注意事项 - -- HTMLCollection 是**动态集合**:DOM 变化会自动更新(如删除元素后集合长度变化)。 -- NodeList 是**静态集合**:不受后续 DOM 变化影响(`querySelectorAll` 返回)。 -- 集合无法直接调用数组方法(如 `forEach`),需转换:`Array.from(lis).forEach(...)`。 - -## 三、DOM 节点操作 - -### 1. 节点创建 - -| 方法 | 说明 | 示例 | -| ----------------------------------- | ------------ | --------------------------------------------------- | -| `document.createElement(tag)` | 创建元素节点 | `const newDiv = document.createElement('div')` | -| `document.createTextNode(text)` | 创建文本节点 | `const textNode = document.createTextNode('hello')` | -| `element.setAttribute(attr, value)` | 设置元素属性 | `newDiv.setAttribute('class', 'new-box')` | - -### 2. 节点添加 / 插入 - -| 方法 | 说明 | 示例 | -| ------------------------------------------ | -------------------------------- | ------------------------------------------ | -| `parent.appendChild(child)` | 将子节点添加到父节点末尾 | `document.body.appendChild(newDiv)` | -| `parent.insertBefore(newNode, targetNode)` | 在目标节点前插入新节点 | `box.insertBefore(newDiv, box.firstChild)` | -| `element.cloneNode(deep)` | 克隆节点(deep=true 克隆子节点) | `const clone = box.cloneNode(true)` | - -### 3. 节点删除 / 替换 - -| 方法 | 说明 | 示例 | -| --------------------------------------- | ------------------------------ | ---------------------------------- | -| `parent.removeChild(child)` | 删除子节点(需通过父节点操作) | `box.removeChild(box.firstChild)` | -| `element.remove()` | 直接删除自身(ES6+) | `newDiv.remove()` | -| `parent.replaceChild(newNode, oldNode)` | 替换子节点 | `box.replaceChild(newDiv, oldDiv)` | - -## 四、DOM 样式操作 - -### 1. 行内样式(style 属性) - -```javascript -const box = document.getElementById('box'); -// 设置行内样式(驼峰命名,如 backgroundColor) -box.style.width = '200px'; -box.style.backgroundColor = 'red'; -// 获取行内样式(仅能获取行内,无法获取样式表) -console.log(box.style.width); // '200px' -``` - -### 2. 类名操作(推荐,分离样式与逻辑) - -| 方法 / 属性 | 说明 | 示例 | -| ------------------- | ---------------------- | ------------------------------------------------------------ | -| `element.className` | 操作类名(覆盖原有类) | `box.className = 'active box'` | -| `element.classList` | 类名操作 API(推荐) | - `box.classList.add('active')`(添加)- `box.classList.remove('active')`(删除)- `box.classList.toggle('active')`(切换)- `box.classList.contains('active')`(判断是否存在) | - -### 3. 获取计算样式(最终渲染样式) - -```javascript -// 获取最终应用的样式(包含样式表、继承等) -const computedStyle = getComputedStyle(box); -console.log(computedStyle.width); // 实际渲染的宽度 -console.log(computedStyle.color); // 实际渲染的颜色 -``` - -## 五、DOM 节点关系 - -| 属性 | 说明 | 示例 | -| -------------------------------- | ----------------------------- | ---------------------------- | -| `element.parentNode` | 获取父节点(元素 / 文档节点) | `box.parentNode` | -| `element.parentElement` | 获取父元素节点(仅元素) | `box.parentElement` | -| `element.childNodes` | 所有子节点(包含文本、注释) | `box.childNodes` | -| `element.children` | 所有子元素节点(仅元素) | `box.children` | -| `element.firstChild` | 第一个子节点(可能是文本) | `box.firstChild` | -| `element.firstElementChild` | 第一个子元素节点 | `box.firstElementChild` | -| `element.lastChild` | 最后一个子节点 | `box.lastChild` | -| `element.lastElementChild` | 最后一个子元素节点 | `box.lastElementChild` | -| `element.previousSibling` | 上一个兄弟节点 | `box.previousSibling` | -| `element.previousElementSibling` | 上一个兄弟元素节点 | `box.previousElementSibling` | -| `element.nextSibling` | 下一个兄弟节点 | `box.nextSibling` | -| `element.nextElementSibling` | 下一个兄弟元素节点 | `box.nextElementSibling` | - -## 六、DOM 事件基础 - -### 1. 事件绑定方式 - -#### (1)行内绑定(不推荐,耦合度高) - -```html -<button onclick="handleClick()">点击</button> -<script> - function handleClick() { - alert('点击了按钮'); - } -</script> -``` - -#### (2)DOM0 级绑定(覆盖式) - -```javascript -const btn = document.querySelector('button'); -// 绑定 -btn.onclick = function() { - alert('DOM0 点击'); -}; -// 解绑 -btn.onclick = null; -``` - -#### (3)DOM2 级绑定(推荐,可绑定多个) - -```javascript -// 绑定 -btn.addEventListener('click', handleClick); -btn.addEventListener('click', () => console.log('第二个点击事件')); - -// 解绑(需传相同的函数引用) -btn.removeEventListener('click', handleClick); - -function handleClick() { - alert('DOM2 点击'); -} -``` - -### 2. 事件对象(Event) - -事件处理函数的第一个参数为事件对象,包含事件相关信息: - -```javascript -btn.addEventListener('click', (e) => { - e.target; // 触发事件的目标元素 - e.currentTarget; // 绑定事件的元素 - e.preventDefault(); // 阻止默认行为(如a标签跳转) - e.stopPropagation(); // 阻止事件冒泡 - e.type; // 事件类型(如 'click') -}); -``` - -### 3. 事件流 - -- **事件冒泡**:从触发元素向上传播到根节点(默认)。 -- **事件捕获**:从根节点向下传播到触发元素(需在 addEventListener 第三个参数设为 true)。 - -## 七、DOM 性能优化 - -### 1. 减少 DOM 查询 - -- 缓存查询结果:避免重复调用getElementById/querySelector。 - - ```javascript - // 优化前 - for (let i = 0; i < 100; i++) { - document.querySelector('#box').style.left = i + 'px'; - } - // 优化后 - const box = document.querySelector('#box'); - for (let i = 0; i < 100; i++) { - box.style.left = i + 'px'; - } - ``` - -### 2. 批量操作 DOM - -- 使用文档片段(DocumentFragment):避免频繁修改 DOM 触发重排 / 重绘。 - - ```javascript - const fragment = document.createDocumentFragment(); - for (let i = 0; i < 1000; i++) { - const li = document.createElement('li'); - li.textContent = `项 ${i}`; - fragment.appendChild(li); - } - ul.appendChild(fragment); // 仅一次 DOM 操作 - ``` - -### 3. 避免频繁重排 / 重绘 - -- 重排(回流):DOM 结构 / 尺寸变化触发(如宽高、位置、添加子节点)。 -- 重绘:样式变化(如颜色、背景)但不影响布局。 -- 优化手段: - 1. 批量修改样式(先隐藏元素,修改后显示)。 - 2. 使用 `transform`/`opacity` 替代 `top`/`left`(GPU 加速,不触发重排)。 - 3. 避免读取布局属性后立即修改(如 `offsetWidth` + `style.width`)。 - -### 4. 防抖 / 节流(针对高频事件) - -- 防抖(debounce):高频事件触发后延迟执行,适合搜索框输入。 -- 节流(throttle):限制事件执行频率,适合滚动、拖拽。 - -## 八、常见问题与注意事项 - -1. **获取 null/undefined**: - - - 原因:DOM 未加载完成就执行代码,或选择器错误。 - - - 解决:将脚本放在</body>前,或使用DOMContentLoaded事件。 - - ```javascript - document.addEventListener('DOMContentLoaded', () => { - // DOM 加载完成后执行 - }); - ``` - -2. **文本节点干扰**: - - - `childNodes`/`firstChild` 可能获取到空白文本节点(换行 / 空格),优先使用 `children`/`firstElementChild`。 - -3. **样式操作优先级**: - - - 行内样式 > `!important` > 样式表 > 继承样式。 - -4. **事件解绑**: - - - DOM2 级绑定的匿名函数无法解绑,需使用具名函数。 - -## 九、核心总结 - -1. DOM 是 JS 操作页面的核心,本质是树形节点结构。 -2. 优先使用 `querySelector/querySelectorAll` 和 `classList`,简化操作。 -3. 避免频繁操作 DOM,批量处理 + 缓存查询提升性能。 -4. 样式操作优先通过类名,而非行内样式。 -5. 事件绑定推荐 DOM2 级,注意事件流和事件对象的使用。 - -```JavaScript -<style> - .parent-container { - overflow: hidden; - /* 防止父容器溢出 */ - } - - .parent-container ul { - float: left; - /* 设置为浮动元素 */ - margin-right: 20px; - /* 设置间距 */ - } - - /* 清除浮动 */ - .clearfix::after { - content: ""; - display: block; - clear: both; - } - </style> - </head> - - <body> - <h2>训练一</h2> - <input type="text" placeholder="请输入文字" id="txt" /> - <select name="" id="mySelect"> - <option value="red">红色</option> - <option value="green">绿色</option> - <option value="blue">蓝色</option> - </select> - <input type="button" value="添加" onclick="addTxt()" /> - <div id="txt1"></div> - <script> - let txt = document.getElementById("txt"); - let mySelect = document.getElementById("mySelect"); - let txt1 = document.getElementById("txt1"); - function addTxt() { - txt1.innerHTML += txt.value + "<br />"; - txt1.style.color = mySelect.value; - txt.value = " "; - } - </script> - - -``` - -``` -<h2>训练二</h2> - <div id="songId"> - 故事的小黄花<br /> - 从出生那年就飘着<br /> - 童年的荡秋千<br /> - 随记忆一直晃到现在<br /> - Re So So Si Do Si La<br /> - So La Si Si Si Si La Si La So<br /> - 吹着前奏望着天空<br /> - 我想起花瓣试着掉落<br /> - 为你翘课的那一天<br /> - 花落的那一天<br /> - 教室的那一间<br /> - 我怎么看不见<br /> - 消失的下雨天<br /> - 我好想再淋一遍<br /> - </div> - <input type="text" id="songs" placeholder="请输入歌名" /> - <input type="button" value="确认" id="sure" onclick="aaa()" /> - <script> - let songs = document.getElementById("songs"); - function aaa() { - if (songs.value == "晴天") { - let newH3 = document.createElement("h3"); - let newNode = document.createTextNode(songs.value); - newH3.appendChild(newNode); - let songId = document.getElementById("songId"); - songId.insertBefore(newH3, songId.firstChild); - } - } - </script> -``` - - - -``` -<h2>第三题</h2> - <h3>最新电影资讯</h3> - <ul id="flims"> - <li class="flim">1.《金蝉脱壳》</li> - <li class="flim">2.《阿甘正传》</li> - <li class="flim">3.《爱乐之城》</li> - <li class="flim">4.《头号玩家》</li> - </ul> - <a>输入影片资讯编号:</a> - <input type="text" id="bh" /> - <input type="button" id="del" value="删除" onclick="del()" /> - <script> - function del() { - let flims = document.getElementById("flims"); - let incomeNumber = document.getElementById("bh").value; - let allFlim = flims.querySelectorAll(".flim"); - if (incomeNumber >= 1 && incomeNumber < 5) { - for (let i = 0; i < allFlim.length; i++) { - if (i == incomeNumber - 1) { - flims.removeChild(allFlim[i]); - } - } - } - } - </script> - -``` - - - -``` -<h2>第四题</h2> - <div class="parent-container clearfix" id="th"> - <ul> - <li>黄瓜</li> - <li>茄子</li> - <li id="dj">芒果</li> - </ul> - <ul> - <li>西瓜</li> - <li>蜜橘</li> - <li id="tet">萝卜</li> - </ul> - </div> - <input type="button" value="移动" onclick="wzth()" /> - <script> - function wzth() { - let mango = document.getElementById("dj"); - let radish = document.getElementById("tet"); - let mangoContent = mango.innerHTML; - mango.innerHTML = radish.innerHTML; - radish.innerHTML = mangoContent; - } - </script> -``` - - - -``` -<h2>第五题</h2> - <h3>在《倚天屠龙记》中,张三丰是_____派的掌门?</h3> - <input type="radio" id="A" name="xx" value="A" />A.少林 - <input type="radio" id="B" name="xx" value="B" />B.武当 - <input type="radio" id="C" name="xx" value="C" />C.峨眉 - <input type="radio" id="D" name="xx" value="D" />D.昆仑 - <input type="button" value="提交答案" onclick="selects()" /> - <script> - function selects() { - let selectedValue = document.querySelector( - 'input[name="xx"]:checked' - )?.value; - let rightAnswer = "B"; - if (selectedValue == rightAnswer) { - alert("回答正确"); - } else { - alert("回答错误"); - } - } - </script> -``` - - - -``` -<h2>第六题</h2> - <a id="myLink" href="https://www.old-example.com">原超链接文本</a> - <button id="myModify" onclick="aa()">修改</button> - <script> - let myLink = document.getElementById("myLink"); - let myModify = document.getElementById("modifyBtn"); - function aa() { - myLink.textContent = "修改后的超链接文本"; - myLink.href = "https://www.new-example.com"; - } - </script> -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251205-JavaScript\344\271\213window\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\350\265\265\344\277\212\350\261\252/20251205-JavaScript\344\271\213window\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index f681b6bfa2410a6a9e8d9559b35bbe995a835b94..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251205-JavaScript\344\271\213window\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,681 +0,0 @@ -# JavaScript window 对象笔记 - -## 一、核心概念 - -### 1. 什么是 window 对象 - -- `window` 是浏览器环境中的**全局对象**,也是 BOM(Browser Object Model,浏览器对象模型)的核心。 - -- 所有全局变量、函数、对象(如 `document`、`navigator`、`location` 等)都是 `window` 的属性 / 方法。 - -- 在浏览器中,`this` 在全局作用域下指向 `window`(严格模式下 `this` 为 `undefined`)。 - -- 示例: - - ```javascript - // 全局变量 === window 的属性 - var a = 10; - console.log(window.a); // 10 - - // 全局函数 === window 的方法 - function fn() { return 'hello'; } - console.log(window.fn()); // hello - - // 全局作用域的 this - console.log(this === window); // true(非严格模式) - ``` - -### 2. 特性 - -- 唯一性:每个浏览器窗口 / 标签页对应一个独立的 `window` 对象。 -- 顶层对象:`window` 是 BOM 层级的顶层,没有父对象。 -- 可省略:全局作用域中访问 `window` 的属性 / 方法时,可省略 `window.` 前缀(如 `alert()` 等价于 `window.alert()`)。 - -## 二、核心属性 - -### 1. 文档相关 - -| 属性 | 说明 | 示例 | -| -------------------------- | ----------------------------------- | ---------------------------------------------------- | -| `document` | 指向 DOM 根对象,操作页面内容的入口 | `window.document.getElementById('app')` | -| `document.documentElement` | 指向 `<html>` 元素 | `document.documentElement.scrollTop`(获取滚动距离) | -| `document.body` | 指向 `<body>` 元素 | `document.body.style.backgroundColor = 'red'` | - -### 2. 窗口 / 尺寸相关 - -| 属性 | 说明 | 注意事项 | -| --------------------------- | ------------------------------------------------------- | ---------------------------------- | -| `innerWidth`/`innerHeight` | 浏览器视口(可视区域)的宽度 / 高度(不含边框、滚动条) | 响应式布局常用 | -| `outerWidth`/`outerHeight` | 浏览器窗口的整体宽度 / 高度(含边框、工具栏等) | 受浏览器窗口大小影响 | -| `screenX`/`screenY` | 窗口相对于屏幕的水平 / 垂直坐标 | 不同浏览器兼容性一致 | -| `pageXOffset`/`pageYOffset` | 页面滚动的水平 / 垂直距离 | 等价于 `scrollX`/`scrollY`(别名) | - -示例: - -```javascript -// 获取视口尺寸 -console.log('视口宽度:', window.innerWidth); -console.log('视口高度:', window.innerHeight); - -// 获取页面滚动距离 -console.log('垂直滚动距离:', window.pageYOffset); -``` - -### 3. 浏览器 / 环境相关 - -| 属性 | 说明 | 示例 | -| ------------------------------- | -------------------------------------------- | ----------------------------------------------------- | -| `navigator` | 包含浏览器信息(如版本、设备、语言等) | `navigator.userAgent`(用户代理字符串) | -| `location` | 包含当前 URL 信息,可操作页面跳转 | `location.href = 'https://www.example.com'` | -| `history` | 管理浏览器会话历史 | `history.back()`(后退)、`history.pushState()` | -| `screen` | 包含屏幕信息(分辨率、颜色深度等) | `screen.width`(屏幕宽度)、`screen.height` | -| `localStorage`/`sessionStorage` | 本地存储 / 会话存储(持久化 / 临时存储数据) | `localStorage.setItem('name', '张三')` | -| `sessionStorage` | 会话存储(关闭标签页后数据清除) | `sessionStorage.getItem('token')` | -| `cookie` | 获取 / 设置当前页面的 Cookie | `document.cookie = 'username=zhangsan; max-age=3600'` | -| `console` | 控制台对象,用于调试 | `console.log()`、`console.error()` | - -### 4. 其他核心属性 - -| 属性 | 说明 | -| -------- | ----------------------------------------------------- | -| `top` | 指向最顶层的 `window` 对象(处理 iframe 嵌套) | -| `parent` | 指向当前窗口的父窗口(iframe 中使用) | -| `self` | 等价于 `window`,指向当前窗口自身 | -| `frames` | 窗口中的 iframe 集合(`frames[0]` 指向第一个 iframe) | -| `origin` | 当前页面的源(协议 + 域名 + 端口),跨域判断常用 | - -## 三、核心方法 - -### 1. 弹窗方法 - -| 方法 | 说明 | 注意事项 | -| -------------------------- | ---------------------------- | --------------------------------------- | -| `alert(message)` | 显示警告弹窗(只有确认按钮) | 阻塞代码执行,用户点击后继续 | -| `confirm(message)` | 显示确认弹窗(确认 / 取消) | 返回 `true`(确认)/`false`(取消) | -| `prompt(message, default)` | 显示输入弹窗 | 返回用户输入的字符串,取消则返回 `null` | - -示例: - -```javascript -// 确认弹窗 -if (confirm('确定要删除吗?')) { - console.log('用户确认删除'); -} else { - console.log('用户取消删除'); -} - -// 输入弹窗 -const name = prompt('请输入你的名字', '张三'); -if (name) { - alert(`你好,${name}`); -} -``` - -### 2. 窗口操作方法 - -| 方法 | 说明 | 示例 | -| --------------------------- | ---------------------------------------------- | ------------------------------------------------------------ | -| `open(url, name, features)` | 打开新窗口 / 标签页 | `window.open('https://www.example.com', '_blank', 'width=800,height=600')` | -| `close()` | 关闭当前窗口(仅能关闭由 `open()` 打开的窗口) | `const newWin = window.open(); newWin.close();` | -| `resizeTo(width, height)` | 调整窗口大小 | `window.resizeTo(1000, 800)` | -| `resizeBy(dx, dy)` | 相对当前大小调整窗口 | `window.resizeBy(100, 50)`(宽 + 100,高 + 50) | -| `moveTo(x, y)` | 移动窗口到指定坐标 | `window.moveTo(100, 100)` | -| `moveBy(dx, dy)` | 相对当前位置移动窗口 | `window.moveBy(50, 50)` | - -### 3. 定时器方法 - -| 方法 | 说明 | 清除方法 | -| ------------------------------------------ | -------------------------------- | -------------------------- | -| `setTimeout(callback, delay, ...args)` | 延迟 `delay` 毫秒执行一次回调 | `clearTimeout(timerId)` | -| `setInterval(callback, interval, ...args)` | 每隔 `interval` 毫秒重复执行回调 | `clearInterval(timerId)` | -| `requestAnimationFrame(callback)` | 浏览器重绘前执行回调(动画专用) | `cancelAnimationFrame(id)` | - -示例: - - - -```javascript -// 一次性定时器 -const timer1 = setTimeout(() => { - console.log('3秒后执行'); -}, 3000); -// 取消定时器 -clearTimeout(timer1); - -// 周期性定时器 -const timer2 = setInterval(() => { - console.log('每隔1秒执行'); -}, 1000); -// 5秒后取消周期性定时器 -setTimeout(() => { - clearInterval(timer2); -}, 5000); - -// 动画帧(平滑动画) -let progress = 0; -function animate() { - progress++; - if (progress < 100) { - requestAnimationFrame(animate); - } -} -requestAnimationFrame(animate); -``` - -### 4. 其他实用方法 - -| 方法 | 说明 | | -| --------------------------------- | ---------------------------------------- | ------------------------------------------- | -| `scrollTo(x, y)` / `scroll(x, y)` | 滚动页面到指定坐标 | `window.scrollTo(0, 0)`(回到顶部) | -| `scrollBy(dx, dy)` | 相对当前位置滚动页面 | `window.scrollBy(0, 100)`(向下滚动 100px) | -| `focus()` | 让窗口获得焦点 | | -| `blur()` | 让窗口失去焦点 | | -| `print()` | 触发浏览器打印功能 | | -| `stop()` | 停止页面加载(等价于点击浏览器停止按钮) | | - -## 四、事件处理 - -### 1. 全局事件(绑定在 window 上) - -| 事件 | 说明 | -| ------------------ | ---------------------------------------------- | -| `load` | 页面所有资源(图片、脚本、样式)加载完成后触发 | -| `DOMContentLoaded` | DOM 解析完成后触发(资源未加载完也会触发) | -| `resize` | 窗口大小改变时触发 | -| `scroll` | 页面滚动时触发 | -| `beforeunload` | 窗口关闭 / 刷新前触发(可提示用户) | -| `unload` | 窗口关闭 / 刷新后触发(兼容性较差) | - -示例: - -```javascript -// DOM 解析完成后执行 -window.addEventListener('DOMContentLoaded', () => { - console.log('DOM 加载完成'); -}); - -// 窗口大小改变时执行 -window.addEventListener('resize', () => { - console.log('窗口尺寸:', window.innerWidth, window.innerHeight); -}); - -// 页面滚动时执行 -window.addEventListener('scroll', () => { - console.log('滚动距离:', window.pageYOffset); -}); - -// 关闭前提示 -window.addEventListener('beforeunload', (e) => { - e.preventDefault(); - e.returnValue = '你有未保存的内容,确定要离开吗?'; - return '你有未保存的内容,确定要离开吗?'; -}); -``` - -### 2. 事件绑定方式 - -- 方式 1:window.on事件名 = 函数(覆盖式,只能绑定一个) - - ```javascript - window.onload = function() { - console.log('页面加载完成'); - }; - ``` - -- 方式 2:addEventListener(事件名, 函数) - - (推荐,可绑定多个) - - ```javascript - window.addEventListener('load', () => { - console.log('方式2:页面加载完成'); - }); - ``` - -## 五、iframe 相关 - -iframe 是页面中的嵌入式窗口,涉及 `window` 嵌套: - -```html -<!-- 父页面 --> -<iframe src="child.html" id="myIframe"></iframe> -<script> - // 父窗口访问子窗口 - const iframe = document.getElementById('myIframe'); - const childWindow = iframe.contentWindow; // 子窗口的 window 对象 - - // 子窗口访问父窗口 - // child.html 中: - // console.log(window.parent); // 父窗口 - // console.log(window.top); // 最顶层窗口 -</script> -``` - -**跨域限制**:如果 iframe 源与父页面不同,无法访问对方的 `window` 属性 / 方法(浏览器同源策略)。 - -## 六、注意事项 - -### 1. 全局变量风险 - -- 未使用let/const声明的变量会成为window的属性,容易造成命名冲突: - - ```javascript - a = 20; // 等价于 window.a = 20 - ``` - - - -- 建议使用 `let`/`const` 声明变量,避免污染全局作用域。 - -### 2. 弹窗拦截 - -- 浏览器会拦截非用户主动触发的 `window.open()`(如定时器中的弹窗),需确保弹窗由用户点击等操作触发。 - -### 3. 兼容性 - -- 部分属性 / 方法在不同浏览器中存在差异(如 `outerWidth` 在移动浏览器中表现不同),需测试适配。 - -- ``` - requestAnimationFrame - ``` - - 需兼容旧浏览器时,可添加前缀: - - ```javascript - const requestAnimFrame = window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame; - ``` - -### 4. 严格模式 - -- 严格模式下,全局作用域的this不再指向window,而是undefined: - - ```javascript - 'use strict'; - console.log(this === window); // false - ``` - -### 5. 内存泄漏 - -- 避免在window上绑定长期有效的事件监听器且不清理,可能导致内存泄漏: - - ```javascript - // 正确做法:组件卸载时移除监听 - function handleScroll() {} - window.addEventListener('scroll', handleScroll); - // 移除监听 - window.removeEventListener('scroll', handleScroll); - ``` - -## 七、常见面试题 - -1. window.onload和DOMContentLoaded - - 的区别? - - - `DOMContentLoaded`:DOM 解析完成即触发,不等待图片、样式等资源加载; - - `window.onload`:所有资源(图片、脚本、样式)加载完成后触发。 - -2. 如何实现页面回到顶部? - - ```javascript - window.scrollTo({ top: 0, behavior: 'smooth' }); // 平滑滚动 - ``` - - - -3. setTimeout 与 requestAnimationFrame的区别? - - - `setTimeout`:固定延迟执行,可能受浏览器卡顿影响; - - `requestAnimationFrame`:与浏览器重绘频率同步(通常 60fps),动画更平滑,且后台标签页中暂停执行,节省性能。 - -4. 如何判断当前页面是否在 iframe 中? - - ```javascript - const isInIframe = window.self !== window.top; - ``` - - - -## 八、总结 - -`window` 对象是浏览器端 JavaScript 的核心,整合了 BOM 所有功能,涵盖窗口操作、文档访问、事件处理、存储等能力。开发中需注意: - -- 避免污染全局作用域; -- 合理使用事件监听并及时清理; -- 关注跨域、兼容性和性能问题; -- 区分 BOM(`window` 相关)和 DOM(`document` 相关)的职责边界。 - - - -## 作业 - -训练1. - -```javascript - -<button class="play-btn">播放1</button> - <button class="play-btn">播放2</button> - <button class="play-btn">播放3</button> - - <script> - // 利用window.onload确保DOM加载完成 - window.onload = function() { - // 通过window.document获取元素 - const playButtons = window.document.querySelectorAll('.play-btn'); - - // 遍历按钮并绑定事件 - playButtons.forEach(function(btn) { - btn.onclick = function() { - // 调用window.alert弹出提示 - window.alert('只有会员才能播放,请登录!'); - }; - }); - }; - </script> -``` - -训练2 - -``` -<a href="javascript:void(0)" id="logoutLink">退出登录</a> - - <script> - // 利用window对象实现核心逻辑 - window.onload = function() { - // 获取退出登录链接元素 - const logoutLink = window.document.getElementById('logoutLink'); - - // 绑定点击事件 - logoutLink.onclick = function() { - // 弹出确认对话框 - const isConfirm = window.confirm('您确定退出登陆吗'); - - // 若用户确认,执行退出登录逻辑 - if (isConfirm) { - // 模拟退出登录:清除缓存、跳转登录页(实际项目替换为真实逻辑) - window.localStorage.removeItem('userInfo'); // 示例:清除用户信息缓存 - window.alert('退出登录成功!即将跳转至登录页'); - window.location.href = 'login.html'; // 示例:跳转登录页 - } - // 若用户取消,无操作 - }; - }; - </script> -</body> -</html> -关键说明 -href="javascript:void(0)":阻止超链接默认的页面跳转行为,确保点击事件正常执行 -``` - -训练3 - -```javascript - <img src="https://picsum.photos/180/270?random=1" alt="影片封面" class="movie-poster" data-movie-id="1"> - - <script> - window.onload = function() { - // 1. 配置新窗口参数 - const winWidth = 800, winHeight = 600; - const left = (window.screen.width - winWidth) / 2; - const top = (window.screen.height - winHeight) / 2; - const features = `width=${winWidth},height=${winHeight},left=${left},top=${top}`; - - // 2. 绑定封面点击事件 - window.document.querySelector('.movie-poster').onclick = function() { - const movieId = this.dataset.movieId; - // 3. 打开指定尺寸和位置的详情页 - window.open(`movie-detail.html?id=${movieId}`, `detail${movieId}`, features); - }; - }; - </script> -``` - -训练4 - -```javascript - <button id="openAdBtn">打开广告窗口</button> - - <script> - window.onload = function() { - // 点击按钮打开广告窗口 - window.document.getElementById('openAdBtn').onclick = function() { - // 定义广告窗口尺寸和位置 - const adWidth = 500, adHeight = 400; - const left = (window.screen.width - adWidth) / 2; - const top = (window.screen.height - adHeight) / 2; - const features = `width=${adWidth},height=${adHeight},left=${left},top=${top}`; - - // 打开广告窗口并保存引用 - const adWindow = window.open('ad.html', 'advertisement', features); - - // 5秒后自动关闭广告窗口 - setTimeout(function() { - try { - // 检查窗口是否存在且未被关闭 - if (adWindow && !adWindow.closed) { - adWindow.close(); - console.log('广告窗口已自动关闭'); - } - } catch (e) { - console.log('广告窗口已被手动关闭,无需自动操作'); - } - }, 5000); // 5000毫秒 = 5秒 - }; - }; - </script> -``` - - - -训练5 - -```JavaScript -<button id="openWindowBtn">打开窗口</button> - - <script> - window.onload = function() { - document.getElementById('openWindowBtn').onclick = function() { - // 1. 打开新窗口(初始顶部居中) - const winW = 300, winH = 200; - const initLeft = (screen.width - winW) / 2; - const newWin = window.open('about:blank', '', `width=${winW},height=${winH},left=${initLeft},top=0`); - - if (!newWin) { alert('弹窗被拦截!'); return; } - - // 2. 定义移动参数与目标位置 - const targetLeft = 0; // 左下角x坐标 - const targetTop = screen.height - winH; // 左下角y坐标 - const stepY = 5, stepX = 3; // 移动步长 - const timer = setInterval(() => { - try { - if (newWin.closed) { clearInterval(timer); return; } - - // 3. 计算并更新窗口位置 - const curLeft = newWin.screenLeft || newWin.screenX; - const curTop = newWin.screenTop || newWin.screenY; - const newLeft = Math.max(curLeft - stepX, targetLeft); - const newTop = Math.min(curTop + stepY, targetTop); - - newWin.moveTo(newLeft, newTop); - - // 4. 到达目标则停止 - if (newLeft === targetLeft && newTop === targetTop) { - clearInterval(timer); - } - } catch (e) { clearInterval(timer); } - }, 20); - }; - }; - </script> -``` - -训练6 - -```JavaScript -<input type="text" id="timerInput" value="0" readonly> - <!-- 控制按钮 --> - <button id="startBtn">开始计时</button> - <button id="pauseBtn">暂停计时</button> - - <script> - window.onload = function() { - // 获取DOM元素 - const timerInput = window.document.getElementById('timerInput'); - const startBtn = window.document.getElementById('startBtn'); - const pauseBtn = window.document.getElementById('pauseBtn'); - - // 定义变量:定时器ID、当前计时值 - let timerId = null; - let currentTime = 0; - - // 开始计时逻辑 - startBtn.onclick = function() { - // 清除原有定时器,防止重复计时 - if (timerId) clearInterval(timerId); - // 启动新定时器,每秒递增1 - timerId = setInterval(() => { - currentTime++; - timerInput.value = currentTime; - }, 1000); - }; - - // 暂停计时逻辑 - pauseBtn.onclick = function() { - // 清除定时器,停止计时 - clearInterval(timerId); - timerId = null; // 重置定时器ID - }; - }; - </script> -``` - -综合练习1 - -```JavaScript -<script> - // 定义答题函数 - function startQuiz() { - // 随机生成两个一位整数(0-9) - const num1 = Math.floor(Math.random() * 10); - const num2 = Math.floor(Math.random() * 10); - const correctAnswer = num1 + num2; - - // 弹出提示框获取用户答案 - const userInput = window.prompt(`${num1} + ${num2} = ?`, ''); - - // 处理用户取消输入的情况 - if (userInput === null) { - const isContinue = window.confirm('你取消了答题,是否重新开始?'); - if (isContinue) startQuiz(); - return; - } - - // 转换输入为数字并校验 - const userAnswer = parseInt(userInput); - if (isNaN(userAnswer)) { - window.alert('请输入有效的数字!'); - startQuiz(); - return; - } - - // 给出答题反馈 - if (userAnswer === correctAnswer) { - window.alert('正确!🎉'); - } else { - window.alert(`错误!😥 正确答案是:${correctAnswer}`); - } - - // 询问是否继续答题 - const isContinue = window.confirm('是否继续答题?'); - if (isContinue) { - startQuiz(); // 递归调用,继续答题 - } else { - window.alert('答题结束,再见!👋'); - } - } - - // 启动答题程序 - window.onload = startQuiz; - </script> -``` - -综合练习2 - -```JavaScript - <h3>答题结果:</h3> - <div id="result"></div> - - <script> - window.onload = function() { - // 弹出提示对话框,提出问题并给出选项 - const question = "选择题:2024年奥运会在哪座城市举办?\n选项:A. 巴黎 B. 东京 C. 伦敦 D. 洛杉矶"; - const userAnswer = window.prompt(question, "请输入选项字母(如A)或城市名称"); - - // 获取结果展示容器 - const resultContainer = window.document.getElementById('result'); - - // 处理用户取消输入的情况 - if (userAnswer === null) { - resultContainer.innerHTML = "<span style='color: #666;'>你取消了答题</span>"; - return; - } - - // 格式化用户答案(去除空格,转为小写) - const formattedAnswer = userAnswer.trim().toLowerCase(); - - // 校验答案(正确答案:巴黎/A) - const correctAnswers = ['a', '巴黎']; - let resultHtml = ''; - if (correctAnswers.includes(formattedAnswer)) { - resultHtml = "<span style='color: green;'>回答正确!🎉 2024年奥运会在巴黎举办。</span>"; - } else { - resultHtml = "<span style='color: red;'>回答错误!😥 正确答案是:巴黎(选项A)。</span>"; - } - - // 将结果展示在页面中 - resultContainer.innerHTML = resultHtml; - }; - </script> -``` - -综合练习3 - -```JavaScript - <div id="imgContainer"></div> - - <script> - window.onload = function() { - // 1. 定义图片列表(5张占位图,实际可替换为真实图片URL) - const imgList = [ - 'https://picsum.photos/300/200?random=1', - 'https://picsum.photos/300/200?random=2', - 'https://picsum.photos/300/200?random=3', - 'https://picsum.photos/300/200?random=4', - 'https://picsum.photos/300/200?random=5' - ]; - const imgContainer = window.document.getElementById('imgContainer'); - let currentIndex = 0; // 当前显示的图片索引 - - // 2. 定义显示图片的函数 - function showImage() { - // 清空容器,确保只显示当前图片 - imgContainer.innerHTML = ''; - // 创建img元素 - const img = window.document.createElement('img'); - img.src = imgList[currentIndex]; - img.alt = `图片${currentIndex + 1}`; - // 添加到容器 - imgContainer.appendChild(img); - // 更新索引,达到5张后重置为0,实现循环 - currentIndex = (currentIndex + 1) % imgList.length; - } - - // 3. 立即显示第一张图片,然后每隔1秒切换一次 - showImage(); - setInterval(showImage, 1000); // 1000毫秒 = 1秒 - }; - </script> -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251208-javascript\344\271\213\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\350\265\265\344\277\212\350\261\252/20251208-javascript\344\271\213\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 07d11e630679f739512c73994dad44b869d6a15b..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251208-javascript\344\271\213\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,82 +0,0 @@ -## 笔记 - -# JavaScript BOM 基础笔记 - -## 一、BOM 基础概念 - -1. **BOM**:Browser Object Model,浏览器对象模型 -2. 核心对象是 `window`,它是浏览器窗口的顶层对象 -3. 所有全局变量、函数、浏览器 API 都挂载在 `window` 上,可省略 `window.` 直接调用 - -## 二、核心对象:window - -### 1. 常用弹窗方法 - -```javascript -// 警告框 -alert("提示信息"); -// 确认框,点确定返回true,取消返回false -let isOk = confirm("确定吗?"); -// 输入框,返回输入内容,取消返回null -let inputVal = prompt("请输入内容", "默认值"); -``` - -### 2. 定时器方法 - -```javascript -// 延迟执行:3秒后执行一次函数 -let timer1 = setTimeout(() => { - console.log("延迟执行"); -}, 3000); -// 清除延迟执行 -clearTimeout(timer1); - -// 循环执行:每隔1秒执行一次函数 -let timer2 = setInterval(() => { - console.log("循环执行"); -}, 1000); -// 清除循环执行 -clearInterval(timer2); -``` - -### 3. 窗口尺寸 - -```javascript -// 视口宽高(不含浏览器边框、滚动条) -let w = window.innerWidth; -let h = window.innerHeight; -``` - -## 三、常用子对象 - -### 1. location(URL 操作) - -| 核心属性 / 方法 | 作用 | 示例 | -| --------------- | -------------------------- | -------------------------------------------------- | -| `href` | 完整 URL,修改会跳转页面 | `location.href = "https://www.baidu.com"` | -| `search` | URL 中的查询参数(? 开头) | `// 比如 URL 是 ?id=1 → location.search = "?id=1"` | -| `reload()` | 刷新页面 | `location.reload()` | - -### 2. history(历史记录) - -```javascript -history.back(); // 后退一页 -history.forward(); // 前进一页 -history.go(-1); // 等同于 back(),go(1) 等同于 forward() -``` - -### 3. screen(屏幕信息) - -```javascript -// 屏幕总宽高 -let screenW = screen.width; -let screenH = screen.height; -``` - -## 四、BOM 与 DOM 的区别 - -| BOM | DOM | -| ------------------- | --------------------- | -| 操作浏览器窗口 | 操作网页内容 | -| 核心对象是 `window` | 核心对象是 `document` | -| 无统一标准 | 遵循 W3C 标准 | \ No newline at end of file diff --git "a/\350\265\265\344\277\212\350\261\252/20251210-JavaScript\344\271\213style\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\350\265\265\344\277\212\350\261\252/20251210-JavaScript\344\271\213style\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index ed56fc42e8a291fe268cfd1b89a49ed38c16654b..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251210-JavaScript\344\271\213style\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,118 +0,0 @@ -## 作业 - -训练1 - -``` -<div id="text-display">这是需要放大的测试文本</div> - <!-- 放大按钮 --> - <button id="enlarge-btn">点击放大文本</button> - - <script> - // 获取元素 - const textDisplay = document.getElementById('text-display'); - const enlargeBtn = document.getElementById('enlarge-btn'); - - // 初始字号(单位:px) - let currentFontSize = 16; - - // 生成随机RGB颜色的函数 - function getRandomColor() { - const r = Math.floor(Math.random() * 256); // 红色值 0-255 - const g = Math.floor(Math.random() * 256); // 绿色值 0-255 - const b = Math.floor(Math.random() * 256); // 蓝色值 0-255 - return `rgb(${r}, ${g}, ${b})`; - } - - // 按钮点击事件 - enlargeBtn.addEventListener('click', function() { - // 字号增加2px - currentFontSize += 2; - // 设置新的字号 - textDisplay.style.fontSize = `${currentFontSize}px`; - // 设置随机颜色 - textDisplay.style.color = getRandomColor(); - }); - </script> -``` - -训练2 - -```JavaScript - <img id="target-img" src="https://picsum.photos/400/300" alt="示例图片"> - - <script> - // 获取图片元素 - const img = document.getElementById('target-img'); - - // 鼠标移入事件:添加蓝色双实线边框(宽度5像素) - img.addEventListener('mouseenter', function() { - this.style.border = '5px double blue'; - // 可选:防止边框添加后图片位移(如需消除位移可添加此行) - // this.style.boxSizing = 'border-box'; - }); - - // 鼠标移出事件:移除边框 - img.addEventListener('mouseleave', function() { - this.style.border = 'none'; - }); - </script> -``` - -```javascript -<body> - <img src="./xm1.webp" style="position:absolute;width:200px;cursor:move;user-select:none;z-index:10;"> - <img src="./xm2.jpg" style="position:absolute;width:200px;cursor:move;user-select:none;z-index:10;"> - <img src="./xm3.webp" style="position:absolute;width:200px;cursor:move;user-select:none;z-index:10;"> - - <script> - document.querySelectorAll('img').forEach(img => { - img.onmousedown = e => { - e.preventDefault(); - const ox = e.clientX - img.offsetLeft, oy = e.clientY - img.offsetTop; - img.style.zIndex = 20; - const move = e => { - img.style.left = e.clientX - ox + 'px'; - img.style.top = e.clientY - oy + 'px'; - }; - const up = () => { - document.removeEventListener('mousemove', move); - document.removeEventListener('mouseup', up); - img.style.zIndex = 10; - }; - document.addEventListener('mousemove', move); - document.addEventListener('mouseup', up); - }; - }); - </script> -</body> -``` - -```javascript -<body> - <img src="./xm1.webp" style="position:absolute;width:200px;cursor:move;user-select:none;z-index:10;"> - <img src="./xm2.jpg" style="position:absolute;width:200px;cursor:move;user-select:none;z-index:10;"> - <img src="./xm3.webp" style="position:absolute;width:200px;cursor:move;user-select:none;z-index:10;"> - - <script> - document.querySelectorAll('img').forEach(img => { - img.onmousedown = e => { - e.preventDefault(); - const ox = e.clientX - img.offsetLeft, oy = e.clientY - img.offsetTop; - img.style.zIndex = 20; - const move = e => { - img.style.left = e.clientX - ox + 'px'; - img.style.top = e.clientY - oy + 'px'; - }; - const up = () => { - document.removeEventListener('mousemove', move); - document.removeEventListener('mouseup', up); - img.style.zIndex = 10; - }; - document.addEventListener('mousemove', move); - document.addEventListener('mouseup', up); - }; - }); - </script> -</body> -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251211-JavaScript\344\271\213form\345\257\271\350\261\241.md" "b/\350\265\265\344\277\212\350\261\252/20251211-JavaScript\344\271\213form\345\257\271\350\261\241.md" deleted file mode 100644 index 55fc5a0b7ca6468c14332a1f9cd09925c309bb66..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251211-JavaScript\344\271\213form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,536 +0,0 @@ -## 笔记 - -## 一、Form 对象概述 - -Form 对象是 JavaScript 操作 HTML 表单的核心接口,对应页面中的 `<form>` 标签。通过 Form 对象可以访问表单内的所有元素(输入框、按钮、下拉框等)、获取 / 修改表单数据、监听表单提交事件,是前端表单交互的基础。 - -### 核心特性 - -1. 每个 `<form>` 标签会自动成为 `document.forms` 集合中的一员; -2. Form 对象继承自 HTMLElement,拥有元素的通用属性(如 `id`、`className`)和方法; -3. 支持直接通过表单元素的 `name` 属性访问子元素(如 `form.username`)。 - -## 二、获取 Form 对象 - -### 1. 通过 document.forms 获取(推荐) - -`document.forms` 是包含页面所有表单的 HTMLCollection 集合,支持索引、name/id 访问: - -```javascript -// 方式1:通过索引(按页面出现顺序) -const form1 = document.forms[0]; - -// 方式2:通过form的name属性(推荐,语义化) -const form2 = document.forms['userForm']; - -// 方式3:通过form的id属性 -const form3 = document.forms['formId']; -``` - -### 2. 通过常规 DOM 选择器 - - - -```javascript -// 通过id -const form = document.getElementById('userForm'); - -// 通过选择器 -const form = document.querySelector('form[name="userForm"]'); -``` - -## 三、Form 对象核心属性 - -| 属性名 | 说明 | 示例 | -| ------------ | ----------------------------------- | ----------------------------------------------------- | -| `action` | 获取 / 设置表单提交的 URL | `form.action = '/api/submit';` | -| `method` | 获取 / 设置提交方式(GET/POST) | `form.method = 'POST';` | -| `enctype` | 获取 / 设置表单编码类型 | `form.enctype = 'multipart/form-data';`(文件上传时) | -| `elements` | 返回表单内所有元素的 HTMLCollection | `const inputs = form.elements;` | -| `name` | 表单的名称(对应 name 属性) | `console.log(form.name);` | -| `reset()` | 重置表单到初始状态 | `form.reset();` | -| `submit()` | 手动提交表单 | `form.submit();` | -| `noValidate` | 是否禁用浏览器默认表单验证 | `form.noValidate = true;` | - -### 常用编码类型(enctype) - -- `application/x-www-form-urlencoded`:默认,普通表单提交; -- `multipart/form-data`:文件上传时必须使用; -- `text/plain`:纯文本提交(极少用)。 - -## 四、访问表单内元素 - -### 1. 通过 elements 集合 - - - -```javascript -const form = document.forms['userForm']; - -// 方式1:通过索引 -const input1 = form.elements[0]; - -// 方式2:通过元素name(推荐) -const usernameInput = form.elements['username']; - -// 方式3:直接通过表单对象访问(简写,等价于elements) -const passwordInput = form.password; -``` - -### 2. 批量获取同类元素 - -```javascript -// 获取所有输入框 -const allInputs = form.querySelectorAll('input'); - -// 获取所有复选框 -const checkboxes = form.querySelectorAll('input[type="checkbox"]'); -``` - -## 五、表单数据操作 - -### 1. 获取单个元素值 - -| 元素类型 | 获取值方式 | 示例 | -| ------------------------ | ------------------------------------ | ------------------------------------------------------------ | -| 文本框 / 密码框 / 文本域 | `value` | `const val = form.username.value;` | -| 单选框 | 遍历找`checked`为 true 的元素 | `const gender = form.gender.find(radio => radio.checked)?.value;` | -| 复选框 | 遍历收集`checked`为 true 的元素 | `const hobbies = [...form.hobby].filter(cb => cb.checked).map(cb => cb.value);` | -| 下拉框(select) | `value`(单选)/ 遍历 option(多选) | `const city = form.city.value;` | - -### 2. 批量获取表单数据(FormData) - -`FormData` 是浏览器内置对象,可快速收集表单所有数据,支持文件上传,兼容 AJAX/Fetch: - -```javascript -const form = document.forms['userForm']; -const formData = new FormData(form); - -// 1. 获取单个值 -console.log(formData.get('username')); - -// 2. 设置值 -formData.set('age', 20); - -// 3. 遍历所有数据 -formData.forEach((value, key) => { - console.log(`${key}: ${value}`); -}); - -// 4. 配合Fetch提交 -fetch('/api/submit', { - method: 'POST', - body: formData // 自动处理编码,无需手动拼接 -}) -.then(res => res.json()) -.then(data => console.log(data)); -``` - -### 3. 手动拼接表单数据(URLSearchParams) - -适用于 GET 请求或需要拼接 URL 参数的场景: - -```javascript -const form = document.forms['userForm']; -const params = new URLSearchParams(); - -// 手动添加字段 -params.append('username', form.username.value); -params.append('password', form.password.value); - -// 拼接成URL参数(?username=xxx&password=xxx) -const queryString = params.toString(); - -// GET请求示例 -fetch(`/api/submit?${queryString}`, { - method: 'GET' -}); -``` - -## 六、表单事件处理 - -### 1. 提交事件(submit) - -核心事件,监听表单提交,可阻止默认提交行为(推荐用 `addEventListener`): - -```javascript -const form = document.forms['userForm']; - -form.addEventListener('submit', (e) => { - // 1. 阻止默认提交(页面跳转) - e.preventDefault(); - - // 2. 表单验证 - const username = form.username.value.trim(); - const password = form.password.value.trim(); - - if (!username) { - alert('请输入用户名'); - form.username.focus(); - return; - } - if (password.length < 6) { - alert('密码长度不能少于6位'); - form.password.focus(); - return; - } - - // 3. 验证通过,提交数据(AJAX/Fetch) - const formData = new FormData(form); - fetch('/api/submit', { - method: 'POST', - body: formData - }).then(res => res.json()) - .then(data => { - if (data.success) { - alert('提交成功'); - form.reset(); // 重置表单 - } else { - alert('提交失败:' + data.msg); - } - }); -}); -``` - -### 2. 重置事件(reset) - -监听表单重置,可阻止默认重置行为: - -```javascript -form.addEventListener('reset', (e) => { - if (!confirm('确定要重置表单吗?')) { - e.preventDefault(); // 阻止重置 - } -}); -``` - -### 3. 元素输入事件(input/change) - -监听表单元素值变化,实时验证: - -```javascript -// 实时验证用户名 -form.username.addEventListener('input', (e) => { - const value = e.target.value.trim(); - if (value && value.length > 10) { - form.username.style.border = '1px solid red'; - document.querySelector('.username-tip').textContent = '用户名长度不能超过10位'; - } else { - form.username.style.border = '1px solid #ccc'; - document.querySelector('.username-tip').textContent = ''; - } -}); -``` - -## 七、表单验证 - -### 1. 浏览器默认验证(HTML5) - -通过 HTML5 表单属性实现基础验证,无需 JS: - - - -```html -<form name="userForm"> - <!-- 必填 --> - <input type="text" name="username" required> - <!-- 最小长度 --> - <input type="password" name="password" minlength="6" required> - <!-- 邮箱格式 --> - <input type="email" name="email" required> - <!-- 数字范围 --> - <input type="number" name="age" min="18" max="100"> - <button type="submit">提交</button> -</form> -``` - -### 2. 自定义验证(JS) - -覆盖默认验证逻辑,更灵活: - - - -```javascript -// 示例:自定义邮箱验证 -form.email.addEventListener('blur', (e) => { - const value = e.target.value.trim(); - const reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; - if (value && !reg.test(value)) { - e.target.setCustomValidity('请输入正确的邮箱格式'); // 设置验证提示 - e.target.reportValidity(); // 显示提示 - } else { - e.target.setCustomValidity(''); // 清除提示 - } -}); -``` - -## 八、常见问题与注意事项 - -1. **避免内联事件(onclick/onsubmit)**:推荐使用 `addEventListener`,便于解绑和维护; -2. **表单元素 name 属性**:通过 `form.elements` 或 `FormData` 获取值时,依赖元素的 `name` 属性(而非 `id`); -3. **文件上传**:必须设置 `form.enctype = 'multipart/form-data'`,且提交方式为 POST; -4. **阻止默认提交**:使用 `e.preventDefault()` 而非 `return false`(后者仅在内联事件中生效); -5. **空值处理**:获取输入值时建议用 `trim()` 去除首尾空格,避免空字符串提交; -6. **兼容性**:`FormData` 兼容所有现代浏览器,IE10+ 支持,低版本需降级处理。 - -## 九、核心总结 - -1. Form 对象是操作表单的入口,优先通过 `document.forms` 获取; -2. 表单数据收集优先用 `FormData`(简洁、支持文件); -3. 表单提交必须监听 `submit` 事件并阻止默认行为,实现异步提交; -4. 表单验证结合 HTML5 内置验证 + JS 自定义验证,提升用户体验; -5. 避免直接提交表单(页面跳转),优先使用 AJAX/Fetch 异步提交。 - -## 作业 - -训练1 - -```javascript -<form name="ticketForm"> - 电影票兑换码:<input type="text" name="code"> - <button type="submit">取票</button> - </form> - - <script> - let form = document.forms['ticketForm']; - let rightCode = '99632570063166'; - form.onsubmit = function(e) { - e.preventDefault(); - let inptcode = form.code.value.trim(); - if (inptcode === rightCode) { - alert('取票成功!《勇敢者游戏》2张票已出票'); - form.reset(); - } else { - alert('取票失败!兑换码错误'); - form.code.value = ''; - } - }; - </script> -``` - -训练2 - -```javascript -<form name="agreementForm"> - <h4>用户注册协议</h4> - <textarea name="agreement" rows="5" cols="50"> -用户注册协议 -一、注册条件 -1. 您必须年满18周岁,具备完全民事行为能力。 -2. 您需提供真实、准确、完整的注册信息。 -二、用户权利与义务 -1. 您有权使用本平台提供的各项服务,但不得用于违法违规行为。 -2. 您有义务妥善保管账号及密码,因自身原因导致账号被盗的,本平台不承担责任。 -三、服务条款变更 -本平台有权根据业务发展调整协议内容,变更后将通过平台公告通知您,您继续使用服务即视为同意变更后的协议。 -四、违约责任 -1. 若您违反本协议约定,本平台有权暂停或终止您的账号使用权限。 -2. 因您的违约行为给本平台造成损失的,您需承担相应的赔偿责任。 -五、其他 -1. 本协议适用中华人民共和国法律。 -2. 如双方发生争议,应协商解决;协商不成的,可向本平台所在地法院提起诉讼。 - </textarea> - <br> - <button type="button" onclick="adjustHeight('up')">加高文本框</button> - <button type="button" onclick="adjustHeight('down')">降低文本框</button> - </form> - - <script> - let form = document.forms['agreementForm']; - let textarea = form.agreement; - let step = 30; - function adjustHeight(type) { - let currentHeight = parseInt(textarea.style.height) || textarea.offsetHeight; - if (type === 'up') { - textarea.style.height = (currentHeight + step) + 'px'; - } else if (type === 'down') { - if (currentHeight > 100) { - textarea.style.height = (currentHeight - step) + 'px'; - } else { - alert('文本框高度已达最小值!'); - } - } - } - </script> -``` - -训练3 - -```javascript -<form name="courseForm"> - <h4>学生选课(最多可选6门)</h4> - <!-- 选课复选框列表 --> - <input type="checkbox" name="course" value="语文">语文 - <input type="checkbox" name="course" value="数学">数学 - <input type="checkbox" name="course" value="英语">英语 - <input type="checkbox" name="course" value="物理">物理 - <input type="checkbox" name="course" value="化学">化学 - <input type="checkbox" name="course" value="生物">生物 - <input type="checkbox" name="course" value="历史">历史 - <input type="checkbox" name="course" value="地理">地理 - <input type="checkbox" name="course" value="政治">政治 - <br><br> - <button type="submit">确认选课</button> - </form> - - <script> - // 1. 获取Form对象 - const form = document.forms['courseForm']; - // 2. 最大选课数量限制 - const maxCourse = 6; - - // 3. 监听表单提交事件 - form.onsubmit = function(e) { - // 阻止默认提交行为 - e.preventDefault(); - - // 4. 获取所有选课复选框(Form对象elements集合) - const courseCheckboxes = form.elements['course']; - // 5. 统计已选中的课程数量 - let selectedCount = 0; - for (let i = 0; i < courseCheckboxes.length; i++) { - if (courseCheckboxes[i].checked) { - selectedCount++; - } - } - - // 6. 数量验证 - if (selectedCount > maxCourse) { - alert(`选课失败!最多只能选择${maxCourse}门课程,您已选${selectedCount}门,请取消部分选课`); - } else if (selectedCount === 0) { - alert('请至少选择1门课程!'); - } else { - alert(`选课成功!您共选择了${selectedCount}门课程`); - // 可选:重置表单 - form.reset(); - } - }; - const allCheckboxes = form.elements['course']; - for (let cb of allCheckboxes) { - cb.onclick = function() { - let selectedCount = 0; - for (let i = 0; i < allCheckboxes.length; i++) { - if (allCheckboxes[i].checked) { - selectedCount++; - } - } - if (selectedCount > maxCourse) { - alert(`最多只能选${maxCourse}门课!`); - this.checked = false; // 取消当前选中的课程 - } - }; - } - </script> -``` - -综合练习1 - -```javascript - <div> - <input type="radio" name="answer" value="A"> A. 错误答案<br> - <input type="radio" name="answer" value="B"> B. 正确答案<br> - <input type="radio" name="answer" value="C"> C. 错误答案<br> - <button onclick="checkAnswer()">提交</button> - </div> - <script> - function checkAnswer() { - let answerOptions = document.getElementsByName('answer'); - // 存储用户选中的答案 - let selectedAnswer = null; - // 遍历选项,找到用户选中的答案 - for (let i = 0; i < answerOptions.length; i++) { - if (answerOptions[i].checked) { - selectedAnswer = answerOptions[i].value; - break; - } - } - let correctAnswer = "B"; - if (!selectedAnswer) { // 未选择答案 - alert("请选择正确答案!"); - } else if (selectedAnswer === correctAnswer) { - alert("回答正确!"); - } else { - alert("答案不对,请重新选择!"); - } - } - </script> -``` - -综合练习2 - -```javascript -<div> - <button onclick="operateHobby('all')">全选</button> - <button onclick="operateHobby('none')">全不选</button> - <button onclick="operateHobby('reverse')">反选</button> - <div style="margin-top: 10px;"> - <input type="checkbox" class="hobby-checkbox"> 阅读<br> - <input type="checkbox" class="hobby-checkbox"> 运动<br> - <input type="checkbox" class="hobby-checkbox"> 听歌<br> - <input type="checkbox" class="hobby-checkbox"> 摄影<br> - <input type="checkbox" class="hobby-checkbox"> 绘画<br> - </div> - </div> - <script> - function operateHobby(type) { - let hobbyCheckboxes = document.getElementsByClassName('hobby-checkbox'); - // 遍历所有复选框,根据类型执行对应操作 - for (let i = 0; i < hobbyCheckboxes.length; i++) { - let checkbox = hobbyCheckboxes[i]; // 当前遍历的复选框 - switch (type) { - case 'all': // 全选:所有复选框设为选中 - checkbox.checked = true; - break; - case 'none': // 全不选:所有复选框设为未选中 - checkbox.checked = false; - break; - case 'reverse': // 反选:选中变未选,未选变选中 - checkbox.checked = !checkbox.checked; - break; - } - } - } - </script> -``` - -综合练习3 - -```javascript - <select id="province" onchange="changeCity()"> - <option value="">请选择省份</option> - <option value="bj">北京市</option> - <option value="sh">上海市</option> - <option value="gd">广东省</option> - </select> - <select id="city"> - <option value="">请选择城市</option> - </select> - <script> - let cityData = { - "bj": ["北京市"], - "sh": ["上海市"], - "gd": ["广州市", "深圳市"] - }; - function changeCity() { - // 获取省份下拉框和城市下拉框元素 - let provinceSelect = document.getElementById("province"); - let citySelect = document.getElementById("city"); - // 获取当前选中的省份值 - let selectedProvince = provinceSelect.value; - // 清空原有城市选项 - citySelect.innerHTML = "<option value=''>请选择城市</option>"; - // 根据选中省份加载对应城市 - if (selectedProvince) { // 选中了有效省份 - let cities = cityData[selectedProvince]; // 获取该省的城市列表 - // 遍历城市列表,添加到城市下拉框 - for (let i = 0; i < cities.length; i++) { - let option = document.createElement("option"); // 创建新选项 - option.value = cities[i]; // 设置选项值 - option.textContent = cities[i]; // 设置选项显示文字 - citySelect.appendChild(option); // 把选项添加到城市下拉框 - } - } - } - </script> -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251212-JavaScript\344\271\213josn.md" "b/\350\265\265\344\277\212\350\261\252/20251212-JavaScript\344\271\213josn.md" deleted file mode 100644 index bc0b75573db7e372c69b954e2fe97248f823fdf9..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251212-JavaScript\344\271\213josn.md" +++ /dev/null @@ -1,173 +0,0 @@ -### 一、JSON 核心特点 - -1. **纯文本格式**:易读易写,便于传输(如前后端交互)。 - -2. **键值对结构**:类似 JS 对象,但有严格语法限制。 - -3. 支持的数据类型 - - : - - - 字符串(必须用 **双引号** 包裹,单引号不合法) - - 数字(整数 / 浮点数) - - 布尔值(true/false) - - 数组(`[]` 包裹,元素用逗号分隔) - - 对象(`{}` 包裹,键必须双引号) - - null(注意:不支持 undefined、函数、日期、正则等 JS 特有类型) - -### 二、JSON 语法规则(重点:和 JS 对象的区别) - -| 特性 | JSON | JavaScript 对象 | -| ------------ | ---------------------------------------- | -------------------------------------- | -| 键名 | 必须用双引号包裹 | 可省略引号,或单 / 双引号 | -| 字符串值 | 必须用双引号 | 单 / 双引号均可 | -| 末尾逗号 | 不允许(语法错误) | 部分浏览器允许(不推荐) | -| 支持的值类型 | 字符串 / 数字 / 布尔 / 数组 / 对象 /null | 支持所有 JS 类型(函数 /undefined 等) | -| 注释 | 不支持 | 支持 // 或 /* */ | - -#### 示例:合法的 JSON - -```json -{ - "name": "张三", - "age": 25, - "isStudent": false, - "hobbies": ["篮球", "编程"], - "address": { - "city": "北京", - "street": "中关村" - }, - "score": null -} -``` - -#### 示例:不合法的 JSON(常见错误) - -```json -{ - name: "张三", // 键名无双引号 ❌ - "age": '25', // 字符串用单引号 ❌ - "hobbies": ["篮球", "编程",], // 末尾逗号 ❌ - "sayHi": function() {} // 包含函数 ❌ -} -``` - -### 三、JavaScript 操作 JSON 的核心方法 - -JS 内置 `JSON` 对象,提供两个核心方法:`JSON.parse()` 和 `JSON.stringify()`,用于 JSON 字符串和 JS 对象的互转。 - -#### 1. JSON.parse ():JSON 字符串 → JS 对象 - -将符合 JSON 语法的字符串解析为 JavaScript 对象 / 值。 - -```javascript -// JSON 字符串(注意:外层是单引号,避免和内部双引号冲突) -const jsonStr = '{"name":"张三","age":25,"hobbies":["篮球","编程"]}'; - -// 解析为 JS 对象 -const jsObj = JSON.parse(jsonStr); -console.log(jsObj.name); // 输出:张三 -console.log(jsObj.hobbies[0]); // 输出:篮球 -``` - -**进阶:第二个参数(reviver)** - -可自定义解析过程,比如转换日期字符串为 Date 对象: - -```javascript -const jsonStr = '{"name":"张三","birthday":"2000-01-01"}'; -const jsObj = JSON.parse(jsonStr, (key, value) => { - if (key === 'birthday') return new Date(value); - return value; -}); -console.log(jsObj.birthday.getFullYear()); // 输出:2000 -``` - -#### 2. JSON.stringify ():JS 对象 → JSON 字符串 - -将 JS 对象 / 值转换为 JSON 格式的字符串(自动过滤不支持的类型,如 undefined、函数)。 - -```javascript -const jsObj = { - name: "张三", - age: 25, - hobbies: ["篮球", "编程"], - sayHi: function() {} // 会被过滤 -}; - -// 转换为 JSON 字符串 -const jsonStr = JSON.stringify(jsObj); -console.log(jsonStr); -// 输出:{"name":"张三","age":25,"hobbies":["篮球","编程"]} -``` - -**进阶参数** - -- 第二个参数(replacer):指定要序列化的属性,或自定义转换规则; -- 第三个参数(space):格式化缩进(可读性更好)。 - -```javascript -const jsObj = { name: "张三", age: 25, hobbies: ["篮球", "编程"] }; - -// 只序列化 name 和 hobbies,缩进 2 个空格 -const jsonStr = JSON.stringify(jsObj, ["name", "hobbies"], 2); -console.log(jsonStr); -/* 输出: -{ - "name": "张三", - "hobbies": [ - "篮球", - "编程" - ] -} -*/ -``` - -### 四、常见应用场景 - -1. 前后端数据交互 - - :后端接口返回 JSON 字符串,前端解析为 JS 对象;前端提交数据时,将 JS 对象转为 JSON 字符串发送。 - - ```javascript - // 示例:fetch 请求接口解析 JSON - fetch('https://api.example.com/user') - .then(res => res.json()) // 等价于 JSON.parse(res.text()) - .then(data => console.log(data)); - - // 示例:提交 JSON 数据 - fetch('https://api.example.com/user', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ name: "张三", age: 25 }) - }); - ``` - - - -2. 本地存储: - - ``` - localStorage/sessionStorage - ``` - - - - 只能存储字符串,需将对象转为 JSON 字符串存储,读取时再解析。 - - ```javascript - // 存储 - const user = { name: "张三", age: 25 }; - localStorage.setItem('user', JSON.stringify(user)); - - // 读取 - const storedUser = JSON.parse(localStorage.getItem('user')); - ``` - -### 五、常见坑点 - -1. JSON 键名 / 字符串值必须用 **双引号**,单引号或无引号会导致 `JSON.parse()` 报错; -2. JSON 不支持末尾逗号,解析时会抛出 `SyntaxError`; -3. 解析 / 序列化时,undefined、函数、Symbol 会被忽略(数组中会转为 null); -4. 日期对象会被序列化为字符串(如 `"2025-12-12T00:00:00.000Z"`),解析后需手动转回 Date 对象; -5. 循环引用的对象(如 `a = { b: a }`)调用 `JSON.stringify()` 会报错。 \ No newline at end of file diff --git "a/\350\265\265\344\277\212\350\261\252/20251215-\347\273\203\344\271\240.md" "b/\350\265\265\344\277\212\350\261\252/20251215-\347\273\203\344\271\240.md" deleted file mode 100644 index c849dbbdca4db5a75d651ee7ebd18ea2bcebe374..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251215-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,165 +0,0 @@ -``` -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Document - - - - - - - -``` - diff --git "a/\350\265\265\344\277\212\350\261\252/20251217-api\345\237\272\347\241\200.md" "b/\350\265\265\344\277\212\350\261\252/20251217-api\345\237\272\347\241\200.md" deleted file mode 100644 index eac7872a2913fabce2e896739adb6a64aa7f3793..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251217-api\345\237\272\347\241\200.md" +++ /dev/null @@ -1,72 +0,0 @@ -HTTP API 的核心组成 - -\1. 请求(Request)—— 客户端向服务器发送的 “指令” - -- **请求 URL**:API 的访问地址(如https://api.example.com/users),包含资源路径和参数。 - -- **请求方法(HTTP Methods)**:表示对资源的操作(JavaScript 调用中最常用前 4 种): - -方法作用特点JavaScript 调用场景GET查询资源参数拼在 URL 后,可缓存,无请求体获取列表、详情(如查天气)POST创建资源参数在请求体中,不可缓存提交表单、新增数据(如注册用户)PUT修改资源全量更新资源,请求体传完整数据编辑用户信息、更新配置DELETE删除资源无请求体(或少量参数)删除数据(如删除订单) - -- **请求头(Headers)**:携带额外信息(如数据格式、认证信息),JavaScript 中常用: - -- Content-Type:指定请求体格式(application/json 最常用,对应 JSON 数据); - -- Authorization:认证信息(如 Bearer xxx 令牌、API Key)。 - -- **请求体(Body)**:POST/PUT 方法中传递的具体数据(GET 无请求体),JavaScript 中多为 JSON 格式。 - -\2. 响应(Response)—— 服务器返回的 “结果” - -- **响应状态码**:3 位数字,表示请求结果(核心重点): - -- 2xx(成功):200 OK(请求成功)、201 Created(创建成功); - -- 4xx(客户端错误):400 Bad Request(参数错误)、401 Unauthorized(未认证)、404 Not Found(资源不存在); - -- 5xx(服务器错误):500 Internal Server Error(服务器故障)。 - -- **响应头**:服务器返回的附加信息(如 Content-Type: application/json 表示响应数据是 JSON)。 - -- **响应体**:核心数据(JavaScript 中需解析为 JSON 对象使用)。 - - - -- ``` - // 1. 创建请求对象 - const xhr = new XMLHttpRequest(); - // 2. 配置请求(方法、URL、是否异步) - xhr.open('GET', 'https://api.example.com/users?page=1', true); - // 3. 设置请求头(如需认证) - xhr.setRequestHeader('Authorization', 'Bearer your-token'); - // 4. 监听响应状态变化 - xhr.onreadystatechange = function() { - // readyState=4 表示请求完成,status=200 表示成功 - if (xhr.readyState === 4 && xhr.status === 200) { - // 解析JSON响应体 - const response = JSON.parse(xhr.responseText); - console.log('请求成功:', response); - } - }; - // 5. 发送请求(GET无请求体,POST需传数据) - xhr.send(); - - // POST请求示例(传递JSON数据) - xhr.open('POST', 'https://api.example.com/users', true); - xhr.setRequestHeader('Content-Type', 'application/json'); - xhr.send(JSON.stringify({ name: '张三', age: 25 })); // 请求体转为JSON字符串 - ``` - - - -四、JavaScript 调用 HTTP API 的 3 种核心方式(实操重点) - -\1. 原生 XMLHttpRequest(兼容性最好,旧项目常用) - -// 1. 创建请求对象const xhr = new XMLHttpRequest();// 2. 配置请求(方法、URL、是否异步)xhr.open('GET', 'https://api.example.com/users?page=1', true);// 3. 设置请求头(如需认证)xhr.setRequestHeader('Authorization', 'Bearer your-token');// 4. 监听响应状态变化xhr.onreadystatechange = function() { // readyState=4 表示请求完成,status=200 表示成功 if (xhr.readyState === 4 && xhr.status === 200) { // 解析JSON响应体 const response = JSON.parse(xhr.responseText); console.log('请求成功:', response); }};// 5. 发送请求(GET无请求体,POST需传数据)xhr.send();// POST请求示例(传递JSON数据)xhr.open('POST', 'https://api.example.com/users', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.send(JSON.stringify({ name: '张三', age: 25 })); // 请求体转为JSON字符串 - -\2. 原生 Fetch API(ES6+,简洁优雅,推荐优先使用) - -- 基于 Promise,支持链式调用,需处理异常和响应解析。 - -// GET请求(带查询参数)fetch('https://api.example.com/users?page=1', { method: 'GET', headers: { 'Authorization': 'Bearer your-token' }}).then(response => { // 先判断状态码是否成功(fetch仅在网络错误时 reject,4xx/5xx需手动处理) if (!response.ok) throw new Error(`状态码错误:${response.status}`); return response.json(); // 解析JSON响应体(返回Promise)}).then(data => console.log('请求成功:', data)).catch(error => console.error('请求失败:', error));// POST请求(传递JSON数据)fetch('https://api.example.com/users', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer your-token' }, body: JSON.stringify({ name: '李四', age: 30 }) // 请求体必须是字符串}).then(response => response.json()).then(data => console.log('创建成功:', data)).catch(error => console.error('创建失败:', error)); \ No newline at end of file diff --git "a/\350\265\265\344\277\212\350\261\252/20251218-api\344\272\213\344\273\266.md" "b/\350\265\265\344\277\212\350\261\252/20251218-api\344\272\213\344\273\266.md" deleted file mode 100644 index 52b9bdfd9830a43ca487645415bd2170e3aa4ae2..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251218-api\344\272\213\344\273\266.md" +++ /dev/null @@ -1,302 +0,0 @@ -#### 原生 XMLHttpRequest 的事件(最典型的 API 事件) - -XHR 本身就是基于事件驱动设计的,核心事件如下: - -javascript - - - -运行 - - - - - - - - - -```javascript -const xhr = new XMLHttpRequest(); -// 1. 监听请求状态变化(最核心事件) -xhr.addEventListener('readystatechange', () => { - if (xhr.readyState === 4) { // 4=请求完成 - if (xhr.status >= 200 && xhr.status < 300) { - console.log('请求成功事件触发:', JSON.parse(xhr.responseText)); - } else { - console.log('请求失败事件触发:', xhr.status); - } - } -}); - -// 2. 监听请求成功(简化版,等价于 readyState=4+status=200) -xhr.addEventListener('load', () => { - console.log('load事件(请求完成):', xhr.responseText); -}); - -// 3. 监听请求失败(网络错误,如断网) -xhr.addEventListener('error', () => { - console.log('error事件(网络错误)'); -}); - -// 4. 监听请求超时 -xhr.timeout = 5000; // 设置超时时间5秒 -xhr.addEventListener('timeout', () => { - console.log('timeout事件(请求超时)'); -}); - -// 5. 监听请求取消 -xhr.addEventListener('abort', () => { - console.log('abort事件(请求被取消)'); -}); - -// 发送请求 -xhr.open('GET', 'https://api.example.com/users'); -xhr.send(); - -// 手动取消请求(触发abort事件) -// xhr.abort(); -``` - -#### 2. Fetch/Axios 封装的 “事件式处理” - -Fetch/Axios 本身基于 Promise,但可以封装成事件模式,更贴合 “事件” 的思维: - -javascript - - - -运行 - - - - - - - - - -```javascript -// 封装Axios为事件模式 -class ApiRequest { - constructor(url) { - this.url = url; - // 定义事件回调容器 - this.events = { success: [], error: [], timeout: [] }; - } - - // 监听事件 - on(eventName, callback) { - if (this.events[eventName]) { - this.events[eventName].push(callback); - } - } - - // 触发事件 - emit(eventName, data) { - this.events[eventName].forEach(callback => callback(data)); - } - - // 发送请求 - send() { - axios.get(this.url, { timeout: 5000 }) - .then(res => this.emit('success', res.data)) - .catch(err => { - if (err.code === 'ECONNABORTED') { - this.emit('timeout', err.message); - } else { - this.emit('error', err); - } - }); - } -} - -// 使用:监听API事件 -const request = new ApiRequest('https://api.example.com/users'); -// 监听成功事件 -request.on('success', data => console.log('API成功事件:', data)); -// 监听超时事件 -request.on('timeout', msg => console.log('API超时事件:', msg)); -// 监听错误事件 -request.on('error', err => console.log('API错误事件:', err)); -// 发送请求(触发对应事件) -request.send(); -``` - -### 三、场景 2:实时 API 的事件驱动(WebSocket/EventSource) - -这类 API 是**双向 / 单向实时通信**,核心是 “服务器主动推送事件”,前端监听并处理,是真正意义上的 “API 事件”(服务器触发,前端响应)。 - -#### 1. WebSocket API 事件(双向通信) - -WebSocket 建立连接后,服务器可随时推送事件,前端监听: - -javascript - - - -运行 - - - - - - - - - -```javascript -// 创建WebSocket连接(协议为ws/wss) -const ws = new WebSocket('wss://api.example.com/chat'); - -// 1. 连接成功事件 -ws.addEventListener('open', () => { - console.log('WebSocket连接成功'); - // 向服务器发送消息 - ws.send(JSON.stringify({ type: 'join', room: 'room1' })); -}); - -// 2. 接收服务器推送的事件(核心) -ws.addEventListener('message', (event) => { - const data = JSON.parse(event.data); - // 根据事件类型处理不同业务 - switch (data.type) { - case 'new_message': - console.log('收到新消息事件:', data.content); - break; - case 'user_join': - console.log('用户加入事件:', data.username); - break; - } -}); - -// 3. 连接关闭事件 -ws.addEventListener('close', (event) => { - console.log('WebSocket连接关闭:', event.code, event.reason); -}); - -// 4. 连接错误事件 -ws.addEventListener('error', (error) => { - console.log('WebSocket错误事件:', error); -}); -``` - -#### 2. EventSource(SSE,服务器推送事件,单向) - -专门用于 “服务器向客户端单向推送事件”,比 WebSocket 更轻量,基于 HTTP: - -javascript - - - -运行 - - - - - - - - - -```javascript -// 创建SSE连接,监听服务器推送的事件 -const es = new EventSource('https://api.example.com/real-time-data'); - -// 1. 监听默认事件(服务器发送的未命名事件) -es.addEventListener('message', (event) => { - console.log('默认推送事件:', event.data); -}); - -// 2. 监听自定义事件(服务器指定的事件名) -es.addEventListener('temperature_change', (event) => { - const temp = JSON.parse(event.data); - console.log('温度变化事件:', temp.value, '℃'); -}); - -// 3. 连接错误/关闭事件 -es.addEventListener('error', () => { - console.log('SSE连接错误,尝试重连...'); - if (es.readyState === EventSource.CLOSED) { - // 重连逻辑 - } -}); -``` - -### 四、API 事件的核心应用场景 - -1. **实时数据更新**:如股票行情、物联网设备数据、聊天消息(WebSocket/SSE 事件); -2. **请求状态监控**:如文件上传进度(XHR 的`progress`事件)、大文件下载进度; -3. **模块化代码设计**:将 API 请求的成功 / 失败 / 超时逻辑拆分为独立事件回调,降低耦合; -4. **异常兜底处理**:统一监听 API 错误事件,触发全局提示(如 “网络异常,请重试”)。 - -### 五、关键注意事项 - -1. 事件解绑 - - :避免内存泄漏,比如页面销毁时取消 XHR/WebSocket 事件监听: - - javascript - - - - 运行 - - - - - - - - - - ```javascript - // 移除XHR事件监听 - xhr.removeEventListener('readystatechange', callback); - // 关闭WebSocket并移除监听 - ws.close(); - ws.removeEventListener('message', callback); - ``` - - - -2. 事件防抖 / 节流 - - :高频触发的 API 事件(如实时数据推送),需控制处理频率: - - javascript - - - - 运行 - - - - - - - - - - ```javascript - let timer = null; - ws.addEventListener('message', (event) => { - clearTimeout(timer); - timer = setTimeout(() => { - // 1秒内只处理一次消息 - console.log(event.data); - }, 1000); - }); - ``` - - - -3. **事件命名规范**:自定义 API 事件时,建议统一命名(如`api:success`、`api:error`),便于维护。 - -### 总结 - -1. **API 事件** 分两类:HTTP 请求的 “状态回调事件”(XHR / 封装的 Fetch/Axios)、实时 API 的 “服务器推送事件”(WebSocket/SSE); -2. 原生 XHR 是事件驱动的典型实现,WebSocket/SSE 是真正的 “服务器触发 - 客户端响应” 事件模式; -3. 事件式处理 API 的核心优势是**解耦**(请求逻辑与处理逻辑分离)、**实时性**(服务器主动推送),需注意事件解绑避免内存泄漏。 - -如果需要针对某类 API 事件(比如文件上传的 progress 事件、WebSocket 的重连事件)做更详细的实操示例,或者想了解后端如何触发这些 API 事件,可以告诉我,我会补充对应的内容。 \ No newline at end of file diff --git "a/\350\265\265\344\277\212\350\261\252/20251219-\345\244\215\344\271\240.md" "b/\350\265\265\344\277\212\350\261\252/20251219-\345\244\215\344\271\240.md" deleted file mode 100644 index 15ff53e309aaa14b908e23b5d4d2dae69209ab48..0000000000000000000000000000000000000000 --- "a/\350\265\265\344\277\212\350\261\252/20251219-\345\244\215\344\271\240.md" +++ /dev/null @@ -1,181 +0,0 @@ -``` - - - - - - Document - - - -
      -
      -

      博客列表

      - - - -
      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      序号标题内容摘要作者发布日期操作
      001人工智能在医疗领域的应用探讨AI如何改变医疗诊断和治疗的未来趋势...张明2024-03-15
      002区块链技术的商业价值分析区块链在金融供应链等领域的实际应用...李华2024-03-14
      003气候变化对农业的影响研究全球变暖对农作物产量和种植模式的影响...王伟2024-03-13
      004数字化转型的企业案例分享传统企业通过数字化实现业务增长的实践经验...陈静2024-03-12
      005新能源汽车市场分析对比分析国内外新能源汽车品牌的发展现状和趋势...赵强2024-03-11
      006远程办公的未来模式探索后疫情时代远程办公的最佳实践和挑战...刘芳2024-03-10
      007量子计算的研究进展介绍量子计算机的最新突破和潜在应用领域...周涛2024-03-09
      008智慧城市建设方案探讨物联网和大数据在智慧城市中的集成应用...孙磊2024-03-08
      009元宇宙的商业机会分析元宇宙概念下的新兴商业模式和投资方向...吴敏2024-03-07
      010可持续发展战略研究研究企业在环境保护和社会责任方面的最佳实践...郑浩2024-03-06
      -
      -
      - - -``` - diff --git "a/\350\265\265\345\251\211\350\250\200/20251110-Js\351\223\276\346\216\245.md" "b/\350\265\265\345\251\211\350\250\200/20251110-Js\351\223\276\346\216\245.md" deleted file mode 100644 index 7eef9df6f922545d40fb66b680fb85fef118b773..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251110-Js\351\223\276\346\216\245.md" +++ /dev/null @@ -1,73 +0,0 @@ -## web前端核心技术 - -### web前端框架 - -- react facebook react16 -- vue 尤雨溪 vue3 -- angular2 谷歌 - -### 全栈 = 前端 + 后端 - -- 前端 - - vue3 - - react -- 后端 - - c# asp.net core - - java springboot springcloud springmvc - - python Django - - C/C++ - - 汇编语言 - - 二进制 - - nodejs - - go - - php - - vb - - dephi - - 易语言 - - lisp - - rust - - ruby - - lua - - -## java 在 html 中的应用 - -- 直接嵌入法 -```html - -``` - -- 外链 - - 创建一个js的文件 - - js文件代码使用alert('http://www.mingrisoft.com');(该功能是在页面中弹出一个对话框,对话框显示内容) - - 在html文件中调用JS文件 -```html - -``` - -- 作为标签的属性值使用 - - -## 练习 - -- 输出老子的名言 -- 效果图: -- ![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115153222966.png) - -```html - -``` - -- 输出三明学院的官网地址 -- 效果图: -- ![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115183506808.png) - -```html -alert('http://www.mingrisoft.com'); - - -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251112-js\345\237\272\347\241\200.md" "b/\350\265\265\345\251\211\350\250\200/20251112-js\345\237\272\347\241\200.md" deleted file mode 100644 index 5efce10d6f8e14d65b5f8b0be2222cc147f7e85a..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251112-js\345\237\272\347\241\200.md" +++ /dev/null @@ -1,235 +0,0 @@ -## js基础 - -### 数据类型 - -- 数值型 - - 十进制 - - 十六进制 - - 八进制 - - 浮点型数据 - - 特殊值indinity - - 特殊值NaN - -### 字符串型 - -字符串(string)是由0个或多个字符组成的序列,可以包含大小写字母、数字、标点符号或其他字符,也可以包含汉字。 - -js中常用的转义字符及其描述 - -| 转义字符 | 描述 | 转义字符 | 描述 | -| :-----| :-----: | :-----: | -----:| -| \b | 退格 | \v | 垂直制表符 | -| \n | 换行符 | \r | Enter符 | -| \t | 水平制表符,Tab空格 | \\ | 反斜杠 | -| \f | 换页 | \OOO | 八进制整数,范围000--777 | -| \' | 单引号 | \xHH | 十六进制整数,范围00--FF | -| \" | 双引号 | \uhhhh | 十六进制编码的Unicode字符 | - -转义字符\n会产生换行,必须放在pre中: - -```html - -``` - -### 布尔型 - -``` -布尔数据类型只有两个值,即true(真)和false(假) -``` - -### 特殊数据类型 - -- 定义值(undefined) - - 表示变量还没有赋值 -- 空值(null) - - 表示变量被赋予了一个空值 - - -## 常量和变量 - -### 常量 - -``` -常量是指在程序运行过程中保持不变的数据 -``` - -### 变量 - -- 变量的命名 - - 必须以字母或下划线开头,其它字符可以是数字、字母或下划线 - - 变量名不能包含空格或加号、减号等符号 - - 变量名是严格区分大小写的 - - 不能使用JS的关键字作为变量名 - -- JavaScript的关键字 - -| abstract | continue | finally | instanceof | private | this | -| :----- | :-----: | :-----: | :-----:| :-----:| :-----:| -| boolean | default | float | int | public | throw | -| break | do | for | interface | return | typeof | -| byte | double | function | long | short | true | -| case | else | goto | native | static | var | -| catch | extends | implements | new | super | void | -| char | false | import | null | switch | while | -| class | final | in | package | synchroized | with | - -- 变量的声明 - - 所有的JS变量都是由关键字var声明的 -- 变量的赋值 - - 声明变量的同时可以使用等于号对变量进行赋值 -- 变量的类型 - - 可以是数值型、字符串型和布尔型等 - -## 运算符 - -### 算术运算符 - -- JS常见的运算符 - -| 运算符 | 描述 | 示例 | -| :----- | :-----: | :-----: | -| + | 加运算符 | 5+7 //返回值为12 | -| - | 减运算符 | 9-3 //返回值为6 | -| * | 乘运算符 | 5*6 //返回值为30 | -| / | 除运算符 | 12/2 //返回值为6 | -| % | 取模运算符(返回余数) | 7%5 //返回值为2 | -| ++ | 自增运算符 i++(在使用i之后,使i的值加1);++i(在使用i之前,使i的值加1) | i=2;j=i++ //j的值为2,i的值为3。 i=2;j=++i //j的值为3,i的值为3| -| -- | 自减运算符 i--(在使用i之后,使i的值减1);--i(在使用i之前,使i的值减1) | i=7;j=i-- //j的值为7,i的值为6。 i=7;j=--i //j的值为6,i的值为6| - - -- 字符串运算符 - -| 运算符 | 描述 | 示例 | -| :----- | :-----: | :-----: | -| + | 连接两个字符串 | "..+"".." | -| += | 连接两个字符串,并将结果赋给第一个字符串 | var name = "";name += "" | - - -- 比较运算符 - -| 运算符 | 描述 | -| :----- | :-----: | -| < | 小于 | -| > | 大于 | -| <= | 小于或等于 | -| >= | 大于或等于 | -| == | 等于。只根据表面值进行判断,不涉及数据类型 | -| === | 绝对等于。同时根据表面值和数据类型进行判断 | -| != | 不等于。只根据表面值进行判断,不涉及数据类型 | -| !== | 绝对不等于。同时根据表面值和数据类型进行判断 | - -- 赋值运算符 - -| 运算符 | 描述 | 示例 | -| :----- | :-----: | :-----: | -| = | 将右边表达式的值赋给左边的变量 | userName="Tony" | -| += | 将运算符左边的变量加上右边表达式的值赋给左边的变量 | a+=b //相当于a=a+b | -| -= | 将运算符左边的变量减去右边表达式的值赋给左边的变量 | a-=b //相当于a=a-b | -| *= | 将运算符左边的变量乘以右边表达式的值赋给左边的变量 | a*=b //相当于a=a*b | -| /= | 将运算符左边的变量除以右边表达式的值赋给左边的变量 | a/=b //相当于a=a/b | -| %= | 将运算符左边的变量用右边表达式的值求模,并将结果赋给左边的变量 | a%=b //相当于a=a%b | - - -- 逻辑运算符 - -| 运算符 | 描述 | 示例 | -| :----- | :-----: | -----: | -| && | 逻辑与 | a&&b //当a和b都为真时,结果为真,否则为假 | -| 双竖线 | 逻辑或 | a双竖线b //当a为真者b为真时,结果为真,否则为假 | -| ! | 逻辑非 | !a //当a为假时,结果为真,否则为假 | - - -## 练习 - -- 俄罗斯 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184055749.png) -```html - -``` - -- 计算员工的实际收入 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184204114.png) -```html - -``` - -- 九阳神功 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184338016.png) -```html - -``` - -- 路径 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184630000.png) -```html - -``` - -- 判断天数 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184729207.png) -```html - -``` - -- 乔丹 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184838842.png) -```html -

      个人信息

      - -``` - -- 珠穆朗马蜂 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184922444.png) -```html - -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251113-\350\277\220\347\256\227\347\254\246.md" "b/\350\265\265\345\251\211\350\250\200/20251113-\350\277\220\347\256\227\347\254\246.md" deleted file mode 100644 index ddd2cac4481e2350aae6f7b25061e5416a7bcd20..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251113-\350\277\220\347\256\227\347\254\246.md" +++ /dev/null @@ -1,66 +0,0 @@ -## 其它运算符 - -- 不同数据类型使用typeof运算符的返回值 - -| 数据类型 | 返回值 | 数据类型 | 返回值 | -| :-----| :-----: | :-----: | -----:| -| 数值 | number | null | object | -| 字符串 | string | 对象 | object | -| 布尔值 | boolean | 函数 | function | -| undefined | undefined | | | - -- js运算符的优先级与结核性 - -| 运算符 | 优先级 | 结合性 | -| :----- | :-----: | -----: | -| .、[]、() | 最高 | 向左结合 | -| ++、--、-、!、delete、new、typeof、void | | 向右结合 | -| *、/、% | | 向左结合 | -| +、- | | 向左结合 | -| <<、>>、>>> | | 向左结合 | -| <、<=、>、>=、in、instanceof | | 向左结合 | -| ==、!=、===、!=== | | 向左结合 | -| & | | 向左结合 | -| ^ | | 向左结合 | -| 单竖线 | 由高到低依次排列 | 向左结合 | -| && | | 向左结合 | -| 双竖线 | | 向左结合 | -| ?: | | 向右结合 | -| = | | 向右结合 | -| *=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、 | | 向右结合 | -| , | 最低 | 向左结合 | - -## 练习 - -- 计算本息合计 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185013771.png) -```html - -``` - -- 计算梯形面积 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185116014.png) -```html - -``` - -- 判断成绩是否及格 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185155126.png) -```html - -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\350\265\265\345\251\211\350\250\200/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" deleted file mode 100644 index 17d65ab0ac97d814f7e0bc90171fb66ac18b8d23..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" +++ /dev/null @@ -1,222 +0,0 @@ -- 流程控制语句 - - 条件判断语句 - - 简单if语句 - - if……else语句 - - if语句的嵌套 - - switch语句 - - 循环控制语句 - - while循环语句 - - for循环语句 - - 循环语句的嵌套 - - 跳转语句 - - continue语句 - - break语句 - - - -## 练习 - -- 训练1 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185400136.png) -```html - -``` - -- 训练2 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185453842.png) -```html - -``` - - -- 训练3 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185538954.png) -```html - -``` - -- 训练4 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185636991.png) -```html - -``` - -- 训练5 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185732622.png) -```html - -``` - -- 影厅座位图 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185812370.png) -```html - -``` - -- 综合练习1 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185914126.png) -```html - -``` - -- 综合练习2 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185957120.png) -```html - -``` - -- 综合练习3 -- 效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115190034432.png) -```html - -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251117-\350\260\203\347\224\250\345\207\275\346\225\260.md" "b/\350\265\265\345\251\211\350\250\200/20251117-\350\260\203\347\224\250\345\207\275\346\225\260.md" deleted file mode 100644 index 80785fe1e7f0f74f9876f1b5cc37d9e6244f1fca..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251117-\350\260\203\347\224\250\345\207\275\346\225\260.md" +++ /dev/null @@ -1,50 +0,0 @@ -## 匿名函数的定义 - -let getNameById = function (name, age){ - -} - -### 第一种定义方式:传统、原始方式 - -function getNameById = function (name, age){ - -} - -### 箭头函数 - -let getNameById = (name, age) => { - -} - -getNameById('',12) - -### 练习 - -### 完整的收货地址 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251118161641157.png) -```html - -``` - -### 绝对值 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251118161543858.png) -```html - -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251119-\345\257\271\350\261\241,md" "b/\350\265\265\345\251\211\350\250\200/20251119-\345\257\271\350\261\241,md" deleted file mode 100644 index eddddee7a203c74a036b24c63b292d01b393936a..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251119-\345\257\271\350\261\241,md" +++ /dev/null @@ -1,260 +0,0 @@ -### 函数的返回值 - -将需要返回的值赋予变量,最后将此变量返回(return) - -### 递归函数 - -函数在自身的函数体内调用函数 - -### 内置函数 - -### 数值处理函数 - -- parselent()函数 - - 主要将首位为数字的字符串转换成数字,如果字符串不是以数字开头,那么将返回NaN -- parseFloat()函数 - - 主要将首位为数字的字符串转换成浮点型,如果字符串不是以数字开头,那么将返回NaN -- isNaN()函数 - - 主要检验某个值是否为NaN -- isFinite()函数 - - 主要检验一个数值是否有限 - -### 字符串处理函数 - -- eval()函数 - - 计算字符串表达式的值 -- encodeURL()函数 - - 对URL字符串进行编码 - - -## 对象 - -- 对象的创建 - - let 对象名 = {属性名:属性值.....} - -### 操作对象 - -增删改查 - -## 练习 - -- 比较两个数字的大小 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251119140400368.png) - -```html - -``` - -- 获取3个数字中的最小值 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251119140458119.png) - -```html - -``` - -- 获取100以内能同时被3和5整除的正整数 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251119140544140.png) -```html - -``` - -- 判断20岁处在哪个年龄断 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251119140639486.png) -```html - -``` - -- 判断登录是否成功 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251119140734823.png) -```html - -``` - -- 判断高考生的成绩是否达到本科线 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251119140813684.png) - -```html - -``` - - -- 判断顾客是否可以享受优惠 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251119140858343.png) -```html - -``` - - -- 输出某年某月日 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251119141037476.png) - -```html - -``` - - -- 输出表格 -- 效果图 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251119141118080.png) - -```html - -``` diff --git "a/\350\265\265\345\251\211\350\250\200/20251120-js\345\206\205\351\203\250\345\257\271\350\261\241.md" "b/\350\265\265\345\251\211\350\250\200/20251120-js\345\206\205\351\203\250\345\257\271\350\261\241.md" deleted file mode 100644 index a84a40938d1b090fc225f5d26ae14883863b5877..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251120-js\345\206\205\351\203\250\345\257\271\350\261\241.md" +++ /dev/null @@ -1,152 +0,0 @@ -## Math对象 - -- Math对象方法 - - abs(x) - - 返回x的绝对值 - - ceil(x) - - 返回大于或等于x的最小整数 - - -## Date对象 - -- Date对象方法 - - Date() - - 返回系统当前的日期和时间 - - getDate() - - 从Date对象中返回一月中的某一天(1-31) - -## Date对象 - -- altKey属性 -- ctrlKey属性 -- shiftKey属性 -- button属性 -- clientX属性 - -## 练习 - -- 计算两个日期的间隔小时数 - -效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251121140349888.png) -```html - -``` - - -- 高考倒计时 - -效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251121140211603.png) -```html - -``` - - -- 判断单击的鼠标按键 - -效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251121140449613.png) -```html - -``` - - -- 生成指定位数的1-6的随机数 - -效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251121140532109.png) -```html - -``` - - -- 计算从出生到现在度过的时间 - -效果图: -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251121140301142.png) -```html - -``` diff --git "a/\350\265\265\345\251\211\350\250\200/20251121-\346\225\260\347\273\204.md" "b/\350\265\265\345\251\211\350\250\200/20251121-\346\225\260\347\273\204.md" deleted file mode 100644 index 35f90d2c8716d48e7778537890e44642cd81704d..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251121-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,104 +0,0 @@ -## Event事件 - -### 绑定方式 - -### 浏览器DOM事件 - -- 直接赋值(只能绑定一个处理者) - -```html -btn.onclick = () => console.log('点击1'); -``` - -- addEventListener(支持多个处理者,推荐) - -```html -btn.addEventListener('click', handler1); -btn.addEventListener('click', handler2); -``` - -- html内联(不推荐,耦合度高) - -```html - -``` - -### Node.js事件(EventEmitter 类) - -```html -const EventEmitter = require('events'); - -// 1. 创建事件发射器实例 -const emitter = new EventEmitter(); - -// 2. 绑定事件(on = addListener) -emitter.on('sayHello', (name) => console.log(`Hello ${name}`)); -emitter.once('sayHi', (name) => console.log(`Hi ${name}`)); // 只触发一次 - -// 3. 触发事件(emit) -emitter.emit('sayHello', 'Tom'); // 输出:Hello Tom -emitter.emit('sayHi', 'Jerry'); // 输出:Hi Jerry -emitter.emit('sayHi', 'Jerry'); // 无输出(once绑定) - -// 4. 解绑事件(off = removeListener) -emitter.off('sayHello', handler); - -// 5. 事件监听限制(默认最多10个,可修改) -emitter.setMaxListeners(20); -``` - -## 数组 - -### 定义空数组 - -空数组中是没有数组元素的,可以在定义空数组中添加数组元素 - -```html -let arr = new Arry(); -arr[0] = "HTML"; -``` - -### 指定数组长度 - -创建一个数组元素为3的数组,只能存入3个数据 - -```html -let arr = new Arry(3); -arr[0] = "HTML"; -arr[1] = "HTML"; -arr[2] = "HTML"; -``` - -### 指定数组元素 - -在定义数组的同时可以直接给出数组元素的值,数组的长度就是在括号中给出的数组元素的个数 - -```html -let arr = new Arry("张三","李四"); -``` - -### 直接定义数组 - -```html -let arr =("张三","李四"); -``` - - -### 数组对象的方法 - -|方法|说明| -|:-----|-----:| -|concat()|连接两个或多个的数组| -|pop()|删除最后一个元素| -|push()|添加一个或多个元素| -|shift()|删除第一个元素| -|splice()|删除元素,并添加新元素| -|unshift()|向头部添加一个或多个元素| -|reverse()|颠倒数组中的元素| -|sort()|对数组中的元素排序| -|slice()|从某个已有的数组中返回选定的元素| -|toSource()|代表对象的源代码| -|toString()|把数组转换为字符串| -|toLocalString()|把数组转换为本地字符串| -|join()|把数组中的所有元素放入一个字符串,元素间通过指定的分隔符进行分隔| -|valueOf()|返回数组对象的原始值| \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251124-\346\225\260\347\273\204\345\257\271\350\261\241\345\222\214String\345\257\271\350\261\241.md" "b/\350\265\265\345\251\211\350\250\200/20251124-\346\225\260\347\273\204\345\257\271\350\261\241\345\222\214String\345\257\271\350\261\241.md" deleted file mode 100644 index 3c8b956efc5baf57bffb2111a3ffad0f53d51820..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251124-\346\225\260\347\273\204\345\257\271\350\261\241\345\222\214String\345\257\271\350\261\241.md" +++ /dev/null @@ -1,297 +0,0 @@ -### 数组对象的方法 - -|方法|说明| -|:-----|-----:| -|concat()|连接两个或多个的数组| -|pop()|删除最后一个元素| -|push()|添加一个或多个元素| -|shift()|删除第一个元素| -|splice(元素下标,删除个数)|删除元素,并添加新元素| -|unshift()|向头部添加一个或多个元素| -|reverse()|颠倒数组中的元素| -|sort()|对数组中的元素排序| -|slice(下标,下标不包含)|从某个已有的数组中返回选定的元素| -|toSource()|代表对象的源代码| -|toString()|把数组转换为字符串| -|toLocalString()|把数组转换为本地字符串| -|join()|把数组中的所有元素放入一个字符串,元素间通过指定的分隔符进行分隔| -|valueOf()|返回数组对象的原始值| - - -### String对象的方法 - -### 字符 / 位置查找类(最常用) - -|方法|作用|示例| -|:-----|:-----:|-----:| -|`charAt(index)`|返回指定索引位置的字符,索引越界返回空字符串|`'abc'.charAt(1) → 'b'`| -|`charCodeAt(index)`|返回指定索引字符的 Unicode 编码,越界返回 NaN|`'a'.charCodeAt(0) → 97`| -|`indexOf(searchVal,start)`|查找子串首次出现的索引,找不到返回 -1;start 为起始查找位置|`'abcabc'.indexOf('b') → 1;indexOf('b', 2) → 4`| -|`lastIndexOf(searchVal,start)`|查找子串最后一次出现的索引,从后往前找|`'abcabc'.lastIndexOf('b') → 4`| -|`includes(searchVal,start)`|判断是否包含指定子串,返回布尔值(ES6+)|`'abc'.includes('bc') → true`| -|`startsWith(searchVal,start)`|判断是否以指定子串开头(ES6+)|`'abc'.startsWith('ab') → true`| -|`endsWith(searchVal,start)`|判断是否以指定子串结尾,length 表示取前 N 个字符判断(ES6+)|`'abc'.endsWith('bc') → true;endsWith('ab', 2) → true`| - -### 截取 / 分割类 - -|方法|作用| -|:-----|-----:| -|`slice(start, end)`|截取 [start, end) 区间的字符串;start/end 为负表示从末尾计数| -|`substring(start, end)`|类似 slice,但 start > end 会自动交换,负索引视为 0| -|`substr(start, length)`|从 start 开始,截取 length 个字符;start 为负从末尾计数(已弃用,建议用 slice)| -|`split(separator, limit)`|按分隔符分割字符串为数组,limit 限制返回数组长度| - - -### 替换 / 匹配类 - -|方法|作用| -|:-----|-----:| -|`replace(searchVal, replaceVal)`|替换匹配的子串(仅替换第一个,正则加 g 替换所有)| -|`replaceAll(searchVal, replaceVal)`|替换所有匹配的子串(ES2021+,无需正则 g)| -|`match(regexp)`|匹配正则表达式,返回匹配结果数组(无匹配返回 null)| -|`matchAll(regexp)`|匹配所有正则结果,返回迭代器(ES2020+,需正则加 g)| -|`search(regexp)`|查找正则匹配的第一个位置,找不到返回 -1(类似 indexOf 但支持正则)| - - -## 练习 - -### 获取包含星期信息的当前日期 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130155510623.png) -```html - -``` - - -### 获取数组中的指定元素 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130155617180.png) -```html - -``` - - -### 获取元素的最大值 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130155715662.png) -```html - -``` - - -### 检索书名 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130155757550.png) -```html - -``` - - -### 将一长串数字分位显示 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130155900763.png) -```html - -``` - - -### 截取QQ邮箱中的QQ号 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130155945653.png) -```html - -``` - - -### 判断邮箱格式是否正确 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130160030785.png) -```html - -``` - - -### 生成六位的随机字符串 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130160118179.png) -```html - -``` - -### 输出列车的途径站 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130160205265.png) -```html - -``` - -### 找出含有0431的手机号 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130160250523.png) - -```html - -``` - -### 手机排行榜 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130160526299.png) -```html - - - - -

      2025年手机销量排行榜(市场份额)

      -
      - - -``` diff --git "a/\350\265\265\345\251\211\350\250\200/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\350\265\265\345\251\211\350\250\200/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 9f6c249d68c00785afcf96a8ccd9564b09969ebd..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,18 +0,0 @@ -### 边界匹配符(定位字符) -|元字符|含义| -|:-----|-----:| -|`^`|匹配字符串开头| -|`$`|匹配字符串结尾| -|`\b`|匹配单词边界(非字母 / 数字 / 下划线)| -|`\B`|匹配非单词边界| - - -### String 原型方法(更常用) - -|方法|作用| -|:-----|-----:| -|`match(reg)`|匹配正则,返回匹配结果数组(全局匹配返回所有结果,无匹配返回 null)| -|`matchAll(reg)`|匹配所有结果,返回迭代器(需 g 修饰符,ES2020+)| -|`replace(reg,newStr)`|替换匹配的字符串,支持分组引用($1 引用第一个分组)| -|`search(reg)`|查找第一个匹配的位置,返回索引(无匹配返回 -1)| -|`split(reg)`|按正则规则分割字符串为数组| \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251127-\345\274\202\345\270\270\345\244\204\347\220\206.md" "b/\350\265\265\345\251\211\350\250\200/20251127-\345\274\202\345\270\270\345\244\204\347\220\206.md" deleted file mode 100644 index c6acaa3a25d015b71453d904fd842f5c57fded8e..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251127-\345\274\202\345\270\270\345\244\204\347\220\206.md" +++ /dev/null @@ -1,120 +0,0 @@ -### 异常处理的核心语法:try...catch...finally - -### 基础结构 - -```html -try { - // 可能抛出异常的代码 - } catch (exception) { - // 捕获异常并处理 - } finally { - // 无论是否抛出异常,都会执行(可选) - } -``` - -### 主动抛出异常:throw 语句 - -- 语法:throw <表达式>(表达式可以是任意类型,推荐使用 Error 对象)。 -- 作用:手动触发异常,用于自定义业务规则校验(如输入验证、权限判断)。 - - - -### 练习 - -### 练习1 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130160623380.png) -```html - -``` - - -### 练习2 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130160703031.png) -```html - -``` - - -### 综合1 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130160750490.png) -```html - - - -
      - - - - -``` - - -### 综合2 -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251130160954875.png) -```html - - 用户名: -
      - 密码: -
      - - - -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251128-\350\241\250\345\215\225\347\233\270\345\205\263\344\272\213\344\273\266.md" "b/\350\265\265\345\251\211\350\250\200/20251128-\350\241\250\345\215\225\347\233\270\345\205\263\344\272\213\344\273\266.md" deleted file mode 100644 index a804d1550cb1cbe7da53c2fec27dad2b7922c52e..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251128-\350\241\250\345\215\225\347\233\270\345\205\263\344\272\213\344\273\266.md" +++ /dev/null @@ -1,28 +0,0 @@ -### 基础通用事件(表单元素通用) - -|事件名|触发时机|核心特点| -|:-----|:-----:|-----:| -|focus|元素获得焦点(点击 / Tab 切换 / focus() 方法)|不会冒泡| -|blur|元素失去焦点(点击外部 / Tab 切换 / blur() 方法)|不会冒泡| -|focusin|元素获得焦点(同 focus)|会冒泡| -|focusout|元素失去焦点(同 blur)|会冒泡| -|click|点击元素时触发| | -|change|元素值改变且失去焦点时触发(单选 / 复选 / 下拉框则是值变立即触发)|触发时机晚于 input| - -### 输入类事件(input/textarea 专属) - -|事件名|触发时机|核心特点| -|:-----|:-----:|-----:| -|input|元素值实时变化时触发(输入 / 删除 / 粘贴 / 拖拽文本等)|触发频率高,响应最及时| -|keydown|键盘按键按下时触发| | -|keyup|键盘按键松开时触发| | -|compositionstart|开始输入法输入(如中文、日文)时触发| | -|compositionend|输入法输入完成(确认输入)时触发| | -|paste|粘贴内容到元素时触发| | - -### 表单容器事件(form 标签专属) - -|事件名|触发时机|核心特点| -|:-----|:-----:|-----:| -|submit|表单提交时触发(点击提交按钮 / 按 Enter 键 / 调用 form.submit())|可通过 preventDefault() 阻止默认跳转| -|reset|表单重置时触发(点击重置按钮 / 调用 form.reset())| | \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251201-\345\257\271\350\261\241\346\213\226\346\224\276\344\272\213\344\273\266.md" "b/\350\265\265\345\251\211\350\250\200/20251201-\345\257\271\350\261\241\346\213\226\346\224\276\344\272\213\344\273\266.md" deleted file mode 100644 index 2fe8be6b1e4151e1eb7f01026a3d8a48fbbbae30..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251201-\345\257\271\350\261\241\346\213\226\346\224\276\344\272\213\344\273\266.md" +++ /dev/null @@ -1,398 +0,0 @@ -### 核心概念 - -- 拖放元素:设置 `draggable="true"` 的元素(默认只有图片 / 链接可拖,其他元素需手动开启); -- 目标区域:接收拖放元素的区域(需监听放置相关事件); -- 核心对象:event.dataTransfer —— 用于在拖放过程中传递数据。 - -### 拖放事件分类(按阶段) - -|阶段|事件名|触发对象|作用说明| -|:-----|:-----:|:-----:|-----:| -|拖动开始|`dragstart`|被拖元素|开始拖动时触发(初始化数据)| -|拖动过程|`drag`|被拖元素|拖动中持续触发(少用)| -|经过目标|`dragover`|目标区域|拖放元素经过目标时触发(需阻止默认行为,否则无法放置)| -|进入目标|`dragenter`|目标区域|拖放元素进入目标时触发(可做样式高亮)| -|离开目标|`dragleave`|目标区域|拖放元素离开目标时触发(恢复样式)| -|放置完成|`drop`|目标区域|拖放元素放到目标时触发(核心处理逻辑)| -|拖动结束|`dragend`|被拖元素|拖放完成 / 取消时触发(收尾)| - -### 关键注意点(避坑必看) - -- `dragover `必须阻止默认行为: - - 浏览器默认不允许 “放置” 操作,`drop` 事件只有在 `dragover` 中执行 `e.preventDefault()` 才会触发; -- `drop `也要阻止默认行为: - - 若拖放的是链接 / 图片,浏览器会默认跳转,需在 `drop` 中加 `e.preventDefault()`; -- `dataTransfer `数据格式: - - 设值 / 取值需成对:setData('text/plain', 数据) ↔ getData('text/plain'); - - 仅能在 dragstart 设值,在 drop 中取值; - - - -### 练习 - -- 训练1 - -```html - - - - 示例图片 - - -``` - - -- 训练3 - -```html - - - -
      - - -``` - - -- 训练4 - -```html - - - - -
      - -``` - - -- 训练5 - -```html - - -``` - - -- 训练6 - -```html - body { - font-family: Arial, sans-serif; - max-width: 500px; - margin: 50px auto; - padding: 20px; - background-color: #f5f5f5; - } - .birth-container { - background: white; - padding: 30px; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); - } - .select-group { - margin-bottom: 20px; - } - select { - padding: 8px 12px; - font-size: 16px; - border: 1px solid #ddd; - border-radius: 4px; - width: 150px; - margin-right: 10px; - } - button { - padding: 8px 20px; - font-size: 16px; - background-color: #007bff; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - button:hover { - background-color: #0056b3; - } - #result { - margin-top: 20px; - font-size: 18px; - color: #333; - padding: 10px; - border-radius: 4px; - background-color: #e9f5ff; - display: none; - } - - - -
      -

      选择您的出生年月

      -
      - - - - - -
      - -
      -
      - - -``` - -- 训练7 - -```html - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -``` - - -- 训练9 - -```html - - - -
      拖拽这段文本到下方矩形
      -
      - - -``` - - -- 综合1 - -```html - -
      欢迎购买明日科技图书
      - - -``` - -- 综合2 - -```html - - - - - -``` -- 综合3 - -```html - - - - - -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251203-Document\345\257\271\350\261\241.md" "b/\350\265\265\345\251\211\350\250\200/20251203-Document\345\257\271\350\261\241.md" deleted file mode 100644 index 7c63ae02b213b1f62b44513c3eb084477fc8ece4..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251203-Document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,197 +0,0 @@ -## Document 对象的常用属性 - -### 文档元数据属性 - -|属性|说明|示例| -|:-----|:-----:|-----:| -|`document.title`|获取 / 设置文档标题( 标签内容)|`document.title = "新标题";`| -|`document.URL`|返回文档的完整 URL(只读)|`console.log(document.URL);`| -|`document.domain`|返回文档的域名(只读,如 example.com)|`console.log(document.domain);`| -|`document.characterSet`|获取文档的字符编码(如 UTF-8)|`console.log(document.characterSet);`| -|`document.referrer`|返回导航到当前页面的上一页 URL(只读)|`console.log(document.referrer);`| -|`document.cookie`|获取 / 设置文档的 Cookie(字符串形式)|`document.cookie = "username=zhangsan; max-age=3600";`| - - -### 文档结构属性 - -|属性|说明|示例| -|:-----|:-----:|-----:| -|`document.documentElement`|返回根元素 <html>(最常用)|`let html = document.documentElement;`| -|`document.head`|返回根元素 <head>(最常用)|`let head = document.head ;`| -|`document.body`|返回 <body> 元素(若不存在则为 null)|`let body = document.body ;`| -|`document.forms`|返回文档中所有 <form> 元素的 HTMLCollection|`let firstForm = document.forms[0];`| -|`document.images`|返回所有 <img> 元素的 HTMLCollection|`let firstImg = document.images[0];`| -|`document.links`|返回所有 <a>(带 href)和 <area> 元素的 HTMLCollection|`let firstLink = document.links[0];`| -|`document.scripts`|返回所有 <script> 元素的 HTMLCollection|`let firstScript = document.scripts[0];`| -|`document.children`|返回文档的直接子节点(通常是 <html>)|`let console.log(document.children);`| - - -### 文档结构属性 - -|属性|说明|示例| -|:-----|:-----:|-----:| -|`document.getElementById(id)`|通过 ID 获取元素(返回单个元素,无则 null)|`let box = document.getElementById("box");`| -|`document.getElementsByClassName(className)`|通过类名获取元素(返回 HTMLCollection,动态更新)|`let items = document.getElementsByClassName("item");`| -|`document.getElementsByTagName(tagName)`|通过标签名获取元素(返回 HTMLCollection,动态更新)|`let divs = document.getElementsByTagName("div");`| -|`document.querySelector(selector)`|通过 CSS 选择器获取第一个匹配的元素(返回单个元素)|`let firstItem = document.querySelector(".item");`| -|`document.querySelectorAll(selector)`|通过 CSS 选择器获取所有匹配的元素(返回 NodeList,静态)|`let allItems = document.querySelectorAll(".item");`| - -## 练习 - -- 训练1 - -```html -<body> - <input type="button"onclick="btnSwitch()" value="交互颜色"> - <script> - var Arraycolor=new Array("red","black","blue"); - var n=0; - function btnSwitch(){ - n++; - document.body.style.backgroundColor=Arraycolor[n]; - document.body.style.color=Arraycolor[n-1]; - if(n==(Arraycolor.length-1))n=0; - setTimeout("turncolors()",1000); - } - turncolors(); - </script> -</body> -``` - -- 训练2 - -```html -<body> - <script> - document.write("<b>当前页面的URL:</b>"+document.URL); - </script> -</body> -``` - -- 训练3 - -```html -<body> - <div id="box"></div> - <input type="button" value="添加文字" onclick="addText()"> - <script> - let box=document.getElementById('box'); - let span=document.createElement('span'); - let str='哈哈哈哈哈哈哈'; - box.appendChild(span); - function addText(){ - let i=0; - setInterval(()=>{ - if(i<str.length){ - span.innerHTML+=str[i]; - } - i++ - },100) - } - </script> -</body> -``` - -- 综合1 - -```html -<body> - <div class="box"> - <select id="txt1" onclick="btnSelect()"> - <option value="">请选择主题</option> - <option value="1">蓝色主题</option> - <option value="2">粉色主题</option> - </select> - </div> - <script> - document.write("李白 《行路难·其一》<p>"); - document.writeln("金樽清酒斗十千,玉盘珍馐直万钱。<br>"); - document.writeln("停杯投箸不能食,拔剑四顾心茫然。<br>"); - document.writeln("欲渡黄河冰塞川,将登太行雪满山。<br>"); - document.writeln("闲来垂钓碧溪上,忽复乘舟梦日边。<br>"); - document.writeln("行路难!行路难!多歧路,今安在?<br>"); - document.writeln("长风破浪会有时,直挂云帆济沧海。"); - - function btnSelect() { - let btns = document.querySelector("#txt1").value; - console.log(btns); - if (btns == "1") { - document.body.style.backgroundColor = "skyblue"; - } - if (btns == "2") { - document.body.style.backgroundColor = "pink"; - } - } - </script> -</body> -``` - -- 综合2 - -```html -<body> - <a href="javascript:;" id="openImg">打开图片对话框</a> - <div id="imgDialog"> - <div id="dialogContent"> - <button id="closeBtn"></button> - <img id="dialogImg" src="https://img95.699pic.com/element/40108/5475.png_860.png" alt=""> - </div> - </div> - - <script> - let openImg = document.getElementById('openImg'); - let imgDialog = document.getElementById('imgDialog'); - let closeBtn = document.getElementById('closeBtn'); - openImg.addEventListener('click', function () { - imgDialog.style.display = 'flex'; - }); - closeBtn.addEventListener('click', function () { - closeBtn.style.display = 'none'; - }) - </script> -</body> -``` - -- 综合3 - -```html -<style> - #box img { - margin: 10px; - border-radius: 8px; - } - </style> -</head> - -<body> - <div id="box"></div> - <input type="button" value="添加用户头像" onclick="btnAddpicture()"> - - <script> - const imgList = [ - 'https://ts2.tc.mm.bing.net/th/id/OIP-C.zrbAxR4E1o4ShKEqKhBsqQHaHb?cb=ucfimg2&ucfimg=1&rs=1&pid=ImgDetMain&o=7&rm=3', - 'https://pic3.zhimg.com/v2-369d46e142d828dbb05cd208463e53ac_r.jpg', - 'https://pic3.zhimg.com/v2-812360feb5539386f302770084e9a9c4_r.jpg', - 'https://ts2.tc.mm.bing.net/th/id/OIP-C.GAJl61R5J5sBg5HAYEAOIQHaHa?cb=ucfimg2&ucfimg=1&rs=1&pid=ImgDetMain&o=7&rm=3', - 'https://imgs.qiubiaoqing.com/qiubiaoqing/imgs/67c660b501a47t2O.jpg', - 'https://n.sinaimg.cn/sinakd20122/171/w896h875/20230315/ab79-bcbf0d1bb2ef7faed9facf26b5f9d9ab.jpg' - ]; - let timer = null; - let currentIndex = 0; - function btnAddpicture() { - clearInterval(timer); - currentIndex = 0; - timer = setInterval(() => { - if (currentIndex < imgList.length) { - let box = document.getElementById('box'); - let img = document.createElement('img'); - img.src = imgList[currentIndex]; - img.width = 200; - box.appendChild(img); - currentIndex++; - } - }, 200); - } - </script> -</body> -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251204-DOM\350\212\202\347\202\271\345\261\236\346\200\247.md" "b/\350\265\265\345\251\211\350\250\200/20251204-DOM\350\212\202\347\202\271\345\261\236\346\200\247.md" deleted file mode 100644 index 20729b7c0dd78f1acdb128b90503a1a245acb3c0..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251204-DOM\350\212\202\347\202\271\345\261\236\346\200\247.md" +++ /dev/null @@ -1,19 +0,0 @@ -### 节点创建方法 - -|属性|说明|示例| -|:-----|:-----:|-----:| -|`document.createElement(tagName)`|创建新的元素节点|`let newDiv = document.createElement("div");`| -|`document.createTextNode(text)`|创建文本节点|`let textNode = document.createTextNode("Hello World");`| -|`document.createAttribute(name)`|创建属性节点|`let attr = document.createAttribute("class"); attr.value = "box";`| -|`document.createElement(text)`|创建注释节点|`let comment = document.createComment("这是注释");`| - - -### 节点插入 / 删除方法 - -|属性|说明|示例| -|:-----|:-----:|-----:| -|`parent.appendChild(child)`|将子节点添加到父节点的末尾|`document.body.appendChild(newDiv);`| -|`parent.insertBefore(newNode, referenceNode)`|将新节点插入到参考节点之前|`document.body.insertBefore(newDiv, existingDiv);`| -|`parent.replaceChild(newNode, oldNode)`|替换节点|`document.body.replaceChild(newDiv, oldDiv);`| -|`parent.removeChild(child)`|删除子节点|`document.body.removeChild(oldDiv);`| -|`element.remove()`|元素自身移除(ES6+,更简洁)|`oldDiv.remove();`| \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251205-DHTML.md" "b/\350\265\265\345\251\211\350\250\200/20251205-DHTML.md" deleted file mode 100644 index 0c9f57d023a916f16b8e8b6a9c553a1b5efb7b06..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251205-DHTML.md" +++ /dev/null @@ -1,319 +0,0 @@ -### 动态样式修改 - -- 直接修改元素的行内样式(`element.style`); -- 修改元素的 CSS 类(`element.className`/`element.classList`); -- 动态创建 / 修改 CSS 样式表(`document.styleSheets`)。 - -### 动态样式修改 - -- 修改元素的文本内容(`element.innerText`/`element.textContent`); -- 修改元素的 HTML 内容(`element.innerHTML`); -- 动态创建 / 插入 / 删除 DOM 节点(`createElement`/`appendChild/remove`)。 - -### 练习 - -- 训练1 - -```html -<body> - <div id="box"> - <input type="text" id="txt" placeholder="请输入文字"> - <select name="" id="myColor"> - <option value="pink">粉色</option> - <option value="skyblue">蓝色</option> - <option value="purple">紫色</option> - <option value="blue">深蓝色</option> - </select> - <input type="button" value="添加" id="btnAdd"> - </div> - <div id="clear"></div> - <script> - let btnAdd = document.getElementById('btnAdd'); - let txt = document.getElementById('txt'); - let myColor = document.getElementById('myColor'); - let clear = document.getElementById('clear'); - btnAdd.addEventListener('click', function () { - let txtValue = txt.value; - let color = myColor.value; - - let kk = document.createElement('k'); - kk.innerText = txtValue; - kk.style.color = color; - - clear.appendChild(kk); - txt.value = ''; - }) - </script> -</body> -``` - -- 训练2 - -```html -<body> - <input type="text" id="songInput" placeholder="请输入歌名"> - <button id="btn">确认</button> - <div class="error" id="errorTip">歌名错误!</div> - - <h3 id="songTitle"></h3> - <div class="lyrics"> - 夜空中最亮的星 能否听清<br> - 那仰望的人 心底的孤独和叹息<br> - 夜空中最亮的星 能否记起<br> - 曾与我同行 消失在风里的身影 - </div> - - <script> - - const correctName = '夜空中最亮的星'; - const input = document.getElementById('songInput'); - const btn = document.getElementById('btn'); - const title = document.getElementById('songTitle'); - const error = document.getElementById('errorTip'); - - btn.onclick = function() { - const inputVal = input.value.trim(); - if (inputVal === correctName) { - title.innerText = inputVal; - error.style.display = 'none'; - input.value = ''; - } else { - error.style.display = 'block'; - title.innerText = ''; - } - }; - </script> -</body> -``` - -- 训练3 - -```html -<body> - <h3>最新电影资讯</h3> - <div id="di"> - <p>1.《金蝉脱壳》两大动作巨星联手</p> - <p>2.《啊甘正传》励志而传奇的一生</p> - <p>3.《爱乐之城》爱情与梦想的交织</p> - <p>4.《头号玩家》游戏梦想照进现实</p> - </div> - <form action=""> - <label for="">输入影片资讯编号:</label> - <input type="text" id="txt"> - <input type="button" value="删除" onclick="delNode()"> - </form> - <script> - function delNode() { - let pList = document.getElementById('di').getElementsByTagName('p'); - let num = parseInt(document.getElementById('txt').value.trim()); - if (isNaN(num) || num < 1 || num > pList.length) { - alert('请输入1-' + pList.length + '之间的有效编号!'); - return; - } - document.getElementById('di').removeChild(pList[num - 1]); - document.getElementById('txt').value = ''; - } - </script> -</body> -``` - -- 训练4 - -```html -<style> - .box{ - display: flex; - gap: 50px; - align-items: flex-start; - margin: 20px 0; - } - </style> -</head> - -<body> - <div class="box"> - <div class="category"> - <ul id="vegetableList"> - <li>黄瓜</li> - <li>茄子</li> - <li>杧果</li> - </ul> - </div> - - <div class="category"> - <ul id="fruitList"> - <li>西瓜</li> - <li>蜜橘</li> - <li>萝卜</li> - </ul> - </div> - </div> - <button onclick="removeList()">移动</button> - <script> - function removeList() { - let vegList = document.getElementById('vegetableList'); - let fruitList = document.getElementById('fruitList'); - let wrongVeg = vegList.lastElementChild; - let wrongFruit = fruitList.lastElementChild; - const cloneVeg = wrongVeg.cloneNode(true); - const cloneFruit = wrongFruit.cloneNode(true); - fruitList.appendChild(cloneVeg); - vegList.appendChild(cloneFruit); - vegList.removeChild(wrongVeg); - fruitList.removeChild(wrongFruit); - document.querySelector('button').disabled = true; - document.querySelector('button').textContent = '分类已修正'; - } - </script> -</body> -``` - -- 训练5 - -```html -<body> - <h4>在《倚天屠龙记》中,张三丰是______派的掌门?</h4> - <div id="btnSelect"> - <form action=""> - <label for="option1"> - <input type="radio" name="options" value="1">A 少林 - </label> - <label for="option2"> - <input type="radio" name="options" value="2">B 武当 - </label> - <label for="option3"> - <input type="radio" name="options" value="3">C 峨眉 - </label> - <label for="option4"> - <input type="radio" name="options" value="4">D 昆仑 - </label> - </form> - </div> - <button onclick="btnSub()">提交答案</button> - - <script> - function btnSub() { - let radioOptions = document.getElementsByName('options'); - let selectValue = null; - for (let i = 0; i < radioOptions.length; i++) { - if (radioOptions[i].checked) { - selectValue = radioOptions[i].value; - break; - } - } - if (!selectValue) { - alert('请选择一个答案'); - return; - } - if (selectValue === '2') { - alert('答案正确'); - } else { - alert('答案错误'); - } - } - </script> -</body> -``` - -- 综合1 - -```html -<body> - <div class="box" id="textBox"> - <b>一生只爱一个人</b> - </div> - <a href="javascript:void(0)" onclick="changeStyle()">将粗体字改为斜体</a> - <script> - function changeStyle() { - let container = document.getElementById('textBox'); - let htmlCotent = container.innerHTML; - let newHtml = htmlCotent.replace(/<b>(.*?)<\/b>/, '<i>$1</i>'); - container.innerHTML = newHtml; - event.target.style.pointerEvents = 'none'; - event.target.style.color = '#999'; - event.target.innerText = '将粗体字改为斜体'; - } - </script> -</body> - -``` - -- 综合2 - -```html -<body> - <select id="year" onchange="setDays()"> - <option value="2023">2023</option> - <option value="2024">2024</option> - <option value="2025">2025</option> - </select>年 - - <select id="month" onchange="setDays()"> - <option value="1">1</option> - <option value="2">2</option> - <option value="3">3</option> - <option value="4">4</option> - <option value="5">5</option> - <option value="6">6</option> - <option value="7">7</option> - <option value="8">8</option> - <option value="9">9</option> - <option value="10">10</option> - <option value="11">11</option> - <option value="12">12</option> - </select>月 - - <select id="day"></select>日 - - <script> - setDays(); - function setDays() { - let year = document.getElementById('year').value; - let month = document.getElementById('month').value; - let dayBox = document.getElementById('day'); - - dayBox.innerHTML = ''; - - let days = new Date(year, month, 0).getDate(); - - for (let i = 1; i <= days; i++) { - dayBox.innerHTML += `<option value="${i}">${i}</option>`; - } - } - </script> -</body> -``` - -- 综合3 - -```html -<body> - <select name="" id="emojiSlect" onchange="showEmoji()"> - <option value="">请选择表情</option> - <option value="smile">笑脸</option> - <option value="cry">哭泣</option> - <option value="angry">生气</option> - </select> - <div> - <img src="" alt="" id="emojiImg"> - </div> - <script> - const emojiMap = { - smile: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f600.png', - cry: 'https://img.icons8.com/fluency/96/000000/crying.png', - angry: 'https://img.icons8.com/fluency/96/000000/angry.png' - }; - function showEmoji() { - let selectEmoji = document.getElementById('emojiSlect').value; - let emojiImg = document.getElementById('emojiImg'); - if (selectEmoji) { - emojiImg.src = emojiMap[selectEmoji]; - emojiImg.alt = selectEmoji + '表情'; - } else { - emojiImg.src = ''; - emojiImg.alt = ''; - } - } - </script> -</body> -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\350\265\265\345\251\211\350\250\200/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 24953ccf675efb14c66f332f102064dc00e88a47..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,223 +0,0 @@ -- 浏览器对象模型 - - location对象 - - 属性 - - 方法 - - assign(),reload() - - navigator对象 - - screen对象 - - history对象 - - 属性 - - 方法 - - - - -## 练习 - -### 训练1 - -```html -<body> - <button onclick="playTip()">播放歌曲</button> - - <script> - function playTip(){ - alert('只有会员才能播放歌曲,请登录!'); - } - </script> -</body> -``` - -### 训练2 - -```html -<body> - <a href="" id="logoutBtn">退出登录</a> - - <script> - const logoutBtn = document.getElementById('logoutBtn'); - - logoutBtn.addEventListener('click', () => { - const isConfirm = confirm('您确定退出登录吗?'); - - if (isConfirm) { - localStorage.removeItem('token'); - localStorage.removeItem('username'); - - alert('退出登录成功!'); - window.location.href = 'login.html'; - } - }); - </script> -</body> -``` - -### 训练3 - -```html -<body> - <img src="https://picsum.photos/180/250?random=1" class="movie-img" id="movieImg" alt="流浪地球2"> - - <div class="detail-box" id="detailBox"> - <span class="close" id="closeBtn">×</span> - <h2>流浪地球2</h2> - <p>导演:郭帆</p> - <p>主演:吴京、刘德华、李雪健</p> - <p>剧情简介:影片讲述了面对太阳危机,人类成立联合政府,启动流浪地球计划,试图带着地球逃离太阳系,寻找新家园的故事。</p> - </div> - - <script> - const movieImg = document.getElementById('movieImg'); - const detailBox = document.getElementById('detailBox'); - const closeBtn = document.getElementById('closeBtn'); - - movieImg.onclick = () => { - detailBox.style.display = 'block'; - }; - - closeBtn.onclick = () => { - detailBox.style.display = 'none'; - }; - </script> -</body> -``` - - -### 训练6 - -```html -<body> - <input type="text" id="time-input" value="0" readonly> - <button id="btnStart">开始计时</button> - <button id="btnEnd">暂停</button> - - <script> - let timeInput = document.getElementById('time-input'); - let btnStart = document.getElementById('btnStart'); - let btnEnd = document.getElementById('btnEnd'); - - let time = null; - let seconds = 0; - let isRunning = false; - - btnStart.addEventListener('click', function () { - if (!isRunning) { - isRunning = true; - time = setInterval(function () { - seconds++; - timeInput.value = seconds; - }, 1000); - } - }); - - btnEnd.addEventListener('click', function () { - if (isRunning) { - clearInterval(time); - isRunning = false; - } - }) - </script> -</body> -``` - -### 综合1 - -```html -<body> - <button onclick="startQuiz()">开始答题</button> - - <script> - function startQuiz() { - let num1 = Math.floor(Math.random() * 10); - let num2 = Math.floor(Math.random() * 10); - let correct = num1 + num2; - - let answer = prompt(num1 + " + " + num2 + " = ?"); - - if (answer === null) return; - - if (Number(answer) === correct) { - alert("正确!"); - } else { - alert("错误,正确答案是:" + correct); - } - - if (confirm("是否继续答题?")) { - startQuiz(); - } else { - alert("答题结束!"); - } - } - </script> -</body> -``` - -### 综合2 - -```html -<body> - <button onclick="askQuestion()">点击答题</button> - <div class="result" id="result"></div> - - <script> - function askQuestion() { - let userAnswer = prompt("2024年奥运会在哪座城市举办?\nA.罗马\nB.北京\nC.伦敦\nD.巴黎"); - const resultDom = document.getElementById("result"); - - if (userAnswer === null) { - resultDom.textContent = "你取消了答题!"; - resultDom.className = "result"; - return; - } - - userAnswer = userAnswer.trim().toUpperCase(); - if (userAnswer === "D") { - resultDom.textContent = "回答正确!2024年奥运会在巴黎举办。"; - resultDom.className = "result correct"; - } else { - resultDom.textContent = "回答错误!正确答案是D.巴黎。"; - resultDom.className = "result wrong"; - } - } - </script> -</body> -``` - -### 综合3 - -```html -<body> - <div class="img-container" id="imgContainer"></div> - - <script> - const imgList = [ - "https://picsum.photos/200/150?random=1", - "https://picsum.photos/200/150?random=2", - "https://picsum.photos/200/150?random=3", - "https://picsum.photos/200/150?random=4", - "https://picsum.photos/200/150?random=5" - ] - - let currentIndex = 0; - const imgContainer = document.getElementById("imgContainer"); - - function showImg() { - const img = document.createElement("img"); - img.src = imgList[currentIndex]; - img.alt = `图片${currentIndex + 1}`; - - imgContainer.appendChild(img); - - currentIndex++; - if (currentIndex >= imgList.length) { - currentIndex = 0; - setTimeout(() => { - imgContainer.innerHTML = ""; - }, 0); - } - } - - setInterval(showImg, 1000); - </script> -</body> -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251210-Style\345\257\271\350\261\241.md" "b/\350\265\265\345\251\211\350\250\200/20251210-Style\345\257\271\350\261\241.md" deleted file mode 100644 index 9252dac8c28eed85c443e2e18133f73d759c8332..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251210-Style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,180 +0,0 @@ -### 常用属性 / 方法 - -|语法|说明| -|:-----|-----:| -|`element.style.`属性名|读取 / 设置单个行内样式| -|`element.style.cssText`|读取 / 设置所有行内样式(字符串格式)| -|`element.style.setProperty`(属性名, 值)|标准方法设置样式(支持连字符属性名)| -|`element.style.getPropertyValue`(属性名)|读取样式值(支持连字符)| -|`element.style.removeProperty`(属性名)|移除指定行内样式| - - -## 练习 - -### 训练1 - -```html -<body> - <div id="text" style="font-size: 12px;">哈哈哈</div> - <input type="button" value="放大" onclick="openClick()"> - <script> - let fontSize = 12; - let text = document.getElementById('text'); - function openClick() { - fontSize += 2; - text.style.fontSize = fontSize + 'px'; - text.style.color = "red"; - } - </script> -</body> -``` - -### 训练2 - -```html -<style> - div img{ - width: 300px; - height: 200px; - background-repeat: no-repeat; - background-size: cover; - } - </style> -</head> -<body> - <div id="picture"> - <img src="https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg" onmouseover="visible(this,1)" onmouseout="visible(this,0)"> - </div> - <script> - function visible(cursor,i){ - if(i===1){ - cursor.style.border='5px double blue'; - }else{ - cursor.style.border='none'; - } - } - </script> -</body> -``` - - -### 综合1 - -```html -<style> - #box { - width: 150px; - display: flex; - flex-direction: column; - gap: 2px; - } - - #box div { - width: 150px; - height: 50px; - border: 1px solid black; - border-top-right-radius: 15px; - border-bottom-right-radius: 15px; - background-color: #ffffff; - padding-left: 10px; - line-height: 50px; - cursor: pointer; - transition: width 0.3s ease; - overflow: hidden; - white-space: nowrap; - } - - #box div:hover { - width: 250px; - background-color: #f0f8ff; - border-color: gray; - } - </style> -</head> -<body> - <div id="box"> - <div>HTML/CSS讨论区</div> - <div>JavaScript讨论区</div> - <div>C语言讨论区</div> - <div>Java讨论区</div> - <div>Android讨论区</div> - <div>Python讨论区</div> - </div> - - <script> - const menuItems = document.querySelectorAll('#box div'); - - menuItems.forEach(item => { - item.addEventListener('mouseenter', () => { - item.style.width = '250px'; - item.style.color = '#409eff'; - }); - - item.addEventListener('mouseleave', () => { - item.style.width = '150px'; - item.style.color = '#000'; - }); - }); - </script> -``` - - -### 综合2 - -```html -<title>拖拽旋转图片 - - - - - 图1 - 图2 - 图3 - - - -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251211-Form\345\257\271\350\261\241.md" "b/\350\265\265\345\251\211\350\250\200/20251211-Form\345\257\271\350\261\241.md" deleted file mode 100644 index 262feb5c84ab1ca73f0823fd23a295ce7df15fcb..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251211-Form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,236 +0,0 @@ -### Form 对象的核心属性 - -|属性名|作用|实例| -|:-----|:-----:|-----:| -|`action`|获取 / 设置表单提交的 URL(默认当前页面)|`form.action = "/api/submit"`| -|`method`|获取 / 设置提交方式(GET/POST,默认 GET)|`form.method = "POST"`| -|`enctype`|获取 / 设置表单数据编码类型(仅 POST 有效)|`application/x-www-form-urlencoded(默认)`| -|`elements`|获取 / 返回表单内所有控件的集合(HTMLFormControlsCollection),可通过索引 /name 访问|`form.elements.username`| -|`name`|获取 / 获取 / 设置表单的 name 属性(document.forms[表单名] 可快速获取)|`form.name = "loginForm"`| -|`target`|获取 / 设置提交后响应的展示目标(_self/_blank/_parent/_top)|`form.target = "_blank"`| -|`autocomplete`|获取 / 获取 / 设置表单自动完成(on/off)|`form.autocomplete = "off"`| -|`noValidate`|获取 / 布尔值,是否禁用 HTML5 表单验证(替代 novalidate 属性)|`form.noValidate = true`| - - -### Form 对象的核心方法 - -|属性名|作用| -|:-----|-----:| -|`submit()`|手动触发表单提交(不会触发 onsubmit 事件,也跳过 HTML5 表单验证)| -|`reset()`|重置表单所有控件到初始值(触发 onreset 事件)| -|`checkValidity()`|校验表单所有控件是否符合 HTML5 验证规则(返回布尔值)| -|`reportValidity()`|校验表单并显示原生错误提示(返回布尔值)| - -## 练习 - -### 训练1 - -```html - - -
      - - - -``` - -### 训练2 - -```html - - - - - -``` - -### 训练3 - -```html - -

      请选择课程

      -
      -
      C语言
      -
      机械制图
      -
      单片机
      -
      自动控制
      -
      传感器
      -
      高等数学
      -
      计算机基础
      -
      Oracle数据库
      -
      商务英语
      -
      PLC设计基础
      -
      - - - -``` - -### 综合1 - -```html - -

      电影《变相怪杰》的主演是谁?

      -
      - 布拉德·皮特 - 亚当·桑德勒 - 金·凯瑞 - 杰夫·丹尼尔斯 -
      - -
      - - -``` - -### 综合2 - -```html - -
      - 看电影 - 听音乐 - 演奏乐器 - 打篮球 - 看书 - 上网 -
      - - - - - - -``` - -### 综合3 - -```html - - - - - - - - -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251212-json.md" "b/\350\265\265\345\251\211\350\250\200/20251212-json.md" deleted file mode 100644 index c68dd5d269354c50de10a479f9478e2b2d7decae..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251212-json.md" +++ /dev/null @@ -1,21 +0,0 @@ -### JSON.stringify() - -- 作用:将 JS 对象 / 数组转为 JSON 字符串; -- 用法: - -```h -const obj = {name: "张三", age: 20}; -const jsonStr = JSON.stringify(obj); -// 结果:"{"name":"张三","age":20}" -``` - -### JSON.parse() - -- 作用:将 JSON 字符串解析为 JS 对象 / 数组; -- 用法: - -```h -const jsonStr = '{"name":"张三","age":20}'; -const obj = JSON.parse(jsonStr); -// 结果:{name: "张三", age: 20}(可直接用obj.name取值) -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251215-\347\254\224\350\256\260.md" "b/\350\265\265\345\251\211\350\250\200/20251215-\347\254\224\350\256\260.md" deleted file mode 100644 index 240c949be41b1d7e5eb0d0990b3f7beb4212e51e..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251215-\347\254\224\350\256\260.md" +++ /dev/null @@ -1 +0,0 @@ -var 函数作用域 / 全局作用域 let 块级作用域({}内) const 块级作用域(专门声明常量) \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251217-Jquery.md" "b/\350\265\265\345\251\211\350\250\200/20251217-Jquery.md" deleted file mode 100644 index 958c09e43dcc7edf5522774db5a6b9019ad811b2..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251217-Jquery.md" +++ /dev/null @@ -1,130 +0,0 @@ -## jQuery 基础 - -### 引入方式 - -- 本地引入:下载 jQuery 文件(官网),通过`script`标签引入 - -```html - -``` - -- CDN 引入:使用第三方 CDN(如百度、谷歌、CDNJS) - -```html - - -``` - -### 核心语法 - -jQuery 的核心是选择器 + 方法,语法结构: - -```js -$(selector).action(); -``` - -- $:jQuery 的核心函数,等价于jQuery(可通过noConflict()释放$的占用) -- selector:选择器,用于选取 DOM 元素(兼容 CSS 选择器,且扩展了自定义选择器) -- action():jQuery 方法,用于对选中的元素执行操作 - -### 入口函数 - -解决原生 JS 中DOMContentLoaded的问题,确保 DOM 加载完成后再执行代码: - -```js -// 写法1(推荐) -$(function() { - // 代码逻辑 -}); - -// 写法2(完整写法) -$(document).ready(function() { - // 代码逻辑 -}); - -// 区别于原生 window.onload: -// window.onload 等待DOM+资源(图片、视频)加载完成,且只能写一个 -// $(document).ready() 仅等待DOM加载完成,可写多个 -``` - -### jQuery 对象与 DOM 对象的转换 - -- jQuery 对象:通过$()选取的元素,是类数组对象,只能调用 jQuery 方法,不能调用原生 DOM 方法。 -- DOM 对象:原生 JS 获取的元素(如document.getElementById()),只能调用原生方法,不能调用 jQuery 方法。 - -```js -// 1. jQuery 对象 → DOM 对象 -let $div = $('div'); -let divDom1 = $div[0]; // 方式1:通过索引 -let divDom2 = $div.get(0); // 方式2:通过get()方法 - -// 2. DOM 对象 → jQuery 对象 -let divDom = document.querySelector('div'); -let $div2 = $(divDom); // 用$()包裹即可 -``` - -## jQuery 选择器 - -### 基本选择器 - -|选择器|说明|实例| -|:-----|:-----:|-----:| -|#id|ID 选择器|$('#box')| -|.class|类选择器|$('.item')| -|element|元素选择器|$('div')| -|*|通配符选择器|$('*')| -|selector1,selector2|并集选择器|$('div, p')| - -### 层级选择器 - -|选择器|说明|实例| -|:-----|:-----:|-----:| -|ancestor descendant|后代选择器|$('ul li')| -|parent > child|子元素选择器|$('ul > li')| -|prev + next|相邻兄弟选择器|$('div + p')| -|prev ~ siblings|通用兄弟选择器|$('div ~ p')| - - -### 过滤选择器(带:) - -- 基本过滤::first、:last、:eq(index)、:gt(index)、:lt(index)、:not(selector)、:empty -- 内容过滤::contains(text)、:has(selector) -- 可见性过滤::visible、:hidden -- 属性过滤(带[]):[attr]、[attr=value]、[attr!=value]、[attr^=value](以 value 开头)、[attr$=value](以 value 结尾) -- 表单过滤::input、:text、:password、:radio、:checkbox、:submit、:reset、:button -- 表单对象属性过滤::enabled、:disabled、:checked、:selected - -## jQuery DOM 操作 - -### 元素内容操作 -|选择器|说明| -|:-----|-----:| -|`html()`|获取 / 设置元素的 HTML 内容(等价于 innerHTML)| -|`text()`|获取 / 设置元素的文本内容(等价于 innerText)| -|`val()`|获取 / 设置表单元素的 value 值| - -### 元素增删改查 - -|方法|说明| -|:-----|-----:| -|`append(content)`|向元素内部末尾添加内容| -|`prepend(content)`|向元素内部开头添加内容| -|`after(content)`|向元素外部后面添加内容| -|`before(content)`|向元素外部前面添加内容| -|`remove()`|删除元素(包括自身)| -|`empty()`|清空元素内部所有内容(保留自身)| -|`clone()`|克隆元素(参数 true 表示克隆事件)| - -### 元素遍历 - -|方法|说明| -|:-----|-----:| -|`each(function(index, element))`|遍历 jQuery 对象中的元素| -|`find(selector)`|查找子元素| -|`parent()`|获取直接父元素| -|`parents(selector)`|获取所有祖先元素| -|`children(selector)`|获取直接子元素| -|`siblings(selector)`|获取所有兄弟元素| -|`next()`|获取下一个兄弟元素| -|`prev()`|获取上一个兄弟元素| -|`eq(index)`|获取指定索引的元素| \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251218-jquery\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\350\265\265\345\251\211\350\250\200/20251218-jquery\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 96592abd4ff88cb19a19338e048caad60902f325..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251218-jquery\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,85 +0,0 @@ -## 事件绑定的核心方式 - -### 快捷绑定(最简方式) - -```js -// 1. 点击事件 -$("button").click(function() { - $(this).text("已点击"); // this 指向触发事件的DOM元素 -}); - -// 2. 鼠标悬停(hover是mouseenter+mouseleave的封装) -$("div").hover( - function() { // 鼠标进入 - $(this).css("background", "red"); - }, - function() { // 鼠标离开 - $(this).css("background", "white"); - } -); - -// 3. 输入框变化事件 -$("input").change(function() { - console.log("输入框值变为:", $(this).val()); -}); -``` - -### on () 方法 - -语法:$(selector).on(events [, selector] [, data], handler) - -- `events`:事件名(多个用空格分隔,如 "click mouseover") -- `selector`:可选,委托的子元素选择器(事件委托用) -- `data`:可选,传递给处理函数的额外数据(通过 event.data 获取) -- `handler`:事件处理函数 - -```js -// ① 绑定单个事件 -$(".box").on("click", function() { - console.log("点击了box"); -}); - -// ② 绑定多个事件 -$(".box").on("click mouseover", function(e) { - console.log("触发事件:", e.type); // e.type 输出事件类型(click/mouseover) -}); - -// ③ 传递额外数据 -$(".box").on("click", {name: "jQuery"}, function(e) { - console.log("额外数据:", e.data.name); // 输出:jQuery -}); - -// ④ 事件委托(关键:处理动态添加的元素) -// 场景:页面加载后动态添加的
    • 也能触发点击事件 -$("ul").on("click", "li", function() { - $(this).addClass("active"); -}); -``` - -## 事件触发 - -### 快捷触发(事件名 +()) - -```js -$("button").click(); // 手动触发点击事件 -$("input").change(); // 手动触发change事件 -``` - -### trigger()/triggerHandler() - -- `trigger()`:触发事件(含默认行为,如点击 a 标签跳转); -- `triggerHandler()`:仅触发事件处理函数,不触发默认行为,且只作用于第一个匹配元素。 - -```js -// 触发点击事件(含默认行为) -$("a").trigger("click"); - -// 仅触发处理函数,不跳转 -$("a").triggerHandler("click"); - -// 触发自定义事件 -$(".box").on("myEvent", function(e, msg) { - console.log("自定义事件触发:", msg); -}); -$(".box").trigger("myEvent", ["Hello jQuery"]); // 传参 -``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251219-\345\244\215\344\271\240.md" "b/\350\265\265\345\251\211\350\250\200/20251219-\345\244\215\344\271\240.md" deleted file mode 100644 index 2a5b26c068dee7145b8eeaff914677bf3c555844..0000000000000000000000000000000000000000 --- "a/\350\265\265\345\251\211\350\250\200/20251219-\345\244\215\344\271\240.md" +++ /dev/null @@ -1 +0,0 @@ -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251221163638757.png) \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251110-\347\254\224\350\256\260.md" "b/\350\265\265\351\242\226/20251110-\347\254\224\350\256\260.md" deleted file mode 100644 index 87b37687f8122c37f5fea3ac624516eb4edaf740..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251110-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,42 +0,0 @@ -## 笔记 -### javaScript的几种使用方式 - -#### 直接在页面中输入js代码 - ``` - - ``` - -#### 链入外部js文件 - ``` - - - ``` - src中链接的就是外部js文件 - -#### 引用 - ``` - - - ``` - -## 作业 -1. -```html - -``` - -2. -```html - -``` - -```js -alert('http://www.mingrisoft.com'); -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251112-\347\254\224\350\256\260.md" "b/\350\265\265\351\242\226/20251112-\347\254\224\350\256\260.md" deleted file mode 100644 index ec20f72baeef6070e0081decc8c924d0521d7c67..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251112-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,191 +0,0 @@ -## 笔记 - -### 数据类型 - -#### 基本数据类型 - - 数值型 number - - 十进制 - - 十六进制 - - 八进制 - - 浮点型数据 - - 传统记数法 - - 1.23 - - 科学计数法 - - 123e-3 - - infinity 无穷 - - NaN 非数值 - - 字符串型 string - - 单引号 - - 双引号 - - 反引号 - - 转义字符 - | 转义字符 | 描述 | 转义字符 | 描述 | - | -------- | ------------------ | -------- | ------------------------- | - | \b | 退格 | \v | 垂直制表符 | - | \n | 换行符 | \r | Enter符 | - | \t | 水平制表符,Tab空格 | `\\` | 反斜杠 | - | \f | 换页 | \OOO | 八进制整数,范围为000~777 | - | \' | 单引号 | \xHH | 十六进制整数,范围为00~FF | - | \" | 双引号 | \uhhhh | 十六进制编码的Unicode字符 | - - 要将其放在`
      `格式化文本中才会起作用
      -      - 字符串拼接 
      -  - 布尔值 boolean
      -    - true 
      -    - false
      -  - 空值 null
      -    - 空的或者不存在的值
      -  - 未定义值 undefined
      -    - 变量还没有赋值
      -
      -### 常量和变量
      -  -  常量
      -    - const
      -  - 变量
      -    - var
      -    - let
      -  - 变量命名规则
      -    - 以字母、下划线、$开头
      -    - 不能使用关键字
      -    - 区分大小写
      -    - 不能使用中文
      -    - 不能使用特殊字符
      -    - 不能使用数字开头
      -
      -### 运算符
      -
      -- 算术运算符
      -  - `+ - * / % ++ --`
      -  - 优先级
      -    - `() -> ** -> * / % -> + - -> ++ --`
      -    - 从左到右
      -    - 优先级相同,从左到右
      -    - () 优先级最高
      -- 字符串运算符 
      -  -  `+` 连接两个字符
      -  -  `+=` 连接两个字符并赋值
      -- 比较运算符
      -  - `== != > < >= <=`
      -  - `==` 比较值是否相等
      -  - `===` 比较值和类型是否相等
      -  - `!=` 比较值是否不相等
      -  - `!==` 比较值和类型是否不相等
      -  - `> < >= <=` 比较大小
      -- 赋值运算符
      -  - `=` 
      -  - `+=`
      -  - `-=`
      -  - `*=`
      -  - `/=`
      -  - `%=`
      -
      -## 作业
      -1.
      -```html
      -
      -```
      -
      -2.
      -```html
      -
      -```
      -
      -3.
      -```html
      -
      -```
      -
      -4.
      -```html
      -    

      个人信息

      - -``` - -5. -```html - -``` - -6. -```html - -``` - -7. -```html - -``` - -8. -```html - -``` - -9. -```html - -``` - -10. -```html - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251113-\347\254\224\350\256\260.md" "b/\350\265\265\351\242\226/20251113-\347\254\224\350\256\260.md" deleted file mode 100644 index 1b2c6c3083019310463ed8a3b5b6352ee732f5d3..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251113-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,129 +0,0 @@ -## 笔记 - -### 逻辑运算符 - - 逻辑与 && - - 两个都为真则为真 - - 逻辑或 || - - 其中有一个为真则为真 - - 逻辑非 ! - - !true - -### 条件运算符 - - 语法 - - `条件 ? 表达式1 : 表达式2` - - 如果条件为真,则执行表达式1,否则执行表达式2 - -### 其他运算符 -- 逗号运算符 - - `a = 1, b = 2` - - 则结果为最后一个 -- typeof 运算符 - - 判断数据类型 - | 数据类型 | 返回值 | 数据类型 | 返回值 | - | --------- | --------- | -------- | -------- | - | 数值 | number | null | objec | - | 字符串 | string | 对象 | object | - | 布尔值 | object | 函数 | function | - | undefined | undefined | ----- | ---- | -- new运算符 - - 对象实例名称=new 对象类型(参数) - - 对象实例名称=new 对象类型 - -### 表达式 -- 算术表达式 -- 逻辑表达式 -- 字符串表达式 - -## 作业 -1. -```html - -``` - -2. -```html - 请选择你的出生年月: - - - -``` - -3. -```html - -``` - -4. -```html - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251114-\347\254\224\350\256\260.md" "b/\350\265\265\351\242\226/20251114-\347\254\224\350\256\260.md" deleted file mode 100644 index 39d593493a1a1d43f2b6de90d63908a5c68972a3..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251114-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,138 +0,0 @@ -## 作业 -1. -```html - -``` - -2. -```html - -``` - -3. -```html - -``` - -4. -```html - -``` - -5. -```html - -``` - -6. -```html - -``` - -7. -```html - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251117-\345\207\275\346\225\260.md" "b/\350\265\265\351\242\226/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index 97b868481e3870fdeb821b224e8ee792b104afa5..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,51 +0,0 @@ -## 笔记 -### 函数的定义 -- 定义函数的基本语法 - - ``` - function 函数名(参数){ - 语句; - return 返回值; - } - ``` -- 函数的调用 - - 简单调用 - - 函数名(参数) - - 响应中调用 - - 放在onclick事件中 - - 通过超链接 - - href="JavaScript:函数()"; - -- 函数的参数 - - 实参 - - 形参 - -- 函数的返回值 - - 有return - - 无return - - 会返回undefined - -## 作业 -1. -```html - -``` - -2. -```html - -``` diff --git "a/\350\265\265\351\242\226/20251119-\345\207\275\346\225\260.md" "b/\350\265\265\351\242\226/20251119-\345\207\275\346\225\260.md" deleted file mode 100644 index 5a2eb25c9b9508dce898e4568d3db0ce8dd36029..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251119-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,238 +0,0 @@ -## 笔记 -### 递归函数 -- 需要两个必要函数 - - 结束递归的条件 - - 递归调用语句 - -### 内置对象 -- parselnt - - 首位为数字的字符串转化成数字 -- parseFloat - - 首位为数字的字符串转化成浮点型 -- isNaN - - 检验是否为NaN - - 返回true 或 false -- isFinite - - 检验是否有限 - - 返回true 或 false - -### 字符串处理函数 -- eval - - eval("5+7") - - 计算字符串表达式 -- encodeUrl - - 对URL进行编码 -- decodeUrl - - 对URl进行解码 - -### 匿名函数 -- 语法 - - ``` - function(参数){ - 语句 - 返回值 - } - ``` - -### 对象的概念 -- 一个贴了标签的收纳盒 -- 包含两个要素 - - 方法 - - 属性 - -### 对象的增删改查 -- 对象的创建 - - let 对象名 ={属性名:属性值} -- 对象的删除 - - delate 对象名.属性名 -- 对象的修改 - - 对象名.修改属性名=属性值 -- 对象的添加 - - 对象名['属性名']=属性值 - - 对象名.属性名=属性值 - -## 作业 -1. -```html - -``` - -2. -```html - -``` - -3. -```html - -``` - -4. -```html - -``` - -5. -```html - -``` - -6. -```html - -``` - -7. -```html - -``` - -8. -```html - -``` - -9. -```html - -``` - -10. -```html - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251120-\345\257\271\350\261\241.md" "b/\350\265\265\351\242\226/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index 9a85223f15a4b9154bedfc112407a6861eaece1a..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,156 +0,0 @@ -## 笔记 -### 一、什么是 JS 对象? -- 对象是存储数据和功能的集合,本质是 “键值对的容器”(键 = 属性名,值 = 属性值,值可以是变量、函数等),用来描述一个具体的事物(比如人、商品)。 -### 二、对象的创建方式(3 种常用) -- 1. 字面量方式(最常用) -- // 语法:let 对象名 = { 键1: 值1, 键2: 值2, ... } -- 2. 构造函数方式(创建多个同类对象) -- // 用Object构造函数 -```html - let car = new Object(); - car.brand = "特斯拉"; - car.price = 300000; - car.run = () => console.log("汽车在行驶"); -``` -- 3. 简化写法(ES6+,属性 / 方法简写) -- let name = "小红"; -- let eat = () => console.log("吃饭啦"); - -- // 属性名和变量名一致时,可简写 -```html -let person2 = { - name, // 等价于 name: name - eat // 等价于 eat: eat -}; -``` -### 三、对象的核心操作(增删改查) -- 1. 查(访问属性 / 方法) -```html -let person = { name: "小明", age: 20, sayHi: () => console.log("你好") }; -``` -- // 方式1:点语法(推荐,简洁) -```html -console.log(person.name); // 输出:小明 -person.sayHi(); // 输出:你好 -``` -```html -// 方式2:方括号语法(适合属性名带特殊字符/变量) -console.log(person["age"]); // 输出:20 -let key = "name"; -console.log(person[key]); // 输出:小明 -``` -- 2. 增(添加新属性 / 方法) -```html -let person = { name: "小明" }; -person.gender = "男"; // 添加属性 -person.study = () => console.log("学习中"); // 添加方法 -``` - -- 3. 改(修改已有属性 / 方法) -```html -let person = { name: "小明", age: 20 }; -person.age = 21; // 修改属性 -person.sayHi = () => console.log("Hi~"); // 修改方法 -``` - -- 4. 删(删除属性) -```html -let person = { name: "小明", age: 20 }; -delete person.age; // 删除age属性 -console.log(person.age); // 输出:undefined -``` - -### 四、核心概念(简单记) -- 属性:对象的 “特征”(比如 name、age)。 -- 方法:对象的 “功能”(函数类型的属性,比如 sayHi、run)。 -- 键名:属性名,默认是字符串(可省略引号,特殊字符需加引号,比如 "user-name")。 -- this:对象内部的方法中,this指向当前对象(箭头函数无 this,指向外部环境)。 - -## 作业 -1. -```html - -``` - -2. -```html - -``` - -3. -```html - - - - - - - Document - - - - - - - - -``` - -4. -```html - 请输入要生成随机数的位数:

      -

      - - -
      - -``` - -5. -```html - 周星星从出生到现在已经度过了

      - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251121-\346\225\260\347\273\204.md" "b/\350\265\265\351\242\226/20251121-\346\225\260\347\273\204.md" deleted file mode 100644 index 510b766d3c06392b51e672f737b5e71b90cd88cf..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251121-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,27 +0,0 @@ -## 笔记 -### 定义数组 - - 空数组: - ```bash - let arr = new Array();//定义一个空数组 - arr[0] = "html"; - arr[1] = "css"; - arr[2] = "js"; - ``` - - - 指定数组长度: - ```bash - let arr = new Array(3);//定义一个元素个数为3的数组 - arr[0] = 10; - arr[1] = 20; - arr[2] = 30; - ``` - - - 指定数组元素: - ```bash - let arr = new Array("张三","李四","王五");//定义一个包含3个元素的数组 - ``` - - - 直接定义数组: - ```bash - let arr = ["张三","李四","王五"];//直接定义一个包含3个元素的数组 - ``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251124-\346\225\260\347\273\204.md" "b/\350\265\265\351\242\226/20251124-\346\225\260\347\273\204.md" deleted file mode 100644 index 9479c7411c728738d8ef2b2bf03150d7b5dd3621..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251124-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,218 +0,0 @@ -## 笔记 -### String对象的创建 -``` -var newstr = new String(StringText); -``` -### 格式化字符串 - -|方法|说明| -|--|--| -|anchor|创建HTML锚| -|big|使用大号字体显示字符串| -|small|使用小号字体显示字符串| -|fontsize|使用指定的字体显示大小| -|bold|使用粗体显示字符串| -|italics|使用斜体显示字符串| - -## 作业 -1. -```html - -``` - -2. -```html - -``` - -3. -```html - -``` - -4. -```html - -``` - -5. -```html - - - - - - - Document - - - - - - - - -``` - -6. -```html - -``` - -7. -```html - - - - - -``` - -8. -```html - -``` - -9. -```html - -``` - -10. -```html - -``` - -11. -```html - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251126-\346\255\243\345\210\231.md" "b/\350\265\265\351\242\226/20251126-\346\255\243\345\210\231.md" deleted file mode 100644 index 7372938202a603a7652c51214c65497690c3a416..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251126-\346\255\243\345\210\231.md" +++ /dev/null @@ -1,14 +0,0 @@ -## 笔记 -### 正则表达式 - 正则表达式描述了一种字符串的匹配模式,即通过使用一系列普通字符串和特殊字符串来构建能够明确描述文本字符串的匹配模式,可以用来检查一个字符串是否含有某个字符串、将匹配的字符串替换或者从某个字符串中去除某个符合条件的字符串等。 - -### 正则表达式基本结构 -```js - /匹配对象的模式/ -``` - -### 正则表达式的作用 - - 1. 测试字符串的某个模式 - 2. 替换文本 - 3. 根据模式匹配 diff --git "a/\350\265\265\351\242\226/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225.md" "b/\350\265\265\351\242\226/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225.md" deleted file mode 100644 index bbd5800f0f723e1a6ddc47ee4240aa3d940ab576..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\347\250\213\345\272\217\350\260\203\350\257\225.md" +++ /dev/null @@ -1,72 +0,0 @@ -## 笔记 - - 控制台中可找问题,而不希望结果显示在控制台,用try catche - - js(Node.js等)通常不写复杂业务 - - 关注鼠标,键盘,表单常用事件 - - 对事件冒泡的阻止:event.stopPropagation(); - - 取消浏览器的”默认动作”(点击会跳转、提交按钮会刷新页面等):preventDefault(); - - onload:是在页面基础元素加载后才执行 - -## 作业 -1. -```html - - 输入1~5的数字:
      -

      - -
      - -
      - - - -``` - -2. -```html - -
      - 用户:
      - 密码:
      - -
      - - - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\350\265\265\351\242\226/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index ea0556cec8f65aa9dda391b55e58b30b2d86b0ff..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,264 +0,0 @@ -## 笔记 -### Dom事件 -1. 事件三要素 -- 事件源:触发事件的 DOM 元素(如button、input) -- 事件类型:事件的名称(如click、keydown) -- 事件处理程序:事件触发时执行的函数(回调函数) -2. 事件绑定方式 --HTML 属性绑定:(不推荐,耦合性高) -- DOM 属性绑定:element.onclick = function() {}(同一事件只能绑定一个处理函数) -- 事件监听:element.addEventListener('click', handleClick)(推荐,可绑定多个处理函数,支持事件捕获 / 冒泡 -#### 鼠标事件 - -事件名 触发时机 - -click 鼠标左键单击元素 - -dblclick 鼠标左键双击元素 - -mousedown 鼠标按下(任意键) - -mouseup 鼠标松开(任意键) - -mouseover 鼠标移入元素(含子元素) - -mouseout 鼠标移出元素(含子元素) - -mousemove 鼠标在元素内移动时(高频触发) - -contextmenu 右键单击(可用于自定义右键菜单) - -#### 事件对象属性(event): - -- clientX/clientY:鼠标相对浏览器可视区域的坐标 -- pageX/pageY:鼠标相对文档页面的坐标(含滚动距离) -- button:鼠标按键(0 = 左键,1 = 中键,2 = 右键) -#### 键盘事件 -- 与键盘操作相关的事件(通常绑定在document或表单元素上): -事件名 触发时机 - -keydown 键盘按下(持续按住会重复触发) - -keyup 键盘松开 - -keypress 按下字符键(不包括 Ctrl、Shift 等,已逐渐被弃用) - -**事件对象属性**: -- key:按下的键值(如'Enter'、'a') -- keyCode:键的 ASCII 码(如 Enter=13,已逐渐被key替代) -- ctrlKey/shiftKey/altKey:是否同时按下对应修饰键 - -#### 表单事件 - -针对表单元素(input、select、textarea等)的事件: - -事件名 触发时机 - -input 表单值发生变化时(实时触发,如输入、粘贴) - -change 表单值改变且失去焦点时(如下拉框选择后、输入框失焦) - -focus 元素获得焦点(如点击输入框) - -blur 元素失去焦点(如点击输入框外区域) - -submit 表单提交时(绑定在
      元素上) - -reset 表单重置时 - - -## 作业 -1. -```html - - - - - - - Document - - - - - -
      - - - - - -``` - -2. -```html -C -``` - -3. -```html - - - -``` - -4. -```html - -
      -
      - - -``` - -5. -```html - - - - - - -``` - -6. -```html - - - - - - - Document - - - - -
      - - -
      -
      - - - - -``` - -7. -```html - - -
      - - -
      -
      - - -
      -
      - - -
      -
      - - - -``` diff --git "a/\350\265\265\351\242\226/20251201-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\350\265\265\351\242\226/20251201-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index a7584d2ca76a0556db26800fe5d98be46717aec0..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251201-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,182 +0,0 @@ -## 笔记 - -### 核心概念 - -- 拖放元素:设置 `draggable="true"` 的元素(默认只有图片 / 链接可拖,其他元素需手动开启); -- 目标区域:接收拖放元素的区域(需监听放置相关事件); -- 核心对象:event.dataTransfer —— 用于在拖放过程中传递数据。 - -### 拖放事件分类(按阶段) - -|阶段|事件名|触发对象|作用说明| -|:-----|:-----:|:-----:|-----:| -|拖动开始|`dragstart`|被拖元素|开始拖动时触发(初始化数据)| -|拖动过程|`drag`|被拖元素|拖动中持续触发(少用)| -|经过目标|`dragover`|目标区域|拖放元素经过目标时触发(需阻止默认行为,否则无法放置)| -|进入目标|`dragenter`|目标区域|拖放元素进入目标时触发(可做样式高亮)| -|离开目标|`dragleave`|目标区域|拖放元素离开目标时触发(恢复样式)| -|放置完成|`drop`|目标区域|拖放元素放到目标时触发(核心处理逻辑)| -|拖动结束|`dragend`|被拖元素|拖放完成 / 取消时触发(收尾)| - -### 关键注意点(避坑必看) - -- `dragover `必须阻止默认行为: - - 浏览器默认不允许 “放置” 操作,`drop` 事件只有在 `dragover` 中执行 `e.preventDefault()` 才会触发; -- `drop `也要阻止默认行为: - - 若拖放的是链接 / 图片,浏览器会默认跳转,需在 `drop` 中加 `e.preventDefault()`; -- `dataTransfer `数据格式: - - 设值 / 取值需成对:setData('text/plain', 数据) ↔ getData('text/plain'); - - 仅能在 dragstart 设值,在 drop 中取值; - -## 作业 -1. -```html - - - - - - - Document - - - - -
      - -
      -
      - - - - - -``` - -2. -```html - - - - - - - Document - - - - - - - -
      - - - - - -``` - -3. -```html - - -
      欢迎购买明日科技图书
      - - - -``` - -4. -```html - - - - - -``` - -5. -```html - - - - - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251203-document\345\257\271\350\261\241.md" "b/\350\265\265\351\242\226/20251203-document\345\257\271\350\261\241.md" deleted file mode 100644 index 544a290400263152a20c7ae683ffe973af2680e2..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251203-document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,207 +0,0 @@ -## 笔记 - -### 文档元数据属性 - -|属性|说明|示例| -|:-----|:-----:|-----:| -|`document.title`|获取 / 设置文档标题( 标签内容)|`document.title = "新标题";`| -|`document.URL`|返回文档的完整 URL(只读)|`console.log(document.URL);`| -|`document.domain`|返回文档的域名(只读,如 example.com)|`console.log(document.domain);`| -|`document.characterSet`|获取文档的字符编码(如 UTF-8)|`console.log(document.characterSet);`| -|`document.referrer`|返回导航到当前页面的上一页 URL(只读)|`console.log(document.referrer);`| -|`document.cookie`|获取 / 设置文档的 Cookie(字符串形式)|`document.cookie = "username=zhangsan; max-age=3600";`| - - -### 文档结构属性 - -|属性|说明|示例| -|:-----|:-----:|-----:| -|`document.documentElement`|返回根元素 <html>(最常用)|`let html = document.documentElement;`| -|`document.head`|返回根元素 <head>(最常用)|`let head = document.head ;`| -|`document.body`|返回 <body> 元素(若不存在则为 null)|`let body = document.body ;`| -|`document.forms`|返回文档中所有 <form> 元素的 HTMLCollection|`let firstForm = document.forms[0];`| -|`document.images`|返回所有 <img> 元素的 HTMLCollection|`let firstImg = document.images[0];`| -|`document.links`|返回所有 <a>(带 href)和 <area> 元素的 HTMLCollection|`let firstLink = document.links[0];`| -|`document.scripts`|返回所有 <script> 元素的 HTMLCollection|`let firstScript = document.scripts[0];`| -|`document.children`|返回文档的直接子节点(通常是 <html>)|`let console.log(document.children);`| - - -### 文档结构属性 - -|属性|说明|示例| -|:-----|:-----:|-----:| -|`document.getElementById(id)`|通过 ID 获取元素(返回单个元素,无则 null)|`let box = document.getElementById("box");`| -|`document.getElementsByClassName(className)`|通过类名获取元素(返回 HTMLCollection,动态更新)|`let items = document.getElementsByClassName("item");`| -|`document.getElementsByTagName(tagName)`|通过标签名获取元素(返回 HTMLCollection,动态更新)|`let divs = document.getElementsByTagName("div");`| -|`document.querySelector(selector)`|通过 CSS 选择器获取第一个匹配的元素(返回单个元素)|`let firstItem = document.querySelector(".item");`| -|`document.querySelectorAll(selector)`|通过 CSS 选择器获取所有匹配的元素(返回 NodeList,静态)|`let allItems = document.querySelectorAll(".item");`| - -## 作业 - -1. -```html -<body> - - <input id="btn" type="button" value="交互颜色" onclick="switchbtn()"> - 市场部比对完毒蛙反对 - - <script> - let switchX = true; - - function switchbtn() { - let btn = document.getElementById('btn') - let backgroundx = switchX ? 'black' : 'white'; - let font = switchX ? 'white' : 'black'; - let body = document.body; - - body.style.backgroundColor = backgroundx; - body.style.color = font; - - switchX = !switchX; - } - </script> -</body> - -``` - -2. -```html - <script> - let add = document.URL; - let filename = add.split('/').pop(); - let name = filename.split('?')[0]; - document.write('文件名:'+name); - </script> -``` - -3. -```html -<body> - <input id="btn" type="button" value="添加文字" onclick="add()"> - <div id="text"></div> - <script> - let texts = '这是一段添加文字的内容'; - let ary = 0; - - function add(){ - if (ary < texts.length){ - let text = document.getElementById('text'); - text.textContent += texts[ary]; - ary++; - } - } - </script> -</body> -``` - -4. -```html -<body> - <select id="title" onchange="change()"> - <option value="">请选择主题</option> - <option value="1">绿色主题</option> - <option value="2">黑色主题</option> - <option value="3">蓝色主题</option> - <option value="0">默认主题</option> - </select> - <h2>李白《行路难·其一》</h2> - <p>金樽清酒斗十千,玉盘珍馐直万钱。</p> - <p>停杯投箸不能食,拔剑四顾心茫然。</p> - <p>欲渡黄河冰塞川,将登太行雪满山。</p> - <p>闲来垂钓碧溪上,忽复乘舟梦日边。</p> - <p>行路难!行路难!多歧路,今安在?</p> - <p>长风破浪会有时,直挂云帆济沧海。</p> - <script> - - function change(){ - let title = document.getElementById('title').value; - let body = document.body; - switch(title){ - case "1": - body.style.backgroundColor = 'green'; - body.style.color = 'white'; - break; - - case "2": - body.style.backgroundColor = 'black'; - body.style.color = 'white'; - break; - - case "3": - body.style.backgroundColor = 'blue'; - body.style.color = 'white'; - break; - - case "0": - body.style.backgroundColor = 'white'; - body.style.color = 'black'; - break; - } - } - </script> -</body> -``` - -5. -```html -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Document - - - - - 打开图片对话框 -
      -
      - -
      - - - - -``` - -6. -```html - - -
      - -
      - - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251204-\346\226\207\346\241\243\345\257\271\350\261\241.md" "b/\350\265\265\351\242\226/20251204-\346\226\207\346\241\243\345\257\271\350\261\241.md" deleted file mode 100644 index 6f77b9276cecbaf48a315aa0fce0fad89747fb1d..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251204-\346\226\207\346\241\243\345\257\271\350\261\241.md" +++ /dev/null @@ -1,383 +0,0 @@ -## 笔记 - -### 节点创建方法 - -|属性|说明|示例| -|:-----|:-----:|-----:| -|`document.createElement(tagName)`|创建新的元素节点|`let newDiv = document.createElement("div");`| -|`document.createTextNode(text)`|创建文本节点|`let textNode = document.createTextNode("Hello World");`| -|`document.createAttribute(name)`|创建属性节点|`let attr = document.createAttribute("class"); attr.value = "box";`| -|`document.createElement(text)`|创建注释节点|`let comment = document.createComment("这是注释");`| - - -### 节点插入 / 删除方法 - -|属性|说明|示例| -|:-----|:-----:|-----:| -|`parent.appendChild(child)`|将子节点添加到父节点的末尾|`document.body.appendChild(newDiv);`| -|`parent.insertBefore(newNode, referenceNode)`|将新节点插入到参考节点之前|`document.body.insertBefore(newDiv, existingDiv);`| -|`parent.replaceChild(newNode, oldNode)`|替换节点|`document.body.replaceChild(newDiv, oldDiv);`| -|`parent.removeChild(child)`|删除子节点|`document.body.removeChild(oldDiv);`| -|`element.remove()`|元素自身移除(ES6+,更简洁)|`oldDiv.remove();`| - -## 作业 -1. -```html - - - -
      -
      - -
      - - -``` - -2. -```html - - -
      -

      -
      - 看 幻想中的行星平行于天际
      - 听 你说过的话语是那么平靜
      - 说记得我的好 也能够忘掉我 迟早
      - 数不清这是第几次我也不知道 -
      - -
      - -

      -
      - 分手那天 我看着你走远
      - 所有承诺化成了句点
      - 独自守在空荡的房间
      - 爱与痛在我心里纠缠
      - 我们的爱走到了今天
      - 是不是我太自私了一点?
      - 如果爱可以重来
      - 我会为你放弃一切~ -
      - - -``` - -3. -```html - - - - - - - Document - - - - -

      最新电影资讯

      -
        -
      • 《金蝉脱壳》 两大动作巨星联手
      • -
      • 《阿甘正传》 励志而传奇的一生
      • -
      • 《爱乐之城》 爱情与梦想的交织
      • -
      • 《头号玩家》 游戏梦想照进现实
      • -
      - 输入影片资讯编号: - -
      - - - - - -``` - -4. -```html - - - - - - - Document - - - - -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 杧果
      • -
      - -
        -
      • 西瓜
      • -
      • 蜜橘
      • -
      • 萝卜
      • -
      -
      - - - - - -``` - -5. -```html - -

      在《倚天屠龙记》中,张三丰是___派的掌门?

      -
      - - - - -
      - -

      - - - -``` - -6. -```html - - 这是一个超链接 - -

      - - - -``` - -7. -```html - - -
      -
      - - - -``` - -综合1. -```html - - - 一生只爱一人
      - 将粗体改为斜体 - - - -``` - -综合2. -```html - - 年 - - 月 - - 日 - - - -``` - -综合3. -```html - - 请选择表情: - -
      - - - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251205-DHTML\347\233\270\345\257\271\345\272\224\347\232\204DOM\345\222\214window\345\257\271\350\261\241.md" "b/\350\265\265\351\242\226/20251205-DHTML\347\233\270\345\257\271\345\272\224\347\232\204DOM\345\222\214window\345\257\271\350\261\241.md" deleted file mode 100644 index 0b5fee297600a628bc09a82477662ba34511679a..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251205-DHTML\347\233\270\345\257\271\345\272\224\347\232\204DOM\345\222\214window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,238 +0,0 @@ -## 笔记 -### 动态样式修改 - -- 直接修改元素的行内样式(`element.style`); -- 修改元素的 CSS 类(`element.className`/`element.classList`); -- 动态创建 / 修改 CSS 样式表(`document.styleSheets`)。 - -### 动态样式修改 - -- 修改元素的文本内容(`element.innerText`/`element.textContent`); -- 修改元素的 HTML 内容(`element.innerHTML`); -- 动态创建 / 插入 / 删除 DOM 节点(`createElement`/`appendChild/remove`)。 - -## 作业 - -1. -```html - - - - - - -``` - -2. -```html - - 退出登录 - - - -``` - -3. -```html - - - - - -``` - -4. -```html - - - -``` - -5. -```html - - - - -``` - -6. -```html - - - - - - -``` - -综合1. -```html - - -
      - - -``` - -综合2. -```html - - -
      - - -``` - -综合3. -```html - - - -
      - - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251208-windows\345\274\271\347\252\227.md" "b/\350\265\265\351\242\226/20251208-windows\345\274\271\347\252\227.md" deleted file mode 100644 index 22ee0869fb2b02a222af2ad3f3b0a4f755bfa596..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251208-windows\345\274\271\347\252\227.md" +++ /dev/null @@ -1,54 +0,0 @@ -## 笔记 -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(); // 普通刷新`
      `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 页`
      `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/\350\265\265\351\242\226/20251210-style.md" "b/\350\265\265\351\242\226/20251210-style.md" deleted file mode 100644 index ba63e51428ce301c332d837202b14fe6c5858e27..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251210-style.md" +++ /dev/null @@ -1,101 +0,0 @@ -## 笔记 -### 常用属性 / 方法 - -|语法|说明| -|:-----|-----:| -|`element.style.`属性名|读取 / 设置单个行内样式| -|`element.style.cssText`|读取 / 设置所有行内样式(字符串格式)| -|`element.style.setProperty`(属性名, 值)|标准方法设置样式(支持连字符属性名)| -|`element.style.getPropertyValue`(属性名)|读取样式值(支持连字符)| -|`element.style.removeProperty`(属性名)|移除指定行内样式| - - -## 作业 -1. -```html - -
      我淡定我单独我
      - -
      - - -``` - -2. -```html - -
      - - -``` - -练习1. -```html - -``` - -练习2. -```html - -
      -
      -
      - - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251211-from.md" "b/\350\265\265\351\242\226/20251211-from.md" deleted file mode 100644 index 26e4e68e8256ef4380944de564e67311947f7296..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251211-from.md" +++ /dev/null @@ -1,200 +0,0 @@ -## 笔记 -### Form 对象的核心属性 - -|属性名|作用|实例| -|:-----|:-----:|-----:| -|`action`|获取 / 设置表单提交的 URL(默认当前页面)|`form.action = "/api/submit"`| -|`method`|获取 / 设置提交方式(GET/POST,默认 GET)|`form.method = "POST"`| -|`enctype`|获取 / 设置表单数据编码类型(仅 POST 有效)|`application/x-www-form-urlencoded(默认)`| -|`elements`|获取 / 返回表单内所有控件的集合(HTMLFormControlsCollection),可通过索引 /name 访问|`form.elements.username`| -|`name`|获取 / 获取 / 设置表单的 name 属性(document.forms[表单名] 可快速获取)|`form.name = "loginForm"`| -|`target`|获取 / 设置提交后响应的展示目标(_self/_blank/_parent/_top)|`form.target = "_blank"`| -|`autocomplete`|获取 / 获取 / 设置表单自动完成(on/off)|`form.autocomplete = "off"`| -|`noValidate`|获取 / 布尔值,是否禁用 HTML5 表单验证(替代 novalidate 属性)|`form.noValidate = true`| - - -### Form 对象的核心方法 - -|属性名|作用| -|:-----|-----:| -|`submit()`|手动触发表单提交(不会触发 onsubmit 事件,也跳过 HTML5 表单验证)| -|`reset()`|重置表单所有控件到初始值(触发 onreset 事件)| -|`checkValidity()`|校验表单所有控件是否符合 HTML5 验证规则(返回布尔值)| -|`reportValidity()`|校验表单并显示原生错误提示(返回布尔值)| - -## 作业 -```html -
      - - - -
      -
      - -
      - - -
      -
      -
      - 阅读 - 运动 - 烹饪 - 绘画 - 旅行 - 听音乐 - 摄影
      - 写作 - 跳舞 - 游戏 - 养花 - 手工 - 养宠物 - 摸鱼 -
      - -``` - -```html -
      -

      请选择C

      - A. - B. - C. - D. - -
      -
      - 摸鱼 - 追剧 - 听歌 - 逛街 - 发呆 - 撸猫 - 喝茶 - 爬山 - 下棋 - 练字
      - - - -
      -
      - 选择城市: - -
      - -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251212-json-fetch.md" "b/\350\265\265\351\242\226/20251212-json-fetch.md" deleted file mode 100644 index da0ca95bed9a5e829d64f5492c924c9e26d7459d..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251212-json-fetch.md" +++ /dev/null @@ -1,67 +0,0 @@ -## 笔记 -### 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 字符串必须合法(如键为双引号),否则报错 diff --git "a/\350\265\265\351\242\226/20251215-\347\254\224\350\256\260.md" "b/\350\265\265\351\242\226/20251215-\347\254\224\350\256\260.md" deleted file mode 100644 index 21e994d9075d9eb2bc80a27cec9433ab3d965f89..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251215-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,2 +0,0 @@ -## 笔记 -var 函数作用域 / 全局作用域 let 块级作用域({}内) const 块级作用域(专门声明常量) \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251217-JQuery.md" "b/\350\265\265\351\242\226/20251217-JQuery.md" deleted file mode 100644 index a04057a13f0bca2aef516b41453fb2cb9e4b69f7..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251217-JQuery.md" +++ /dev/null @@ -1,129 +0,0 @@ -## 笔记 -### 引入方式 - -- 本地引入:下载 jQuery 文件(官网),通过`script`标签引入 - -```html - -``` - -- CDN 引入:使用第三方 CDN(如百度、谷歌、CDNJS) - -```html - - -``` - -### 核心语法 - -jQuery 的核心是选择器 + 方法,语法结构: - -```js -$(selector).action(); -``` - -- $:jQuery 的核心函数,等价于jQuery(可通过noConflict()释放$的占用) -- selector:选择器,用于选取 DOM 元素(兼容 CSS 选择器,且扩展了自定义选择器) -- action():jQuery 方法,用于对选中的元素执行操作 - -### 入口函数 - -解决原生 JS 中DOMContentLoaded的问题,确保 DOM 加载完成后再执行代码: - -```js -// 写法1(推荐) -$(function() { - // 代码逻辑 -}); - -// 写法2(完整写法) -$(document).ready(function() { - // 代码逻辑 -}); - -// 区别于原生 window.onload: -// window.onload 等待DOM+资源(图片、视频)加载完成,且只能写一个 -// $(document).ready() 仅等待DOM加载完成,可写多个 -``` - -### jQuery 对象与 DOM 对象的转换 - -- jQuery 对象:通过$()选取的元素,是类数组对象,只能调用 jQuery 方法,不能调用原生 DOM 方法。 -- DOM 对象:原生 JS 获取的元素(如document.getElementById()),只能调用原生方法,不能调用 jQuery 方法。 - -```js -// 1. jQuery 对象 → DOM 对象 -let $div = $('div'); -let divDom1 = $div[0]; // 方式1:通过索引 -let divDom2 = $div.get(0); // 方式2:通过get()方法 - -// 2. DOM 对象 → jQuery 对象 -let divDom = document.querySelector('div'); -let $div2 = $(divDom); // 用$()包裹即可 -``` - -### jQuery 选择器 - -#### 基本选择器 - -|选择器|说明|实例| -|:-----|:-----:|-----:| -|#id|ID 选择器|$('#box')| -|.class|类选择器|$('.item')| -|element|元素选择器|$('div')| -|*|通配符选择器|$('*')| -|selector1,selector2|并集选择器|$('div, p')| - -#### 层级选择器 - -|选择器|说明|实例| -|:-----|:-----:|-----:| -|ancestor descendant|后代选择器|$('ul li')| -|parent > child|子元素选择器|$('ul > li')| -|prev + next|相邻兄弟选择器|$('div + p')| -|prev ~ siblings|通用兄弟选择器|$('div ~ p')| - - -#### 过滤选择器(带:) - -- 基本过滤::first、:last、:eq(index)、:gt(index)、:lt(index)、:not(selector)、:empty -- 内容过滤::contains(text)、:has(selector) -- 可见性过滤::visible、:hidden -- 属性过滤(带[]):[attr]、[attr=value]、[attr!=value]、[attr^=value](以 value 开头)、[attr$=value](以 value 结尾) -- 表单过滤::input、:text、:password、:radio、:checkbox、:submit、:reset、:button -- 表单对象属性过滤::enabled、:disabled、:checked、:selected - -### jQuery DOM 操作 - -#### 元素内容操作 -|选择器|说明| -|:-----|-----:| -|`html()`|获取 / 设置元素的 HTML 内容(等价于 innerHTML)| -|`text()`|获取 / 设置元素的文本内容(等价于 innerText)| -|`val()`|获取 / 设置表单元素的 value 值| - -#### 元素增删改查 - -|方法|说明| -|:-----|-----:| -|`append(content)`|向元素内部末尾添加内容| -|`prepend(content)`|向元素内部开头添加内容| -|`after(content)`|向元素外部后面添加内容| -|`before(content)`|向元素外部前面添加内容| -|`remove()`|删除元素(包括自身)| -|`empty()`|清空元素内部所有内容(保留自身)| -|`clone()`|克隆元素(参数 true 表示克隆事件)| - -#### 元素遍历 - -|方法|说明| -|:-----|-----:| -|`each(function(index, element))`|遍历 jQuery 对象中的元素| -|`find(selector)`|查找子元素| -|`parent()`|获取直接父元素| -|`parents(selector)`|获取所有祖先元素| -|`children(selector)`|获取直接子元素| -|`siblings(selector)`|获取所有兄弟元素| -|`next()`|获取下一个兄弟元素| -|`prev()`|获取上一个兄弟元素| -|`eq(index)`|获取指定索引的元素| \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251218-JQuery\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\350\265\265\351\242\226/20251218-JQuery\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index c36898af7119f0d34c41f96b68ee8b3e15fcb29d..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251218-JQuery\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,86 +0,0 @@ -# 笔记 -## 事件绑定的核心方式 - -### 快捷绑定(最简方式) - -```js -// 1. 点击事件 -$("button").click(function() { - $(this).text("已点击"); // this 指向触发事件的DOM元素 -}); - -// 2. 鼠标悬停(hover是mouseenter+mouseleave的封装) -$("div").hover( - function() { // 鼠标进入 - $(this).css("background", "red"); - }, - function() { // 鼠标离开 - $(this).css("background", "white"); - } -); - -// 3. 输入框变化事件 -$("input").change(function() { - console.log("输入框值变为:", $(this).val()); -}); -``` - -### on () 方法 - -语法:$(selector).on(events [, selector] [, data], handler) - -- `events`:事件名(多个用空格分隔,如 "click mouseover") -- `selector`:可选,委托的子元素选择器(事件委托用) -- `data`:可选,传递给处理函数的额外数据(通过 event.data 获取) -- `handler`:事件处理函数 - -```js -// ① 绑定单个事件 -$(".box").on("click", function() { - console.log("点击了box"); -}); - -// ② 绑定多个事件 -$(".box").on("click mouseover", function(e) { - console.log("触发事件:", e.type); // e.type 输出事件类型(click/mouseover) -}); - -// ③ 传递额外数据 -$(".box").on("click", {name: "jQuery"}, function(e) { - console.log("额外数据:", e.data.name); // 输出:jQuery -}); - -// ④ 事件委托(关键:处理动态添加的元素) -// 场景:页面加载后动态添加的
    • 也能触发点击事件 -$("ul").on("click", "li", function() { - $(this).addClass("active"); -}); -``` - -## 事件触发 - -### 快捷触发(事件名 +()) - -```js -$("button").click(); // 手动触发点击事件 -$("input").change(); // 手动触发change事件 -``` - -### trigger()/triggerHandler() - -- `trigger()`:触发事件(含默认行为,如点击 a 标签跳转); -- `triggerHandler()`:仅触发事件处理函数,不触发默认行为,且只作用于第一个匹配元素。 - -```js -// 触发点击事件(含默认行为) -$("a").trigger("click"); - -// 仅触发处理函数,不跳转 -$("a").triggerHandler("click"); - -// 触发自定义事件 -$(".box").on("myEvent", function(e, msg) { - console.log("自定义事件触发:", msg); -}); -$(".box").trigger("myEvent", ["Hello jQuery"]); // 传参 -``` \ No newline at end of file diff --git "a/\350\265\265\351\242\226/20251219-\347\254\224\350\256\260.md" "b/\350\265\265\351\242\226/20251219-\347\254\224\350\256\260.md" deleted file mode 100644 index 2a5b26c068dee7145b8eeaff914677bf3c555844..0000000000000000000000000000000000000000 --- "a/\350\265\265\351\242\226/20251219-\347\254\224\350\256\260.md" +++ /dev/null @@ -1 +0,0 @@ -![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251221163638757.png) \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251110-JS\345\255\246\344\271\240.md" "b/\351\203\221\344\274\237\346\235\260/20251110-JS\345\255\246\344\271\240.md" deleted file mode 100644 index c94bbda55504e3c5d74a6ff1358447b3fa8d6e67..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251110-JS\345\255\246\344\271\240.md" +++ /dev/null @@ -1,80 +0,0 @@ -## 笔记 - -### JavaScript 主要引入方式详解 - -#### 1. 行内引入(嵌入式) - -- 核心形式:将 JS 代码直接嵌入 HTML 标签的属性中,依赖事件触发或特定前缀执行。 - - 事件属性:如 `onclick`、`onmouseover` 等,例如 - - ```html - - ``` - -- **本质**:JS 代码与 HTML 标签完全耦合,属于最原始的引入方式 -- **特点**:仅适合单元素的极简交互,代码无法复用,维护性极差,仅临时测试或极端简单场景使用 - -#### 2. 内部引入(内嵌式) - -- 核心形式:通过` - ``` - -- **特点**:代码与 HTML 分离但同文件,无需额外请求,适合中小型单页应用的独立逻辑,复用性较低 - -- **注意**:内部引入需将` - ``` - -- **特点**:代码与 HTML 完全分离,可复用性极强,支持按需加载和模块化,是大型项目的标准引入方式 - -

      作业

      -

      第一题

      -代码: - -```bash - - - - - - Document - - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251116160908411.gif) - -

      第二题

      -代码: - -```bash - - - - - - 郑伟杰 - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251116161026913.png) \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251112-js\345\237\272\347\241\200.md" "b/\351\203\221\344\274\237\346\235\260/20251112-js\345\237\272\347\241\200.md" deleted file mode 100644 index 316a7110b50baaa2aa55b33691926c3c9b98d12e..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251112-js\345\237\272\347\241\200.md" +++ /dev/null @@ -1,114 +0,0 @@ -## 笔记 - -### JavaScript 主要引入方式详解 - -#### 1. 行内引入(嵌入式) - -- 核心形式:将 JS 代码直接嵌入 HTML 标签的属性中,依赖事件触发或特定前缀执行。 - - 事件属性:如 `onclick`、`onmouseover` 等,例如 - - ```html - - ``` - -- **本质**:JS 代码与 HTML 标签完全耦合,属于最原始的引入方式 -- **特点**:仅适合单元素的极简交互,代码无法复用,维护性极差,仅临时测试或极端简单场景使用 - -#### 2. 内部引入(内嵌式) - -- 核心形式:通过` - ``` - -- **特点**:代码与 HTML 分离但同文件,无需额外请求,适合中小型单页应用的独立逻辑,复用性较低 - -- **注意**:内部引入需将` - ``` - -- **特点**:代码与 HTML 完全分离,可复用性极强,支持按需加载和模块化,是大型项目的标准引入方式 -

      作业

      -

      第一题

      -代码: - -```bash - - - - - - Document - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251116161904373.png) - -

      第二题

      -代码: - -```bash - - - - - - Document - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251116162003211.png) -

      第三题

      -代码: - -```bash - - - - - - Document - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251116162052758.png) diff --git "a/\351\203\221\344\274\237\346\235\260/20251113-DOM\344\273\213\347\273\215.md" "b/\351\203\221\344\274\237\346\235\260/20251113-DOM\344\273\213\347\273\215.md" deleted file mode 100644 index d6e42aef48df723c533025d6b4824a0a09ad3d04..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251113-DOM\344\273\213\347\273\215.md" +++ /dev/null @@ -1,142 +0,0 @@ -## 笔记 - -### DOM 核心概念 - -DOM 全称 **Document Object Model(文档对象模型)**,一句话说透核心:**把 HTML 页面变成 JS 能识别、能操作的 “树状对象体系”,是 JS 与 HTML 交互的唯一桥梁**。 - -### DOM 到底是什么? - -- 本质是 **“结构化的节点对象集合”**: - 1. 先按 HTML 嵌套关系,形成 “树状结构”(父子、兄弟节点层级); - 2. 再把 HTML 里的标签、文字、属性等,都变成 “DOM 节点对象”; - 3. 自带一套操作 API(比如 `getElementById`),让 JS 能 “抓节点、改节点”。 -- 通俗类比:HTML 是 “建筑图纸”(只能看),DOM 是 “可交互的建筑模型”(能拆改、能调整)—— 没有 DOM,JS 就 “看不见” 页面元素,更没法操作。 - -### 核心结构:DOM 树 - -HTML 标签的嵌套关系,在 DOM 里会变成 “树状结构”,每个组成部分都是 “节点”,关键分 3 类: - -| 节点类型 | 作用 | 示例 | -| ---------------- | ------------------------------------ | --------------------------- | -| Document(树根) | 代表整个 HTML 文档,所有操作的起点 | JS 里的 `document` 对象 | -| 元素节点(树枝) | 对应 HTML 标签,是最常操作的对象 | `
      `、` - - - - -``` - -##### 对应的 DOM 树(直观层级) - -```plaintext -Document(树根) -└── html(根标签节点) - ├── head(元素节点) - │ └── title(元素节点) - │ └── "我的页面"(文本节点) - └── body(元素节点) - ├── h1(元素节点) - │ └── "标题"(文本节点) - └── select(元素节点,id="mySelect-year") - └── option(元素节点) - └── "1949年"(文本节点) -``` - -### 为什么需要 DOM? - -1. 结构化呈现:把杂乱的 HTML 标签,按层级整理成 “树”,JS 能顺着树快速找节点; -2. 可操作性:让 JS 能修改页面内容、样式、属性(比如改文字、换颜色、加标签); -3. 互动基础:支持监听点击、输入等事件(比如点击按钮弹出内容),是所有页面交互的核心。 - -### 总结 - -**DOM 是包含各类节点(文档节点、元素节点、文本节点等)的树状模型,`getElementBy`等 API 的作用是从 DOM 树中查找并返回「匹配的元素节点」,若找到则返回该元素节点对象,没找到则返回 `null`,然后对其进行对应操作。** -

      作业

      -

      第一题

      -代码: - -```bash - - - - - - Document - - -

      BMI值:

      - -

      结果:

      - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251116162728190.gif) - -

      第一题

      -代码: - -```bash - - - - - - Document - - - 选择你的年月份: - - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251116162836563.gif) diff --git "a/\351\203\221\344\274\237\346\235\260/20251114-IF\350\257\255\345\217\245\350\267\237for\345\276\252\347\216\257.md" "b/\351\203\221\344\274\237\346\235\260/20251114-IF\350\257\255\345\217\245\350\267\237for\345\276\252\347\216\257.md" deleted file mode 100644 index dc19895c656ca56708c7ea2f45a01d400d3fc2c0..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251114-IF\350\257\255\345\217\245\350\267\237for\345\276\252\347\216\257.md" +++ /dev/null @@ -1,273 +0,0 @@ -## 笔记 - -### 分支结构(根据条件执行不同代码) - -#### if 语句 - -- 作用:满足条件则执行对应代码块,否则跳过 -- 三种形式: - - 单条件:`if (条件) { 满足时执行 }` - - 双条件:`if (条件) { 满足时执行 } else { 不满足时执行 }` - - 多条件:`if (条件1) { 满足1执行 } else if (条件2) { 满足2执行 } else { 都不满足执行 }` -- 关键:条件为布尔值(true 执行,false 跳过),非布尔值会自动隐式转换(如 0→false、非 0 数字→true、空字符串→false) - -#### switch 语句 - -- 作用:根据一个变量 / 表达式的多个可能值,执行对应代码块 -- 核心规则: - - 匹配原则:`===` 严格匹配,`case`必须为一个固定值,不能为条件 - - 必须加 `break`:否则会穿透到下一个 `case` 执行 - - `default`:所有 `case` 都不匹配时执行(可选) - -### 循环结构 - -#### for 循环(已知循环次数) - -- 语法:`for (初始化变量; 循环条件; 变量更新) { 循环体 }` -- 适用场景:数组遍历、固定次数的重复操作(如循环 10 次) -- 关键:循环条件为 true 时继续执行,false 时退出;避免死循环(如条件永远为 true) - -#### while 循环(未知循环次数,先判断后执行) - -- 语法:`while (循环条件) { 循环体; 变量更新 }` -- 特点:先判断条件,不满足则一次都不执行 -- 注意:必须在循环体内更新变量,否则会陷入死循环 - -#### do...while 循环(未知循环次数,先执行后判断) - -- 语法:`do { 循环体; 变量更新 } while (循环条件)` -- 特点:至少执行一次循环体,再判断条件 -- 适用场景:需要确保代码块至少运行一次的场景(如表单验证重试) - -### 循环控制语句(调整循环执行) - -#### break - -- 作用:立即退出当前循环(或 switch 语句),后续代码不再执行 -- 场景:找到目标值后终止循环、满足特定条件时退出 - -#### continue - -- 作用:跳过当前循环的剩余代码,直接进入下一次循环判断 -- 注意:仅跳过当前次,不终止整个循环 - -### 关键注意点 - -1. 代码块 {}:单条语句可省略,但建议始终添加(提高可读性、避免语法错误) -2. 条件判断:优先使用 === 严格相等,避免 == 隐式转换导致的意外结果 -3. 死循环:循环条件必须有终止可能(如 i++、i--),否则会导致页面卡死 -4. 嵌套控制:多层循环 / 分支中,break/continue 仅作用于当前所在层级 - -

      作业

      -

      第一题

      -代码: - -```bash - - - - - - Document - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251116163321945.png) -

      第二题

      -代码: - -```BASH - - - - - - Document - - - - - -``` -

      第三题

      -代码: - -```bash - - - - - - Document - - - - - -``` - -

      第四题

      -代码: - -```bash - - - - - - Document - - - - - -``` -

      第五题

      -代码: - -```bash - - - - - - Document - - - - - -``` -

      第六题

      -代码: - -```bash - - - - - - Document - - - - - -``` -

      第七题

      -代码: - -```bash - - - - - - Document - - - - -
      - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251116164339897.png) \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251117-js\345\207\275\346\225\260.md" "b/\351\203\221\344\274\237\346\235\260/20251117-js\345\207\275\346\225\260.md" deleted file mode 100644 index 153da58f778435303c7662cb2c92b23ef6c5d2d8..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251117-js\345\207\275\346\225\260.md" +++ /dev/null @@ -1,161 +0,0 @@ -# 笔记 - -## 函数定义方式 - -JavaScript 函数有三种定义方式:**函数声明、函数表达式和构造函数**。函数声明有预解析特性,优先级高于变量声明。函数表达式是将匿名函数赋值给变量,而构造函数方式会导致代码被解析两次,影响性能。 - -### 函数声明 - -``` -javascriptCopy Codefunction getSum() { - // 函数体 -} -``` - -### 函数表达式 - -``` -javascriptCopy Codeconst sum = function() { - // 函数体 -}; -``` - -### 箭头函数(ES6) - -``` -javascriptCopy Codelet sum = () => { - // 函数体 -}; -// 如果函数体只有一行,可省略大括号和return -let double = x => x * 2; -``` - - - -## 函数调用与this指向 - -### ES5中的调用模式 - -- ‌**函数调用模式**‌:函数名(),this指向window -- ‌**方法调用模式**‌:对象.方法名(),this指向对象 -- ‌**构造器调用**‌:new 构造函数名(),this指向实例化对象 -- ‌**间接调用**‌:使用call/apply改变this指向 - -### 箭头函数的this - -箭头函数的this在定义时确定,与调用无关,始终指向定义时的上下文。 - - - -## 函数参数处理 - -### 默认值参数 - -``` -javascriptCopy Codefunction greet(name = 'Guest') { - console.log(`Hello, ${name}`); -} -``` - -### 剩余参数 - -``` -javascriptCopy Codefunction sum(...numbers) { - return numbers.reduce((acc, curr) => acc + curr, 0); -} -``` - -### 解构参数 - -``` -javascriptCopy Codefunction printPerson({name, age}) { - console.log(`${name} is ${age} years old`); -} -``` - - - -## 作用域与闭包 - -### 变量作用域 - -- ‌**全局变量**‌:函数内外都可访问4 -- ‌**局部变量**‌:仅函数内部可访问4 -- 局部变量与全局变量同名时,优先使用局部变量4 - -### 闭包 - -函数可以访问并记住其词法作用域,即使函数在其作用域外执行。 - - - -## 高阶函数 - -### 常见高阶函数 - -- ‌**map**‌:对数组每个元素执行操作 -- ‌**reduce**‌:将数组元素累积为单个值 -- ‌**filter**‌:筛选满足条件的元素 -- ‌**sort**‌:数组排序 - - - -## 函数调用上下文控制 - -### call、apply和bind - -- ‌**call**‌:立即调用函数,改变this指向,参数逐个传递 -- ‌**apply**‌:立即调用函数,改变this指向,参数以数组传递 -- ‌**bind**‌:返回新函数,不立即调用,永久绑定this - -# 作业 -第一题 -![](https://gitee.com/zhengwejie/pic/raw/master/20251123173143068.png) -代码: -```bash - - - - - - Document - - - - - -``` - -第二题 -![](https://gitee.com/zhengwejie/pic/raw/master/20251123173253878.gif) -代码: -```bash - - - - - - - Document - - - -
      - -

      结果

      - - -``` \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251119-js\345\257\271\350\261\241.md" "b/\351\203\221\344\274\237\346\235\260/20251119-js\345\257\271\350\261\241.md" deleted file mode 100644 index fbec97f01a7dde0da13de17b7d9e0f38f790a119..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251119-js\345\257\271\350\261\241.md" +++ /dev/null @@ -1,331 +0,0 @@ -# JavaScript 函数类型笔记 - -### 嵌套函数 - -嵌套函数是在一个函数内部定义的另一个函数,内部函数只能在外部函数的作用域内访问2。这种结构允许内部函数轻松获取外部函数的参数和全局变量,但过度使用会降低程序可读性。内部函数可以访问外层函数的变量和参数,而外层函数则不能访问内部函数的变量。 - -``` -javascriptCopy Codefunction outer(a, b) { - function inner() { - return a + b; // 可以访问外部函数的参数 - } - return inner(); -} -``` - -### 递归函数 - -递归函数是指在函数内部直接或间接调用自身的函数23。为了防止死循环,必须设置递归结束条件并设计自加运算变量记录调用次数2。递归在处理树形结构数据(如DOM)时特别有价值。 - -``` -javascriptCopy Codefunction factorial(n) { - if (n === 1) { - return n; // 结束条件 - } else { - return n * factorial(--n); // 递归调用 - } -} -``` - -### 内置函数 - -JavaScript内置函数分为ECMAScript内置函数和宿主函数3。内置函数如`Number()`、`parseInt()`等,宿主函数包括BOM和DOM提供的`alert()`、`prompt()`等3。函数按来源可分为系统函数和自定义函数4。 - -常见内置函数包括: - -- `escape()`和`unescape()`:字符串编码解码3 -- `Number()`:转换为数值类型3 -- `parseInt()`/`parseFloat()`:字符串转数值4 - -### 匿名函数 - -匿名函数没有函数名,通常用作回调函数或立即执行函数3。可以通过函数的指针来调用,把一个函数的指针作为另一个函数的参数3。 - -``` -javascriptCopy Code// 作为回调函数 -function calculate(a, b, func) { - return func(a, b); -} - -// 立即执行函数 -(function(a, b) { - return a * b; -})(2, 3); -``` - -### 函数定义方式 - -JavaScript有三种定义函数的方法:`function`命令声明、函数表达式和`Function()`构造函数5。函数表达式定义时,`function`命令后面不带有函数名,如果加上函数名,该函数名只在函数体内部有效5。 - -### 注意 - -- 递归函数必须包含结束条件,否则会导致死循环 -- 嵌套函数虽然功能强大,但过度使用会降低可读性 -- 函数提升会将函数整体提升到所在作用域的最前面 -- 闭包可能引起内存泄漏,需要谨慎使用 -# 作业 -### 第一题: -![](https://gitee.com/zhengwejie/pic/raw/master/20251123173705007.gif) -代码: -```bash - - - - - - - Document - - - - - -
      - -
      -

      结果:

      - - - - -``` - ### 第二题: - ![](https://gitee.com/zhengwejie/pic/raw/master/20251123173859255.png) - - 代码: - ```BASH - - - - - - Document - - - - - -``` -### 第三题: -![](https://gitee.com/zhengwejie/pic/raw/master/20251123174006346.png) - -代码: -```bash - - - - - - Document - - -

      总和:

      -

      结果:

      - - - -``` -### 第四题 -![](https://gitee.com/zhengwejie/pic/raw/master/20251123174102526.png) -代码: -```bash - - - - - - Document - - -

      总分:

      -

      结果:

      - - - -``` -### 第五题 -![](https://gitee.com/zhengwejie/pic/raw/master/20251123174232892.gif) - -代码: -```bash - - - - - - Document - - -

      微信号:

      -

      密码:

      -
      - -
      -

      结果:

      - - - -``` -### 第六题 -![](https://gitee.com/zhengwejie/pic/raw/master/20251123175359292.gif) -代码: -```BASH - - - - - - - Document - - - -

      请输入:

      -

      -

      结果:

      -
      -

      输出能被5和3整除的数:

      -

      - - - - - -``` -### 斐波那契 -![](https://gitee.com/zhengwejie/pic/raw/master/20251123175550061.gif) -代码: -```bash - - - - - - - Document - - - - - - - -``` - diff --git "a/\351\203\221\344\274\237\346\235\260/20251120-js\345\206\205\351\203\250\345\257\271\350\261\241.md" "b/\351\203\221\344\274\237\346\235\260/20251120-js\345\206\205\351\203\250\345\257\271\350\261\241.md" deleted file mode 100644 index c60d511638efe05a86d90475fa16eda28ec2f3b2..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251120-js\345\206\205\351\203\250\345\257\271\350\261\241.md" +++ /dev/null @@ -1,237 +0,0 @@ -# JavaScript 对象笔记 - - - -#### 对象特征 - -- ‌**无序性**‌:对象是一系列无序的相关数据集合,与数组的有序性形成对比 -- ‌**键值对结构**‌:对象由属性名和属性值组成,采用键值对的形式存储数据 -- ‌**灵活性**‌:属性值可以是任意数据类型,包括基本值、对象或函数 - - - -#### 对象创建方式 - -##### 对象字面量 - -使用花括号 `{}` 创建对象是最简单的方式1: - -``` -javascriptCopy Codelet person = { - name: '小明', - age: 18, - stature: 185, - gender: '男' -}; -``` - -#### 构造函数方式 - -使用 `new Object()` 创建对象: - -``` -javascriptCopy Code - - - -let emptyObject = new Object(); // 创建空对象 -``` - -#### Object.create() 方法 - -通过指定原型对象来创建新对象: - -``` -javascriptCopy Code - - - -let emptyObject = Object.create(Object.prototype); -``` - -#### 对象属性操作 - -##### 属性访问 - -有两种方式访问对象属性: - -‌**点运算符**‌(适用于合法的标识符属性名): - -``` -javascriptCopy Codeperson.name // '小明' -person.age // 18 -``` - -‌**方括号运算符**‌(适用于包含特殊字符的属性名): - -``` -javascriptCopy Codeperson['name'] // '小明' -person['first-name'] // 可访问带连字符的属性名 -``` - -#### 属性类型区分 - -- ‌**自有属性**‌:直接在对象中定义的属性 -- ‌**继承属性**‌:在对象的原型对象中定义的属性 - -#### 动态添加属性 - -可以在对象创建后动态添加新属性: - -``` -javascriptCopy Codelet user = {}; -user.name = '小明'; -user['age'] = 18; -``` - -### 对象类型 - -#### 对象遍历 - -掌握如何遍历对象的属性和方法是使用对象的重要技能1。 - -#### 数据类型区分 - -对象属于‌**复杂数据类型**‌,与基本数据类型在存储方式上有本质区别3: - -- 基本数据类型直接存储在栈中 -- 复杂数据类型将数据存储在堆中,栈中存储堆空间的地址引用3 - -#### 内置对象:JavaScript 提供了多个有用的内置对象 - -#### Math 对象:提供数学运算相关的常量和函数1。 - -#### Array 对象:用于处理数组数据,提供丰富的数组操作方法1。 - -#### String 对象 - -字符串对象提供了处理文本数据的方法: - -- ‌**基本包装类型**‌:字符串在需要时会自动转换为 String 对象 -- ‌**字符串特点**‌:了解字符串的不可变性等特征 -- ‌**常用方法**‌:掌握字符串的截取、查找、替换等操作 -# 作业 -### 第一题: -![](https://gitee.com/zhengwejie/pic/raw/master/20251123175915587.png) -代码: -```bash - - - - - - Document - - - - - -``` -### 第二题 -![](https://gitee.com/zhengwejie/pic/raw/master/20251123180002428.png) -代码: -```bash - - - - - - Document - - - - - -``` -### 第三题 -![](https://gitee.com/zhengwejie/pic/raw/master/20251123180123274.gif) -代码: -```bash - - - - - - - Document - - - - - - - - -``` -### 第四题 -![](https://gitee.com/zhengwejie/pic/raw/master/20251123180226739.gif) -代码: -```bash - - - - - - Document - - - -

      输出结果:

      - - - -``` \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251121-js\345\206\205\351\203\250\345\257\271\350\261\241.md" "b/\351\203\221\344\274\237\346\235\260/20251121-js\345\206\205\351\203\250\345\257\271\350\261\241.md" deleted file mode 100644 index 461ff26c831be312f0fc9b50524230db747b5878..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251121-js\345\206\205\351\203\250\345\257\271\350\261\241.md" +++ /dev/null @@ -1,77 +0,0 @@ -# JavaScript 数组笔记 - -### 数组基础概念 - -数组是存储数据的有序集合,可以包含任意数据类型。每个数据称为数组元素,元素的位置称为索引,索引从0开始计数。JavaScript数组长度可以动态改变,且同一个数组中可以存储不同类型的数据。 - -#### 创建数组 - -数组有两种基本创建方式:字面量方式和构造函数方式23。 - -``` -javascriptCopy Code// 字面量方式 -let arr1 = ['哈哈', '你好', 1, 2, {'name':'哈哈'}]; -let arr2 = []; // 空数组 -let arr3 = [1, 2, 3]; // 有内容的数组 - -// 构造函数方式 -let arr4 = new Array('哈哈', 1, 24); -let arr5 = new Array(); // 空数组 -let arr6 = new Array(10); // 长度为10的数组 -``` - -#### 数组索引与访问 - -通过索引可以访问和修改数组元素2。 - -```html -javascriptCopy Codelet arr = ['white', 'black', 'red', 'green']; -console.log(arr[0]); // 输出: white -arr[0] = "black"; // 修改第一个元素 -console.log(arr); // 输出: black,black,red,green -``` - -### 数组常用操作方法 - -#### 添加/删除元素 - -‌**尾部操作:**‌ - -- `push()`:在末尾添加元素,返回新长度13 -- `pop()`:删除末尾元素,返回被删除元素3 - -```html -javascriptCopy Codelet arr = ['white', 'black', 'red', 'green']; -console.log(arr.push("blue")); // 输出数字5 -console.log(arr); // 输出: white,black,red,green,blue -``` - -‌**头部操作:**‌ - -- `unshift()`:在开头添加元素,返回新长度13 -- `shift()`:删除开头元素,返回被删除元素3 - -```html -javascriptCopy Codelet arr = ['white', 'black', 'red', 'green']; -console.log(arr.unshift("blue")); // 输出数字5 -console.log(arr); // 输出: blue,white,black,red,green -``` - -### 数组修改与操作 - -‌**splice()方法**‌:功能强大的数组修改方法3 - -```html -javascriptCopy Codelet arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; - -// 删除元素 -let result = arr.splice(2, 4); // result = [3, 4, 5, 6] -// arr = [1, 2, 7, 8, 9] - -// 替换元素 -arr.splice(1, 1, '哈哈'); // 直接替换一个元素 - -// 删除并添加元素 -arr.splice(1, 2, '哈哈', '哈哈', '呵呵'); -``` - diff --git "a/\351\203\221\344\274\237\346\235\260/20251124-js\346\225\260\347\273\204.md" "b/\351\203\221\344\274\237\346\235\260/20251124-js\346\225\260\347\273\204.md" deleted file mode 100644 index 3fb1c739e9c23c9a3c2fab780ee0a7c870cb78d8..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251124-js\346\225\260\347\273\204.md" +++ /dev/null @@ -1,272 +0,0 @@ -## JavaScript String 对象核心笔记 - -#### 1. 基础特性 - -- 不可变性:所有修改操作返回新字符串 -- 字面量定义:`let str = "Hello";` -- 构造函数:`let str = new String("Hello");`(不推荐) - -#### 2. 常用方法 - -``` -javascriptCopy Code// 大小写转换 -str.toUpperCase() // "HELLO" -str.toLowerCase() // "hello" - -// 查找与替换 -str.indexOf("e") // 1 -str.includes("e") // true -str.replace("e", "a") // "Hallo" - -// 分割与连接 -str.split("") // ["H", "e", "l", "l", "o"] -str.concat(" World") // "Hello World" - -// 修剪 -" hello ".trim() // "hello" -``` - -#### 3. 模板字符串 - -``` -javascriptCopy Codelet name = "Alice"; -let age = 25; -`Name: ${name}, Age: ${age}` // "Name: Alice, Age: 25" -``` - -#### 4. 常用属性 - -``` -javascriptCopy Codestr.length // 字符串长度 -str.charCodeAt(0) // 字符Unicode码 -str.codePointAt(0) // 代理对正确编码 - -注意:优先使用字面量定义字符串,避免使用`String`构造函数。 -## 作业 -### 第一题 -```BASH - - - - - - Document - - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130182535797.gif) -## 第二题 -```bash - - - - - - Document - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130182951064.png) -### 第三题 -```bash - - - - - - Document - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130183326681.png) -### 第四题 -```bash - - - - - - Document - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130183424600.png) -### 第五题 -```bash - - - - - - Document - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130183911481.png) -### 第六题 -```bash - - - - - - Document - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130184006405.png) -### 第七题 -```BASH - - - - - - Document - - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130184050533.png) -### 第八题 -```bash - - - - - - Document - - -

      请输入邮箱

      -

      -

      - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130184328892.gif) \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251126=js\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.MD" "b/\351\203\221\344\274\237\346\235\260/20251126=js\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.MD" deleted file mode 100644 index d5535d649b461b737a57713faed298b411de37f2..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251126=js\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.MD" +++ /dev/null @@ -1,61 +0,0 @@ -# JavaScript正则表达式笔记 - -正则表达式是用来匹配和处理文本的强大工具,在JavaScript中主要用于表单验证、搜索替换和字符串提取等场景。 - -### 创建方式 - -``` -javascriptCopy Code// 字面量方式(推荐) -const reg1 = /pattern/flags; - -// 构造函数方式(支持动态构建) -const reg2 = new RegExp('pattern', 'flags'); -``` - -### 常用修饰符 - -- ‌**i**‌:忽略大小写2 -- ‌**g**‌:全局匹配2 -- ‌**m**‌:多行匹配2 - -### 核心元字符 - -| 字符 | 含义 | 示例 | -| ---- | ----------------------------- | ------------------------ | -| `\d` | 数字(0-9)3 | `/\d/` 匹配"a1"中的1 | -| `\w` | 单词字符(字母/数字/下划线)3 | `/\w/` 匹配"$5"中的5 | -| `\s` | 空白字符(空格/制表符等)3 | `/\s/` 匹配"a b"中的空格 | -| `.` | 任意字符(除换行符)3 | `/./` 匹配"a"中的a | - -### 边界符 - -- ‌**`^`**‌:匹配字符串开始1 -- ‌**`$`**‌:匹配字符串结束1 -- ‌**`\b`**‌:单词边界3 - -### 常用量词 - -- ‌**`\*`**‌:0次或多次 -- ‌**`+`**‌:1次或多次 -- ‌**`?`**‌:0次或1次 -- ‌**`{n}`**‌:精确n次 - -### 实际应用 - -``` -javascriptCopy Code// 邮箱验证 -const emailReg = /a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; - -// 手机号验证 -const phoneReg = /:ml-citation{ref="1,3" data="citationList"}-9]\d{9}$/; - -// 表单验证 -const usernameReg = /a-zA-Z0-9_]{4,16}$/; -``` - -### 常用方法 - -- `test()`:检测是否匹配,返回布尔值1 -- `exec()`:执行搜索,返回匹配结果1 -- `match()`:字符串方法,返回匹配结果 -- `replace()`:字符串替换 \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251127-js\345\274\202\345\270\270\345\244\204\347\220\206.md" "b/\351\203\221\344\274\237\346\235\260/20251127-js\345\274\202\345\270\270\345\244\204\347\220\206.md" deleted file mode 100644 index 6f22c127c17e84e1b96c319ebdd7297967e6d572..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251127-js\345\274\202\345\270\270\345\244\204\347\220\206.md" +++ /dev/null @@ -1,105 +0,0 @@ -# JS异常处理与程序调试笔记 - -### 一、异常处理基础 - -#### 1. 常见异常类型 - -- ‌**语法错误**‌:代码不符合JS语法规则(如漏写`()`、`{}`)1 -- ‌**运行时错误**‌:代码逻辑错误导致程序无法继续执行(如访问未定义变量)1 -- ‌**引用错误**‌:访问不存在的对象属性或变量(如`console.log(undefinedVar)`)1 -- ‌**类型错误**‌:操作类型不匹配(如对`null`调用方法)1 -- ‌**逻辑错误**‌:程序能运行但结果错误(如条件判断写反)1 - -#### 2. 异常处理机制 - -#### try-catch-finally - -``` -javascriptCopy Codetry { - // 可能出错的代码 - riskyOperation(); -} catch (error) { - // 处理错误 - console.error("捕获到错误:", error.message); -} finally { - // 无论是否出错都会执行 - console.log("清理资源"); -} -``` - -- ‌**`error`对象属性**‌:`name`(错误类型)、`message`(描述)、`stack`(调用栈)1 -- 嵌套`try-catch`时,优先匹配最近的`catch`块1 - -##### throw 自定义异常 - -``` -javascriptCopy Codefunction validateAge(age) { - if (age < 0) throw new Error("年龄不能为负数"); -} -``` - -#### 3. 错误边界(Error Boundaries) - -- 在React等框架中,可通过组件生命周期方法捕获子组件错误: - - ``` - javascriptCopy Codeclass ErrorBoundary extends React.Component { - componentDidCatch(error, info) { - console.error("组件错误:", error, info); - } - render() { - return this.props.children; - } - } - ``` - -### 二、程序调试技巧 - -#### 1. 浏览器开发者工具 - -##### 断点调试 - -1. 在代码行号左侧点击设置断点 -2. 使用调试面板: - - ‌**继续执行**‌(F8) - - ‌**单步跳过**‌(F10) - - ‌**单步进入**‌(F11) - - ‌**查看调用栈**‌(Call Stack) - - ‌**监视表达式**‌(Watch) - -##### 控制台调试 - -- `console.log()`:输出变量值 -- `console.error()`:高亮显示错误 -- `console.warn()`:警告信息 -- `console.table()`:表格化显示数据 -- `console.time()`/`timeEnd()`:性能测量 - -#### 2. 常见调试场景 - -##### 变量未定义 - -- 现象:`ReferenceError: x is not defined` -- 解决:检查变量声明(`let`/`const`/`var`)和作用域1 - -##### 函数未执行 - -- 现象:预期输出未出现 -- 解决: - - 检查函数是否被调用 - - 验证回调函数是否正确传递 - - 使用`debugger`语句强制暂停 - -##### 异步问题 - -- 现象:回调未按预期执行 -- 解决: - - 使用`Promise.then()`/`await`替代回调 - - 在`setTimeout`/`setInterval`中验证回调函数 - -#### 3. 调试技巧 - -- ‌**二分法**‌:注释掉一半代码,逐步缩小问题范围 -- ‌**日志法**‌:在关键位置添加`console.log`输出流程 -- ‌**模拟数据**‌:使用`mock`数据隔离问题 -- ‌**版本对比**‌:通过Git对比代码变更 \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251128-js\344\272\213\344\273\266.md" "b/\351\203\221\344\274\237\346\235\260/20251128-js\344\272\213\344\273\266.md" deleted file mode 100644 index 8f2ec0aff1f56fda2b603a5c148e2ab0a01403ce..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251128-js\344\272\213\344\273\266.md" +++ /dev/null @@ -1,319 +0,0 @@ -# JavaScript 事件处理笔记 - -### 一、事件基础 - -#### 1. 事件类型 - -- ‌**用户交互**‌:`click`(点击)、`mouseover`(鼠标悬停)、`keydown`(按键) -- ‌**页面变化**‌:`load`(页面加载完成)、`resize`(窗口大小变化) -- ‌**表单相关**‌:`submit`(表单提交)、`input`(输入内容变化) - -#### 2. 事件流 - -- ‌**冒泡**‌:从目标元素向上传播到 `document`(如点击 `div` 里的 `button`,`div` 的点击事件也会触发) -- ‌**捕获**‌:从 `document` 向下传播到目标元素(较少使用) - - - -### 二、事件绑定方式 - -#### 1. HTML 内联式 - -``` -htmlCopy Code - - - - -``` - -‌**缺点**‌:HTML 和 JS 混合,难以维护。 - -#### 2. DOM 属性绑定 - -``` -javascriptCopy Codeconst button = document.querySelector('button'); -button.onclick = function() { - alert('点击了!'); -}; -``` - -‌**缺点**‌:只能绑定一个事件,后绑定的会覆盖之前的。 - -#### 3. `addEventListener`(☆) - -``` -javascriptCopy Codeconst button = document.querySelector('button'); -button.addEventListener('click', function() { - alert('点击了!'); -}); -``` - -‌**优点**‌: - -- 可绑定多个事件 -- 支持事件流阶段(`'capture'` 或 `'bubble'`) -- 可移除事件(`removeEventListener`) - -#### 4. 移除事件监听 - -``` -javascriptCopy Codeconst handler = function() { - alert('点击了!'); -}; -button.addEventListener('click', handler); -// 移除时需引用相同的函数 -button.removeEventListener('click', handler); - -``` - -### 三、事件对象(`event`) - -事件触发时自动传入回调函数,包含事件信息: - -``` -javascriptCopy Codebutton.addEventListener('click', function(event) { - console.log(event.target); // 触发事件的元素 - console.log(event.type); // 事件类型(如 'click') -}); -``` - -#### 常用属性 - -- `event.preventDefault()`:阻止默认行为(如阻止表单提交) -- `event.stopPropagation()`:阻止事件冒泡 -- `event.target`:触发事件的元素 -- `event.currentTarget`:绑定事件的元素(可能与 `event.target` 不同) - - - -### 四、事件委托 - -利用事件冒泡,将事件绑定到父元素,通过 `event.target` 判断具体元素: - -``` -javascriptCopy Codedocument.querySelector('ul').addEventListener('click', function(event) { - if (event.target.tagName === 'LI') { - console.log('点击了列表项:', event.target.textContent); - } -}); -``` - -‌**优点**‌:减少事件绑定,动态添加元素时无需重新绑定。 - - - -### 五、常用事件处理 - -#### 1. 表单验证 - -``` -javascriptCopy Codeconst form = document.querySelector('form'); -form.addEventListener('submit', function(event) { - event.preventDefault(); // 阻止表单默认提交 - const email = document.querySelector('input[type="email"]').value; - if (!email.includes('@')) { - alert('请输入有效的邮箱!'); - } else { - // 提交逻辑 - } -}); -``` - -#### 2. 动态元素事件 - -``` -javascriptCopy Code// 通过事件委托处理动态添加的元素 -document.querySelector('div').addEventListener('click', function(event) { - if (event.target.classList.contains('dynamic-btn')) { - console.log('动态按钮被点击了!'); - } -}); -``` - -#### 3. 键盘事件 - -``` -javascriptCopy Codedocument.addEventListener('keydown', function(event) { - if (event.key === 'Enter') { - console.log('回车键被按下!'); - } -}); - -``` - -### 六、简单示例 - -``` -htmlCopy Code - -``` - -> ‌**提示**‌:优先使用 `addEventListener`,避免直接修改 DOM 属性(如 `onclick`)。 - -## 作业 -### 第一题 -插入回车键响应式 -```BASH - - - - - - Document - - -

      请输入邮箱

      -

      -

      - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130184617464.gif) -### 第二题 -```BASH - - - - - - Document - - - -
      -
      - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130184753681.gif) -### 第三题 -```BASH - - - - - - 24软件1班最帅投票 - - - -

      24软件1班谁最帅()

      -
      - A.郑伟杰 - B.选A - C.选B - D.选C - - - - -``` -![](https://gitee.com/zhengwejie/pic/raw/master/20251130185312790.gif) \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251201-js\345\233\276\345\275\242.md" "b/\351\203\221\344\274\237\346\235\260/20251201-js\345\233\276\345\275\242.md" deleted file mode 100644 index ab255e73c3d2e59f8135bc57a3aec2c244bc1b01..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251201-js\345\233\276\345\275\242.md" +++ /dev/null @@ -1,136 +0,0 @@ -# JavaScript 对象拖放笔记 - - - -### 1. 使元素可拖放 - -**知识点**:使用 `draggable="true"` 属性使元素可拖放。 - -```javascript -// 使元素可拖放 -const draggableElement = document.getElementById("draggable"); -draggableElement.setAttribute("draggable", "true"); -``` - -### 2. 拖放事件生命周期 - -**知识点**:拖放操作涉及两个对象的事件:被拖元素(drag source)和目标区域(drop target)。 - -```javascript -// 被拖元素事件 -element.addEventListener("dragstart", handleDragStart); -element.addEventListener("dragend", handleDragEnd); - -// 目标区域事件 -target.addEventListener("dragover", handleDragOver); -target.addEventListener("drop", handleDrop); -``` - ---- - -## 拖放事件 - -### 3. dragstart 事件 - -**知识点**:开始拖动时触发,用于设置拖拽数据。 - -```javascript -function handleDragStart(e) { - e.dataTransfer.setData("text/plain", e.target.id); - e.target.classList.add("dragging"); -} -``` - -### 4. dragend 事件 - -**知识点**:拖放操作结束时触发,无论成功与否。 - -```javascript -function handleDragEnd(e) { - e.target.classList.remove("dragging"); - console.log("拖放操作结束"); -} -``` - -### 5. dragover 事件 - -**知识点**:当元素被拖到有效目标上时持续触发,必须阻止默认行为以允许放置。 - -```javascript -function handleDragOver(e) { - e.preventDefault(); // 必须调用 - e.target.classList.add("drag-over"); -} -``` - -### 6. dragenter 事件 - -**知识点**:被拖元素进入目标区域时触发。 - -```javascript -function handleDragEnter(e) { - e.preventDefault(); - e.target.classList.add("drag-enter"); -} -``` - -### 7. dragleave 事件 - -**知识点**:被拖元素离开目标区域时触发。 - -```javascript -function handleDragLeave(e) { - e.target.classList.remove("drag-enter", "drag-over"); -} -``` - -### 8. drop 事件 - -**知识点**:在目标区域释放被拖元素时触发。 - -```javascript -function handleDrop(e) { - e.preventDefault(); - const id = e.dataTransfer.getData("text/plain"); - const element = document.getElementById(id); - e.target.appendChild(element); - e.target.classList.remove("drag-enter", "drag-over"); -} -``` - ---- - -## 数据传递 - -### 9. 设置拖拽数据 - -**知识点**:使用 `dataTransfer.setData()` 存储拖拽数据。 - -```javascript -function handleDragStart(e) { - // 存储不同类型的数据 - e.dataTransfer.setData("text/plain", e.target.textContent); - e.dataTransfer.setData("text/html", e.target.innerHTML); - e.dataTransfer.setData( - "application/json", - JSON.stringify({ id: e.target.id, type: "element" }) - ); -} -``` - -### 10. 获取拖拽数据 - -**知识点**:使用 `dataTransfer.getData()` 获取存储的数据。 - -```javascript -function handleDrop(e) { - e.preventDefault(); - const text = e.dataTransfer.getData("text/plain"); - const json = e.dataTransfer.getData("application/json"); - - if (json) { - const data = JSON.parse(json); - console.log("拖拽的元素ID:", data.id); - } -} -``` diff --git "a/\351\203\221\344\274\237\346\235\260/20251203-JSdocument\345\257\271\350\261\241.md" "b/\351\203\221\344\274\237\346\235\260/20251203-JSdocument\345\257\271\350\261\241.md" deleted file mode 100644 index 19a276f64bab1b8e0679a2b145e578407381a8e0..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251203-JSdocument\345\257\271\350\261\241.md" +++ /dev/null @@ -1,328 +0,0 @@ -# JavaScript Document 对象笔记 - -## - -### 1. 基础文档信息 - -**知识点**:获取文档基本信息如标题、URL、字符集等。 - -```javascript -// 获取文档标题 -console.log(document.title); // "页面标题" - -// 获取文档URL -console.log(document.URL); // "https://example.com" - -// 获取文档字符集 -console.log(document.characterSet); // "UTF-8" - -// 获取文档最后修改时间 -console.log(document.lastModified); -``` - -### 2. 文档结构访问 - -**知识点**:访问文档的根元素和 body 元素。 - -```javascript -// 获取文档根元素(HTML) -console.log(document.documentElement); // 元素 - -// 获取文档头部 -console.log(document.head); // 元素 - -// 获取文档主体 -console.log(document.body); // 元素 - -// 获取所有样式表 -console.log(document.styleSheets); -``` - -### 3. 文档状态 - -**知识点**:检查文档加载状态。 - -```javascript -// 检查文档是否加载完成 -if (document.readyState === "complete") { - console.log("文档已完全加载"); -} - -// 监听文档状态变化 -document.onreadystatechange = function () { - if (document.readyState === "interactive") { - console.log("DOM已加载完成"); - } -}; -``` - -## - -### 4. getElementById() - -**知识点**:通过 ID 获取单个元素。 - -```javascript -// 获取ID为"header"的元素 -const header = document.getElementById("header"); -header.style.backgroundColor = "blue"; -``` - -### 5. getElementsByClassName() - -**知识点**:通过类名获取元素集合(HTMLCollection)。 - -```javascript -// 获取所有class包含"item"的元素 -const items = document.getElementsByClassName("item"); -console.log(items.length); // 元素数量 -``` - -### 6. getElementsByTagName() - -**知识点**:通过标签名获取元素集合。 - -```javascript -// 获取所有
      元素 -const divs = document.getElementsByTagName("div"); -for (let div of divs) { - console.log(div.tagName); -} -``` - -### 7. querySelector() - -**知识点**:使用 CSS 选择器获取第一个匹配元素。 - -```javascript -// 获取第一个类名为"btn"的按钮 -const button = document.querySelector("button.btn"); -button.addEventListener("click", handleClick); -``` - -### 8. querySelectorAll() - -**知识点**:使用 CSS 选择器获取所有匹配元素(NodeList)。 - -```javascript -// 获取所有类名为"item"的
    • 元素 -const listItems = document.querySelectorAll("li.item"); -listItems.forEach((item) => { - item.style.color = "red"; -}); -``` - -## - -### 9. createElement() - -**知识点**:创建新的 HTML 元素。 - -```javascript -// 创建一个新的
      元素 -const newDiv = document.createElement("div"); -newDiv.textContent = "新创建的元素"; -newDiv.className = "custom-div"; -``` - -### 10. createTextNode() - -**知识点**:创建文本节点。 - -```javascript -// 创建文本节点 -const textNode = document.createTextNode("这是一段文本"); -document.body.appendChild(textNode); -``` - -### 11. appendChild() - -**知识点**:将节点添加到父节点的子节点列表末尾。 - -```javascript -// 将新元素添加到body中 -const newElement = document.createElement("p"); -newElement.textContent = "新段落"; -document.body.appendChild(newElement); -``` - -### 12. removeChild() - -**知识点**:从父节点中移除子节点。 - -```javascript -// 移除ID为"old-element"的元素 -const parent = document.getElementById("container"); -const child = document.getElementById("old-element"); -parent.removeChild(child); - -// 现代写法(不需要获取父元素) -// child.remove(); -``` - -### 13. insertBefore() - -**知识点**:在指定节点前插入新节点。 - -```javascript -// 在某个元素前插入新元素 -const newItem = document.createElement("li"); -newItem.textContent = "新项目"; -const list = document.getElementById("my-list"); -const firstItem = list.firstElementChild; -list.insertBefore(newItem, firstItem); -``` -## 作业 -第一题 -```bash - - - - - - Document - - -

      郑伟杰

      - - - -``` -第二题 -```BASH - - - - - - Document - - - - - -``` -第三题 -```bash - - - - - - - Document - - - -
      李春涛是我同桌 -
      - - - - - -``` -第四题 -```bash - - - - - - - Document - - - - -
      -

      李白《行路男》

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -

      金樽清酒斗十千,玉盘珍羞直万钱

      -
      - - - - -``` -第五题 -```bash - - - - - - Document - - - 打开图片对话框 - - - -``` \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251204.jsDOM\347\254\224\350\256\260.md" "b/\351\203\221\344\274\237\346\235\260/20251204.jsDOM\347\254\224\350\256\260.md" deleted file mode 100644 index c80f0ea86889e9db8774682c1eb4f97cdc916641..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251204.jsDOM\347\254\224\350\256\260.md" +++ /dev/null @@ -1,181 +0,0 @@ -# JavaScript DOM 笔记 - ---- - -## 1.DOM 概述 - -**知识点**:DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,它将文档表示为节点树,允许程序访问和操作文档的内容、结构和样式。 - - - -### 2. DOM 树结构 - -**知识点**:DOM 将文档表示为树形结构,每个部分(元素、属性、文本)都是树上的节点。 - -```javascript -// 简单的HTML结构示例 -// -// -// 页面标题 -// -// -//

      标题

      -//

      段落

      -// -// - -console.log(document.documentElement); // 根节点 -console.log(document.head); // 节点 -console.log(document.body); // 节点 -``` - -### 3. DOM 标准化 - -**知识点**:DOM 由 W3C 标准化,分为不同级别,现代浏览器支持 DOM Level 3。 - -```javascript -// 检查DOM特性支持 -console.log("DOM Level 1:", !!document.getElementById); -console.log("DOM Level 2:", !!document.addEventListener); -console.log("DOM Level 3:", !!document.createEvent); -``` - ---- - -## DOM 节点属性 - -### 4. 通用节点属性 - -**知识点**:所有 DOM 节点都有的通用属性。 - -```javascript -const element = document.getElementById("myElement"); - -// 节点基本信息 -console.log("节点名称:", element.nodeName); // 标签名(如"DIV") -console.log("节点类型:", element.nodeType); // 1表示元素节点 -console.log("节点值:", element.nodeValue); // 对于元素节点为null - -// 父子关系 -console.log("父节点:", element.parentNode); -console.log("子节点数量:", element.childNodes.length); -console.log("第一个子节点:", element.firstChild); -console.log("最后一个子节点:", element.lastChild); -``` - -### 5. 元素节点属性 - -**知识点**:元素节点特有的属性。 - -```javascript -const div = document.querySelector("div"); - -// 元素标签相关 -console.log("标签名:", div.tagName); // "DIV" -console.log("标签名小写:", div.tagName.toLowerCase()); // "div" - -// 内容相关 -console.log("HTML内容:", div.innerHTML); -console.log("文本内容:", div.textContent); -console.log("内部文本:", div.innerText); // 考虑CSS可见性 - -// 属性相关 -console.log("所有属性:", div.attributes); -console.log("类名:", div.className); -console.log("ID:", div.id); -``` - -### 6. 属性节点属性 - -**知识点**:属性节点的特殊属性。 - -```javascript -const element = document.getElementById("myElement"); -const attr = element.attributes[0]; // 获取第一个属性节点 - -if (attr) { - console.log("属性名称:", attr.name); // 属性名 - console.log("属性值:", attr.value); // 属性值 - console.log("是否指定:", attr.specified); // 是否显式指定 - console.log("节点类型:", attr.nodeType); // 2表示属性节点 -} -``` - -### 7. 文本节点属性 - -**知识点**:文本节点的属性。 - -```javascript -const textNode = document.createTextNode("示例文本"); - -console.log("节点类型:", textNode.nodeType); // 3表示文本节点 -console.log("节点名称:", textNode.nodeName); // "#text" -console.log("节点值:", textNode.nodeValue); // "示例文本" -console.log("文本长度:", textNode.length); // 4(字符数) -``` - -### 8. 样式相关属性 - -**知识点**:与 CSS 样式相关的 DOM 属性。 - -```javascript -const element = document.getElementById("styled-element"); - -// 内联样式 -console.log("内联样式:", element.style); -element.style.color = "red"; -element.style.fontSize = "16px"; - -// 计算样式(最终应用的样式) -const computedStyle = window.getComputedStyle(element); -console.log("计算后的颜色:", computedStyle.color); -console.log("计算后的字体大小:", computedStyle.fontSize); - -// 类名操作 -console.log("类列表:", element.classList); -element.classList.add("active"); -element.classList.remove("inactive"); -``` -## 作业 -第一题 -```bash - - - - - - - Document - - - - - - -
      - - - - -``` \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251205-JSwindow\345\257\271\350\261\241\347\254\224\350\256\260.md" "b/\351\203\221\344\274\237\346\235\260/20251205-JSwindow\345\257\271\350\261\241\347\254\224\350\256\260.md" deleted file mode 100644 index d62881853e3e99cd1e0b98e893ca77627a376343..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251205-JSwindow\345\257\271\350\261\241\347\254\224\350\256\260.md" +++ /dev/null @@ -1,528 +0,0 @@ -# Window 对象全面笔记 - -### 1. Window 对象 - -**知识点**:Window 对象代表浏览器窗口,是 JavaScript 的全局对象,包含所有全局变量、函数和对象。 - -```javascript -// Window 对象是全局对象 -console.log(window === this); // 在全局作用域中为 true - -// 全局变量自动成为 window 的属性 -var globalVar = "全局变量"; -console.log(window.globalVar); // "全局变量" - -// 全局函数也是 window 的方法 -function sayHello() { - return "Hello"; -} -console.log(window.sayHello()); // "Hello" -``` - -### 2. Window 对象与其他对象的关系 - -**知识点**:Window 对象包含 document、location、history、navigator 等子对象。 - -```javascript -// Window 的子对象 -console.log(window.document); // Document 对象 -console.log(window.location); // Location 对象 -console.log(window.history); // History 对象 -console.log(window.navigator); // Navigator 对象 -console.log(window.screen); // Screen 对象 -console.log(window.localStorage); // Storage 对象 - -// 访问时可以省略 window 前缀 -console.log(document === window.document); // true -console.log(location === window.location); // true -``` - -### 3. 全局作用域 - -**知识点**:在浏览器中,全局作用域就是 Window 对象。 - -```javascript -// 检查变量是否在全局作用域中 -var x = 10; -let y = 20; // let/const 声明的变量不会成为 window 的属性 -const z = 30; - -console.log(window.x); // 10 -console.log(window.y); // undefined -console.log(window.z); // undefined - -// 在严格模式下,this 在全局作用域中为 undefined -("use strict"); -console.log(this); // undefined (非严格模式下为 window) -``` - ---- - -## 对话框方法 - -### 4. alert() 方法 - -**知识点**:显示一个警告对话框,包含指定的消息和一个"确定"按钮。 - -```javascript -// 基本用法 -alert("这是一个警告信息"); - -// 显示变量值 -let userName = "张三"; -alert(`欢迎, ${userName}!`); - -// 显示对象信息 -let user = { name: "李四", age: 25 }; -alert(JSON.stringify(user, null, 2)); - -// 注意:alert 会阻塞代码执行 -console.log("这行代码在 alert 关闭后执行"); -``` - -### 5. confirm() 方法 - -**知识点**:显示一个确认对话框,包含指定的消息和"确定"/"取消"按钮,返回布尔值。 - -```javascript -// 基本用法 -let result = confirm("您确定要删除此项吗?"); -console.log("用户选择:", result); // true 或 false - -// 根据选择执行不同操作 -if (confirm("是否继续?")) { - console.log("用户选择了继续"); - // 执行继续操作 -} else { - console.log("用户选择了取消"); - // 执行取消操作 -} - -// 使用在三元表达式中 -let action = confirm("启用高级功能?") ? "启用" : "禁用"; -console.log("操作:", action); -``` - -### 6. prompt() 方法 - -**知识点**:显示一个提示对话框,包含输入框和"确定"/"取消"按钮,返回输入值或 null。 - -```javascript -// 基本用法 -let name = prompt("请输入您的姓名:"); -console.log("输入的姓名:", name); - -// 带默认值 -let age = prompt("请输入您的年龄:", "25"); -console.log("输入的年龄:", age); - -// 验证输入 -let input; -do { - input = prompt("请输入一个数字(1-10):"); -} while (input === null || isNaN(input) || input < 1 || input > 10); - -console.log("有效的输入:", input); - -// 处理取消操作 -let email = prompt("请输入邮箱:"); -if (email === null) { - console.log("用户取消了输入"); -} else if (email.trim() === "") { - console.log("用户输入了空字符串"); -} else { - console.log("用户输入:", email); -} -``` - -### 7. 自定义对话框 - -**知识点**:使用 DOM 创建更灵活的自定义对话框。 - -```javascript -// 创建自定义确认对话框 -function customConfirm(message, callback) { - // 创建对话框元素 - const dialog = document.createElement("div"); - dialog.style.cssText = ` - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: white; - padding: 20px; - border: 2px solid #333; - border-radius: 5px; - z-index: 1000; - `; - - dialog.innerHTML = ` -

      ${message}

      - - - `; - - document.body.appendChild(dialog); - - // 添加事件处理 - document.getElementById("confirmOk").onclick = function () { - document.body.removeChild(dialog); - callback(true); - }; - - document.getElementById("confirmCancel").onclick = function () { - document.body.removeChild(dialog); - callback(false); - }; -} - -// 使用自定义对话框 -customConfirm("是否确认操作?", function (result) { - console.log("用户选择:", result); -}); -``` - ---- - -## 窗口的打开与关闭 - -### 8. window.open() 方法 - -**知识点**:打开一个新的浏览器窗口或标签页。 - -```javascript -// 基本用法 - 在新标签页中打开 -const newWindow = window.open("https://www.example.com"); - -// 指定窗口名称(可用于 target 属性) -window.open("page.html", "myWindow"); - -// 在新窗口中打开(不是新标签页) -const popup = window.open("popup.html", "popup", "width=400,height=300"); - -// 控制是否显示浏览器控件 -const minimalWindow = window.open( - "minimal.html", - "minimal", - "menubar=no,toolbar=no,location=no,status=no" -); - -// 获取打开的窗口引用 -const myWindow = window.open("", "myWindow"); -if (myWindow) { - myWindow.document.write("

      Hello from opener!

      "); -} -``` - -### 9. 窗口打开参数 - -**知识点**:window.open() 的第三个参数控制窗口特性。 - -```javascript -// 完整的窗口特性参数 -const features = [ - "width=800", // 窗口宽度 - "height=600", // 窗口高度 - "left=100", // 距离屏幕左边缘 - "top=100", // 距离屏幕上边缘 - "resizable=yes", // 是否可调整大小 - "scrollbars=yes", // 是否显示滚动条 - "toolbar=no", // 是否显示工具栏 - "menubar=no", // 是否显示菜单栏 - "location=no", // 是否显示地址栏 - "status=no", // 是否显示状态栏 - "fullscreen=no", // 是否全屏(需要用户交互) -].join(","); - -const configuredWindow = window.open("config.html", "config", features); - -// 检查窗口是否成功打开 -if (!configuredWindow) { - alert("弹出窗口被浏览器阻止了!请允许弹出窗口。"); -} -``` - -### 10. window.close() 方法 - -**知识点**:关闭当前窗口或指定的窗口。 - -```javascript -// 关闭当前窗口 -function closeCurrentWindow() { - if (confirm("确定要关闭窗口吗?")) { - window.close(); - } -} - -// 关闭由 window.open() 打开的窗口 -let openedWindow = null; - -function openAndClose() { - // 打开新窗口 - openedWindow = window.open("", "testWindow", "width=400,height=300"); - - // 在新窗口中写入内容 - openedWindow.document.write("

      这个窗口将在5秒后关闭

      "); - - // 5秒后关闭窗口 - setTimeout(() => { - if (openedWindow && !openedWindow.closed) { - openedWindow.close(); - console.log("窗口已关闭"); - } - }, 5000); -} - -// 检查窗口是否已关闭 -if (openedWindow && openedWindow.closed) { - console.log("窗口已经关闭了"); -} -``` - -### 11. 窗口状态检测 - -**知识点**:检测窗口的打开和关闭状态。 - -```javascript -let childWindow = null; - -// 打开子窗口 -function openChildWindow() { - childWindow = window.open("child.html", "child", "width=400,height=300"); - - // 定期检查子窗口是否关闭 - const checkInterval = setInterval(() => { - if (childWindow.closed) { - console.log("子窗口已关闭"); - clearInterval(checkInterval); - // 执行清理操作 - childWindow = null; - } - }, 1000); -} - -// 与子窗口通信 -function sendMessageToChild() { - if (childWindow && !childWindow.closed) { - // 向子窗口传递数据 - childWindow.postMessage("Hello from parent!", "*"); - - // 调用子窗口的函数(如果同源) - try { - childWindow.someFunction(); - } catch (e) { - console.log("跨域限制或函数不存在"); - } - } else { - console.log("子窗口未打开或已关闭"); - } -} -``` - ---- - -## 控制窗口 - -### 12. 移动窗口 - -**知识点**:移动窗口到指定位置。 - -```javascript -// 移动当前窗口 -function moveWindowTo(x, y) { - // 注意:现代浏览器出于安全考虑,通常不允许脚本移动主窗口 - // 但可以移动由 window.open() 打开的窗口 - - if (window.opener) { - // 如果这是由其他窗口打开的 - window.moveTo(x, y); - } -} - -// 移动由脚本打开的窗口 -let movableWindow = null; - -function createMovableWindow() { - movableWindow = window.open("", "movable", "width=300,height=200"); - - // 添加控制按钮 - movableWindow.document.write(` -

      可移动窗口

      - - - `); -} - -// 相对移动 -function moveWindowRelative(dx, dy) { - if (movableWindow && !movableWindow.closed) { - movableWindow.moveBy(dx, dy); - } -} -``` - -### 13. 调整窗口大小 - -**知识点**:调整窗口的尺寸。 - -```javascript -// 调整当前窗口大小 -function resizeCurrentWindow(width, height) { - // 注意:通常不能调整主窗口大小 - // 但可以调整由 window.open() 打开的窗口 - window.resizeTo(width, height); -} - -// 调整由脚本打开的窗口 -let resizableWindow = null; - -function createResizableWindow() { - resizableWindow = window.open( - "", - "resizable", - "width=400,height=300,resizable=yes" - ); - - // 添加控制按钮 - resizableWindow.document.write(` -

      可调整大小的窗口

      - - - - `); -} - -// 检查窗口是否可以调整大小 -function checkIfResizable() { - if (resizableWindow) { - // 注意:没有直接的方法检查,但可以尝试调整 - try { - resizableWindow.resizeBy(1, 1); - resizableWindow.resizeBy(-1, -1); // 恢复 - console.log("窗口可以调整大小"); - return true; - } catch (e) { - console.log("窗口不能调整大小"); - return false; - } - } - return false; -} -``` - -### 14. 窗口滚动控制 - -**知识点**:控制窗口的滚动位置。 - -```javascript -// 滚动到指定位置 -function scrollToPosition(x, y) { - window.scrollTo(x, y); - - // 或使用选项对象 - window.scrollTo({ - top: y, - left: x, - behavior: "smooth", // 'auto' 或 'smooth' - }); -} - -// 滚动到元素 -function scrollToElement(elementId) { - const element = document.getElementById(elementId); - if (element) { - element.scrollIntoView({ - behavior: "smooth", - block: "start", // 'start', 'center', 'end', 'nearest' - }); - } -} - -// 相对滚动 -function scrollByAmount(dx, dy) { - window.scrollBy(dx, dy); - - // 平滑滚动 - window.scrollBy({ - top: dy, - left: dx, - behavior: "smooth", - }); -} - -// 获取当前滚动位置 -function getScrollPosition() { - return { - x: window.pageXOffset || document.documentElement.scrollLeft, - y: window.pageYOffset || document.documentElement.scrollTop, - }; -} - -// 滚动到页面顶部 -function scrollToTop() { - window.scrollTo({ top: 0, behavior: "smooth" }); -} - -// 滚动到页面底部 -function scrollToBottom() { - window.scrollTo({ - top: document.documentElement.scrollHeight, - behavior: "smooth", - }); -} -``` - -### 15. 窗口焦点控制 - -**知识点**:控制窗口的焦点状态。 - -```javascript -// 将焦点设置到当前窗口 -function focusWindow() { - window.focus(); - console.log("窗口已获得焦点"); -} - -// 使窗口失去焦点 -function blurWindow() { - window.blur(); - console.log("窗口已失去焦点"); -} - -// 检查窗口是否有焦点 -function checkWindowFocus() { - if (document.hasFocus()) { - console.log("当前窗口有焦点"); - return true; - } else { - console.log("当前窗口没有焦点"); - return false; - } -} - -// 焦点变化示例 -let lastFocusTime = Date.now(); - -window.addEventListener("focus", () => { - const now = Date.now(); - const awayTime = now - lastFocusTime; - console.log(`窗口重新获得焦点,离开时间:${awayTime}ms`); -}); - -window.addEventListener("blur", () => { - lastFocusTime = Date.now(); - console.log("窗口失去焦点"); -}); - -// 自动聚焦输入框 -function autoFocusInput() { - const input = document.getElementById("myInput"); - if (input) { - input.focus(); - // 选中文本(可选) - input.select(); - } -} -``` - ---- diff --git "a/\351\203\221\344\274\237\346\235\260/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213\347\254\224\350\256\260.md" "b/\351\203\221\344\274\237\346\235\260/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213\347\254\224\350\256\260.md" deleted file mode 100644 index 6161dd3099b6304fa74b0f2cc669a1ba2dfa9265..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213\347\254\224\350\256\260.md" +++ /dev/null @@ -1,101 +0,0 @@ -# JavaScript 浏览器对象模型(BOM) 精简笔记 -## 一、核心概念 -BOM(Browser Object Model):浏览器对象模型,无统一官方标准,用于操作浏览器窗口及组件,核心是 `window` 对象。 -`window` 是浏览器的全局对象,所有 BOM 特性均挂载其上,全局变量/函数会自动成为 `window` 的属性/方法。 - -## 二、核心对象 -### 1. window(顶层对象) -#### (1)尺寸相关 -```js -// 视口尺寸(不含滚动条) -window.innerWidth / window.innerHeight -// 窗口整体尺寸(含浏览器边框) -window.outerWidth / window.outerHeight -``` -### (2)窗口操作 -```js -// 打开新窗口(慎用,易被浏览器拦截) -window.open(url, name, features) -// 关闭当前窗口 -window.close() -// 窗口滚动 -window.scrollTo(x, y) // 绝对滚动到指定坐标 -window.scrollBy(x, y) // 相对当前位置滚动 -``` -### (3)定时器 -```js -// 一次性定时器(延迟执行) -let timer1 = setTimeout(() => {}, 1000) // 1秒后执行 -clearTimeout(timer1) // 清除未执行的定时器 - -// 周期性定时器(重复执行) -let timer2 = setInterval(() => {}, 1000) // 每1秒执行一次 -clearInterval(timer2) // 清除周期性定时器 - -// ES6+ 精准动画定时器 -let timer3 = requestAnimationFrame(callback) -cancelAnimationFrame(timer3) // 清除动画定时器 -``` -### 2. location(地址栏对象) -#### (1)核心属性 -| 属性 | 说明 | 示例 | -|------------|-------------------------------|-------------------------------------------| -| href | 完整 URL(可修改实现跳转)| location.href = 'https://www.baidu.com' | -| protocol | 网络协议(http/https 等)| location.protocol | -| host | 域名 + 端口号 | location.host | -| pathname | URL 路径部分 | location.pathname | -| search | 查询参数(? 开头)| location.search | -| hash | 哈希值(# 开头,锚点)| location.hash | - -### (2)核心方法 -```js -location.reload() // 刷新页面(传true:强制刷新,不走缓存) -location.assign(url) // 跳转新页面(可通过浏览器后退返回原页面) -location.replace(url) // 替换当前页面(无法后退返回原页面) -``` -### 3. history(历史记录对象) -```js -history.back() // 后退一页(等同于点击浏览器后退按钮) -history.forward() // 前进一页(等同于点击浏览器前进按钮) -history.go(n) // 跳转指定步数(n=1前进,n=-1后退,n=0刷新) -history.pushState(state, title, url) // 添加历史记录(不刷新页面) -history.replaceState(state, title, url) // 替换当前历史记录(不刷新) -``` - -### 4. navigator(浏览器信息对象) -常用属性: -```js -navigator.userAgent // 浏览器UA字符串(用于判断浏览器/设备类型) -navigator.language // 浏览器默认语言(如zh-CN、en-US) -navigator.onLine // 网络连接状态(true=在线,false=离线) -``` -### 5. screen(屏幕信息对象) -````js -screen.width / screen.height // 设备屏幕总分辨率 -screen.availWidth / screen.availHeight // 屏幕可用分辨率(不含任务栏/状态栏) -```` - -## 三、常用 BOM 事件 -```js -// 窗口加载完成(DOM结构+所有资源加载完毕) -window.onload = () => { - console.log('页面完全加载') -} - -// 窗口尺寸变化时触发 -window.onresize = () => { - console.log('窗口尺寸改变:', window.innerWidth) -} - -// 窗口滚动时触发 -window.onscroll = () => { - console.log('页面滚动了') -} - -// 页面即将离开(关闭/刷新/跳转)时触发 -window.onbeforeunload = (e) => { - e.preventDefault() - e.returnValue = '' // 触发浏览器离开确认提示 - return '' -} -``` \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251210-Style\345\257\271\350\261\241.md" "b/\351\203\221\344\274\237\346\235\260/20251210-Style\345\257\271\350\261\241.md" deleted file mode 100644 index dd4b17c8c7b99facabce032b7af95d6939e56115..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251210-Style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,252 +0,0 @@ -# JavaScript Style 对象笔记 - -## 一、Style 对象核心概述 -- Style 对象是 JavaScript 操作 DOM 元素内联样式的核心接口,对应元素的 style 属性,仅控制内联样式`(
      )`,而非外部样式表或 ` - - - 1 - 2 - 3 - - -``` \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251211-From\345\257\271\350\261\241.md" "b/\351\203\221\344\274\237\346\235\260/20251211-From\345\257\271\350\261\241.md" deleted file mode 100644 index bd4c0e38cd4517bd3675d15c8c2533e512f04b97..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251211-From\345\257\271\350\261\241.md" +++ /dev/null @@ -1,232 +0,0 @@ -# 笔记 -## 验证 -### 1. 提交控制 -- 手动提交:`form.submit()`(不触发 `onsubmit`); -- 阻止默认提交:`e.preventDefault()`(异步提交必用); -- 推荐方式:监听 `submit` 事件,自定义逻辑后异步提交。 - -### 2. 验证 -- 原生验证:`form.checkValidity()`(校验返回布尔)、`form.reportValidity()`(校验+弹窗提示); -- 自定义验证:控件 `setCustomValidity('错误提示')`(清空需设空字符串)。 - -## 五、FormData 关键(异步提交) -1. 快速收集表单数据:`new FormData(form)`(自动含所有控件值,支持文件); -2. 可手动追加:`formData.append('key', '值')`; -3. 异步提交:`fetch`/`axios` 中直接作为 `body`,自动处理编码。 - -## 六、核心坑点 -1. 单选/复选框同名需遍历集合找 `checked=true` 的值,不可直接取 `value`; -2. `form.submit()` 不触发 `onsubmit` 事件,验证需监听 `submit` 事件; -3. 文件输入框 `value` 只读,仅能用户操作; -4. 下拉框直接设 `select.value` 即可选中,无需遍历 option(特殊场景除外)。 - -# 作业 - -## 1 -```js -输入兑换码:
      - -
      - - -``` -## 2 -```js - - - - - - -``` - -## 3 -```js - -

      选择课程(最多选6门)

      - 语文
      - 数学
      - 英语
      - 物理
      - 化学
      - 生物
      - 历史
      - 地理
      - - -``` -## 4 - -```js - - -

      选择题:2024年奥运会举办城市是?

      - - A. 罗马
      - B. 北京
      - C. 巴黎
      - D. 伦敦
      - - - - - -``` - -## 5 -```js - -

      选择兴趣爱好

      - - 阅读
      - 运动
      - 听歌
      - 编程
      - 旅游
      - - - - - - - - - -``` - - -## 6 -```js - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251212-API.md" "b/\351\203\221\344\274\237\346\235\260/20251212-API.md" deleted file mode 100644 index 020754dcf2c205bdd9781ddae53ae9ac17788518..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251212-API.md" +++ /dev/null @@ -1,18 +0,0 @@ -# JS 核心知识点笔记(JSON + Fetch API) -## 一、JSON -### 1. 核心概念 -JSON(JavaScript Object Notation):轻量级数据交换格式,跨语言、易读易解析,是前后端数据交互的主流格式。 - -### 2. 核心方法(必记) -| 方法 | 作用 | 示例 | -|------|------|------| -| `JSON.parse()` | 把JSON字符串 → JS对象/数组(处理后端返回数据) | `const obj = JSON.parse('{"name":"张三","age":20}')` | -| `JSON.stringify()` | 把JS对象/数组 → JSON字符串(向后端发送数据) | `const str = JSON.stringify({name:"张三",age:20})` | - -### 3. 关键注意点 -- 键名必须用**双引号**包裹(单引号/无引号均无效); -- 不支持函数、undefined 类型(序列化时会被忽略)。 - -## 二、Fetch API -### 1. 核心概念 -现代浏览器原生异步网络请求接口,替代传统 XMLHttpRequest,基于 Promise 实现,语法更简洁。 diff --git "a/\351\203\221\344\274\237\346\235\260/20251215-\347\273\203\344\271\240.md" "b/\351\203\221\344\274\237\346\235\260/20251215-\347\273\203\344\271\240.md" deleted file mode 100644 index cdc1c3122412eee5cb061a0424f9bf133c2967d6..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251215-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,14 +0,0 @@ -```html - -``` \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251217-jQuery.md" "b/\351\203\221\344\274\237\346\235\260/20251217-jQuery.md" deleted file mode 100644 index a07e87dfac6c3d88c1c0defb092ba6ce36845e45..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251217-jQuery.md" +++ /dev/null @@ -1,228 +0,0 @@ -# jQuery 笔记 - -## 基础概念 -- 轻量级JavaScript库,Write Less, Do More -- 简化DOM操作、事件处理、动画、AJAX - -## 快速开始 -```html - - -``` - -## 选择器 -### 基础选择器 -```javascript -$('#id') // ID选择器 -$('.class') // 类选择器 -$('tag') // 标签选择器 -$('*') // 所有元素 -``` - -### 层级选择器 -```javascript -$('parent child') // 后代元素 -$('parent > child') // 直接子元素 -$('prev + next') // 相邻兄弟 -$('prev ~ siblings') // 所有兄弟 -``` - -### 常用过滤选择器 -```javascript -$('li:first') // 第一个 -$('li:last') // 最后一个 -$('li:eq(2)') // 索引为2 -$('li:even') // 偶数索引 -$('li:odd') // 奇数索引 -$(':checked') // 选中的表单元素 -$(':visible') // 可见元素 -$(':hidden') // 隐藏元素 -``` - -## DOM操作 -### 内容操作 -```javascript -// 获取/设置内容 -$('#el').html() // 获取HTML -$('#el').html('

      新内容

      ') // 设置HTML -$('#el').text() // 获取文本 -$('#el').val() // 获取表单值 -``` - -### 属性操作 -```javascript -// 属性操作 -$('#el').attr('src') // 获取属性 -$('#el').attr('src', 'new.jpg') // 设置属性 -$('#el').removeAttr('title') // 移除属性 - -// 状态操作(表单元素) -$(':checkbox').prop('checked') // 获取选中状态 -$(':checkbox').prop('checked', true) // 设置选中 -``` - -### 样式操作 -```javascript -// CSS样式 -$('#el').css('color') // 获取样式 -$('#el').css('color', 'red') // 设置样式 -$('#el').css({color: 'red', fontSize: '16px'}) // 批量设置 - -// 类操作 -$('#el').addClass('active') // 添加类 -$('#el').removeClass('active') // 移除类 -$('#el').toggleClass('active') // 切换类 -$('#el').hasClass('active') // 判断类 -``` - -### 元素操作 -```javascript -// 创建元素 -const $newEl = $('
      新元素
      '); - -// 添加元素 -$('#parent').append($newEl) // 末尾添加 -$('#parent').prepend($newEl) // 开头添加 -$('#el').after($newEl) // 之后添加 -$('#el').before($newEl) // 之前添加 - -// 删除元素 -$('#el').remove() // 删除元素 -$('#el').empty() // 清空内容 -``` - -### 遍历元素 -```javascript -// 遍历 -$('li').each(function(index, element) { - console.log(index, $(element).text()); -}); - -// 查找相关元素 -$('#el').parent() // 父元素 -$('#el').parents('selector') // 祖先元素 -$('#el').children() // 子元素 -$('#el').siblings() // 兄弟元素 -$('#el').find('selector') // 后代元素 -``` - -## 事件处理 -### 事件绑定 -```javascript -// 快捷绑定 -$('#btn').click(function() { - console.log('点击事件'); -}); - -// on方法(推荐) -$('#btn').on('click', function() { - console.log('点击事件'); -}); - -// 事件委托 -$('#list').on('click', 'li', function() { - console.log($(this).text()); -}); - -// 多个事件 -$('#input').on({ - focus: function() { $(this).css('border', 'red') }, - blur: function() { $(this).css('border', '#ccc') } -}); -``` - -### 事件解绑与触发 -```javascript -// 解绑事件 -$('#btn').off('click') // 解绑点击事件 -$('#btn').off() // 解绑所有事件 - -// 触发事件 -$('#btn').click() // 触发点击 -$('#btn').trigger('click') // 触发事件 -``` - -### 事件对象 -```javascript -$('#btn').click(function(e) { - e.preventDefault() // 阻止默认行为 - e.stopPropagation() // 阻止冒泡 - console.log(e.target) // 触发元素 -}); -``` - -## 动画效果 -```javascript -// 显示隐藏 -$('#el').show() // 显示 -$('#el').hide() // 隐藏 -$('#el').toggle() // 切换 - -// 淡入淡出 -$('#el').fadeIn() // 淡入 -$('#el').fadeOut() // 淡出 -$('#el').fadeToggle() // 切换 - -// 滑动 -$('#el').slideDown() // 下滑 -$('#el').slideUp() // 上滑 -$('#el').slideToggle() // 切换 - -// 自定义动画 -$('#el').animate({ - left: '200px', - opacity: 0.5 -}, 1000); -``` - -## AJAX请求 -```javascript -// GET请求 -$.get('url', function(data) { - console.log(data); -}); - -// POST请求 -$.post('url', {name: 'value'}, function(data) { - console.log(data); -}); - -// 完整AJAX -$.ajax({ - url: 'api/data', - type: 'GET', - dataType: 'json', - success: function(data) { - console.log(data); - }, - error: function(xhr, status, error) { - console.error(error); - } -}); -``` - -## 实用技巧 -### DOM对象转换 -```javascript -// jQuery转DOM -const domEl = $('#el')[0] -const domEl2 = $('#el').get(0) - -// DOM转jQuery -const $el = $(document.getElementById('el')) -``` - -### 链式调用 -```javascript -$('#el') - .css('color', 'red') - .addClass('active') - .html('新内容') - .click(function() { - alert('点击'); - }); -``` diff --git "a/\351\203\221\344\274\237\346\235\260/20251218-jQuery\345\212\250\347\224\273.md" "b/\351\203\221\344\274\237\346\235\260/20251218-jQuery\345\212\250\347\224\273.md" deleted file mode 100644 index 149358651027b1a4cc6660c6fa7424e32627a616..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251218-jQuery\345\212\250\347\224\273.md" +++ /dev/null @@ -1,196 +0,0 @@ -# jQuery 动画与AJAX - -## 动画效果 - -### 基础动画 -```javascript -// 显示隐藏 -$('#el').show(500) // 显示(500ms) -$('#el').hide('slow') // 隐藏(慢速) -$('#el').toggle() // 切换 - -// 滑动效果 -$('#el').slideDown(300) // 下滑显示 -$('#el').slideUp() // 上滑隐藏 -$('#el').slideToggle() // 切换滑动 - -// 淡入淡出 -$('#el').fadeIn() // 淡入 -$('#el').fadeOut() // 淡出 -$('#el').fadeToggle() // 切换淡入淡出 -$('#el').fadeTo(500, 0.5) // 淡到50%透明度 -``` - -### 自定义动画 -```javascript -// 数值型样式动画 -$('#el').animate({ - left: '200px', - width: '300px', - opacity: 0.8 -}, 1000, function() { - // 动画完成回调 - console.log('动画结束'); -}); - -// 动画控制 -$('#el').stop() // 停止动画 -$('#el').delay(500) // 延迟500ms -``` - -### 动画队列 -```javascript -// 链式动画 -$('#el') - .slideDown(500) - .delay(300) - .fadeOut(400) - .fadeIn(400); -``` - -## AJAX操作 - -### 基础请求 -```javascript -// GET请求 -$.get('api/data', {id: 1}, function(res) { - console.log(res); -}, 'json'); - -// POST请求 -$.post('api/add', {name: 'test'}, function(res) { - console.log(res); -}); - -// JSON请求 -$.getJSON('api/json', function(res) { - console.log(res); -}); -``` - -### 完整AJAX配置 -```javascript -$.ajax({ - url: 'api/data', - type: 'GET', - dataType: 'json', - data: {id: 1, name: 'test'}, - timeout: 5000, - beforeSend: function(xhr) { - xhr.setRequestHeader('Token', '123456'); - }, - success: function(res) { - console.log('成功:', res); - }, - error: function(xhr, status, error) { - console.log('失败:', error); - }, - complete: function() { - console.log('请求完成'); - } -}); -``` - -## 工具方法 - -### 数据处理 -```javascript -// 遍历 -$.each([1,2,3], function(index, val) { - console.log(index, val); -}); - -// 类型判断 -$.type('abc') // "string" -$.isArray([]) // true -$.isFunction(function(){}) // true - -// 对象操作 -$.extend({}, {a:1}, {b:2}) // {a:1, b:2} -``` - -### JSON处理 -```javascript -// JSON解析 -const obj = $.parseJSON('{"name":"test"}') - -// 在现代浏览器中也可使用 -const obj2 = JSON.parse('{"name":"test"}') -``` - -## 实用技巧 - -### 动画回调 -```javascript -$('#el').fadeOut(500, function() { - // 动画完成后执行 - $(this).remove(); -}); -``` - -### 链式动画 -```javascript -$('#box') - .animate({left: '100px'}, 500) - .animate({top: '50px'}, 500) - .fadeOut(300); -``` - -### 动画事件 -```javascript -$('#el') - .on('click', function() { - $(this).stop().fadeToggle(); - }) - .on('mouseenter', function() { - $(this).addClass('hover'); - }) - .on('mouseleave', function() { - $(this).removeClass('hover'); - }); -``` - -## 性能优化 - -### 缓存对象 -```javascript -const $elements = $('.items'); // 缓存选择结果 -$elements.hide().fadeIn(500); -``` - -### 批量操作 -```javascript -// 批量动画 -$('.items').each(function(index) { - $(this).delay(index * 100).fadeIn(300); -}); -``` - -### 事件委托 -```javascript -// 动态元素事件处理 -$('#container').on('click', '.item', function() { - $(this).fadeOut(); -}); -``` - -## 兼容性处理 - -### 版本冲突 -```javascript -// 解决$冲突 -const jq = jQuery.noConflict(); -jq('#el').fadeIn(); -``` - -### 浏览器兼容 -```javascript -// 特性检测 -if ($.support.ajax) { - // 支持AJAX - $.get('api/data', function(res) { - console.log(res); - }); -} -``` - diff --git "a/\351\203\221\344\274\237\346\235\260/20251219-js\345\244\215\344\271\240.md" "b/\351\203\221\344\274\237\346\235\260/20251219-js\345\244\215\344\271\240.md" deleted file mode 100644 index de8bba9d487f0e0c3de52ee1ff6966cd859fc66f..0000000000000000000000000000000000000000 --- "a/\351\203\221\344\274\237\346\235\260/20251219-js\345\244\215\344\271\240.md" +++ /dev/null @@ -1,80 +0,0 @@ -# js复习 - -### 开发环境与初体验 -- 浏览器控制台(F12):测试简单代码 -- Node.js:服务器端JavaScript运行环境 -- 基本语法:分号、注释(// 和 /* */) - -### 变量与常量 -```javascript -// 变量(可修改) -let name = "张三"; -var age = 25; - -// 常量(不可修改) -const PI = 3.14159; -``` - -### 数据类型与运算符 -- 基本类型:String、Number、Boolean、Null、Undefined、Symbol -- 引用类型:Object、Array、Function -- 运算符:算术(+,-,*,/)、比较(==,===)、逻辑(&&,||,!) - -### 流程控制 -```javascript -// 条件语句 -if (condition) { /* 代码块 */ } -else if (condition) { /* 代码块 */ } -else { /* 代码块 */ } - -// 循环语句 -for (let i = 0; i < 10; i++) { /* 代码块 */ } -while (condition) { /* 代码块 */ } -do { /* 代码块 */ } while (condition); - -// 分支语句 -switch (expression) { - case value1: /* 代码块 */; break; - default: /* 代码块 */; -} -``` - -## 核心数据结构及用法 - -### 数组 -```javascript -let arr = [1, 2, 3, "a", true]; -arr.push(4); // 末尾添加 -arr.pop(); // 末尾删除 -arr[0] = "new"; // 修改元素 -arr.length; // 数组长度 -``` - -### 函数 -```javascript -// 函数声明 -function add(a, b) { - return a + b; -} - -// 函数表达式 -const multiply = function(a, b) { - return a * b; -}; - -// 箭头函数 -const divide = (a, b) => a / b; -``` - -### 对象 -```javascript -let person = { - name: "张三", - age: 25, - sayHello: function() { - console.log("你好!"); - } -}; -person.name; // 访问属性 -person.sayHello(); // 调用方法 -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251110-JS\345\237\272\347\241\200.md" "b/\351\203\255\345\260\217\344\270\234/20251110-JS\345\237\272\347\241\200.md" deleted file mode 100644 index 44e35b486e46f1d386b9197e4d693955cc7114d0..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251110-JS\345\237\272\347\241\200.md" +++ /dev/null @@ -1,41 +0,0 @@ -# 笔记 -## 语言 -- JavaScript -- c# (高级语言) -- c/c++ -- java -- Python -- Swift -- Go -- Kotlin -- Rust (低级语言) -- TypeScript -- php -- 等等... -### 高级语言与低级语言的区别 - 高级语言可以比喻成人们更能理解的语言。 - 低级语言可以比喻成机械(硬件)的语言如:101101这种二进制语言。 -## JavaScript嵌入式和引用式 -```html - - - - - -``` -# 练习 -```html - - - - - -``` -示例图:!![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116160916770.png) \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251112-JS\345\237\272\347\241\200.md" "b/\351\203\255\345\260\217\344\270\234/20251112-JS\345\237\272\347\241\200.md" deleted file mode 100644 index 59ff0b3d4947c4d5f0805d309275ce8188f8733b..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251112-JS\345\237\272\347\241\200.md" +++ /dev/null @@ -1,105 +0,0 @@ -# 笔记 -## 1.数据类型 - 1.数值型(number) - - 十进制 - - 十六进制 - - 八进制 - - 浮点型 - - 特殊值(Infinity)——无穷 - - 特殊值(NaN)——产生未知的结果或错误 - 2.字符串型(string) - 3.布尔型 - 3.特殊数据类型 - - 未定义值(undefined)——var a - - 空值(null) - 转义字符 -|转义字符|描述|转义字符|描述| -|--|--|--|--| -|\b|退格|\v|垂直制表符| -|\n|换行符|\r|Enter符| -|\t|水平字表符|两个反斜杠|反斜杠| -|\f|换页|\OOO|八进制整数,范围为000~777| -|\'|单引号|\xHHH|十六进制整数,范围为00~FF| -|\"|双引号|\uhhhh|十六进制编码的Unicode字符| - -## 2.常量和变量 - 1. - - -# 练习 -1. -``` - - -``` -2. -``` - - -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116161616691.png) - -3. -``` - - -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116162145598.png) -4. -``` - - -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116162026662.png) - -5. -``` - - -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116162044705.png) - -6. -``` - - -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116162059003.png) diff --git "a/\351\203\255\345\260\217\344\270\234/20251113-\345\276\252\347\216\257\350\257\255\345\217\245.md" "b/\351\203\255\345\260\217\344\270\234/20251113-\345\276\252\347\216\257\350\257\255\345\217\245.md" deleted file mode 100644 index 4e800f94cf2c3f1f7382beaea91d8cb2c6a12e6e..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251113-\345\276\252\347\216\257\350\257\255\345\217\245.md" +++ /dev/null @@ -1,90 +0,0 @@ -# 作业 -1. -``` - - -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116164300040.png) -2. -``` - -
      - 请选择你的出生年月: - - -
      - - -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116164613516.gif) -3. -``` - - -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116164424278.png) -4. -``` - - -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116164438359.png) diff --git "a/\351\203\255\345\260\217\344\270\234/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\351\203\255\345\260\217\344\270\234/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" deleted file mode 100644 index d09d49fe80317ec4f922a05a5dd59d186ece91b1..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" +++ /dev/null @@ -1,127 +0,0 @@ -# 作业 -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116165147037.png) -1. -``` - - -``` -2. -``` - - -``` -3. -``` - - -``` -4. -``` - - -``` -5. -``` - - -``` -6. -``` - - -``` -7. -``` - - -``` diff --git "a/\351\203\255\345\260\217\344\270\234/20251117-\345\207\275\346\225\260.md" "b/\351\203\255\345\260\217\344\270\234/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index 536dd6c7bb076893f30d815baf8cc2381ae8abd8..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,89 +0,0 @@ -# 笔记 - -## 函数的定义 - -### 定义和调用 - -- 定义可指定形参 -- 调用的时候可任意指定实参,也可不指定 - -### 返回值 - -- 有return,则有返回值,而且通常不为undefined -- 无return,总是私下返回一个undefined - -## 流程控制 - -### 判断 - -- if(){} -- if(){}...else{} -- if(){}...else if(){}... -- if(){}...else if(){}...else -- switch(){case} - -### 循环 - -- for(let i = 0; i < 10; i++){} -- while(){} -- do{}...while{} - -# 练习示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251123141752373.png) - -# 练习 - -## 训练1 -``` - -``` - -## 训练2 -``` - -``` - -## 训练3 -``` - function compare(sun1,sun2){ - if(sun1 > sun2){ - document.write('
      较大的是'+sun1); - }else{ - document.write('
      较大的是'+sun2); - } - } - compare(9,10); -``` - -## 训练4 -``` - function mincompare(sun1,sun2,sun3){ - let min = sun1; - if(min > sun2){ - min = sun2; - } - if(min > sun3){ - min = sun3; - } - document.write('
      最小的是'+min); - - } - mincompare(16,12,17); -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251119-\345\207\275\346\225\260\344\270\216\345\257\271\350\261\241.md" "b/\351\203\255\345\260\217\344\270\234/20251119-\345\207\275\346\225\260\344\270\216\345\257\271\350\261\241.md" deleted file mode 100644 index 9b33f8acfdc9297c5d565d25bb5dbc8c972f6e4d..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251119-\345\207\275\346\225\260\344\270\216\345\257\271\350\261\241.md" +++ /dev/null @@ -1,217 +0,0 @@ -# 笔记 - -## 函数 - -### 函数的嵌套 -``` - function a(){ - alert('123'); - } - function b(){ - a(); - } - b(); -``` -### 递归函数 -递归函数就是函数在自身的函数体内调用自身. -``` - function fn(num){ - if(num <= 1){ - return 1; - }else{ - return fn(num-1)*num; - } - } - alert('10!的结果为'+fn(10)); -``` -### 内置函数 -#### 内置函数分为两类: 数值处理函数和字符串处理函数 -``` - 1. parselnt()函数 ——> 讲首位为数字的字符串转换成'数字' - - let str1 = "123mn"; - document.write(parselnt(str1)); ——>123 -``` -``` - 2. parseFloat()函数 ——> 讲首位为数字的字符串转换成'浮点型数字' - - let str1 = "123.45mn"; - document.write(parseFloat(str1)); ——>123.45 -``` -``` - 3.isNaN()函数 ——> 用于检验某个值是否为NaN - - let num1 = 456; - let num2 = "456mn "; - document.write(isNaN(str1)); ——> false - document.write(isNaN(str2)); ——> true -``` -``` - 4.isFinite() ——> 用于检验一个数值是否有限 - - document.write(isFinite(567)); ——>trun - document.write(isFinite(567mn)); ——>false - document.write(isFinite(10/0)); ——>false -``` -### 字符串处理函数 -``` - 1.eval函数 ——>计算字符串表达式的值 - - document.write(eval("5+7")) ——>12 - eval("x=7;y=9;document.write(x*y)"); ——>63 -``` -``` - 2.encodeURL()函数 ——>用于URL字符串进行编码 - - encodeURL(url); ——>对URL字符串进行编码并输出 -``` -``` - 3.decodeURL()函数 ——>用于对已编码进行解码 - - document.write(decodeURL(url)); ——>对编码后的URL字符串进行解码并输出 -``` -### 匿名函数 -``` - 格式: - let 变量名 = function(参数1,参数2,...){ - 函数体 - } - - 使用Function()构造函数 - let sum = new Function("x","y","alert(x+y);"); - sum(100,200) -``` - -# 作业 - -## 练习示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251123141228718.png) - -## 练习5 -``` - function price(score1,score2,score3){ - var consumption = score1 + score2 + score3; - return consumption; - } - function judgment(score1,score2,score3){ - var count = price(score1,score2,score3); - if(count >= 500){ - document.write('该用户可以享受优惠活动
      '); - }else{ - document.write('该用户不享受优惠活动
      '); - } - } - judgment(199,156,165); - -``` -## 练习6 -``` - function score(score1,score2,score3,score4){ - var totalScore = score1 + score2 + score3 + score4; - return totalScore; - } - function test(score1,score2,score3,score4){ - var testscore = score(score1,score2,score3,score4); - if(testscore >= 550){ - document.write('该学生成绩达到本科分数线
      '); - }else{ - document.write('该学生成绩未达到本科分数线
      '); - } - } - test(108,115,126,237); -``` -## 练习7 -``` - var logIn = function(user,pwd){ - if(user == 'mr' && pwd == 'mrsoft'){ - return '用户登入成功'; - }else{ - return '用户登入失败'; - } - } - document.write(logIn('mr','mrsoft')+'
      '); -``` -## 练习8 -``` - let sum = function(){ - let j = 0; - for(let i = 1; i <= 1000; i++){ - if( i % 3 == 0 && i % 5 == 0){ - document.write(i+' '); - j++; - if(j % 7 == 0){ - document.write('
      '); - } - } - } - } - sum(); -``` - -## 综合练习示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251123141327060.gif) - -## 综合练习 -``` - //综合练习1 - function age(score){ - if( 0 <= score && score <= 6){ - return '童年'; - }else if(7 <= score && score <= 17){ - return '少年'; - }else if(18 <= score && score <= 40){ - return '青年'; - }else if(41 <= score && score <= 65){ - return '中年'; - }else if(score >= 66){ - return '老年'; - } - } - alert('20岁正处在'+age(20)+'时期'); - - //综合练习2 - function getMonthDays(year,month){ - return new Date(year,month,0).getDate(); - - } - // alert('2024年6月有'+getMonthDays(2024,6)+'天'); - - //综合练习3 - function table(gettr,gettd){ - const table = document.createElement('table'); - table.border = '1'; - table.cellSpacing = '0'; - for(let i = 0; i <= gettr; i++ ){ - const tr = document.createElement('tr'); - for(let j = 0; j <= gettd; j++){ - const td = document.createElement('td'); - tr.appendChild(td); - } - table.appendChild(tr); - } - document.body.appendChild(table); - } - table(5,6); -``` - -## 斐波那契数列示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251123141346007.png) - - -## 斐波那契数列 - -``` - function fn(n){ - if(n == 1 || n == 2){ - return 1; - } - //初始化数组,包含前两项 - const sequence = [1,1]; - for(let i = 2;i < n; i++){ - const nextNumber = sequence[i - 1] + sequence[i - 2]; - sequence.push(nextNumber); - } - return sequence; - } - document.write(fn(8)); -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251120-\345\257\271\350\261\241.md" "b/\351\203\255\345\260\217\344\270\234/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index 649e7814866aa8c03f5702f754039ff42ecdf1fe..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,146 +0,0 @@ -# 笔记 -## 对象的概念 - - 对象可以理解一个容器,一个放属性和方法的容器 -``` - 创建对象的语法 - var 对象名 = { 属性1,属性2,属性3,属性4,属性5,......} -``` -## 操作对象 -``` - 访问属性:有俩种方式一种是“对象名.属性名”,一种是“对象名.[属性名]”. - - 添加属性:对象名.属性 = “值” - - 删除属性:delete 对象名.属性 - - 添加方法:方法名:function(){} -``` -## 遍历对象 -``` - for(let key in 对象名){ - - } -``` -## 内部对象 -``` - Math对象 - - Date对象 - - Event对象 -``` - -# 作业 - -## 练习 - -### 练习示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251123140210003.gif) - -### 练习1 -``` - let startDate_1 = new Date(2023,4,1); - let endDate_1 = new Date(2023,5,1); - let result_1 = endDate_1 - startDate_1; - let convert_1 = result_1 /(1000*60*60); - document.write("间隔"+convert_1+"小时
      "); -``` -### 练习2 -``` - let examDate = new Date(2023,5,7); - let now = new Date(); - let result_2 = examDate - now; - let convert_2 =Math.ceil(result_2/(1000*60*60*24)); - document.write("距离2023年高考还有"+convert_2+"天
      "); -``` -### 练习3 -``` - //训练3 - // 1. 获取页面的 body 元素,我们将在整个页面监听点击 - const pageBody = document.body; - - // 2. 为 body 添加 'mousedown' 事件监听器 - pageBody.addEventListener('mousedown', function(event) { - // 3. 定义一个变量来存储按键名称 - let buttonName; - - // 4. 根据 event.button 的值判断按键 - switch (event.button) { - case 0: - buttonName = "左键"; - break; - case 1: - buttonName = "滚轮键(中键)"; - break; - case 2: - buttonName = "右键"; - break; - default: - buttonName = "未知按键"; - } - - // 5. 弹出对话框显示结果 - alert(`你刚刚单击了鼠标${buttonName}。\n event.button 的值为: ${event.button}`); - }); -``` -### 综合示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251123140502129.gif) - -### 综合练习 - - -``` - -
      -

      请输入要生成随机数的位数:

      - - -
      - - -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251121-\345\206\205\351\203\250\345\257\271\350\261\241\344\270\216\346\225\260\347\273\204.md" "b/\351\203\255\345\260\217\344\270\234/20251121-\345\206\205\351\203\250\345\257\271\350\261\241\344\270\216\346\225\260\347\273\204.md" deleted file mode 100644 index 0925788b2d54a58199a760c7cf175e6482b46473..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251121-\345\206\205\351\203\250\345\257\271\350\261\241\344\270\216\346\225\260\347\273\204.md" +++ /dev/null @@ -1,195 +0,0 @@ -# 笔记 - -## 内部对象 - -### Math对象 - -#### 常用常量 - -- `Math.PI`:圆周率(约 3.14159) - -#### 数值运算方法 - -- `Math.abs(x)`:返回 x 的绝对值 - ```javascript - console.log(Math.abs(-5)); // 5 - ``` - -- `Math.ceil(x)`:向上取整(进一法) - ```javascript - console.log(Math.ceil(3.2)); // 4 - ``` - -- `Math.floor(x)`:向下取整(去尾法) - ```javascript - console.log(Math.floor(3.9)); // 3 - ``` - -- `Math.round(x)`:四舍五入取整 - ```javascript - console.log(Math.round(3.5)); // 4 - console.log(Math.round(3.4)); // 3 - `` - -- `Math.max(...values)`:返回一组数中的最大值 - ```javascript - console.log(Math.max(1, 5, 3)); // 5 - ``` - -- `Math.min(...values)`:返回一组数中的最小值 - ```javascript - console.log(Math.min(1, 5, 3)); // 1 - ``` - -- `Math.pow(x, y)`:返回 x 的 y 次幂 - ```javascript - console.log(Math.pow(2, 3)); // 8 - ``` - -- `Math.sqrt(x)`:返回 x 的平方根 - ```javascript - console.log(Math.sqrt(16)); // 4 - ``` - -- `Math.random()`:返回 0 到 1 之间的随机数(包含 0,不包含 1) - ```javascript - console.log(Math.random()); // 例如:0.456789 - // 生成1到10的随机整数 - console.log(Math.floor(Math.random() * 10) + 1); - ``` -### Date对象 - -Date 用于处理日期和时间,需要通过`new Date()`实例化使用。 - -#### 实例化方式 - -```javascript -new Date(); // 当前时间 -new Date(timestamp); // 时间戳(毫秒) -new Date(year, month, day, hours, minutes, seconds, milliseconds); // 指定日期 -new Date(dateString); // 日期字符串,如"2025-11-21" -``` - -#### 常用获取方法 - -- `getFullYear()`:获取年份(4 位数) - javascript - ```javascript - const now = new Date(); - console.log(now.getFullYear()); // 2025 - ``` - -- `getMonth()`:获取月份(0-11,0 代表 1 月) - javascript - ```javascript - console.log(now.getMonth() + 1); // 11(当前月份) - ``` - -- `getDate()`:获取日期(1- - javascript - ```javascript - console.log(now.getDate()); // 21 - ``` - -- `getHours()`:获取小时(0) - -- `getMinutes()`:获取分钟(0-59) - -- `getSeconds()`:获取秒数(0-59) - -- `getMilliseconds()`:获取毫秒数(0-999) - -- `getDay()`:获取星期几(0-6,0 代表周日) - javascript - ```javascript - console.log(now.getDay()); // 5(周五) - ``` - - - -- `getTime()`:获取时间戳(从 1970-01-01:00:00 UTC 到当前时间的毫秒数) - javascript - ```javascript - console.log(now.getTime()); - ``` - - - -#### 设置方法 - -- `setFullYear(year)`:设置年份 -- `setMonth(month)`:设置月份(0-11) -- `setDate(date)`:设置日期 -- `setHours(hours)`:设置小时 -- `setMinutes(minutes)`:设置分钟 -- `setSeconds(seconds)`:设置秒数 -- `setTime(timestamp)`:通过时间戳设置日期 - -#### 格式化方法 - -- `toString()`:转为字符串(如 "Fri Nov 21 2025 10:00:00 GMT+0800 (中国标准时间)") -- `toLocaleString()`:转为本地格式字符串(如 "2025/11/21 10:00:00") -- `toLocaleDateString()`:仅日期的本地格式(如 "2025/11/21") -- `toLocaleTimeString()`:仅时间的本地格式(如 "10:00:00") - -### Event对象 - -#### 常用属性 - -- `type`:事件类型(如 "click"、"keydown") -- `target`:触发事件的目标元素(事件源) -- `currentTarget`:绑定事件的元素(事件处理函数所属的元素) -- `clientX/clientY`:鼠标相对于视口的坐标(鼠标事件) -- `key`:按下的键盘按键值(键盘事件,如 "Enter"、"a") - -#### 常用方法 - -- `preventDefault()`:阻止事件的默认行为(如阻止 a 标签跳转、表单提交) - ```javascript - document.querySelector('a').addEventListener('click', (e) => { - e.preventDefault(); // 阻止链接跳转 - }); - ``` - -- `stopPropagation()`:阻止事件冒泡(阻止事件向父元素传播) - ```javascript - document.querySelector('.child').addEventListener('click', (e) => { - e.stopPropagation(); // 阻止事件冒泡到父元素 - console.log('子元素被点击'); - }); - ``` - -- `stopImmediatePropagation()`:阻止事件冒泡,且阻止当前元素后续的事件处理函数执行 - ```javascript - const btn = document.querySelector('button'); - btn.addEventListener('click', (e) => { - e.stopImmediatePropagation(); - console.log('第一个处理函数'); - }); - btn.addEventListener('click', () => { - console.log('第二个处理函数'); // 不会执行 - }); - ``` - -## 数组 - -### 定义数组 - -1. 定义空数组: arrayObject = new Array(); - -2. 指定数组长度: arrayObject = new Array(size); - -3. 指定数组元素: arrayObject = new Array(element1,element2,element3,...); - -4. 直接定义数组(最常用的): arraryObject = [element1,element2,element3,...]; - -### 数组的增删改查 - -1. push(a,b,c...); - -2. pop(); - -3. splice() - -4. - diff --git "a/\351\203\255\345\260\217\344\270\234/20251124-String\345\257\271\350\261\241.md" "b/\351\203\255\345\260\217\344\270\234/20251124-String\345\257\271\350\261\241.md" deleted file mode 100644 index 59b2e72541db158914d0844159a41cdc3af06930..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251124-String\345\257\271\350\261\241.md" +++ /dev/null @@ -1,106 +0,0 @@ -# 笔记 - -## String对象 - -### String对象的创建 -``` -var newstr = new String(StringText); -``` -### 格式化字符串 - -|方法|说明| -|--|--| -|anchor|创建HTML锚| -|big|使用大号字体显示字符串| -|small|使用小号字体显示字符串| -|fontsize|使用指定的字体显示大小| -|bold|使用粗体显示字符串| -|italics|使用斜体显示字符串| - -# 练习 -## 示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130162000946.png) - -## 练习1 -```js - //训练1——获取当前星期 - let weekDays = ['周日','周一','周二','周三','周四','周五','周六']; - let today = new Date(); - let year = today.getFullYear(); - const month = today.getMonth() + 1; - const date = today.getDate(); - let currentWeekDay = weekDays[today.getDay()]; - document.write(`今天是${year}年${month}月${date}日
      当前星期:${currentWeekDay}
      `); -``` -## 练习2 -```js - //训练2——获取最大值 - let arr1 = [5,7,6,3,9,2]; - Array.prototype.maxArray = function(){ - // 1. 处理空数组(避免无意义计算,返回 undefined 或抛出提示) - if(this.length === 0){ - return undefined; - } - // 2. 初始化最大值为数组第一个元素 - let max = this[0]; - for(let i = 1; i < this.length; i++){ - // 3. 遍历数组,对比更新最大值 - if(typeof this[i] === 'number' && !isNaN(this[i])){ - // 只对比数字类型(避免非数字干扰) - max = this[i] > max ? this[i] : max; - } - } - return max; - } - - document.write(`最大值为${arr1.maxArray()}
      `) -``` -## 练习3 -```js - //训练3——获取指定元素 - let arr2 = [1,2,3,4,5,6] - document.write(`数组获取到的值是${arr2}
      `) - document.write(`数组获取到指定的值是${arr2.slice(1,5)}
      `) -``` -## 综合练习1 -```js - //综合练习1 - let site = ['长春','昌图西','铁岭西','沈阳北','绥中北','北京']; - document.write("途径站:"+site.join(' ')+"
      "); - document.write("反向站:"+site.reverse().join(' ')+'
      '); -``` -## 综合练习2 -```js - - //综合练习2 - let arr = new Map([ - ["vivo", 19.2], - ["OPPO", 17.5], - ["小米", 13.9], - ["iPhone", 18], - ["荣耀", 16.7] - ]); - let sortedArr = Array.from(arr).sort((a, b) => { - return b[1] - a[1]; - }); - document.write(''); - document.write(''); - let rank = 1; - for (let [brand, share] of sortedArr) { - document.write(''); - document.write(``); - document.write(``); - document.write(``); - document.write(''); - rank++; - } - document.write('
      排名品牌市场份额
      ${rank}${brand}${share}%
      '); -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\351\203\255\345\260\217\344\270\234/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index aba9d96ce9e67ed172ff757d40ae1144e653e00f..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,140 +0,0 @@ -# 笔记 -## 正则表达式 - 正则表达式描述了一种字符串的匹配模式,即通过使用一系列普通字符串和特殊字符串来构建能够明确描述文本字符串的匹配模式,可以用来检查一个字符串是否含有某个字符串、将匹配的字符串替换或者从某个字符串中去除某个符合条件的字符串等。 - -## 正则表达式基本结构 -```js - /匹配对象的模式/ -``` - -## 正则表达式的作用 - - 1. 测试字符串的某个模式 - 2. 替换文本 - 3. 根据模式匹配 - -## 正则表达式语法 -书130~132 - -# 练习 -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130161829196.gif) -## 练习1 - -```js - //训练1 - let books = new Array("《雪山飞狐》", "《连城诀》", "《天龙八部》", "《射雕英雄传》", "《鹿鼎记》", "《笑傲江湖》", "《书剑恩仇录》", "《神雕侠侣》", "《倚天屠龙记》", "《碧血剑》"); - let fourBookName = ""; - for (let i = 0; i < books.length - 1; i++) { - if (books[i].length === 6) { - fourBookName += books[i] + ""; - } - } - document.write("4字小说:" + fourBookName + '
      '); - -``` -## 练习2 -```js - //训练2 - let mobileNumber = new Array("1330431****", "1567766****", "1304316****", "1526567****", "139****0431"); - let number0431 = ""; - for (let i = 0; i < mobileNumber.length; i++) { - if (mobileNumber[i].includes("0431")) { - number0431 += mobileNumber[i] + "、"; - } - } - document.write(`电话号包含0431有:${number0431}
      `); - -``` -## 练习3 -```js - //训练3 - let qqEmail = ["4006****66@qq.com", "1234****45@qq.com", "4567****89@qq.com"]; - let getEmail = ""; - for (let i = 0; i < qqEmail.length; i++) { - if (qqEmail[i].substr(0, 4) == "4006") { - getEmail += qqEmail[i] + " "; - } - } - document.write(`获取到的QQ邮箱:${getEmail}
      `); - - -``` -## 综合练习1 -```js - //综合练习1 - function isEmailValid(email) { - // 判断是否包含@,且@的位置不在开头和结尾 - let atIndex = email.indexOf('@'); - if (atIndex === -1 || atIndex === 0 || atIndex === email.length - 1) { - return false; - } - - // 判断@之后是否包含.,且.不在@的下一位、不在结尾 - let dotIndexAfterAt = email.indexOf('.', atIndex + 1); - if (dotIndexAfterAt === -1 || dotIndexAfterAt === atIndex + 1 || dotIndexAfterAt === email.length - 1) { - return false; - } - - return true; - } - - // 测试abc@sina.com - let testEmail = "abc@sina.com"; - if (isEmailValid(testEmail) === true) { - // alert(`注册邮箱符合要求`); - } else { - alert(`注册邮箱不符合要求`); - } -``` -## 综合练习2 -```js - //综合练习2 - function randomNum(Num) { - //定义需要的字符 - let Number = "0123456789ABCDEFG"; - // 用split拆分为字符数 组 - let splitNumber = Number.split(""); - let result = ""; - for (let i = 0; i < Num; i++) { - let randomIndex = Math.floor(Math.random() * splitNumber.length) - result += splitNumber[randomIndex]; - } - alert(result); - } - randomNum(6); -``` -## 综合练习3 -```js - //综合练习3 - function formatNumber(num) { - //方法1 - // const numStr = num.toString(); - // let reversed = numStr.split('').reverse().join(''); // 反转字符串:"66952631" - // let result = []; - - // // 每3位分割 - // for (let i = 0; i < reversed.length; i += 3) { - // result.push(reversed.slice(i, i + 3)); // ["669", "526", "31"] - // } - - // // 拼接逗号后反转回原顺序 - // return result.join(',').split('').reverse().join(''); // "13,625,966" - - //方法2 - // return new Intl.NumberFormat('en-US').format(num); - - //方法3 - let newStr = ""; - let numStr = num.toString(); - let d = 0; - for (let i = numStr.length - 1; i >= 0; i--) { - newStr = numStr[i] + newStr; - d++ - if (i != 0 && d % 3 == 0){ - newStr = "," + newStr; - } - } - return newStr; - } - document.write(`效果:${formatNumber(13625966)}`); -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251127-\345\274\202\345\270\270\345\244\204\347\220\206.md" "b/\351\203\255\345\260\217\344\270\234/20251127-\345\274\202\345\270\270\345\244\204\347\220\206.md" deleted file mode 100644 index 3deaf283e8a2085432aa1b92b45e6a448cb1b739..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251127-\345\274\202\345\270\270\345\244\204\347\220\206.md" +++ /dev/null @@ -1,132 +0,0 @@ -# 笔记 - -## 异常处理 - -### 异常处理用2种 - 1. onerror事件 - 2. try...ccatch...finally事件 - -### 异常类型 - - 一个程序通常会出现3种类型的异常,分别为语法异常、运行时的异常、和逻辑异常。 - -### 使用try...ccatch...finally语句处理异常 -```js - //格式 - try{ - somestatements; - - }catch(err){ - somestatements; - - }finally{ - somestatements; - - } -``` - try:尝试执行代码的关键字。 - catch:捕捉异常的关键字。 - finally:最终被处理的区块的关键字,该关键字和后面花括号中的语句可以省略。 - -### Error对象 - try...ccatch...finally语句中,catch捕捉到的对象通常为Error对象,在该对象中包含异常的描述信息。JavaScript定义了6种类型的异常. - -|异常类型|发生异常原因| -|--|--| -|EvalError|错误发生在eval()函数中| -|RangeError|数字的值超出JavaScript可表示的范围| -|ReferenceError|使用了非法的应用| -|SyntaxError|语法错误| -|TypeError|变量的类型错误| -|URLError|在encodeURL()函数或者decodeURL()函数中发生了错误| - -#### Error对象有以下2个属性: -1. name: 表示异常类型的字符串 -2. message: 实际的异常信息 - -# 练习 -## 练习1: -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130161355398.gif) -```js - try{ - let str = "我喜欢JavaScript"; - let sub1 = str.substr(a,5); - }catch(error){ - alert(`对象不支持此方法`); - }finally{ - - } -``` -## 练习2: -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130161355398.gif) -```js - try{ - let str = "我喜欢JavaScript"; - let sub1 = str.substr(a,5); - }catch(error){ - alert(`错误类型:${error.name}\n错误信息:${error.message}`); - }finally{ - - } -``` -## 综合练习1 -实例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130161144674.gif) -```js -let arrNum = ["A","B","C","D","E"]; - const btn = document.getElementById("btn"); - - btn.onclick = function(e){ - e.preventDefault(); - let num = Number(document.getElementById("numInput").value.trim()); - if(!Number.isInteger(num) || isNaN(num) || num < 1 || num > 5){ - alert("输入1~5的数字"); - return ; - } - document.getElementById("resInput").value = arrNum[num - 1]; - } -``` -## 综合练习2 -实例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130161459508.gif) -```js -let testBtn = document.getElementById("testBtn"); - testBtn.onclick = function(){ - try{ - let userName = document.getElementById("userName").value.trim(); - let passWord = document.getElementById("passWord").value.trim(); - - if(!passWord || !userName ){ - alert(`用户名和密码不能为空`); - } - let userNamereg = /^[a-zA-Z0-9_]{3,10}$/; - if(!userNamereg.test(userName)){ - throw new Error("用户名不符合要求(3-10位,仅字母/数字/下划线)"); - } - if(passWord == "123" && userName == "123"){ - alert(`登入成功`); - }else{ - alert(`用户名或密码错误`); - } - - }catch(error){ - alert(error.message); - } - } -``` -## 回车事件 -实例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130161555006.gif) -```js -let enterInput = document.getElementById("enter"); - enterInput.addEventListener("keydown",function(e){ - if(e.keyCode === 13){ - e.preventDefault(); - let inputValue = this.value.trim(); - if(!inputValue){ - alert(`输入内容不能为空!`); - return; - } - alert(`输入的内容是${inputValue}`); - - this.value = ""; - } - }); -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\351\203\255\345\260\217\344\270\234/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index b2a3af543f1219c6f4049edf78b61b58225f630c..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,161 +0,0 @@ -# 笔记 - -## 事件事件 - -### 概述 - - 1. 事件处理过程分为3步:1、发生事件;2、启动事件处理方程;3、事件处理程序做出反应。 - 2. 通常,事件处理器的命名原则是在事件名称加前缀欧尼,例如对于click事件,其处理器为onclick。 - -### 常用事件 - - 1. onclick——单击事件 - -### DOM事件模型——取消事件传递和默认处理 -```js -//取消游览器的事件传递 -function someHandle(event){ - event.stopPropagation(); -} -//取消事件传递后的默认处理 -function someHandle(event){ - event.preventDefault(); -} -``` - -# 练习 -## 示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130160119095.gif) -## 练习1 -```js -// 训练1 -
      - - function visible(cursor, i) { - if (i == 0) { - cursor.style.border = "none" - } else { - cursor.style.border = "5px solid black" - } - } -``` -## 示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130160250823.gif) -## 练习2 -```js -// 训练2 - function choose(event) { - if (event.key == "C") { - alert(`正确`); - } else { - alert(`错误`); - } - } - document.onkeydown = choose; - -

      中国的“国球”是( )

      -
      -
      A.篮球
      -
      B.排球
      -
      C.乒乓球
      -
      D.羽毛球
      -
      -``` -## 示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130160531570.gif) -## 练习3 -```js -// 训练3 - function getTime() { - let now = new Date(); - alert(now); - } -``` -## 示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130160531570.gif) -## 练习4 -```js -// 训练4 - function getWindowSize() { - let width = window.innerWidth; - let height = window.innerHeight; - alert(`窗口宽度:${width}px\n窗口高度:${height}px`) - } -``` -## 示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130160649395.gif) -## 练习5 -```js -// 训练5 - function color(event) { - let obj = event.target; - obj.style.background = "red"; - obj.onblur = function () { - obj.style.background = "blue"; - }; - } -``` -## 示例图: -![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251130160752359.gif) -## 练习6和训练7 -```js -// 训练6 - let yearSelect = document.getElementById('year'); - let currentYear = new Date().getFullYear(); - for(let i = currentYear ; i >= 1900; i--){ - let option = document.createElement('option'); - option.value = i; - option.textContent = i + '年'; - yearSelect.appendChild(option); - } - - function showBirth(){ - let year = yearSelect.value; - let month = document.getElementById('month').value; - let resultDom = document.getElementById('result'); - - if(year && month){ - let formatMonth = month.toString().padStart(2,'0'); - resultDom.textContent = `你的出生年月是:${year}年${formatMonth}月`; - }else{ - resultDom.textContent =''; - } - } - // 训练7 - function resetBirth(){ - document.getElementById('result').textContent=''; - return ture; - } - -
      - - - - - - - - - -
      -
      -``` - - diff --git "a/\351\203\255\345\260\217\344\270\234/20251201-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\351\203\255\345\260\217\344\270\234/20251201-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index dbdc5f8b6502c79f6cba2280105a3704d44164d7..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251201-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,431 +0,0 @@ -# 笔记 -## 一、事件处理核心概念 -### 1. 事件与事件流 -- **事件**:浏览器或用户在页面上触发的行为(如点击、鼠标移动、键盘输入、页面加载完成),是 JS 实现交互的核心。 -- **事件流**:事件触发后在 DOM 树中的传播过程,分为三个阶段: - 1. **捕获阶段(Capture Phase)**:事件从 `window` 向下传播到目标元素; - 2. **目标阶段(Target Phase)**:事件到达触发的目标元素; - 3. **冒泡阶段(Bubble Phase)**:事件从目标元素向上传播回 `window`。 - -### 2. 事件类型分类 -| 类别 | 常见事件 | 说明 | -|------|----------|------| -| 鼠标事件 | `click`、`dblclick`、`mouseover`、`mouseout`、`mousemove`、`mousedown`、`mouseup` | 鼠标相关操作 | -| 键盘事件 | `keydown`、`keyup`、`keypress`(已废弃) | 键盘按键操作 | -| 表单事件 | `submit`、`change`、`input`、`focus`、`blur` | 表单元素交互 | -| 文档/窗口事件 | `DOMContentLoaded`、`load`、`resize`、`scroll` | 文档加载、窗口尺寸变化/滚动 | -| 触摸事件 | `touchstart`、`touchmove`、`touchend` | 移动端触摸操作 | - -## 二、事件绑定方式(优先级从低到高) -### 1. HTML 内联绑定(不推荐) -直接在 HTML 标签中通过 `onxxx` 属性绑定,耦合度高,不利于维护,且存在 XSS 风险。 -```html - - - -``` - -### 2. DOM 元素属性绑定 -通过 JS 给元素的 `onxxx` 属性赋值,缺点是一个事件只能绑定一个处理函数(覆盖式)。 -```javascript -const btn = document.querySelector("button"); - -// 绑定事件 -btn.onclick = function() { - console.log("点击事件1"); -}; - -// 覆盖原有事件 -btn.onclick = function() { - console.log("点击事件2"); -}; - -// 移除事件 -btn.onclick = null; -``` - -### 3. addEventListener(推荐) -标准事件绑定方式,支持绑定多个事件处理函数,可控制事件传播阶段。 -#### 语法 -```javascript -element.addEventListener(eventName, handler, options/capture); -``` -- `eventName`:事件名(不含 `on`,如 `click` 而非 `onclick`); -- `handler`:事件处理函数(可传普通函数/箭头函数,注意 `this` 指向); -- `options/capture`:可选,布尔值(`true` 表示捕获阶段触发,`false` 冒泡阶段,默认 `false`)或配置对象: - - `capture`:同上; - - `once`:布尔值,事件触发一次后自动移除; - - `passive`:布尔值,声明事件处理函数不会调用 `preventDefault()`(优化移动端滚动性能)。 - -#### 示例 -```javascript -const btn = document.querySelector("button"); - -// 绑定多个事件处理函数 -function handleClick1() { - console.log("点击事件1", this); // this 指向触发事件的元素 -} -const handleClick2 = () => { - console.log("点击事件2", this); // 箭头函数 this 指向外层作用域(如 window) -}; - -btn.addEventListener("click", handleClick1); -btn.addEventListener("click", handleClick2, { once: true }); // 仅触发一次 - -// 移除事件(必须传绑定的同一个函数引用) -btn.removeEventListener("click", handleClick1); -``` - -### 三种方式对比 -| 绑定方式 | 优点 | 缺点 | -|----------|------|------| -| HTML 内联 | 简单直观 | 耦合高、可维护性差、易 XSS | -| DOM 属性 | 比内联解耦 | 只能绑定一个处理函数、无阶段控制 | -| addEventListener | 支持多函数、阶段控制、配置灵活 | 语法稍复杂、移除需相同函数引用 | - -## 三、事件对象(Event) -事件触发时,处理函数会自动接收一个 `Event` 对象,包含事件的详细信息和核心方法。 -### 1. 核心属性 -| 属性 | 说明 | -|------|------| -| `e.target` | 触发事件的**原始目标元素**(事件流中的目标节点) | -| `e.currentTarget` | 绑定事件的**当前元素**(即 `addEventListener` 的调用者) | -| `e.type` | 事件类型(如 `click`、`keydown`) | -| `e.clientX / e.clientY` | 鼠标相对于视口的坐标(鼠标事件) | -| `e.key` | 按下的键盘按键(键盘事件,如 `Enter`、`a`) | -| `e.code` | 键盘按键的物理编码(如 `KeyA`、`Enter`) | -| `e.preventDefault` | 方法:阻止事件的默认行为(如表单提交、链接跳转) | -| `e.stopPropagation` | 方法:阻止事件继续传播(捕获/冒泡) | -| `e.stopImmediatePropagation` | 方法:阻止事件传播 + 阻止当前元素后续事件处理函数执行 | - -### 2. 常用示例 -```javascript -// 阻止默认行为 -const link = document.querySelector("a"); -link.addEventListener("click", (e) => { - e.preventDefault(); // 阻止链接跳转 - console.log("链接被点击,不跳转"); -}); - -// 区分 target 和 currentTarget(事件委托场景) -document.addEventListener("click", (e) => { - console.log("触发元素:", e.target); // 点击的具体元素(如按钮) - console.log("绑定元素:", e.currentTarget); // document -}); - -// 键盘事件 -document.addEventListener("keydown", (e) => { - if (e.key === "Escape") { - console.log("ESC 键被按下"); - } -}); - -// 阻止事件冒泡 -const parent = document.querySelector(".parent"); -const child = document.querySelector(".child"); - -parent.addEventListener("click", () => console.log("父元素点击")); -child.addEventListener("click", (e) => { - e.stopPropagation(); // 阻止冒泡到父元素 - console.log("子元素点击"); -}); -``` - -## 四、事件委托(事件代理) -### 1. 核心原理 -利用事件冒泡机制,将子元素的事件绑定到父元素(甚至 `document`)上,通过 `e.target` 判断触发的子元素,实现批量元素的事件处理。 -### 2. 优势 -- 减少事件绑定次数,降低内存消耗; -- 支持动态添加的子元素(无需重新绑定事件)。 -### 3. 示例 -```html -
        -
      • 项目1
      • -
      • 项目2
      • -
      • 项目3
      • -
      - -``` - -```javascript -const list = document.getElementById("list"); -const addItem = document.getElementById("addItem"); - -// 事件委托:绑定到父元素 ul -list.addEventListener("click", (e) => { - // 判断是否点击了目标子元素 - if (e.target.classList.contains("item")) { - console.log("点击了项目:", e.target.textContent); - } -}); - -// 动态添加子元素(无需重新绑定事件) -addItem.addEventListener("click", () => { - const newLi = document.createElement("li"); - newLi.className = "item"; - newLi.textContent = `项目${list.children.length + 1}`; - list.appendChild(newLi); -}); -``` - -## 五、自定义事件 -除了浏览器内置事件,可手动创建自定义事件并触发,适用于组件通信、自定义交互逻辑。 -### 1. 创建并触发自定义事件 -```javascript -// 方式1:基础自定义事件 -const customEvent = new Event("myEvent", { - bubbles: true, // 是否冒泡 - cancelable: true // 是否可取消默认行为 -}); - -// 方式2:带自定义数据的事件(推荐) -const customEventWithData = new CustomEvent("myEventWithData", { - bubbles: true, - detail: { id: 123, msg: "自定义数据" } // 自定义数据 -}); - -// 绑定自定义事件 -const box = document.getElementById("box"); -box.addEventListener("myEventWithData", (e) => { - console.log("自定义事件触发", e.detail); // 输出 { id: 123, msg: "自定义数据" } -}); - -// 触发事件 -box.dispatchEvent(customEventWithData); -``` - -### 2. 全局自定义事件(跨组件) -```javascript -// 全局绑定 -document.addEventListener("globalEvent", (e) => { - console.log("全局自定义事件", e.detail); -}); - -// 任意位置触发 -document.dispatchEvent(new CustomEvent("globalEvent", { - detail: "全局数据" -})); -``` - -## 六、事件优化与注意事项 -### 1. 性能优化 -- **事件委托**:批量元素事件绑定到父元素,减少绑定次数; -- **防抖(Debounce)**:高频事件(如 `resize`、`scroll`、`input`)触发后延迟执行,避免频繁调用: - ```javascript - function debounce(fn, delay = 300) { - let timer = null; - return (...args) => { - clearTimeout(timer); - timer = setTimeout(() => fn.apply(this, args), delay); - }; - } - - // 使用防抖处理窗口缩放 - window.addEventListener("resize", debounce(() => { - console.log("窗口尺寸稳定后执行"); - }, 500)); - ``` -- **节流(Throttle)**:限制高频事件在指定时间内仅执行一次: - ```javascript - function throttle(fn, interval = 300) { - let lastTime = 0; - return (...args) => { - const now = Date.now(); - if (now - lastTime >= interval) { - fn.apply(this, args); - lastTime = now; - } - }; - } - - // 使用节流处理鼠标移动 - document.addEventListener("mousemove", throttle(() => { - console.log("鼠标移动(每秒最多3次)"); - }, 333)); - ``` -- **被动事件(passive)**:移动端触摸/滚动事件添加 `passive: true`,避免浏览器等待 `preventDefault()`,提升滚动流畅度: - ```javascript - document.addEventListener("touchmove", (e) => { - // 无需阻止默认行为时,passive 提升性能 - }, { passive: true }); - ``` - -### 2. 注意事项 -1. **this 指向**: - - 普通函数作为事件处理函数,`this` 指向触发事件的元素; - - 箭头函数的 `this` 指向外层作用域(如 `window`),如需访问元素可通过 `e.target`。 -2. **事件移除**: - - 使用 `addEventListener` 绑定的事件,必须用 `removeEventListener` 移除,且需传入同一个函数引用; - - 页面卸载前移除不必要的事件,避免内存泄漏(如监听 `window`/`document` 的事件)。 -3. **默认行为阻止**: - - 仅在需要时使用 `e.preventDefault()`,滥用会破坏原生交互(如表单提交、滚动); - - `passive: true` 时,`e.preventDefault()` 会失效,控制台会警告。 -4. **事件冒泡/捕获**: - - 大部分场景使用冒泡阶段(默认 `false`); - - 捕获阶段适用于需要优先处理父元素事件的场景(如事件拦截)。 - -## 七、常见场景示例 -### 1. 表单提交阻止默认行为 -```javascript -const form = document.querySelector("form"); -form.addEventListener("submit", (e) => { - e.preventDefault(); // 阻止表单默认提交 - // 手动处理表单数据 - const formData = new FormData(form); - console.log("表单数据:", Object.fromEntries(formData)); -}); -``` - -### 2. 鼠标右键自定义菜单 -```javascript -document.addEventListener("contextmenu", (e) => { - e.preventDefault(); // 阻止默认右键菜单 - const menu = document.getElementById("custom-menu"); - menu.style.left = `${e.clientX}px`; - menu.style.top = `${e.clientY}px`; - menu.style.display = "block"; -}); - -// 点击空白处关闭菜单 -document.addEventListener("click", () => { - document.getElementById("custom-menu").style.display = "none"; -}); -``` - -### 3. 移动端触摸滑动 -```javascript -let startX = 0; -document.addEventListener("touchstart", (e) => { - startX = e.touches[0].clientX; // 记录触摸起始位置 -}); - -document.addEventListener("touchmove", (e) => { - const moveX = e.touches[0].clientX - startX; - if (Math.abs(moveX) > 50) { - console.log(moveX > 0 ? "右滑" : "左滑"); - } -}, { passive: true }); -``` - -## 八、总结 -JS 事件处理是前端交互的核心,核心要点可归纳为: -1. **绑定方式**:优先使用 `addEventListener`,避免内联和 DOM 属性绑定; -2. **事件流**:理解捕获、目标、冒泡三阶段,灵活运用 `stopPropagation` 控制传播; -3. **事件对象**:熟练使用 `e.target`、`preventDefault`、`detail` 等核心属性/方法; -4. **性能优化**:事件委托、防抖/节流、被动事件提升交互体验; -5. **扩展能力**:自定义事件实现组件通信,满足复杂业务场景。 - -# 练习 -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207195843522.gif) -## 训练8 -```js -
      -
      - -
      -
      -
      - //练习8 - let img = document.getElementById("img"); - let eventTexts = { - dragover: " 1", - dragleave: " 2", - drop: " 3" - }; - let originalTitle = document.title; - function dragover(e) { - document.title = eventTexts.dragover; - e.preventDefault(); - } - function dragleave(e) { - e.preventDefault(); - // 更新标题为dragleave事件描述 - document.title = eventTexts.dragleave; - // 可选:延迟1秒恢复原标题(避免频繁切换) - setTimeout(() => { - if (document.title === eventTexts.dragleave) { - document.title = originalTitle; - } - }, 1000); - } - function drop(e) { - e.preventDefault(); - // const target = e.target.tagName === 'IMG' ? e.target.parentElement : e.target; - e.target.appendChild(img); - document.title = eventTexts.drop; - setTimeout(() => { - document.title = originalTitle; - }, 2000); - - } - document.body.addEventListener('dragleave', dragleave); -``` - -## 训练9 -```js -
      -
      -
      123
      -
      -
      -
      - let text = document.getElementById("text"); - function dropText(e) { - e.preventDefault(); - // const target = e.target.tagName === 'TABLE' ? e.target.parentElement : e.target; - e.target.appendChild(text); - } -``` - -## 综合练习1 -```js -
      - 欢迎购买明日科技图书 -
      - //综合练习1 - function enlarge(el, isHover) { - if (isHover) { - el.style.color = "red"; - el.style.transform = "scale(1.5)"; - el.style.transition = "all 0.3s"; - } else { - el.style.color = ""; - el.style.transform = ""; - el.style.transition = ""; - } - } -``` - -## 综合练习2 -```js - - //综合练习2 - function switchLamp() { - // document.body.style.background = "black"; - let body = document.body; - body.style.background = body.style.background == "black" ? "white" : "black"; - - let btn1 = document.getElementById("btn1"); - btn1.value = btn1.value == "关灯" ? "开灯" : "关灯"; - } -``` - -## 综合练习3 -```js - - //综合练习3 - function btnTest1() { - let btn2 = document.getElementById("btn2"); - btn2.style.backgroundColor = "green" - btn2.style.color = "white"; - } - function btnTest2() { - let btn2 = document.getElementById("btn2"); - btn2.style.backgroundColor = "" - btn2.style.color = ""; - } -``` diff --git "a/\351\203\255\345\260\217\344\270\234/20251203-Document\345\257\271\350\261\241.md" "b/\351\203\255\345\260\217\344\270\234/20251203-Document\345\257\271\350\261\241.md" deleted file mode 100644 index 899b1ee0cd196e11545b190d8a9e7e086bbb2392..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251203-Document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,350 +0,0 @@ -# 笔记 -## 一、Document 对象概述 -### 1. 核心概念 -`document` 是 JavaScript 中操作 HTML 文档的核心对象,属于 BOM(浏览器对象模型)的一部分,同时也是 DOM(文档对象模型)的根节点,代表整个 HTML/XML 文档。 - -- 它是 `window` 对象的属性,可通过 `window.document` 或直接 `document` 访问。 -- 所有页面元素(如 `
      `、``)都是 `document` 的子节点,通过它可实现对页面内容的查询、创建、修改、删除。 - -### 2. 核心作用 -- 查找/获取页面元素(DOM 节点)。 -- 创建新的 DOM 节点并插入页面。 -- 修改页面元素的内容、属性、样式。 -- 监听/触发文档级别的事件(如加载完成、点击)。 -- 操作文档的元信息(标题、Cookie、URL 等)。 - -## 二、Document 对象核心属性 -| 属性名 | 说明 | 示例 | -|--------|------|------| -| `document.documentElement` | 获取文档的根节点(`` 元素) | `const html = document.documentElement;` | -| `document.body` | 获取 `` 元素 | `document.body.style.backgroundColor = "red";` | -| `document.head` | 获取 `` 元素 | `const meta = document.head.querySelector("meta[name='viewport']");` | -| `document.title` | 获取/设置文档标题(`` 内容) | `document.title = "新标题";` | -| `document.URL` | 返回当前文档的完整 URL(只读) | `console.log(document.URL);` | -| `document.domain` | 返回当前文档的域名(只读) | `console.log(document.domain); // 如 "www.baidu.com"` | -| `document.cookie` | 获取/设置当前文档的 Cookie | `document.cookie = "username=zhangsan; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";` | -| `document.readyState` | 返回文档加载状态:<br>- `loading`:加载中<br>- `interactive`:可交互(DOM 加载完成)<br>- `complete`:完全加载(资源也完成) | `if (document.readyState === "complete") { /* 执行操作 */ }` | -| `document.activeElement` | 获取当前获得焦点的元素 | `console.log(document.activeElement); // 如 <input>` | - -## 三、获取 DOM 元素(高频方法) -### 1. 通过 ID 获取(唯一) -```javascript -// 获取 id 为 "box" 的元素,返回单个元素(无则 null) -const box = document.getElementById("box"); -``` - -### 2. 通过类名获取 -```javascript -// 获取所有 class 为 "item" 的元素,返回 HTMLCollection(伪数组) -const items = document.getElementsByClassName("item"); -// 转换为真数组 -const itemsArr = Array.from(items); -``` - -### 3. 通过标签名获取 -```javascript -// 获取所有 <div> 元素,返回 HTMLCollection -const divs = document.getElementsByTagName("div"); -``` - -### 4. 通过选择器获取(灵活) -#### 4.1 获取单个元素 -```javascript -// 匹配第一个符合选择器的元素,无则 null -const firstItem = document.querySelector(".item"); -const btn = document.querySelector("#btn"); -const link = document.querySelector("a[href='https://baidu.com']"); -``` - -#### 4.2 获取所有匹配元素 -```javascript -// 匹配所有符合选择器的元素,返回 NodeList(伪数组) -const allItems = document.querySelectorAll(".item"); -// 遍历 NodeList -allItems.forEach(item => { - console.log(item); -}); -``` - -### 方法对比 -| 方法 | 返回值 | 动态/静态 | 特点 | -|------|--------|-----------|------| -| `getElementById` | 单个元素 | - | 最快,仅匹配 ID | -| `getElementsByClassName` | HTMLCollection | 动态(DOM 变化自动更新) | 按类名匹配,伪数组 | -| `getElementsByTagName` | HTMLCollection | 动态 | 按标签名匹配 | -| `querySelector` | 单个元素 | 静态 | 支持 CSS 选择器,灵活 | -| `querySelectorAll` | NodeList | 静态 | 支持 CSS 选择器,批量匹配 | - -## 四、创建/插入/删除 DOM 节点 -### 1. 创建节点 -```javascript -// 创建元素节点(如 <div>) -const newDiv = document.createElement("div"); -// 设置内容和样式 -newDiv.textContent = "新创建的div"; -newDiv.className = "new-item"; - -// 创建文本节点(较少单独使用) -const textNode = document.createTextNode("纯文本内容"); - -// 创建属性节点(可直接用 setAttribute 替代) -const attrNode = document.createAttribute("data-id"); -attrNode.value = "123"; -newDiv.setAttributeNode(attrNode); -``` - -### 2. 插入节点 -| 方法 | 说明 | 示例 | -|------|------|------| -| `parent.appendChild(child)` | 将子节点添加到父节点的末尾 | `document.body.appendChild(newDiv);` | -| `parent.insertBefore(newNode, refNode)` | 将新节点插入到参考节点之前 | `const box = document.getElementById("box");`<br>`box.insertBefore(newDiv, box.firstChild);` | -| `element.replaceChild(newNode, oldNode)` | 替换节点 | `box.replaceChild(newDiv, box.children[0]);` | - -### 3. 删除节点 -```javascript -// 方式1:父节点删除子节点 -const box = document.getElementById("box"); -box.removeChild(box.children[0]); - -// 方式2:节点自身删除(ES6+) -const item = document.querySelector(".item"); -item.remove(); -``` - -### 4. 克隆节点 -```javascript -// 克隆节点:true 表示深克隆(包含子节点),false 仅克隆自身 -const cloneDiv = newDiv.cloneNode(true); -document.body.appendChild(cloneDiv); -``` - -## 五、操作文档内容 -### 1. 文本/HTML 内容 -```javascript -const box = document.getElementById("box"); - -// 设置/获取纯文本(推荐,避免 XSS) -box.textContent = "Hello World"; -console.log(box.textContent); // 输出 "Hello World" - -// 设置/获取 HTML 内容(有 XSS 风险,谨慎使用) -box.innerHTML = "<h1>Hello World</h1>"; -console.log(box.innerHTML); // 输出 "<h1>Hello World</h1>" -``` - -### 2. 属性操作 -```javascript -const input = document.querySelector("input"); - -// 设置属性 -input.setAttribute("type", "password"); -input.setAttribute("placeholder", "请输入密码"); - -// 获取属性 -const type = input.getAttribute("type"); // "password" - -// 判断是否存在属性 -if (input.hasAttribute("disabled")) { - input.removeAttribute("disabled"); -} - -// 自定义属性(data-*) -input.dataset.id = "456"; // 设置 data-id="456" -console.log(input.dataset.id); // "456" -``` - -## 六、文档事件 -### 1. 文档加载事件 -```javascript -// 方式1:DOM 加载完成(DOMContentLoaded)—— 无需等待资源加载 -document.addEventListener("DOMContentLoaded", () => { - console.log("DOM 已加载完成,可操作元素"); -}); - -// 方式2:页面完全加载(包括图片、样式等资源) -window.onload = () => { - console.log("页面所有资源加载完成"); -}; -``` - -### 2. 其他常用文档事件 -```javascript -// 点击事件(文档级别委托) -document.addEventListener("click", (e) => { - // 事件委托:判断点击的目标元素 - if (e.target.classList.contains("btn")) { - console.log("按钮被点击"); - } -}); - -// 键盘事件 -document.addEventListener("keydown", (e) => { - if (e.key === "Enter") { - console.log("回车键被按下"); - } -}); -``` - -## 七、常用工具方法 -| 方法 | 说明 | 示例 | -|------|------|------| -| `document.write()` | 直接向文档写入内容(慎用,会覆盖页面) | `document.write("<p>临时内容</p>");` | -| `document.querySelector()` | 见「获取 DOM 元素」 | - | -| `document.createElement()` | 见「创建节点」 | - | -| `document.getElementById()` | 见「获取 DOM 元素」 | - | -| `document.hasFocus()` | 判断文档是否获得焦点 | `console.log(document.hasFocus());` | -| `document.createElementNS()` | 创建命名空间元素(如 SVG) | `const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");` | - -## 八、注意事项 -1. **DOM 操作性能**:频繁操作 DOM 会触发重排/重绘,建议批量操作(如用 DocumentFragment 暂存节点): - ```javascript - const fragment = document.createDocumentFragment(); - for (let i = 0; i < 100; i++) { - const div = document.createElement("div"); - fragment.appendChild(div); - } - document.body.appendChild(fragment); // 仅一次重排 - ``` - -2. **空值判断**:获取元素后需先判断是否为 null,避免报错: - ```javascript - const box = document.getElementById("box"); - if (box) { // 非空才操作 - box.textContent = "内容"; - } - ``` - -3. **XSS 风险**:避免使用 `innerHTML` 插入不可信内容,优先用 `textContent`。 - -4. **动态 vs 静态集合**:`getElementsByClassName` 返回的 HTMLCollection 是动态的,遍历前建议转为数组,避免因 DOM 变化导致遍历异常。 - -## 九、总结 -`document` 对象是 JS 操作页面的核心,核心能力可归纳为: -- **查**:通过 ID、类名、选择器获取元素; -- **改**:修改元素内容、属性、样式; -- **增**:创建节点并插入文档; -- **删**:删除/替换节点; -- **监听**:处理文档加载、交互事件。 - -掌握以上内容可覆盖 90% 以上的 DOM 操作场景,实际开发中需结合性能优化(如减少 DOM 操作次数、事件委托)提升页面效率。 - -# 练习 -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207194859075.gif) -## 训练1 -```js - <div> - <input type="button" id="btn1" onclick="btnConvert()" value="交互颜色"> - 123 - </div> - //训练1 - function btnConvert() { - let body = document.body; - body.style.backgroundColor = "red"; - body.style.color = "white"; - } -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207194934172.png) -## 训练2 -```js - //训练2 - document.writeln("<br>当前文档的文件名称:" + document.URL); -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207195018898.gif) -## 训练3 -```js - <div> - <input type="text" id="txt"> - <input type="button" id="btn2" onclick="btnAdd()" value="添加文字"> - </div> - //训练3 - let str = '123456789'; - function btnAdd() { - let txt = document.getElementById("txt"); - // txt.value += "a"; - for (let i = 0; i < str.length; i++) { - setTimeout(() => { - txt.value = str.substring(0, i + 1); - }, i * 1000); - } - - } -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207195122065.gif) -## 综合练习1 -```js - <div id="box-colorTheme"> - <select name="colorTheme" id="colorTheme" onclick="chooseTheme()"> - <option value="a">请选择主题</option> - <option value="b">绿色主题</option> - </select> - <h2>标题</h2> - <span>文字</span> - <span>文字</span> - <span>文字</span> - <span>文字</span> - <span>文字</span> - </div> - //综合练习1 - function chooseTheme() { - let box = document.querySelector("#colorTheme").value; - let body = document.getElementById("box-colorTheme"); - if (box == "a") { - body.style.backgroundColor = ""; - body.style.color = ""; - } else if (box == "b") { - body.style.backgroundColor = "green"; - body.style.color = "white"; - } - } -``` - -## 综合练习2 -```js - <a href="#" id="img" onclick="openImg(event)">打开图片对话框</a> - //综合练习2 - function openImg(e) { - e.preventDefault(); - let imgDiv = document.createElement("div"); - imgDiv.style.width = "100px"; - imgDiv.style.height = "100px"; - imgDiv.style.border = "1px solid #000"; - imgDiv.style.float = "left"; - - let deleteBtn = document.createElement("input"); - deleteBtn.type = "button"; - deleteBtn.value = "X删除"; - deleteBtn.style.cssText = "float:right; border: none; background: transparent;"; - deleteBtn.onclick = () => document.body.removeChild(imgDiv); - - let img = document.createElement("img"); - img.src = "#"; - - imgDiv.appendChild(img); - imgDiv.appendChild(deleteBtn); - document.body.appendChild(imgDiv); - - } -``` - -## 综合练习3 -```js - <input type="button" id="addImg" onclick="addImg()" value="添加用户头像"> - //综合练习3 - function addImg() { - let imgDiv = document.createElement("div"); - imgDiv.style.cssText = "width:100px; height:100px; border:1px solid #000 " - imgDiv.style.float = "left"; - document.body.appendChild(imgDiv); - - let img = document.createElement("img"); - img.src = "#"; - imgDiv.appendChild(img); - - for (let i = 1; i < 3; i++) { - setTimeout(() => { - document.body.appendChild(imgDiv.cloneNode(true)); - }, i * 1000); - } - - } -``` diff --git "a/\351\203\255\345\260\217\344\270\234/20251204-DOM.md" "b/\351\203\255\345\260\217\344\270\234/20251204-DOM.md" deleted file mode 100644 index 1994d520754299b66a7a54e753acf473298c77ff..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251204-DOM.md" +++ /dev/null @@ -1,403 +0,0 @@ -# 笔记 -## DOM概述 - - DOM是document object model 的缩写,意为文档对象模型. - -## 节点 - -### 节点种类 - - - 根节点 - - 父节点 - - 子节点 - - 兄弟节点 - - 后代 - - 叶节点 -### 节点属性 - -|属性|说明|属性|说明| -|-|-|-|-| -|nodeName|节点的名称|firstChild|返回当前节点的第一个子节点| -|nodeValue|节点的值,通常只用于文本节点|lastChild|返回当前节点的最后一个子节点| -|nodeType|节点的类型|previousSibling|返回当节点的前一个兄弟节点| -|parentNode|返回当前节点的父节点|lasnextSiblingtChild|返回当节点的后一个兄弟节点| -|childNodes|子节点列表|attribuites|元素的属性列表| - -### 创建节点 -```js -obj.appendchild(newChild); -``` -### 插入节点 -```js -obj.insertBefore(new,ref); -``` -### 复制节点 -```js -obj.cloneNode(deep); -``` -### 删除与替换节点 -```js -obj.removeChild(oldChild); -``` -## 获取文档中的指定元素 -### 通过元素的id属性获取元素 -```js -document.getElementByid("id"); -``` -### 通过元素的class属性获取元素 -```js -document.getElementByClassName("id"); -``` -## 与DHTML相对应的DOM -### innerHTML 和 innerText属性 -```js - document.getElementByid("id").innerHTML = "内容"; -``` -### outerHTML 和 outerText属性 -```js - document.getElementByid("id").outerHTML = "内容"; -``` - -# 练习 -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207192913368.gif) -## 训练1 -```js - <div id="box1"> - <input type="text" name="" id="box1-inputText"> - <select id="selectColor"> - <option value="a">选择颜色</option> - <option value="b">红色</option> - <option value="c">蓝色</option> - </select> - <input type="button" value="添加" onclick="addColor()"> - <div id="box1-1"></div> - </div> - - function addColor() { - let txt = document.getElementById("box1-inputText"); - let selectColor = document.querySelector("#selectColor"); - let color = selectColor.value; - let span = document.createElement('span'); - if (color == "a") { - span.style.color = ""; - } else if (color == "b") { - span.style.color = "red"; - } else if (color == "c") { - span.style.color = "blue"; - } - let getText = txt.value; - let txtNode = document.createTextNode(getText); - span.appendChild(txtNode); - - document.getElementById("box1-1").appendChild(span); - - txt.value = ""; - - } -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207193119444.gif) -## 训练2、训练3 -```js - <div id="box2"> - <div id="box2-1"> - <ul id="box2-ul"> - <li>1</li> - <li>2</li> - <li>3</li> - <li>4</li> - </ul> - </div> - <div id="box2-2"> - <input type="text" id="box2-inputText"> - <input type="button" value="添加" onclick="addText()"> - <input type="button" value="删除" onclick="deleteText()"> - </div> - - </div> - // 训练2 - function addText() { - - let txt = document.getElementById('box2-inputText'); - let li = document.createElement('li'); - let ul = document.getElementById("box2-ul"); - - let getText = txt.value; - getText = getText.trim(); - let txtNode = document.createTextNode(getText); - li.appendChild(txtNode); - - - let str = ['1', '2', '3', '4', '5'] - - - if (str.includes(getText)) { - ul.appendChild(li); - } else { - alert(getText === "" ? "请输入内容" : "请输入正确内容"); - } - - - - txt.value = ""; - } - - //训练3 - function deleteText() { - let ul = document.getElementById('box2-ul'); - let txt = document.getElementById('box2-inputText'); - - - let getText = txt.value.trim(); - - let liList = ul.querySelectorAll("li"); - - for (let i = 0; i < liList.length; i++) { - let li = liList[i] - if (li.textContent.trim() === getText) { - ul.removeChild(liList[i]); - txt.value = ""; - return; - } - } - - - // let targetLi = null; - // // 5. 遍历查找匹配文本的li - // for (let li of liList) { - // // li.textContent 获取li的纯文本内容(等价于文本节点的nodeValue) - // if (li.textContent.trim() === getText) { - // targetLi = li; - // break; // 找到第一个匹配的li,停止遍历 - // } - // } - } - -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207193202321.gif) -## 训练4 -```js - <div id="box4"> - <div id="box4-1"> - <ul id="vegetables"> - <li>1</li> - <li>1</li> - <li>2</li> - </ul> - <ul id="fruit"> - <li>2</li> - <li>2</li> - <li>1</li> - </ul> - </div> - <div id="box4-2"> - <input type="button" value="移动" onclick="moveFood()"> - </div> - </div> - function moveFood() { - let vegUl = document.getElementById("vegetables"); - let fruUl = document.getElementById("fruit"); - - let vegLastLi = vegUl.lastElementChild; - let fruLastLi = fruUl.lastElementChild; - - vegUl.replaceChild(fruLastLi.cloneNode(true), vegLastLi); - fruUl.replaceChild(vegLastLi.cloneNode(true), fruLastLi); - // vegUl.replaceChild(fruLastLi, vegLastLi); - // fruUl.appendChild(vegLastLi); - - - } -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207193253854.gif) -## 训练5 -```js - <div id="box5"> - <h3>在《倚天屠龙记》中,张三丰是______派的掌门?</h3> - <div id="box5-1"> - <input type="radio" name="box5-radio" value="少林">A.少林 - <input type="radio" name="box5-radio" value="武当">B.武当 - <input type="radio" name="box5-radio" value="峨眉">C.峨眉 - <input type="radio" name="box5-radio" value="昆仑">D.昆仑 - </div> - <input type="button" value="提交答案" onclick="btnSubmit()"> - </div> - function btnSubmit() { - let radio = document.querySelectorAll('input[name="box5-radio"]'); - let radioValue = null; - for (let i = 0; i < radio.length; i++) { - //核心:判断当前单选框是否被选中 - if (radio[i].checked) { - radioValue = radio[i].value; - break; - } - } - console.log(radioValue); - - if (radioValue === "武当") { - alert("答案正确"); - - } else if (!radioValue) { - alert("请选择一个答案!"); - } else { - alert("答案错误"); - } - } -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207193349290.gif) -## 训练6 -```js - <div id="box6"> - <a href="" id="alink">超链接:</a> - <input type="button" value="修改" onclick="btnEdit()"> - </div> - //训练6 - function btnEdit() { - let alink = document.getElementById("alink"); - alink.innerHTML = "修改后的超链接"; - alink.href = "123"; - document.getElementById("box6").appendChild(aLink); - - } -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207193436569.gif) -## 训练7 -```js - <div id="box7"> - <div id="box7-1"></div> - <input type="button" value="添加" onclick="btnAdd()"> - </div> - //训练7 - function btnAdd() { - let img = document.getElementById("box7-1"); - img.innerHTML += "<img src='https://c-ssl.duitang.com/uploads/blog/202307/11/q4S7lZMeixNVEMj.jpg' alt='' style='height:100%; width:100%; object-fit: cover;'>"; - img.style.cssText = "height:200px; width:200px; border: 1px solid black;"; - // let addImg = img.appendChild(img); - - } -``` -示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251207193948220.gif) -## 综合练习1 -```js - <div id="box1"> - <div id="box1-1"> - <b>医生挚爱异人</b> - </div> - <a href="#" onclick="aEdit()">将粗体改为斜体</a> - - </div> - // 综合练习1 - function aEdit() { - let bText = document.getElementById("box1-1"); - let newItext = document.createElement("i"); - newItext.textContent = bText.children[0].textContent; - bText.replaceChild(newItext, bText.children[0]); - } -``` - -## 综合练习2 -```js - <div id="box2"> - <select name="" id="year"></select> - <select name="" id="month"></select> - <select name="" id="day"></select> - </div> - function aEdit() { - let bText = document.getElementById("box1-1"); - let newItext = document.createElement("i"); - newItext.textContent = bText.children[0].textContent; - bText.replaceChild(newItext, bText.children[0]); - } - // 综合练习2 - let year = document.getElementById("year"); - let month = document.getElementById("month"); - let day = document.getElementById("day"); - - //年 - function initYear() { - let now = new Date(); - let currentYear = now.getFullYear(); - for (let i = 1990; i <= currentYear; i++) { - let option = document.createElement("option"); - option.value = i; - option.textContent = i + "年"; - year.appendChild(option); - } - year.value = currentYear; - } - - //月 - function initMonth() { - let now = new Date(); - let currenMonth = now.getMonth(); - for (let i = 1; i <= 12; i++) { - let option = document.createElement("option"); - option.value = i; - option.textContent = i + "月"; - month.appendChild(option); - } - month.value = currenMonth; - } - - //日 - function initDay() { - let selectYear = parseInt(year.value); - let selectMonth = parseInt(month.value); - let selectDay = new Date(selectYear, selectMonth, 0).getDate(); - day.innerHTML = ""; - for (let i = 1; i <= selectDay; i++) { - let option = document.createElement("option"); - option.value = i; - option.textContent = i + "日"; - day.appendChild(option); - } - let currentDay = new Date().getDate(); - day.value = currentDay > selectMonth ? selectMonth : currentDay; - } - // 联动 - year.addEventListener("change", function () { - initDay(); - }) - month.addEventListener("change", initDay); - //引用 - initYear(); - initMonth(); - initDay(); -``` - -## 综合练习3 -```js - <div id="box3"> - <b>请选择表情</b> - <select name="" id="selImg"> - <option value="1">选择表情</option> - <option value="2">龙图</option> - <option value="3">熊猫人</option> - </select> - <div id="box3-1"></div> - </div> - // 综合练习3 - function selectImg() { - let selImg = document.querySelector("#selImg")?.value; - let img = document.getElementById("box3-1"); - console.log(selImg); - console.log(img); - - - if (selImg == 2 && img) { - img.innerHTML = "<img src='https://c-ssl.duitang.com/uploads/blog/202307/11/q4S7lZMeixNVEMj.jpg' alt='' style='height:200px; width:200px; object-fit: cover;'>"; - } else if (selImg == 3 && img) { - img.innerHTML = "<img src='https://c-ssl.duitang.com/uploads/item/202003/24/20200324005850_usyfo.jpg' alt='' style='height:200px; width:300px; object-fit: cover;'>"; - } else if (img) { - img.innerHTML = ""; - } - - } - document.addEventListener("DOMContentLoaded", function () { - selectImg(); // 保留原执行逻辑 - // 新增:绑定下拉框change事件 - const selImgEle = document.querySelector("#selImg"); - if (selImgEle) { - selImgEle.addEventListener("change", selectImg); - } - }) -``` diff --git "a/\351\203\255\345\260\217\344\270\234/20251205-Window\345\257\271\350\261\241.md" "b/\351\203\255\345\260\217\344\270\234/20251205-Window\345\257\271\350\261\241.md" deleted file mode 100644 index 47461ed0aa712d0d53945afd4da7ba16138cff9a..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251205-Window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,441 +0,0 @@ -# 笔记 -## 一、Window 对象概述 -### 1. 核心定位 -`window` 是 JavaScript 中 **BOM(浏览器对象模型)的顶层对象**,代表浏览器的一个窗口或标签页,是 JS 与浏览器交互的核心桥梁。 - -- 它是全局作用域的载体,所有全局变量、全局函数都会自动成为 `window` 的属性和方法。 -- 调用 `window` 的属性或方法时,可省略 `window` 前缀(如 `alert()` 等价于 `window.alert()`)。 -- 每个窗口/标签页对应一个独立的 `window` 对象,不同窗口的 `window` 互不干扰(受跨域限制)。 - -### 2. 核心作用 -- 控制浏览器窗口(打开、关闭、调整大小)。 -- 操作浏览器地址栏、历史记录。 -- 实现弹窗交互(提示、确认、输入)。 -- 管理定时器、本地存储。 -- 监听窗口级事件(加载、缩放、滚动)。 -- 承载全局变量和函数。 - -## 二、Window 核心子对象(高频) -### 1. document(DOM 桥梁) -`window.document` 是连接 BOM 与 DOM 的桥梁,代表当前页面的文档对象,用于操作页面 DOM 结构。 -```javascript -// 示例:获取页面元素(省略 window 前缀) -document.querySelector("#box"); -document.body.style.backgroundColor = "red"; -``` - -### 2. location(地址栏操作) -`window.location` 用于操作浏览器地址栏,控制页面导航和 URL 相关操作,核心属性和方法如下: -| 属性/方法 | 说明 | 示例 | -|-----------|------|------| -| `href` | 获取/设置完整 URL(常用页面跳转) | `location.href = "https://example.com";` | -| `host` | 返回域名 + 端口号 | `console.log(location.host); // 如 "www.baidu.com:80"` | -| `hostname` | 返回域名(不含端口) | `console.log(location.hostname); // "www.baidu.com"` | -| `pathname` | 返回 URL 中的路径部分 | `console.log(location.pathname); // 如 "/index.html"` | -| `search` | 返回 URL 中的查询参数(?后面部分) | `console.log(location.search); // 如 "?id=123"` | -| `hash` | 返回 URL 中的哈希值(#后面部分) | `console.log(location.hash); // 如 "#top"` | -| `reload()` | 刷新当前页面 | `location.reload(); // 强制刷新加 true:location.reload(true)` | -| `replace(url)` | 替换当前页面(不保留历史记录,无法后退) | `location.replace("https://example.com");` | - -### 3. history(历史记录管理) -`window.history` 用于操作浏览器的历史记录,实现页面前进、后退功能。 -| 方法 | 说明 | 示例 | -|------|------|------| -| `back()` | 后退到上一页(等价于浏览器“后退”按钮) | `history.back();` | -| `forward()` | 前进到下一页(等价于浏览器“前进”按钮) | `history.forward();` | -| `go(n)` | 跳转到历史记录中指定位置(n 为正数前进,负数后退) | `history.go(-2); // 后退2页` | -| `length` | 属性,返回历史记录的条数 | `console.log(history.length); // 查看当前窗口的历史记录总数` | - -### 4. navigator(浏览器/设备信息) -`window.navigator` 用于获取浏览器和当前设备的相关信息,常用属性如下: -```javascript -// 获取浏览器名称(部分浏览器会隐藏真实名称) -console.log(navigator.appName); - -// 获取浏览器版本信息 -console.log(navigator.appVersion); - -// 获取用户代理字符串(常用于判断浏览器类型和设备) -console.log(navigator.userAgent); - -// 判断是否为移动设备(通过用户代理匹配) -const isMobile = /Mobile|Android|iOS/.test(navigator.userAgent); -console.log(isMobile ? "移动设备" : "桌面设备"); - -// 获取当前浏览器支持的语言 -console.log(navigator.language); // 如 "zh-CN" -``` - -### 5. screen(屏幕信息) -`window.screen` 用于获取显示器屏幕的相关信息,常用属性如下: -```javascript -// 屏幕总宽高(包括任务栏等系统组件) -console.log(screen.width, screen.height); - -// 屏幕可用宽高(不包括任务栏,实际可显示区域) -console.log(screen.availWidth, screen.availHeight); - -// 屏幕颜色深度 -console.log(screen.colorDepth); // 通常为 24(表示真彩色) -``` - -## 三、Window 核心方法 -### 1. 窗口控制方法 -用于控制浏览器窗口的打开、关闭、移动和大小调整,**仅对通过 `open()` 打开的自定义窗口生效**(外部域名窗口受跨域限制)。 -| 方法 | 说明 | 示例 | -|------|------|------| -| `open(url, target, features)` | 打开新窗口/标签页,返回新窗口的 `window` 对象 | `const newWin = open("https://example.com", "_blank", "width=500,height=500,top=100,left=100");` | -| `close()` | 关闭指定窗口(需通过 `open()` 返回的窗口对象调用) | `newWin.close();` | -| `moveTo(x, y)` | 将窗口移动到屏幕指定坐标(x/y 为屏幕左上角起点) | `newWin.moveTo(200, 200);` | -| `resizeTo(w, h)` | 将窗口调整为指定宽高 | `newWin.resizeTo(600, 400);` | - -### 2. 弹窗交互方法 -用于与用户进行简单交互,弹出提示、确认或输入框(样式受浏览器限制,自定义程度低)。 -| 方法 | 说明 | 示例 | -|------|------|------| -| `alert(msg)` | 弹出提示框(只有“确定”按钮) | `alert("操作成功!");` | -| `confirm(msg)` | 弹出确认框(有“确定”和“取消”按钮),返回布尔值 | `const isConfirm = confirm("确定要删除吗?");` | -| `prompt(msg, defaultVal)` | 弹出输入框,返回用户输入的内容(取消则返回 null) | `const username = prompt("请输入用户名:", "默认用户名");` | - -### 3. 定时器方法 -用于延迟执行代码或定期执行代码,是前端常用的异步操作方式。 -#### 3.1 一次性定时器(setTimeout) -延迟指定时间后执行一次代码,返回定时器 ID(用于清除定时器)。 -```javascript -// 语法:setTimeout(回调函数, 延迟时间(毫秒), 传递给回调的参数) -const timer1 = setTimeout((name) => { - console.log(`Hello ${name}`); -}, 1000, "张三"); - -// 清除一次性定时器(未执行前有效) -clearTimeout(timer1); -``` - -#### 3.2 周期性定时器(setInterval) -每隔指定时间重复执行代码,返回定时器 ID。 -```javascript -// 语法:setInterval(回调函数, 间隔时间(毫秒)) -const timer2 = setInterval(() => { - console.log("每隔2秒执行一次"); -}, 2000); - -// 清除周期性定时器(必须手动清除,否则会一直执行) -clearInterval(timer2); -``` - -### 4. 本地存储方法 -用于在浏览器中存储数据(无过期时间,仅在当前域名下有效),核心有两种方式: -#### 4.1 localStorage(永久存储) -数据存储在浏览器中,除非手动删除,否则永久保留,容量约 5MB。 -```javascript -// 存储数据(键值对,值必须是字符串) -localStorage.setItem("username", "zhangsan"); -localStorage.setItem("age", 20); // 自动转为字符串 "20" - -// 获取数据 -const username = localStorage.getItem("username"); -console.log(username); // "zhangsan" - -// 删除指定数据 -localStorage.removeItem("age"); - -// 清空所有数据 -localStorage.clear(); -``` - -#### 4.2 sessionStorage(会话存储) -数据仅在当前会话(窗口/标签页)有效,关闭窗口后数据自动删除,容量约 5MB。 -```javascript -// 用法与 localStorage 一致,仅存储时效不同 -sessionStorage.setItem("token", "abc123"); -const token = sessionStorage.getItem("token"); -sessionStorage.removeItem("token"); -``` - -## 四、Window 常用事件 -### 1. 页面加载事件 -| 事件 | 说明 | 示例 | -|------|------|------| -| `load` | 页面**完全加载完成**(包括图片、样式、脚本等所有资源)后触发 | `window.onload = () => { console.log("页面全部加载完成"); }` | -| `DOMContentLoaded` | DOM 结构加载完成(无需等待图片、样式等资源)后触发,比 `load` 更早 | `document.addEventListener("DOMContentLoaded", () => { console.log("DOM 加载完成"); });` | - -### 2. 窗口尺寸事件 -```javascript -// 窗口大小发生变化时触发(如缩放浏览器) -window.addEventListener("resize", () => { - // 获取窗口可视区域宽高(常用) - const winWidth = window.innerWidth; - const winHeight = window.innerHeight; - console.log(`窗口宽:${winWidth}px,高:${winHeight}px`); -}); -``` - -### 3. 页面滚动事件 -```javascript -// 页面滚动时触发(如滚动鼠标滚轮) -window.addEventListener("scroll", () => { - // 获取页面滚动的距离(垂直方向) - const scrollTop = window.scrollY; - // 获取页面滚动的距离(水平方向) - const scrollLeft = window.scrollX; - console.log(`垂直滚动:${scrollTop}px`); -}); -``` - -### 4. 其他常用事件 -- `beforeunload`:页面关闭或刷新前触发,可提示用户确认离开。 -- `hashchange`:URL 中的哈希值(#后面部分)变化时触发,常用于单页应用路由。 - -## 五、注意事项 -1. **全局变量与 window 的关系**:用 `var` 声明的全局变量会成为 `window` 的属性,用 `let`/`const` 声明的全局变量不会(但仍在全局作用域中)。 - ```javascript - var a = 10; - console.log(window.a); // 10(var 声明会挂载到 window) - - let b = 20; - console.log(window.b); // undefined(let 声明不会挂载) - ``` - -2. **跨域限制**:不同域名的窗口,无法通过 `window` 对象相互操作(如获取对方的 `location`、调用对方的方法),浏览器会拦截跨域操作以保障安全。 - -3. **定时器清除**:周期性定时器(`setInterval`)必须手动用 `clearInterval` 清除,否则会一直执行,导致内存泄漏。 - -4. **弹窗限制**:现代浏览器对 `open()` 弹出的窗口有拦截策略,仅在用户交互(如点击事件)中调用 `open()`,才能正常弹出窗口。 - -5. **存储数据格式**:`localStorage` 和 `sessionStorage` 仅能存储字符串,存储对象/数组时需先转为 JSON 字符串,读取时再解析。 - ```javascript - // 存储对象 - const user = { name: "张三", age: 20 }; - localStorage.setItem("user", JSON.stringify(user)); - - // 读取对象 - const userData = JSON.parse(localStorage.getItem("user")); - ``` - -## 六、总结 -`window` 对象是 JS 操作浏览器的核心,核心能力可归纳为: -- **窗口控制**:打开、关闭、调整窗口大小。 -- **导航操作**:通过 `location` 跳转页面、`history` 管理历史记录。 -- **信息获取**:通过 `navigator`/`screen` 获取浏览器、设备信息。 -- **交互能力**:弹窗交互、定时器、本地存储。 -- **事件监听**:监听页面加载、窗口缩放、滚动等事件。 - -# 练习 - -## 训练1 -```html -<!-- 训练1 --> - <audio controls id="audio"> - <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"> - <source src="horse.ogg" type="audio/ogg"> - </audio> -``` -```js -// 训练1 -document.querySelector('#audio').addEventListener('play', () => { - alert('只有会员才能播放歌曲,请登录!'); - audio.pause(); -}) -``` -## 训练2 -```html - <!-- 训练2 --> - - <a href="#" onclick="aBtn()">退出登录</a> -``` -```js -// 训练2 -function aBtn() { - alert("您确定退出登录吗") -} -``` -## 训练3 -```html -<!-- 训练3 --> -<img id="img" onclick="imgBtn()" - src="https://ts1.tc.mm.bing.net/th/id/R-C.6f18e58bf3bacbcee226cb76dfc089a3?rik=61%2bMLnhOzFiZOg&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2014%2f07%2f085628m6c.jpg&ehk=v1vDvzVgPRc3irw6n%2bs5gF%2b5SEc1uCstErDhRaxqlgE%3d&risl=&pid=ImgRaw&r=0" - alt="影片封面"> -<!-- 弹窗容器 --> -<div class="modal-mask" id="modalMask"> - <div class="modal-content"> - <span class="close-btn" onclick="closeModal()">×</span> - <!-- 影片详情内容 --> - <h2>603字母节目</h2> - <p><strong>导演:</strong>wrh</p> - <p><strong>主演:</strong>wrh,lct</p> - <p><strong>剧情简介:</strong>神秘刺激的字母情节</p> - </div> -</div> -``` -```js -// 训练3 -function imgBtn() { - let modal = document.getElementById('modalMask'); - modal.style.display = 'flex'; -} -function closeModal() { - let modal = document.getElementById('modalMask'); - modal.style.display = 'none'; // 隐藏弹窗 -} -``` -## 训练4 -```html - -``` -```js -// 训练4 -let window4 = window.open("new.html", "new", "height=200,width=200"); -setTimeout(() => { - window4.close(); - -}, 5000); -``` -## 训练5 -```html -<!-- 训练5 --> -<div class="open"> - <input type="button" onclick="openBtn()" value="打开窗口"> -</div> -``` -```js -// 训练5 -function openBtn() { - let window4 = window.open("new.html", "new", "height=200,width=200"); - setTimeout(() => { - let currentX = window4.screenX; - let currentY = window4.screenY; - let targetY = currentY + 200; // 最终向下移200px - let step = 5; // 每帧移动5px(越小越平滑) - - // 逐帧移动 - let moveTimer = setInterval(() => { - currentY += step; - // 到达目标位置后停止 - if (currentY >= targetY) { - currentY = targetY; - clearInterval(moveTimer); - } - window4.moveTo(currentX, currentY); - }, 16); // 约60帧/秒,保证流畅 - }, 2000); -} -``` -## 训练6 -```html -<!-- 训练6 --> -<div> - <input type="text" id="box6-text"> - <input type="button" onclick="startTimingBtn()" value="开始计时"> - <input type="button" onclick="endTimingBtn()" value="结束计时"> -</div> -``` -```js -// 训练6 -let txt = document.getElementById("box6-text"); -let time = 1; -let timer1 = null, timer2 = null; - - -function startTimingBtn() { - timer1 = setInterval(() => { - txt.value = time; - }, 1000); - - timer2 = setInterval(() => { - time++; - return time; - }, 1000); -} -function endTimingBtn() { - clearInterval(timer1); - clearInterval(timer2); - timer1 = null; - timer2 = null; -} -``` -## 综合练习1 -```html - <!-- 综合练习1 --> - <input type="button" onclick="btnCalculate()" value="计算"> -``` -```js -// 综合练习1 -function btnCalculate() { - let num1, num2; - num1 = Math.floor(Math.random() * 10); - num2 = Math.floor(Math.random() * 10); - let correctAnswer = num1 + num2; - let answer; - let dialog1 = prompt(`${num1}+${num2}=`, answer); - if (dialog1 === null) { - alert("你取消了答题~"); - return; - } - answer = Number(dialog1); - if (answer == correctAnswer) { - let dialog2 = confirm(`回答正确是否继续答题`); - if (dialog2) { - btnCalculate(); - } else { - let dialog3 = alert(`您拒绝了继续答题`); - return; - } - } else { - alert("回答错误"); - } -} -``` -## 综合练习2 -```html - <!-- 综合练习2 --> - <input type="button" onclick="btnChoose()" value="选择"> -``` -```js -// 综合练习2 -function btnChoose() { - let correctAnswer = "D"; - let answer; - let dialog1 = prompt("2024年奥运会在那座城市举办?\n\n\nA.罗马\nB.北京\nC.伦敦\nD.巴黎", answer); - answer = String(dialog1); - console.log(answer); - - if (answer == correctAnswer) { - alert("答案正确"); - } else { - alert("答案错误"); - } -} -``` -## 综合练习3 -```html - <!-- 综合练习3 --> - <input type="button" onclick="btnAddPicture()" value="添加"> - <div id="div1"></div> -``` -```js -// 综合练习3 -function btnAddPicture() { - let img = ["./OIP-C.webp", "./OIP-C2.webp", "OIP-C3.jpg", "OIP-C4.webp", "OIP-C5.jpg"]; - let imgContainer = document.getElementById("div1"); - imgContainer.innerHTML = ""; - for (let i = 0; i < img.length; i++) { - - setTimeout(() => { - console.log(i); - let addimg = document.createElement("img"); - addimg.style.width = "100px" - // addimg.style.height = "100px" - addimg.src = img[i]; - document.getElementById("div1").appendChild(addimg); - if (i == img.length - 1) { - - setTimeout(() => { - btnAddPicture(); - }, 1000); - } - }, i * 1000); - } - - -} -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251208-\346\270\270\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\351\203\255\345\260\217\344\270\234/20251208-\346\270\270\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index d2a169bfc7a467a01773e0bbbb33dab85d920123..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251208-\346\270\270\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,292 +0,0 @@ -# 笔记 - -## 一、BOM 概述 - -### 1. 定义 - -BOM(Browser Object Model,浏览器对象模型)是用于操作浏览器窗口及浏览器组件的 API 集合,**无官方统一标准**(不同浏览器略有差异),核心作用是与浏览器本身交互(而非页面内容)。 - -### 2. BOM 与 DOM 的区别 - -| 维度 | BOM(浏览器对象模型) | DOM(文档对象模型) | -| -------- | ------------------------------------ | ------------------------------------ | -| 操作对象 | 浏览器窗口、地址栏、历史记录等 | 页面 HTML/XML 文档内容(标签、文本) | -| 核心对象 | window(顶级)、location、history 等 | document(根节点)、element、node 等 | -| 标准 | 无统一标准,浏览器自定义实现 | W3C 标准化,跨浏览器兼容性好 | -| 示例操作 | 页面跳转、弹窗、获取浏览器信息 | 新增标签、修改样式、绑定事件 | - -## 二、BOM 核心对象 - -### 1. window 对象(核心) - -`window` 是 BOM 的顶级对象,代表浏览器窗口,**所有全局变量 / 函数都是 window 的属性 / 方法**(可省略 `window.` 直接调用)。 - -#### 核心属性 - -| 属性名 | 说明 | 示例 | -| ------------------------ | ----------------------------------------- | --------------------------------------- | -| `document` | 指向 DOM 的根对象,操作页面内容 | `window.document.getElementById('box')` | -| `location` | 管理当前页面 URL 信息 | `window.location.href` | -| `navigator` | 获取浏览器 / 系统信息 | `window.navigator.userAgent` | -| `history` | 管理浏览器历史记录 | `window.history.back()` | -| `screen` | 获取屏幕显示信息 | `window.screen.width` | -| `innerWidth/innerHeight` | 浏览器视口(可视区域)宽 / 高(不含边框) | `console.log(window.innerWidth)` | - -#### 核心方法 - -| 方法名 | 说明 | 示例 | -| --------------------------- | ----------------------------------------------- | ------------------------------------------------------------ | -| `alert(msg)` | 弹出提示框(无返回值) | `alert('操作成功')` | -| `confirm(msg)` | 弹出确认框(返回布尔值:确认→true,取消→false) | `let res = confirm('确定删除?');` | -| `prompt(msg, default)` | 弹出输入框(返回输入内容 /null) | `let name = prompt('请输入姓名', '张三');` | -| `open(url, name, params)` | 打开新窗口(params:宽高 / 位置等) | `window.open('https://www.baidu.com', '_blank', 'width=500,height=300')` | -| `close()` | 关闭当前窗口(仅对 `open` 打开的窗口有效) | `window.close()` | -| `setTimeout(fn, delay)` | 一次性定时器(delay:毫秒) | `let timer = setTimeout(() => {console.log('1秒后执行')}, 1000);` | -| `clearTimeout(timer)` | 清除一次性定时器 | `clearTimeout(timer)` | -| `setInterval(fn, interval)` | 循环定时器 | `let timer = setInterval(() => {console.log('每秒执行')}, 1000);` | -| `clearInterval(timer)` | 清除循环定时器 | `clearInterval(timer)` | - -### 2. location 对象 - -`window.location`(可简写为 `location`)用于管理当前页面的 URL 信息,支持跳转、刷新等操作。 - -#### 核心属性(URL 拆解示例:`https://www.baidu.com:8080/search?name=张三#top`) - -| 属性名 | 说明 | 示例值 | -| ---------- | ------------------ | ------------------------------------------------- | -| `href` | 完整 URL | `https://www.baidu.com:8080/search?name=张三#top` | -| `protocol` | 协议(含 `://`) | `https:` | -| `host` | 主机 + 端口 | `www.baidu.com:8080` | -| `hostname` | 主机(不含端口) | `www.baidu.com` | -| `port` | 端口号 | `8080` | -| `pathname` | 路径 | `/search` | -| `search` | 查询参数(含 `?`) | `?name=张三` | -| `hash` | 哈希锚点(含 `#`) | `#top` | - -#### 核心方法 - -| 方法名 | 说明 | 示例 | -| --------------- | ---------------------------------------- | ------------------------------------------- | -| `assign(url)` | 跳转到指定 URL(保留历史记录,可后退) | `location.assign('https://www.baidu.com')` | -| `replace(url)` | 替换当前 URL(无历史记录,不可后退) | `location.replace('https://www.baidu.com')` | -| `reload(force)` | 刷新页面(force=true:强制从服务器刷新) | `location.reload(true)` | - -#### 实战示例:解析 URL 查询参数 - -javascript - - - -运行 - - - - - - - - - -```javascript -// 解析 ?name=张三&age=18 为对象 {name: '张三', age: '18'} -function getUrlParams() { - const params = {}; - const search = location.search.slice(1); // 去掉?,得到name=张三&age=18 - if (!search) return params; - search.split('&').forEach(item => { - const [key, value] = item.split('='); - params[key] = decodeURIComponent(value); // 解码中文 - }); - return params; -} -console.log(getUrlParams()); // {name: '张三', age: '18'} -``` - -### 3. navigator 对象 - -`window.navigator`(可简写为 `navigator`)用于获取浏览器、操作系统、设备等信息。 - -#### 核心属性 - -| 属性名 | 说明 | 示例 | -| ----------- | ----------------------------------- | --------------------- | -| `userAgent` | 用户代理字符串(浏览器 / 系统标识) | `navigator.userAgent` | -| `language` | 浏览器默认语言(如 zh-CN) | `navigator.language` | -| `platform` | 操作系统平台(如 Win32、MacIntel) | `navigator.platform` | - -#### 实战示例:判断浏览器类型 - -javascript - - - -运行 - - - - - - - - - -```javascript -// 判断是否为 Chrome 浏览器 -function isChrome() { - return /Chrome/.test(navigator.userAgent) && !/Edge/.test(navigator.userAgent); -} -console.log(isChrome()); // true/false -``` - -### 4. history 对象 - -`window.history`(可简写为 `history`)用于管理浏览器的会话历史记录(仅能操作,无法获取具体 URL)。 - -#### 核心方法 - -| 方法名 | 说明 | 示例 | -| ----------- | --------------------------------------------------------- | ---------------------------- | -| `back()` | 后退一页(等同于浏览器后退按钮) | `history.back()` | -| `forward()` | 前进一页(等同于浏览器前进按钮) | `history.forward()` | -| `go(n)` | 跳转指定步数(n>0:前进 n 页;n<0:后退 n 页;n=0:刷新) | `history.go(-1)` // 后退一页 | - -### 5. screen 对象 - -`window.screen`(可简写为 `screen`)用于获取设备屏幕的显示信息。 - -#### 核心属性 - -| 属性名 | 说明 | 示例 | -| ------------------------ | ------------------------------------- | ------------------------------- | -| `width/height` | 屏幕总分辨率(宽 / 高) | `screen.width` // 如 1920 | -| `availWidth/availHeight` | 屏幕可用分辨率(不含任务栏 / 状态栏) | `screen.availHeight` // 如 1080 | - -## 三、BOM 常用实战场景 - -### 1. 弹窗交互(确认 + 输入) - -javascript - - - -运行 - - - - - - - - - -```javascript -// 确认删除并输入原因 -function deleteConfirm() { - const isConfirm = confirm('确定要删除这条记录吗?'); - if (isConfirm) { - const reason = prompt('请输入删除原因(选填)', ''); - if (reason !== null) { // 取消输入返回null - alert(`删除成功!原因:${reason || '无'}`); - } - } -} -deleteConfirm(); -``` - -### 2. 页面倒计时跳转 - -javascript - - - -运行 - - - - - - - - - -```javascript -// 5秒后跳转到首页 -let count = 5; -const timer = setInterval(() => { - count--; - if (count <= 0) { - clearInterval(timer); - location.href = '/index.html'; - } - console.log(`${count}秒后跳转...`); -}, 1000); -``` - -### 3. 判断移动端 / PC 端 - -javascript - - - -运行 - - - - - - - - - -```javascript -function isMobile() { - return /Mobile|Android|iOS|iPhone|iPad|iPod/.test(navigator.userAgent); -} -if (isMobile()) { - alert('当前为移动端访问'); -} else { - alert('当前为PC端访问'); -} -``` - -## 四、注意事项 - -1. **兼容性问题**:BOM 无统一标准,部分 API(如 `userAgent` 格式、`open` 方法参数)在不同浏览器(如 IE/Chrome/Firefox)中表现有差异,需做兼容处理。 - -2. 全局作用域 - - : - - - `var` 声明的全局变量 / 函数会成为 `window` 的属性; - - `let/const` 声明的全局变量不会挂载到 `window` 上。 - - javascript - - - - 运行 - - - - - - - - - - ```javascript - var a = 1; - let b = 2; - console.log(window.a); // 1 - console.log(window.b); // undefined - ``` - - - -3. **弹窗拦截**:浏览器会拦截非用户触发的 `window.open`(如直接在脚本中调用),需绑定到点击 / 触摸等用户事件中。 - -4. **定时器精度**:`setTimeout/setInterval` 受主线程阻塞影响,并非绝对精确(延迟时间≥设置值)。 - -5. **窗口操作限制**:`close` 方法仅能关闭由 `open` 打开的窗口,无法关闭用户手动打开的浏览器窗口。 - -6. **安全限制**:部分 BOM API(如 `history`、`location`)受同源策略限制,跨域无法操作。 \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251210-Style\345\257\271\350\261\241.md" "b/\351\203\255\345\260\217\344\270\234/20251210-Style\345\257\271\350\261\241.md" deleted file mode 100644 index 8f4ec689fd099a94314022d3d395146d14f22f68..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251210-Style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,336 +0,0 @@ - -# 笔记 -## 一、Style 对象概述 -### 1. 定义 -Style 对象是 JavaScript 操作 DOM 元素**行内样式(inline style)** 的核心接口,对应 HTML 元素的 `style` 属性。通过 Style 对象可动态读取/修改元素的 CSS 样式,所有样式属性均为可读可写。 - -### 2. 核心特点 -| 特性 | 说明 | -|--------------|----------------------------------------------------------------------| -| 操作范围 | 仅作用于元素的行内样式(`style="xxx"`),不包含外部样式表/内嵌样式的样式 | -| 属性命名 | 驼峰命名法(对应 CSS 的短横线命名),如 `css` 的 `background-color` → `js` 的 `backgroundColor` | -| 取值格式 | 所有属性值均为字符串,且需包含单位(如 `10px`、`red`、`50%`)| -| 优先级 | 行内样式优先级最高(高于 CSS 选择器),会覆盖同名的外部/内嵌样式 | - -### 3. Style 对象 vs getComputedStyle -| 对比维度 | Style 对象 | window.getComputedStyle() | -|----------------|-------------------------------------|------------------------------------| -| 操作类型 | 读写(可修改样式)| 只读(仅获取最终生效的样式)| -| 样式范围 | 仅行内样式 | 所有样式(行内/内嵌/外部)| -| 返回值格式 | 带单位的字符串(如 `20px`)| 带单位的字符串(如 `20px`)| -| 适用场景 | 动态修改元素样式 | 获取元素最终渲染的样式值 | - -## 二、Style 对象核心用法 -### 1. 获取 Style 对象 -通过 DOM 元素的 `style` 属性直接获取,语法: -```javascript -// 获取元素 -const elem = document.getElementById("box"); -// 获取 Style 对象(可直接操作) -const elemStyle = elem.style; -``` - -### 2. 样式属性命名规则 -CSS 样式属性名含短横线的,需转为**驼峰命名**;无短横线的直接使用: - -| CSS 属性名 | Style 对象属性名 | 示例 | -|---------------------|------------------------|-------------------------------| -| `width` | `width` | `elem.style.width = "100px"` | -| `background-color` | `backgroundColor` | `elem.style.backgroundColor = "red"` | -| `font-size` | `fontSize` | `elem.style.fontSize = "16px"` | -| `border-radius` | `borderRadius` | `elem.style.borderRadius = "8px"` | -| `text-align` | `textAlign` | `elem.style.textAlign = "center"` | -| `margin-top` | `marginTop` | `elem.style.marginTop = "5px"` | - -### 3. 读取/修改样式 -#### (1)修改样式(核心) -直接给 Style 对象的属性赋值(值为带单位的字符串): -```javascript -const box = document.getElementById("box"); -// 基础样式 -box.style.width = "200px"; -box.style.height = "100px"; -box.style.backgroundColor = "#f5f5f5"; -// 复合样式(需拆分,Style 对象不支持复合写法) -// ❌ 错误:不支持 "border: 1px solid #000" 复合写法 -box.style.border = "1px solid #000"; // 部分浏览器兼容,但不推荐 -// ✅ 推荐拆分写法 -box.style.borderWidth = "1px"; -box.style.borderStyle = "solid"; -box.style.borderColor = "#000"; -// 特殊样式(如 transform) -box.style.transform = "rotate(10deg)"; -box.style.transition = "all 0.3s ease"; -``` - -#### (2)读取样式(仅行内样式) -```javascript -// 仅能读取通过 style 设置的行内样式,无行内样式则返回空字符串 -console.log(box.style.width); // "200px"(已设置) -console.log(box.style.color); // ""(未设置行内样式) -``` - -#### (3)获取最终生效的样式(含非行内) -需结合 `window.getComputedStyle()`: -```javascript -// 获取最终渲染的样式(只读) -const computedStyle = window.getComputedStyle(box); -console.log(computedStyle.width); // "200px" -console.log(computedStyle.color); // "#333"(来自外部样式表) -// 转为数字(去除单位) -const widthNum = parseInt(computedStyle.width); // 200 -const heightNum = parseFloat(computedStyle.height); // 100 -``` - -### 4. 清除样式 -#### (1)清空单个样式 -赋值为空字符串: -```javascript -box.style.backgroundColor = ""; // 清除背景色行内样式,恢复默认/外部样式 -``` - -#### (2)清空所有行内样式 -使用 `removeAttribute` 移除 `style` 属性: -```javascript -box.removeAttribute("style"); // 清空所有行内样式 -``` - -## 三、Style 对象常用属性分类 -### 1. 布局相关属性 -| Style 属性名 | 说明 | 示例值 | -|--------------------|--------------------|-----------------------| -| `width/height` | 宽/高 | `"100px"`、`"50%"` | -| `minWidth/minHeight` | 最小宽/高 | `"50px"` | -| `maxWidth/maxHeight` | 最大宽/高 | `"300px"` | -| `margin/marginTop/marginRight/marginBottom/marginLeft` | 外边距 | `"10px"`、`"5px 10px"` | -| `padding/paddingTop/paddingRight/paddingBottom/paddingLeft` | 内边距 | `"8px"` | -| `display` | 显示方式 | `"block"`、`"none"`、`"flex"`、`"inline-block"` | -| `position` | 定位方式 | `"static"`、`"relative"`、`"absolute"`、`"fixed"`、`"sticky"` | -| `top/left/right/bottom` | 定位偏移量 | `"20px"`、`"0"` | -| `zIndex` | 层级 | `"999"`、`"1"` | -| `float` | 浮动 | `"left"`、`"right"`、`"none"` | -| `clear` | 清除浮动 | `"both"`、`"left"` | - -### 2. 视觉样式属性 -| Style 属性名 | 说明 | 示例值 | -|--------------------|--------------------|-----------------------| -| `backgroundColor` | 背景色 | `"red"`、`"#fff"`、`"rgba(0,0,0,0.5)"` | -| `backgroundImage` | 背景图 | `"url('bg.jpg')"` | -| `color` | 文字颜色 | `"#333"`、`"white"` | -| `border` | 边框(复合)| `"1px solid #000"` | -| `borderRadius` | 圆角 | `"8px"`、`"50%"`(圆形) | -| `boxShadow` | 盒子阴影 | `"0 2px 8px rgba(0,0,0,0.2)"` | -| `opacity` | 透明度(0-1)| `"0.8"` | -| `cursor` | 鼠标光标 | `"pointer"`、`"move"`、`"default"` | - -### 3. 文字/字体属性 -| Style 属性名 | 说明 | 示例值 | -|--------------------|--------------------|-----------------------| -| `fontSize` | 字体大小 | `"14px"`、`"1.2rem"` | -| `fontWeight` | 字体粗细 | `"normal"`、`"bold"`、`"600"` | -| `fontFamily` | 字体 | `"微软雅黑, sans-serif"` | -| `textAlign` | 文字对齐 | `"left"`、`"center"`、`"right"` | -| `textDecoration` | 文字装饰 | `"none"`、`"underline"`、`"line-through"` | -| `lineHeight` | 行高 | `"20px"`、`"1.5"` | - -### 4. 变换/过渡属性 -| Style 属性名 | 说明 | 示例值 | -|--------------------|--------------------|-----------------------| -| `transform` | 变换 | `"rotate(10deg)"`、`"scale(1.2)"`、`"translateX(20px)"` | -| `transition` | 过渡 | `"all 0.3s ease"`、`"backgroundColor 0.5s"` | -| `animation` | 动画 | `"fade 1s infinite"` | - -## 四、实战示例 -### 1. 动态修改元素样式(鼠标悬浮效果) -```javascript -const btn = document.getElementById("btn"); -// 鼠标悬浮 -btn.addEventListener("mouseover", () => { - btn.style.backgroundColor = "#007bff"; - btn.style.color = "white"; - btn.style.cursor = "pointer"; - btn.style.transform = "scale(1.05)"; -}); -// 鼠标离开 -btn.addEventListener("mouseout", () => { - btn.style.backgroundColor = ""; - btn.style.color = ""; - btn.style.transform = ""; -}); -``` - -### 2. 批量设置列表项样式 -```javascript -const liItems = document.querySelectorAll("li"); -liItems.forEach((li, index) => { - // 基础样式 - li.style.paddingLeft = "10px"; - li.style.margin = "5px 0"; - li.style.borderRadius = "0 10px 10px 0"; - // 交替背景色 - li.style.backgroundColor = index % 2 === 0 ? "#f0f0f0" : "#fff"; -}); -``` - -### 3. 获取元素最终样式并计算偏移 -```javascript -const box = document.getElementById("box"); -// 获取最终样式 -const computed = window.getComputedStyle(box); -// 计算元素实际宽度(含内边距,不含边框) -const innerWidth = parseInt(computed.width); -const paddingLeft = parseInt(computed.paddingLeft); -const paddingRight = parseInt(computed.paddingRight); -const actualWidth = innerWidth + paddingLeft + paddingRight; -console.log(`元素实际内容宽度:${actualWidth}px`); -``` - -### 4. 动态调整文本框高度 -```javascript -const textarea = document.getElementById("textarea"); -const increaseBtn = document.getElementById("increaseBtn"); -// 增高按钮 -increaseBtn.addEventListener("click", () => { - const currentHeight = parseInt(window.getComputedStyle(textarea).height); - textarea.style.height = (currentHeight + 50) + "px"; -}); -``` - -## 五、注意事项 -1. **单位必须加**:所有数值型样式(如 width、margin)必须带单位(px/%/rem 等),否则无效: - ```javascript - box.style.width = 100; // ❌ 无效(无单位) - box.style.width = "100px"; // ✅ 有效 - ``` -2. **复合样式慎用**:Style 对象对 `border`、`background` 等复合样式的支持不一致,推荐拆分为单个属性(如 `borderWidth`、`borderColor`)。 -3. **优先级问题**:行内样式优先级最高,若需覆盖 Style 对象设置的样式,需在 CSS 中使用 `!important`,或直接清空行内样式。 -4. **CSS 变量操作**:可通过 `style.setProperty`/`style.getPropertyValue` 操作 CSS 变量: - ```javascript - // 设置 CSS 变量 - box.style.setProperty("--main-color", "blue"); - // 读取 CSS 变量 - const mainColor = box.style.getPropertyValue("--main-color"); // "blue" - ``` -5. **兼容性**: - - 部分属性(如 `transform`)在旧版浏览器需加前缀(`webkitTransform`、`mozTransform`); - - `getComputedStyle` 不支持 IE8 及以下,需用 `elem.currentStyle` 兼容。 -6. **空值处理**:读取未设置的行内样式会返回空字符串,需先判断再使用: - ```javascript - const color = box.style.color || "#333"; // 兜底默认值 - ```const color = box.style.color || "#333"; // 兜底默认值 - - -# 练习 - -## 训练1 -```html - -<input type="button" value="放大" onclick="btnEnlarge()"> - <div> - <span id="txt">鸡你太美</span> - </div> -``` -```js -function btnEnlarge() { - let size = 2; - let txt = document.getElementById("txt"); - let currentFontSize = window.getComputedStyle(txt).fontSize; - let fontSizeNum = parseFloat(currentFontSize); - let newFontSize = (fontSizeNum + size) + "px"; - txt.style.fontSize = newFontSize; - - let clior = getComputedStyle(txt).clior; - - - let random1 = Math.floor(Math.random() * 256); - let random2 = Math.floor(Math.random() * 256); - let random3 = Math.floor(Math.random() * 256); - txt.style.clior = `rgb(${random1},${random2},${random3})`; - conslie.log(clior); -} -``` - -## 训练2 -```html - <div id="box2"></div> - -``` -```js -// 训练2 -function cssImg() { - let img = document.createElement('img'); - img.src = "../20251205/OIP-C5.jpg"; - img.style.width = "100px"; - document.getElementById("box2").appendChild(img); - - img.addEventListener('mouseover', function () { - this.style.border = "5px double blue"; - this.style.boxSizing = "border-box"; - }) - - img.addEventListener('mouseout', function () { - this.style.border = 'none'; - }) -} -``` - -## 综合练习1 -```html -<div id="box3"> - <ul id="box3-ul"> - <li>HTML/CSS讨论区</li> - <li>JavaScript讨论区</li> - <li>C语言讨论区</li> - <li>Java讨论区</li> - <li>Android讨论区</li> - <li>Python讨论区</li> - </ul> -</div> -``` -```js -// 训练1 -function btnEnlarge() { - let size = 2; - let txt = document.getElementById("txt"); - let currentFontSize = window.getComputedStyle(txt).fontSize; - let fontSizeNum = parseFloat(currentFontSize); - let newFontSize = (fontSizeNum + size) + "px"; - txt.style.fontSize = newFontSize; - - let clior = getComputedStyle(txt).clior; - - - let random1 = Math.floor(Math.random() * 256); - let random2 = Math.floor(Math.random() * 256); - let random3 = Math.floor(Math.random() * 256); - txt.style.clior = `rgb(${random1},${random2},${random3})`; - conslie.log(clior); -} -``` -## 综合练习2 -```html -<div id="box4"> - <img src="../20251205/OIP-C2.webp" alt="" class="box4-img"> - <img src="../20251205/OIP-C3.jpg" alt="" class="box4-img"> - <img src="../20251205/OIP-C4.webp" alt="" class="box4-img"> - -</div> -``` -```js -// 训练2 -function cssImg() { - let img = document.createElement('img'); - img.src = "../20251205/OIP-C5.jpg"; - img.style.width = "100px"; - document.getElementById("box2").appendChild(img); - - img.addEventListener('mouseover', function () { - this.style.border = "5px double blue"; - this.style.boxSizing = "border-box"; - }) - - img.addEventListener('mouseout', function () { - this.style.border = 'none'; - }) -} -``` diff --git "a/\351\203\255\345\260\217\344\270\234/20251211-Form\345\257\271\350\261\241.md" "b/\351\203\255\345\260\217\344\270\234/20251211-Form\345\257\271\350\261\241.md" deleted file mode 100644 index 0624a059c87e1bf5f95b1768fa40a58935c84ec6..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251211-Form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,588 +0,0 @@ -# 笔记 -## 一、Form 对象概述 -### 1. 定义 -Form 对象是 JavaScript 操作 HTML 表单(`<form>`)的核心接口,对应页面中的 `<form>` 元素,用于读取/修改表单控件(输入框、单选框、复选框等)的值、监听表单提交事件、验证表单数据等。 - -### 2. 核心特点 -| 特性 | 说明 | -|--------------|----------------------------------------------------------------------| -| 关联元素 | 包含 `<input>`、`<select>`、`<textarea>`、`<button>` 等表单控件 | -| 获取方式 | 可通过 `document.forms`、`getElementById`、`querySelector` 等获取 | -| 控件访问 | 可通过 `form.控件name` 或 `form.elements[控件name/index]` 访问子控件 | -| 核心行为 | 支持表单提交、重置、数据验证等操作 | - -### 3. Form 对象 vs 普通 DOM 元素 -Form 对象继承自普通 DOM 元素,除了拥有 DOM 元素的所有属性/方法外,还新增了表单专属的属性(如 `action`、`method`)和方法(如 `submit()`、`reset()`)。 - -## 二、Form 对象的获取方式 -### 1. 常用获取方法 -```javascript -// 方式1:通过 id 获取(推荐,精准) -const form1 = document.getElementById("myForm"); - -// 方式2:通过 document.forms(按索引/name) -const form2 = document.forms[0]; // 获取页面第一个<form> -const form3 = document.forms["formName"]; // 通过<form>的name属性获取 - -// 方式3:通过 querySelector -const form4 = document.querySelector("form"); // 获取第一个<form> -const form5 = document.querySelector("#myForm"); // 通过id -``` - -### 2. 表单控件的获取 -Form 对象可直接通过「控件 name 属性」或 `elements` 集合访问子控件: -```html -<form id="myForm"> - <input type="text" name="username" id="username"> - <input type="password" name="pwd" id="pwd"> - <input type="checkbox" name="agree" id="agree"> -</form> -``` -```javascript -const form = document.getElementById("myForm"); - -// 方式1:form.控件name(最简洁) -const usernameInput = form.username; -const pwdInput = form.pwd; - -// 方式2:form.elements[控件name/index] -const agreeInput = form.elements["agree"]; -const firstInput = form.elements[0]; // 第一个控件(username) - -// 方式3:普通DOM获取(兼容所有场景) -const usernameInput2 = document.getElementById("username"); -``` - -## 三、Form 对象核心属性 -### 1. 表单本身属性 -| 属性名 | 说明 | 示例 | -|--------------|----------------------------------------|-------------------------------| -| `action` | 表单提交的目标 URL | `form.action = "/api/submit"` | -| `method` | 提交方式(GET/POST,默认GET)| `form.method = "POST"` | -| `enctype` | 表单数据编码方式(如 multipart/form-data 用于文件上传) | `form.enctype = "application/x-www-form-urlencoded"` | -| `target` | 提交后响应的打开方式(_self/_blank/_parent) | `form.target = "_self"` | -| `elements` | 表单内所有控件的集合(HTMLCollection) | `form.elements.length` // 控件数量 | -| `autocomplete` | 是否开启自动补全(on/off)| `form.autocomplete = "off"` | - -### 2. 表单控件通用属性(核心) -所有表单控件(input/select/textarea)均支持以下核心属性: -| 属性名 | 说明 | 适用控件 | -|--------------|----------------------------------------|-------------------------------| -| `value` | 控件的值(读写)| 所有input、select、textarea | -| `checked` | 是否选中(布尔值,读写)| 单选框(radio)、复选框(checkbox) | -| `selected` | 是否选中(布尔值,读写)| select的option选项 | -| `disabled` | 是否禁用(布尔值,读写)| 所有控件 | -| `readonly` | 是否只读(布尔值,读写)| 输入框、文本域 | -| `name` | 控件名称(只读)| 所有控件 | -| `type` | 控件类型(如 text/radio/checkbox)| input控件 | - -## 四、Form 对象核心方法 -### 1. 表单操作方法 -| 方法名 | 说明 | 示例 | -|--------------|----------------------------------------|-------------------------------| -| `submit()` | 提交表单(等同于点击[type="submit"]按钮) | `form.submit()` | -| `reset()` | 重置表单(恢复所有控件默认值)| `form.reset()` | - -### 2. 控件值操作方法 -#### (1)输入框/文本域 -```javascript -// 读取值 -const username = form.username.value; -const desc = form.desc.value; // textarea的值 - -// 修改值 -form.username.value = "默认用户名"; -form.desc.value = "请输入描述..."; - -// 清空值 -form.username.value = ""; -``` - -#### (2)单选框(radio) -```html -<form id="myForm"> - <input type="radio" name="gender" value="male">男 - <input type="radio" name="gender" value="female">女 -</form> -``` -```javascript -const form = document.getElementById("myForm"); -// 读取选中值 -function getRadioValue(name) { - const radios = form.elements[name]; - for (let i = 0; i < radios.length; i++) { - if (radios[i].checked) { - return radios[i].value; - } - } - return ""; // 未选中返回空 -} -console.log(getRadioValue("gender")); // "male"/"female"/"" - -// 设置选中值 -function setRadioValue(name, value) { - const radios = form.elements[name]; - for (let i = 0; i < radios.length; i++) { - radios[i].checked = (radios[i].value === value); - } -} -setRadioValue("gender", "female"); // 选中“女” -``` - -#### (3)复选框(checkbox) -```html -<form id="myForm"> - <input type="checkbox" name="hobby" value="book">读书 - <input type="checkbox" name="hobby" value="sport">运动 - <input type="checkbox" name="hobby" value="music">音乐 -</form> -``` -```javascript -const form = document.getElementById("myForm"); -// 读取所有选中值 -function getCheckboxValues(name) { - const checkboxes = form.elements[name]; - const values = []; - for (let i = 0; i < checkboxes.length; i++) { - if (checkboxes[i].checked) { - values.push(checkboxes[i].value); - } - } - return values; -} -console.log(getCheckboxValues("hobby")); // ["book", "sport"] - -// 设置选中值(批量) -function setCheckboxValues(name, values) { - const checkboxes = form.elements[name]; - for (let i = 0; i < checkboxes.length; i++) { - checkboxes[i].checked = values.includes(checkboxes[i].value); - } -} -setCheckboxValues("hobby", ["book", "music"]); // 选中“读书”“音乐” -``` - -#### (4)下拉框(select) -```html -<form id="myForm"> - <select name="city" id="city"> - <option value="beijing">北京</option> - <option value="shanghai">上海</option> - <option value="guangzhou">广州</option> - </select> -</form> -``` -```javascript -const form = document.getElementById("myForm"); -// 读取选中值 -const cityValue = form.city.value; // "beijing"/"shanghai" -// 读取选中文本 -const cityText = form.city.options[form.city.selectedIndex].text; // "北京" - -// 设置选中值 -form.city.value = "shanghai"; // 选中“上海” - -// 动态添加选项 -const option = document.createElement("option"); -option.value = "shenzhen"; -option.text = "深圳"; -form.city.appendChild(option); -``` - -## 五、表单事件处理 -### 1. 核心事件 -| 事件名 | 触发时机 | 常用场景 | -|--------------|----------------------------------------|-------------------------------| -| `submit` | 表单提交时(点击submit按钮/按回车)| 表单验证、阻止默认提交 | -| `reset` | 表单重置时 | 确认重置、阻止默认重置 | -| `change` | 控件值改变且失去焦点时(如输入框、下拉框) | 实时验证、联动更新 | -| `input` | 控件值实时改变时(输入框/文本域)| 实时搜索、字数统计 | -| `focus` | 控件获取焦点时 | 提示输入规则 | -| `blur` | 控件失去焦点时 | 验证输入内容 | - -### 2. 实战:表单提交验证(阻止默认提交) -```html -<form id="loginForm"> - <div> - <label>用户名:</label> - <input type="text" name="username" placeholder="请输入用户名"> - </div> - <div> - <label>密码:</label> - <input type="password" name="pwd" placeholder="请输入密码"> - </div> - <button type="submit">登录</button> -</form> -``` -```javascript -const loginForm = document.getElementById("loginForm"); - -// 监听表单提交事件 -loginForm.addEventListener("submit", function(e) { - // 阻止默认提交行为(关键,避免页面刷新) - e.preventDefault(); - - // 1. 获取控件值 - const username = this.username.value.trim(); - const pwd = this.pwd.value.trim(); - - // 2. 表单验证 - if (!username) { - alert("请输入用户名!"); - this.username.focus(); // 聚焦到用户名输入框 - return; - } - if (!pwd || pwd.length < 6) { - alert("密码不能为空且长度不少于6位!"); - this.pwd.focus(); - return; - } - - // 3. 验证通过,执行提交逻辑(如AJAX请求) - console.log("提交数据:", { username, pwd }); - // 模拟AJAX提交 - // fetch("/api/login", { - // method: "POST", - // body: JSON.stringify({ username, pwd }) - // }).then(res => res.json()).then(data => { - // console.log("登录结果:", data); - // }); -}); -``` - -### 3. 实战:实时输入验证(input事件) -```html -<form id="registerForm"> - <div> - <label>手机号:</label> - <input type="text" name="phone" placeholder="请输入11位手机号"> - <span id="phoneTip"></span> - </div> -</form> -``` -```javascript -const registerForm = document.getElementById("registerForm"); -const phoneInput = registerForm.phone; -const phoneTip = document.getElementById("phoneTip"); - -// 实时监听输入 -phoneInput.addEventListener("input", function() { - const phone = this.value.trim(); - const phoneReg = /^1[3-9]\d{9}$/; // 手机号正则 - - if (!phone) { - phoneTip.textContent = "请输入手机号"; - phoneTip.style.color = "#999"; - } else if (!phoneReg.test(phone)) { - phoneTip.textContent = "手机号格式错误"; - phoneTip.style.color = "red"; - } else { - phoneTip.textContent = "手机号格式正确"; - phoneTip.style.color = "green"; - } -}); -``` - -## 六、实战示例 -### 1. 全选/全不选/反选复选框 -```html -<form id="hobbyForm"> - <input type="checkbox" name="hobby" value="1">游泳 - <input type="checkbox" name="hobby" value="2">跑步 - <input type="checkbox" name="hobby" value="3">健身 - <br> - <button type="button" onclick="selectAll()">全选</button> - <button type="button" onclick="selectNone()">全不选</button> - <button type="button" onclick="selectOpposite()">反选</button> -</form> -``` -```javascript -const hobbyForm = document.getElementById("hobbyForm"); -const hobbies = hobbyForm.elements["hobby"]; - -// 全选 -function selectAll() { - for (let i = 0; i < hobbies.length; i++) { - hobbies[i].checked = true; - } -} - -// 全不选 -function selectNone() { - for (let i = 0; i < hobbies.length; i++) { - hobbies[i].checked = false; - } -} - -// 反选 -function selectOpposite() { - for (let i = 0; i < hobbies.length; i++) { - hobbies[i].checked = !hobbies[i].checked; - } -} -``` - -### 2. 省市二级联动下拉框 -```html -<form id="addressForm"> - <label>省份:</label> - <select name="province" id="province"></select> - <label>城市:</label> - <select name="city" id="city"></select> -</form> -``` -```javascript -const addressForm = document.getElementById("addressForm"); -// 省市数据 -const provinceCityData = { - "请选择省份": [], - "北京市": ["东城区", "西城区", "朝阳区"], - "上海市": ["黄浦区", "徐汇区", "长宁区"], - "广东省": ["广州市", "深圳市", "东莞市"] -}; - -// 初始化省份下拉框 -function initProvince() { - const provinceSelect = addressForm.province; - for (let p in provinceCityData) { - const option = document.createElement("option"); - option.value = p; - option.text = p; - provinceSelect.appendChild(option); - } -} - -// 监听省份变化,更新城市 -addressForm.province.addEventListener("change", function() { - const citySelect = addressForm.city; - citySelect.innerHTML = ""; // 清空原有选项 - const cities = provinceCityData[this.value]; - cities.forEach(city => { - const option = document.createElement("option"); - option.value = city; - option.text = city; - citySelect.appendChild(option); - }); -}); - -// 初始化 -initProvince(); -``` - -## 七、注意事项 -1. **表单提交阻止默认行为**:监听 `submit` 事件时,必须调用 `e.preventDefault()` 阻止页面刷新,否则无法执行自定义提交逻辑(如AJAX)。 -2. **控件name属性**:通过 `form.控件name` 访问控件时,`name` 属性是关键(id可选),且同一组单选框/复选框需共用一个 `name`。 -3. **空值处理**:读取输入框值时,建议用 `trim()` 去除首尾空格,避免空字符串干扰验证。 -4. **禁用控件值**:禁用(`disabled=true`)的控件,其值不会随表单提交(无论手动提交还是默认提交)。 -5. **文件上传**:表单包含 `<input type="file">` 时,需设置 `form.enctype = "multipart/form-data"` 且提交方式为 `POST`。 -6. **兼容性**: - - 旧版IE中,`form.elements` 集合的遍历方式需注意(需用 `for` 循环,而非 `forEach`); - - `input` 事件在IE9以下不支持,可改用 `keyup` 事件兼容。 -7. **安全验证**:前端表单验证仅为用户体验优化,**后端必须重新验证**所有数据,防止恶意提交。 - - -# 练习 - -## 训练1 -```html -<!-- 训练1 --> -<div id="box1"> - <input type="text" id="box1-txt" value="" placeholder="99632570063166"> - <input type="button" value="验证" onclick="btnVerify()"> -</div> -``` -```js -// 训练1 -function btnVerify() { - let txt = document.getElementById("box1-txt").value; - let movieTicket = 99632570063166; - console.log(txt); - if (txt == "") { - alert("请输入兑换码") - } else if (txt == movieTicket) { - alert("取票成功"); - } else { - alert("兑换码错误"); - } -} -``` -## 训练2 -```html -<!-- 训练2 --> -<div id="box2"> - <input type="button" onclick="btnIncrease()" value="增加"> - <input type="button" onclick="btnReduce()" value="减少"> - <textarea name="" id="box2-txt"></textarea> -</div> -``` -```js -// 训练2 -let textarea = document.getElementById('box2-txt'); -let addHeight = 50; -function btnIncrease() { - let currentHeight = parseInt(window.getComputedStyle(textarea).height); - textarea.style.height = (currentHeight + addHeight) + "px"; -} -function btnReduce() { - let currentHeight = parseInt(window.getComputedStyle(textarea).height); - textarea.style.height = (currentHeight - addHeight) + "px"; -} -``` -## 训练3 -```html -<!-- 训练3 --> -<div id="box3"> - <h3>请选择课程</h3> - <input type="radio" name="C语言" id="box3-radio">C语言 - <br><input type="radio" name="机械制图" id="box3-radio">机械制图 - <br><input type="radio" name="单片机" id="box3-radio">单片机 - <br><input type="radio" name="自动控制" id="box3-radio">自动控制 - <br><input type="radio" name="传感器" id="box3-radio">传感器 - <br><input type="radio" name="高等数学" id="box3-radio">高等数学 - <br><input type="radio" name="计算机基础" id="box3-radio">计算机基础 - <br><input type="radio" name="Oracle数据库" id="box3-radio">Oracle数据库 - <br><input type="radio" name="商务英语" id="box3-radio">商务英语 - <br><input type="radio" name="PLC设计基础" id="box3-radio">PLC设计基础 -</div> -``` -```js -// 训练3 -let radioList = document.querySelectorAll("#box3-radio"); -radioList.forEach(radioaa =>{ - radioaa.addEventListener("click",function(e){ - let checkedCount = document.querySelectorAll('#box3-radio:checked').length; - if(checkedCount > 6){ - e.preventDefault(); - this.checked = false; - alert('最多选6个'); - } - }) -}) -console.log(radio); -``` -## 综合练习1 -```html -<!-- 综合练习1 --> -<div id="box1"> - <h3>电影《变相怪杰》的主演是谁?</h3> - <input type="radio" name="box1-radio" value="布拉德·皮特">布拉德·皮特 - <input type="radio" name="box1-radio" value="亚当·桑德勒">亚当·桑德勒 - <input type="radio" name="box1-radio" value="金·凯瑞">金·凯瑞 - <input type="radio" name="box1-radio" value="杰夫·丹尼尔斯">杰夫·丹尼尔斯 - <br><input type="button" value="提交答案" onclick="btnSubmit()"> - <p id="txt"></p> -</div> -``` -```js -// 综合练习1 -function btnSubmit() { - let radio = document.querySelectorAll("input[name='box1-radio']"); - let radioValue = null; - for (let i = 0; i < radio.length; i++) { - //核心:判断当前单选框是否被选中 - if (radio[i].checked) { - radioValue = radio[i].value; - console.log(radio[i]); - break; - } - } - let txt = document.getElementById("txt"); - - if (radioValue === "金·凯瑞") { - txt.innerText = "答案正确"; - document.getElementById("box1").appendChild(txt); - - } else if (!radioValue) { - txt.innerText = "请选择一个答案"; - document.getElementById("box1").appendChild(txt); - } else { - txt.innerText = "答案错误"; - document.getElementById("box1").appendChild(txt); - } -} -``` -## 综合练习2 -```html -<div id="box2"> - <input type="checkbox" name="box2-radio">不想写了 - <input type="checkbox" name="box2-radio">我不想写了 - <input type="checkbox" name="box2-radio">我真不想写了 - <input type="checkbox" name="box2-radio">我真的不想写了 - <input type="checkbox" name="box2-radio">我是真的不想写了 - <input type="button" value="全选" onclick="btnSelectAll()"> - <input type="button" value="全不选" onclick="btnSelectNone()"> - <input type="button" value="反选" onclick="btnOppose()"> -</div> -``` -```js -// 综合练习2 -let getCheck = document.querySelectorAll("input[name='box2-radio']"); -function btnSelectAll() { - getCheck.forEach(checkbox => { - checkbox.checked = true; - }) -} -function btnSelectNone() { - getCheck.forEach(checkbox => { - checkbox.checked = false; - }) -} -function btnOppose() { - getCheck.forEach(checkbox => { - checkbox.checked = !checkbox.checked; - }) -} -``` -## 综合练习3 -```html -<!-- 综合练习3 --> -<select name="" id="provinceSelect"> -</select> -<select name="" id="citySelect"> -</select> -``` -```js -// 综合练习3 - -let provinceCityData = { - "请选择省份": [], // 默认空选项 - "北京市": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区"], - "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区"], - "广东省": ["广州市", "深圳市", "东莞市", "佛山市", "中山市"], - "江苏省": ["南京市", "苏州市", "无锡市", "常州市", "扬州市"], - "浙江省": ["杭州市", "宁波市", "温州市", "嘉兴市", "绍兴市"] -}; - -let provinceSelect = document.getElementById("provinceSelect"); -let citySelect = document.getElementById("citySelect"); - -function intprovince() { - for (let province in provinceCityData) { - let option = document.createElement("option"); - option.value = province; - option.textContent = province; - provinceSelect.appendChild(option); - } -} -function updateCity(province) { - citySelect.innerHTML = ""; - let cities = provinceCityData[province]; - cities.forEach(city => { - let option = document.createElement("option"); - option.value = city; - option.textContent = city; - citySelect.appendChild(option); - }) -} -provinceSelect.addEventListener("change", function () { - // 获取当前选中的省份 - let selectedProvince = this.value; - // 更新城市下拉框 - updateCity(selectedProvince); -}); - -// 6. 初始化页面(加载省份+默认显示空城市) -intprovince(); -// 初始选中“请选择省份”,城市框为空 -updateCity("请选择省份"); -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251212-JSON\347\254\224\350\256\260.md" "b/\351\203\255\345\260\217\344\270\234/20251212-JSON\347\254\224\350\256\260.md" deleted file mode 100644 index ec6bf35adea82c4fc522a6a476775b57346aadf5..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251212-JSON\347\254\224\350\256\260.md" +++ /dev/null @@ -1,293 +0,0 @@ -# 笔记 -## 一、JSON 概述 -### 1. 定义 -JSON(JavaScript Object Notation,JavaScript 对象表示法)是一种**轻量级、跨平台、易读易写**的数据交换格式,基于 JavaScript 对象语法,但独立于编程语言(几乎所有编程语言都支持解析和生成 JSON)。 - -### 2. 核心特点 -| 特性 | 说明 | -|--------------|----------------------------------------------------------------------| -| 数据格式 | 纯文本字符串,便于网络传输和存储 | -| 语法简洁 | 基于键值对(key-value)和数组,结构清晰易理解 | -| 跨平台兼容 | 与编程语言无关,Python/Java/PHP 等均支持解析/生成 | -| 数据类型有限 | 仅支持 6 种基础数据类型(字符串、数字、布尔值、数组、对象、null) | -| 无注释 | 标准 JSON 不支持注释(部分解析器支持非标准注释,但不推荐) | -| 键名需引号 | 键名必须用双引号包裹(单引号或无引号均不合法) | - -### 3. JSON 与 JavaScript 对象的区别 -| 对比维度 | JSON | JavaScript 对象 | -|----------------|--------------------------------|--------------------------------| -| 本质 | 文本字符串(数据交换格式) | 内存中的对象(编程语言结构) | -| 键名要求 | 必须用双引号包裹 | 可省略引号,支持单引号/双引号 | -| 数据类型 | 仅支持 6 种基础类型(无函数、日期等) | 支持函数、日期、undefined 等 | -| 语法细节 | 无尾逗号,不支持注释 | 可加尾逗号,支持注释 | -| 转换方式 | `JSON.parse()`(JSON→JS对象) | `JSON.stringify()`(JS对象→JSON) | -| 示例 | `{"name":"张三","age":20}` | `{name:"张三", age:20, say:()=>{}}` | - -## 二、JSON 语法规则(必记) -### 1. 基础语法框架 -JSON 数据要么是**键值对集合(对象)**,要么是**值的有序列表(数组)**,整体为一个完整的字符串: -```json -// 对象形式(最常用) -{ - "key1": "value1", - "key2": value2, - "key3": [value1, value2], - "key4": {"subKey": "subValue"} -} - -// 数组形式 -["value1", 123, true, {"key": "value"}] -``` - -### 2. 核心语法规则(严格遵守) -1. **键名必须用双引号**:`"name": "张三"`(正确),`name: "张三"`/`'name': "张三"`(错误); -2. **字符串值必须用双引号**:`"title": "JSON笔记"`(正确),`"title": 'JSON笔记'`(错误); -3. **数值类型无需引号**:支持整数、浮点数、负数,如 `"age": 20`、`"score": 95.5`、`"num": -10`; -4. **布尔值为小写**:仅支持 `true`/`false`(小写),`True`/`False`(错误); -5. **空值为 null**:表示空数据,`"address": null`(`undefined` 不是合法 JSON 类型); -6. **无尾逗号**:最后一个键值对/数组元素后不能加逗号,如 `{"a":1, "b":2,}`(错误); -7. **不支持复杂类型**:函数、日期、正则、undefined 均不合法(需转换为字符串/数值存储)。 - -### 3. 合法 JSON 示例 -```json -{ - "name": "张三", - "age": 25, - "isStudent": false, - "hobbies": ["读书", "运动", "编程"], - "address": { - "province": "广东省", - "city": "深圳市", - "detail": "科技园路" - }, - "score": 92.5, - "gender": null -} -``` - -### 4. 常见语法错误(避坑) -```json -// 错误1:键名无引号 -{name: "张三", "age": 20} → 修正:{"name": "张三", "age": 20} - -// 错误2:字符串用单引号 -{"title": 'JSON笔记'} → 修正:{"title": "JSON笔记"} - -// 错误3:尾逗号 -{"a": 1, "b": 2,} → 修正:{"a": 1, "b": 2} - -// 错误4:布尔值大写 -{"isOk": True} → 修正:{"isOk": true} - -// 错误5:包含函数 -{"say": function() {}} → 修正:移除函数(或转为字符串描述) -``` - -## 三、JSON 支持的数据类型 -| 数据类型 | 说明 | 示例 | -|----------|----------------------------------------|-------------------------------| -| 字符串 | 双引号包裹,支持转义字符(\\"、\\\\、\\n 等) | `"name": "张三\\n年龄20"` | -| 数字 | 整数、浮点数、负数,不支持十六进制 | `"id": 1001, "price": 99.9` | -| 布尔值 | 仅 `true`(真)/`false`(假)(小写) | `"isValid": true` | -| 数组 | 有序值集合,元素可混合不同类型 | `"tags": ["JS", 2024, true]` | -| 对象 | 无序键值对集合,可嵌套其他对象/数组 | `"user": {"name": "李四", "hobbies": []}` | -| null | 表示空值(无数据) | `"address": null` | - -### 转义字符(常用) -| 转义字符 | 含义 | 示例 | JSON 中写法 | -|----------|------------|-----------------------|-------------------| -| `\"` | 双引号 | 包含引号的字符串 | `"title": "He said \"Hello\""` | -| `\\` | 反斜杠 | 文件路径/特殊字符 | `"path": "C:\\Users\\xxx"` | -| `\n` | 换行符 | 多行文本 | `"content": "第一行\n第二行"` | -| `\t` | 制表符 | 缩进对齐 | `"info": "姓名\t年龄"` | - -## 四、JSON 核心操作(JavaScript 环境) -JavaScript 内置 `JSON` 全局对象,提供两个核心方法用于 JSON 与 JS 对象的转换(前端开发最常用)。 - -### 1. JSON.parse():JSON 字符串 → JavaScript 对象 -将 JSON 格式的字符串解析为 JS 对象/数组,语法: -```javascript -JSON.parse(jsonString, [reviver]) -``` -- `jsonString`:必填,合法的 JSON 字符串; -- `reviver`:可选,回调函数(用于解析过程中修改数据)。 - -#### 基础用法 -```javascript -// JSON 字符串 -const jsonStr = `{ - "name": "张三", - "age": 25, - "hobbies": ["读书", "编程"] -}`; - -// 解析为 JS 对象 -const user = JSON.parse(jsonStr); -console.log(user.name); // "张三"(对象属性) -console.log(user.hobbies[0]); // "读书"(数组元素) -console.log(typeof user); // "object" -``` - -#### 进阶用法(reviver 回调) -```javascript -// 解析时修改数据(如转换日期字符串为 Date 对象) -const jsonWithDate = '{"name":"李四","birth":"2000-01-01"}'; -const user2 = JSON.parse(jsonWithDate, (key, value) => { - // 若键为 birth,将字符串转为 Date 对象 - if (key === "birth") { - return new Date(value); - } - return value; // 其他键值不变 -}); -console.log(user2.birth); // Date 对象(Fri Jan 01 2000...) -``` - -### 2. JSON.stringify():JavaScript 对象 → JSON 字符串 -将 JS 对象/数组转换为 JSON 格式字符串,语法: -```javascript -JSON.stringify(value, [replacer], [space]) -``` -- `value`:必填,要转换的 JS 对象/数组; -- `replacer`:可选,过滤/修改要转换的属性(数组或函数); -- `space`:可选,格式化缩进(数字/字符串,提升可读性)。 - -#### 基础用法 -```javascript -// JS 对象 -const product = { - id: 101, - name: "手机", - price: 2999, - isStock: true, - specs: ["128G", "黑色"] -}; - -// 转换为 JSON 字符串 -const productJson = JSON.stringify(product); -console.log(productJson); -// 输出:{"id":101,"name":"手机","price":2999,"isStock":true,"specs":["128G","黑色"]} -console.log(typeof productJson); // "string" -``` - -#### 进阶用法(过滤+格式化) -```javascript -// 1. 过滤属性(只保留 name 和 price) -const json1 = JSON.stringify(product, ["name", "price"]); -console.log(json1); // {"name":"手机","price":2999} - -// 2. 函数过滤(排除价格低于 1000 的商品) -const json2 = JSON.stringify(product, (key, value) => { - if (key === "price" && value < 1000) { - return undefined; // 返回 undefined 则排除该属性 - } - return value; -}); - -// 3. 格式化缩进(4个空格,便于阅读) -const json3 = JSON.stringify(product, null, 4); -console.log(json3); -// 输出格式化后的字符串: -// { -// "id": 101, -// "name": "手机", -// "price": 2999, -// "isStock": true, -// "specs": [ -// "128G", -// "黑色" -// ] -// } -``` - -### 3. 常见转换问题(避坑) -#### (1)JS 对象中的不合法 JSON 类型处理 -JS 对象中的函数、undefined、Date 等类型,转换为 JSON 时会被忽略或转换: -```javascript -const obj = { - name: "张三", - say: () => console.log("Hello"), // 函数:转换时被忽略 - age: undefined, // undefined:转换时被忽略 - birth: new Date() // Date 对象:转换为 ISO 格式字符串 -}; - -console.log(JSON.stringify(obj)); -// 输出:{"name":"张三","birth":"2024-05-20T08:00:00.000Z"} -``` - -#### (2)循环引用报错 -若 JS 对象存在循环引用(A 包含 B,B 包含 A),转换时会报错: -```javascript -const a = { name: "A" }; -const b = { name: "B", ref: a }; -a.ref = b; // 循环引用:a → b → a - -JSON.stringify(a); // 报错:Uncaught TypeError: Converting circular structure to JSON -``` -解决:使用 `replacer` 过滤循环引用,或手动解除循环。 - -## 五、JSON 应用场景 -### 1. 网络数据传输(最核心) -前后端交互时,数据以 JSON 格式传输(替代 XML,更简洁): -- 前端 → 后端:将表单数据/请求参数转为 JSON 字符串,通过 AJAX/fetch 发送; -- 后端 → 前端:将数据库查询结果转为 JSON 字符串,返回给前端后解析为 JS 对象。 - -#### 示例:前端发送 JSON 数据 -```javascript -// 前端请求数据 -const userData = { username: "zhangsan", password: "123456" }; - -fetch("/api/login", { - method: "POST", - headers: { - "Content-Type": "application/json" // 声明数据格式为 JSON - }, - body: JSON.stringify(userData) // 转为 JSON 字符串 -}) -.then(res => res.json()) // 解析后端返回的 JSON -.then(data => console.log("登录结果:", data)); -``` - -### 2. 数据存储 -- 本地存储:`localStorage`/`sessionStorage` 仅支持字符串存储,JSON 可用于存储复杂数据(如用户配置、列表数据); -- 文件存储:配置文件(如 `package.json`)、日志文件等常用 JSON 格式(注:`package.json` 支持注释,是 JSON 的扩展格式)。 - -#### 示例:localStorage 存储 JSON 数据 -```javascript -// 存储:JS 对象 → JSON 字符串 -const userList = [{ id: 1, name: "张三" }, { id: 2, name: "李四" }]; -localStorage.setItem("userList", JSON.stringify(userList)); - -// 读取:JSON 字符串 → JS 对象 -const storedList = JSON.parse(localStorage.getItem("userList")); -console.log(storedList[0].name); // "张三" -``` - -### 3. 配置文件 -众多工具和框架使用 JSON 作为配置文件(简洁易维护): -- Node.js 项目的 `package.json`(项目依赖、脚本配置); -- 前端工程化配置(如 `tsconfig.json`、`eslintrc.json`); -- 工具配置(如 Postman 请求参数、VS Code 插件配置)。 - -#### 示例:package.json(简化版) -```json -{ - "name": "my-project", - "version": "1.0.0", - "dependencies": { - "react": "^18.2.0", - "vue": "^3.3.4" - }, - "scripts": { - "start": "node index.js", - "build": "webpack" - } -} -``` - -## 六、注意事项 -1. **语法严格性**:JSON 语法要求极严格(如双引号、无尾逗号),语法错误会导致解析失败,需仔细检查; -2. **数据类型限制**:避免在 JSON 中存储函数、日期等复杂类型,需转换为字符串/数值后再传输/存储; -3. **注释问题**:标准 JSON 不支持注释,若需添加注释,可使用 JSON5 格式(扩展支持注释、单引号等); -4. **大文件处理**:JSON 适合小/中等规模数据,超大文件(如 100MB+)建议用流处理或其他格式(如 CSV); -5. **安全问题**:前端解析未知 JSON 时,需防范 XSS 攻击(避免直接用 `innerHTML` 渲染 JSON 中的字符串); -6. **兼容性**:`JSON.parse()`/`JSON.stringify()` 支持 IE8+ 及所有现代浏览器,若需兼容更旧浏览器,需引入 `json2.js` 垫片库。 \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251215.md" "b/\351\203\255\345\260\217\344\270\234/20251215.md" deleted file mode 100644 index ed4028568ddc7530222958b66f72bd721a4ee503..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251215.md" +++ /dev/null @@ -1,27 +0,0 @@ -# 练习 - -```js -// jQuery 基础 - // 1 - $(document).ready(function () { - console.log("jQuery 已就绪"); - }); - // 2 - console.log('第二题'); - console.log($ === jQuery); - - // 3 - console.log('第三题'); - let div = $('#demo'); - console.log(div); - - // 4 - console.log('第四题'); - console.log("jQuery对象转DOM对象:", $("#demo")[0]); - console.log("jQuery对象转DOM对象:", $("#demo").get(0)); - console.log("DOM对象转jQuery对象:", $("#demo")); - - // 5 - console.log('第五题'); - console.log($('#box').css('color', 'red').addClass('active').fadeIn()); -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251217-jQuery.md" "b/\351\203\255\345\260\217\344\270\234/20251217-jQuery.md" deleted file mode 100644 index a192d3a86fba592a268d61c380f432ebbbe23387..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251217-jQuery.md" +++ /dev/null @@ -1,45 +0,0 @@ -# 笔记 - -## jQuery 基础 -- 是一个js库,为了方便dom操作 -- 和js的引用一样 -- 使用`$`来使用jQuery库的能力,`$`符合实际是一个方法,当然方法在js中也是一个对象,所以其也有一些属性可以使用 -- jQuery获取到的是jQuery,和原生JS拿到的dom对象不同,但它们可以相互转换 - - let div = $('div')拿到jQuery对象 - - div[0]拿到dom对象 - - $(div[0])又可以重新转换为jQuery对象 -## jQuery 选择器与操作 -- 基础选择器 - - 标签选择器 - - 类名选择器 - - id选择器 -- 关系选择器 - - 子代选择器 - - 直接子代选择器 - - 兄弟选择器 - - 相邻兄弟选择器 -- 高级选择器 - - 属性选择器 - - 伪类选择器 - - 伪元素选择器 - -# 练习 - -```js -// jQuery 选择器与操作 - // 1 - $('.item').css('color', 'red'); - // 2 - $("li:first").css('background-color', 'blue'); - $("li:last").css('background-color', 'green'); - // 3 - $("#container").find("span").text("以修改的文本"); - // 4 - $("table tr:nth-child(even)").css("background-color", "yellow"); - // 5 - $(".item2").each(function (index) { - var content = "第" + (index + 1) + "个item"; - $(this).text(content); - }) - -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251218-jQuery.md" "b/\351\203\255\345\260\217\344\270\234/20251218-jQuery.md" deleted file mode 100644 index 930ed1801a180c8233e62a2497d1ebdbe42a9232..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251218-jQuery.md" +++ /dev/null @@ -1,67 +0,0 @@ -# 笔记 - -## jQuery 事件处理 -- jQuery对象.on('click',function(){}) -- jQuery对象.click(function(){}) -- jQuery对象.trigger('click',function(){}) -- $(function(){}) - -## jQuery 动画与效果 -- 基础效果:显示、影藏 show()、hide()、toggle() -- 进阶效果:谈入、谈出 fadeIn()、fadeOut() -- 高级效果:animate() - -## jQuery DOM操作 -- 新增 append给拿到元素增加一个下级元素 -- 移除 remove 移除拿到的元素 -- text() 拿到文本内容 ,text('要设置的内容')可以修改纯文本内容 -- html() 拿到包含标签的内容 ,html('要设置的内容')可以修改包含标签的内容 - -# 练习 - -```js -// 事件处理 - // 1 - $("#changeBtn").click(function () { - $("#title").text("新标题"); - }) - // 2 - $("#box").hover(function () { - $(this).css("background", "skyblue"); // 悬停时背景改为天蓝色 - }, function () { - $(this).css("background", "gray"); // 离开时恢复灰色 - }); - // 3 - let itemNum = 2; - $("#addBtn").click(function () { - $("#list").append(`<li>项目${itemNum}</li>`); - itemNum++; - }) - // 4 - $(function () { - $("#myForm").on('submit', function (event) { - // 阻止表单默认提交行为(避免页面刷新) - - event.preventDefault(); - let username = $("#username").val().trim(); - if (username) { - $("#result").text(`用户名为${username}`); - } else { - $("#result").text(`请输入用户名`); - } - - $("#username").val(""); - }) - }) - // 5 - $(function () { - function btnClickHandler() { - alert("小灰灰不是人"); - } - $("#btn").on("click",btnClickHandler); - $("#removeBtn").click(function () { - alert("小灰灰真不是人"); - $("#btn").off("click",btnClickHandler); - }) - }) -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251219.md" "b/\351\203\255\345\260\217\344\270\234/20251219.md" deleted file mode 100644 index 6d771995f93381f6616b68fee75167280e98eeea..0000000000000000000000000000000000000000 --- "a/\351\203\255\345\260\217\344\270\234/20251219.md" +++ /dev/null @@ -1,37 +0,0 @@ -# 练习 -## 动画与效果 -```html - <!-- 1 --> - <div id="box">我是一个盒子</div> - <button id="toggleBtn">切换显示</button> - <!-- 2 --> - <img id="image" src="photo.jpg" alt="图片"> - <button id="fadeBtn">淡入淡出</button> -``` -```js - -$(function () { - // 1 - let btnclick = true; - $("#toggleBtn").click(function () { - if (btnclick) { - $("#box").hide(); - - } else { - $("#box").show(); - } - btnclick = !btnclick; - }) - //2 - $("#fadeBtn").click(function () { - - if (btnclick) { - $("image").fadeIn(); - - } else { - $("image").fadeOut(); - } - }) - }) - -``` \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/\345\233\276\347\211\207/\345\261\217\345\271\225\346\210\252\345\233\276 2025-11-16 160043.png" "b/\351\203\255\345\260\217\344\270\234/\345\233\276\347\211\207/\345\261\217\345\271\225\346\210\252\345\233\276 2025-11-16 160043.png" deleted file mode 100644 index 12b97f2551ead2e33f5b73340a28f95de4e91c95..0000000000000000000000000000000000000000 Binary files "a/\351\203\255\345\260\217\344\270\234/\345\233\276\347\211\207/\345\261\217\345\271\225\346\210\252\345\233\276 2025-11-16 160043.png" and /dev/null differ diff --git "a/\351\231\206\346\235\250\351\230\263/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 1c4af6666f9de349fe32264cc550da4baac2da9f..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,19 +0,0 @@ -### 笔记 - - ## 在页面中直接嵌入JavaScript代码 - <script src="index.js"> </script> - <script type="index.js"> </script> - - ## 链接外部JavaScript文件 - <script type="index.js" src="index.js"> </script> - - ## 作为标签的属性值使用 - <a href="javascript:alert('弹出一个窗口')">请单击这里</a> - <input type="button" value="单击按钮" onclick="alert('弹出一个窗口')"> -### 第一题 - <script src="./1.js"></script> - document.write("千里之行,始于足下。") - -### 第二题 - <script type="" src="./1.js"></script> - alert("http://www.mingrisoft.com"); \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index c53b17c435f6df8e80c4f1d09034fa180fc54c92..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,118 +0,0 @@ -### 字母大小写 - 严格区分字母大小写,在输入语言的关键字、函数名、变量以及其他标识符时,都必须采用正确的大小写形式。 -### 空格和换行 - 换号代表断句,即换号代表一个语句已经结束 -### 结尾的分号 - 不要求必须以分号(;)作为语句的结束标记 -### 注释 - 单行注释 "//" - 多行注释 "/* */" -### 数据类型 - 数值型 number 整数 浮点数 - 字符串型 string - 布尔型 - 特殊数据类型 未定义值 undefined 空值 null - 特殊值 Infinity - 特殊值 NaN -### 转义字符 - \b 退格 - \n 换行符 - \t Tab空格 - \f 换页 - \' 单引号 - \" 双引号 - \v 垂直制表符 - \r Enter符 - \\ 反斜杠 - \OOO 八进制整数 - \xHH 十六进制整数 - \uhhhh 十六进制编码 - -### 输出珠穆朗玛峰的高度 - var b=8848.86 - document.write("珠穆朗玛峰是世界海拔最高的山峰,它的高度约等于"+ b +"m") - -### 输出文件夹的路径 - document.write("E:\\JavaScript\\Code\\demo") - -### 输出珠穆朗玛峰的高度 - var b=17100000 - document.write("俄罗斯是世界上国土面积最大的国家,其面积约为约等于"+ b +"km") - -### 个人信息 - <h3>个人信息</h3> - <script> - var username = "郭靖" - var gender = "男" - var userage = 20 - var height = 1.77 - var wg = "九阴真经、降龙十八掌" - document.write("姓名:") - document.write(username) - document.write("<br>性别:") - document.write(gender) - document.write("<br>年龄:") - document.write(userage) - document.write("<br>身高:") - document.write(height) - document.write("<br>武功:") - document.write(wg) - </script> - -### 计算本息合计 - <script> - var ck=100000; - var nll= 0.0275; - var qx =3; - var bx= (ck+ck)*nll*qx; - document.write("本息合计是"+bx) - </script> - -### 判断考试成绩是否合格 - <script> - var cj = 65; - if(cj>60){ - document.write("周星星考了"+ cj +"分考试及格了") - }else{ - document.write("考试没及格了") - } - </script> - -### 计算梯形稻田的面积 - <script> - var sby=30 - var xby=50 - var gd=30 - var mj=(sby+xby)*gd/2; - document.write("梯形稻田的面积是"+mj) - </script> - -### 综合练习1 - <script> - document.write('<pre>') - document.write("他强由他强,清风抚山岗\n他横任他横,明月照大江\n他自狠来他自恶,我自一口真气足\n——《九阳神功》") - document.write('</pre>') - </script> - -### 综合练习2 - <script> - var yx=6500; - var zx=500; - var sds=5000; - var sl =0.3; - var sjsl=((yx-zx)-(yx-zx-sds)*sl) - document.write("该员工的实际收入为"+sjsl+"元") - </script> - -### 综合练习3 - <script> - var a= new Date(); - a.setFullYear(2024,1,29); - const day = ('0' + a.getDate()).slice(-2); - - if(day==29){ - alert( "2024年2月有"+day+"天") - }else{ - alert( "2024年2月没有"+day+"天") - } - </script> \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index d64e73a0edb506fe44ec112d829f44171dac6d83..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,142 +0,0 @@ -### 算术运算符 - -10 + 5; // 15 加法 -10 - 5; // 5 减法 -10 * 5; // 50 乘法 -10 / 5; // 2 除法 -10 % 3; // 1 取余 -10 ** 2; // 100 指数 - - -### 赋值运算符 - -let x = 10; -x += 5; // x = 15 -x -= 3; // x = 12 -x *= 2; // x = 24 -x /= 4; // x = 6 - - -### 比较运算符 - -// 严格相等(推荐) -5 === 5; // true -5 === "5"; // false - -// 宽松相等 -5 == 5; // true -5 == "5"; // true - -// 其他比较 -5 !== 3; // true -5 > 3; // true -5 <= 10; // true - - -### 逻辑运算符 - -与运算 -true && false; // false -5 > 3 && 2 < 4; // true - -或运算 -true || false; // true -5 > 3 || 2 > 4; // true - -非运算 -!true; // false -!(5 > 3); // false - - -### 其他运算符 - - -三元运算符 -age >= 18 ? "成年" : "未成年"; - -类型运算符 -typeof 42; // "number" -typeof "hello"; // "string" - -空值合并运算符(ES2020) -null ?? "默认值"; // "默认值" - -### 影厅 - .a1{ - background-color: red; - } - .a2{ - background-color: green; - } - document.write("<table align='center'>") - for(var i=1;i<=4;i++){ - document.write("<tr height=70>") - for(var j=1;j<=10;j++){ - if(i==3 && (j==5 || j==6)){ - document.write("<td class='a1' align='center' width=80 >已售</td>") - continue; - } - document.write("<td class='a2' align='center' width=80 >"+i+"排"+j+"座"+"</td>") - } - document.write("</tr>") - } - document.write("</table>") - -### 判断身体质量指数 - document.write("<pre>") - var BMI=23; - if(BMI<20){ - document.write("结果:体重过轻") - } - if(BMI<25 && BMI>=20){ - document.write("BMI:"+BMI) - document.write("\n结果:体重适中") - - } - if(BMI<30 && BMI>=25){ - document.write("BMI:"+BMI) - document.write("\n结果:体重过重") - } - if(BMI<35 && BMI>=30){ - document.write("BMI:"+BMI) - document.write("\n结果:肥胖") - } - if(BMI>35){ - document.write("BMI:"+BMI) - document.write("\n结果:非常肥胖") - } - document.write("</pre>") - -### 循环输出年份和月份 - <span>请选择你的出生年月</span> - document.write("<select>") - for(var y= 2000;y<=2025; y++){ - document.write("<option value='"+y+"'>"+y+"年</option>") - } - document.write("</select>") - document.write("<select>") - for(var m= 1;m<=12; m++){ - document.write("<option value='"+m+"'>"+m+"月</option>") - } - document.write("</select>") - -### 10行10列的表格 - table{ - border-collapse: collapse; - border: 1px solid #000; - } - td, th { - border: 1px solid #000; - padding: 10px 20px; - } - var num =1 ; - document.write("<table align='center'>") - for(var i=1;i<=10;i++){ - document.write("<tr height=30>") - for(var j=1;j<=10;j++){ - document.write("<td class='a2' align='center' width=50 >"+num+"</td>") - num++ - } - document.write("</tr>") - } - document.write("</table>") \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251114-\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251114-\347\273\203\344\271\240.md" deleted file mode 100644 index 5dc711dfbb6b3b3b5bad493ada0058cd6464db10..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251114-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,122 +0,0 @@ -### 最小值 - var n1 = 26; - var n2 = 17; - var n3 = 10; - var n4 = 20; - var n=n1; - if(n>n2){ - n=n2; - } - if(n>n3){ - n=n3; - } - if(n>n4){ - n=n4; - } - document.write("最小值是"+n) - -### 空气污染程度 - var wr=56; - if(wr>0 && wr<=100){ - document.write("空气状态良好") - }else if(wr>100 && wr<=200){ - document.write("空气状态轻度污染") - }else if(wr>200 && wr<=300){ - document.write("空气状态中度污染") - }else if(wr>300){ - document.write("空气状态重度污染") - } - -### 判断当前季节 - var yf=1; - var jj=null; - switch(yf){ - case 1: - jj="冬季" - break; - case 2: - jj="冬季" - break; - case 3: - jj="春季" - break; - case 4: - jj="春季" - break; - case 5: - jj="春季" - break; - case 6: - jj="夏季" - break; - case 7: - jj="夏季" - break; - case 8: - jj="夏季" - break; - case 9: - jj="秋季" - break; - case 10: - jj="秋季" - break; - case 11: - jj="秋季" - break; - case 12: - jj="冬季" - break; - } - document.write("当前的季节是:"+jj) - -### 员工的工资 - document.write("<pre>"); - var gz=3000; - var i=1; - document.write("该员工第"+i+"年的工资为"+gz); - do{ - gz+=50; - i++; - document.write("\n该员工第"+i+"年的工资为"+gz); - }while(i<=4); - document.write("</pre>"); - -### 鸡兔同笼 - for(var c=0;c<=35;c++){ - var t=35-c; - if((2*c)+(4*t)==94){ - document.write("鸡有"+c+"只,兔有"+t+"只") - continue; - } - } - -### 65倍数的和 - var num=null; - for(var i=1;i<=1000;i++){ - - if(i%65==0){ - num+=i - continue; - } - } - document.write("65的倍数之和为"+num) - -### 办公卡位 - document.write("<pre>") - for(var i=1; i<=3; i++){ - for(var j=1; j<=3; j++){ - if(i==1 && j==3){ - document.write("\n") - continue; - }else if(i==3 && j==2){ - continue; - }else if(i==2 && j==3){ - document.write("第"+i+"排第"+j+"个\n") - }else{ - document.write("第"+i+"排第"+j+"个") - } - - } - } - document.write("</pre>") \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 0062d6de396a89671cb0cf37e8d2dd7627c0ba62..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,32 +0,0 @@ -### 笔记 - 判断 - if - if()……else - if()……else if()…… - if()……else if()……else - 循环 - for(let i=0;i<=0;i++) - while - do……while - 循环控制 - continue - break - - - -### 收货地址 - function address(sf,s,x,xxdz){ - document.write(sf,s,x,xxdz); - } - address("福建省","宁德市","寿宁县","详细地址") - -### 绝对值 - function Abs(a){ - if(a<0){ - a*=-1; - }else{ - a=a; - } - document.write(a); - } - Abs(-10); \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index c0068f10836fa4a347f942bd88ebd64305cf5019..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,189 +0,0 @@ -### 笔记 - ## 函数 - -### 函数的嵌套 -``` - function a(){ - alert('123'); - } - function b(){ - a(); - } - b(); -``` -### 递归函数 -递归函数就是函数在自身的函数体内调用自身. -``` - function fn(num){ - if(num <= 1){ - return 1; - }else{ - return fn(num-1)*num; - } - } - alert('10!的结果为'+fn(10)); -``` -### 内置函数 -#### 内置函数分为两类: 数值处理函数和字符串处理函数 -``` - 1. parselnt()函数 ——> 讲首位为数字的字符串转换成'数字' - - let str1 = "123mn"; - document.write(parselnt(str1)); ——>123 -``` -``` - 2. parseFloat()函数 ——> 讲首位为数字的字符串转换成'浮点型数字' - - let str1 = "123.45mn"; - document.write(parseFloat(str1)); ——>123.45 -``` -``` - 3.isNaN()函数 ——> 用于检验某个值是否为NaN - - let num1 = 456; - let num2 = "456mn "; - document.write(isNaN(str1)); ——> false - document.write(isNaN(str2)); ——> true -``` -``` - 4.isFinite() ——> 用于检验一个数值是否有限 - - document.write(isFinite(567)); ——>trun - document.write(isFinite(567mn)); ——>false - document.write(isFinite(10/0)); ——>false -``` -### 字符串处理函数 -``` - 1.eval函数 ——>计算字符串表达式的值 - - document.write(eval("5+7")) ——>12 - eval("x=7;y=9;document.write(x*y)"); ——>63 -``` -``` - 2.encodeURL()函数 ——>用于URL字符串进行编码 - - encodeURL(url); ——>对URL字符串进行编码并输出 -``` -``` - 3.decodeURL()函数 ——>用于对已编码进行解码 - - document.write(decodeURL(url)); ——>对编码后的URL字符串进行解码并输出 -``` -### 匿名函数 -``` - 格式: - let 变量名 = function(参数1,参数2,...){ - 函数体 - } - - 使用Function()构造函数 - let sum = new Function("x","y","alert(x+y);"); - sum(100,200) - -### 函数比较两个数的大小 - function estimate(num1,num2){ - if(num1>num2){ - return "大于"; - }else{ - return "小于"; - } - } - var e=estimate(9,10); - document.write(e); - -### 获取3个数的最小值 - function GainMin(num1,num2,num3){ - if(num1<num2 && num1<num3 ){ - return num1; - }else if(num2<num1 && num2<num3){ - return num2; - }else{ - return num3; - } - } - var gmin= GainMin(16,12,17); - document.write("最小值为"+gmin) - -### 判断顾客是否享受优惠活动 - function discount(num1,num2,num3){ - var text=nums(num1+num2+num3); - if(text>=500){ - return "该顾客可以享受商场优惠活动 " - } - return "该顾客不可以享受商场优惠活动 " - } - document.write(discount(199,156,165)) - -### 判断考生成绩是否达到本科线 - function grade(num1,num2,num3,num4){ - var text=nums(num1+num2+num3+num4); - if(text>=550){ - return "该考生成绩已达本科分数线" - } - return "该考生成绩未达本科分数线" - } - document.write(grade(108,115,126,237)) - -### 判断登入是否成功 - var logIn=function(num1,num2){ - if(num1=="mr" && num2=="mrsoft"){ - return "登入成功" - } - return "登入失败" - } - document.write(logIn("mr","mrsoft")) - -### 获取1000以内能同时被3和5整除的正整数 - document.write('<pre>'); - var sum=function(){ - var j=0 - for(var i=1;i<=1000;i++){ - if(i%3==0 && i%5==0){ - document.write(i+" ") - j+=1; - if(j%7==0){ - document.write("\n"); - } - } - } - } - sum() - document.write('</pre>'); - -### 综合练习1 判断年龄段 - function GridAge(num){ - if(0<num && num<=6){ - return "童年" - }else if(7<=num && num<=17){ - return "少年" - }else if(18<=num && num<=40){ - return "青年" - }else if(41<=num && num<=65){ - return "中年" - }else if(num>=66){ - return "老年" - } - } - alert("正处在"+GridAge(20)) - -### 综合练习2 输出某年某月的天数 - function particular(year,month){ - return new Date(year,month,0).getDate(); - } - alert("2024年6月有"+particular(2024,6)+"天") - -### 综合练习3 输出列表 - function form(h,l,k,g){ - document.write("<table width='"+ k + "' cellSpacing='0'>"); - for(var i=1; i<=h;i++){ - document.write("<tr>") - for(var j=1;j<=l;j++){ - document.write("<td height='"+ g + "'></td>") - } - document.write("</tr>") - } - document.write("</table>"); - } - form(5,6,700,80) - -### 斐波那契数列 diff --git "a/\351\231\206\346\235\250\351\230\263/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index fe69a804a7905702a4bfe86d3f01eb823aa185f1..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,114 +0,0 @@ -### 笔记 - ## 内部对象 - -### Math对象 - -#### 常用常量 - -- `Math.PI`:圆周率(约 3.14159) - -#### 数值运算方法 - -- `Math.abs(x)`:返回 x 的绝对值 - ```javascript - console.log(Math.abs(-5)); // 5 - ``` - -- `Math.ceil(x)`:向上取整(进一法) - ```javascript - console.log(Math.ceil(3.2)); // 4 - ``` - -- `Math.floor(x)`:向下取整(去尾法) - ```javascript - console.log(Math.floor(3.9)); // 3 - ``` - -- `Math.round(x)`:四舍五入取整 - ```javascript - console.log(Math.round(3.5)); // 4 - console.log(Math.round(3.4)); // 3 - `` - -- `Math.max(...values)`:返回一组数中的最大值 - ```javascript - console.log(Math.max(1, 5, 3)); // 5 - ``` - -- `Math.min(...values)`:返回一组数中的最小值 - ```javascript - console.log(Math.min(1, 5, 3)); // 1 - ``` - -- `Math.pow(x, y)`:返回 x 的 y 次幂 - ```javascript - console.log(Math.pow(2, 3)); // 8 - ``` - -- `Math.sqrt(x)`:返回 x 的平方根 - ```javascript - console.log(Math.sqrt(16)); // 4 - ``` - -- `Math.random()`:返回 0 到 1 之间的随机数(包含 0,不包含 1) - ```javascript - console.log(Math.random()); // 例如:0.456789 - // 生成1到10的随机整数 - console.log(Math.floor(Math.random() * 10) + 1); - ``` -### Date对象 - -Date 用于处理日期和时间,需要通过`new Date()`实例化使用。 - -### 计算两个日期间隔小时数 - var ks= new Date(2023,5,1); - var js= new Date(2023,6,1); - var time=js.getTime()-ks.getTime(); - var xss=time/3600000; - document.write("2023年5月1日到2023年6月1日之间间隔的小时数为"+xss+"小时") - -### 高考倒计时 - var ks=new Date(2025,11,20); - var js=new Date(2026,11,21); - var ts=js.getTime()-ks.getTime(); - var as=ts/86400000; - document.write("2025年11月20日到2062年6月1日之间间隔的天数为"+as+"天") - -### 判断鼠标按键 - document.addEventListener('mousedown', function(a){ - switch(a.button){ - case 0: - alert("单击了左键"); - break - case 1: - alert("单击了中键"); - case 2: - alert("单击了右键"); - } - }) - -### 综合练习1 随机数 - <p>请输入要生成随机数的位数</p> - <form name="form"> - <input type="text" name="digit"/> - <input type="button" value="生成" onclick="ran(form.digit.value)"/> - </form> - <script> - function ran(digit){ - var result=""; - for(i=0;i<digit;i++){ - result=result+(Math.floor(Math.random()*6+1)); - } - alert(result) - } - </script> - -### 综合练习2 计算从出生到现在度过的时间 - var ks=new Date(1996,6,9); - var js=new Date(2025,11,21); - var ts=js.getTime()-ks.getTime(); - var sts=ts/86400000; - var xss=ts/3600000; - var fzs=(ts % 3600000) / 60000; - var ms=(ts % 60000) / 1000; - document.write("周星星从出生到现在已度过了"+sts+"天>>>"+xss+"小时>>>"+ fzs+"分>>>"+ms +"秒") \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251121-\347\254\224\350\256\260.md" "b/\351\231\206\346\235\250\351\230\263/20251121-\347\254\224\350\256\260.md" deleted file mode 100644 index 3308bb424c846f9f4610fa15daebac4d082d2c01..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251121-\347\254\224\350\256\260.md" +++ /dev/null @@ -1,103 +0,0 @@ -### 笔记 - 1. 定义数组 - - 空数组: - ```bash - let arr = new Array();//定义一个空数组 - arr[0] = "html"; - arr[1] = "css"; - arr[2] = "js"; - ``` - - - 指定数组长度: - ```bash - let arr = new Array(3);//定义一个元素个数为3的数组 - arr[0] = 10; - arr[1] = 20; - arr[2] = 30; - ``` - - - 指定数组元素: - ```bash - let arr = new Array("张三","李四","王五");//定义一个包含3个元素的数组 - ``` - - - 直接定义数组: - ```bash - let arr = ["张三","李四","王五"];//直接定义一个包含3个元素的数组 - ``` - -#### 设置方法 - -- `setFullYear(year)`:设置年份 -- `setMonth(month)`:设置月份(0-11) -- `setDate(date)`:设置日期 -- `setHours(hours)`:设置小时 -- `setMinutes(minutes)`:设置分钟 -- `setSeconds(seconds)`:设置秒数 -- `setTime(timestamp)`:通过时间戳设置日期 - -#### 格式化方法 - -- `toString()`:转为字符串(如 "Fri Nov 21 2025 10:00:00 GMT+0800 (中国标准时间)") -- `toLocaleString()`:转为本地格式字符串(如 "2025/11/21 10:00:00") -- `toLocaleDateString()`:仅日期的本地格式(如 "2025/11/21") -- `toLocaleTimeString()`:仅时间的本地格式(如 "10:00:00") - -### Event对象 - -#### 常用属性 - -- `type`:事件类型(如 "click"、"keydown") -- `target`:触发事件的目标元素(事件源) -- `currentTarget`:绑定事件的元素(事件处理函数所属的元素) -- `clientX/clientY`:鼠标相对于视口的坐标(鼠标事件) -- `key`:按下的键盘按键值(键盘事件,如 "Enter"、"a") - -#### 常用方法 - -- `preventDefault()`:阻止事件的默认行为(如阻止 a 标签跳转、表单提交) - ```javascript - document.querySelector('a').addEventListener('click', (e) => { - e.preventDefault(); // 阻止链接跳转 - }); - ``` - -- `stopPropagation()`:阻止事件冒泡(阻止事件向父元素传播) - ```javascript - document.querySelector('.child').addEventListener('click', (e) => { - e.stopPropagation(); // 阻止事件冒泡到父元素 - console.log('子元素被点击'); - }); - ``` - -- `stopImmediatePropagation()`:阻止事件冒泡,且阻止当前元素后续的事件处理函数执行 - ```javascript - const btn = document.querySelector('button'); - btn.addEventListener('click', (e) => { - e.stopImmediatePropagation(); - console.log('第一个处理函数'); - }); - btn.addEventListener('click', () => { - console.log('第二个处理函数'); // 不会执行 - }); - ``` - -## 数组 - -### 定义数组 - -1. 定义空数组: arrayObject = new Array(); - -2. 指定数组长度: arrayObject = new Array(size); - -3. 指定数组元素: arrayObject = new Array(element1,element2,element3,...); - -4. 直接定义数组(最常用的): arraryObject = [element1,element2,element3,...]; - -### 数组的增删改查 - -1. push(a,b,c...); - -2. pop(); - -3. splice() \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index d472f8b2dcdd548105658cce6ec7d9619804cbba..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,126 +0,0 @@ -### 笔记 -1. 基础特性 - -- 不可变性:所有修改操作返回新字符串 -- 字面量定义:`let str = "Hello";` -- 构造函数:`let str = new String("Hello");`(不推荐) - -#### 2. 常用方法 - -``` -javascriptCopy Code// 大小写转换 -str.toUpperCase() // "HELLO" -str.toLowerCase() // "hello" - -// 查找与替换 -str.indexOf("e") // 1 -str.includes("e") // true -str.replace("e", "a") // "Hallo" - -// 分割与连接 -str.split("") // ["H", "e", "l", "l", "o"] -str.concat(" World") // "Hello World" - -// 修剪 -" hello ".trim() // "hello" -``` - -#### 3. 模板字符串 - -``` -javascriptCopy Codelet name = "Alice"; -let age = 25; -`Name: ${name}, Age: ${age}` // "Name: Alice, Age: 25" -``` - -#### 4. 常用属性 - -``` -javascriptCopy Codestr.length // 字符串长度 -str.charCodeAt(0) // 字符Unicode码 -str.codePointAt(0) // 代理对正确编码 - -注意:优先使用字面量定义字符串,避免使用`String`构造函数。 -``` -### 练习1:包含星期信息的当前日期 - var rq = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六") - var to = new Date(); - var day = to.getDay(); - var cc = rq[day]; - document.write("今天是"+cc) - -### 练习2: 找到最大值 - var all = new Array(5,7,6,3,9,2); - function qmax(all){ - var zmax=all[0] - for(i=1;i<=all.length;i++){ - if(zmax<all[i]){ - zmax=all[i] - } - } - return zmax; - } - document.write("最大值为:"+qmax(all)) - -### 练习3: 获取指定元素 - var all = new Array(1,2,3,4,5,6) - document.write(all.slice(1,5)) - -### 综合练习1 列车的途经站 - var all =Array("长春","昌图西","铁岭西","沈阳北","绶中北","北京") - document.write("途经站:"+all.join(" ")) - document.write("<br>") - document.write("反向站:"+all.reverse().join(" ")) - -### 综合练习2 手机销量排行榜 - <tr height="30" bgcolor="#FFFFFF"> - <td align="center" width="50">排名</td> - <td align="center" width="100">品牌</td> - <td align="center" width="100">市场份额</td> - </tr> - var t = new Map([ - ["OPPO",17.5], - ["iPhone",18], - ["vivo",19.2], - ["小米",13.9], - ["荣耀",16.7] - ]) - function sortB(a, b) { - return b[1] - a[1]; - } - var sorted = Array.from(t.entries()).sort(sortB); - for(var i=0;i<sorted.length;i++){ - var entry = sorted[i]; - var brand = entry[0]; - var share = entry[1]; - document.write("<tr height=26 bgcolor='#FFFFFF'>"); - document.write("<td align='center'>"+(i+1)+"</td>"); - document.write("<td align='center'>"+brand +"</td>"); - document.write("<td align='center'>"+share+"%</td>"); - document.write("</tr>"); - } -### 训练1 检索书名是四字的书籍 - var a = new Array("雪山飞狐","连城诀","天龙八部","射雕英雄传","鹿鼎记","笑傲江湖","书剑恩仇录","神雕侠侣","倚天屠龙记","碧血剑",) - for(var i=0;i<a.length;i++){ - if(a[i].length % 4==0){ - document.write(a[i]+",") - } - } -### 训练2 找出含有0431的字符串 - var a= new Array("1330431****","1567766****","1304316****","1526567****","1580433****""139****0431") - for(var i=0;i<a.length;i++){ - if(a[i].indexOf("0431")!=-1){ - document.write(a[i]+" ") - } - } -### 训练3 截取qq号 - var a ="明日科技的企业QQ邮箱地址为4006****66@qq.com" - document.write(a.substr(14)) -### 训练1 匹配大小写字母是否相邻 - function pd(st){ - const r = /[A-Z][a-z]|[a-z][A-Z]/; - return r.test(st) - } - document.write(pd("JavaScript从入门到精通")) -### 训练2 匹配数字格式 - diff --git "a/\351\231\206\346\235\250\351\230\263/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 9456cb114417928b5c9f682879485ce6e5a580be..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,64 +0,0 @@ -### 笔记 -# JavaScript正则表达式笔记 - -正则表达式是用来匹配和处理文本的强大工具,在JavaScript中主要用于表单验证、搜索替换和字符串提取等场景。 - -### 创建方式 - -``` -javascriptCopy Code// 字面量方式(推荐) -const reg1 = /pattern/flags; - -// 构造函数方式(支持动态构建) -const reg2 = new RegExp('pattern', 'flags'); -``` - -### 常用修饰符 - -- ‌**i**‌:忽略大小写2 -- ‌**g**‌:全局匹配2 -- ‌**m**‌:多行匹配2 - -### 核心元字符 - -| 字符 | 含义 | 示例 | -| ---- | ----------------------------- | ------------------------ | -| `\d` | 数字(0-9)3 | `/\d/` 匹配"a1"中的1 | -| `\w` | 单词字符(字母/数字/下划线)3 | `/\w/` 匹配"$5"中的5 | -| `\s` | 空白字符(空格/制表符等)3 | `/\s/` 匹配"a b"中的空格 | -| `.` | 任意字符(除换行符)3 | `/./` 匹配"a"中的a | - -### 边界符 - -- ‌**`^`**‌:匹配字符串开始1 -- ‌**`$`**‌:匹配字符串结束1 -- ‌**`\b`**‌:单词边界3 - -### 常用量词 - -- ‌**`\*`**‌:0次或多次 -- ‌**`+`**‌:1次或多次 -- ‌**`?`**‌:0次或1次 -- ‌**`{n}`**‌:精确n次 - -### 实际应用 - -``` -javascriptCopy Code// 邮箱验证 -const emailReg = /a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; - -// 手机号验证 -const phoneReg = /:ml-citation{ref="1,3" data="citationList"}-9]\d{9}$/; - -// 表单验证 -const usernameReg = /a-zA-Z0-9_]{4,16}$/; -``` - -### 常用方法 - -- `test()`:检测是否匹配,返回布尔值1 -- `exec()`:执行搜索,返回匹配结果1 -- `match()`:字符串方法,返回匹配结果 -- `replace()`:字符串替换 -\ No newline at end of file - diff --git "a/\351\231\206\346\235\250\351\230\263/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index a3ee2508c5c771aaf8ae31a7fb05685435b933fc..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,180 +0,0 @@ -### 笔记 -1. 在代码行号左侧点击设置断点 -2. 使用调试面板: - - ‌**继续执行**‌(F8) - - ‌**单步跳过**‌(F10) - - ‌**单步进入**‌(F11) - - ‌**查看调用栈**‌(Call Stack) - - ‌**监视表达式**‌(Watch) - -##### 控制台调试 - -- `console.log()`:输出变量值 -- `console.error()`:高亮显示错误 -- `console.warn()`:警告信息 -- `console.table()`:表格化显示数据 -- `console.time()`/`timeEnd()`:性能测量 - -#### 2. 常见调试场景 - -##### 变量未定义 - -- 现象:`ReferenceError: x is not defined` -- 解决:检查变量声明(`let`/`const`/`var`)和作用域1 - -##### 函数未执行 - -- 现象:预期输出未出现 -- 解决: - - 检查函数是否被调用 - - 验证回调函数是否正确传递 - - 使用`debugger`语句强制暂停 - -##### 异步问题 - -- 现象:回调未按预期执行 -- 解决: - - 使用`Promise.then()`/`await`替代回调 - - 在`setTimeout`/`setInterval`中验证回调函数 - -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Document - - - - - - - -``` - -**练习2** - -```html - - - - - - Document - - - - - -``` - -**综合练习1** - -```html - - - - - - - Document - - - -
      -

      输入1~5的数字:

      - -
      - -
      - - - - -``` - -**综合练习2** - -```html - - - - - - - Document - - - -
      - -
      - -
      - -
      - - - - -``` \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 16a5162c57455d53dc3366ad27e69873f15cefba..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,158 +0,0 @@ -### 1. 事件类型 - -- ‌**用户交互**‌:`click`(点击)、`mouseover`(鼠标悬停)、`keydown`(按键) -- ‌**页面变化**‌:`load`(页面加载完成)、`resize`(窗口大小变化) -- ‌**表单相关**‌:`submit`(表单提交)、`input`(输入内容变化) - -#### 2. 事件流 - -- ‌**冒泡**‌:从目标元素向上传播到 `document`(如点击 `div` 里的 `button`,`div` 的点击事件也会触发) -- ‌**捕获**‌:从 `document` 向下传播到目标元素(较少使用) - - - -### 二、事件绑定方式 - -#### 1. HTML 内联式 - -``` -htmlCopy Code - - - - -``` - -‌**缺点**‌:HTML 和 JS 混合,难以维护。 - -#### 2. DOM 属性绑定 - -``` -javascriptCopy Codeconst button = document.querySelector('button'); -button.onclick = function() { - alert('点击了!'); -}; -``` - -‌**缺点**‌:只能绑定一个事件,后绑定的会覆盖之前的。 - -#### 3. `addEventListener`(☆) - -``` -javascriptCopy Codeconst button = document.querySelector('button'); -button.addEventListener('click', function() { - alert('点击了!'); -}); -``` - -‌**优点**‌: - -- 可绑定多个事件 -- 支持事件流阶段(`'capture'` 或 `'bubble'`) -- 可移除事件(`removeEventListener`) - -#### 4. 移除事件监听 - -``` -javascriptCopy Codeconst handler = function() { - alert('点击了!'); -}; -button.addEventListener('click', handler); -// 移除时需引用相同的函数 -button.removeEventListener('click', handler); - -``` - -### 三、事件对象(`event`) - -事件触发时自动传入回调函数,包含事件信息: - -``` -javascriptCopy Codebutton.addEventListener('click', function(event) { - console.log(event.target); // 触发事件的元素 - console.log(event.type); // 事件类型(如 'click') -}); -``` - -#### 常用属性 - -- `event.preventDefault()`:阻止默认行为(如阻止表单提交) -- `event.stopPropagation()`:阻止事件冒泡 -- `event.target`:触发事件的元素 -- `event.currentTarget`:绑定事件的元素(可能与 `event.target` 不同) - - - -### 四、事件委托 - -利用事件冒泡,将事件绑定到父元素,通过 `event.target` 判断具体元素: - -``` -javascriptCopy Codedocument.querySelector('ul').addEventListener('click', function(event) { - if (event.target.tagName === 'LI') { - console.log('点击了列表项:', event.target.textContent); - } -}); -``` - -‌**优点**‌:减少事件绑定,动态添加元素时无需重新绑定。 - - - -### 五、常用事件处理 - -#### 1. 表单验证 - -``` -javascriptCopy Codeconst form = document.querySelector('form'); -form.addEventListener('submit', function(event) { - event.preventDefault(); // 阻止表单默认提交 - const email = document.querySelector('input[type="email"]').value; - if (!email.includes('@')) { - alert('请输入有效的邮箱!'); - } else { - // 提交逻辑 - } -}); -``` - -#### 2. 动态元素事件 - -``` -javascriptCopy Code// 通过事件委托处理动态添加的元素 -document.querySelector('div').addEventListener('click', function(event) { - if (event.target.classList.contains('dynamic-btn')) { - console.log('动态按钮被点击了!'); - } -}); -``` - -#### 3. 键盘事件 - -``` -javascriptCopy Codedocument.addEventListener('keydown', function(event) { - if (event.key === 'Enter') { - console.log('回车键被按下!'); - } -}); - -``` - -### 六、简单示例 - -``` -htmlCopy Code - -``` \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index a8b3b2069a3b45cfe9e2f6a7d86f55f0e4e82287..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,105 +0,0 @@ -# 笔记 -## 一、文本编辑事件(表单/输入框交互核心) -### 1. 核心事件分类(按触发场景) -| 事件名 | 触发时机 | 关键特点 | -|--------------|-------------------------------------------|-------------------------------------------| -| `input` | 输入框值实时变化(键盘/粘贴/拖拽输入) | 高频触发、支持所有输入类元素(input/textarea/contenteditable) | -| `change` | 元素失焦且值发生变化 | 低频次、适合最终值确认(如表单提交前校验)| -| `keydown` | 按键按下(含功能键:Enter/Backspace等) | 可阻止默认行为(如禁止输入数字)| -| `keyup` | 按键松开 | 适合获取最终输入结果(如搜索联想)| -| `compositionstart` | 输入法开始输入(如中文拼音) | 区分普通输入/输入法输入,避免重复处理 | -| `compositionend` | 输入法结束输入 | 配合 `input` 实现精准的中文输入监听 | -| `cut/copy/paste` | 剪切/复制/粘贴操作 | 可阻止默认行为(如禁止粘贴)| -| `select` | 选中文本时(input/textarea) | `e.target.selectionStart/End` 获取选中范围 | - - -### 2. 核心注意 -- `input` 事件无 `event.key`,需结合 `keydown` 处理按键逻辑; -- 移动端输入框需注意 `touchstart` 与编辑事件的冲突,避免阻止默认触摸行为; -- 禁止输入特殊字符时,优先用 `keydown` 阻止(比 `input` 拦截更高效)。 - -## 二、对象拖放事件(Drag & Drop) -### 1. 拖放核心流程与事件 -#### (1)可拖放元素(源元素)事件 -| 事件名 | 触发时机 | 关键操作 | -|-----------------|---------------------------|-----------------------------------| -| `dragstart` | 开始拖拽元素时 | 设置拖拽数据:`e.dataTransfer.setData('text', 数据)` | -| `drag` | 拖拽过程中(高频触发) | 可更新拖拽样式(如半透明)| -| `dragend` | 拖拽结束(无论是否成功) | 重置元素样式 | - -#### (2)目标区域元素事件 -| 事件名 | 触发时机 | 关键操作 | -|-----------------|---------------------------|-----------------------------------| -| `dragenter` | 拖拽元素进入目标区域 | 阻止默认行为(允许放置)+ 标记目标样式 | -| `dragover` | 拖拽元素在目标区域移动 | 必须阻止默认行为(否则无法触发drop) | -| `dragleave` | 拖拽元素离开目标区域 | 重置目标样式 | -| `drop` | 拖拽元素在目标区域释放 | 获取拖拽数据:`e.dataTransfer.getData('text')` | - - -### 2. 关键API(DataTransfer 对象) -| 方法/属性 | 作用 | -|--------------------|---------------------------------------| -| `setData(type, data)` | 设置拖拽数据(type:text/plain、text/html等) | -| `getData(type)` | 获取拖拽数据 | -| `effectAllowed` | 设置允许的操作(none/ copy/ move/ link) | -| `dropEffect` | 设置放置效果(配合effectAllowed)| -| `setDragImage(img, x, y)` | 自定义拖拽时的预览图 | - - -# 代码 -## 1 -```js -
      - 移动到我上面试一下 -
      - -``` - -## 2 -```js - - -``` - - -## 3 -```js - - -``` -```js - - -

      - -``` -```js - - -``` -```js - - - -
      -

      行路难·其一

      -

      〔唐代〕李白

      -

      金樽清酒斗十千,玉盘珍羞直万钱。

      -

      停杯投箸不能食,拔剑四顾心茫然。

      -

      欲渡黄河冰塞川,将登太行雪满山。

      -

      闲来垂钓碧溪上,忽复乘舟梦日边。

      -

      行路难!行路难!多歧路,今安在?

      -

      长风破浪会有时,直挂云帆济沧海。

      -
      - - -``` -```js - - -
      点击打开图片
      - - - - -``` -```js - - - - -
      - -``` \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251204-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251204-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 10c23f8e2ad88b7f893bb29eb8b87ef1e6fe8b84..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251204-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,58 +0,0 @@ - - - let dayCount = new Date(year, month, 0).getDate(); - - for (let i = 1; i <= dayCount; i++) { - daySelect.innerHTML += ``; - } - } - - - function handleDateChange() { - let selectedYear = yearSelect.value; - let selectedMonth = monthSelect.value; - initDay(selectedYear, selectedMonth); - } - // 初始化执行 - initYear(); - initMonth(); - initDay(yearSelect.value, monthSelect.value); // 初始显示当年当月天数 - // 绑定联动事件:年份改变时更新月、日;月份改变时更新日 - yearSelect.onchange = function () { - initMonth(); // 年份变,月份重置为1-12 - handleDateChange(); // 更新日期 - }; - monthSelect.onchange = handleDateChange; - -``` -```js - - - - -
      - - 选中的表情 -
      - \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 4fa07c14f40b181d44a07cb33f52bb2ebb8cf74b..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,330 +0,0 @@ -# 笔记 -## 一、核心定位 -1. **顶级对象**:浏览器全局作用域载体,所有全局变量/函数(`var`声明)均为其属性,可省略`window`直接调用;全局`this`指向`window`。 -2. **核心子对象**:包含`document`(DOM操作入口)、`location`(URL操作)、`history`(历史记录)、`navigator`(浏览器信息)、`localStorage/sessionStorage`(本地存储)等。 - -## 二、窗口基础操作 -1. **尺寸与滚动** - - 视口尺寸:`innerWidth/innerHeight`(含滚动条)、`document.documentElement.clientWidth`(不含,推荐); - - 滚动操作:`scrollTo(x,y)`(指定位置)、`scrollBy(dx,dy)`(相对滚动),支持`behavior:'smooth'`实现平滑滚动。 -2. **打开/关闭** - - `window.open()`打开新窗口(需用户交互触发,否则易被拦截),`close()`关闭窗口(仅脚本打开的窗口可自由关闭)。 - -## 三、全局方法 -1. **弹窗类**:`alert()`(提示)、`confirm()`(确认,返回布尔值)、`prompt()`(输入,返回字符串/`null`),均会阻塞代码执行。 -2. **定时器**:`setTimeout`(延迟执行)、`setInterval`(定时重复),需用`clearTimeout/clearInterval`清除;高性能动画优先用`requestAnimationFrame`。 - -## 四、核心事件 -- `load`(资源全加载,触发晚)、`resize`/`scroll`(高频事件,需节流优化)、`beforeunload`(页面卸载前提示保存)、`focus/blur`(窗口焦点变化)。 - -## 五、本地存储 -| 特性 | localStorage | sessionStorage | -|--------------|--------------------|--------------------| -| 有效期 | 永久(手动清除)| 会话结束失效 | -| 作用域 | 同源所有窗口共享 | 仅当前窗口/标签页 | -| 注意 | 仅存字符串,复杂数据需`JSON`序列化,不存敏感信息 | - -# 代码 -```html - -
      - - - -
      -
      - - -``` - -- 训练2 - -```html - - - -
      歌名错误!
      - -

      -
      - 11111111111111111
      - 111111111111111111
      - 11111111111111111111
      - 1111111111111111111111111 -
      - - - -``` - -- 训练3 - -```html - -

      最新电影资讯

      -
      -

      1.《金蝉脱壳》两大动作巨星联手

      -

      2.《啊甘正传》励志而传奇的一生

      -

      3.《爱乐之城》爱情与梦想的交织

      -

      4.《头号玩家》游戏梦想照进现实

      -
      -
      - - - -
      - - -``` - -- 训练4 - -```html - - - - -
      -
      -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 杧果
      • -
      -
      - -
      -
        -
      • 西瓜
      • -
      • 蜜橘
      • -
      • 萝卜
      • -
      -
      -
      - - - -``` - -- 训练5 - -```html - -

      在《倚天屠龙记》中,张三丰是______派的掌门?

      -
      -
      - - - - -
      -
      - - - - -``` - -- 综合1 - -```html - -
      - jnccuicausncuass -
      - 将粗体字改为斜体 - - - -``` - -- 综合2 - -```html - - 年 - - 月 - - 日 - - - -``` - -- 综合3 - -```html - - -
      - -
      - - -``` \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 70374defcff96d505c5c258d2c3903eb608c956f..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,99 +0,0 @@ -## 一、核心概念 -BOM(Browser Object Model):浏览器对象模型,无统一官方标准,用于操作浏览器窗口及组件,核心是 `window` 对象。 -`window` 是浏览器的全局对象,所有 BOM 特性均挂载其上,全局变量/函数会自动成为 `window` 的属性/方法。 - -## 二、核心对象 -### 1. window(顶层对象) -#### (1)尺寸相关 -```js -// 视口尺寸(不含滚动条) -window.innerWidth / window.innerHeight -// 窗口整体尺寸(含浏览器边框) -window.outerWidth / window.outerHeight -``` -### (2)窗口操作 -```js -// 打开新窗口(慎用,易被浏览器拦截) -window.open(url, name, features) -// 关闭当前窗口 -window.close() -// 窗口滚动 -window.scrollTo(x, y) // 绝对滚动到指定坐标 -window.scrollBy(x, y) // 相对当前位置滚动 -``` -### (3)定时器 -```js -// 一次性定时器(延迟执行) -let timer1 = setTimeout(() => {}, 1000) // 1秒后执行 -clearTimeout(timer1) // 清除未执行的定时器 - -// 周期性定时器(重复执行) -let timer2 = setInterval(() => {}, 1000) // 每1秒执行一次 -clearInterval(timer2) // 清除周期性定时器 - -// ES6+ 精准动画定时器 -let timer3 = requestAnimationFrame(callback) -cancelAnimationFrame(timer3) // 清除动画定时器 -``` -### 2. location(地址栏对象) -#### (1)核心属性 -| 属性 | 说明 | 示例 | -|------------|-------------------------------|-------------------------------------------| -| href | 完整 URL(可修改实现跳转)| location.href = 'https://www.baidu.com' | -| protocol | 网络协议(http/https 等)| location.protocol | -| host | 域名 + 端口号 | location.host | -| pathname | URL 路径部分 | location.pathname | -| search | 查询参数(? 开头)| location.search | -| hash | 哈希值(# 开头,锚点)| location.hash | - -### (2)核心方法 -```js -location.reload() // 刷新页面(传true:强制刷新,不走缓存) -location.assign(url) // 跳转新页面(可通过浏览器后退返回原页面) -location.replace(url) // 替换当前页面(无法后退返回原页面) -``` -### 3. history(历史记录对象) -```js -history.back() // 后退一页(等同于点击浏览器后退按钮) -history.forward() // 前进一页(等同于点击浏览器前进按钮) -history.go(n) // 跳转指定步数(n=1前进,n=-1后退,n=0刷新) -history.pushState(state, title, url) // 添加历史记录(不刷新页面) -history.replaceState(state, title, url) // 替换当前历史记录(不刷新) -``` - -### 4. navigator(浏览器信息对象) -常用属性: -```js -navigator.userAgent // 浏览器UA字符串(用于判断浏览器/设备类型) -navigator.language // 浏览器默认语言(如zh-CN、en-US) -navigator.onLine // 网络连接状态(true=在线,false=离线) -``` -### 5. screen(屏幕信息对象) -````js -screen.width / screen.height // 设备屏幕总分辨率 -screen.availWidth / screen.availHeight // 屏幕可用分辨率(不含任务栏/状态栏) -```` - -## 三、常用 BOM 事件 -```js -// 窗口加载完成(DOM结构+所有资源加载完毕) -window.onload = () => { - console.log('页面完全加载') -} - -// 窗口尺寸变化时触发 -window.onresize = () => { - console.log('窗口尺寸改变:', window.innerWidth) -} - -// 窗口滚动时触发 -window.onscroll = () => { - console.log('页面滚动了') -} - -// 页面即将离开(关闭/刷新/跳转)时触发 -window.onbeforeunload = (e) => { - e.preventDefault() - e.returnValue = '' // 触发浏览器离开确认提示 - return '' -} \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index d0138e181c31b028827884348724773533758a8f..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,249 +0,0 @@ -## 一、Style 对象核心概述 -- Style 对象是 JavaScript 操作 DOM 元素内联样式的核心接口,对应元素的 style 属性,仅控制内联样式`(
      )`,而非外部样式表或 ` - - - 1 - 2 - 3 - - \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 53add16e9e29f5cbfd1c3c125a615954c0f791f6..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,228 +0,0 @@ -### 1. 提交控制 -- 手动提交:`form.submit()`(不触发 `onsubmit`); -- 阻止默认提交:`e.preventDefault()`(异步提交必用); -- 推荐方式:监听 `submit` 事件,自定义逻辑后异步提交。 - -### 2. 验证 -- 原生验证:`form.checkValidity()`(校验返回布尔)、`form.reportValidity()`(校验+弹窗提示); -- 自定义验证:控件 `setCustomValidity('错误提示')`(清空需设空字符串)。 - -## 五、FormData 关键(异步提交) -1. 快速收集表单数据:`new FormData(form)`(自动含所有控件值,支持文件); -2. 可手动追加:`formData.append('key', '值')`; -3. 异步提交:`fetch`/`axios` 中直接作为 `body`,自动处理编码。 - -## 六、核心坑点 -1. 单选/复选框同名需遍历集合找 `checked=true` 的值,不可直接取 `value`; -2. `form.submit()` 不触发 `onsubmit` 事件,验证需监听 `submit` 事件; -3. 文件输入框 `value` 只读,仅能用户操作; -4. 下拉框直接设 `select.value` 即可选中,无需遍历 option(特殊场景除外)。 - -# 作业 - -## 1 -```js -输入兑换码:
      - -
      - - -``` -## 2 -```js - - - - - - -``` - -## 3 -```js - -

      选择课程(最多选6门)

      - 语文
      - 数学
      - 英语
      - 物理
      - 化学
      - 生物
      - 历史
      - 地理
      - - -``` -## 4 - -```js - - -

      选择题:2024年奥运会举办城市是?

      - - A. 罗马
      - B. 北京
      - C. 巴黎
      - D. 伦敦
      - - - - - -``` - -## 5 -```js - -

      选择兴趣爱好

      - - 阅读
      - 运动
      - 听歌
      - 编程
      - 旅游
      - - - - - - - - - -``` - - -## 6 -```js - - - - - - - - - \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251212-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251212-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index a76f0aef1f6d99317a063b5dffbe349014beea58..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251212-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,17 +0,0 @@ -## 一、JSON -### 1. 核心概念 -JSON(JavaScript Object Notation):轻量级数据交换格式,跨语言、易读易解析,是前后端数据交互的主流格式。 - -### 2. 核心方法(必记) -| 方法 | 作用 | 示例 | -|------|------|------| -| `JSON.parse()` | 把JSON字符串 → JS对象/数组(处理后端返回数据) | `const obj = JSON.parse('{"name":"张三","age":20}')` | -| `JSON.stringify()` | 把JS对象/数组 → JSON字符串(向后端发送数据) | `const str = JSON.stringify({name:"张三",age:20})` | - -### 3. 关键注意点 -- 键名必须用**双引号**包裹(单引号/无引号均无效); -- 不支持函数、undefined 类型(序列化时会被忽略)。 - -## 二、Fetch API -### 1. 核心概念 -现代浏览器原生异步网络请求接口,替代传统 XMLHttpRequest,基于 Promise 实现,语法更简洁。 \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251215-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251215-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index bb88abc9eb676146dc000cf2c009864fc8272630..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251215-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,507 +0,0 @@ -# jQuery 学习笔记 - -## 一、简介 - -jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。 - -### 特点: - -- 链式操作 -- 隐式迭代 -- 丰富的插件生态 -- 浏览器兼容性好 - -## 二、基本使用 - -### 1. 引入 jQuery - -```html - - - - - -``` - -### 2. 文档就绪事件 - -```javascript -// 标准写法 -$(document).ready(function () { - // 代码在这里执行 -}); - -// 简写 -$(function () { - // 代码在这里执行 -}); -``` - -## 三、选择器 - -### 1. 基本选择器 - -```javascript -// ID选择器 -$("#myId"); - -// 类选择器 -$(".myClass"); - -// 元素选择器 -$("div"); - -// 通配符选择器 -$("*"); - -// 并集选择器 -$("div, p, .class"); - -// 交集选择器 -$("div.className"); -``` - -### 2. 层级选择器 - -```javascript -// 后代选择器 -$("ul li"); - -// 子元素选择器 -$("ul > li"); - -// 相邻兄弟选择器 -$("h2 + p"); - -// 通用兄弟选择器 -$("h2 ~ p"); -``` - -### 3. 过滤选择器 - -```javascript -// :first -$("li:first"); - -// :last -$("li:last"); - -// :even 偶数 -$("tr:even"); - -// :odd 奇数 -$("tr:odd"); - -// :eq(index) -$("li:eq(2)"); - -// :gt(index) -$("li:gt(2)"); - -// :lt(index) -$("li:lt(2)"); - -// :not(selector) -$("input:not(:checked)"); - -// :contains(text) -$("div:contains('hello')"); -``` - -### 4. 表单选择器 - -```javascript -// :input -$(":input"); - -// :text -$(":text"); - -// :password -$(":password"); - -// :radio -$(":radio"); - -// :checkbox -$(":checkbox"); - -// :submit -$(":submit"); - -// :checked -$(":checked"); - -// :selected -$(":selected"); - -// :disabled -$(":disabled"); - -// :enabled -$(":enabled"); -``` - -### 5. 属性选择器 - -```javascript -// [attribute] -$("div[id]"); - -// [attribute=value] -$("input[name='username']"); - -// [attribute!=value] -$("input[name!='username']"); - -// [attribute^=value] -$("a[href^='https']"); - -// [attribute$=value] -$("img[src$='.jpg']"); - -// [attribute*=value] -$("a[href*='google']"); -``` - -## 四、DOM 操作 - -### 1. 创建元素 - -```javascript -// 创建元素 -var $div = $("
      "); -var $p = $("

      Hello World

      "); -``` - -### 2. 添加元素 - -```javascript -// 内部添加 -$("ul").append("
    • 新项目
    • "); // 末尾添加 -$("ul").prepend("
    • 新项目
    • "); // 开头添加 - -// 外部添加 -$("div").after("

      新段落

      "); // 之后添加 -$("div").before("

      新段落

      "); // 之前添加 -``` - -### 3. 删除元素 - -```javascript -// 删除元素 -$("div").remove(); // 删除元素本身 -$("div").empty(); // 清空元素内容 -$("div").detach(); // 删除但保留数据 -``` - -### 4. 修改元素 - -```javascript -// 替换元素 -$("p").replaceWith("
      新内容
      "); - -// 包裹元素 -$("span").wrap("
      "); // 单独包裹 -$("span").wrapAll("
      "); // 整体包裹 -$("span").wrapInner(""); // 包裹内容 -``` - -### 5. 遍历元素 - -```javascript -// 父级元素 -$("li").parent(); -$("li").parents(); -$("li").parentsUntil("div"); - -// 子级元素 -$("ul").children(); -$("ul").find("li"); - -// 兄弟元素 -$("li").siblings(); -$("li").next(); -$("li").prev(); -$("li").nextAll(); -$("li").prevAll(); -``` - -## 五、CSS 操作 - -### 1. 获取和设置 CSS - -```javascript -// 获取CSS -var color = $("div").css("color"); - -// 设置单个CSS -$("div").css("color", "red"); - -// 设置多个CSS -$("div").css({ - color: "red", - "font-size": "16px", - "background-color": "#f0f0f0", -}); -``` - -### 2. 类操作 - -```javascript -// 添加类 -$("div").addClass("active"); - -// 删除类 -$("div").removeClass("active"); - -// 切换类 -$("div").toggleClass("active"); - -// 检查类 -if ($("div").hasClass("active")) { - // 执行操作 -} - -// 替换类 -$("div").removeClass("oldClass").addClass("newClass"); -``` - -### 3. 尺寸和位置 - -```javascript -// 尺寸 -$("div").width(); // 内容宽度 -$("div").innerWidth(); // 包含内边距 -$("div").outerWidth(); // 包含边框 -$("div").outerWidth(true); // 包含外边距 - -// 位置 -$("div").offset(); // 相对于文档 -$("div").position(); // 相对于父元素 -$("div").scrollTop(); // 滚动条位置 -$("div").scrollLeft(); -``` - -## 六、属性操作 - -### 1. 通用属性 - -```javascript -// 获取属性 -var href = $("a").attr("href"); - -// 设置属性 -$("a").attr("href", "http://example.com"); - -// 设置多个属性 -$("img").attr({ - src: "image.jpg", - alt: "描述", - title: "标题", -}); - -// 删除属性 -$("img").removeAttr("alt"); -``` - -### 2. 表单属性 - -```javascript -// 获取值 -var value = $("input").val(); - -// 设置值 -$("input").val("新值"); - -// 获取选中状态 -var isChecked = $("checkbox").prop("checked"); - -// 设置选中状态 -$("checkbox").prop("checked", true); - -// 获取HTML内容 -var html = $("div").html(); - -// 设置HTML内容 -$("div").html("

      新内容

      "); - -// 获取文本内容 -var text = $("div").text(); - -// 设置文本内容 -$("div").text("新文本"); -``` - -## 七、事件处理 - -### 1. 事件绑定 - -```javascript -// 直接绑定 -$("button").click(function () { - alert("按钮被点击"); -}); - -// on()方法 -$("button").on("click", function () { - // 处理点击 -}); - -// 绑定多个事件 -$("input").on({ - focus: function () { - /* 聚焦处理 */ - }, - blur: function () { - /* 失焦处理 */ - }, - keyup: function () { - /* 按键处理 */ - }, -}); - -// 事件委托 -$("ul").on("click", "li", function () { - // 处理li点击 -}); -``` - -### 2. 常用事件 - -```javascript -// 鼠标事件 -.click() -.dblclick() -.mouseenter() -.mouseleave() -.mousedown() -.mouseup() -.mousemove() - -// 键盘事件 -.keydown() -.keypress() -.keyup() - -// 表单事件 -.focus() -.blur() -.change() -.submit() -.select() - -// 窗口事件 -.resize() -.scroll() -.load() -.unload() -``` - -### 3. 事件对象 - -```javascript -$("a").click(function (event) { - event.preventDefault(); // 阻止默认行为 - event.stopPropagation(); // 阻止事件冒泡 - - var target = event.target; // 触发元素 - var type = event.type; // 事件类型 - var pageX = event.pageX; // 鼠标X坐标 - var pageY = event.pageY; // 鼠标Y坐标 - var which = event.which; // 按键代码 -}); -``` - -### 4. 其他事件方法 - -```javascript -// 解除绑定 -$("button").off("click"); - -// 触发事件 -$("button").trigger("click"); - -// 一次性事件 -$("button").one("click", function () { - // 只执行一次 -}); - -// hover方法 -$("div").hover( - function () { - /* 鼠标进入 */ - }, - function () { - /* 鼠标离开 */ - } -); -``` - -## 八、动画效果 - -### 1. 显示和隐藏 - -```javascript -// 基本显示隐藏 -$("div").show(); -$("div").hide(); -$("div").toggle(); - -// 带效果的显示隐藏 -$("div").show(1000); // 1秒显示 -$("div").hide("slow"); // 慢速隐藏 -$("div").toggle("fast", function () { - // 动画完成回调 -}); - -// 淡入淡出 -$("div").fadeIn(1000); // 淡入 -$("div").fadeOut(500); // 淡出 -$("div").fadeToggle(); // 切换 -$("div").fadeTo(1000, 0.5); // 淡入到指定透明度 -``` - -### 2. 滑动效果 - -```javascript -$("div").slideDown(1000); // 滑下 -$("div").slideUp(500); // 滑上 -$("div").slideToggle(); // 切换滑动 -``` - -### 3. 自定义动画 - -```javascript -// 简单动画 -$("div").animate( - { - left: "+=50", - opacity: 0.5, - }, - 1000 -); - -// 带回调的动画 -$("div").animate( - { - width: "300px", - height: "300px", - }, - { - duration: 1000, - complete: function () { - alert("动画完成"); - }, - step: function (now, fx) { - // 每一步执行 - }, - } -); - -// 停止动画 -$("div").stop(); // 停止当前动画 -$("div").stop(true); // 清除队列 -$("div").stop(true, true); // 立即完成 -$("div").finish(); // 完成所有动画 -``` \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251217-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251217-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 14df373517c56650a08da57660a6ca45f727f851..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251217-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,49 +0,0 @@ -```html -

      原标题

      - -
      悬停我
      -
        -
      • 项目1
      • -
      - -
      - - -
      - - - \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251218-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251218-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 1f8dd6df0627376297e6cf00793d9486cbca5997..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251218-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,26 +0,0 @@ -- 开发环境与初体验 -- 编辑器 -- 常用编辑器 -- 记事本 -- Sublime Text4 -- vim -- webstorm -- Trae -- HBuilderX -- DreamWeave -- 我们选用的编辑器 -- Visual Studio Code -- 变量、常量和基础数据类型 -- var let定义变量,请忘记var,后续只使用let -- const定义常量,常量名全大写 -- 数据类型 -- 基础数据类型 -- string -- number -- boolean -- underfined -- null -- 复合数据类型 -- 对象 -- 数组 -- 函数 \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251219-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251219-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 5e5942b98282db937874cb47614ae1191b65619c..0000000000000000000000000000000000000000 --- "a/\351\231\206\346\235\250\351\230\263/20251219-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,18 +0,0 @@ -- / % -- 逻辑运算 -- null undefined 0 '' 这些字面量参与逻辑运算时,作为- - - - false,其余的值作为true -- 短路运算 true || 表达式 false && 表达式 -- 赋值运算 = += -+ ++ --等 -- parseInt parseFloat 乘1变数字 加空字符串变字符串 -- 流程控制 -- 判断 - - if - - if ... else - - if ... else if() - - if ... else if()... else - - switch - - 循环 - - for - - while - - do...while - - 三元运算 \ No newline at end of file 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" deleted file mode 100644 index 2b916d54f15eb4f2f9e2a725f4aaca861610295d..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251110.md" +++ /dev/null @@ -1,31 +0,0 @@ -## 认识script -1. script(三种排列方式) -- 放在body里最下面(原因:网页先构建后渲染) -- 放在标签内(相当于行内样式) -- 放在外部js文件内(需要引用) -2. 代码 -- script(js祖师爷) - -- alert(弹窗) - -- function(可重复使用的代码块) - -- onclick(事件处理方法) - -## 作业 - -```html - -``` -- 效果图 - - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116171346470.png) - -### 输出明日学院的官网地址 -- 代码 - - ```js - \ No newline at end of file diff --git "a/\351\231\210\346\200\235\345\223\262/20251112.md" "b/\351\231\210\346\200\235\345\223\262/20251112.md" deleted file mode 100644 index a6d975a14540c3eaa1a66922782156af1f3b63c9..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251112.md" +++ /dev/null @@ -1,131 +0,0 @@ -## 数据类型 - -### 基本数据类型 - - 数值型 number - - 十进制 - - 十六进制 - - 八进制 - - 浮点型数据 - - 传统记数法 - - 1.23 - - 科学计数法 - - 123e-3 - - infinity 无穷 - - NaN 非数值 - - 字符串型 string - - 单引号 - - 双引号 - - 反引号 - - 转义字符 - | 转义字符 | 描述 | 转义字符 | 描述 | - | -------- | ------------------ | -------- | ------------------------- | - | \b | 退格 | \v | 垂直制表符 | - | \n | 换行符 | \r | Enter符 | - | \t | 水平制表符,Tab空格 | `\\` | 反斜杠 | - | \f | 换页 | \OOO | 八进制整数,范围为000~777 | - | \' | 单引号 | \xHH | 十六进制整数,范围为00~FF | - | \" | 双引号 | \uhhhh | 十六进制编码的Unicode字符 | - - 要将其放在`
      `格式化文本中才会起作用
      -      - 字符串拼接 
      -  - 布尔值 boolean
      -    - true 
      -    - false
      -  - 空值 null
      -    - 空的或者不存在的值
      -  - 未定义值 undefined
      -    - 变量还没有赋值
      -
      -## 常量和变量
      -  -  常量
      -    - const
      -  - 变量
      -    - var
      -    - let
      -  - 变量命名规则
      -    - 以字母、下划线、$开头
      -    - 不能使用关键字
      -    - 区分大小写
      -    - 不能使用中文
      -    - 不能使用特殊字符
      -    - 不能使用数字开头
      -
      -## 运算符
      -
      -- 算术运算符
      -  - `+ - * / % ++ --`
      -  - 优先级
      -    - `() -> ** -> * / % -> + - -> ++ --`
      -    - 从左到右
      -    - 优先级相同,从左到右
      -    - () 优先级最高
      -- 字符串运算符 
      -  -  `+` 连接两个字符
      -  -  `+=` 连接两个字符并赋值
      -- 比较运算符
      -  - `== != > < >= <=`
      -  - `==` 比较值是否相等
      -  - `===` 比较值和类型是否相等
      -  - `!=` 比较值是否不相等
      -  - `!==` 比较值和类型是否不相等
      -  - `> < >= <=` 比较大小
      -- 赋值运算符
      -  - `=` 
      -  - `+=`
      -  - `-=`
      -  - `*=`
      -  - `/=`
      -  - `%=`
      -
      -## 作业
      -
      -```html
      -
      -
      -    
      -    
      -    Document
      -
      -
      -
      -    
      -
      -
      -```
      -
      -![](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"
      deleted file mode 100644
      index 690a64c09f74733ac8ce115d426396ab938284f9..0000000000000000000000000000000000000000
      --- "a/\351\231\210\346\200\235\345\223\262/20251113.md"
      +++ /dev/null
      @@ -1,151 +0,0 @@
      -## 逻辑运算符
      - - 逻辑与 &&
      -   - 两个都为真则为真
      - - 逻辑或 ||
      -   - 其中有一个为真则为真
      - - 逻辑非 !
      -   - !true
      -
      -## 条件运算符
      - - 语法
      -   - `条件 ? 表达式1 : 表达式2`
      -   - 如果条件为真,则执行表达式1,否则执行表达式2
      -
      -## 其他运算符
      -- 逗号运算符
      -  - `a = 1, b = 2`
      -  - 则结果为最后一个
      -- typeof 运算符
      -  - 判断数据类型
      -    | 数据类型  | 返回值    | 数据类型 | 返回值   |
      -    | --------- | --------- | -------- | -------- |
      -    | 数值      | number    | null     | objec    |
      -    | 字符串    | string    | 对象     | object   |
      -    | 布尔值    | object    | 函数     | function |
      -    | undefined | undefined | -----    | ----     |
      -- new运算符
      -  - 对象实例名称=new 对象类型(参数)
      -  - 对象实例名称=new 对象类型
      -  
      -## 表达式
      -- 算术表达式
      -
      -- 逻辑表达式
      -
      -- 字符串表达式
      -
      -## 作业
      -
      -```html
      -
      -
      -
      -    
      -    
      -    Document
      -
      -
      -
      -
      -
      -
      -
      -
      -```
      -
      -![](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"
      deleted file mode 100644
      index 73bdf4c09d00af8a08ad08b677ebe06318947c8f..0000000000000000000000000000000000000000
      --- "a/\351\231\210\346\200\235\345\223\262/20251114.md"
      +++ /dev/null
      @@ -1,133 +0,0 @@
      -## 作业
      -```html
      -
      -
      -
      -    
      -    
      -    Document
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -```
      -![20251114-1](D:\a1987\pictures\Screenshots\20251114-1.png)
      \ No newline at end of file
      diff --git "a/\351\231\210\346\200\235\345\223\262/20251117.md" "b/\351\231\210\346\200\235\345\223\262/20251117.md"
      deleted file mode 100644
      index c5446b862a26815b31896586384dbdd05c693a3b..0000000000000000000000000000000000000000
      --- "a/\351\231\210\346\200\235\345\223\262/20251117.md"
      +++ /dev/null
      @@ -1,135 +0,0 @@
      -57-62
      -# 笔记
      -
      -## 函数的定义
      -- 定义函数的基本语法
      -    - ```
      -        function 函数名(参数){
      -            语句;
      -            return 返回值;
      -        }
      -      ```
      -- 函数的调用
      -    - 简单调用
      -        - 函数名(参数)
      -    - 响应中调用
      -        - 放在onclick事件中
      -    - 通过超链接
      -        - href="JavaScript:函数()";
      -
      -- 函数的参数
      -    - 实参
      -    - 形参
      -
      -- 函数的返回值
      -    - 有return
      -    - 无return
      -        - 会返回undefined
      -
      -## 作业
      -
      -### 获取完整的收货地址
      -- 代码
      -    - ```js
      -        
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181351411.png)
      -
      -### 获取数字的绝对值
      -- 代码
      -    - ```js
      -        
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181412000.png)
      -
      -### 斐波那契数列
      -- 代码
      -    - ```js
      -      
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181431514.png)
      -
      -### 判断是否可以享受优惠活动
      -- 代码
      -    - ```js
      -        
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181448178.png)
      -
      -### 判断考生成绩是否到达本科分数线
      -- 代码
      -    - ```js
      -        
      -      ```
      -- 效果图
      -    - ![](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"
      deleted file mode 100644
      index c957986836ccdff8e5d9274ef63bd59016200e75..0000000000000000000000000000000000000000
      --- "a/\351\231\210\346\200\235\345\223\262/20251119.md"
      +++ /dev/null
      @@ -1,240 +0,0 @@
      -63-73
      -# 笔记
      -
      -## 递归函数
      -- 需要两个必要函数
      -    - 结束递归的条件
      -    - 递归调用语句
      -
      -## 内置对象
      -- parselnt 
      -    - 首位为数字的字符串转化成数字
      -- parseFloat
      -    - 首位为数字的字符串转化成浮点型
      -- isNaN
      -    - 检验是否为NaN
      -    - 返回true 或 false
      -- isFinite
      -    - 检验是否有限
      -    - 返回true 或 false
      -
      -## 字符串处理函数
      -- eval
      -    - eval("5+7")
      -    - 计算字符串表达式
      -- encodeUrl
      -    - 对URL进行编码
      -- decodeUrl
      -    - 对URl进行解码
      -
      -## 匿名函数
      -- 语法
      -    - ```
      -        function(参数){
      -            语句
      -            返回值
      -        }
      -      ```
      -
      -## 对象的概念
      -- 一个贴了标签的收纳盒
      -- 包含两个要素
      -    - 方法
      -    - 属性
      -
      -## 对象的增删改查
      -- 对象的创建
      -    - let 对象名 ={属性名:属性值}
      -- 对象的删除
      -    - delate 对象名.属性名
      -- 对象的修改
      -    - 对象名.修改属性名=属性值
      -- 对象的添加
      -    - 对象名['属性名']=属性值
      -    - 对象名.属性名=属性值
      -
      -## 作业
      -
      -### 比较两个数字的大小
      -- 代码
      -    - ```js
      -         
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181525587.png)
      -
      -### 获取3个数字中的最小值
      -- 代码
      -    - ```js
      -        
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181544299.png)
      -
      -### 判断登录是否成功
      -- 代码
      -    - ```js
      -        
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181601741.png)
      -
      -### 获取1000以内能同时被3和5整除的正整数
      -- 代码
      -    - ```js
      -        
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181618768.png)
      -
      -### 判断20岁处在哪个年龄段
      -- 代码
      -    - ```js
      -        
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181634826.png)
      -
      -### 输出某年某月的天数
      -- 代码
      -    - ```js
      -        
      -      ```
      -- 效果图
      -    - ![](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"
      deleted file mode 100644
      index 3525c832d0c755eb3125880b0c819821ba11da1b..0000000000000000000000000000000000000000
      --- "a/\351\231\210\346\200\235\345\223\262/20251120.md"
      +++ /dev/null
      @@ -1,92 +0,0 @@
      -# 笔记
      -
      -## 遍历对象
      -- 语法
      -    - ```
      -        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
      -        
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181712353.png)
      -
      -### 高考倒计时
      -- 代码
      -    - ```js
      -         
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123181727953.png)
      -
      -## 转换时间格式
      -- 代码
      -    - ```js
      -        
      -      ```
      -- 效果图
      -    - ![](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"
      deleted file mode 100644
      index d695b93a9550eeaf94c1708d1ff21be46b931bc9..0000000000000000000000000000000000000000
      --- "a/\351\231\210\346\200\235\345\223\262/20251121.md"
      +++ /dev/null
      @@ -1,150 +0,0 @@
      -# 笔记
      -
      -## 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
      -        
      -      ```
      -- 效果图
      -    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/screenshots.gif)
      -
      -### 生成指定位数的1~6的随机数
      -- 代码
      -    - ```js
      -        
      -            

      请输入要生成随机数的位数:

      -
      - - -
      - - - ``` -- 效果图 - - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/screenshotsds) - -### 计算从出生到现在度过的时间 -- 代码 - - ```js - - ``` -- 效果图 - - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251123182011532.png) 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" deleted file mode 100644 index f4b9eaa08b473d7ae801d3718f1571d72fb253ff..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251124_Array,String.md" +++ /dev/null @@ -1,210 +0,0 @@ -# Array,String -- concat -```js -arr.concat(arr1,arr2);//连接多个数组并返回结果 -``` -- pop -```js -arr.pop();//删除最后一个数组并返回结果 -``` -- push -```js -arr.push(1,2,3,4);//在数组后面添加数并返回结果 -``` -- shift -```js -arr.shift();//删除第一个数组并返回结果 -``` -- splice -```js -arr.splice(1,2,3,4);//删除最后一个数组并添加元素 -``` -- unshift -```js -arr.unshift(1,2,3,4);//在数组头部添加一到多个元素并返回结果 -``` -- reverse -```js -arr.reverse();//颠倒数组 -``` -- sort - -```js -arr.sort();//数组排序 -``` -- slice - -```js -arr.slice(0,3);//在数组中返回选定元素 -``` -- toSource -```js -arr.toSource();//输出源码 -``` -- toString -```js -arr.toString(1,2,3,4);//把数组转换为字符串,并返回结果 -``` -- toLocaleString -```js -arr.toLocaleString(1,2,3,4);//把数组转换为本地字符串,并返回结果 -``` -- join -```js -arr.join(",");//把数组用字符隔开,并返回结果 -``` -- valueOf -```js -arr.valueOf();//返回数组原始结果 -``` -- Map -```js -let map = new map(["key","value"],[...]);//字典[键/值] -``` - -# 作业 -```html - - - - - - Document - - - - - - - - -``` - -![](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" deleted file mode 100644 index cdcd5ee62aa8f9efd71cd9721550f62d468e9fd2..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251126_\346\255\243\345\210\231.md" +++ /dev/null @@ -1,26 +0,0 @@ -# 正则 - -| 符号 | 含义 | 示例 | | | -| ------- | -------------------------------------------------- | -------------------------------------- | ---- | ---------------- | -| `.` | 匹配任意单个字符(除换行) | `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" deleted file mode 100644 index c46be4dfb6198cc1304f7c9ea4d849d1ddb34893..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251127.md" +++ /dev/null @@ -1,153 +0,0 @@ -## 笔记 - -### 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 -
      -
      - 用户名:
      - 密 码:
      - - -``` - -#### 效果展示 - -![](./Image/20251127_Image/show01.gif) - -### 第二部分 - -#### 关键代码 - -```html -
      -

      联系方式

      -
      -
      - - -
      -
      - - -
      -
      - - -
      - -
      -
      - -``` - -#### 效果展示 - -![](./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" deleted file mode 100644 index bc0c958983e8cac07fcc279fd6e6d8002e2df621..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251128.md" +++ /dev/null @@ -1,435 +0,0 @@ -## 笔记 - -# 事件对象(event/e)笔记 - -## 一、通用属性与方法 - -| 类别 | 属性 / 方法 | 白话解释 | 返回值 | -| ------------ | ------------------- | ------------------------------------------------------------ | ------------------------------------------------- | -| 找触发元素 | `target` | 实际触发事件的 DOM 元素。例如,点击列表中的 `li`,`target` 就是该 `li` 元素。 | 触发事件的 DOM 元素对象 | -| 认事件类型 | `type` | 事件的名称,以字符串形式呈现,如 `focus`、`click`、`keydown` 等。 | 表示事件类型的字符串 | -| 阻止默认行为 | `preventDefault()` | 用于取消浏览器的默认动作,比如回车刷新页面、链接跳转、右键菜单弹出等。 | 无返回值。该方法用于阻止浏览器的默认行为。 | -| 阻止事件冒泡 | `stopPropagation()` | 防止事件向上冒泡到父元素,避免嵌套元素间的事件冲突。 | 无返回值。该方法用于阻止事件在 DOM 树中向上冒泡。 | - -### 找触发元素示例 -```javascript -// 输入框获焦时添加红色边框 -const inputs = document.querySelectorAll('.txt'); -inputs.forEach(item => { - item.addEventListener('focus', (e) => { - e.target.style.border = '5px solid red'; - }); -}); -``` - -### 认事件类型示例 -```javascript -// 一个函数处理多种事件 -function handleInput(e) { - if (e.type === 'focus') { - e.target.style.border = 'red'; - } else if (e.type === 'blur') { - e.target.style.border = 'gray'; - } -} -inputs.forEach(item => { - item.addEventListener('focus', handleInput); - item.addEventListener('blur', handleInput); -}); -``` - -### 阻止默认行为示例 -```javascript -// 输入框按回车不刷新页面,并打印内容 -inputs[0].addEventListener('keydown', (e) => { - if (e.key === 'Enter') { - e.preventDefault(); // 阻止默认回车行为 - console.log('输入内容:', e.target.value); - } -}); -// 禁用页面右键菜单 -document.addEventListener('contextmenu', (e) => { - e.preventDefault(); - alert('禁止右键'); -}); -``` - -### 阻止事件冒泡示例 -```javascript -// 点击输入框不触发父元素的 click 事件 -const child = document.querySelector('.txt'); -const parent = document.getElementById('txtBorder'); -child.addEventListener('click', (e) => { - e.stopPropagation(); // 阻止冒泡 - console.log('输入框被点击'); -}); -parent.addEventListener('click', () => { - console.log('父元素被点击'); // 点击输入框时此代码不会执行 -}); -``` - -## 二、专属属性 - -### 键盘事件(keydown / keyup / keypress) - -| 属性 | 白话解释 | 返回值 | -| ----------------------------- | ------------------------------------------------------------ | ------------------------------------------------------- | -| `key` | 按键的「语义名称」,区分大小写,功能键也包含其中,`a`、`A`、`Enter`、`Backspace` 等。 | 表示按键语义名称的字符串 | -| `code` | 按键的「物理位置名称」,不区分大小写,如 `KeyA`、`ArrowLeft`、`Space` 等。 | 表示按键物理位置名称的字符串 | -| `ctrlKey`/`shiftKey`/`altKey` | 表示是否按住 `ctrl`/`shift`/`alt` 键,返回布尔值。 | `true` 或 `false`,表示是否按住 `ctrl`/`shift`/`alt`键 | - -### 键盘事件示例 -```javascript -// 检测回车、删除、Ctrl + S 操作 -inputs[0].addEventListener('keydown', (e) => { - // 按回车提交 - if (e.key === 'Enter') { - e.preventDefault(); - console.log('提交:', e.target.value); - } - // 按删除提示 - if (e.key === 'Backspace') { - console.log('正在删除内容'); - } - // Ctrl + S 保存 - if (e.ctrlKey && e.key ==='s') { - e.preventDefault(); - console.log('执行保存操作'); - } -}); -// 检测方向键 -inputs[0].addEventListener('keydown', (e) => { - if (e.code === 'ArrowLeft') console.log('按了左箭头'); - if (e.code === 'Space') console.log('按了空格键'); -}); -// 检测 Shift + A(大写 A) -if (e.shiftKey && e.key === 'A') console.log('按了大写 A'); -// Mac 下 Command + C -if (e.metaKey && e.key === 'c') console.log('Mac 复制'); -``` - -### 鼠标事件(click / mousedown / mousemove / mouseover) - -| 属性 | 白话解释 | 返回值 | -| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `clientX/Y` | 鼠标相对于「可视窗口」的坐标,不包含滚动条的偏移量。 | 表示鼠标相对于可视窗口的水平(`clientX`)或垂直(`clientY`)坐标的数字 | -| `pageX/Y` | 鼠标相对于「整个文档」的坐标,包含滚动条的偏移量。 | 表示鼠标相对于整个文档的水平(`pageX`)或垂直(`pageY`)坐标的数字 | -| `button` | 按下的鼠标按键,`0` 代表左键,`1` 代表滚轮,`2` 代表右键。 | `0`(左键)、`1`(滚轮)、`2`(右键)中的一个数字 | -| `relatedTarget` | 鼠标移入或移出时的「关联元素」。例如在 `mouseover` 事件中,它表示从哪个元素移过来的。 | 鼠标移入或移出时的关联 DOM 元素对象 | - -### 鼠标事件示例 -```javascript -// 点击页面显示鼠标相对于可视窗口的位置 -document.addEventListener('click', (e) => { - console.log('相对于窗口:', e.clientX, e.clientY); -}); -// 滚动后仍能获取鼠标相对于整个文档的准确位置 -document.addEventListener('click', (e) => { - console.log('相对于文档:', e.pageX, e.pageY); -}); -// 区分左键、右键点击 -document.addEventListener('mousedown', (e) => { - if (e.button === 0) console.log('左键点击'); - if (e.button === 2) { - e.preventDefault(); - console.log('右键点击'); - } -}); -// 鼠标移入输入框时,显示从哪个元素移过来的 -inputs[0].addEventListener('mouseover', (e) => { - console.log('从', e.relatedTarget.tagName, '移过来'); -}); -``` - -### 焦点事件(focus / blur / focusin / focusout) - -| 属性 | 白话解释 | 返回值 | -| --------------- | ------------------------------------------------------------ | ----------------------------- | -| `relatedTarget` | 在焦点切换时的关联元素。在 `focus` 事件中,它是失去焦点的元素;在 `blur` 事件中,它是获得焦点的元素。 | 焦点切换时的关联 DOM 元素对象 | - -### 焦点事件示例 -```javascript -// 焦点切换时提示焦点来源或目标 -inputs.forEach(item => { - item.addEventListener('focus', (e) => { - console.log('焦点从', e.relatedTarget?.placeholder, '移到当前输入框'); - }); - item.addEventListener('blur', (e) => { - console.log('焦点从当前输入框移到', e.relatedTarget?.placeholder); - }); -}); -``` - -### 表单事件(change / input / submit) - -| 属性 / 操作 | 白话解释 | 返回值 | -| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `e.target.value` | 表单元素的当前值,需通过 `target` 获取,并非 `event` 直接属性。 | 表单元素的当前值,具体类型取决于表单元素类型(如输入框为字符串) | -| `e.target.checked` | 复选框或单选框是否被选中,返回布尔值。 | `true` 或 `false`,表示复选框或单选框是否被选中 | -| `submit`阻止 | 阻止表单的默认提交行为,避免页面刷新。 | 无返回值。该方法用于阻止表单的默认提交行为。 | - -### 表单事件示例 -```javascript -// 实时监听输入框内容变化 -inputs[0].addEventListener('input', (e) => { - console.log('实时输入:', e.target.value); -}); -// 监听单选框选中状态 -const radio = document.querySelector('input[type="radio"]'); -radio.addEventListener('change', (e) => { - console.log('是否选中:', e.target.checked); -}); -// 表单提交时验证,不刷新页面 -const form = document.querySelector('form'); -form.addEventListener('submit', (e) => { - e.preventDefault(); - console.log('表单提交,内容:', new FormData(form)); -}); -``` - -## 总结 - -掌握以下 3 步,可解决 90% 的事件处理场景: - -1. **找元素**:利用 `e.target` 获取触发事件的 DOM 元素。 -2. **拿信息**:依据事件类型获取相关上下文信息,如键盘事件用 `key`,鼠标事件用 `clientX`,焦点事件用 `relatedTarget` 等。 -3. **做操作**:根据需求使用 `preventDefault()` 阻止默认行为,或用 `stopPropagation()` 阻止事件冒泡。 - -## 作业 -```html - - - - - - Document - - - - -

      第一题

      -
      - - -
      -

      第二题

      -
      - 中国的国球是 -
      - 篮球 - 排球 - 乒乓球 - 羽毛球 -

      -
      - -
      -

      第三题

      -
      当前时间
      - -

      第四题

      -
      -

      宽度:

      -

      高度:

      -
      - -

      第五题

      -
      - -
      - -

      第六题

      -
      -
      -
      -
      - -

      第七题

      -
      -
      - - -
      -
      - -

      第八题

      -
      -

      123456

      -
      - -

      第九题

      -
      - -
      - -

      第十题

      -
      - -
      - - - - -``` - -![](https://gitee.com/yvnbai/figurebed/raw/master/image/20251130230530495.png) \ No newline at end of file diff --git "a/\351\231\210\346\200\235\345\223\262/20251201.md" "b/\351\231\210\346\200\235\345\223\262/20251201.md" deleted file mode 100644 index 0517431f707f0b362b1fbb87900c9f14eb25e88c..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251201.md" +++ /dev/null @@ -1,107 +0,0 @@ -## 笔记 - -### 文本编辑事件 - -#### 核心事件(文本 / 内容操作) - -- `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 - -
      - 拖拽我到下方区域 -
      -
      - 请将上方文本拖放到这里 -
      - - -``` - -#### 效果展示 -![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" deleted file mode 100644 index c5c2f471ff517c39689b28bcf44a8225faf0b335..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251203.md" +++ /dev/null @@ -1,203 +0,0 @@ -## 笔记 - -### Document 对象常用属性 - -#### 基础结构相关 - -- `document.documentElement`:获取 HTML 根元素(`` 标签) -- `document.head`:获取文档的 `` 元素 -- `document.body`:获取文档的 `` 元素 -- `document.title`:获取或设置文档的标题(对应 `` 标签内容) -- `document.URL`:获取当前文档的完整 URL -- `document.domain`:获取当前文档的域名(跨域相关场景常用) -- `document.referrer`:获取跳转至当前文档的前一个页面 URL(来源页面) - -#### 元素获取相关(便捷属性) - -- `document.forms`:获取文档中所有 `<form>` 元素的集合(HTMLCollection) -- `document.images`:获取文档中所有 `<img>` 元素的集合(HTMLCollection) -- `document.links`:获取文档中所有 `<a>` 标签(带 href 属性)和 `<area>` 元素的集合(HTMLCollection) -- `document.scripts`:获取文档中所有 `<script>` 元素的集合(HTMLCollection) -- `document.styleSheets`:获取文档中所有样式表(包括 `<style>` 和外部 CSS)的集合 - -#### 文档状态与元信息 - -- `document.readyState`:获取文档加载状态(loading:加载中;interactive:DOM 可交互;complete:完全加载完成) -- `document.characterSet`:获取或设置文档的字符编码(如 UTF-8) -- `document.doctype`:获取文档的 DOCTYPE 声明 -- `document.documentURI`:与 URL 类似,返回文档的统一资源标识符(部分场景下与 URL 等效) - -#### 其他常用属性 - -- `document.cookie`:获取或设置当前文档的 Cookie(字符串格式,需自行解析/拼接) -- `document.defaultView`:获取文档所属的窗口对象(即 window,部分浏览器兼容场景使用) -- `document.activeElement`:获取当前文档中获得焦点的元素(如输入框、按钮等) - -### Document 对象常用方法 - -#### 元素查询方法 - -- `querySelector(selector)`:根据 CSS 选择器获取第一个匹配的元素(返回单个 DOM 元素,支持复杂选择器) -- `querySelectorAll(selector)`:根据 CSS 选择器获取所有匹配的元素(NodeList,静态集合,不动态更新) - -#### 元素创建与插入/删除 - -- `createElement(tagName)`:创建一个指定标签名的新 DOM 元素 -- `createTextNode(text)`:创建一个文本节点(包含指定文本内容) -- `createDocumentFragment()`:创建文档片段(用于批量插入元素,提升性能,不直接属于 DOM 树) -- `appendChild(child)`:将子元素添加到指定父元素的末尾(若子元素已存在,会移动位置) -- `insertBefore(newChild, referenceChild)`:在参考子元素之前插入新子元素 -- `removeChild(child)`:删除指定的子元素(需通过父元素调用) -- `replaceChild(newChild, oldChild)`:用新子元素替换旧子元素 - -#### 文档操作与加载 - -- `write(text)`:向文档中写入内容(可写 HTML 字符串,加载期间使用,加载完成后会覆盖文档) -- `writeln(text)`:与 write 类似,末尾自动添加换行符 -- `open()`:打开文档输出流(配合 write 使用,较少单独使用) -- `close()`:关闭文档输出流(结束 write 写入操作) -- `getSelection()`:获取用户在文档中选中的文本内容(返回 Selection 对象) - -## 作业 - -### 第一部分 - -#### 关键代码 - -```html - <div class="left-section"> - <h1 class="section-title">训练</h1> - <div class="base-card small-card" id="colorSwapCard"> - 天行健君子以自强不息<br>地势坤君子以厚德载物 - </div> - <div class="btn-group"> - <input type="button" class="common-btn" id="colorSwapBtn" value="交互颜色"> - <input type="button" class="common-btn" id="urlFetchBtn" value="获取地址"> - </div> - <div class="base-card small-card" id="textAppendCard"></div> - <div class="input-group"> - <input type="text" class="text-input-box" id="userInputTxt" placeholder="请输入文字"> - <input type="button" class="common-btn" id="textAppendBtn" value="添加"> - </div> - </div> - <div class="right-section"> - <h1 class="section-title">综合练习</h1> - <div class="base-card large-card" id="themeChangeCard"> - <h2>李白《行路难・其一》</h2> - 金樽清酒斗十千,玉盘珍羞直万钱。<br> - 停杯投箸不能食,拔剑四顾心茫然。<br> - 欲渡黄河冰塞川,将登太行雪满山。<br> - 闲来垂钓碧溪上,忽复乘舟梦日边。<br> - 行路难!行路难!多歧路,今安在?<br> - 长风破浪会有时,直挂云帆济沧海。<br> - </div> - <input type="button" class="common-btn" id="themeChangeBtn" value="切换主题"> - <div class="image-container" id="imageDialogArea"> - <a href="" id="imageOpenLink">打开图片对话框</a> - </div> - <div class="avatar-container"> - <input type="button" class="common-btn" id="addAvatarBtn" value="添加用户头像"> - <div class="avatar-list" id="avatarListContainer"></div> - </div> - </div> - <script> - // 训练1 - const colorSwapBtn = document.querySelector('#colorSwapBtn'); - const colorSwapCard = document.querySelector('#colorSwapCard'); - function swapBgTextColor() { - // getComputedStyle()获取实参dom元素的全局样式 - let targetCardStyle = getComputedStyle(colorSwapCard) - let currentBgColor = targetCardStyle.backgroundColor - let currentTextColor = targetCardStyle.color - colorSwapCard.style.backgroundColor = currentTextColor - colorSwapCard.style.color = currentBgColor - } - colorSwapBtn.addEventListener('click', swapBgTextColor) - - // 训练2 - const urlFetchBtn = document.querySelector('#urlFetchBtn'); - function fetchPageUrl() { - let pageUrl = document.URL - console.log(pageUrl); - - } - urlFetchBtn.addEventListener("click", fetchPageUrl) - - // 训练3 - const textAppendCard = document.querySelector('#textAppendCard') - const userInputTxt = document.querySelector('#userInputTxt') - const textAppendBtn = document.querySelector('#textAppendBtn') - function appendInputText() { - let textSpan = document.createElement("span") - let inputContent = document.createTextNode(userInputTxt.value) - // appendChild()将实参的dom节点添加到调用的dom节点列表中的尾部 - textSpan.appendChild(inputContent); - textAppendCard.appendChild(textSpan); - } - textAppendBtn.addEventListener("click", appendInputText) - - // 综合练习01 - const themeChangeBtn = document.querySelector('#themeChangeBtn'); - const themeChangeCard = document.querySelector('#themeChangeCard') - let themeIndex = 0 - function switchCardTheme() { - // 数组存储前景色和背景色,省略 - const foregroundColors = []; - const backgroundColor = []; - themeChangeCard.style.color = foregroundColors[themeIndex] - themeChangeCard.style.backgroundColor = backgroundColor[themeIndex] - themeIndex++ - if (themeIndex == foregroundColors.length) { - themeIndex = 0 - } - } - themeChangeBtn.addEventListener("click", switchCardTheme) - - // 综合练习02:图片对话框 - const imageOpenLink = document.querySelector('#imageOpenLink') - const imageDialogArea = document.querySelector('#imageDialogArea') - let dialogContainer = document.createElement("div") - let imageWrapper = document.createElement("div") - let deleteLink = document.createElement("a") - let deleteText = document.createTextNode("删除") - deleteLink.appendChild(deleteText) - let imgElement = document.createElement('img') - imgElement.src = "https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/chat/static/image/logo-icon-white-bg.72df0b1a.png" - function openImageDialog(e) { - e.preventDefault(); - imageWrapper.appendChild(imgElement) - dialogContainer.appendChild(deleteLink) - dialogContainer.appendChild(imageWrapper) - imageDialogArea.appendChild(dialogContainer) - } - imageOpenLink.addEventListener("click", openImageDialog) - function removeImageDialog() { - imageDialogArea.removeChild(dialogContainer) - } - deleteLink.addEventListener("click", removeImageDialog) - - // 综合练习03 - </script> - <script> - let addAvatarBtn = document.querySelector("#addAvatarBtn"); - let avatarListContainer = document.querySelector("#avatarListContainer") - let avatarIndex = 0 - function addUserAvatar() { - // 数组存储头像地址,省略 - const userAvatarUrls = []; - let avatarImage = document.createElement("img") - avatarImage.src = userAvatarUrls[avatarIndex] - avatarImage.className = "avatar-item" - avatarImage.alt = `用户头像${avatarIndex + 1}` - avatarListContainer.appendChild(avatarImage) - avatarIndex++ - if (avatarIndex == userAvatarUrls.length){ - alert("头像数量达到上限") - } - } - addAvatarBtn.addEventListener("click", addUserAvatar) - </script> -``` - -#### 效果展示 -![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" deleted file mode 100644 index f375b861c47589fe77497281c433371fe88d16f0..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251204.md" +++ /dev/null @@ -1,316 +0,0 @@ -## 笔记 - -### 节点属性 - -#### 通用节点属性(所有节点共享) - -- `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" deleted file mode 100644 index 73d0ded3037aa32e88094ae4f00b9d38712714f6..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251205.md" +++ /dev/null @@ -1,195 +0,0 @@ -## 笔记 - -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 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" deleted file mode 100644 index 7e683f0de752e88984695bea28703c98ea75a1bf..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251208.md" +++ /dev/null @@ -1,55 +0,0 @@ -## 笔记 - -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" deleted file mode 100644 index 4af2db8e7ad3ea30209b990bd03ebc95b763c342..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251210.md" +++ /dev/null @@ -1,156 +0,0 @@ -## 笔记 - -### 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" deleted file mode 100644 index d43a3d854f73bd3468242ed99075d4866ae3c9a5..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251211.md" +++ /dev/null @@ -1,246 +0,0 @@ -## 笔记 - -### 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" deleted file mode 100644 index 5d9df0ca46133ac904efb32701a66f81c3563416..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251212.md" +++ /dev/null @@ -1,69 +0,0 @@ -## 笔记 - -### JSON 基础格式 - -#### 对象 - -- 结构:花括号 `{}` 包裹,内部是唯一字符串键 + 值的键值对,键值用 `:` 分隔,键值对间用 `,` 分隔 -- 示例: - -```json -{ - "name": "张三", - "age": 25, - "isMember": true, - "address": {"city": "北京", "area": "朝阳"} -} -``` - -#### 数组 - -- 结构:方括号 `[]` 包裹,值为任意合法 JSON 类型,值之间用 `,` 分隔 -- 示例: - -```json -[123, "测试", false, null, ["a", "b"], {"key": "value"}] -``` - -#### 简单数据类型 - -| 类型 | 规则 | 示例 | -| ------ | --------------------- | ------------- | -| 字符串 | 双引号包裹 | `"JSON 笔记"` | -| 数字 | 整数 / 浮点数,无引号 | `99`、`1.68` | -| 布尔值 | 仅 `true`/`false` | `false` | -| null | 表示空值,无引号 | `null` | - -### JSON的转换 - -#### 序列化(JS 对象 → JSON 字符串) - -- 方法:`JSON.stringify(value[, replacer[, space]])` -- 作用:将 JS 对象 / 数组 / 基本类型转为标准 JSON 字符串 -- 示例: - -```javascript -const jsObj = { name: "李四", age: 30, hobbies: ["跑步", "听歌"] }; -// 基础转换 -const jsonStr = JSON.stringify(jsObj); -// 格式化输出(2个空格缩进) -const prettyStr = JSON.stringify(jsObj, null, 2); -``` - -- 注意:函数、undefined 会被忽略,循环引用对象会报错 - -#### 反序列化(JSON 字符串 → JS 对象) - -- 方法:`JSON.parse(text[, reviver])` -- 作用:将合法 JSON 字符串转为 JS 对象 / 数组 -- 示例: - -```javascript -const jsonStr = '{"name":"李四","age":30}'; -// 基础解析 -const jsObj = JSON.parse(jsonStr); -// 解析时处理数据(如年龄+1) -const handledObj = JSON.parse(jsonStr, (key, val) => key === "age" ? val + 1 : val); -``` - -- 注意:JSON 字符串必须合法(如键为双引号),否则报错 \ No newline at end of file diff --git "a/\351\231\210\346\200\235\345\223\262/20251215.md" "b/\351\231\210\346\200\235\345\223\262/20251215.md" deleted file mode 100644 index 48a9745e3c7e8e526fd5f798e391c3be812c4290..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251215.md" +++ /dev/null @@ -1,7 +0,0 @@ -## 笔记 - -什么都没有...... - -## 作业 - -什么都没有...... \ No newline at end of file diff --git "a/\351\231\210\346\200\235\345\223\262/20251217-jsjQuery\345\272\22301.md" "b/\351\231\210\346\200\235\345\223\262/20251217-jsjQuery\345\272\22301.md" deleted file mode 100644 index 21e29732e1e901e3eb2836862900e14e70e46e95..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251217-jsjQuery\345\272\22301.md" +++ /dev/null @@ -1,565 +0,0 @@ -## 笔记 - -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" deleted file mode 100644 index cc7ea85337703eea5df4a2426bd396fca20c5dda..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\200\235\345\223\262/20251218-jsjQuery\345\272\22302.md" +++ /dev/null @@ -1,332 +0,0 @@ -## 笔记 - -### 动画效果 - -#### 基础显示隐藏 - -| 方法 | 说明 | -| ---------- | -------------------------------------- | -| `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" deleted file mode 100644 index b83e5043b76cbf84e970134debec121f69fb26e5..0000000000000000000000000000000000000000 --- "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" +++ /dev/null @@ -1,129 +0,0 @@ -## 笔记 - -### 数组核心属性 - -| 属性名 | 说明 | 示例 | -| ----------------- | --------------------------------------------------- | ------------------------------------------------------ | -| `length` | 表示数组元素的个数,可读写(修改会截断 / 扩展数组) | `const arr = [1,2,3]; arr.length = 2; // arr变为[1,2]` | -| `constructor` | 指向数组构造函数 `Array` | `arr.constructor === Array // true` | -| `prototype` | 数组原型(用于扩展方法,非实例属性) | `Array.prototype.myMethod = () => {}` | -| `Symbol.iterator` | 迭代器接口(支持`for...of`遍历) | `for (let item of arr) {}` | - -### 二、数组方法分类基础版本(是否修改原数组) - -#### 2.1 会修改原数组的方法 - -这类方法直接操作原数组,执行后原数组的内容 / 结构会发生变化。 - -| 方法名 | 功能 | 示例 | -| -------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `push()` | 向数组末尾添加一个 / 多个元素,返回新长度 | `const arr = [1,2]; arr.push(3); // arr变为[1,2,3]` | -| `pop()` | 删除数组最后一个元素,返回被删除的元素 | `const arr = [1,2,3]; arr.pop(); // arr变为[1,2]` | -| `unshift()` | 向数组开头添加一个 / 多个元素,返回新长度 | `const arr = [2,3]; arr.unshift(1); // arr变为[1,2,3]` | -| `shift()` | 删除数组第一个元素,返回被删除的元素 | `const arr = [1,2,3]; arr.shift(); // arr变为[2,3]` | -| `splice(start, deleteCount, ...items)` | 增 / 删 / 改数组元素,返回被删除的元素数组 | `const arr = [1,2,3]; arr.splice(1,1,4); // arr变为[1,4,3]` | -| `sort((a,b) => {})` | 对数组元素排序(默认按字符串 Unicode 码点),返回排序后的数组 | `const arr = [3,1,2]; arr.sort(); // arr变为[1,2,3]` | -| `reverse()` | 反转数组元素顺序,返回反转后的数组 | `const arr = [1,2,3]; arr.reverse(); // arr变为[3,2,1]` | -| `fill(value, start, end)` | 用指定值填充数组(覆盖指定范围),返回填充后的数组 | `const arr = [1,2,3]; arr.fill(0,1,2); // arr变为[1,0,3]` | -| `copyWithin(target, start, end)` | 复制数组指定范围元素到目标位置,返回修改后的数组 | `const arr = [1,2,3,4]; arr.copyWithin(0,2); // arr变为[3,4,3,4]` | - -#### 2.2 不修改原数组的方法 - -这类方法不会改变原数组,而是返回新数组(或其他类型值),原数组保持原样。 - -##### (1)返回新数组的方法 - -| 方法名 | 功能 | 示例 | -| -------------------------- | ---------------------------------------------- | ------------------------------------------------------------ | -| `slice(start, end)` | 截取数组指定范围元素,返回新数组(含头不含尾) | `const arr = [1,2,3]; const newArr = arr.slice(1); // newArr=[2,3],arr仍为[1,2,3]` | -| `concat(...arrays/values)` | 拼接数组 / 值,返回新数组 | `const arr1 = [1,2]; const arr2 = arr1.concat(3,[4]); // arr2=[1,2,3,4],arr1不变` | -| `map((item) => {})` | 遍历数组,对每个元素处理后返回新数组 | `const arr = [1,2]; const newArr = arr.map(i => i*2); // newArr=[2,4],arr仍为[1,2]` | -| `filter((item) => {})` | 过滤数组元素,返回符合条件的新数组 | `const arr = [1,2,3]; const newArr = arr.filter(i => i>1); // newArr=[2,3],arr不变` | -| `flat(depth)` | 扁平化数组,返回新数组(depth 为扁平化深度) | `const arr = [1,[2,[3]]]; const newArr = arr.flat(2); // newArr=[1,2,3],arr不变` | -| `flatMap((item) => {})` | `map + flat(1)` 结合,返回新数组 | `const arr = [1,2]; const newArr = arr.flatMap(i => [i,i*2]); // newArr=[1,2,2,4]` | -| `with(index, value)` | 替换数组指定索引的元素,返回新数组(ES2023) | `const arr = [1,2]; const newArr = arr.with(0, 3); // newArr=[3,2],arr仍为[1,2]` | - -##### (2)返回非数组值的方法 - -| 方法名 | 功能 | 示例 | -| -------------------------------------- | ------------------------------------------ | ------------------------------------------------------ | -| `forEach((item) => {})` | 遍历数组(无返回值,仅执行回调) | `arr.forEach(i => console.log(i)); // 原数组不变` | -| `find((item) => {})` | 返回第一个符合条件的元素(无则 undefined) | `arr.find(i => i>1); // 原数组不变` | -| `findIndex((item) => {})` | 返回第一个符合条件的元素索引(无则 - 1) | `arr.findIndex(i => i>1); // 原数组不变` | -| `includes(value, start)` | 判断数组是否包含指定值,返回布尔值 | `arr.includes(2); // 原数组不变` | -| `indexOf(value, start)` | 返回指定值首次出现的索引(无则 - 1) | `arr.indexOf(2); // 原数组不变` | -| `lastIndexOf(value, start)` | 返回指定值最后出现的索引(无则 - 1) | `arr.lastIndexOf(2); // 原数组不变` | -| `every((item) => {})` | 判断所有元素是否符合条件,返回布尔值 | `arr.every(i => i>0); // 原数组不变` | -| `some((item) => {})` | 判断是否有元素符合条件,返回布尔值 | `arr.some(i => i>1); // 原数组不变` | -| `reduce((acc, item) => {}, init)` | 累加 / 归并数组,返回最终归并值 | `arr.reduce((sum, i) => sum+i, 0); // 原数组不变` | -| `reduceRight((acc, item) => {}, init)` | 从右到左归并数组,返回最终归并值 | `arr.reduceRight((sum, i) => sum+i, 0); // 原数组不变` | -| `join(separator)` | 将数组转为字符串,返回拼接后的字符串 | `arr.join(','); // 原数组不变` | -| `toString()` | 将数组转为字符串(默认用逗号分隔) | `arr.toString(); // 原数组不变` | -| `toLocaleString()` | 按本地化规则转为字符串 | `arr.toLocaleString(); // 原数组不变` | -| `entries()` | 返回迭代器(包含索引和值) | `for (let [i, v] of arr.entries()) {} // 原数组不变` | -| `keys()` | 返回索引迭代器 | `for (let i of arr.keys()) {} // 原数组不变` | -| `values()` | 返回值迭代器 | `for (let v of arr.values()) {} // 原数组不变` | - -我已为你优化表格中「完整语法(标注必选 / 可选参数)」和「参数说明」字段的排版,通过换行让内容更易读,同时保留原有的逻辑和格式: - -### 三、数组方法分类完整版本(是否修改原数组) - -#### 3.1修改原数组的方法 - -这类方法直接操作原数组,执行后原数组的内容 / 结构会发生变化,返回值标注在说明中。 - -| 方法名 | 功能 | 完整语法(标注必选 / 可选参数) | 参数说明 | 示例 | -| -------------- | ----------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `push()` | 向数组末尾添加 1 + 元素,返回新长度 | `array.push(...items)`<br>✅ `items`:要添加的元素(1 个或多个) | `items`:<br>- 必选<br>- 任意类型的元素,数量不限 | `const arr = [1,2]; arr.push(3,4); // arr变为[1,2,3,4],返回4` | -| `pop()` | 删除数组最后一个元素,返回被删除的元素 | `array.pop()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.pop(); // arr变为[1,2],返回3` | -| `unshift()` | 向数组开头添加 1 + 元素,返回新长度 | `array.unshift(...items)`<br>✅ `items`:要添加的元素(1 个或多个) | `items`:<br>- 必选<br>- 任意类型的元素,数量不限 | `const arr = [2,3]; arr.unshift(1); // arr变为[1,2,3],返回3` | -| `shift()` | 删除数组第一个元素,返回被删除的元素 | `array.shift()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.shift(); // arr变为[2,3],返回1` | -| `splice()` | 增 / 删 / 改数组元素,返回被删除的元素数组 | `array.splice(start, deleteCount, ...items)`<br>✅ `start`:起始索引<br>❓ `deleteCount`:删除数量(默认删到末尾)<br>❓ `items`:要添加的元素(可选) | - `start`:<br> 必选,整数,指定操作起始位置(负数表示倒数)<br>- `deleteCount`:<br> 可选,非负整数,要删除的元素数量(0 则不删除)<br>- `items`:<br> 可选,要插入到数组中的元素 | `const arr = [1,2,3]; arr.splice(1,1,4); // arr变为[1,4,3],返回[2]` | -| `sort()` | 排序数组元素(默认按字符串 Unicode 码点),返回排序后的数组 | `array.sort(compareFn)`<br>❓ `compareFn(a, b)`:排序对比函数(可选) | - `compareFn`:<br> 可选,回调函数,接收两个参数:<br> ✅ `a`:第一个用于比较的元素<br> ✅ `b`:第二个用于比较的元素<br> 返回值:<0 则 a 排 b 前,=0 则位置不变,>0 则 b 排 a 前 | `const arr = [3,1,2]; arr.sort((a,b) => a-b); // arr变为[1,2,3],返回[1,2,3]` | -| `reverse()` | 反转数组元素顺序,返回反转后的数组 | `array.reverse()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.reverse(); // arr变为[3,2,1],返回[3,2,1]` | -| `fill()` | 用指定值填充数组(覆盖指定范围),返回填充后的数组 | `array.fill(value, start, end)`<br>✅ `value`:填充值<br>❓ `start`:起始索引(默认 0)<br>❓ `end`:结束索引(默认数组长度,不含) | - `value`:<br> 必选,任意类型,填充到数组的值<br>- `start`:<br> 可选,整数,填充起始位置(负数表示倒数)<br>- `end`:<br> 可选,整数,填充结束位置(不含) | `const arr = [1,2,3]; arr.fill(0,1,2); // arr变为[1,0,3],返回[1,0,3]` | -| `copyWithin()` | 复制数组指定范围元素到目标位置,返回修改后的数组 | `array.copyWithin(target, start, end)`<br>✅ `target`:目标位置索引<br>❓ `start`:复制起始索引(默认 0)<br>❓ `end`:复制结束索引(默认数组长度,不含) | - `target`:<br> 必选,整数,复制元素要粘贴到的位置<br>- `start`:<br> 可选,整数,复制起始位置(负数表示倒数)<br>- `end`:<br> 可选,整数,复制结束位置(不含) | `const arr = [1,2,3,4]; arr.copyWithin(0,2); // arr变为[3,4,3,4],返回[3,4,3,4]` | - -#### 3.2不修改原数组的方法 - -这类方法不会改变原数组,返回新数组 / 非数组值,原数组保持原样。 - -##### (1)返回新数组的方法 - -| 方法名 | 功能 | 完整语法(标注必选 / 可选参数) | 参数说明 | 示例 | -| ----------- | ---------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `slice()` | 截取数组指定范围元素,返回新数组(含头不含尾) | `array.slice(start, end)`<br>❓ `start`:起始索引(默认 0)<br>❓ `end`:结束索引(默认数组长度,不含) | - `start`:<br> 可选,整数,截取起始位置(负数表示倒数)<br>- `end`:<br> 可选,整数,截取结束位置(不含) | `const arr = [1,2,3]; const newArr = arr.slice(1); // newArr=[2,3],arr仍为[1,2,3]` | -| `concat()` | 拼接数组 / 值,返回新数组 | `array.concat(...arrays/values)`<br>❓ `arrays/values`:要拼接的数组或值(可选) | `arrays/values`:<br>- 可选<br>- 任意数量的数组或单个值(任意类型) | `const arr1 = [1,2]; const arr2 = arr1.concat(3,[4]); // arr2=[1,2,3,4],arr1不变` | -| `map()` | 遍历数组,对每个元素处理后返回新数组 | `array.map(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:处理函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 map 的原数组(可选) | - `callback`:<br> 必选,对每个元素的处理逻辑,返回处理后的值<br>- `thisArg`:<br> 可选,指定 callback 内 this 的指向<br>- `currentValue`:<br> 必选,数组中正在处理的当前元素<br>- `index`:<br> 可选,当前元素在数组中的索引<br>- `array`:<br> 可选,调用 map 的原数组 | `const arr = [1,2]; const newArr = arr.map((item, idx) => item*2); // newArr=[2,4],arr不变` | -| `filter()` | 过滤数组元素,返回符合条件的新数组 | `array.filter(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:筛选函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 filter 的原数组(可选) | - `callback`:<br> 必选,返回布尔值(true 保留元素,false 过滤)<br>- `thisArg`:<br> 可选,指定 callback 内 this 的指向<br>- `currentValue`:<br> 必选,数组中正在处理的当前元素<br>- `index`:<br> 可选,当前元素在数组中的索引<br>- `array`:<br> 可选,调用 filter 的原数组 | `const arr = [1,2,3]; const newArr = arr.filter((item) => item>1); // newArr=[2,3],arr不变` | -| `flat()` | 扁平化数组,返回新数组 | `array.flat(depth)`<br>❓ `depth`:扁平化深度(默认 1) | `depth`:<br>- 可选<br>- 非负整数,指定扁平化的层级(Infinity 表示无限层级) | `const arr = [1,[2,[3]]]; const newArr = arr.flat(2); // newArr=[1,2,3],arr不变` | -| `flatMap()` | `map + flat(1)`结合,返回新数组 | `array.flatMap(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:处理函数(同 map)<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 flatMap 的原数组(可选) | - `callback`:<br> 必选,返回单个值或数组(最终会被扁平化 1 层)<br>- 其他参数同 map | `const arr = [1,2]; const newArr = arr.flatMap(i => [i,i*2]); // newArr=[1,2,2,4]` | -| `with()` | 替换数组指定索引的元素,返回新数组(ES2023) | `array.with(index, value)`<br>✅ `index`:要替换的索引<br>✅ `value`:新值 | - `index`:<br> 必选,整数,要替换的元素索引(负数表示倒数)<br>- `value`:<br> 必选,任意类型,替换后的新值 | `const arr = [1,2]; const newArr = arr.with(0, 3); // newArr=[3,2],arr仍为[1,2]` | - -##### (2)返回非数组值的方法 - -| 方法名 | 功能 | 完整语法(标注必选 / 可选参数) | 参数说明 | 示例 | -| ------------------ | ------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| `forEach()` | 遍历数组(无返回值,仅执行回调) | `array.forEach(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:遍历执行的函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 forEach 的原数组(可选) | - `callback`:<br> 必选,无返回值(返回值会被忽略)<br>- `thisArg`:<br> 可选,指定 callback 内 this 的指向<br>- `currentValue`:<br> 必选,数组中正在处理的当前元素<br>- `index`:<br> 可选,当前元素在数组中的索引<br>- `array`:<br> 可选,调用 forEach 的原数组 | `arr.forEach((item, idx) => console.log(idx, item)); // 原数组不变` | -| `find()` | 返回第一个符合条件的元素(无则 undefined) | `array.find(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:查找条件函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 find 的原数组(可选) | - `callback`:<br> 必选,返回布尔值(true 则返回当前元素)<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.find(item => item>1); // 返回2,arr不变` | -| `findIndex()` | 返回第一个符合条件的元素索引(无则 - 1) | `array.findIndex(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:查找条件函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 findIndex 的原数组(可选) | - `callback`:<br> 必选,返回布尔值(true 则返回当前索引)<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.findIndex(item => item>1); // 返回1,arr不变` | -| `includes()` | 判断数组是否包含指定值,返回布尔值 | `array.includes(value, start)`<br>✅ `value`:要查找的值<br>❓ `start`:起始查找索引(默认 0) | - `value`:<br> 必选,任意类型,要查找的目标值<br>- `start`:<br> 可选,整数,查找起始位置(负数表示倒数) | `const arr = [1,2,3]; arr.includes(2); // 返回true,arr不变` | -| `indexOf()` | 返回指定值首次出现的索引(无则 - 1) | `array.indexOf(value, start)`<br>✅ `value`:要查找的值<br>❓ `start`:起始查找索引(默认 0) | - `value`:<br> 必选,任意类型,要查找的目标值<br>- `start`:<br> 可选,整数,查找起始位置(负数表示倒数) | `const arr = [1,2,3]; arr.indexOf(2); // 返回1,arr不变` | -| `lastIndexOf()` | 返回指定值最后出现的索引(无则 - 1) | `array.lastIndexOf(value, start)`<br>✅ `value`:要查找的值<br>❓ `start`:起始查找索引(默认数组长度 - 1) | - `value`:<br> 必选,任意类型,要查找的目标值<br>- `start`:<br> 可选,整数,反向查找的起始位置(负数表示倒数) | `const arr = [1,2,2,3]; arr.lastIndexOf(2); // 返回2,arr不变` | -| `every()` | 判断所有元素是否符合条件,返回布尔值 | `array.every(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:判断函数<br> ❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 every 的原数组(可选) | - `callback`:<br> 必选,返回布尔值(所有元素返回 true 则最终为 true)<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.every(item => item>0); // 返回true,arr不变` | -| `some()` | 判断是否有元素符合条件,返回布尔值 | `array.some(callback(currentValue, index, array), thisArg)`<br>✅ `callback`:判断函数<br>❓ `thisArg`:执行 callback 时的 this 指向(可选)<br>callback 参数:<br>✅ `currentValue`:当前处理的元素<br>❓ `index`:当前元素索引(可选)<br>❓ `array`:调用 some 的原数组(可选) | - `callback`:<br> 必选,返回布尔值(任意元素返回 true 则最终为 true)<br>- 其他参数同 forEach | `const arr = [1,2,3]; arr.some(item => item>2); // 返回true,arr不变` | -| `reduce()` | 累加 / 归并数组,返回最终归并值 | `array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`<br>✅ `callback`:归并函数<br>❓ `initialValue`:累加器初始值(可选)<br>callback 参数:<br>✅ `accumulator`:累加器(累计结果)<br>✅ `currentValue`:当前处理的元素<br>❓ `currentIndex`:当前元素索引(可选)<br>❓ `array`:调用 reduce 的原数组(可选) | - `callback`:<br> 必选,返回累计结果(会作为下一次的 accumulator)<br>- `initialValue`:<br> 可选,累加器初始值(无则用数组第一个元素)<br>- `accumulator`:<br> 必选,累计的结果值<br>- `currentValue`:<br> 必选,当前处理的元素<br>- `currentIndex`:<br> 可选,当前元素索引<br>- `array`:<br> 可选,调用 reduce 的原数组 | `const arr = [1,2,3]; arr.reduce((sum, item) => sum+item, 0); // 返回6,arr不变` | -| `reduceRight()` | 从右到左归并数组,返回最终归并值 | `array.reduceRight(callback(accumulator, currentValue, currentIndex, array), initialValue)`<br>✅ `callback`:归并函数(同 reduce)<br>❓ `initialValue`:累加器初始值(可选)<br>callback 参数:同 reduce | 同 reduce,仅遍历顺序为从右到左 | `const arr = [1,2,3]; arr.reduceRight((sum, item) => sum+item, 0); // 返回6,arr不变` | -| `join()` | 将数组转为字符串,返回拼接后的字符串 | `array.join(separator)`<br>❓ `separator`:分隔符(默认逗号) | `separator`:<br>- 可选<br>- 字符串,元素之间的分隔符(空字符串则无分隔) | `const arr = [1,2,3]; arr.join(','); // 返回"1,2,3",arr不变` | -| `toString()` | 将数组转为字符串(默认用逗号分隔) | `array.toString()`<br>无参数 | 无 | `const arr = [1,2,3]; arr.toString(); // 返回"1,2,3",arr不变` | -| `toLocaleString()` | 按本地化规则转为字符串 | `array.toLocaleString(locales, options)`<br>❓ `locales`:语言 / 地区代码(可选)<br>❓ `options`:格式化选项(可选) | - `locales`:<br> 可选,如 "zh-CN"、"en-US"<br>- `options`:<br> 可选,对象,配置格式化规则 | `const arr = [1234, new Date()]; arr.toLocaleString(); // 按本地格式返回字符串` | -| `entries()` | 返回迭代器(包含索引和值) | `array.entries()`<br>无参数 | 无 | `for (let [i, v] of arr.entries()) {} // 原数组不变` | -| `keys()` | 返回索引迭代器 | `array.keys()`<br>无参数 | 无 | `for (let i of arr.keys()) {} // 原数组不变` | -| `values()` | 返回值迭代器 | `array.values()`<br>无参数 | 无 | `for (let v of arr.values()) {} // 原数组不变` | - -#### 标注说明 - -- ✅:参数为**必选** -- ❓:参数为**可选** -- 回调函数的返回值:除标注外,`map`返回处理后的值、`filter`返回布尔值、`find/findIndex`返回布尔值、`every/some`返回布尔值、`reduce/reduceRight`返回累计值,`forEach`无返回值(返回 undefined)。 -- `thisArg`参数:所有带`thisArg`的方法,若省略则 callback 内的`this`指向:非严格模式下为全局对象,严格模式下为 undefined \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index eb1198d395fda8f7549d6ea02c98c55285a78645..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,11 +0,0 @@ -## 笔记部分 -### JS的三种引入方式 - -- 行内嵌入 - -- 内部嵌入 - -- 外部嵌入 - - - diff --git "a/\351\231\210\346\226\271\346\227\255/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 3724d48ecb89970b33b8dad8f04df2cc3245b479..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,36 +0,0 @@ -## 笔记部分 -### 练习部分 - -1. - -```html -<h2>个人信息</h2> - <script> - var name= "郭倩"; - var six = "男"; - var age = "20"; - var shengao = "1.77m" - var juzi = "九阴真经,降龙十八掌" - document.write("姓名:"); - document.write(name); - document.write("<br>性别:") - document.write(six); - document.write("<br>年龄:"); - document.write(age); - document.write("<br>身高:"); - document.write(shengao); - document.write("<br>武功:"); - document.write(juzi); - </script> -``` - -2. - -```html -<script> - document.write("俄罗斯的国土面积:17 1000 000km"); -</script> -``` - - - diff --git "a/\351\231\210\346\226\271\346\227\255/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index ca369d1e46de1236d6008f7a3a849e23f4a08d9d..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,110 +0,0 @@ -## 笔记部分 -### 一、JS运算符 -#### 逻辑运算符 -- 逻辑与(&&): 【11=1】、【10=0】、【00=0】 -- 逻辑非(!):【1==0=1】、【1==1=0】 -- 逻辑或(||):【10=1】、【01=1】、【11=1】、【00=0】 -#### 其他运算符 -- 逗号运算符:逗号运算符用于将多个表达式排在一起,整个表达式的值是最后一个表达式的值 - -例: -```js -var a,b,c,d -a(b=1,c=2,d=3) -alert(a) - -输出结果:3 -``` -- typeof运算符:用于判断操作数的数据类型,结果返回一个字符串,此字符串代表了操作数的数据类型 - -例: -```js -var a,b,c,d -a=3 //数值 -b="字符串类型"//字符串 -c=false //布尔值 -d=null//空值 -alert(a) -输出结果:number -``` -- new运算符:创建一个新的实例对象 -### 二、表达式 -#### 表达式转换 -1、其他数据类型转数值 - - undefined:NAN - - null:0 - - 逻辑型:若值为true,结果为1;反之为0 - - 字符串:如果字符串是数字则直接转换为数字,否则为NaN - -其他对象:NaN - -2、其他数据类型转逻辑 - - undefined:false - - null:false - - 逻辑型:若值为0或NaN,结果为false;反之为true - - 字符串:若其长度为0,则结果为false,否则为true - -其他对象:true - -3、其他数据类型转字符串 - - undefined:直接转换 - - null:直接转换 - - 逻辑型:若其值为ture,则是"ture",反之亦然 - - 数值:NaN、0、与数值相对应的字符串 - - 其他对象:若存在,则其结果为toString()方法的值;否则其他结果为"undfined" - -### 练习部分 - -``` -<script> - - let a1=3,b1=0.0275,c1=100000; - let abc1=(c+c*b*a) - document.write(abc+"元") - - let a2=60; - let b2=65; - if(b2>a2){ - document.write("及格") - }else{ - document.write("不及格"); - } - - - let a3=30,b3=50,c3=30; - let abc=((a+b)*c/2) - document.write(abc+"平方"); - - document.write("他强由他强,清风拂山岗"); - document.write("<br>他横任他横,明月照大江"); - document.write("<br>他自狠来他自恶,我自一口真气足"); - document.write("<br>——《九阳神功》"); - - let a4=6500,b4=500,c4=5000,d4=0.03; - let abcd=((a4-b4)-(a4-b4-c4)*d); - document.write("该员工但实际收入为"+abcd4+"元"); - - let b5=29; - if(b5=29){ - alert("2024年2月有29天"); - }else{ - alert("2024年2月有28天"); - } - - let a6=23 - if(a<20){ - document.write("BMI:"+a6); - document.write("<br>结果:体重过轻"); - }else if(20<=a6<25){ - document.write("BMI:"+a6); - document.write("<br>结果:体重适中"); - }else if(25<=a6<30){ - document.write("BMI:"+a6); - document.write("<br>结果:体重过重"); - }else if(30<=a6<35){ - document.write("BMI:"+a6); - document.write("<br>结果:肥胖"); - }else{ - document.write("BMI:"+a6); - document.write("<br>结果:非常肥胖"); - } - </script> -``` \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index ca369d1e46de1236d6008f7a3a849e23f4a08d9d..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,110 +0,0 @@ -## 笔记部分 -### 一、JS运算符 -#### 逻辑运算符 -- 逻辑与(&&): 【11=1】、【10=0】、【00=0】 -- 逻辑非(!):【1==0=1】、【1==1=0】 -- 逻辑或(||):【10=1】、【01=1】、【11=1】、【00=0】 -#### 其他运算符 -- 逗号运算符:逗号运算符用于将多个表达式排在一起,整个表达式的值是最后一个表达式的值 - -例: -```js -var a,b,c,d -a(b=1,c=2,d=3) -alert(a) - -输出结果:3 -``` -- typeof运算符:用于判断操作数的数据类型,结果返回一个字符串,此字符串代表了操作数的数据类型 - -例: -```js -var a,b,c,d -a=3 //数值 -b="字符串类型"//字符串 -c=false //布尔值 -d=null//空值 -alert(a) -输出结果:number -``` -- new运算符:创建一个新的实例对象 -### 二、表达式 -#### 表达式转换 -1、其他数据类型转数值 - - undefined:NAN - - null:0 - - 逻辑型:若值为true,结果为1;反之为0 - - 字符串:如果字符串是数字则直接转换为数字,否则为NaN - -其他对象:NaN - -2、其他数据类型转逻辑 - - undefined:false - - null:false - - 逻辑型:若值为0或NaN,结果为false;反之为true - - 字符串:若其长度为0,则结果为false,否则为true - -其他对象:true - -3、其他数据类型转字符串 - - undefined:直接转换 - - null:直接转换 - - 逻辑型:若其值为ture,则是"ture",反之亦然 - - 数值:NaN、0、与数值相对应的字符串 - - 其他对象:若存在,则其结果为toString()方法的值;否则其他结果为"undfined" - -### 练习部分 - -``` -<script> - - let a1=3,b1=0.0275,c1=100000; - let abc1=(c+c*b*a) - document.write(abc+"元") - - let a2=60; - let b2=65; - if(b2>a2){ - document.write("及格") - }else{ - document.write("不及格"); - } - - - let a3=30,b3=50,c3=30; - let abc=((a+b)*c/2) - document.write(abc+"平方"); - - document.write("他强由他强,清风拂山岗"); - document.write("<br>他横任他横,明月照大江"); - document.write("<br>他自狠来他自恶,我自一口真气足"); - document.write("<br>——《九阳神功》"); - - let a4=6500,b4=500,c4=5000,d4=0.03; - let abcd=((a4-b4)-(a4-b4-c4)*d); - document.write("该员工但实际收入为"+abcd4+"元"); - - let b5=29; - if(b5=29){ - alert("2024年2月有29天"); - }else{ - alert("2024年2月有28天"); - } - - let a6=23 - if(a<20){ - document.write("BMI:"+a6); - document.write("<br>结果:体重过轻"); - }else if(20<=a6<25){ - document.write("BMI:"+a6); - document.write("<br>结果:体重适中"); - }else if(25<=a6<30){ - document.write("BMI:"+a6); - document.write("<br>结果:体重过重"); - }else if(30<=a6<35){ - document.write("BMI:"+a6); - document.write("<br>结果:肥胖"); - }else{ - document.write("BMI:"+a6); - document.write("<br>结果:非常肥胖"); - } - </script> -``` \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 1f7ae3efa12458d48fbbdea50f73b2aa3d1af208..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,35 +0,0 @@ -# 笔记 - -## JS函数 - -- 函数结构:function 函数名(参数){} - -- 参数:形式参数,实际参数 - -- 函数定义:箭头函数、匿名函数、传统函数 - -## 作业 -```JS -<script> - function address(){ - alert("省:"+sheng+"\n市:"+shi+"\n区:"+qu+"\n详细地址:"+xiang) - } - let sheng="福建省",shi="漳州市",qu="芗城区",xiang="我草盒,爱丽丝错了爱丽丝不在网上口嗨了"; - address(sheng,shi,qu,xiang) - </script> -``` - - - -作业2 - -```js -<script> - let a=-30; - function abs(a){ - document.write(Math.abs(a)) - } - abs(a); - </script> -``` - diff --git "a/\351\231\210\346\226\271\346\227\255/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 4f488df8b8b6a58877c2e46e05479ff28c45e3f5..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,27 +0,0 @@ -## 笔记部分 - - -### 练习部分 - -``` -<script> - function money(s,w,21:10c) { - return s +w+c; - } - function ending() { - let s = 199; - let w = 156; - let c= 165; - let t = money(s,w,c) - if (t >= 500) { - let all = total * 0.9; - return `总消费${t}元,满足优惠,金额:${all}元`; - } else { - return `总消费${t}元,未满足优惠条件`; - } - } - let result = ending(); - document.write(result); - </script> -``` - diff --git "a/\351\231\210\346\226\271\346\227\255/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 640ddfbcc08314d92b154b1dff180485b59272ce..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,46 +0,0 @@ -## 笔记部分 - - -### 练习部分 - -``` - - let time = { - startDate: new Date('2023-05-01'), - endDate: new Date('2023-06-01'), - getHours() { - let msDiff = Math.abs(time.endDate - time.startDate); - return msDiff / 3600000; - } - }; - let hours = time.getHours(); - document.write('开始日期与结束日期的间隔小时数:', hours); - } -``` - -```js - let date1 = new Date(2023,6,7); - let date2 = new Date(2025,11,20); - let date3 = date2.getTime()- date1.getTime(); - let day = Math.ceil(date3/(24*60*60*1000)); - document.write("距离2023年高考已经过了"+day+"天"); -``` - -```js -function gosite(e){ - if(e.button == 0){ - alert('您单击了鼠标左键'); - return false; - } - if(e.button == 1){ - alert('您单击了鼠标中键'); - return false; - } - if(e.button == 2){ - alert('您单击了鼠标右键'); - return false; - } - } - document.onmousedown=gosite; -``` - diff --git "a/\351\231\210\346\226\271\346\227\255/20251121-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251121-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 4b059c14449973a40c2e599c08b5e54d25f66e4e..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251121-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,24 +0,0 @@ -## 笔记部分 -### 练习部分 - -``` -let arr = new Array(); -arr[0] = "1"; -arr[1] = "2"; -arr[2] = "3"; -``` - -``` -let arr = new Array(3); -arr[0] = 1; -arr[1] = 2; -arr[2] = 3; -``` - -``` -let arr = new Array("1","2","3"); -``` - -``` -let arr = ["1","2","3"]; -``` \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251122-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251122-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 709b28ceee0b7e85b68936f7a0b9d99e1b62e8cb..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251122-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,23 +0,0 @@ -# 笔记 - -## 一、焦点事件(元素获取 / 失去焦点) - -| 事件名 | 说明 | 语法示例(2 种常用绑定) | -| ---------- | ---------------------- | ------------------------------------------------------- | -| `focus` | 元素获取焦点(无冒泡) | 1. 标签属性:`` | -| | | 2. JS 绑定:`input.addEventListener('focus', () => {})` | -| `blur` | 元素失去焦点(无冒泡) | 1. 标签属性:`` | -| | | 2. JS 绑定:`input.addEventListener('blur', () => {})` | -| `focusin` | 获取焦点(支持冒泡) | `parent.addEventListener('focusin', () => {})` | -| `focusout` | 失去焦点(支持冒泡) | `parent.addEventListener('focusout', () => {})` | - -## 二、表单事件(表单交互相关) - -| 事件名 | 说明 | 语法示例 | -| ------------------------------------------------ | ------------------------------- | -------- | -| `submit` | 表单提交(点击提交按钮 / 回车) | ```js | -| form.addEventListener('submit', (e) => { | | | -| e.preventDefault (); // 阻止默认提交行为(必写) | | | -| // 表单验证、数据提交逻辑 | | | -| }); | | | - diff --git "a/\351\231\210\346\226\271\346\227\255/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 20c07d822331dd5620ae546f8b64ab33e4dcca98..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,73 +0,0 @@ -# 笔记 - -## 数组与集合 -# JS 数组对象方法速查表 -| 方法名 | 说明 | 简单代码实现 | -| ------ | ---- | ---- | -| `push()` | 向数组末尾添加一个/多个元素,返回新数组长度(改变原数组) | ```js const arr = [1,2]; const len = arr.push(3,4); // len=4, arr=[1,2,3,4] ``` | -| `pop()` | 删除数组最后一个元素,返回被删除的元素(改变原数组) | ```js const arr = [1,2,3]; const del = arr.pop(); // del=3, arr=[1,2] ``` | -| `unshift()` | 向数组开头添加一个/多个元素,返回新数组长度(改变原数组) | ```js const arr = [2,3]; const len = arr.unshift(0,1); // len=4, arr=[0,1,2,3] ``` | -| `shift()` | 删除数组第一个元素,返回被删除的元素(改变原数组) | ```js const arr = [0,1,2]; const del = arr.shift(); // del=0, arr=[1,2] ``` | -| `splice()` | 增删改数组元素,返回被删除元素组成的数组(改变原数组)<br>参数:起始索引、删除个数、新增元素 | ```js const arr = [1,2,3]; // 删除:从索引1删1个 const del = arr.splice(1,1); // del=[2], arr=[1,3] // 新增:索引1处加2、4 arr.splice(1,0,2,4); // arr=[1,2,4,3] ``` | -| `slice()` | 截取数组片段,返回新数组(不改变原数组)<br>参数:起始索引(含)、结束索引(不含,可选) | ```js const arr = [1,2,3,4]; const newArr = arr.slice(1,3); // newArr=[2,3], arr不变 ``` | -| `forEach()` | 遍历数组,对每个元素执行回调(无返回值) | ```js const arr = [1,2,3]; arr.forEach((item, idx) => { console.log(item, idx); // 输出1 0、2 1、3 2 }); ``` | -| `map()` | 遍历数组,返回由回调返回值组成的新数组(不改变原数组) | ```js const arr = [1,2,3]; const newArr = arr.map(item => item * 2); // newArr=[2,4,6], arr不变 ``` | -| `filter()` | 过滤数组,返回满足回调条件的元素组成的新数组(不改变原数组) | ```js const arr = [1,2,3,4]; const newArr = arr.filter(item => item % 2 === 0); // newArr=[2,4] ``` | -| `find()` | 遍历数组,返回第一个满足回调条件的元素(不改变原数组,无则返回`undefined`) | ```js const arr = [1,2,3,4]; const res = arr.find(item => item > 2); // res=3 ``` | -| `findIndex()` | 遍历数组,返回第一个满足回调条件的元素索引(不改变原数组,无则返回`-1`) | ```js const arr = [1,2,3,4]; const idx = arr.findIndex(item => item > 2); // idx=2 ``` | -| `some()` | 判断数组是否有至少一个元素满足回调条件,返回布尔值(不改变原数组) | ```js const arr = [1,2,3]; const has = arr.some(item => item > 2); // has=true ``` | -| `every()` | 判断数组是否所有元素都满足回调条件,返回布尔值(不改变原数组) | ```js const arr = [1,2,3]; const all = arr.every(item => item > 0); // all=true ``` | -| `join()` | 将数组元素按指定分隔符拼接为字符串,返回字符串(不改变原数组,默认分隔符为`,`) | ```js const arr = [1,2,3]; const str1 = arr.join(); // str1="1,2,3" const str2 = arr.join('-'); // str2="1-2-3" ``` | -| `concat()` | 合并两个/多个数组,返回新数组(不改变原数组) | ```js const arr1 = [1,2]; const arr2 = [3,4]; const newArr = arr1.concat(arr2); // newArr=[1,2,3,4] ``` | -| `flat()` | 扁平化数组,返回新数组(不改变原数组)<br>参数:扁平化深度(默认1,`Infinity`表示完全扁平化) | ```js const arr = [1,[2,[3]]]; const flat1 = arr.flat(); // flat1=[1,2,[3]] const flatAll = arr.flat(Infinity); // flatAll=[1,2,3] ``` | -| `flatMap()` | 先执行`map`再执行`flat(1)`,返回新数组(不改变原数组) | ```js const arr = [1,2]; const newArr = arr.flatMap(item => [item, item*2]); // newArr=[1,2,2,4] ``` | -| `sort()` | 对数组元素排序,返回排序后的原数组(改变原数组,默认按字符串Unicode排序) | ```js const arr = [3,1,2]; // 数字升序 arr.sort((a,b) => a - b); // arr=[1,2,3] // 数字降序 arr.sort((a,b) => b - a); // arr=[3,2,1] ``` | -| `reverse()` | 反转数组元素顺序,返回反转后的原数组(改变原数组) | ```js const arr = [1,2,3]; arr.reverse(); // arr=[3,2,1] ``` | -| `reduce()` | 从左到右遍历数组,累计回调返回值,返回最终累计结果(不改变原数组)<br>参数:回调函数、初始值(可选) | ```js const arr = [1,2,3]; // 求和(无初始值) const sum = arr.reduce((acc, cur) => acc + cur); // sum=6 // 求和(有初始值2) const sum2 = arr.reduce((acc, cur) => acc + cur, 2); // sum2=8 ``` | -| `indexOf()` | 查找元素在数组中首次出现的索引(不改变原数组,无则返回`-1`)<br>参数:目标元素、起始索引(可选) | ```js const arr = [1,2,3,2]; const idx1 = arr.indexOf(2); // idx1=1 const idx2 = arr.indexOf(2, 2); // idx2=3 ``` | -| `includes()` | 判断数组是否包含目标元素,返回布尔值(不改变原数组)<br>参数:目标元素、起始索引(可选) | ```js const arr = [1,2,3]; const has = arr.includes(2); // has=true const has2 = arr.includes(2, 2); // has2=false ``` | -| `fill()` | 用指定值填充数组,返回填充后的原数组(改变原数组)<br>参数:填充值、起始索引(可选)、结束索引(可选,不含) | ```js const arr = [1,2,3]; arr.fill(0); // arr=[0,0,0] arr.fill(9, 1, 2); // arr=[0,9,0] ``` | -| `Array.from()` | 将类数组/可迭代对象转为数组,返回新数组(静态方法) | ```js // 类数组 const likeArr = {0:1, 1:2, length:2}; const arr1 = Array.from(likeArr); // arr1=[1,2] // 字符串 const str = "abc"; const arr2 = Array.from(str); // arr2=['a','b','c'] ``` | -| `Array.of()` | 创建包含指定元素的数组,返回新数组(静态方法,解决`Array()`的歧义) | ```js const arr1 = Array.of(1,2,3); // arr1=[1,2,3] const arr2 = Array.of(5); // arr2=[5](区别于Array(5)返回长度5的空数组) ``` | -| `Array.isArray()` | 判断参数是否为数组,返回布尔值(静态方法) | ```js const res1 = Array.isArray([1,2]); // res1=true const res2 = Array.isArray("abc"); // res2=false ``` | - -## Map集合 -| 方法名/属性 | 说明 | 简单代码实现 | -| ------ | ---- | ---- | -| `new Map()` | 创建空Map实例(或传入可迭代对象初始化,如数组、另一个Map) | ```js // 空Map const map1 = new Map(); // 初始化键值对(数组形式:[[key1, val1], [key2, val2]]) const map2 = new Map([['name', '张三'], [1, '数字']]); // 从另一个Map初始化 const map3 = new Map(map2); ``` | -| `size`(属性) | 返回Map中键值对的数量(只读属性,非方法) | ```js const map = new Map([['a', 1]]); console.log(map.size); // 输出1 ``` | -| `set(key, value)` | 新增/修改键值对(key存在则更新值,不存在则新增),返回当前Map实例(可链式调用) | ```js const map = new Map(); // 新增 map.set('age', 20); // 链式新增 map.set('gender', '男').set('city', '北京'); // 更新 map.set('age', 22); console.log(map); // Map(3) { 'age' => 22, 'gender' => '男', 'city' => '北京' } ``` | -| `get(key)` | 获取指定key对应的value,key不存在则返回`undefined` | ```js const map = new Map([['name', '李四']]); const name = map.get('name'); // name='李四' const addr = map.get('addr'); // addr=undefined ``` | -| `has(key)` | 判断Map是否包含指定key,返回布尔值 | ```js const map = new Map([['id', 1001]]); console.log(map.has('id')); // true console.log(map.has('phone')); // false ``` | -| `delete(key)` | 删除指定key对应的键值对,删除成功返回`true`,key不存在返回`false` | ```js const map = new Map([['name', '王五']]); const res1 = map.delete('name'); // res1=true, map变为空 const res2 = map.delete('name'); // res2=false ``` | -| `clear()` | 清空Map中所有键值对,无返回值(改变原Map) | ```js const map = new Map([['a', 1], ['b', 2]]); map.clear(); console.log(map.size); // 0 ``` | -| `forEach(callback)` | 遍历Map,对每个键值对执行回调(无返回值)<br>回调参数:value、key、当前Map | ```js const map = new Map([['name', '赵六'], ['age', 25]]); map.forEach((value, key, map) => { console.log(`${key}: ${value}`); // 输出name: 赵六、age: 25 }); ``` | -| `keys()` | 返回Map中所有key的迭代器对象,可通过`for...of`遍历 | ```js const map = new Map([['a', 1], ['b', 2]]); const keys = map.keys(); for (const key of keys) { console.log(key); // 输出a、b } ``` | -| `values()` | 返回Map中所有value的迭代器对象,可通过`for...of`遍历 | ```js const map = new Map([['a', 1], ['b', 2]]); const values = map.values(); for (const val of values) { console.log(val); // 输出1、2 } ``` | -| `entries()` | 返回Map中所有`[key, value]`的迭代器对象(默认遍历Map时使用此迭代器) | ```js const map = new Map([['a', 1], ['b', 2]]); const entries = map.entries(); for (const [key, val] of entries) { console.log(key, val); // 输出a 1、b 2 } // 简写(直接遍历Map) for (const [key, val] of map) { console.log(key, val); // 同上 } ``` | -| `Map.from(iterable)` | (ES2022+静态方法)将可迭代对象(如数组、Set、Map)转为Map,返回新Map | ```js // 数组转Map const arr = [['x', 10], ['y', 20]]; const map1 = Map.from(arr); // Map(2) { 'x' => 10, 'y' => 20 } // Set转Map(Set元素需为[key, value]数组) const set = new Set([['a', 1]]); const map2 = Map.from(set); // Map(1) { 'a' => 1 } ``` | -| `Map.of(...entries)` | (ES2022+静态方法)创建包含指定键值对的Map,返回新Map(直接传入key-value参数,无需嵌套数组) | ```js const map = Map.of('name', '孙七', 'age', 30); console.log(map); // Map(2) { 'name' => '孙七', 'age' => 30 } ``` | -| `Map.prototype[Symbol.iterator]` | 迭代器方法,返回`entries()`迭代器(支持`for...of`直接遍历Map的核心) | ```js const map = new Map([['a', 1]]); const iter = map[Symbol.iterator](); console.log(iter.next().value); // ['a', 1] ``` | - -## set集合速查表 -| 方法名/属性 | 说明 | 简单代码实现 | -| ------ | ---- | ---- | -| `new Set()` | 创建空Set实例(或传入可迭代对象初始化,自动去重重复元素) | ```js // 空Set const set1 = new Set(); // 传入数组初始化(自动去重) const set2 = new Set([1,2,2,3]); // set2 = Set(3) {1,2,3} // 传入字符串初始化(按字符去重) const set3 = new Set("aabcc"); // set3 = Set(3) {'a','b','c'} ``` | -| `size`(属性) | 返回Set中元素的个数(只读属性,非方法) | ```js const set = new Set([1,2,3]); console.log(set.size); // 输出3 ``` | -| `add(value)` | 向Set中添加元素(重复元素会被忽略),返回当前Set实例(可链式调用) | ```js const set = new Set(); // 单个添加 set.add(1); // 链式添加 set.add(2).add(3).add(2); // 重复添加2被忽略 console.log(set); // Set(3) {1,2,3} ``` | -| `delete(value)` | 从Set中删除指定元素,删除成功返回`true`,元素不存在返回`false` | ```js const set = new Set([1,2,3]); const res1 = set.delete(2); // res1=true, set变为{1,3} const res2 = set.delete(4); // res2=false ``` | -| `has(value)` | 判断Set是否包含指定元素,返回布尔值 | ```js const set = new Set([1,2,3]); console.log(set.has(2)); // true console.log(set.has(4)); // false ``` | -| `clear()` | 清空Set中所有元素,无返回值(改变原Set) | ```js const set = new Set([1,2,3]); set.clear(); console.log(set.size); // 0 ``` | -| `forEach(callback)` | 遍历Set,对每个元素执行回调(无返回值)<br>回调参数:value、key(与value相同)、当前Set | ```js const set = new Set([1,2,3]); set.forEach((value, key, set) => { console.log(`${key}: ${value}`); // 输出1:1、2:2、3:3(key=value) }); ``` | -| `keys()` | 返回Set中所有元素的迭代器对象(与`values()`效果一致,因Set无键值区分) | ```js const set = new Set([1,2,3]); const keys = set.keys(); for (const key of keys) { console.log(key); // 输出1、2、3 } ``` | -| `values()` | 返回Set中所有元素的迭代器对象(Set默认迭代器) | ```js const set = new Set([1,2,3]); const values = set.values(); for (const val of values) { console.log(val); // 输出1、2、3 } ``` | -| `entries()` | 返回Set中所有`[value, value]`的迭代器对象(因Set无键值区分,键和值相同) | ```js const set = new Set([1,2,3]); const entries = set.entries(); for (const [key, val] of entries) { console.log(key, val); // 输出1 1、2 2、3 3 } ``` | -| `for...of` 遍历 | 直接遍历Set元素(依托`Symbol.iterator`迭代器,等价于遍历`values()`) | ```js const set = new Set([1,2,3]); for (const val of set) { console.log(val); // 输出1、2、3 } ``` | -| `Set.from(iterable)` | (ES2022+静态方法)将可迭代对象(如数组、Set、字符串)转为Set,自动去重 | ```js // 数组转Set(去重) const arr = [1,2,2,3]; const set1 = Set.from(arr); // Set(3) {1,2,3} // 字符串转Set(按字符去重) const str = "aabbcc"; const set2 = Set.from(str); // Set(3) {'a','b','c'} ``` | -| `Set.of(...values)` | (ES2022+静态方法)创建包含指定元素的Set,自动去重重复参数 | ```js const set = Set.of(1,2,2,3,4); console.log(set); // Set(4) {1,2,3,4} ``` | -| `Set.prototype[Symbol.iterator]` | 迭代器方法,返回`values()`迭代器(支持`for...of`直接遍历Set的核心) | ```js const set = new Set([1,2]); const iter = set[Symbol.iterator](); console.log(iter.next().value); // 1 console.log(iter.next().value); // 2 ``` | -| 转数组技巧 | Set无原生转数组方法,可通过`Array.from()`或扩展运算符`[...set]`实现 | ```js const set = new Set([1,2,3]); // 方法1:Array.from() const arr1 = Array.from(set); // [1,2,3] // 方法2:扩展运算符 const arr2 = [...set]; // [1,2,3] ``` | - - -## 作业 - diff --git "a/\351\231\210\346\226\271\346\227\255/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index a8de1f1cb2de580591d79cf05d00a6e4cb23f641..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,49 +0,0 @@ -# 笔记 - -### 正则表达式 - -- 正则表达式是一个用简单语法来描述的字符串模式,通常用于替换验证文本内容 - -## 正则表达式简单速查表 - -## 一、基础语法 - -| 类型 | 符号 | 说明 | 示例 | -| ---------- | -------------- | ------------------------------ | -------------------------- | -| 字面量 | 直接字符 | 匹配自身(字母 / 数字 / 符号) | `/abc/` 匹配 "abc" | -| 转义字符 | `\` | 匹配特殊字符(`.`/`*`等) | `/\./` 匹配 "." | -| 字符类 | `[abc]` | 匹配任意一个指定字符 | `/[abc]/` 匹配 "a"/"b"/"c" | -| 反向字符类 | `[^abc]` | 匹配非指定字符 | `/[^abc]/` 匹配 "d"/"1" | -| 范围匹配 | `[a-z0-9]` | 匹配区间内字符(简写) | `/[0-9]/` 匹配数字 | -| 预定义类 | `\d`/`\w`/`\s` | 数字 / 字母下划线 / 空白符 | `/\d/` 等价于 `[0-9]` | -| 边界匹配 | `^`/`$` | 行首 / 行尾 | `/^abc$/` 匹配整行 "abc" | -| 量词 | `*`/`+`/`?` | 0 + 次 / 1 + 次 / 0-1 次 | `/a*/` 匹配 ""/"a"/"aa" | -| 精确量词 | `{n}`/`{n,}` | 恰好 n 次 / 至少 n 次 | `/a{2}/` 匹配 "aa" | - -## 二、常用方法 - -| 方法 | 所属对象 | 功能 | 示例 | -| -------------- | -------- | ----------------------------------- | ------------------------------------------------- | -| `test()` | RegExp | 验证字符串是否匹配,返回布尔值 | `/\d+/.test("123")` → `true` | -| `match()` | String | 匹配结果存入数组(无匹配返回 null) | "abc123".match(/\d+/) → `["123"]` | -| `replace()` | String | 替换匹配内容 | "abc".replace(/a/, "x") → "xbc" | -| `replaceAll()` | String | 替换所有匹配(需加`g`修饰符) | "aaa".replaceAll(/a/g, "b") → "bbb" | -| `exec()` | RegExp | 逐次匹配(支持分组捕获) | `/(\d)([a-z])/.exec("1a2b")` → `["1a", "1", "a"]` | - -## 三、修饰符 - -| 修饰符 | 说明 | 示例 | -| ------ | ------------------------------- | ----------------------------------- | -| `i` | 忽略大小写 | `/abc/i` 匹配 "ABC"/"abc" | -| `g` | 全局匹配(不终止于第一个匹配) | "aaa".match(/a/g) → `["a","a","a"]` | -| `m` | 多行匹配(`^`/`$`匹配行首行尾) | `/^a/m` 匹配 "a\nabc" 中第一行 "a" | - -## 四、实用示例(直接复用) - -| 场景 | 正则表达式 | 说明 | -| ---------- | ------------------------------- | ----------------------------- | -| 手机号验证 | `/^1[3-9]\d{9}$/` | 中国大陆手机号(11 位) | -| 邮箱验证 | `/^\w+@[a-z0-9]+\.[a-z]{2,}$/i` | 简单邮箱格式(含域名后缀) | -| 提取数字 | `/\d+/g` | 匹配字符串中所有数字 | -| 去除空格 | `/\s+/g` | 替换所有空白符(空格 / 换行) | -| 匹配中文 | `/[\u4e00-\u9fa5]/g` | 匹配中文字符 | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 2f6b29d73bcadffe0246d12ec9ef894a463a5eee..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,41 +0,0 @@ -# 笔记 - -## 异常处理 - - - -## 核心语法:try-catch (-finally) - -### 1. 基础格式(捕获异常) - -```js -try { - // 可能发生错误的代码(如:运算、接口请求、DOM操作) -} catch (error) { - // 错误发生时执行:处理异常(如:提示用户、打印日志) -} -``` - -### 2. 带 finally 格式(无论是否出错都执行) - -```js -try { - // 可能出错的代码 -} catch (error) { - // 处理异常 -} finally { - // 必执行代码(如:关闭弹窗、释放资源) -} -``` - -### 3. 主动抛出异常(throw) - -```js -// 主动触发异常(可抛字符串、Error对象等,推荐Error) -throw new Error("自定义错误信息"); // 推荐:带堆栈信息,便于调试 -// 或简化(不推荐,无堆栈):throw "错误信息"; -``` - - -## - diff --git "a/\351\231\210\346\226\271\346\227\255/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 709b28ceee0b7e85b68936f7a0b9d99e1b62e8cb..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,23 +0,0 @@ -# 笔记 - -## 一、焦点事件(元素获取 / 失去焦点) - -| 事件名 | 说明 | 语法示例(2 种常用绑定) | -| ---------- | ---------------------- | ------------------------------------------------------- | -| `focus` | 元素获取焦点(无冒泡) | 1. 标签属性:`` | -| | | 2. JS 绑定:`input.addEventListener('focus', () => {})` | -| `blur` | 元素失去焦点(无冒泡) | 1. 标签属性:`` | -| | | 2. JS 绑定:`input.addEventListener('blur', () => {})` | -| `focusin` | 获取焦点(支持冒泡) | `parent.addEventListener('focusin', () => {})` | -| `focusout` | 失去焦点(支持冒泡) | `parent.addEventListener('focusout', () => {})` | - -## 二、表单事件(表单交互相关) - -| 事件名 | 说明 | 语法示例 | -| ------------------------------------------------ | ------------------------------- | -------- | -| `submit` | 表单提交(点击提交按钮 / 回车) | ```js | -| form.addEventListener('submit', (e) => { | | | -| e.preventDefault (); // 阻止默认提交行为(必写) | | | -| // 表单验证、数据提交逻辑 | | | -| }); | | | - diff --git "a/\351\231\210\346\226\271\346\227\255/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index bf0ca979b7cede28413d581e3050f48d856dfe12..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,16 +0,0 @@ -## 拖拽方法 - -### 事件详解 - -#### 拖拽源事件 - -1. dragstart:当用户开始拖拽一个元素时触发。通常在此事件中设置拖拽数据(如拖拽元素的ID)和拖拽效果。 -2. drag:拖拽过程中连续触发(类似于mousemove事件)。 -3. dragend:拖拽结束(松开鼠标)时触发,无论拖拽成功与否都会触发。 - -#### 放置目标事件 - -1. dragenter:当拖拽元素进入放置区域时触发。通常用于给放置区域添加视觉反馈。 -2. dragover:当拖拽元素在放置区域上方移动时连续触发。必须在此事件中调用event.preventDefault()才能允许放置。 -3. dragleave:当拖拽元素离开放置区域时触发。通常用于移除视觉反馈。 -4. drop:当拖拽元素在放置区域释放时触发。必须在此事件中调用event.preventDefault()才能执行放置操作。通常在此事件中处理拖拽数据的接收和处理。 \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251203\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251203\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index dcd7349aa662fdea5f2f8425b991c2dae2c8b123..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251203\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,80 +0,0 @@ -# 笔记 - -Document 是 DOM(文档对象模型)的核心对象,代表整个 HTML/XML 文档,是操作页面内容、结构和行为的入口。以下为高频使用的属性 / 方法速查,按功能分类,附简洁示例。 - -## 一、核心属性(快速获取文档关键信息) - -| 属性名 | 说明 | 示例 | -| ------------------------ | -------------------------------------------- | ------------------------------------------------------------ | -| document.documentElement | 获取文档根元素(``,操作根节点首选) | `const html = document.documentElement;` | -| document.body | 获取``元素 | `document.body.style.background = '#f5f5f5';` | -| document.head | 获取``元素 | `const meta = document.head.querySelector('meta[name="viewport"]');` | -| document.title | 获取 / 设置页面标题(``内容) | `document.title = '新标题';` | -| document.URL | 获取当前文档完整 URL(只读) | `console.log(document.URL);` | -| document.domain | 获取当前文档域名(只读,部分场景可设置) | `console.log(document.domain);` | -| document.readyState | 文档加载状态(loading/interactive/complete) | `if (document.readyState === 'complete') { /* 加载完成 */ }` | -| document.activeElement | 获取当前获焦元素 | `console.log(document.activeElement.tagName);` | - -## 二、选择器方法(获取 DOM 元素) - -| 方法名 | 说明 | 示例 | -| --------------------------------- | ------------------------------------------- | -------------------------------------------------------- | -| getElementById(id) | 通过 ID 获取单个元素(无则 null) | `const box = document.getElementById('box');` | -| querySelector(selector) | 通过 CSS 选择器获取第一个匹配元素 | `const btn = document.querySelector('.btn');` | -| querySelectorAll(selector) | 通过 CSS 选择器获取所有匹配元素(NodeList) | `const items = document.querySelectorAll('.list-item');` | -| getElementsByClassName(className) | 通过类名获取元素(HTMLCollection,动态) | `const boxes = document.getElementsByClassName('box');` | -| getElementsByTagName(tagName) | 通过标签名获取元素(HTMLCollection,动态) | `const divs = document.getElementsByTagName('div');` | -| getElementsByName(name) | 通过 name 属性获取元素(NodeList) | `const inputs = document.getElementsByName('username');` | - -## 三、节点创建 / 添加 / 删除(DOM 操作) - -| 方法名 | 说明 | 示例 | -| ------------------------------ | --------------------------------------- | ------------------------------------------------------------ | -| createElement(tagName) | 创建新元素节点 | `const p = document.createElement('p'); p.textContent = '新段落';` | -| createTextNode(text) | 创建文本节点 | `const textNode = document.createTextNode('Hello');` | -| createAttribute(name) | 创建属性节点 | `const attr = document.createAttribute('data-id'); attr.value = '123';` | -| appendChild(child) | 向父节点末尾添加子节点(parent 为元素) | `document.body.appendChild(p);` | -| insertBefore(newNode, refNode) | 在参考节点前插入新节点 | `document.body.insertBefore(p, document.body.firstChild);` | -| removeChild(child) | 删除父节点下的子节点 | `document.body.removeChild(p);` | -| replaceChild(newNode, oldNode) | 替换父节点下的子节点 | `document.body.replaceChild(p, document.body.firstChild);` | - -## 四、文档信息与设置 - -| 属性 / 方法名 | 说明 | 示例 | -| ------------- | --------------------------------------- | ------------------------------------- | -| characterSet | 获取文档字符编码(如 UTF-8) | `console.log(document.characterSet);` | -| dir | 获取 / 设置文本方向(ltr/rtl) | `document.dir = 'ltr';` | -| lastModified | 获取文档最后修改时间(字符串) | `console.log(document.lastModified);` | -| defaultView | 获取关联的 window 对象(等价于 window) | `const win = document.defaultView;` | - -## 五、事件处理 - -| 方法名 | 说明 | 示例 | -| ---------------------------------- | ----------------------------------------- | ------------------------------------------------------------ | -| addEventListener(type, handler) | 为文档添加事件监听 | `document.addEventListener('click', () => console.log('点击文档'));` | -| removeEventListener(type, handler) | 移除事件监听(需与添加时的 handler 一致) | `const handler = () => {}; document.removeEventListener('click', handler);` | -| dispatchEvent(event) | 触发自定义事件 | `const customEvt = new Event('custom'); document.dispatchEvent(customEvt);` | -| DOMContentLoaded 事件 | DOM 解析完成(无需等待资源) | `document.addEventListener('DOMContentLoaded', () => console.log('DOM 就绪'));` | -| load 事件 | 页面所有资源加载完成 | `document.addEventListener('load', () => console.log('页面加载完成'));` | - -## 六、Cookie 操作 - -| 属性 / 方法名 | 说明 | 示例 | -| --------------- | ---------------------------------- | ------------------------------------------------------------ | -| document.cookie | 获取 / 设置 Cookie(键值对字符串) | `// 设置:有效期1小时,全站生效``document.cookie = 'username=zhangsan; max-age=3600; path=/';``// 获取``console.log(document.cookie);` | - -## 七、其他常用功能 - -| 方法名 | 说明 | 示例 | -| ---------------------- | -------------------------------------------- | ------------------------------------------------------------ | -| write(text) | 向文档写入内容(加载后调用会覆盖文档) | `document.write('Hello');` | -| writeln(text) | 写入内容并换行(等价于 write (text + '\n')) | `document.writeln('第一行');` | -| cloneNode(deep) | 克隆文档节点(deep=true 深克隆) | `const clone = document.documentElement.cloneNode(true);` | -| importNode(node, deep) | 从其他文档导入节点到当前文档 | `const iframeDoc = iframe.contentDocument; const node = document.importNode(iframeDoc.body, true);` | - -## 重要备注 - -1. **HTMLCollection vs NodeList**:HTMLCollection 是动态集合(DOM 变化自动更新),NodeList 除 `querySelectorAll` 返回静态外,其余(如 `getElementsByName`)为动态; -2. 避免滥用 `document.write`:页面加载完成后调用会覆盖整个文档,且性能较差; -3. **DOMContentLoaded vs load**:前者仅等待 DOM 解析完成,后者需等待图片、样式等所有资源加载; -4. Cookie 安全:设置时建议添加 `secure`(仅 HTTPS)、`SameSite`(防止 CSRF)属性。 \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251204\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251204\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index cc468fe78f9561562a4d442676dd774117eee64b..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251204\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,39 +0,0 @@ -# DOM 节点速查表 - -## 一、核心节点属性 - -| 属性名 | 说明 | -| --------------- | ---------------------------------------- | -| nodeName | 节点的名称 | -| nodeValue | 节点的值(通常仅用于文本节点) | -| nodeType | 节点的类型(修正原拼写错误:nodeTyep) | -| parentNode | 返回当前节点的父节点 | -| childNodes | 返回当前节点的所有子节点列表(NodeList) | -| firstChild | 返回当前节点的第一个子节点 | -| lastChild | 返回当前节点的最后一个子节点 | -| previousSibling | 返回当前节点的前一个兄弟节点 | -| nextSibling | 返回当前节点的后一个兄弟节点 | -| attributes | 返回元素节点的属性列表(NamedNodeMap) | - -## 二、节点操作方法 - -| 操作类型 | 语法 | 说明 | -| -------- | -------------------------- | ------------------------------------------------------------ | -| 追加节点 | obj.appendChild(newChild) | 向 obj 节点末尾追加新子节点 newChild | -| 插入节点 | obj.insertBefore(new, ref) | 在 obj 节点的 ref 子节点**之前**插入 new 节点 | -| 复制节点 | obj.cloneNode(deep) | 复制 obj 节点;deep=true:深拷贝(含所有子节点);deep=false:浅拷贝(仅当前节点) | -| 删除节点 | obj.removeChild(oldChild) | 从 obj 节点中删除子节点 oldChild | -| 替换节点 | obj.replaceChild(new, old) | 用 new 节点替换 obj 节点下的 old 子节点 | - -## 三、文档元素获取 - -| 获取方式 | 语法 | 说明 | -| -------- | ----------------------------------------- | ------------------------------------------------------------ | -| 通过 ID | document.getElementById("userId") | 获取文档中匹配指定 ID 的**单个**元素(ID 唯一) | -| 通过类名 | document.getElementsByClassName("userId") | 获取文档中匹配指定类名的**元素集合**(HTMLCollection)(修正原拼写错误:缺少 s) | - -### 补充说明 - -1. `childNodes`/`getElementsByClassName` 返回的是**动态集合**,文档结构变化会自动更新; -2. `firstChild`/`lastChild` 可能获取到文本节点(如换行、空格),需结合 `nodeType` 过滤(元素节点 `nodeType=1`); -3. `getElementById` 是 `document` 专属方法,无法通过普通元素节点调用。 \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 14945abcd068ce76726edb63d2ee8458f1330ae1..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,52 +0,0 @@ -# 笔记 - -## 一、DHTML 内容替换属性 - -| 属性名 | 语法示例 | 核心说明 | -| --------- | ---------------------------------- | ---------------------------------------------------- | -| innerHTML | `element.innerHTML = "新内容"` | 替换元素内容(支持 HTML 标签,会解析标签并渲染) | -| innerText | `element.innerText = "纯文本内容"` | 仅操作元素的纯文本内容(忽略 HTML 标签,只显示文本) | -| outerHTML | `element.outerHTML = "新元素"` | 替换元素本身(含标签)+ 内容,原元素会被移除 | -| outerText | `element.outerText = "替换文本"` | 将元素本身替换为纯文本节点,原元素被移除 | - -## 二、Window 对象核心特性 - -### 2.1 常用属性 - -| 属性名 | 简化写法 | 语法 / 用途 | 说明 | -| ------------------ | --------- | ------------------------------------------ | ----------------------------------------- | -| window.document | document | `window.document` | 指向窗口载入的 DOM 文档,DOM 操作核心入口 | -| window.location | location | `window.location.href = "https://xxx.com"` | 获取 / 设置当前窗口的 URL(地址) | -| window.navigator | navigator | `window.navigator.userAgent` | 返回浏览器信息(版本、内核、设备等) | -| window.screen | screen | `window.screen.width` | 屏幕对象引用,含屏幕分辨率、色深等信息 | -| window.innerHeight | - | `let h = window.innerHeight` | 浏览器窗口内部高度(含滚动条,不含边框) | -| window.innerWidth | - | `let w = window.innerWidth` | 浏览器窗口内部宽度(含滚动条,不含边框) | - -### 2.2 常用方法 - -| 方法名 | 语法示例 | 说明 | -| ----------------- | ---------------------------------------------------- | -------------------------------------------------------- | -| window.open() | `window.open("url", "name", "width=300,height=200")` | 打开新窗口,可指定 URL、窗口名、尺寸参数 | -| window.close() | `window.close()` | 关闭当前窗口(仅对脚本打开的窗口有效,浏览器有安全限制) | -| window.resizeTo() | `window.resizeTo(800, 600)` | 将窗口调整为**绝对尺寸**(宽 800px,高 600px) | -| window.resizeBy() | `window.resizeBy(100, 50)` | 相对当前尺寸调整窗口(宽 + 100px,高 + 50px) | -| window.moveTo() | `window.moveTo(100, 200)` | 将窗口移动到屏幕**绝对坐标**(x=100px,y=200px) | -| window.moveBy() | `window.moveBy(50, 30)` | 相对当前位置移动窗口(x+50px,y+30px) | -| window.alert() | `window.alert("提示信息")` | 显示无交互提示框(仅 “确定” 按钮) | -| window.confirm() | `let res = window.confirm("确认操作?")` | 显示确认框(返回布尔值:确认 = true / 取消 = false) | -| window.prompt() | `let val = window.prompt("输入内容", "默认值")` | 显示输入框(返回输入值,取消则返回 null) | - -### 2.3 事件处理方法 - -| 方法名 | 语法示例 | 说明 | -| ---------------------------- | ---------------------------------------- | ------------------------------------------------- | -| window.addEventListener() | `window.addEventListener("load", fn)` | 为 window 注册指定事件的处理器(支持冒泡 / 捕获) | -| window.removeEventListener() | `window.removeEventListener("load", fn)` | 移除已注册的事件监听器(需与注册时函数引用一致) | - -### 2.4 其他核心特性 - -| 特性名 | 简化写法 | 语法 / 用途 | 说明 | -| --------------------- | -------------- | ---------------------------------------- | ----------------------------------------------- | -| window.history | history | `history.back()` / `history.go(-1)` | 操作浏览器历史记录(后退、前进、跳转) | -| window.localStorage | localStorage | `localStorage.setItem("key", "value")` | 本地存储(永久保存,除非手动清除,跨会话) | -| window.sessionStorage | sessionStorage | `sessionStorage.setItem("key", "value")` | 会话存储(仅当前窗口 / 标签页有效,关闭则清除) | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 7278c241f5ab45b028e8b6fb428bd5368d1c1e38..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,62 +0,0 @@ -# 笔记 - -## 浏览器对象模型 - -### location对象 - -提供当前对象窗口中加载文档的信息,以及导航功能 - -| 属性 | 说明 | -| --------- | ---------------------------------------------- | -| href: | 设置或返回完整的URL。 | -| protocol: | 设置或返回URL的协议部分(例如http:或https:)。 | -| host: | 设置或返回URL的主机名和端口号。 | -| hostname: | 设置或返回URL的主机名。 | -| port: | 设置或返回URL的端口号。 | -| pathname: | 设置或返回URL的路径部分。 | -| search: | 设置或返回URL的查询部分(从问号?开始)。 | -| hash: | 设置或返回URL的锚部分(从井号#开始)。 | - -### location对象的方法 - -1. assign()方法 - - 用于跳转到新的页面 -2. reload() - - 用于重新载入当前页面 - -### navigator对象 - -| 属性 | 说明 | -| ------------- | ------------------------ | -| appCodeName | 获取浏览器代码名 | -| userAgent | 获取浏览器的整体信息 | -| appName | 获取浏览器名称 | -| appVersion | 获取浏览器的版本号 | -| platform | 获取当前计算机的操作系统 | -| cookieEnabled | 判断是否启用Cookies | - -### screen对象 - -| 属性 | 说明 | -| ------------ | ------------------------------------------ | -| availHeight: | 返回屏幕的高度(不包括 Windows 任务栏)。 | -| availWidth: | 返回屏幕的宽度(不包括 Windows 任务栏)。 | -| colorDepth: | 返回目标设备或缓冲器上的调色板的比特深度。 | -| height: | 返回屏幕的总高度。 | -| pixelDepth: | 返回屏幕的颜色分辨率(每像素的位数)。 | -| width: | 返回屏幕的总宽度。 | - -### history对象 - -| 属性 | 说明 | -| -------- | ------------------- | -| length | 历史列表中的URL数量 | -| current | 当前文档的URL | -| next | 历史列表的下一个URL | -| previous | 历史列表的前一个URL | - -| 方法 | 说明 | -| --------- | -------------- | -| back() | 退回前一页 | -| forward() | 重新进入下一页 | -| go() | 进入指定的网页 | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 02998eae29a5f204b5d7d4eb9c4f2faac03bd7ad..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,28 +0,0 @@ -# Style 对象核心属性速查表 - -## 一、Style 对象基础使用 - -| 核心语法 | 说明 | 示例 | -| ------------------------------------------ | ------------------------------------------------------------ | ---------------------------------------------------- | -| document.getElementById ("id").style. 属性 | 通过 DOM 元素获取 Style 对象,修改元素**行内 CSS 样式**(优先级高于外部 / 内部样式) | document.getElementById("box").style.color = "#333"; | - -## 二、颜色与背景属性 - -| 属性名 | 语法示例 | 核心说明 | -| -------------------- | ---------------------------------------------- | ------------------------------------------------------------ | -| backgroundColor | `elem.style.backgroundColor = "#f00"` | 设置元素背景颜色(支持十六进制、RGB/RGBA、颜色名、HSL 等格式) | -| color | `elem.style.color = "rgb(255,255,255)"` | 设置元素文本颜色(支持所有合法颜色值格式) | -| backgroundImage | `elem.style.backgroundImage = "url('bg.png')"` | 设置背景图片,需通过`url()`指定图片路径(支持相对 / 绝对路径、base64) | -| backgroundPosition | `elem.style.backgroundPosition = "center top"` | 设置背景图片位置(支持关键字:center/top/bottom/left/right;像素 / 百分比) | -| backgroundRepeat | `elem.style.backgroundRepeat = "no-repeat"` | 背景图片平铺方式:repeat(默认,全平铺)repeat-x(水平)repeat-y(垂直)no-repeat(不平铺) | -| backgroundAttachment | `elem.style.backgroundAttachment = "fixed"` | 背景图片滚动行为:fixed(固定,不随滚动条滚动)scroll(随内容滚动) | - -## 三、定位相关属性 - -| 属性名 | 语法示例 | 核心说明 | -| ---------- | ---------------------------------------------- | ------------------------------------------------------------ | -| clip | `elem.style.clip = "rect(0, 100px, 100px, 0)"` | 仅对`position: absolute`的元素生效,设置可视区域(超出部分透明);语法:rect (上,右,下,左) | -| top | `elem.style.top = "20px"` | 定位元素上边界位置,需配合`position`(absolute/relative/fixed/sticky)生效 | -| left | `elem.style.left = "50%"` | 定位元素左边界位置,需配合`position`属性生效 | -| paddingTop | `elem.style.paddingTop = "15px"` | 设置元素**顶部内边距**(盒模型属性,非定位属性,与父 / 子元素位置相关) | -| position | `elem.style.position = "relative"` | 元素定位方式:static(默认,无定位)relative(相对自身原位置)absolute(相对最近定位父级)fixed(相对视口)sticky(粘性定位,滚动阈值后固定) | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 10ca1eed19083a416e285d174a2d26d1d9a409da..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,21 +0,0 @@ - - -## Form对象 - -### js访问表单 - -1. document.forms[] 按编号进行访问 -2. document.formname 按名称进行访问 -3. document.getElementById("") 定位访问表单 - -### Form对象的属性,方法与事件 - -| 属性 | 说明 | -| -------- | ---------------------------------------------------- | -| name | 返回或设置表单的名称 | -| action | 返回或设置表单提交的URL | -| method | 返回或设置表单提交的方式,可取值为get或post | -| encoding | 返回或设置表单信息提交的编码方式 | -| id | 返回或设置表单的id | -| target | 返回或设置提交表单时目标窗口的打开方式 | -| elements | 返回表单对象中的元素构成的数组,数组中的元素也是对象 | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251212\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251212\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 10ca1eed19083a416e285d174a2d26d1d9a409da..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251212\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,21 +0,0 @@ - - -## Form对象 - -### js访问表单 - -1. document.forms[] 按编号进行访问 -2. document.formname 按名称进行访问 -3. document.getElementById("") 定位访问表单 - -### Form对象的属性,方法与事件 - -| 属性 | 说明 | -| -------- | ---------------------------------------------------- | -| name | 返回或设置表单的名称 | -| action | 返回或设置表单提交的URL | -| method | 返回或设置表单提交的方式,可取值为get或post | -| encoding | 返回或设置表单信息提交的编码方式 | -| id | 返回或设置表单的id | -| target | 返回或设置提交表单时目标窗口的打开方式 | -| elements | 返回表单对象中的元素构成的数组,数组中的元素也是对象 | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251215\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251215\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 2a8935b8a72ace1504b6ec828420e134a6bf31c2..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251215\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,25 +0,0 @@ - - -# jQuery 基础速查表 - -| 分类 | 语法 / 方法 | 说明 | 示例 | -| ------------- | ------------------------------ | ------------------------------------ | ---------------------------------------------- | -| 📌 jQuery 基础 | `` | 引入 jQuery 库(建议放 body 结束前) | 放在``前引入 | -| | `$` | jQuery 的入口(是方法 / 对象) | 用`$`调用 jQuery 能力 | -| | `$('选择器')` | 获取 jQuery 对象(≠原生 DOM 对象) | `let $div = $('div')` | -| | `$jq对象[0]` | jQuery 对象转原生 DOM 对象 | `$div[0]`(得到原生 div 节点) | -| | `$(原生DOM对象)` | 原生 DOM 对象转回 jQuery 对象 | `$($div[0])` | -| 🔍 基础选择器 | `$('标签名')` | 标签选择器 | `$('p')`(选所有 p 标签) | -| | `$('.类名')` | 类选择器 | `$('.box')`(选所有 class 为 box 的元素) | -| | `$('#id名')` | ID 选择器(页面唯一) | `$('#btn')`(选 id 为 btn 的元素) | -| 🔗 关系选择器 | `$('父 子')` | 子代选择器(父元素下所有子元素) | `$('ul li')`(选 ul 下所有 li) | -| | `$('父>子')` | 直接子代选择器(父元素的直接子元素) | `$('ul>li')`(选 ul 的直接子 li) | -| | `$('元素~兄弟')` | 兄弟选择器(元素后的所有兄弟) | `$('li~li')`(选 li 后的兄弟 li) | -| | `$('元素+相邻兄弟')` | 相邻兄弟选择器(元素后的第一个兄弟) | `$('li+li')`(选 li 的下一个兄弟 li) | -| 🛠️ 高级选择器 | `$('[属性]')` | 属性选择器 | `$('[data-id]')`(选带 data-id 属性的元素) | -| | `$(':伪类')` | 伪类选择器 | `$('li:even')`(选偶数位置的 li) | -| | `$('::伪元素')` | 伪元素选择器 | `$('p::before')`(选 p 的 before 伪元素) | -| 🎯 事件处理 | `$jq.on('click',function(){})` | 绑定事件 | `$btn.on('click', ()=>{alert('点击了')})` | -| | `$jq.click(function(){})` | 快捷绑定点击事件 | `$btn.click(()=>{alert('点击了')})` | -| | `$jq.trigger('click')` | 手动触发事件 | `$btn.trigger('click')`(主动触发 btn 的点击) | -| | `$(function(){})` | jQuery 入口函数(DOM 加载后执行) | `$(function(){ $btn.click() })` | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251217\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251217\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 15f062e42264796a563a24e1eb2b640d15e9850a..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251217\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,29 +0,0 @@ - - -# jQuery DOM 操作速查表 - -| 分类 | 方法 / 语法 | 说明 | 极简示例 | -| ----------------- | ------------------------------ | -------------------------------------------- | ----------------------------------------- | -| 🔄 对象转换 | `$(原生DOM)` | 原生 DOM 转 jQuery 对象 | `$(document.getElementById('box'))` | -| | `$jq[0]` / `$jq.get(0)` | jQuery 对象转原生 DOM | `$('div')[0]` | -| 🔍 DOM 查找 | `$('#id')` | ID 选择器(唯一) | `$('#container')` | -| | `$('.class')` | 类选择器(批量) | `$('.content')` | -| | `$('tag')` | 标签选择器 | `$('li')` | -| | `$el.find('selector')` | 查找后代元素(性能优) | `$('#list').find('.item')` | -| | `$el.parent()` | 查找直接父节点 | `$('.content').parent()` | -| | `$el.siblings('selector')` | 查找同级兄弟节点 | `$('.content').siblings('span')` | -| 📝 DOM 创建 / 插入 | `$('')` | 创建 jQuery 元素 | `$('新项')` | -| | `$parent.append($el)` | 尾部插入子元素(最常用) | `$('#list').append($newLi)` | -| | `$parent.prepend($el)` | 头部插入子元素 | `$('#container').prepend($newBtn)` | -| | `$el.after('html/$el')` | 后方插入兄弟元素 | `$('.content').after('后')` | -| ✏️ DOM 修改 | `$el.text('内容')` | 设置 / 获取纯文本(防 XSS) | `$('.content').text('新文本')` | -| | `$el.html('内容')` | 设置 / 获取 HTML 内容(注意 XSS) | `$('.content').html('加粗')` | -| | `$el.attr('key','val')` | 设置 / 获取属性 | `$el.attr('data-id', 123)` | -| | `$el.addClass('className')` | 添加类名 | `$el.addClass('active')` | -| | `$el.removeClass('className')` | 移除类名 | `$el.removeClass('content')` | -| | `$el.css({k:v})` | 设置行内样式(支持多属性) | `$el.css({color:'red', fontSize:'16px'})` | -| 🗑️ DOM 删除 | `$el.remove()` | 删除自身及子节点(常用) | `$('.item').remove()` | -| | `$el.empty()` | 清空子节点(保留自身) | `$('#list').empty()` | -| 🎯 事件绑定 | `$el.click(fn)` | 绑定点击事件(快捷方式) | `$('#btn').click(()=>{/* 操作 */})` | -| | `$el.on('event', fn)` | 通用事件绑定(支持自定义事件) | `$el.on('change', handleChange)` | -| 🚪 入口函数 | `$(function(){})` | DOM 加载完成后执行代码(替代 window.onload) | `$(function(){ $('#btn').click() })` | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251218\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251218\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 2d0c0780a87773d1b1b51a8e211f93578875a41c..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251218\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,13 +0,0 @@ - - -## 异常处理及其动画效果 - -| jQuery 异常处理 | 1 | jQuery 对象.on ('click',function (){})) | -| --------------- | ---- | -------------------------------------------- | -| jQuery 异常处理 | 2 | jQuery 对象.click (function (){})) | -| jQuery 异常处理 | 3 | jQuery 对象.trigger ('click',function (){})) | -| jQuery 异常处理 | 4 | `$(function(){}))` | -| jQuery 动画 | 1 | 基础效果:隐藏、显示、show ()、hide () | -| jQuery 动画 | 2 | 进阶效果:淡出、淡入、fadeIn ()、fadeOut () | -| jQuery 动画 | 3 | 高级效果:animate () | - diff --git "a/\351\231\210\346\226\271\346\227\255/20251219\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251219\347\254\224\350\256\260+\347\273\203\344\271\240.md" deleted file mode 100644 index 10ca1eed19083a416e285d174a2d26d1d9a409da..0000000000000000000000000000000000000000 --- "a/\351\231\210\346\226\271\346\227\255/20251219\347\254\224\350\256\260+\347\273\203\344\271\240.md" +++ /dev/null @@ -1,21 +0,0 @@ - - -## Form对象 - -### js访问表单 - -1. document.forms[] 按编号进行访问 -2. document.formname 按名称进行访问 -3. document.getElementById("") 定位访问表单 - -### Form对象的属性,方法与事件 - -| 属性 | 说明 | -| -------- | ---------------------------------------------------- | -| name | 返回或设置表单的名称 | -| action | 返回或设置表单提交的URL | -| method | 返回或设置表单提交的方式,可取值为get或post | -| encoding | 返回或设置表单信息提交的编码方式 | -| id | 返回或设置表单的id | -| target | 返回或设置提交表单时目标窗口的打开方式 | -| elements | 返回表单对象中的元素构成的数组,数组中的元素也是对象 | \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251110-JavaScript\345\274\225\347\224\250.md" "b/\351\231\210\347\205\234\344\275\263/20251110-JavaScript\345\274\225\347\224\250.md" deleted file mode 100644 index 875ba0153e0dcf8c6ff3b0aab7545a1de222e82a..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251110-JavaScript\345\274\225\347\224\250.md" +++ /dev/null @@ -1,31 +0,0 @@ -## 笔记 -1. JavaScript外部引用js: - - 文件后缀`.js` - - ```html - <script src="./XXX.js"></script> - ``` -2. JavaScript内部引用 - - ```html - <script> - console.log('你好,js!'); - </script> - ``` -## 练习 - -练习1: - -```html - <script> - document.write('千里之行,始于足下。') - </script> -``` -![alt text](image.png) - -练习2: - -```html - <script> - alert('http://www.mingrisoft.com'); - </script> -``` -![alt text](image-1.png) \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251112-\345\237\272\347\241\200.md" "b/\351\231\210\347\205\234\344\275\263/20251112-\345\237\272\347\241\200.md" deleted file mode 100644 index 2c3ba9be374951773a861d1c35b3f069fd51ad60..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251112-\345\237\272\347\241\200.md" +++ /dev/null @@ -1,135 +0,0 @@ -## 笔记 - -一、 数据类型: -1. 数值(number) - - 浮点 - - 特殊值(infinity)、(NaN) - -2. 字符串(string) - - 转义字符 - -3. 布尔型 - -4. 特殊数据类型 - - 未定义值 - - 空值 - -二、 常量变和量 - -三、运算符 -1. 算数运算符 - - b=a++(先加) - - b=--a(先减) -2. 比较运算符 - - == - - === -3. 赋值运算符 - - a+=b - - -## 练习 - -训练1: -```html - <script> - let x= 8848.86; - document.write(x+"m"); - </script> -``` - -训练2: -```html - <script> - document.write("E:\/JavaScript\\Code\\demo"); - </script> -``` - -训练3: -```html - <script> - let x=17100000; - document.write(x+"km"); - </script> -``` - -训练4: -```html - <script> - var name = "郭靖"; - var sex = "男"; - var age = 20; - var height = 1.77 - document.write("个人信息"); - document.write("</br>姓名:"); - document.write(name); - document.write("</br>性别:"); - document.write(sex); - document.write("</br>年龄:"); - document.write(age); - document.write("</br>身高:"); - document.write(height); - document.write("</br>武功:九阴真经、降龙十八掌"); - </script> -``` - -训练5: -```html - <script> - let Deposityear = 3; - let annualInterestRate=0.0275; - let momey = 100000; - document.write(momey+momey*annualInterestRate*Deposityear); - </script> -``` - -训练6: -```html - <script> - document.write(65>60); - </script> -``` - -训练7: -```html - <script> - let longTOp = 30; - let longBottom = 50; - let height = 30; - document.write((longTOp+longBottom)*height/2); - </script> -``` - -综合练习1: -```html - <script> - document.write("<pre>"); - document.write("他强任他强,清风拂山岗\n他横任他横,明月照大江\n他自狠来他自恶,我自一口真气足\n\b\b\b\b\b\b\b——《九阳神功》"); - document.write("</pre>") - </script> -``` - -综合练习2: -```html - <script> - let a = 6500; - let b = 500; - let c = 5000; - let d = 0.03; - var x= (a-b)-((a-b-c)*d); - document.write("该员工的实际收入为"+x+"元"); - </script> -``` - -综合练习3: -```html - <script> - var myDate = new Date(); - myDate.setFullYear(2024,1,29); - const day = ('0' + myDate.getDate()).slice(-2); - if(day==29){ - alert("2024年2月有"+day+"天"); - }else{ - alert("2024年2月没有"+day+"天"); - } - </script> -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251113-\350\277\220\347\256\227\347\254\246.md" "b/\351\231\210\347\205\234\344\275\263/20251113-\350\277\220\347\256\227\347\254\246.md" deleted file mode 100644 index c2a5e83f25d68440a4d7c12da3c4d9a0b16ed567..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251113-\350\277\220\347\256\227\347\254\246.md" +++ /dev/null @@ -1,11 +0,0 @@ -## 笔记 - -一、 逻辑运算 - -二、 条件运算 - -三、 typeof运算符 - -四、表达式 - -parseInt:转换 \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251114-\347\273\203\344\271\240.md" "b/\351\231\210\347\205\234\344\275\263/20251114-\347\273\203\344\271\240.md" deleted file mode 100644 index 96fe154fb65880196b8a36ce88378c3ab5788682..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251114-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,117 +0,0 @@ -## 练习 - -训练1 -```html - <script> - let n1 = 26; - let n2 = 17; - let n3 = 10; - let n4 = 20; - - let rest = n1; - if (rest > n2) { - rest = n2; - } - if (rest > n3) { - rest = n3 - } - if (rest > n4) { - rest = n4 - } - document.write(rest); - </script> -``` -训练2 -```html - <script> - let k = 56; - if (k >= 0 && k <= 100) { - document.write("空气质量属于良好!"); - } else if (k >= 101 && k <= 200) { - document.write("空气质量属于轻度污染!"); - } else if (k >= 201 && k <= 300) { - document.write("空气质量属于中度污染!"); - } else { - document.write("空气质量属于重度污染!"); - } - </script> -``` -训练3 -```html - <script> - let yue = 11; - switch (yue) { - case 12 && 1 && 2 : - document.write('冬季'); - break; - case 3 && 4 && 5: - document.write('春季'); - break; - case 6 && 7 && 8: - document.write('夏季'); - break; - case 9 && 10 && 11: - document.write('秋季'); - break; - } - </script> -``` - -训练4 -```html - <script> - let gz = 3000; - let gn = 1; - do{ - gz=gz+50; - gn++; - }while(gn<=5); - document.write(gz); - </script> -``` - -训练5 -```html - <script> - let tou = 35; - let jiao = 94; - for (let ji = 0; ji <= tou; ji++) { - let to = tou - ji; - if (2 * to + 4 * ji === 94) { - document.write('兔的数量' + to + '鸡的数量' + ji); - } - } - </script> -``` -训练6 -```html - <script> - let a = 0; - for (let i = 1; i <= 1000; i++) { - if (i % 65 == 0) { - a = a + i; - } else { - continue; - } - } - document.write(a); - </script> -``` -训练7 -```html - <script> - document.write('尚未使用的卡位<br>'); - for (let i = 1; i <= 3; i++) { - for (let j = 1; j <= 3; j++) { - let s; - if (i == 1 && j == 3 || i == 3 && j == 2) { - s=' '; - }else{ - s = `第${i}排第${j}个 `; - document.write(s); - } - } - document.write('<br>'); - } - </script> - ``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251117-\345\276\252\347\216\257\345\207\275\346\225\260\350\260\203\347\224\250.md" "b/\351\231\210\347\205\234\344\275\263/20251117-\345\276\252\347\216\257\345\207\275\346\225\260\350\260\203\347\224\250.md" deleted file mode 100644 index 8c9d6ddb824383fb41b210235c0f1b1a4e8348ee..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251117-\345\276\252\347\216\257\345\207\275\346\225\260\350\260\203\347\224\250.md" +++ /dev/null @@ -1,35 +0,0 @@ -## 笔记 - -1. 循环 - - for() while() do...while() - -2. 判断 - - if if...else if...if else if...if else...else - -3. 循环控制 - - return - - - conntent - - -## 练习 - -训练1: -```html - <script> - function address(sheng,shi,qu,xxdz){ - document.writeln(sheng+"省 "+shi+"市 "+qu+"区 "+xxdz); - } - address("福建","龙岩","新罗","xxxxx"); - </script> -``` - -训练2: -```html - <script> - function a(jdz){ - document.writeln(jdz+"的绝对值是:"+Math.abs(jdz)); - } - a(-30); - </script> -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251119-\345\207\275\346\225\260.md" "b/\351\231\210\347\205\234\344\275\263/20251119-\345\207\275\346\225\260.md" deleted file mode 100644 index 789028a66976ca3d38468b495619d8f16bf5f83b..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251119-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,221 +0,0 @@ -## 笔记 - -1. 内置函数: - - parseInt:将字符型转化为整形 - - parseFloat:将字符型转化为浮点型 - - isNaN:判断一个数值是否为NaN - - isFinite:判断一个数值是否为有限 - - eval:求字符串中表达式的值 - - encodeURI():将URI字符串进行编码 - - decodeURI():对已编码的URI字符串进行解码 - -#### 访问属性 -```js -let goods = { - name:"无线", - age:166, - number:3 -} -document.write(goods.name); -document.write(goods.age); -document.write(goods.number); -``` - -#### 添加属性 -```js -let goods = { - name:"无线", - age:166, - number:3 -} - -goods.brand = '罗技' -``` - -#### 删除属性 -```js -let goods = { - name:"无线", - age:166, - number:3 -} - -delete goods.number; -``` - -训练3: -```html - <script> - function sz(a,b){ - if(a>b){ - document.writeln(a+"和"+b+"的大小关系:"+a+"比较大"); - }if(a<b){ - document.writeln(a+"和"+b+"的大小关系:"+b+"比较大"); - }else{ - document.writeln(a+"和"+b+"的大小关系:"+a+"和"+b+"一样大"); - } - } - sz(9,10); - </script> -``` - -训练4: -```html - <script> - function sz(a,b,c){ - let n = a; - if(n>b){ - n=b; - }if(n>c){ - n=c; - } - document.writeln("最小值"+n); - } - sz(16,12,17); - </script> -``` - -训练5: -```html - <script> - function zong(x1, x2, x3) { - let zongx = x1 + x2 + x3; - if (zongx > 500) { - document.writeln("已优惠九折:"+(zongx * 0.9)+"元"); - } else { - document.writeln(zongx + "元 未满500元无法优惠!"); - } - } - zong(199, 156, 165); - </script> -``` - -训练6: -```html - <script> - function zong(a1, a2, a3, a4) { - let zongf = a1 + a2 + a3 + a4; - if (zongf > 550) { - document.writeln("已达到本科线!"); - } else { - document.writeln(zongf + "未达到本科线!"); - } - } - zong(108,115,126,237); - </script> -``` - -训练7: -```html - <script> - let yonghu = "mr"; - let mimma = "mrsoft"; - function denglu(y,m){ - if(y==yonghu || m == mimma){ - document.writeln("登录成功"); - }else{ - document.writeln("登录失败"); - } - } - denglu("mr","mrsoft"); - </script> -``` -训练8: -```html - <script> - let a = 0; - function sum() { - for (let i = 1; i <= 1000; i++) { - if (i % 3 == 0 || i % 5 == 0) { - document.writeln(i + ' '); - a++; - if (a % 7 == 0) { - document.writeln("</br>"); - } - } - } - } - sum(); - </script> -``` - -练习1: -```html - <script> - function nl(age){ - if(age>0&&age<=6){ - alert(age+`为童年`); - }else if(age >= 7 && age <= 17){ - alert(age+`为少年`); - }else if(age >= 18 && age <= 40){ - alert(age+`为青年`); - }else if(age >= 41 && age <= 65){ - alert(age+`为中年`); - }else if(age >= 66){ - alert(age+`为老年`); - } - } - nl(20); - </script> -``` - -练习2: -```html - <script> - function day(year, month) { - let res = 0 - if (year % 4 === 0 || year % 100 != 0 && year % 400 === 0) { - res = 29; - } else { - res = 28; - } - - switch (month) { - case 1, 3, 7, 8, 10, 12: - alert(`${year}年${month}月有31天`); - break; - case 4, 6, 9, 11: - alert(`${year}年${month}月有30天`); - break; - case 2: - alert(`${year}年${month}月有${res}天`); - break; - } - - } - day(2024,6); - </script> -``` - -练习3: -```html - <style> - #tabs,th,td{ - border: 1px solid; - border-collapse:collapse; - width: 500px; - height: 80px; - } - </style> -</head> -<body> - <table id="tabs"> - </table> - - <script> - let tab = () => { - let tabs = document.getElementById('tabs'); - for(let i = 1;i <= 5;i++){ - let th = document.createElement(`tr`); - tabs.appendChild(th); - for(let j = 1;j <= 6;j++){ - let td = document.createElement(`td`); - th.appendChild(td); - } - } - } - tab(); - </script> -</body> - -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251120-\345\257\271\350\261\241.md" "b/\351\231\210\347\205\234\344\275\263/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index 6e5f69049759f737884f9ea3b875b45702293805..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,89 +0,0 @@ -## 笔记 - -1. Math对象 -abs()绝对值 - -2. Date对象 -实现对日期和时间的控制 -let date = new Date(); -let date = new Date(dateVal); -let date = new Date(year,month,date[,hours[,minutes[,seconds[[,ms]]]]]); - -3. Event对象 -Event对象用于描述事件 - - altKey - - ctrlKey - - shiftKey -用于返回事件被触发时按键是否被按下,3个属性都是Boolean类型 - -## 练习 - -训练1 -```html - <script> - let a1 = new Date(2023, 5, 1); - let a2 = new Date(2023, 6, 1); - let sj = a2 - a1; - let h = sj / (1000*60*60); - document.writeln(h); - </script> -``` - -训练2 -```html - <script> - let ks = new Date(); - let js = new Date(2023,6,9); - let sj = js - ks; - let h = Math.ceil(sj/(1000*60*60*24)); - document.writeln(h); - </script> -``` -训练3 -```html - <script> - document.addEventListener('mousedown', function clicks(e) { - if (e.button === 0) { - alert("左键"); - }else if (e.button === 1) { - alert('中间键'); - } else if (e.button === 2) { - alert("右键") - - } else { - alert('未知键'); - } - - }) - </script> -``` - -练习1 -```html - <input type="text" name="" id="a"> - <input type="button" value="生成" onclick="sj()"> - <script> - function sj() { - let s = ' '; - let va = document.getElementById('a').value; - for (i = 1; i <= va; i++) { - s += Math.floor(Math.random() * 10); - } - alert(s); - } - </script> -``` - -练习2 -```html - <script> - let xzsj = new Date(); - let zxxsj = new Date(1996, 6, 9); - let a = xzsj - zxxsj; - let s = a /1000; - let m = s / 60; - let h = m / 60; - let day = Math.floor(h / 24); - document.write(`${day}天 >>> ${Math.floor(h % 24)}小时 >>> ${Math.floor(m % 60)}分 >>> ${Math.floor(s % 60)}秒`); - </script> -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251121-Event\345\257\271\350\261\241\346\225\260\347\273\204.md" "b/\351\231\210\347\205\234\344\275\263/20251121-Event\345\257\271\350\261\241\346\225\260\347\273\204.md" deleted file mode 100644 index 0688704759cd8077543064382769790c2bee4a33..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251121-Event\345\257\271\350\261\241\346\225\260\347\273\204.md" +++ /dev/null @@ -1,41 +0,0 @@ -## 笔记 - -### Event对象 -1. 元素添加事件,event用于调用某个方法: - ```js - document.addEventListener('click', function cl(event) { - event.preventDefault(); - }) - ``` - -2. 属性 - - altKey属性 - - 用于返回是否被按下触发 - - ctrlKey属性 - - 用于返回是否被按下触发 - - shiftKey属性 - - 用于返回是否被按下触发 - - button属性 - - 用于获取事件发生时用户按的鼠标键 - - clientX属性 - - 用于获取鼠标指针在浏览器窗口中的X坐标 - - clientY属性 - -用于获取鼠标指针在浏览器窗口中的Y坐标 - - x属性:用于设置或获取鼠标指针位置相当于position属性 - - y属性:用于设置或获取鼠标指针位置相当于position属性 - -### 数组 - -直接定义数组 let arr = ["0","1"]; - -1. 方法 - - concat() 方法 - - 用于将其他数组连接到当前数组的末尾 - - shift() 方法 - - 用于把数组的第一个元素删除 - - pop() 方法 - - 用于删除并返回数组的最后一个元素 - - push() 方法 - - 用于向数组的末尾添加一个或多个元素 - - unshift() 方法 - - 向数组的头部添加一个或多个元素 \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251124-\346\225\260\347\273\204.md" "b/\351\231\210\347\205\234\344\275\263/20251124-\346\225\260\347\273\204.md" deleted file mode 100644 index 4464bfb1ea3540ee89cf8dad6419c7914af80509..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251124-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,136 +0,0 @@ -## 笔记 - -1. sort():对数组进行排序 - -2. concat():连接数组 - -3. splice():删除数组元素 - -4. charAt():返回字符串中指定位置字符 - -5. indexOf():字符串首次出现的位置 - -## 练习 - -数组训练1 -```html - <script> - let cqrq= [2025,11,24]; - document.writeln("当前日期:"); - document.writeln(cqrq[0]+"年"+cqrq[1]+"月"+cqrq[2]+"日"); - </script> -``` - -训练2 -```html - <script> - let a = [5,7,6,3,9,2]; - let max = a[0]; - for(let i=1;i<a.length;i++){ - if(a[i]>max){ - max=a[i]; - } - } - document.writeln(max); - </script> -``` - -训练3 -```html - <script> - let a = [1,2,3,4,5,6,]; - document.writeln(a.slice(4)); - </script> -``` - -练习1 -```html - <script> - let a = ["长春","昌图西","铁岭西","沈阳北","绥中北","北京"] - document.writeln("途径站:"+a.join(' ')+"</br>"); - - document.writeln("反向站:"+a.reverse().join(' ')) - </script> -``` - -练习2: -```html - -``` - -String -训练1: -```html - <script> - let arr = new Array("《雪山飞狐》", "《连城诀》", "《天龙八部》", "《射雕英雄传》", "《鹿鼎记》", "《笑傲江湖》", "《书剑恩仇录》", "《神雕侠侣》", "《倚天屠龙记》", "《碧血剑》"); - let mz = ''; - for (let i = 0; i < arr.length; i++) { - if (arr[i].length == 6) { - mz += arr[i] + ""; - } - } - document.writeln(mz); - </script> -``` - -训练2: -```html - <script> - // 获取原始数据 - const dataElement = document.querySelector('.phone-number'); - const data = dataElement.textContent; - - // 使用正则表达式匹配包含0431的手机号片段 - // 先按****分割成独立的号码片段 - const numberParts = data.split(/\*{4}/); - - // 筛选出包含0431的片段 - const regex = /0431/; - const matchedNumbers = numberParts.filter(part => regex.test(part)); - - // 显示结果 - const resultElement = document.getElementById('result'); - resultElement.innerHTML = `<p>包含0431的手机号:</p><ul>${matchedNumbers.map(num => `<li>${num}</li>`).join('')}</ul>`; - - // 高亮显示原文本中的匹配项 - const highlightedText = data.replace(/(\d*0431\d*)/g, '<span class="matched">$1</span>'); - dataElement.innerHTML = highlightedText; - </script> -``` - -训练3 -```html - <script> - let qq = "4006****66@qq.com"; - let jq = qq.substr(0,10); - document.writeln(jq); - </script> -``` - -练习1 -```html - <script> - let yx = "abc@sina.com"; - let fh = yx.indexOf("@"); - let d = yx.indexOf("."); - if (fh === 3 && d === 8) { - alert("注册邮箱符合要求!"); - }else{ - alert("不符合要求!"); - } - </script> -``` -练习2 -```html - <script> - let zm = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - alert(zm.split("",6)); - </script> -``` -练习3 -```html - <script> - const number = 13625966; - document.writeln(number.toLocaleString()); - </script> -``` diff --git "a/\351\231\210\347\205\234\344\275\263/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\351\231\210\347\205\234\344\275\263/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index c3d145be066cd29ec0938bfed92ceb38c282fd8f..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,59 +0,0 @@ -## 笔记 - -```html - <script> - let arr = [{},{}]; - console.log(arr); - arr.sort((a, b) => { - return a.score-b.score; - }) - console.log(arr); - </script> -``` - -### 正则表达式 - -- 基础 - - 基本结构 - - /匹配对象模式/ - - 作用 - - 语法 - - RegExp对象 - - String对象的模式匹配方法 - - match()方法 - - 对你字符串进行查找 - - search()方法 - - 查找内容的第一个子字符的位置 - - replace()方法 - - 搜索并替换返回一个字符串 - - split()方法 - - 拆分子字符串所产生的子字符串数组 - -训练1 -```html - -``` -训练2 -```html - -``` -训练3 -```html - -``` -训练4 -```html - -``` -练习1 -```html - -``` -练习2 -```html - -``` -练习3 -```html - -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\350\256\276\345\244\207\344\272\213\344\273\266.md" "b/\351\231\210\347\205\234\344\275\263/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\350\256\276\345\244\207\344\272\213\344\273\266.md" deleted file mode 100644 index c74c733f8df0a85d27e0de7f48dbda6fb2bd98ef..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\350\256\276\345\244\207\344\272\213\344\273\266.md" +++ /dev/null @@ -1,66 +0,0 @@ -## 笔记 - -1. 异常处理: - - try...catch...finally - - try: 尝试执行代码 - - catch: 捕捉异常 - - finally: 最终被处理的关键字 - -2. 设备事件: - - onclick: 鼠标单击事件 - -3. DON事件: - - 冒泡型事件 - - 捕捉型事件 - -`preventDefault()`: 拦“默认动作” - -`stopPropagation()`: 拦“向上冒泡” - -## 练习 - -```html - <script> - function bgsc(ex) { - if (ex.keyCode == 13) { - alert("上传成功!"); - }else{ - alert("上传失败!") - } - } - document.onkeydown=bgsc; - </script> -``` - -第九章练习1 -```html - <label> 输入1-5的数字:</label> - <br> - <input type="text" id="t1"> - <input type="button" value="查找" id="b1" onclick="ff1()"> - <br> - <input type="text" id="t2"> - <script> - function ff1() { - let az = ["A", "B", "C", "D", "E"]; - let yhsr = document.getElementById("t1").value; - if (yhsr >= 1 && yhsr <= 5) { - for (let i = 0; i < az.length; i++) { - if ((i + 1) == yhsr) { - console.log(az[yhsr - 1]); - document.getElementById("t2").value = az[yhsr - 1]; - } - } - }else{ - document.getElementById("t2").value=' '; - try{ - throw new Error("请输入1-5的数"); - }catch(e){ - alert(e); - } - } - - } - - </script> -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251128-\346\212\233\345\207\272\345\274\202\345\270\270.md" "b/\351\231\210\347\205\234\344\275\263/20251128-\346\212\233\345\207\272\345\274\202\345\270\270.md" deleted file mode 100644 index 8767add399c7a200f18c753fc579f9c9b1bfee1f..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251128-\346\212\233\345\207\272\345\274\202\345\270\270.md" +++ /dev/null @@ -1,15 +0,0 @@ -## 笔记 - -第7章综合练习3: -![alt text](image.png) - -```js -try{ - // 拿到表单数据 - // 判断拿到的数据是否符合正则表达式要求 - // 如果不符合,则手动抛出异常 - throw new Error("xxxxx") -}catch(e){ - console.log(e); -} -``` diff --git "a/\351\231\210\347\205\234\344\275\263/20251201-\346\213\226\346\224\276\344\272\213\344\273\266.md" "b/\351\231\210\347\205\234\344\275\263/20251201-\346\213\226\346\224\276\344\272\213\344\273\266.md" deleted file mode 100644 index d25029b4db6622ae6208d61be6c0c3258d24683e..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251201-\346\213\226\346\224\276\344\272\213\344\273\266.md" +++ /dev/null @@ -1,63 +0,0 @@ -## 笔记 - -拖放图片: -![alt text](image.png) -![alt text](image-1.png) - -练习1: -```html - <div id="text" onmouseover="te()" onmouseout="tes()"> - <p>欢迎购买明日科技图书</p> - </div> - - <script> - const element = document.getElementById('text'); - - element.onmouseover = () => { - element.style.color = 'red'; - element.style.fontSize = "20px" - }; - - element.onmouseout = () => { - element.style.color = ''; - element.style.fontSize = "" - }; - </script> -``` -练习2: -```html - <input type="button" id="deng" value="关灯" onclick="cf()"> - <script> - let arr = new Array("black", "white"); - let wz = new Array("开灯", "关灯"); - let n = 0; - let m = 0; - function cf() { - document.body.style.backgroundColor = arr[n]; - n++; - if (n == arr.length) { - n = 0; - } - document.getElementById("deng").value = wz[m] - m++; - if (m == wz.length) { - m = 0; - } - } - </script> -``` - -练习3: -```html - <input type="button" value="测试" id="cs" onclick="css()"> - <script> - let ys = true; - function css() { - let kzys = ys ? "black" : "white"; - let kzys1 = ys ? "white" : "black"; - let bo = document.getElementById("cs").style.backgroundColor = kzys; - let co = document.getElementById("cs").style.color = kzys1; - ys =! ys; - } - </script> -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251203-Document\345\257\271\350\261\241.md" "b/\351\231\210\347\205\234\344\275\263/20251203-Document\345\257\271\350\261\241.md" deleted file mode 100644 index 106e686bfb5d3ad2422ecf4ddad5633486f271bb..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251203-Document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,148 +0,0 @@ -## 笔记 - -1. P194练习2: - - ![alt text](image.png) - - ![alt text](image-1.png) - -2. Document对像: - - 常用方法: - - `getElementById()`:返回指定ID的对象 - - `querySelector()`: 它返回文档中与指定的 CSS 选择器匹配的第一个元素。如果没有找到匹配项,则返回 null - - `createEiement()`:根据指定名称创建元素 - - `appendChild()`:将一个节点(元素)作为最后一个子元素添加到另一个元素中 - -3. 获取单选按钮的值: - - ![alt text](image-2.png) - -训练1: -```html - <div id="di" - style="width: 100px; height: 100px; background-color: red;display: flex; justify-content: center; align-items: center;"> - <input type="button" id="jh" value="交换颜色" onclick="ysjh()" style="color: black;"> - </div> - <script> - let ans = document.getElementById("jh"); - let bjin = document.getElementById("di"); - - function ysjh() { - const btnColor = ans.style.color; - const divBgColor = bjin.style.backgroundColor; - ans.style.color = divBgColor; - bjin.style.backgroundColor = btnColor; - } - </script> -``` - -训练2: -```html - <script> - document.writeln(document.URL); - </script> -``` -训练3: -```html - <input type="text" id="hqwz"> - <input type="button" value="添加" id="tjwz" onclick=" typeText()"><br> - <div id="text-container"></div> - <script> - const container = document.getElementById("text-container"); - let index = 0; - function typeText() { - const text =document.getElementById("hqwz").value; - if (index < text.length) { - container.textContent += text.charAt(index); - index++; - setTimeout(typeText, 100); // 每100毫秒显示一个字符 - } - } - </script> -``` - -综合1 -```html - <select name="menu1" onclick="Fcolor()"> - <option value="">请选择主题</option> - <option value="red">红色</option> - <option value="green">绿色</option> - <option value="black">黑色</option> - </select> - <div id="wzys"> - <h2>李白 《行路难·其一》</h2> - <a> - 金樽清酒斗十千,玉盘珍羞直万钱。<br> - 停杯投箸不能食,拔剑四顾心茫然。<br> - 欲渡黄河冰塞川,将登太行雪满山。<br> - 闲来垂钓碧溪上,忽复乘舟梦日边。<br> - 行路难,行路难,多歧路,今安在?<br> - 长风破浪会有时,直挂云帆济沧海。<br> - </a> - </div> - <script> - function Fcolor() { - let ys = event.target; - document.body.style.backgroundColor = ys.value; - switch (ys.value) { - case "red": - document.getElementById("wzys").style.color = "white"; - break; - case "green": - document.getElementById("wzys").style.color = "yellow"; - break; - case "black": - document.getElementById("wzys").style.color = "green"; - break; - } - } - </script> -``` - -综合2: -```html - <style> - div{ - width: 320px; - height: 200px; - border: 1px solid; - background-image: url('https://ts1.tc.mm.bing.net/th/id/R-C.4d56b0bb212460f21b1e61b0a7616ea3?rik=vFwHBSY4A7wPZg&riu=http%3a%2f%2fexp-picture.cdn.bcebos.com%2f87645f93cee8b0046d8865b879260d9a300ea92e.jpg%3fx-bce-process%3dimage%252Fcrop%252Cx_0%252Cy_0%252Cw_508%252Ch_317%252Fformat%252Cf_auto%252Fquality%252Cq_80&ehk=kOSWUDvknu13Tcb9sfVkMbHYgX2MUu8Yu1p6Lml96DM%3d&risl=&pid=ImgRaw&r=0'); - background-size:cover; - display: none; - } - </style> -<body> - <a href="javascript:void(0);" onclick="fe()">打开图片对话框</a> - <div id="yc"> - <a href="" style="float: right;" onclick="sc()">删除</a> - </div> - <script> - function fe(){ - document.getElementById("yc").style.display="block"; - } - function sc(){ - document.getElementById("yc").style.display="none"; - } - </script> -``` - -综合3 -```html -<style> - img{ - width: 100px; - height: 100px; - } -</style> -<input type="button" value="添加用户头像" onclick="xs()"> -<div id="tp"> -</div> -<script> - let jztp = new Array("./OIP-C.webp","./OIP-C (1).webp","./OIP-C (2).webp") - function xs(){ - for(let i = 0;i<=jztp.length;i++){ - setTimeout(function() { - document.writeln(`<img src="${jztp[i]}">`); - }, (1000*i)); - if(i==2)break; - } - } -</script> -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213DOM\346\246\202\350\277\260.md" "b/\351\231\210\347\205\234\344\275\263/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213DOM\346\246\202\350\277\260.md" deleted file mode 100644 index 2840d142d27645d55eb4e1f60407b6791ccb8dc0..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213DOM\346\246\202\350\277\260.md" +++ /dev/null @@ -1,380 +0,0 @@ -## 笔记 - -p203训练3: -![alt text](image.png) - -1. DOM概述: - - 根节点 - - 父节点 - - 子节点 - - 兄弟节点 - - 叶节点 - - 元素节点 - - 文本节点 - - 元素节点 - -2. 节点属性 - - nodeName:节点名称 - - nodetype:节点类型 - - paerntNode:返回当前节点的父节点 - - firstChild:返回当前节点的第一子节点 - - lastChild:放回当前节点的最后子节点 - -3. 节点 - - 创建节点:`appendChide()` - - 插入节点:`insertBefore()` - - 删除与替换:`removeChild()`,`replaceChild()` - -4. 获取元素 -![alt text](image-1.png) - -训练1 -```html - <input type="text" id="text" placeholder="输入"> - <select name="ss" id="ysxz"> - <option value="">请选择颜色</option> - <option value="red">红色</option> - <option value="yello">黄色</option> - <option value="green">绿色</option> - </select> - <input type="button" value="添加" onclick="yj()"><br> - <div id="sc"></div> - <script> - let text = document.getElementById('text'); - let ysxz = document.getElementById('ysxz'); - let sc = document.getElementById('sc') - function yj(){ - sc.innerText=text.value; - sc.style.color=ysxz.value; - text.value=''; - } - </script> -``` -训练2: -```html - <input type="text" id="tjgq"> - <input type="button" value="添加" id="tj" onclick="tj()"> - <p id="myList"> aaaaaaaaaaaa </p> - <script> - function tj(){ - let srtext = document.getElementById("tjgq").value; - let newNode = document.createElement("p"); - let textNode = document.createTextNode(srtext); - newNode.appendChild(textNode); - const list = document.getElementById("myList"); - list.insertBefore(newNode, list.firstChild); - } - - </script> -``` - -训练3: -```html - <h3>最新电影资讯</h3> - <div id="zx"> - <p class="dy">1.《金蝉脱壳》</p> - <p class="dy">2.《阿甘正传》</p> - <p class="dy">3.《爱乐之城》</p> - <p class="dy">4.《头号玩家》</p> - <p class="dy">5.《疯狂动物城》</p> - </div> - <a>输入影片资讯编号:</a> - <input type="text" id="bh"> - <input type="button" value="删除" onclick="sc()"> - <script> - function sc() { - let ky = document.getElementById('zx'); - let mgdy = ky.querySelectorAll('.dy'); - let scbh = document.getElementById('bh').value; - if (scbh < 1 || scbh < 6) { - let qr = window.confirm("确认删除"); - if (qr == true) { - for (let i = 0; i < mgdy.length; i++) { - if (i == (scbh - 1)) { - ky.removeChild(mgdy[i]); - } - } - } - } else { - alert("没有该编号的电影!") - } - document.getElementById('bh').value=" "; - } - </script> -``` - -训练4: -```html - <style> - .parent-container { - overflow: hidden; - /* 防止父容器溢出 */ - } - - .parent-container ul { - float: left; - /* 设置为浮动元素 */ - margin-right: 20px; - /* 设置间距 */ - } - - /* 清除浮动 */ - .clearfix::after { - content: ""; - display: block; - clear: both; - } - </style> - <div class="parent-container clearfix" id="th"> - <ul> - <li>黄瓜</li> - <li>茄子</li> - <li id="dj">芒果</li> - </ul> - <ul> - <li>西瓜</li> - <li>蜜橘</li> - <li id="tet">萝卜</li> - </ul> - </div> - <input type="button" value="移动" onclick="wzth()"> - <script> - function wzth() { - let liElement = document.getElementById('dj'); - let liValue = liElement.innerText; - let liElement1 = document.getElementById('tet'); - let liValue1 = liElement.innerText; - let para = document.createElement(liValue); - let node = document.createElement(liValue1); - let parent = document.getElementById("th"); - parent.replaceChild(para, node); - } - </script> -``` - -训练5 -```html - <h3>在《倚天屠龙记》中,张三丰是_____派的掌门?</h3> - <input type="radio" id="A" name="xx" value="A">A.少林 - <input type="radio" id="B" name="xx" value="B">B.武当 - <input type="radio" id="C" name="xx" value="C">C.峨眉 - <input type="radio" id="D" name="xx" value="D">D.昆仑 - <input type="button" value="提交答案" onclick="xz()"> - <script> - function xz() { - let userAnswer = document.querySelector('input[name="xx"]:checked')?.value; - let correctAnswer = "B"; - if (!userAnswer) { - alert("请选择答案!"); - return; - } - - if (userAnswer === correctAnswer) { - alert("回答正确!"); - } else { - alert(`回答错误,正确答案是 ${correctAnswer}`); - } - } - </script> -``` - -训练6 -```html - <style> - button { - margin: 10px 0; - padding: 8px 16px; - cursor: pointer; - background-color: #4CAF50; - color: white; - border: none; - border-radius: 4px; - } - button:hover { - background-color: #45a049; - } - a { - font-size: 16px; - color: #0066cc; - } - </style> -</head> -<body> - <a id="myLink" href="https://www.old-example.com">原超链接文本</a> - <button id="modifyBtn">修改</button> - - <script> - const myLink = document.getElementById('myLink'); - const modifyBtn = document.getElementById('modifyBtn'); - modifyBtn.addEventListener('click', function() { - myLink.textContent = '修改后的超链接文本'; - myLink.href = 'https://www.new-example.com'; - }); - </script> -``` - -训练7 -```html - <style> - #imageContainer { - margin-top: 20px; - display: flex; - flex-wrap: wrap; - gap: 10px; - } - #imageContainer img { - width: 200px; - height: 200px; - object-fit: cover; - border: 1px solid #ddd; - border-radius: 8px; - } - button { - margin: 5px; - padding: 8px 16px; - font-size: 14px; - cursor: pointer; - background-color: #4CAF50; - color: white; - border: none; - border-radius: 4px; - } - - button:hover { - background-color: #45a049; - } - #myLink { - display: block; - margin: 10px 0; - font-size: 16px; - color: #0066cc; - } - </style> -</head> -<body> - <h3>动态添加图片与修改超链接</h3> - <button id="addBtn">添加图片</button> - <button id="modifyBtn">修改超链接</button> - <a id="myLink" href="#">原超链接文本</a> - <div id="imageContainer"></div> - - <script> - document.addEventListener('DOMContentLoaded', function() { - const addBtn = document.getElementById('addBtn'); - const modifyBtn = document.getElementById('modifyBtn'); - const myLink = document.getElementById('myLink'); - const imageContainer = document.getElementById('imageContainer'); - - const imageUrl = 'https://picsum.photos/200/200?random=1'; - - addBtn.addEventListener('click', function() { - const newImg = document.createElement('img'); - newImg.src = imageUrl; - newImg.alt = '动态添加的图片'; - imageContainer.appendChild(newImg); - }); - modifyBtn.addEventListener('click', function() { - myLink.textContent = '修改后的超链接文本'; - myLink.href = 'https://www.example.com'; - }); - }); - </script> -``` - -练习1 -```html - <p> - <b id="boldContent">一生只爱一个人</b> - <a href="javascript:void(0)" id="changeLink">将粗体改为斜体</a> - </p> - - <script> - const boldEle = document.getElementById('boldContent'); - const linkEle = document.getElementById('changeLink'); - - linkEle.onclick = function() { - const italicEle = document.createElement('i'); - italicEle.textContent = boldEle.textContent; - boldEle.parentNode.replaceChild(italicEle, boldEle); - this.style.pointerEvents = 'none'; - }; - </script> -``` - -练习2 -```html - <select id="year"> - <option value="2023">2023年</option> - <option value="2024">2024年</option> - <option value="2025">2025年</option> - </select> - <select id="month"> - <option value="1">1月</option> - <option value="2">2月</option> - <option value="3">3月</option> - <option value="4">4月</option> - <option value="5">5月</option> - <option value="6" selected>6月</option> - <option value="7">7月</option> - <option value="8">8月</option> - <option value="9">9月</option> - <option value="10">10月</option> - <option value="11">11月</option> - <option value="12">12月</option> - </select> - <select id="day"></select> - - <script> - const yearSelect = document.getElementById('year'); - const monthSelect = document.getElementById('month'); - const daySelect = document.getElementById('day'); - updateDays(); - yearSelect.addEventListener('change', updateDays); - monthSelect.addEventListener('change', updateDays); - function updateDays() { - const year = parseInt(yearSelect.value); - const month = parseInt(monthSelect.value); - const lastDay = new Date(year, month, 0).getDate(); - daySelect.innerHTML = ''; - for (let i = 1; i <= lastDay; i++) { - const option = document.createElement('option'); - option.value = i; - option.textContent = `${i}日`; - if (i === 1) option.selected = true; - daySelect.appendChild(option); - } - } - </script> -``` - -练习3 -```html - <title>选择表情图片 - - - -
      - 请选择表情: - -
      - 调皮表情 - -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251205-window\345\257\271\350\261\241.md" "b/\351\231\210\347\205\234\344\275\263/20251205-window\345\257\271\350\261\241.md" deleted file mode 100644 index 077670af34bd77abed9490503dd2f098218b2630..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251205-window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,13 +0,0 @@ -## 笔记 - -`outerHTML` - -### Windowz对象 - -1. 属性 - - frames:对话框中显示的文档 - - location:指定当前文档的URL - -2. 方法 - - alet():弹出一个警告对话框 - - confirm():在确认对话框中显示的指定的字符串 \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\351\231\210\347\205\234\344\275\263/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 1f7d615e6f1bbe76c8f094dc7c68224730fda645..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,254 +0,0 @@ -## 笔记 - -### 练习解析: -P216训练2 -![alt text](image.png) - -P222练习2 -![alt text](image-1.png) -![alt text](image-2.png) - -### 浏览器对象模型 - -1. location对象属性 - - href - -2. navigator对象 - - userAgent: 获取浏览器的整体信息 - - platf:获取当前计算机的操作系统 - -3. screen对象 - - width:用户整个屏幕的水平大小 - -### 12章练习 -训练1: -```html - - -``` -训练2: -```html - 用户名: -
      - 密码: -
      - - - -``` -训练3: -```html - - 无法打开 - -``` -训练4: -```html - -``` -训练5: -```html - - - -``` -训练6: -```html - - - - -``` - -练习1: -```html - -``` - -练习2 -```html - -``` - -练习3 -```html - -
      - - -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251210-P263\347\273\203\344\271\240.md" "b/\351\231\210\347\205\234\344\275\263/20251210-P263\347\273\203\344\271\240.md" deleted file mode 100644 index 023ecc895c49a036454324a8453c6016a3380c00..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251210-P263\347\273\203\344\271\240.md" +++ /dev/null @@ -1,126 +0,0 @@ -## 笔记 -![alt text](image.png) - -```html - -
      - -``` - -训练1 -```html -
      XXXXX
      - - -``` -训练2 -```html - -
      - -``` -练习1 -```html - -
      AAAAAA
      -
      BBBBBB
      -
      CCCCCC
      - - -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251211-Form\350\241\250\345\215\225.md" "b/\351\231\210\347\205\234\344\275\263/20251211-Form\350\241\250\345\215\225.md" deleted file mode 100644 index 28f0ad5a0df5c24a197992c0b1bc85b5e5eccec6..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251211-Form\350\241\250\345\215\225.md" +++ /dev/null @@ -1,186 +0,0 @@ -## 笔记 - -### Form表单 -![alt text](image.png) -![alt text](image-1.png) - -## 作业 - -训练1 -```html - 请输入兑换码:
      - - -``` - -训练2 -```html - - - - -``` - -训练3 -```html - - - -

      请选择课程

      - C语言
      - 机械制图
      - 单片机
      - 自动控制
      - 传感器
      - 高等数学
      - 计算机基础
      - Oracle数据库
      - 商务英语
      - PLC设计基础
      -``` - -练习1 -```html - - - -

      单选题:《疯狂赛车》的主场景是?

      - 布格拉皮草
      - 主减速器
      - 金强酒店
      - 艾米卡丹尼服饰
      -
      - -``` - -练习2 -```html -

      请选择您的兴趣爱好:

      - 看电影
      - 听音乐
      - 演奏乐器
      - 打排球
      - 看书
      - 旅游
      -
      - - - - -``` - -练习3 -```html -

      选择地址:

      - - - -``` \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251212-\346\225\260\346\215\256\344\272\244\344\272\222.md" "b/\351\231\210\347\205\234\344\275\263/20251212-\346\225\260\346\215\256\344\272\244\344\272\222.md" deleted file mode 100644 index a53a94e05ca06cfeaba623e50a8201ec12f62394..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251212-\346\225\260\346\215\256\344\272\244\344\272\222.md" +++ /dev/null @@ -1,8 +0,0 @@ -### json - -![alt text](image.png) - -### Fetch Api - -![alt text](image-1.png) -![alt text](image-2.png) \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251215-jQ\345\237\272\347\241\200.md" "b/\351\231\210\347\205\234\344\275\263/20251215-jQ\345\237\272\347\241\200.md" deleted file mode 100644 index 47c29273edefdb237a3ab9478bf76ab12fe69dba..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251215-jQ\345\237\272\347\241\200.md" +++ /dev/null @@ -1,37 +0,0 @@ -## jQuery基础 -### jQuery 基础 - - 是一个js库,为了方便dom操作 - - 和js的引用一样,建议在body结束标签之前引用 - - 使用$来使用jQuery库的能力,$符号实际是一个方法,当然方法在- js中也是一个对象,所以其也有一些属性可以使用 - - jquery获取到的是jQuery,和原生js拿到的dom对象不同,但它们间可以相互转换 - - let div=$('div')拿到jquery对象 - - div[0]拿到dom对象 - - $(div[0])又可以重新转换为jquery对象 -### jQuery 选择器与操作 - - 基础选择器 - - 标签选择器 - - 类名选择器 - - id选择器 - - 关系选择器 - - 子代选择器 - - 直接子代选择器 > - - 兄弟选择器 ~ - - 相邻兄弟选择器 + - - 高级选择器 - - 属性选择器 - - 伪类选择器 -### 伪元素选择器 - - jQuery 事件处理 - - jQuery对象.on('click',function(){}) - - jQuery对象.click(function(){}) - - jQuery对象.trigger('click',function(){}) - - $(function(){}) -### jQuery 动画与效果 - - 基础效果:显示、隐藏 show()、hide()、toggle() - - 进阶效果:淡入、淡出 fadeIn()、fadeOut() - - 高级效果:animate() - - jQuery DOM 操作 - - 新增 append给拿到的元素增加一个下级元素 - - 移除 remove 移除拿到的元素 - - text() 拿到文本内容 ,text('要设置的内容')可以修改纯文本内容 - - html() 拿到包含标签的内容 ,html('要设置的内容')可以修改包含标签的内容 \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251217-jQuery.md" "b/\351\231\210\347\205\234\344\275\263/20251217-jQuery.md" deleted file mode 100644 index f84b4e48a71952e4620f0e836040022a9fb453dc..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251217-jQuery.md" +++ /dev/null @@ -1,25 +0,0 @@ -## 笔记 - -### jQuery - -原生js拿到的结果,通常是dom对象 - -jQuery拿到的结果,通常是jquery对象 - -jquery引用 -`jquery引用必须写在js文件前面` -```html - - -``` - -### jQuery DO操作 -1. 新增 - - append 给拿到的元素增加一个下级元素 -2. 移除 - - remove 移除拿到的元素 - -3. text() - - 拿到文本内容 -4. html() - - 拿到包括标签内容 \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251218-\345\274\202\345\270\270\345\244\204\347\220\206\345\217\212\345\212\250\347\224\273.md" "b/\351\231\210\347\205\234\344\275\263/20251218-\345\274\202\345\270\270\345\244\204\347\220\206\345\217\212\345\212\250\347\224\273.md" deleted file mode 100644 index eaf6c82eb6dae11c531b701d9ad489c28e9d051d..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251218-\345\274\202\345\270\270\345\244\204\347\220\206\345\217\212\345\212\250\347\224\273.md" +++ /dev/null @@ -1,23 +0,0 @@ -## 笔记 - -### jQuery异常处理 - -1. jQuery对象.om('click',function(){}) - -2. jQuery对象.click(function(){}) - -3. jQuery对象.trigger('click',function(){}) - -```html - -``` - -### jQuery动画 - -1. 基础效果:隐藏、显示、show()、hide() - -2. 进阶效果:淡出、淡入、fadein()、fadeQut() - -3. 高级效果:animate() \ No newline at end of file diff --git "a/\351\231\210\347\205\234\344\275\263/20251219-js\345\244\215\344\271\240.md" "b/\351\231\210\347\205\234\344\275\263/20251219-js\345\244\215\344\271\240.md" deleted file mode 100644 index 993c4600f49fad3030ee11e0f410b961c6e6c99d..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\205\234\344\275\263/20251219-js\345\244\215\344\271\240.md" +++ /dev/null @@ -1,63 +0,0 @@ -## 笔记 - -1. 变量、常量和基础数据类型 -- var let定义变量,请忘记var,后续只使用let -- const定义常量,常量名全大写 -- 数据类型 - - 基础数据类型 - - string - - number - - boolean - - underfined - - null - - 复合数据类型 - - 对象 - - 数组 - - 函数 - -2. 运算符和数据类型转换 - - `+` `-` `*` `/` `%` - - 逻辑运算 - - null undefined 0 '' 这些字面量参与逻辑运算时,作为false,其余的值作为true - - 短路运算 true || 表达式 false && 表达式 - - 赋值运算 = += -+ ++ --等 - - parseInt parseFloat 乘1变数字 加空字符串变字符串 - -3. 流程控制 - - 判断 - - if - - if ... else - - if ... else if() - - if ... else if()... else - - switch - - 循环 - - for - - while - - do...while - - 三元运算 - -4. 数组 - - 改变数组本身的方法 - - sort 排序,接受一个比较器 - - push pop 从尾部添加、删除 - - unshift shift 从头部添加、删除 - - splice 万能方法 删除元素、添加元素、修改元素 - - reverse 倒置 - - fill 填充 - - 不改变数组本身的方法 - - concat 拼接数组 - - slice 截取 - - map 将一个函数用在数组的每一个元素上,并将处理后的结果放入新的数组 - - filter 将一个函数用在数组的每个元素上,如果这个元素运算的结果为true,则将元素放入新的数组,反之不放,最终得到新的数组 - - reduce 将一个函数用在数组的前2个元素上,计算后的结果作为同一个函数第一个参数和数组的第三元素作为第二参数进行运算 - - forEach 遍历 - - find 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素,否则最终返回undefined - - findIndex 将一个函数作用在数组的每一个元素上,返回true,则返回这个元素下标,否则最终返回undefined - - every - - some - - includes - - indexOf - - lastIndexOf - - join - - 高阶函数 - - 一个函数f,接受另外一个函数作为其参数,则称函数f为高阶函数 \ No newline at end of file diff --git "a/\351\231\210\347\276\275\346\230\237/20251110-js\345\210\235\346\255\245.md" "b/\351\231\210\347\276\275\346\230\237/20251110-js\345\210\235\346\255\245.md" deleted file mode 100644 index 0b11de755a9e9218288a309f70a54697a34653db..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251110-js\345\210\235\346\255\245.md" +++ /dev/null @@ -1,89 +0,0 @@ -# 课堂笔记 -1. 定义 -JavaScript 是一门运行在浏览器中的脚本语言(无需编译,直接执行),专门用于实现网页的交互功能和动态效果。 -2. 核心作用(网页三剑客分工) -HTML:负责网页的结构(骨架,如按钮、文本框、段落) -CSS:负责网页的样式(外观,如颜色、大小、布局) -JS:负责网页的行为(交互,如点击按钮、显示内容、获取路径) -3. 常见应用场景 -按钮点击事件(如显示内容、清屏、跳转) -动态修改网页内容 / 样式 -获取用户输入或网页信息(如当前 URL) -表单验证(如判断输入是否合法) -三、JS 与 HTML 的结合方式(重点) -最常用的两种方式,优先掌握「内部脚本」: -1. 内部脚本(写在 HTML 文件中) -```html - - - - - - - -``` - -2. 外部脚本(单独的 .js 文件) -将 JS 代码写在单独的 .js 文件中(如 index.js),通过 - -``` - - -# 练习 -第一题 -```html - -
      -

      -
      - - - - -``` - -第二题 -```html - -
      - -
      - - -``` diff --git "a/\351\231\210\347\276\275\346\230\237/20251112-\345\217\230\351\207\217.md" "b/\351\231\210\347\276\275\346\230\237/20251112-\345\217\230\351\207\217.md" deleted file mode 100644 index 8b4752ddbf886003e9e4c305f6295021779c56fe..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251112-\345\217\230\351\207\217.md" +++ /dev/null @@ -1,206 +0,0 @@ -# 课堂笔记 -1. 变量(Variable)​ -定义:程序运行过程中,值可以被修改的存储容器,用于存储不确定、会变化的数据(如用户输入、计算结果等)。​ -核心特征:可重复赋值,灵活性高。​ -生活类比:一个可反复存放不同物品的盒子。​ -2. 常量(Constant)​ -定义:程序运行过程中,值一旦定义就不能修改的存储容器,用于存储固定不变的数据(如 π 值、固定配置等)。​ -核心特征:不可重复赋值,定义时必须初始化(赋值)。 - -| 对比维度 | 变量(let/var) | 常量(const) | -| ---------- | -------------------------------- | ------------------------------ | -| 赋值次数 | 可多次赋值 | 仅一次(定义时) | -| 初始化要求 | 可选(let/var 可先声明后赋值) | 必须(定义时必须赋值) | -| 作用域 | let:块级;var:函数 / 全局 | 块级 | -| 适用数据 | 变化的数据(如计数器、用户输入) | 固定的数据(如配置项、常量值) | - -1.本地路径 -```html - -
      - -
      - - - -``` - -2.本息合计 -```html - - -
      -
      -        请输入您的本金
      -        请输入利率
      -        请输入年限
      -        您的本息合计为
      -    
      - - - - -
      - - -``` -3.九阳神功 -```html - -
      - -
      - - - -``` - -4.闰年计算 - -```html - -
      - 请输入年份 - - 结果 - - - -
      - - - -``` - - -5.收入计算 - -```html - -
      - 实际收入 - - 实际收入 -
      - - - -``` - - -6.个人信息 -```html - - - - -``` - - -7.土地面积 -```html - - - -``` - -8.珠峰 -```html - - -``` diff --git "a/\351\231\210\347\276\275\346\230\237/20251113-\347\261\273\345\236\213\350\277\224\345\233\236.md" "b/\351\231\210\347\276\275\346\230\237/20251113-\347\261\273\345\236\213\350\277\224\345\233\236.md" deleted file mode 100644 index dfda79f86bbc3183cc16f49c8d5b0297639e257e..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251113-\347\261\273\345\236\213\350\277\224\345\233\236.md" +++ /dev/null @@ -1,190 +0,0 @@ -# 课堂笔记 -typeof 是一元运算符(非函数),但习惯上归为 “类型返回工具”, - -```html -// 原始类型(除 null 外):返回准确类型 -console.log(typeof "hello"); // "string" -console.log(typeof 123); // "number" -console.log(typeof true); // "boolean" -console.log(typeof undefined); // "undefined" -console.log(typeof Symbol()); // "symbol" -console.log(typeof 123n); // "bigint"(ES2020 新增) - -// 特殊:null 返回 "object" -console.log(typeof null); // "object"(注意:不是 "null") - -// 引用类型(除函数外):返回 "object" -console.log(typeof {}); // "object"(普通对象) -console.log(typeof []); // "object"(数组,无法区分) -console.log(typeof new Date()); // "object"(日期对象,无法区分) - -// 函数:返回 "function" -console.log(typeof function(){}); // "function" -console.log(typeof class {}); // "function"(类本质是函数) -``` - - -# 练习 - -1.65倍数之和 -```html - - - - - -``` - - -2.工位 -```html - -
      -
      -
      第一排第1个
      -
      第一排第2个
      -
      第一排第3个
      -
      - -
      -
      第二排第1个
      -
      第二排第2个
      -
      第二排第3个
      -
      - -
      -
      第三排第1个
      -
      第三排第2个
      -
      第三排第3个
      -
      - -
      - - - -``` - -3.电影院 -```html - - - - - - Document - - - - -
      -
      -
      1排1座
      -
      1排2座
      -
      1排3座
      -
      1排4座
      -
      1排5座
      -
      1排6座
      -
      1排7座
      -
      1排8座
      -
      1排9座
      -
      1排10座
      -
      - -
      -
      2排1座
      -
      2排2座
      -
      2排3座
      -
      2排4座
      -
      2排5座
      -
      2排6座
      -
      2排7座
      -
      2排8座
      -
      2排9座
      -
      2排10座
      -
      - -
      -
      3排1座
      -
      3排2座
      -
      3排3座
      -
      3排4座
      -
      3排5座
      -
      3排6座
      -
      3排7座
      -
      3排8座
      -
      3排9座
      -
      3排10座
      -
      - -
      -
      4排1座
      -
      4排2座
      -
      4排3座
      -
      4排4座
      -
      4排5座
      -
      4排6座
      -
      4排7座
      -
      4排8座
      -
      4排9座
      -
      4排10座
      -
      -
      - 排 - 列 - - - - - - - -``` - - diff --git "a/\351\231\210\347\276\275\346\230\237/20251114 \346\235\241\344\273\266\345\210\244\346\226\255.md" "b/\351\231\210\347\276\275\346\230\237/20251114 \346\235\241\344\273\266\345\210\244\346\226\255.md" deleted file mode 100644 index 108c2c3bd1ab1bfaca62c9c4002918ef69d76d30..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251114 \346\235\241\344\273\266\345\210\244\346\226\255.md" +++ /dev/null @@ -1,303 +0,0 @@ -# 课堂笔记 -### 一、核心概念:什么是 if 条件判断? - -- **定义**:if 语句是 JavaScript 中最基础的流程控制语句,用于**根据指定条件的真假,执行不同的代码块**(“条件成立就做 A,不成立就做 B”)。 - -- **本质**:判断一个表达式的结果是 “真(true)” 还是 “假(false)”,进而决定代码的执行路径。 - -- **应用场景**:登录验证、数值比较、状态判断等(例如:“如果用户输入密码正确,就跳转首页;否则提示错误”)。 - -### 二、基础语法格式(重点) - -JavaScript 中 if 条件判断有 4 种核心形式,需牢记语法结构和执行逻辑: - -#### 1. 单 if 语句(满足条件才执行) - -**语法**: - -``` -if (条件表达式) { - // 条件为 true 时执行的代码块(代码块可多行) -} -// 无论条件真假,都会执行这里的代码(不属于 if 块) -``` - -**说明**: - -- 条件表达式必须用 () 包裹,括号内结果会被自动转为布尔值(true/false)。 - -- 代码块用 {} 包裹,若只有一行代码,{} 可省略(不推荐,可读性差)。 - -- **布尔转换规则**:以下值会被转为 false(假值),其余为 true(真值): - -- - false、0、""(空字符串)、null、undefined、NaN - -**示例**:判断年龄是否成年 - -``` -let age = 18; -if (age >= 18) { - console.log("已成年,可独立办理业务"); // 条件为 true,执行该代码 -} -console.log("程序结束"); // 无论条件如何,都会执行 -``` - -#### 2. if-else 语句(二选一执行) - -**语法**: - -``` -if (条件表达式) { - // 条件为 true 时执行的代码块 -} else { - // 条件为 false 时执行的代码块 -} -``` - -**核心逻辑**:两个代码块**互斥**,必然执行且仅执行其中一个。 - -**示例**:判断考试是否及格 - -``` -let score = 75; -if (score >= 60) { - console.log("及格啦,继续加油!"); -} else { - console.log("不及格,需要补考~"); -} -``` - -#### 3. if-else if-else 语句(多条件分支) - -**语法**: - -``` -if (条件1) { - // 条件1 为 true 时执行 -} else if (条件2) { - // 条件1 为 false,且条件2 为 true 时执行 -} else if (条件3) { - // 前两个条件都为 false,且条件3 为 true 时执行 -} else { - // 所有条件都为 false 时执行(可选) -} -``` - -**核心逻辑**:从上到下依次判断条件,**只要有一个条件成立,就执行对应的代码块,后续条件不再判断**(“短路执行”)。 - -**示例**:根据分数评级 - -``` -let score = 88; -if (score >= 90) { - console.log("优秀"); -} else if (score >= 80) { - console.log("良好"); // 条件成立,执行后跳过后续判断 -} else if (score >= 60) { - console.log("及格"); -} else { - console.log("不及格"); -} -``` - -#### 4. 嵌套 if 语句(条件嵌套) - -**语法**:在 if/else 代码块内部,再嵌套一个或多个 if 语句,用于处理 “多层条件”。 - -**示例**:判断是否为 VIP 且余额充足 - -``` -let isVIP = true; -let balance = 200; -let goodsPrice = 150; - -if (isVIP) { // 第一层条件:是否为VIP - if (balance >= goodsPrice) { // 第二层条件:余额是否足够 - console.log("VIP用户,余额充足,下单成功!"); - } else { - console.log("VIP用户,但余额不足,无法下单~"); - } -} else { - console.log("非VIP用户,需升级后享受优惠~"); -} -``` - -**注意**:嵌套层级不宜过多(建议不超过 3 层),否则代码可读性变差,可通过后续学习的 “逻辑运算符” 优化。 - -### 三、关键注意事项(避坑指南) - -1. **条件表达式的常见错误**: - -- - 不要误将 =(赋值运算符)当作 ===(全等判断)!例如:if (a = 5) 会把 5 赋值给 a,永远返回 true,导致逻辑错误。 - -- - 尽量使用 ===(全等)而非 ==(相等),避免隐式类型转换的坑(例如:0 == "" 结果为 true,0 === "" 结果为 false)。 - -1. **代码块的** **{}** **不可省略场景**: - -- - 当 if/else 代码块包含多行代码时,必须用 {} 包裹,否则只有第一行代码受条件控制。 - -- - 示例(错误): - -``` -if (score >= 60) - console.log("及格"); - console.log("继续加油"); // 不受条件控制,无论真假都会执行 -``` - -1. **多条件的优先级**: - -- - 多个条件判断时,注意条件的顺序(例如:判断 “大于 80” 应放在 “大于 60” 前面,否则会被覆盖)。 - -- - 示例(错误): - -``` -let score = 85; -if (score >= 60) { // 先判断及格,85满足,执行后跳过后续 - console.log("及格"); -} else if (score >= 80) { - console.log("良好"); // 永远不会执行 -} -``` - -1. **逻辑运算符的结合使用**: - -- - 简单的多条件可通过 &&(且)、||(或)、!(非)简化,减少嵌套。 - -- - 示例:判断 “年龄 18-30 岁之间” - -``` -// 原写法(嵌套) -if (age >= 18) { - if (age <= 30) { - console.log("青年"); - } -} -// 简化写法(&& 运算符) -if (age >= 18 && age <= 30) { - console.log("青年"); -} -``` - -1.鸡兔同笼 -```html - - - - -``` - -2.季节判断 -```html - - - - - - Document - - - -
      - - -
      - - - - - -```` - - -3.空气质量判断 -```html - - - - - - -4.工资 -``` - - - 请输入您的基本工资 - 请输入您的工龄 - 实际工资 - - - - - -``` \ No newline at end of file diff --git "a/\351\231\210\347\276\275\346\230\237/20251117-\345\207\275\346\225\260.md" "b/\351\231\210\347\276\275\346\230\237/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index 2dbdec9f89075f23c9685887041f01f3704bb188..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,76 +0,0 @@ -# 课堂笔记 -1. 函数 -匿名函数 -```html - -``` - -第一种第一方式 -```html - - - -``` -函数可传入参数 参数外部定义例 -```html - - -``` - -# 作业 -61页训练1 -```html - - -``` -61页训练2 -```html - - -``` diff --git "a/\351\231\210\347\276\275\346\230\237/20251119-\345\207\275\346\225\260.md" "b/\351\231\210\347\276\275\346\230\237/20251119-\345\207\275\346\225\260.md" deleted file mode 100644 index 1042e35cd317dc2417adbe360af629e61d34d2a6..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251119-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,187 +0,0 @@ -# 课堂笔记 - -### 一、函数的本质与作用 - -1. **定义**:函数是一段封装好的、可重复执行的代码块,用于完成特定功能(接收输入、处理逻辑、返回结果)。 - -1. **核心作用**: - -- - 代码复用:避免重复编写相同逻辑 - -- - 模块化:将复杂程序拆分为独立功能单元 - -- - 逻辑抽象:隐藏实现细节,只暴露调用接口 - -### 二、函数的定义方式(4 种核心) - -#### 1. 函数声明(Function Declaration) - -``` -// 语法:function 函数名(参数列表) { 函数体 } -function add(a, b) { - return a + b; // return 语句返回结果,无return则返回undefined -} -``` - -- 特点:存在**函数提升**(可在定义前调用) - -- 示例: - -``` -console.log(add(2,3)); // 5(正常执行,因函数提升) -function add(a, b) { return a + b; } -``` - -#### 2. 函数表达式(Function Expression) - -``` -// 语法:const 变量名 = function(参数列表) { 函数体 }(匿名/具名) -const multiply = function(a, b) { - return a * b; -}; - -// 具名函数表达式(函数名仅在内部可用) -const divide = function calc(a, b) { - return a / b; -}; -``` - -- 特点:无函数提升(必须先定义后调用) - -- 易错点:末尾必须加;(因为是赋值语句) - -#### 3. 箭头函数(Arrow Function,ES6+) - -``` -// 语法:const 变量名 = (参数列表) => { 函数体 } -const subtract = (a, b) => a - b; // 简写:单表达式可省略{}和return - -``` - - -#### 4. 构造函数(Function Constructor) - -``` -const power = new Function('base', 'exponent', 'return base ** exponent'); -console.log(power(2, 3)); // 8 -``` - -- 特点:不推荐使用(代码可读性差,无法被引擎优化) - - -# 课堂练习 -62页训练3 -```html - - -``` - -62页训练4 -```html - -``` - -63页训练5 -```html - - -``` - - -63页训练6 -```html - - ``` - -69页训练7 -```html - -``` -70页练习8 -```html - - -``` \ No newline at end of file diff --git "a/\351\231\210\347\276\275\346\230\237/20251120-\345\257\271\350\261\241.md" "b/\351\231\210\347\276\275\346\230\237/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index dac29baf7418cc66abed422fb0315f542647a671..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,149 +0,0 @@ -# 课堂笔记 - -## 一、对象的本质与作用 - -1. **定义**:对象是一种复合数据类型,用于存储多个相关联的 “键值对”(属性和值的组合),是现实事物在代码中的抽象。 - -2. 核心作用 - - : - - - 统一管理相关数据和功能(比如描述一个人、一个商品) - - 让代码结构更清晰,便于维护 - -## 二、对象的创建方式(2 种基础) - -### 1. 对象字面量(最常用) - -```javascript -// 语法:const 对象名 = { 键1: 值1, 键2: 值2, ... } -const person = { - name: "张三", // 字符串属性 - age: 20, // 数字属性 - isStudent: true, // 布尔属性 - sayHi: function() { // 函数属性(方法) - console.log("你好!"); - } -}; -``` - -- 特点:语法简洁,直接定义,适合一次性创建简单对象 -- 注意:键(属性名)默认是字符串,可省略引号(若不含特殊字符) - -### 2. new Object () 构造函数 - -```javascript -const car = new Object(); -car.brand = "华为"; // 新增属性 -car.price = 200000; -car.run = function() { - console.log("汽车行驶中"); -}; -``` - -# 课堂练习 -89页训练1 -```html - - -``` - - -89页训练2 -```html - - -``` - - - -89页训练3 -```html - - -``` - - -89页综合训练1 - -```html - - - - - - -90页综合训练2 - -```html - - -``` \ No newline at end of file diff --git "a/\351\231\210\347\276\275\346\230\237/20251121-\344\272\213\344\273\266.md" "b/\351\231\210\347\276\275\346\230\237/20251121-\344\272\213\344\273\266.md" deleted file mode 100644 index 0fc576d18866dc8939020bad76a3d87b3cedf150..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251121-\344\272\213\344\273\266.md" +++ /dev/null @@ -1,77 +0,0 @@ -# 课堂笔记 - -## 一、事件的本质与作用 - -1. **定义**:事件是浏览器或用户触发的行为(比如点击按钮、输入文字、页面加载完成)。 -2. **核心作用**:让 JavaScript 实现 “交互功能”,比如点击按钮弹出提示、输入内容实时验证。 - -## 二、常见基础事件(核心) - -| 事件名 | 触发场景 | -| ----------- | -------------------------------- | -| `click` | 鼠标单击元素(按钮、链接等) | -| `input` | 输入框(input/textarea)内容变化 | -| `load` | 页面或图片等资源加载完成 | -| `submit` | 表单(form)提交时 | -| `mouseover` | 鼠标移入元素 | -| `mouseout` | 鼠标移出元素 | - -## 三、事件绑定的 3 种基础方式 - -### 1. HTML 标签属性绑定(最简单) - - - -```html - - - - -``` - - - -### 2. DOM 对象属性绑定 - -通过 JS 获取 DOM 元素,给元素的 `on+事件名` 属性赋值函数: - -```html - - - -``` - -- 特点:JS 代码与 HTML 分离;缺点是同一事件只能绑定一个函数(重复绑定会覆盖)。 - -### 3. addEventListener 绑定(推荐) - - - - -```html - - - -``` - diff --git "a/\351\231\210\347\276\275\346\230\237/20251124-\346\225\260\347\273\204.md" "b/\351\231\210\347\276\275\346\230\237/20251124-\346\225\260\347\273\204.md" deleted file mode 100644 index d01cee5f9aefc3e70082c1b0d21a36b958ddc0f1..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251124-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,299 +0,0 @@ -# 课堂笔记 - - - -# 一、数组的基本概念 - -数组是JavaScript中一种重要的数据结构,用于存储多个数据的集合。数组中的每个数据被称为“元素”,每个元素都有一个对应的“索引”(从0开始),通过索引可以访问和操作元素。 - -注意:JS数组具有动态性,无需预先指定长度,元素类型也可以不同(可以同时包含数字、字符串、对象等)。 - -# 二、数组的创建方式 - -## 2.1 字面量方式(最常用) - -使用方括号 `[]` 包裹元素,元素之间用逗号分隔。 - -```javascript -// 空数组 -const arr1 = []; -// 包含不同类型元素的数组 -const arr2 = [1, "hello", true, { name: "Tom" }]; -// 嵌套数组(二维数组) -const arr3 = [1, [2, 3], 4]; -``` - -## 2.2 构造函数方式 - -使用 `Array()` 构造函数创建数组。 - -```javascript -// 空数组 -const arr4 = new Array(); -// 指定长度的数组(初始元素为undefined) -const arr5 = new Array(5); -// 直接传入元素 -const arr6 = new Array(1, 2, 3); -``` - -# 三、数组的访问与修改 - -## 3.1 访问元素 - -通过“数组名[索引]”的方式访问元素,索引从0开始。 - -```javascript -const arr = [10, 20, 30]; -console.log(arr[0]); // 输出:10(访问第一个元素) -console.log(arr[2]); // 输出:30(访问第三个元素) -console.log(arr[3]); // 输出:undefined(访问不存在的索引) -``` - -## 3.2 修改元素 - -直接通过索引赋值即可修改元素。 - -```javascript -const arr = [10, 20, 30]; -arr[1] = 200; // 将索引为1的元素修改为200 -console.log(arr); // 输出:[10, 200, 30] -``` - -## 3.3 数组长度 - -通过 `length` 属性获取或修改数组长度。 - -```javascript -const arr = [1, 2, 3]; -console.log(arr.length); // 输出:3(获取长度) - -arr.length = 5; // 修改长度为5,新增元素为undefined -console.log(arr); // 输出:[1, 2, 3, undefined, undefined] - -arr.length = 2; // 修改长度为2,删除后面的元素 -console.log(arr); // 输出:[1, 2] -``` - - - -# 课堂练习 -105页训练1 -```html - - -``` - -105页训练2 -```html - - -``` - - -105页训练3 - - -```html - - -``` - - -116页综合实践1 -```html - -``` - - -116页综合实践2 -```html - -``` - - -127页训练1 -```html - -``` - - - - -127页训练2 -```html - -``` - - -128页训练3 -```html - - -``` - -128页综合训练1 -```html - -
      - - -
      - - - - -``` - -128页综合训练2 -```html - - -``` -128页综合训练3 -```html - - -``` \ No newline at end of file diff --git "a/\351\231\210\347\276\275\346\230\237/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\351\231\210\347\276\275\346\230\237/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 7e5a89f4f89eeb8ffca4d10a6b9a43b2bf2e67f5..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,84 +0,0 @@ -# 课堂笔记 -1. test()方法 -返回一个判断值 指出是否存在模式例 -```html - - -``` - -exec() - -exec()方法用于捕获字符串中匹配的内容。返回一个数组,包含匹配的内容、匹配内容的起始索引和原字符串。 -```html -var pattern = /(\d+)(\w+)/; -var result = pattern.exec("123abc"); -console.log(result); // ["123abc", "123", "abc", index: 0, input: "123abc"] -``` -match() - -match()方法用于捕获字符串中所有匹配的内容。返回一个数组,包含所有匹配的内容。 -```html -var str = "1 plus 2 equals 33"; -console.log(str.match(/\d+/g)); // ["1", "2", "33"] -``` -replace() - -replace()方法用于将字符串中匹配的内容替换为指定的字符串或回调函数的返回值。 -```html -var str = "Hello 123"; -var newStr = str.replace(/\d+/g, function(match) { -return parseInt(match) * 2; -}); -console.log(newStr); // "Hello 246" -``` - - -# 课堂笔记 -144页训练1 -```html - - -``` - -144页训练2 -```html - - -``` - -147页训练3 -```html - -``` -147页训练4 - -```html - -``` - diff --git "a/\351\231\210\347\276\275\346\230\237/20251127-\350\260\203\350\257\225.md" "b/\351\231\210\347\276\275\346\230\237/20251127-\350\260\203\350\257\225.md" deleted file mode 100644 index b8f8576d6eaecbeef0ee9f247f5d345b6e6fb60a..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251127-\350\260\203\350\257\225.md" +++ /dev/null @@ -1,146 +0,0 @@ -# 课堂笔记 -常用格式 -```html - try { - function substr() { - let str = "我喜欢"; - let result = str.subsStr(1, 2) - console.log(result); - - } - - substr() - } catch (exception) { - alert("不支持此方法"); - } - - - - - - -``` -可使用throw抛出异常 -```html -throw new error("错误提示") -``` - -# 课堂练习 -155页训练1 -```html - - -``` - - -155页训练2 -```html - - -``` - - -157页综合练习2 -```html - -
      - 用户名 -
      - 密码 -
      - -
      - - - -``` - - - - -157页综合练习1 -```html - -
      - - - -
      - - - - - -``` \ No newline at end of file diff --git "a/\351\231\210\347\276\275\346\230\237/20251128-\344\272\213\344\273\266.md" "b/\351\231\210\347\276\275\346\230\237/20251128-\344\272\213\344\273\266.md" deleted file mode 100644 index 1480d06c8db69a80791be5ec316e4b52b06e620e..0000000000000000000000000000000000000000 --- "a/\351\231\210\347\276\275\346\230\237/20251128-\344\272\213\344\273\266.md" +++ /dev/null @@ -1,213 +0,0 @@ - - -# 课堂笔记 - -## 一、概念:用户与页面交互时触发的行为(如点击、按键),JS通过监听事件执行对应逻辑。 - -**三要素**:事件源(触发事件的元素)、事件类型(如click)、事件处理函数(事件触发后执行的代码)。 - -**绑定方式**: - -- 内联式:直接在HTML标签写on+事件名(如 - -``` - -### 3.2 嵌入式 -将JavaScript代码写在HTML文件的` - -``` - -**script.js 文件内容:** -```javascript -// 这是外部JavaScript文件 -alert('这是从外部文件加载的JavaScript'); -``` - -## 4. 基本语法 - -### 4.1 变量声明 -```javascript -// 使用var声明变量(函数作用域) -var name = 'JavaScript'; - -// 使用let声明变量(块级作用域,ES6) -let age = 25; - -// 使用const声明常量(块级作用域,ES6) -const PI = 3.14159; -``` - -### 4.2 运算符 -- **算术运算符**:+, -, *, /, %, ++, -- -- **赋值运算符**:=, +=, -=, *=, /=, %= -- **比较运算符**:==, ===, !=, !==, >, <, >=, <= -- **逻辑运算符**:&&, ||, ! - -### 4.3 字符串与转义字符 -在JavaScript中,字符串是最常用的数据类型之一。当我们需要在字符串中包含一些特殊字符时,就需要使用转义字符。 - -#### 4.3.1 转义字符的概念 -转义字符是以反斜杠(\\)开头的特殊字符序列,用于表示那些难以直接输入的字符。 - -#### 4.3.2 常用转义字符列表 - -| 转义字符 | 描述 | 示例 | -|---------|------|------| -| \\ | 反斜杠 | `"\\"` → "\\" | -| \' | 单引号 | `'\'Hello\''` → "'Hello'" | -| \" | 双引号 | `"\"Hello\""` → '"Hello"' | -| \n | 换行符 | `"Hello\nWorld"` → 输出时换行 | -| \t | 制表符 | `"Hello\tWorld"` → 输出时产生Tab空格 | -| \r | 回车符 | `"Hello\rWorld"` → 光标回到行首 | -| \b | 退格符 | `"Hel\blo"` → "Hello" | -| \f | 换页符 | 用于打印机换页 | -| \0 | 空字符 | 表示字符串结束 | - -# 练习 -```html - - - -``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251112-js\345\237\272\347\241\200\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251112-js\345\237\272\347\241\200\347\273\203\344\271\240.md" deleted file mode 100644 index f269ea71bcce8074b8147b7053934baf3e9a4499..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251112-js\345\237\272\347\241\200\347\273\203\344\271\240.md" +++ /dev/null @@ -1,44 +0,0 @@ -# 练习 - -```html - -``` - -# 演示 -![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251116182124947.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251113-js\345\276\252\347\216\257\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251113-js\345\276\252\347\216\257\347\273\203\344\271\240.md" deleted file mode 100644 index b2318475d248e65461fce655c4b7558cad77ec51..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251113-js\345\276\252\347\216\257\347\273\203\344\271\240.md" +++ /dev/null @@ -1,101 +0,0 @@ -# 练习 -```html - - - -``` - -# 效果 -![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251116182545752.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\351\255\217\351\212\256\346\263\223/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" deleted file mode 100644 index 6846e12b94f4e77095a2b37e60ea394768a8d7b9..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" +++ /dev/null @@ -1,112 +0,0 @@ -# 练习 - -```html - - -``` - -# 效果图 - -![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251116183031305.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251117-\345\207\275\346\225\260.md" "b/\351\255\217\351\212\256\346\263\223/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index 3d7dedc2948a55676f55adf5c64b8eb139255690..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,69 +0,0 @@ -# JavaScript 函数笔记 - -## 函数的定义 - -函数是一段可重复使用的代码块,用于执行特定任务。通过函数可以避免重复编写相同的代码,并提高代码的可维护性。 - -### 定义和调用 - -#### 函数的基本概念 -- **函数定义**:创建函数的过程,需要指定函数名、参数和函数体 -- **函数调用**:执行函数的过程,可以在程序的不同位置多次调用同一个函数 -- **形参**:在函数定义时声明的参数,作为占位符 -- **实参**:在函数调用时传递给函数的具体值 - -#### 函数的定义方式 - -1. **函数声明(Function Declaration)** -```javascript -function functionName(parameter1, parameter2) { -} -``` - -2. **函数表达式(Function Expression)** -```javascript -let functionName = function(parameter1, parameter2) { -}; -``` - -3. **箭头函数(Arrow Function)ES6新增** -```javascript -let functionName = (parameter1, parameter2) => { -}; -``` - -#### 函数调用的特点 -- 定义时可指定形参 -- 调用的时候可任意指定实参,也可不指定 -- 实参的数量可以与形参数量不一致 - - 实参多于形参:多余的实参会被忽略 - - 实参少于形参:缺少的形参值为 undefined - -### 返回值 - -- 有 return,则有返回值,而且通常不为 undefined -- 无 return,总是私下返回一个 undefined -- return 语句会立即终止函数的执行,并将结果返回给调用者 - -### 练习 -```html - -``` - -### 效果 -![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251123175607157.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251119-\345\207\275\346\225\260&\345\257\271\350\261\241.md" "b/\351\255\217\351\212\256\346\263\223/20251119-\345\207\275\346\225\260&\345\257\271\350\261\241.md" deleted file mode 100644 index 0095764f44154b7b6e9a777724938eec0090eafa..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251119-\345\207\275\346\225\260&\345\257\271\350\261\241.md" +++ /dev/null @@ -1,332 +0,0 @@ -# JavaScript 函数与对象笔记 - -## 函数 - -### 1. 函数的嵌套 -函数可以嵌套调用,即在一个函数内部调用另一个函数。 - -```javascript -function a() { - alert('函数a被调用'); -} - -function b() { - a(); -} - -b(); -``` - -### 2. 递归函数 -递归函数是在函数体内调用自己的函数,必须有结束条件防止无限递归。 - -```javascript -function factorial(num) { - if (num <= 1) { - return 1; - } else { - return factorial(num - 1) * num; - } -} - -alert('10!的结果为' + factorial(10)); -``` - -### 3. 内置函数 - -#### 数值处理函数 -```javascript -// 1. parseInt()函数 - 将字符串转换为整数 -let str1 = "123abc"; -document.write(parseInt(str1)); // 输出:123 - -// 2. parseFloat()函数 - 将字符串转换为浮点数 -let str2 = "123.45abc"; -document.write(parseFloat(str2)); // 输出:123.45 - -// 3. isNaN()函数 - 检查值是否为NaN(非数字) -let num1 = 456; -let num2 = "abc"; -document.write(isNaN(num1)); // 输出:false(456是数字) -document.write(isNaN(num2)); // 输出:true("abc"不是数字) - -// 4. isFinite()函数 - 检查数值是否为有限数 -document.write(isFinite(567)); // 输出:true(567是有限数) -document.write(isFinite(10/0)); // 输出:false(无穷大) -``` - -#### 字符串处理函数 -```javascript -// 1. eval()函数 - 计算字符串表达式的值 -document.write(eval("5+7")); // 输出:12 -eval("let x=7, y=9; document.write(x*y)"); // 输出:63 - -// 2. encodeURI()函数 - 对URL进行编码 -let url = "https://example.com/search?q=hello world"; -let encodedUrl = encodeURI(url); -document.write(encodedUrl); // 输出编码后的URL - -// 3. decodeURI()函数 - 对已编码的URL进行解码 -document.write(decodeURI(encodedUrl)); // 输出解码后的URL -``` - -### 4. 匿名函数 -匿名函数是没有名称的函数,通常赋值给变量或作为参数传递。 - -```javascript -// 方式一:赋值给变量 -let showMessage = function(message) { - alert(message); -}; -showMessage("Hello World!"); - -// 方式二:使用Function构造函数 -let sum = new Function("x", "y", "return x + y;"); -let result = sum(100, 200); -document.write(result); // 输出:300 - -// 方式三:立即执行函数表达式(IIFE) -(function() { - alert("这是一个立即执行的匿名函数"); -})(); -``` - -## 对象(Object) - -### 1. 什么是对象 -对象是包含属性和方法的数据集合。属性是对象的特征,方法是对象的行为。 - -### 2. 创建对象的方式 - -#### 对象字面量 -```javascript -let person = { - name: "张三", - age: 25, - gender: "男", - sayHello: function() { - alert("你好,我是" + this.name); - } -}; - -// 访问对象属性 -document.write(person.name); -document.write(person["age"]); - -person.sayHello(); -``` -#### 构造函数 -```javascript -function Student(name, age, grade) { - this.name = name; - this.age = age; - this.grade = grade; - this.introduce = function() { - document.write("我是" + this.name + ",今年" + this.age + "岁," + this.grade + "年级"); - }; -} - -// 创建对象实例 -let student1 = new Student("小明", 12, 6); -let student2 = new Student("小红", 11, 5); -``` - -### 3. 对象的常用操作 - -#### 添加属性 -```javascript -let obj = {}; -obj.newProperty = "新属性值"; -``` - -#### 删除属性 -```javascript -delete obj.propertyName; -``` - -#### 检查属性是否存在 -```javascript -// 方法一:使用in操作符 -if ("name" in person) { - document.write("name属性存在"); -} - -// 方法二:检查属性值是否为undefined -if (person.age !== undefined) { - document.write("age属性存在"); -} -``` - -### 4. 对象遍历 -```javascript -let user = { - name: "李四", - age: 30, - city: "北京" -}; - -// 遍历对象的所有属性 -for (let key in user) { - document.write(key + ": " + user[key] + "
      "); -} -``` - -### 练习 -```html - - - - -``` - -### 效果图 -![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251123180811125.png) -![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251123180824991.png) -![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251123180854609.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251120-\345\257\271\350\261\241.md" "b/\351\255\217\351\212\256\346\263\223/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index f01c7faf11f750c7451d40f58273c068668d2a33..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,212 +0,0 @@ -# JavaScript 对象笔记 - -## 1. 对象的概念 - -对象是一个容器,用来存储相关的数据和功能。 -- **属性**:描述对象特征的数据(如姓名、年龄) -- **方法**:对象能执行的动作(如说话、走路) - -```javascript -// 对象示例 -var person = { - name: "小明", // 属性 - age: 18, // 属性 - sayHi: function() { // 方法 - alert("你好!"); - } -}; -``` - -## 2. 创建对象 - -### 对象字面量(最常用) -```javascript -var 对象名 = { - 属性名1: 属性值1, - 属性名2: 属性值2, - 方法名: function() { - // 方法体 - } -}; -``` - - -## 3. 操作对象 - -### 访问属性(两种方式) -```javascript -var car = { - brand: "丰田", - color: "红色" -}; - -// 方式一 -console.log(car.brand); - -// 方式二 -console.log(car["color"]); -``` - -### 添加属性 -```javascript -var phone = { - brand: "华为" -}; - -phone.price = 3999; // 添加价格属性 -phone["model"] = "P40"; // 添加型号属性 -``` - -### 删除属性 -```javascript -var computer = { - brand: "联想", - price: 5000 -}; - -delete computer.price; // 删除price属性 -``` - -### 添加方法 -```javascript -var calculator = { - // 添加加法方法 - add: function(a, b) { - return a + b; - }, - // 添加减法方法 - subtract: function(a, b) { - return a - b; - } -}; - -// 调用方法 -console.log(calculator.add(5, 3)); // 输出:8 -``` - -## 4. 遍历对象 - -使用 `for...in` 循环遍历对象的所有属性: - -```javascript -var book = { - title: "JavaScript入门", - author: "张老师", - pages: 300 -}; - -// 遍历对象 -for(let key in book) { - console.log(key + ": " + book[key]); -} - -// 输出: -// title: JavaScript入门 -// author: 张老师 -// pages: 300 -``` - -## 5. 常用内置对象 - -### Math对象(数学相关) -```javascript -// 常用方法 -Math.PI // 圆周率 -Math.max(1,2,3) // 最大值:3 -Math.min(1,2,3) // 最小值:1 -Math.random() // 随机数(0-1之间) -Math.floor(3.7) // 向下取整:3 -Math.ceil(3.2) // 向上取整:4 -Math.round(3.5) // 四舍五入:4 -``` - -### Date对象(日期时间相关) -```javascript -// 创建日期对象 -var now = new Date(); // 当前日期时间 -var specificDate = new Date("2025-11-20"); // 指定日期 - -// 常用方法 -now.getFullYear(); // 获取年份 -now.getMonth(); // 获取月份(0-11) -now.getDate(); // 获取日期 -now.getHours(); // 获取小时 -now.getMinutes(); // 获取分钟 -``` - -### Event对象(事件相关) -Event对象包含了事件发生时的相关信息: - -```javascript -// 示例:获取鼠标点击位置 -document.onclick = function(event) { - console.log("X坐标:" + event.clientX); - console.log("Y坐标:" + event.clientY); -}; -``` - -### 练习 -```html - - -``` - -### 效果 -![](http://t5tdbg5r1.hn-bkt.clouddn.com/Video_2025-11-23_181543.gif) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251121-\346\225\260\347\273\204.md" "b/\351\255\217\351\212\256\346\263\223/20251121-\346\225\260\347\273\204.md" deleted file mode 100644 index ca45494d333733f8d8ab594e8654843a050fcdc2..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251121-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,33 +0,0 @@ -## 数组 - -数组是用来存储多个值的变量容器,可以存储不同类型的数据。 - -### 定义数组 - -1. 定义空数组: `arrayObject = new Array();` - -2. 指定数组长度: `arrayObject = new Array(size);` - -3. 指定数组元素: `arrayObject = new Array(element1,element2,element3,...);` - -4. 直接定义数组(最常用的): `arrayObject = [element1,element2,element3,...];` - -### 数组的增删改查 - -1. `push(a,b,c...)` - 在末尾添加元素,返回新长度 - -2. `pop()` - 删除末尾元素,返回删除的元素 - -3. `splice(index, count, item1, item2...)` - 添加/删除元素W - - index: 起始位置 - - count: 删除元素个数(0表示不删除) - - item: 添加的新元素 - -### 数组其他常用方法 - -- `unshift()` - 在开头添加元素 -- `shift()` - 删除开头元素 -- `slice(start, end)` - 提取部分数组 -- `concat()` - 合并数组 -- `indexOf()` - 查找元素索引 -- `length` - 获取数组长度 \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251124-\346\225\260\347\273\204\344\275\234\344\270\232.md" "b/\351\255\217\351\212\256\346\263\223/20251124-\346\225\260\347\273\204\344\275\234\344\270\232.md" deleted file mode 100644 index 01b9312b413fe4ff59aaf4e7bd0b54b74a1f0550..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251124-\346\225\260\347\273\204\344\275\234\344\270\232.md" +++ /dev/null @@ -1,73 +0,0 @@ -# 练习 -```html - - - - - -``` - -# 效果图 -![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251130201532796.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\351\255\217\351\212\256\346\263\223/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index 1b3ea66d53728d80c57773c497b23b34072e7258..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,52 +0,0 @@ -# JavaScript正则表达式笔记 - -正则表达式是用来匹配和处理文本的强大工具,在JavaScript中主要用于表单验证、搜索替换和字符串提取等场景。 - -### 创建方式 - -```javascript -// 字面量方式(推荐) -const reg1 = /pattern/flags; - -// 构造函数方式(支持动态构建) -const reg2 = new RegExp('pattern', 'flags'); -``` - -### 常用修饰符 - -- **i**:忽略大小写 -- **g**:全局匹配 -- **m**:多行匹配 - -### 核心元字符 - -| 字符 | 含义 | -| ---- | ----------------------------- | -| `\d` | 数字(0-9) | -| `\w` | 单词字符(字母/数字/下划线) | -| `\s` | 空白字符(空格/制表符等) | -| `.` | 任意字符(除换行符) | - -### 边界符 - -- **`^`**:匹配字符串开始 -- **`$`**:匹配字符串结束 -- **`\b`**:单词边界 - -### 常用量词 - -- **`*`**:0次或多次 -- **`+`**:1次或多次 -- **`?`**:0次或1次 -- **`{n}`**:精确n次 -- **`{n,}`**:至少n次 -- **`{n,m}`**:n到m次 - -### 常用方法 - -- `test()`:检测是否匹配,返回布尔值 -- `exec()`:执行搜索,返回匹配结果 -- `match()`:字符串方法,返回匹配结果 -- `replace()`:字符串替换 -- `search()`:字符串方法,返回匹配位置 -- `split()`:字符串方法,按匹配项分割字符串 \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\350\260\203\350\257\225.md" "b/\351\255\217\351\212\256\346\263\223/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\350\260\203\350\257\225.md" deleted file mode 100644 index b5ae9fc4bc356a1fc18bd8cfabbb0428e600a400..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\350\260\203\350\257\225.md" +++ /dev/null @@ -1,171 +0,0 @@ -# JS异常处理与程序调试笔记 - -### 一、异常处理基础 - -#### 1. 常见异常类型 - -- **语法错误**:代码不符合JS语法规则 -- **运行时错误**:代码逻辑错误导致程序无法继续执行 -- **引用错误**:访问不存在的对象属性或变量 -- **类型错误**:操作类型不匹配 -- **逻辑错误**:程序能运行但结果错误 - -#### 2. 异常处理机制 - -#### try-catch-finally - -```javascript -try { - // 可能出错的代码 -} catch (error) { - // 处理错误 -} finally { - // 无论是否出错都会执行 -} -``` - -- **`error`对象属性**:`name`(错误类型)、`message`(描述)、`stack`(调用栈) -- 嵌套`try-catch`时,优先匹配最近的`catch`块 - -##### throw 自定义异常 - -```javascript -function validateAge(age) { - if (age < 0) throw new Error("年龄不能为负数"); -} -``` - -#### 3. 错误边界(Error Boundaries) - -- 在React等框架中,可通过组件生命周期方法捕获子组件错误 - -### 二、程序调试技巧 - -#### 1. 浏览器开发者工具 - -##### 断点调试 - -1. 在代码行号左侧点击设置断点 -2. 使用调试面板: - - **继续执行**(F8) - - **单步跳过**(F10) - - **单步进入**(F11) - - **查看调用栈**(Call Stack) - - **监视表达式**(Watch) - -##### 控制台调试 - -- `console.log()`:输出变量值 -- `console.error()`:高亮显示错误 -- `console.warn()`:警告信息 -- `console.table()`:表格化显示数据 -- `console.time()`/`timeEnd()`:性能测量 - -#### 2. 常见调试场景 - -##### 变量未定义 - -- 现象:`ReferenceError: x is not defined` -- 解决:检查变量声明和作用域 - -##### 函数未执行 - -- 现象:预期输出未出现 -- 解决: - - 检查函数是否被调用 - - 验证回调函数是否正确传递 - - 使用`debugger`语句强制暂停 - -##### 异步问题 - -- 现象:回调未按预期执行 -- 解决: - - 使用`Promise.then()`/`await`替代回调 - - 验证异步回调函数 - -#### 3. 调试技巧 - -- **二分法**:注释掉一半代码,逐步缩小问题范围 -- **日志法**:在关键位置添加`console.log`输出流程 -- **模拟数据**:使用`mock`数据隔离问题 -- **版本对比**:通过Git对比代码变更 - -# 练习 -```html - - - -

      第一题

      - -
      - - -
      -

      第二题

      - -
      - - - -``` - - -# 效果图 -![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251130202352457.png) -![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251130202408050.png) -![](http://t5tdbg5r1.hn-bkt.clouddn.com/Video_2025-11-27_130107.gif) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\351\255\217\351\212\256\346\263\223/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index b47ce7c3c2752784c1e479572c5a225d898b52a6..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,211 +0,0 @@ -# JavaScript 事件处理笔记 - -### 一、事件基础 - -#### 1. 事件类型 - -- **用户交互**:`click`(点击)、`mouseover`(鼠标悬停)、`keydown`(按键) -- **页面变化**:`load`(页面加载完成)、`resize`(窗口大小变化) -- **表单相关**:`submit`(表单提交)、`input`(输入内容变化) - -#### 2. 事件流 - -- **冒泡**:从目标元素向上传播到 `document` -- **捕获**:从 `document` 向下传播到目标元素 - -### 二、事件绑定方式 - -#### 1. HTML 内联式 - -```html - -``` - -**缺点**:HTML 和 JS 混合,难以维护。 - -#### 2. DOM 属性绑定 - -```javascript -const button = document.querySelector('button'); -button.onclick = function() { - // 事件处理逻辑 -}; -``` - -**缺点**:只能绑定一个事件,后绑定的会覆盖之前的。 - -#### 3. `addEventListener`(推荐) - -```javascript -const button = document.querySelector('button'); -button.addEventListener('click', function() { - // 事件处理逻辑 -}); -``` - -**优点**: -- 可绑定多个事件 -- 支持事件流阶段(捕获或冒泡) -- 可移除事件(`removeEventListener`) - -#### 4. 移除事件监听 - -```javascript -const handler = function() { - // 事件处理逻辑 -}; -button.addEventListener('click', handler); -// 移除时需引用相同的函数 -button.removeEventListener('click', handler); -``` - -### 三、事件对象(`event`) - -事件触发时自动传入回调函数,包含事件信息: - -```javascript -element.addEventListener('click', function(event) { - // 事件处理逻辑 -}); -``` - -#### 常用属性和方法 - -- `event.preventDefault()`:阻止默认行为 -- `event.stopPropagation()`:阻止事件冒泡 -- `event.target`:触发事件的元素 -- `event.currentTarget`:绑定事件的元素 - -### 四、事件委托 - -利用事件冒泡,将事件绑定到父元素,通过 `event.target` 判断具体元素: - -```javascript -parentElement.addEventListener('click', function(event) { - if (event.target.matches('selector')) { - // 处理特定子元素的事件 - } -}); -``` - -**优点**:减少事件绑定,动态添加元素时无需重新绑定。 - -### 五、常用事件处理 - -#### 1. 表单事件 - -- `submit`:表单提交 -- `input`:输入内容变化 -- `change`:表单控件值改变 - -#### 2. 键盘事件 - -- `keydown`:按键按下 -- `keyup`:按键释放 -- `keypress`:按键按下(仅字符键) - -#### 3. 鼠标事件 - -- `click`:点击 -- `dblclick`:双击 -- `mouseover`:鼠标悬停 -- `mouseout`:鼠标离开 -- `mousedown`:鼠标按下 -- `mouseup`:鼠标释放 - -### 六、最佳实践 - -> **提示**:优先使用 `addEventListener`,避免直接修改 DOM 属性(如 `onclick`)。 - -# 练习 -```html - - - -``` - -# 效果图 -![](http://t5tdbg5r1.hn-bkt.clouddn.com/Video_2025-11-27_130107~1.gif) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251201-\344\272\213\344\273\266\345\244\204\347\220\206\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251201-\344\272\213\344\273\266\345\244\204\347\220\206\347\273\203\344\271\240.md" deleted file mode 100644 index e427ec958958579f5e04dffaed6c6454857f8ef5..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251201-\344\272\213\344\273\266\345\244\204\347\220\206\347\273\203\344\271\240.md" +++ /dev/null @@ -1,70 +0,0 @@ -# 练习2 - -### 1 -```html - - - - - - Document - - - - - - - - -``` - -### 2 -```html -
      -
      - -
      这是一段文字 -
      -
      - - - -``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251203-Docment\345\257\271\350\261\241.md" "b/\351\255\217\351\212\256\346\263\223/20251203-Docment\345\257\271\350\261\241.md" deleted file mode 100644 index ba890460dba659eb734e578d9d6acfb82ebcdc52..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251203-Docment\345\257\271\350\261\241.md" +++ /dev/null @@ -1,228 +0,0 @@ -# JavaScript Document 对象笔记 - -## 一、基础文档信息 - -### 文档属性 -- `document.title` - 文档标题 -- `document.URL` - 文档URL -- `document.characterSet` - 文档字符集 -- `document.lastModified` - 最后修改时间 -- `document.readyState` - 文档加载状态 - -### 文档结构访问 -- `document.documentElement` - 根元素(HTML) -- `document.head` - 头部元素 -- `document.body` - 主体元素 -- `document.styleSheets` - 所有样式表 - -## 二、元素选择方法 - -| 方法 | 描述 | 返回值类型 | -|------|------|------------| -| `getElementById()` | 通过ID获取元素 | 单个元素 | -| `getElementsByClassName()` | 通过类名获取元素集合 | HTMLCollection | -| `getElementsByTagName()` | 通过标签名获取元素集合 | HTMLCollection | -| `querySelector()` | CSS选择器获取第一个匹配元素 | 单个元素 | -| `querySelectorAll()` | CSS选择器获取所有匹配元素 | NodeList | - -## 三、节点操作方法 - -### 创建节点 -- `createElement()` - 创建HTML元素 -- `createTextNode()` - 创建文本节点 -- `createAttribute()` - 创建属性节点 - -### 插入节点 -- `appendChild()` - 追加到末尾 -- `insertBefore()` - 在指定节点前插入 - -### 删除与替换 -- `removeChild()` - 移除子节点 -- `replaceChild()` - 替换子节点 -- `cloneNode()` - 克隆节点 - -## 四、内容操作方法 - -| 属性 | 描述 | 安全性 | -|------|------|--------| -| `innerHTML` | 获取/设置HTML内容 | 需注意XSS | -| `textContent` | 获取/设置文本内容 | 安全,不解析HTML | -| `innerText` | 获取/设置可见文本内容 | 考虑CSS样式 | - -## 五、属性操作方法 - -### 标准属性操作 -- `setAttribute()` - 设置属性 -- `getAttribute()` - 获取属性 -- `removeAttribute()` - 移除属性 - -### 自定义属性 -- `dataset` - 访问data-*自定义属性 - -### 样式与类名 -- `style` - 操作内联样式 -- `classList` - 操作类名(add/remove/toggle/contains) - -## 六、表单相关 - -### 表单访问 -- `document.forms` - 访问页面中的表单 -- `form.elements` - 访问表单元素 - -### 表单方法 -- `form.submit()` - 提交表单 -- `form.reset()` - 重置表单 -- `event.preventDefault()` - 阻止表单默认提交 - -## 七、事件处理 - -### 事件监听 -- `addEventListener()` - 添加事件监听 -- `removeEventListener()` - 移除事件监听 - -### 事件委托 -- 利用事件冒泡处理动态元素 -- 通过父元素监听子元素事件 - -## 八、节点关系 - -### 节点访问 -- `parentNode` - 父节点 -- `childNodes` - 所有子节点 -- `children` - 元素子节点 -- `firstChild/lastChild` - 第一个/最后一个子节点 -- `previousSibling/nextSibling` - 前一个/后一个兄弟节点 - -### 元素遍历 -- `parentElement` - 父元素 -- `firstElementChild/lastElementChild` - 第一个/最后一个子元素 -- `previousElementSibling/nextElementSibling` - 前一个/后一个兄弟元素 - - -```html -111111 - - -
      - - -``` - -```html - - - -``` -# 练习 -```html - - - -``` - -```html -查看图片 - -
      - -
      - - -``` - -```html - -
      - - -``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\351\255\217\351\212\256\346\263\223/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 2a47f8c5c1737d90993c3c3c394efeda9b6084fc..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,515 +0,0 @@ -# JavaScript DOM 笔记 - -## 1. DOM 概述 - -**DOM(Document Object Model)**:HTML 和 XML 文档的编程接口,将文档表示为节点树,允许程序访问和操作文档的内容、结构和样式。 - -### DOM 树结构 -DOM 将文档表示为树形结构,每个部分(元素、属性、文本)都是树上的节点。 - -### DOM 标准化 -DOM 由 W3C 标准化,分为不同级别,现代浏览器支持 DOM Level 3。 - ---- - -## DOM 节点属性 - -### 通用节点属性 -所有 DOM 节点都有的通用属性: -- `nodeName`:节点名称 -- `nodeType`:节点类型 -- `nodeValue`:节点值 -- `parentNode`:父节点 -- `childNodes`:子节点集合 -- `firstChild`:第一个子节点 -- `lastChild`:最后一个子节点 - -### 元素节点属性 -元素节点特有的属性: -- `tagName`:标签名 -- `innerHTML`:HTML内容 -- `textContent`:文本内容 -- `innerText`:内部文本(考虑CSS可见性) -- `attributes`:所有属性 -- `className`:类名 -- `id`:ID属性 - -### 样式相关属性 -- `style`:内联样式对象 -- `classList`:类名列表(add/remove/toggle) -- `getComputedStyle()`:获取计算后的样式 - ---- - -## DOM 节点类型 - -### 节点类型常量 -DOM 定义了12种节点类型: -- `Node.ELEMENT_NODE`:元素节点(1) -- `Node.TEXT_NODE`:文本节点(3) -- `Node.COMMENT_NODE`:注释节点(8) -- `Node.DOCUMENT_NODE`:文档节点(9) -- `Node.DOCUMENT_FRAGMENT_NODE`:文档片段节点(11) - -### 主要节点类型 -- **文档节点**:DOM树的根节点,表示整个文档 -- **元素节点**:表示HTML标签 -- **文本节点**:包含元素的文本内容 -- **属性节点**:表示元素的属性 -- **注释节点**:表示HTML注释 -- **文档片段节点**:轻量级的文档节点,用于批量操作DOM - ---- - -## 获取文档指定元素 - -### 传统获取方法 -| 方法 | 描述 | 返回类型 | -| ------------------------------- | ---------------- | -------------- | -| `getElementById(id)` | 通过ID获取元素 | 单个元素 | -| `getElementsByTagName(tag)` | 通过标签名获取 | HTMLCollection | -| `getElementsByClassName(class)` | 通过类名获取 | HTMLCollection | -| `getElementsByName(name)` | 通过name属性获取 | NodeList | - -### querySelector 方法 -| 方法 | 描述 | 返回类型 | -| ---------------------------- | ------------------ | ---------------- | -| `querySelector(selector)` | 获取第一个匹配元素 | 单个元素 | -| `querySelectorAll(selector)` | 获取所有匹配元素 | NodeList(静态) | - -### 选择器类型 -- **基本选择器**:ID选择器、类选择器、元素选择器 -- **属性选择器**:`[href]`、`[href="#"]`、`[href^="https"]` -- **伪类选择器**:`:hover`、`:checked`、`:nth-child()` -- **组合选择器**:`div.warning`、`ul > li`、`p + img` - -### 遍历节点树 -通过节点关系获取元素: -- **向上遍历**:`parentNode`、`parentElement` -- **向下遍历**:`childNodes`、`children`、`firstChild`、`lastChild` -- **水平遍历**:`previousSibling`、`nextSibling` - -### 节点集合类型 -- **HTMLCollection**:动态集合,DOM变化自动更新 -- **NodeList**:可能是静态或动态的 -- **转换数组**:`Array.from()` 或扩展运算符 `[...]` - ---- - -## 与 DHTML 对应的 DOM 操作 - -### DHTML 概念 -DHTML(Dynamic HTML)是使用 HTML、CSS 和 JavaScript 创建交互式网页的技术。 - -### 动态内容修改 -- 使用 `innerHTML` 直接修改HTML内容 -- 使用 `createElement` 和 `appendChild` 安全创建元素 - -### 动态样式修改 -- 直接设置 `style` 属性 -- 使用 `classList` 操作CSS类 -- 使用 `cssText` 批量修改样式 - -### 动态定位和大小 -- 设置 `position`、`left`、`top` 属性 -- 设置 `width`、`height` 属性 -- 使用 `getBoundingClientRect()` 获取元素位置和尺寸 - -### 显示/隐藏元素 -| 方法 | 效果 | 特点 | -| -------------------- | -------- | ------- | -| `display: none` | 完全隐藏 | 不占位 | -| `visibility: hidden` | 不可见 | 占位 | -| `classList.toggle()` | 切换类名 | CSS控制 | - -### 动态创建和插入 -- `createElement()`:创建新元素 -- `appendChild()`:添加到末尾 -- `insertBefore()`:插入到指定位置 -- `replaceChild()`:替换元素 - -### 事件处理 -- `onclick`:传统事件处理 -- `addEventListener()`:现代事件处理 -- `preventDefault()`:阻止默认行为 -- `stopPropagation()`:停止事件传播 - -### 表单动态操作 -- 访问表单元素:`form.elements[name]` -- 修改字段值:`element.value` -- 设置禁用状态:`element.disabled` -- 动态验证:表单提交事件处理 - -### 动态表格操作 -- `createTHead()`:创建表头 -- `insertRow()`:插入行 -- `insertCell()`:插入单元格 -- 表格数据绑定和事件处理 - -### 动态内容过滤和搜索 -- 实时搜索:根据文本内容过滤显示 -- 动态排序:根据属性值重新排列元素 -- 分页功能:控制显示的数据范围 - -### 动画效果 -- 使用 `requestAnimationFrame` 实现平滑动画 -- 缓动函数:控制动画速度变化 -- 属性动画:动态修改CSS属性值 - -### 拖放功能 -- 鼠标事件:`mousedown`、`mousemove`、`mouseup` -- 位置计算:根据鼠标位置设置元素位置 -- 拖放检测:判断元素是否拖放到目标区域 - ---- - -## DOM 核心方法总结 - -### 创建方法 -| 方法 | 描述 | -| -------------------------- | ------------ | -| `createElement(tag)` | 创建元素 | -| `createTextNode(text)` | 创建文本节点 | -| `createComment(text)` | 创建注释 | -| `createDocumentFragment()` | 创建文档片段 | - -### 查找方法 -| 方法 | 描述 | -| ------------------------- | -------------- | -| `getElementById(id)` | 通过ID查找 | -| `querySelector(selector)` | CSS选择器查找 | -| `parentNode` | 父节点 | -| `children` | 子元素 | -| `previousElementSibling` | 前一个兄弟元素 | -| `nextElementSibling` | 后一个兄弟元素 | - -### 操作方法 -| 方法 | 描述 | -| --------------------------- | ---------- | -| `appendChild(node)` | 添加子节点 | -| `insertBefore(new, ref)` | 插入节点 | -| `removeChild(node)` | 删除子节点 | -| `replaceChild(new, old)` | 替换子节点 | -| `setAttribute(name, value)` | 设置属性 | -| `getAttribute(name)` | 获取属性 | -| `removeAttribute(name)` | 删除属性 | - - -```html - - - - -``` - -```html - -

      猜歌名

      -

      - 對這個世界 如果你有太多的抱怨
      - 跌倒了就不敢繼續往前走
      - 為什麼人要這麼地脆弱墮落? -

      - - - - -``` - -```html - - - -

      最新电影资讯

      -
      -

      - 1.《金蝉脱壳》两大动作做巨星联手 -

      -

      - 2.《阿甘正传》励志而传奇的一生 -

      -

      - 3.《爱乐之城》爱情与梦想的交织 -

      -

      - 4.《头号玩家》游戏梦想照进现实 -

      -
      -
      - - - -
      - - - -``` - -```html - - -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 芒果
      • -
      -
        -
      • 西瓜
      • -
      • 蜜橘
      • -
      • 萝卜
      • -
      -
      - - - - -``` - -```html - - - -

      在《倚天屠龙记》中,张三丰是_____派的掌门

      - A.少林 - B.武当 - C.峨眉 - D.昆仑 - - - -``` - -```html -百度一下
      -
      -
      - - - -``` - -```html - - - -
      - - - -``` - -```html -一生只爱一人
      - 将粗体改为斜体 - - -``` - -```html - - - - - -``` -```html - - -

      选择表情

      - - -
      -
      - - - -``` diff --git "a/\351\255\217\351\212\256\346\263\223/20251205-window\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\351\255\217\351\212\256\346\263\223/20251205-window\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 3fa1ab7a02bae0d39c71822e4e1b0e8419a8a0e6..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251205-window\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,325 +0,0 @@ -# Window 对象全面笔记 - -## 1. Window 对象基础 - -### Window 对象 -Window 对象代表浏览器窗口,是 JavaScript 的全局对象,包含所有全局变量、函数和对象。 - -### Window 对象关系 -Window 对象包含以下主要子对象: -- `document`:Document 对象 -- `location`:Location 对象 -- `history`:History 对象 -- `navigator`:Navigator 对象 -- `screen`:Screen 对象 -- `localStorage`:Storage 对象 - -### 全局作用域 -- 在浏览器中,全局作用域就是 Window 对象 -- `var` 声明的变量会成为 window 的属性 -- `let/const` 声明的变量不会成为 window 的属性 -- 严格模式下,全局作用域中的 `this` 为 undefined - ---- - -## 2. 对话框方法 - -### alert() 方法 -显示警告对话框,包含指定消息和"确定"按钮,会阻塞代码执行。 - -### confirm() 方法 -显示确认对话框,包含指定消息和"确定"/"取消"按钮,返回布尔值。 - -### prompt() 方法 -显示提示对话框,包含输入框和"确定"/"取消"按钮,返回输入值或 null。 - -### 对话框方法对比 -| 方法 | 功能 | 返回值 | 特点 | -|------|------|--------|------| -| `alert()` | 警告信息 | undefined | 阻塞执行 | -| `confirm()` | 确认选择 | boolean | true/false | -| `prompt()` | 输入信息 | string/null | 用户输入或取消 | - ---- - -## 3. 窗口的打开与关闭 - -### window.open() 方法 -打开新的浏览器窗口或标签页: -- `window.open(url)`:在新标签页打开 -- `window.open(url, name)`:指定窗口名称 -- `window.open(url, name, features)`:控制窗口特性 - -### 窗口特性参数 -| 参数 | 描述 | 示例值 | -|------|------|--------| -| `width` | 窗口宽度 | `width=800` | -| `height` | 窗口高度 | `height=600` | -| `left` | 左边缘距离 | `left=100` | -| `top` | 上边缘距离 | `top=100` | -| `resizable` | 是否可调整大小 | `resizable=yes` | -| `scrollbars` | 是否显示滚动条 | `scrollbars=yes` | -| `toolbar` | 是否显示工具栏 | `toolbar=no` | - -### window.close() 方法 -关闭当前窗口或指定窗口: -- `window.close()`:关闭当前窗口 -- `openedWindow.close()`:关闭指定窗口 - -### 窗口状态检测 -- `window.closed`:检查窗口是否已关闭 -- 定期检查子窗口状态 -- 窗口间通信限制(同源策略) - ---- - -## 4. 窗口控制 - -### 移动窗口 -| 方法 | 描述 | 适用场景 | -|------|------|----------| -| `window.moveTo(x, y)` | 移动到指定位置 | 脚本打开的窗口 | -| `window.moveBy(dx, dy)` | 相对移动 | 脚本打开的窗口 | - -### 调整窗口大小 -| 方法 | 描述 | 适用场景 | -|------|------|----------| -| `window.resizeTo(w, h)` | 调整到指定尺寸 | 脚本打开的窗口 | -| `window.resizeBy(dw, dh)` | 相对调整尺寸 | 脚本打开的窗口 | - -### 窗口滚动控制 -| 方法 | 描述 | 参数选项 | -|------|------|----------| -| `window.scrollTo(x, y)` | 滚动到指定位置 | `behavior: "smooth"` | -| `window.scrollBy(dx, dy)` | 相对滚动 | `behavior: "smooth"` | -| `element.scrollIntoView()` | 滚动到元素 | `block: "start/center/end"` | - -### 获取滚动位置 -```javascript -{ - x: window.pageXOffset || document.documentElement.scrollLeft, - y: window.pageYOffset || document.documentElement.scrollTop -} -``` - -### 窗口焦点控制 -| 方法 | 描述 | -|------|------| -| `window.focus()` | 设置窗口焦点 | -| `window.blur()` | 使窗口失去焦点 | -| `document.hasFocus()` | 检查是否有焦点 | - -### 焦点事件 -- `focus` 事件:窗口获得焦点 -- `blur` 事件:窗口失去焦点 -- 可用于跟踪用户活跃状态 - ---- - -## 5. 核心概念总结 - -### 安全限制 -- 现代浏览器出于安全考虑,限制脚本对主窗口的控制 -- 大部分窗口控制方法仅适用于脚本打开的窗口 -- 弹出窗口可能被浏览器阻止 - -### 最佳实践 -- 谨慎使用弹出窗口,考虑用户体验 -- 提供明确的用户交互触发窗口操作 -- 处理窗口操作失败的情况 -- 考虑移动端兼容性 - -### 常用场景 -- 对话框交互:alert/confirm/prompt -- 新窗口打开链接:window.open -- 页面内滚动:scrollTo/scrollBy -- 焦点管理:focus/blur事件 -- 窗口状态监控:closed属性检测 - - -# 练习 -```html - -月亮之上 - - - -退出登录 - - -
      -
      影片1:流浪地球
      -
      影片2:环太平洋
      -
      - -
      - 影片详情图 - -
      - - - - - - - - -
      00:00:00
      - - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\351\255\217\351\212\256\346\263\223/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index 85287f2b1781b59e159a4ef9cd542d1020952088..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,145 +0,0 @@ -# 浏览器对象模型 (BOM) - -## 什么是BOM -- Browser Object Model(浏览器对象模型) -- 用于与浏览器窗口进行交互的API -- 不是JavaScript语言的一部分,而是由浏览器厂商实现的功能 -- 核心是window对象,它是所有BOM对象的顶层对象 - -## window对象 -### 基本概念 -- JavaScript中的全局对象 -- 代表浏览器窗口 -- 所有全局变量和函数都成为window的属性和方法 - -### 常用属性和方法 -```javascript -// 窗口尺寸 -window.innerWidth // 窗口内部宽度 -window.innerHeight // 窗口内部高度 - -// 窗口操作 -window.open() // 打开新窗口 -window.close() // 关闭窗口 -window.moveTo() // 移动窗口 -window.resizeTo() // 调整窗口大小 - -// 全局函数(也是window的方法) -window.alert() // 弹出警告框 -window.confirm() // 弹出确认框 -window.prompt() // 弹出输入框 -``` - -## location对象 -### 作用 -- 用于获取和设置当前页面的URL信息 - -### 常用属性 -```javascript -window.location.href // 完整URL -window.location.hostname // 主机名 -window.location.pathname // 路径名 -window.location.protocol // 协议 -window.location.port // 端口号 -``` - -### 常用方法 -```javascript -location.assign("http://example.com") // 加载新页面 -location.replace("http://example.com") // 替换当前页面 -location.reload() // 重新加载页面 -``` - -## navigator对象 -### 作用 -- 包含有关访问者浏览器的信息 - -### 常用属性 -```javascript -navigator.appName // 浏览器名称 -navigator.appVersion // 浏览器版本 -navigator.userAgent // 用户代理字符串 -navigator.platform // 操作系统平台 -navigator.language // 浏览器语言 -navigator.onLine // 是否在线 -navigator.cookieEnabled // cookie是否启用 -``` - -## screen对象 -### 作用 -- 包含有关用户屏幕的信息 - -### 常用属性 -```javascript -screen.width // 屏幕宽度 -screen.height // 屏幕高度 -screen.availWidth // 可用屏幕宽度 -screen.availHeight // 可用屏幕高度 -screen.colorDepth // 颜色深度 -``` - -## history对象 -### 作用 -- 包含浏览器历史记录的信息 - -### 常用方法 -```javascript -history.back() // 后退 -history.forward() // 前进 -history.go(n) // 跳转到历史记录中的特定页面 -``` - -## document对象 -### 说明 -- 虽然属于DOM,但通过window.document访问 -- 代表整个HTML文档 - -### 常用操作 -```javascript -document.title // 文档标题 -document.URL // 文档URL -document.referrer // 来源页面URL -document.domain // 域名 -``` - -## 定时器 -### setTimeout 和 setInterval -```javascript -// 延迟执行 -let timerId = setTimeout(function() { - console.log("延迟执行"); -}, 1000); - -// 重复执行 -let intervalId = setInterval(function() { - console.log("每秒执行一次"); -}, 1000); - -// 清除定时器 -clearTimeout(timerId); -clearInterval(intervalId); -``` - -## 对话框 -### 三种常用对话框 -```javascript -// 警告框 -alert("这是一个警告"); - -// 确认框 -let result = confirm("确定要删除吗?"); -if (result) { - console.log("用户点击了确定"); -} else { - console.log("用户点击了取消"); -} - -// 输入框 -let name = prompt("请输入您的姓名:", "张三"); -console.log("用户输入:" + name); -``` - -## 总结 -- BOM提供了与浏览器窗口交互的对象和方法 -- window对象是BOM的核心,其他对象都是其子对象 -- 掌握BOM有助于创建更丰富的Web应用程序体验 \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251210-Styled\345\257\271\350\261\241.md" "b/\351\255\217\351\212\256\346\263\223/20251210-Styled\345\257\271\350\261\241.md" deleted file mode 100644 index e43a90e5a5275f5506859c26b72fcf5a5c9d89b6..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251210-Styled\345\257\271\350\261\241.md" +++ /dev/null @@ -1,382 +0,0 @@ -# Style对象 - -## 什么是Style对象 -- Style对象代表HTML元素的内联样式 -- 通过element.style可以访问和修改元素的CSS样式 -- 只能读写内联样式(style属性中定义的样式),不能读取外部样式表或内部样式块中的样式 - -## Style对象的特点 -1. 属性名使用驼峰命名法(camelCase) -2. 属性值为字符串类型 -3. CSS属性名中的连字符(-)需转换为驼峰命名 - -## 常用CSS属性对照表 - -| CSS属性 | Style对象属性 | -|---------|---------------| -| background-color | backgroundColor | -| border-width | borderWidth | -| font-size | fontSize | -| font-family | fontFamily | -| text-align | textAlign | -| margin-left | marginLeft | -| padding-top | paddingTop | -| z-index | zIndex | -| line-height | lineHeight | - -## 基本用法 - -### 获取和设置样式 -```javascript -// 获取元素 -let element = document.getElementById("myDiv"); - -// 设置单个样式属性 -element.style.backgroundColor = "blue"; -element.style.fontSize = "20px"; -element.style.marginTop = "10px"; - -// 获取样式属性值 -let bgColor = element.style.backgroundColor; -let fontSize = element.style.fontSize; -``` - -### 批量设置样式 -```javascript -// 使用cssText属性批量设置 -element.style.cssText = "color: red; font-size: 24px; background-color: yellow;"; - -// 或者逐个设置多个属性 -element.style.color = "red"; -element.style.fontSize = "24px"; -element.style.backgroundColor = "yellow"; -``` - -## 常用样式属性操作 - -### 盒模型相关 -```javascript -// 宽高 -element.style.width = "200px"; -element.style.height = "100px"; - -// 边距 -element.style.margin = "10px"; -element.style.padding = "5px"; - -// 边框 -element.style.border = "1px solid black"; -element.style.borderWidth = "2px"; -element.style.borderColor = "red"; -element.style.borderStyle = "dashed"; -``` - -### 定位相关 -```javascript -// 定位类型 -element.style.position = "absolute"; // absolute, relative, fixed - -// 定位坐标 -element.style.top = "50px"; -element.style.left = "100px"; -element.style.right = "20px"; -element.style.bottom = "30px"; - -// 层级 -element.style.zIndex = "10"; -``` - -### 文本和字体相关 -```javascript -// 颜色 -element.style.color = "#ff0000"; -element.style.backgroundColor = "rgba(0,0,0,0.5)"; - -// 字体 -element.style.fontFamily = "Arial, sans-serif"; -element.style.fontSize = "16px"; -element.style.fontWeight = "bold"; // normal, bold, lighter, bolder 或数字 100-900 - -// 文本对齐 -element.style.textAlign = "center"; // left, center, right -element.style.textDecoration = "underline"; // none, underline, overline, line-through - -// 行高 -element.style.lineHeight = "1.5"; -``` - -### 显示和可见性 -```javascript -// 显示方式 -element.style.display = "block"; // block, inline, inline-block, none - -// 可见性 -element.style.visibility = "visible"; // visible, hidden - -// 透明度 -element.style.opacity = "0.5"; -``` - -## 实际应用示例 - -### 动态改变元素样式 -```javascript -// 鼠标悬停效果 -let button = document.getElementById("myButton"); - -button.addEventListener("mouseenter", function() { - this.style.backgroundColor = "lightblue"; - this.style.transform = "scale(1.1)"; -}); - -button.addEventListener("mouseleave", function() { - this.style.backgroundColor = "white"; - this.style.transform = "scale(1)"; -}); -``` - -### 切换类样式 -```javascript -// 切换显示/隐藏状态 -function toggleVisibility(elementId) { - let element = document.getElementById(elementId); - - if (element.style.display === "none") { - element.style.display = "block"; - } else { - element.style.display = "none"; - } -} -``` - -### 创建动画效果 -```javascript -// 简单的移动动画 -function moveElement(elementId) { - let element = document.getElementById(elementId); - let pos = 0; - let id = setInterval(frame, 10); - - function frame() { - if (pos == 200) { - clearInterval(id); - } else { - pos++; - element.style.left = pos + "px"; - } - } -} -``` - -## 注意事项 - -1. **单位问题**:设置数值型样式时必须包含单位(如px, em, %等) - ```javascript - // 正确 - element.style.width = "100px"; - - // 错误(可能不生效) - element.style.width = 100; - ``` - -2. **优先级**:内联样式具有较高优先级,会覆盖CSS文件中的样式 - -3. **复合属性**:某些CSS复合属性需要拆分为单独的属性来设置 - ```javascript - // 不推荐 - element.style.border = "1px solid red"; - - // 更清晰的方式 - element.style.borderWidth = "1px"; - element.style.borderStyle = "solid"; - element.style.borderColor = "red"; - ``` - -4. **兼容性**:某些CSS3属性可能需要添加浏览器前缀 - ```javascript - element.style.webkitTransform = "rotate(45deg)"; // Chrome/Safari - element.style.mozTransform = "rotate(45deg)"; // Firefox - element.style.transform = "rotate(45deg)"; // 标准语法 - ``` - -## 与其他样式操作方法的区别 - -| 方法 | 特点 | -|------|------| -| element.style | 只操作内联样式 | -| getComputedStyle() | 获取计算后的最终样式(包括CSS文件中的样式) | -| className/classList | 操作元素的CSS类 | - - - -# 作业 - -### 1 -```html -
      - 123 -
      - - - -``` - -### 2 -```html - - -
      -
      - - -``` - -### 3 -```html - - - -
      -
      HTML/CSS讨论区
      -
      Android讨论区
      -
      Python讨论区
      -
      - - - -``` - -### 4 -```html - - - -
      -
      -
      -
      -
      - - - -``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251211-Form\345\257\271\350\261\241.md" "b/\351\255\217\351\212\256\346\263\223/20251211-Form\345\257\271\350\261\241.md" deleted file mode 100644 index a9ce367493e8b163e3701a2d3d563b12abf83583..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251211-Form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,534 +0,0 @@ -# Form对象 - -## 什么是Form对象 -- Form对象代表HTML中的表单元素(`
      `标签) -- 是Document对象的一个重要组成部分 -- 用于收集用户输入数据并提交到服务器 -- 提供了访问和操作表单元素的方法和属性 - -## 获取Form对象的方法 -```javascript -// 1. 通过getElementById() -let form = document.getElementById("myForm"); - -// 2. 通过表单名称 -let form = document.forms["formName"]; -// 或者 -let form = document.forms.formName; - -// 3. 通过索引(从0开始) -let form = document.forms[0]; - -// 4. 通过querySelector() -let form = document.querySelector("#myForm"); -``` - -## Form对象的常用属性 - -| 属性 | 描述 | -|------|------| -| action | 表单提交的URL地址 | -| method | 表单提交方法(GET或POST) | -| name | 表单名称 | -| target | 表单提交后在哪里显示响应 | -| elements | 表单中所有控件的集合 | -| length | 表单中控件的数量 | - -```javascript -// 示例 -let form = document.forms[0]; -console.log(form.action); // 获取表单action属性 -console.log(form.method); // 获取表单method属性 -console.log(form.name); // 获取表单名称 -``` - -## Form对象的常用方法 - -| 方法 | 描述 | -|------|------| -| submit() | 提交表单 | -| reset() | 重置表单 | - -```javascript -// 提交表单 -form.submit(); - -// 重置表单 -form.reset(); -``` - -## 访问表单元素 - -### 通过elements集合 -```javascript -let form = document.forms[0]; - -// 通过索引访问 -let firstElement = form.elements[0]; - -// 通过name属性访问 -let usernameInput = form.elements["username"]; - -// 获取元素数量 -let elementCount = form.elements.length; -``` - -### 通过表单元素的name属性直接访问 -```javascript -// 如果表单元素有name="username" -let usernameInput = form.username; -// 或者 -let usernameInput = form["username"]; -``` - -## 表单元素对象 - -### Input元素 -```javascript -let input = form.elements["inputName"]; - -// 常用属性 -input.value // 当前值 -input.type // 类型(text, password, email等) -input.name // 名称 -input.disabled // 是否禁用 -input.readOnly // 是否只读 -input.checked // 对于checkbox/radio是否选中 -``` - -### Select元素 -```javascript -let select = form.elements["selectName"]; - -// 常用属性 -select.options // 所有选项的集合 -select.selectedIndex // 当前选中项的索引 -select.value // 当前选中项的值 -select.length // 选项数量 - -// 获取选中项 -let selectedOption = select.options[select.selectedIndex]; -``` - -### Textarea元素 -```javascript -let textarea = form.elements["textareaName"]; - -// 常用属性 -textarea.value // 当前文本内容 -textarea.name // 名称 -textarea.rows // 行数 -textarea.cols // 列数 -``` - -## 表单事件处理 - -### onSubmit事件 -```javascript -// 方法1:在HTML中指定 -// - -// 方法2:通过JavaScript绑定 -form.onsubmit = function(event) { - // 验证表单 - if (!validateForm()) { - event.preventDefault(); // 阻止表单提交 - return false; - } - // 表单验证通过,正常提交 -}; - -// 方法3:使用addEventListener(推荐) -form.addEventListener("submit", function(event) { - // 验证表单 - if (!validateForm()) { - event.preventDefault(); // 阻止表单提交 - return; - } - // 表单验证通过,正常提交 -}); -``` - -### onReset事件 -```javascript -form.onreset = function() { - return confirm("确定要重置表单吗?"); -}; -``` - -## 表单验证示例 - -```javascript -function validateForm() { - let form = document.forms["myForm"]; - let username = form.elements["username"].value; - let email = form.elements["email"].value; - - // 验证用户名 - if (username == null || username == "") { - alert("用户名不能为空"); - return false; - } - - // 验证邮箱 - let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - if (!emailRegex.test(email)) { - alert("邮箱格式不正确"); - return false; - } - - return true; // 验证通过 -} -``` - -## 实际应用示例 - -### 动态创建表单 -```javascript -// 创建表单元素 -let form = document.createElement("form"); -form.action = "/submit"; -form.method = "post"; - -// 创建输入框 -let usernameInput = document.createElement("input"); -usernameInput.type = "text"; -usernameInput.name = "username"; -usernameInput.placeholder = "请输入用户名"; - -// 创建提交按钮 -let submitBtn = document.createElement("input"); -submitBtn.type = "submit"; -submitBtn.value = "提交"; - -// 添加元素到表单 -form.appendChild(usernameInput); -form.appendChild(submitBtn); - -// 添加表单到页面 -document.body.appendChild(form); -``` - -### 表单数据序列化 -```javascript -function serializeForm(form) { - let formData = []; - - for (let i = 0; i < form.elements.length; i++) { - let element = form.elements[i]; - - // 跳过没有name属性的元素和禁用的元素 - if (!element.name || element.disabled) { - continue; - } - - // 处理不同类型的元素 - if (element.type === "checkbox" || element.type === "radio") { - if (element.checked) { - formData.push(encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value)); - } - } else { - formData.push(encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value)); - } - } - - return formData.join("&"); -} - -// 使用示例 -let form = document.forms[0]; -let serializedData = serializeForm(form); -console.log(serializedData); -``` - -## 使用FormData对象(现代方法) - -```javascript -// 创建FormData对象 -let form = document.forms[0]; -let formData = new FormData(form); - -// 添加额外数据 -formData.append("timestamp", Date.now()); - -// 发送数据到服务器 -fetch("/submit", { - method: "POST", - body: formData -}) -.then(response => response.json()) -.then(data => console.log(data)) -.catch(error => console.error(error)); -``` - -## 常见技巧和注意事项 - -### 1. 禁用提交按钮防止重复提交 -```javascript -form.onsubmit = function() { - let submitBtn = this.querySelector("input[type='submit']"); - submitBtn.disabled = true; - submitBtn.value = "提交中..."; - - // 在一定时间后重新启用按钮(防止网络问题导致一直禁用) - setTimeout(() => { - submitBtn.disabled = false; - submitBtn.value = "提交"; - }, 5000); - - return true; -}; -``` - -### 2. 表单自动填充检测 -```javascript -// 检测表单字段是否被自动填充 -function checkAutofill() { - let inputs = form.querySelectorAll("input"); - inputs.forEach(input => { - if (input.value && !input.classList.contains("filled")) { - input.classList.add("autofilled"); - } - }); -} -``` - -### 3. 表单字段依赖关系 -```javascript -// 根据一个字段的值改变另一个字段的状态 -let countrySelect = form.elements["country"]; -let stateInput = form.elements["state"]; - -countrySelect.onchange = function() { - if (this.value === "USA") { - stateInput.disabled = false; - } else { - stateInput.disabled = true; - stateInput.value = ""; - } -}; -``` - -## 总结 - -Form对象是Web开发中处理用户输入的关键部分。通过JavaScript操作Form对象,我们可以: -1. 获取和设置表单属性 -2. 访问表单中的各个元素 -3. 进行表单验证 -4. 控制表单提交行为 -5. 动态创建和修改表单 - -# 作业 - -```html - -
      -
      1. 取票功能
      - -
      -
      -
      -
      2. 文本区域调整高度
      - - - -
      -
      -
      -
      3. 课程选择(最多6门)
      - C语言
      - 机械制图
      - 单片机
      - 自动控制
      - 传感器
      - 高等数学
      - 计算机基础
      - Oracle数据库
      - 商务英语
      - PLC设计基础
      -
      -
      -
      -
      -
      4. 问答题
      -

      电影《变相怪杰》的主演是谁?

      - 布拉德·皮特
      - 亚当·桑德勒
      - 金凯瑞
      - 杰夫·丹尼尔斯
      - -
      -
      -
      -
      -
      5. 爱好选择
      - 看电影
      - 听音乐
      - 演奏乐器
      - 打篮球
      - 看书
      - 上网
      - - - -
      -
      -
      -
      6. 城市选择
      - 选择省份: - - 选择城市: - -
      - - - -``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251212-Json.md" "b/\351\255\217\351\212\256\346\263\223/20251212-Json.md" deleted file mode 100644 index dc271b79d163cd77b06bd05338b5ed80ee87157c..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251212-Json.md" +++ /dev/null @@ -1,87 +0,0 @@ -# Promise与JSON - -## JSON (JavaScript Object Notation) -### 什么是JSON -- 轻量级数据交换格式 -- 易于人阅读和编写 -- 易于机器解析和生成 -- 独立于语言的文本格式 - -### JSON语法 -```javascript -// 对象表示 -{"name": "张三", "age": 25, "city": "北京"} - -// 数组表示 -[{"name": "张三"}, {"name": "李四"}] - -// 嵌套结构 -{ - "students": [ - {"name": "张三", "scores": [85, 92, 78]}, - {"name": "李四", "scores": [90, 88, 95]} - ] -} -``` - -### JSON与JS对象转换 -```javascript -// JS对象转JSON字符串 -let obj = {name: "张三", age: 25}; -let jsonStr = JSON.stringify(obj); - -// JSON字符串转JS对象 -let str = '{"name": "张三", "age": 25}'; -let jsonObj = JSON.parse(str); -``` - -## Promise -### 什么是Promise -- 异步编程解决方案 -- 表示一个异步操作最终完成或失败的对象 -- 解决回调地狱问题 - -### Promise状态 -1. Pending(待定)- 初始状态 -2. Fulfilled(已成功)- 操作成功完成 -3. Rejected(已失败)- 操作失败 - -### Promise基本用法 -```javascript -// 创建Promise -let promise = new Promise((resolve, reject) => { - let success = true; - if (success) { - resolve("操作成功"); - } else { - reject("操作失败"); - } -}); - -// 使用Promise -promise - .then(result => console.log(result)) - .catch(error => console.log(error)); -``` - -### Promise链式调用 -```javascript -fetch('/api/data') - .then(response => response.json()) - .then(data => processData(data)) - .then(result => console.log(result)) - .catch(error => console.error(error)); -``` - -### async/await语法 -```javascript -async function fetchData() { - try { - let response = await fetch('/api/data'); - let data = await response.json(); - console.log(data); - } catch (error) { - console.error(error); - } -} -``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251215-\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251215-\347\273\203\344\271\240.md" deleted file mode 100644 index cdc1c3122412eee5cb061a0424f9bf133c2967d6..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251215-\347\273\203\344\271\240.md" +++ /dev/null @@ -1,14 +0,0 @@ -```html - -``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251217-jQuery.md" "b/\351\255\217\351\212\256\346\263\223/20251217-jQuery.md" deleted file mode 100644 index a07e87dfac6c3d88c1c0defb092ba6ce36845e45..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251217-jQuery.md" +++ /dev/null @@ -1,228 +0,0 @@ -# jQuery 笔记 - -## 基础概念 -- 轻量级JavaScript库,Write Less, Do More -- 简化DOM操作、事件处理、动画、AJAX - -## 快速开始 -```html - - -``` - -## 选择器 -### 基础选择器 -```javascript -$('#id') // ID选择器 -$('.class') // 类选择器 -$('tag') // 标签选择器 -$('*') // 所有元素 -``` - -### 层级选择器 -```javascript -$('parent child') // 后代元素 -$('parent > child') // 直接子元素 -$('prev + next') // 相邻兄弟 -$('prev ~ siblings') // 所有兄弟 -``` - -### 常用过滤选择器 -```javascript -$('li:first') // 第一个 -$('li:last') // 最后一个 -$('li:eq(2)') // 索引为2 -$('li:even') // 偶数索引 -$('li:odd') // 奇数索引 -$(':checked') // 选中的表单元素 -$(':visible') // 可见元素 -$(':hidden') // 隐藏元素 -``` - -## DOM操作 -### 内容操作 -```javascript -// 获取/设置内容 -$('#el').html() // 获取HTML -$('#el').html('

      新内容

      ') // 设置HTML -$('#el').text() // 获取文本 -$('#el').val() // 获取表单值 -``` - -### 属性操作 -```javascript -// 属性操作 -$('#el').attr('src') // 获取属性 -$('#el').attr('src', 'new.jpg') // 设置属性 -$('#el').removeAttr('title') // 移除属性 - -// 状态操作(表单元素) -$(':checkbox').prop('checked') // 获取选中状态 -$(':checkbox').prop('checked', true) // 设置选中 -``` - -### 样式操作 -```javascript -// CSS样式 -$('#el').css('color') // 获取样式 -$('#el').css('color', 'red') // 设置样式 -$('#el').css({color: 'red', fontSize: '16px'}) // 批量设置 - -// 类操作 -$('#el').addClass('active') // 添加类 -$('#el').removeClass('active') // 移除类 -$('#el').toggleClass('active') // 切换类 -$('#el').hasClass('active') // 判断类 -``` - -### 元素操作 -```javascript -// 创建元素 -const $newEl = $('
      新元素
      '); - -// 添加元素 -$('#parent').append($newEl) // 末尾添加 -$('#parent').prepend($newEl) // 开头添加 -$('#el').after($newEl) // 之后添加 -$('#el').before($newEl) // 之前添加 - -// 删除元素 -$('#el').remove() // 删除元素 -$('#el').empty() // 清空内容 -``` - -### 遍历元素 -```javascript -// 遍历 -$('li').each(function(index, element) { - console.log(index, $(element).text()); -}); - -// 查找相关元素 -$('#el').parent() // 父元素 -$('#el').parents('selector') // 祖先元素 -$('#el').children() // 子元素 -$('#el').siblings() // 兄弟元素 -$('#el').find('selector') // 后代元素 -``` - -## 事件处理 -### 事件绑定 -```javascript -// 快捷绑定 -$('#btn').click(function() { - console.log('点击事件'); -}); - -// on方法(推荐) -$('#btn').on('click', function() { - console.log('点击事件'); -}); - -// 事件委托 -$('#list').on('click', 'li', function() { - console.log($(this).text()); -}); - -// 多个事件 -$('#input').on({ - focus: function() { $(this).css('border', 'red') }, - blur: function() { $(this).css('border', '#ccc') } -}); -``` - -### 事件解绑与触发 -```javascript -// 解绑事件 -$('#btn').off('click') // 解绑点击事件 -$('#btn').off() // 解绑所有事件 - -// 触发事件 -$('#btn').click() // 触发点击 -$('#btn').trigger('click') // 触发事件 -``` - -### 事件对象 -```javascript -$('#btn').click(function(e) { - e.preventDefault() // 阻止默认行为 - e.stopPropagation() // 阻止冒泡 - console.log(e.target) // 触发元素 -}); -``` - -## 动画效果 -```javascript -// 显示隐藏 -$('#el').show() // 显示 -$('#el').hide() // 隐藏 -$('#el').toggle() // 切换 - -// 淡入淡出 -$('#el').fadeIn() // 淡入 -$('#el').fadeOut() // 淡出 -$('#el').fadeToggle() // 切换 - -// 滑动 -$('#el').slideDown() // 下滑 -$('#el').slideUp() // 上滑 -$('#el').slideToggle() // 切换 - -// 自定义动画 -$('#el').animate({ - left: '200px', - opacity: 0.5 -}, 1000); -``` - -## AJAX请求 -```javascript -// GET请求 -$.get('url', function(data) { - console.log(data); -}); - -// POST请求 -$.post('url', {name: 'value'}, function(data) { - console.log(data); -}); - -// 完整AJAX -$.ajax({ - url: 'api/data', - type: 'GET', - dataType: 'json', - success: function(data) { - console.log(data); - }, - error: function(xhr, status, error) { - console.error(error); - } -}); -``` - -## 实用技巧 -### DOM对象转换 -```javascript -// jQuery转DOM -const domEl = $('#el')[0] -const domEl2 = $('#el').get(0) - -// DOM转jQuery -const $el = $(document.getElementById('el')) -``` - -### 链式调用 -```javascript -$('#el') - .css('color', 'red') - .addClass('active') - .html('新内容') - .click(function() { - alert('点击'); - }); -``` diff --git "a/\351\255\217\351\212\256\346\263\223/20251218-jQuery\345\212\250\347\224\273.md" "b/\351\255\217\351\212\256\346\263\223/20251218-jQuery\345\212\250\347\224\273.md" deleted file mode 100644 index 149358651027b1a4cc6660c6fa7424e32627a616..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251218-jQuery\345\212\250\347\224\273.md" +++ /dev/null @@ -1,196 +0,0 @@ -# jQuery 动画与AJAX - -## 动画效果 - -### 基础动画 -```javascript -// 显示隐藏 -$('#el').show(500) // 显示(500ms) -$('#el').hide('slow') // 隐藏(慢速) -$('#el').toggle() // 切换 - -// 滑动效果 -$('#el').slideDown(300) // 下滑显示 -$('#el').slideUp() // 上滑隐藏 -$('#el').slideToggle() // 切换滑动 - -// 淡入淡出 -$('#el').fadeIn() // 淡入 -$('#el').fadeOut() // 淡出 -$('#el').fadeToggle() // 切换淡入淡出 -$('#el').fadeTo(500, 0.5) // 淡到50%透明度 -``` - -### 自定义动画 -```javascript -// 数值型样式动画 -$('#el').animate({ - left: '200px', - width: '300px', - opacity: 0.8 -}, 1000, function() { - // 动画完成回调 - console.log('动画结束'); -}); - -// 动画控制 -$('#el').stop() // 停止动画 -$('#el').delay(500) // 延迟500ms -``` - -### 动画队列 -```javascript -// 链式动画 -$('#el') - .slideDown(500) - .delay(300) - .fadeOut(400) - .fadeIn(400); -``` - -## AJAX操作 - -### 基础请求 -```javascript -// GET请求 -$.get('api/data', {id: 1}, function(res) { - console.log(res); -}, 'json'); - -// POST请求 -$.post('api/add', {name: 'test'}, function(res) { - console.log(res); -}); - -// JSON请求 -$.getJSON('api/json', function(res) { - console.log(res); -}); -``` - -### 完整AJAX配置 -```javascript -$.ajax({ - url: 'api/data', - type: 'GET', - dataType: 'json', - data: {id: 1, name: 'test'}, - timeout: 5000, - beforeSend: function(xhr) { - xhr.setRequestHeader('Token', '123456'); - }, - success: function(res) { - console.log('成功:', res); - }, - error: function(xhr, status, error) { - console.log('失败:', error); - }, - complete: function() { - console.log('请求完成'); - } -}); -``` - -## 工具方法 - -### 数据处理 -```javascript -// 遍历 -$.each([1,2,3], function(index, val) { - console.log(index, val); -}); - -// 类型判断 -$.type('abc') // "string" -$.isArray([]) // true -$.isFunction(function(){}) // true - -// 对象操作 -$.extend({}, {a:1}, {b:2}) // {a:1, b:2} -``` - -### JSON处理 -```javascript -// JSON解析 -const obj = $.parseJSON('{"name":"test"}') - -// 在现代浏览器中也可使用 -const obj2 = JSON.parse('{"name":"test"}') -``` - -## 实用技巧 - -### 动画回调 -```javascript -$('#el').fadeOut(500, function() { - // 动画完成后执行 - $(this).remove(); -}); -``` - -### 链式动画 -```javascript -$('#box') - .animate({left: '100px'}, 500) - .animate({top: '50px'}, 500) - .fadeOut(300); -``` - -### 动画事件 -```javascript -$('#el') - .on('click', function() { - $(this).stop().fadeToggle(); - }) - .on('mouseenter', function() { - $(this).addClass('hover'); - }) - .on('mouseleave', function() { - $(this).removeClass('hover'); - }); -``` - -## 性能优化 - -### 缓存对象 -```javascript -const $elements = $('.items'); // 缓存选择结果 -$elements.hide().fadeIn(500); -``` - -### 批量操作 -```javascript -// 批量动画 -$('.items').each(function(index) { - $(this).delay(index * 100).fadeIn(300); -}); -``` - -### 事件委托 -```javascript -// 动态元素事件处理 -$('#container').on('click', '.item', function() { - $(this).fadeOut(); -}); -``` - -## 兼容性处理 - -### 版本冲突 -```javascript -// 解决$冲突 -const jq = jQuery.noConflict(); -jq('#el').fadeIn(); -``` - -### 浏览器兼容 -```javascript -// 特性检测 -if ($.support.ajax) { - // 支持AJAX - $.get('api/data', function(res) { - console.log(res); - }); -} -``` - diff --git "a/\351\255\217\351\212\256\346\263\223/20251219-js\345\244\215\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251219-js\345\244\215\344\271\240.md" deleted file mode 100644 index de8bba9d487f0e0c3de52ee1ff6966cd859fc66f..0000000000000000000000000000000000000000 --- "a/\351\255\217\351\212\256\346\263\223/20251219-js\345\244\215\344\271\240.md" +++ /dev/null @@ -1,80 +0,0 @@ -# js复习 - -### 开发环境与初体验 -- 浏览器控制台(F12):测试简单代码 -- Node.js:服务器端JavaScript运行环境 -- 基本语法:分号、注释(// 和 /* */) - -### 变量与常量 -```javascript -// 变量(可修改) -let name = "张三"; -var age = 25; - -// 常量(不可修改) -const PI = 3.14159; -``` - -### 数据类型与运算符 -- 基本类型:String、Number、Boolean、Null、Undefined、Symbol -- 引用类型:Object、Array、Function -- 运算符:算术(+,-,*,/)、比较(==,===)、逻辑(&&,||,!) - -### 流程控制 -```javascript -// 条件语句 -if (condition) { /* 代码块 */ } -else if (condition) { /* 代码块 */ } -else { /* 代码块 */ } - -// 循环语句 -for (let i = 0; i < 10; i++) { /* 代码块 */ } -while (condition) { /* 代码块 */ } -do { /* 代码块 */ } while (condition); - -// 分支语句 -switch (expression) { - case value1: /* 代码块 */; break; - default: /* 代码块 */; -} -``` - -## 核心数据结构及用法 - -### 数组 -```javascript -let arr = [1, 2, 3, "a", true]; -arr.push(4); // 末尾添加 -arr.pop(); // 末尾删除 -arr[0] = "new"; // 修改元素 -arr.length; // 数组长度 -``` - -### 函数 -```javascript -// 函数声明 -function add(a, b) { - return a + b; -} - -// 函数表达式 -const multiply = function(a, b) { - return a * b; -}; - -// 箭头函数 -const divide = (a, b) => a / b; -``` - -### 对象 -```javascript -let person = { - name: "张三", - age: 25, - sayHello: function() { - console.log("你好!"); - } -}; -person.name; // 访问属性 -person.sayHello(); // 调用方法 -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251110-js\347\254\224\350\256\260.md" "b/\351\273\204\346\267\274\346\236\227/20251110-js\347\254\224\350\256\260.md" deleted file mode 100644 index 2bb1468132567bc85a9c40a06c3b0833cfc25575..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251110-js\347\254\224\350\256\260.md" +++ /dev/null @@ -1,56 +0,0 @@ -## wed前端核心技术 - -1.HTML -2.css -3.JavaScript - -## wed前端框架 - -1.react facebook react16 -2.vue 尤雨溪 vue3 -3.angula2 谷歌 - -## 全栈(全干工程师)-前端+后端 -1.前端 - -- vue3 - -- react - -2.后端 - -- C# asp.net core -- java springboot springcloud springmvc -- python Django -- C/C# -- 汇编语言 -- 二进制 -- nodejs -- go -- php -- vb -- dephi -- 易语言 -- lisp -- rust -- ruby -- lua - -## 练习 -1.输出老子的名言 在WebStorm工具中直接嵌入JavaScript代码,在页面中输出老子的名言“千里之行,始于足下。” -```html - - - -``` -2.输出明日学院的官网地址 在html文件中调用外部JavaScript文件,在页面中显示对话框,对话框中输出明日学院官方地址。 -```html - - - -``` -```js -alert('http://www.mingrisoft.com') -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251112-Js\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\350\277\220\347\256\227\347\254\246.md" "b/\351\273\204\346\267\274\346\236\227/20251112-Js\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\350\277\220\347\256\227\347\254\246.md" deleted file mode 100644 index 0926810ee5987ba560dddde3c4e71616baddadc0..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251112-Js\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\350\277\220\347\256\227\347\254\246.md" +++ /dev/null @@ -1,99 +0,0 @@ -## 一、JavaScript笔记 -### 数据类型 -1.数值型 -2.字符串型 -3.布尔型 -4.特殊数据类型 - -### 运算符 -1.算术运算符 - -| 运算符 | 描述 | 示例 | -|-----|-----|-----| -| + | 加运算符 | 5+7 //返回值为12 | -| - | 减运算符 | 9-3 //返回值为6 | -| * | 乘运算符 | 5*6 //返回值为30 | -| / | 除运算符 | 12/2 //返回值为6 | -| % | 取模运算符 | 7%5 //返回值为2 | -| ++ | 自增运算符。该运算符的使用有两种情况,即i++(在使用i之后,使i的值加1)和++i(在使用i之前,先使i的值加1) | i=2;j=i++ //j的值为2,i的值为3 i=2;j=++i //j的值为3,i的值为2 | -| -- | 自减运算符。该运算符的使用有两种情况,即i--(在使用i之后,使i的值减1)和--i(在使用i之前,先使i的值减1) | i=7;j=i-- //j的值为7,i的值为6 i=7;j=--i //j的值为6,i的值为6 | - -2.字符串运算符 - -3.比较运算符 - -4.赋值运算符逻辑运算符 - -5.条件运算符 - -6.其他运算符 - -7.运算符的优先级和结合性 - -## 练习 -训练3.输出俄罗斯的国土面积 俄罗斯是世界上国土面积最大的国家,其面积约为17100000km²平方米。将该页面定义在变量中,并输出俄罗斯的国土面积。 -```html - - - -``` -训练4.输出人物的个人信息 将郭靖的姓名、性别、年龄、身高和武功这些个人信息定义在变量中,并在页面输出。 -```html - -

      个人信息

      - - -``` -综合练习1.输出《九阴神功》心法 使用转义字符输出张无忌所练的《九阴神功》的心法。 -```html - -``` -综合练习2.计算员工的实际收入 假设某员工的月薪为6500元,专项扣除费用共500元,个人所得税起征点是5000元,税率为3%,计算该员工的实际收入。(提示:实际收入=(月薪-专项扣除)-(月薪-专项扣除-个税起征点)*税率) -```html - -``` -综合练习3.判断2024年2月的天数 闰年2月的天数是29天,非闰年2月的天数是28天,应用条件运算符判断2024年2月的天数。 -```html - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251113-js\350\277\220\347\256\227\347\254\246.md" "b/\351\273\204\346\267\274\346\236\227/20251113-js\350\277\220\347\256\227\347\254\246.md" deleted file mode 100644 index ee5aeb6ef569689fae5327afa1e7af17e74906d0..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251113-js\350\277\220\347\256\227\347\254\246.md" +++ /dev/null @@ -1,108 +0,0 @@ -## 一、JavaScript笔记 -### 运算符 -1.条件运算符 - -2.其他运算符 - -- 逗号运算符 - -- typeof运算符 - -| 数据类型 | 返回值 | -|-----|-----| -| 数值 | number | -| 字符串 | string | -| 布尔值 | boolean | -| undefined | undefined | -| null | object | -| 对象 | object | -| 函数 | function | - -- new运算符 - -## 练习 -训练5.计算本息合计 假设某银行定期存款3年的年利率为2.75%,某客户的存款金额为100000元,计算该客户存款3年后的本息合计是多少。(提示:本息合计=存款金额+存款金额*年利率*存款期限)。 -```html - -``` -训练6.判断考试成绩是否合格 考试成绩达到60分以上表示合格。周星星的英语考试成绩是65分,使用条件运算符判断该考试成绩是否合格。 -```html - -``` -训练7.计算梯形稻田的面积 有一块梯形稻田,稻田上边缘长为30m,下边缘长为50m,高度为30m,计算这块梯形稻田的面积 -```html - -``` -### 3.4实践与练习 -综合1.判断身体质量指数 身体质量指数(BMI)是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。以男性为例,BMI值低于20表示体重过轻;BMI值为20~25表示体重适中;BMI值为25~30表示体重过重;BMI值为30~35表示非常肥胖。假如某男性的BMI值为23,判断该男性的体重在哪一个范围。 -```html -```html - -``` -综合2.循环输出年份和月份 为了使用户能够方便地选择年、月、日等日期方面的信息,可以把它们放在下拉列表中,编写程序,通过循环语句输出年份和月份。 -```html - -``` -综合3.输出10行10列的表格 应用循环语句输出10行10列的表格,并在单元格中输出对应的数字。 -```html - - -
      -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251114-\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" "b/\351\273\204\346\267\274\346\236\227/20251114-\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" deleted file mode 100644 index a4e312e7c22e2bfb6c0a6c9091c5e5004289a48a..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251114-\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" +++ /dev/null @@ -1,140 +0,0 @@ -## 第三章练习 -训练1.获取数字中的最小值 定义4个数值型变量,值分别为26、17、10、20,应用简单if语句获取这4个数字中的最小值。 -```html - -``` -训练2. 判断空气污染程度 空气污染指数(API)是评估空气质量状况的一组数字,如果空气污染指数为0~100,则空气质量状况属于良好;如果空气污染指数为101~200,则空气质量状况属于轻度污染;如果空气污染指数为201~1300,则空气质量状况属于中度污染;如果空气污染指数大于300,则空气质量状况属于重度污染。假设某城市今天的空气污染指数为56,判断该城市的空气污染程度。 -```html - -``` -训练3.判断当前季节 将当前的月份定义在变量中,使用switch语句判断当前月份属于哪个季节。 -```html - -``` -训练4.输出员工每一年的工资 某企业正式员工的工作时间每增加一年,工龄工资增加50元。假设该企业的某员工已经工作了5年,他的基本工资为3000元,应用do...while语句计算并输出该员工每一年的实际工资情况。 -```html - -``` -训练5.鸡兔同笼 有若干只鸡、兔同在一个笼子里,从上面数,有35个头,从下面书,有94只脚,使用for语句计算鸡的数量和兔的数量。 -```html - -``` -训练6.计算1-1000所有65的倍数的数字之和 在for循环语句中应用continue语句,计算1-1000所有65的倍数的数字之和。 -```html - -``` -训练7.输出尚未使用的办公卡位 某公司新建3×3个办公卡位,现只有第1排第3个和第3排第2个卡位被使用,输出尚未使用的卡位。 -```html - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251117-\346\265\201\347\250\213\346\216\247\345\210\266and\345\207\275\346\225\260.md" "b/\351\273\204\346\267\274\346\236\227/20251117-\346\265\201\347\250\213\346\216\247\345\210\266and\345\207\275\346\225\260.md" deleted file mode 100644 index fc92cc57a17ce85d6a9e21779650ca2ca8d74549..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251117-\346\265\201\347\250\213\346\216\247\345\210\266and\345\207\275\346\225\260.md" +++ /dev/null @@ -1,83 +0,0 @@ -## JavaScript笔记 - -### 流程控制语句 - -1.条件控制语句 - -- if语句 - -- if...else语句 - -- if...else if语句 - -- switch语句 - -2.循环控制语句 - -- while循环语句 - -- do-while循环语句 - -- for循环语句 - -3.跳转语句 - -- continue语句 - -- break语句 - -### 函数 - -1.函数的定义与调用 - -- 定义可指定形参 - -- 调用的时候可任意制定实参,也可不指定 - -```js -//第一种定义方式:传统、原始方式 -function getNameByid(){ - //arguments关键字用于捕获调用函数时传入的参数(实际参数) - console.log(arguments); - } - -//匿名函数 -let getNameByid = function (name,age){ - -} - -//箭头函数 -let getNameByid = (name,age) => { - console.log(name); - console.log(age); -} -``` -2.返回值 -- 有return,则有返回值,而且通常不为undefined。 -- 无return,总是私下返回一个undefined。 - -## 练习 -训练1.获取完整的收货地址 在电子商城网站收货人信息的收货地址栏中,地址由省、市、区和详细地址组成,试着定义一个address()函数,该函数包含省、市、区和详细地址4个参数,在调用函数时,传递的参数可以拼接成一个完整的收货地址。 -```html - -``` -训练2.获取数字的绝对值 定义一个获取数字绝对值的函数,将数字作为参数进行传递,输出-30的绝对值。 -```html - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251119-js\345\207\275\346\225\260\347\254\224\350\256\260.md" "b/\351\273\204\346\267\274\346\236\227/20251119-js\345\207\275\346\225\260\347\254\224\350\256\260.md" deleted file mode 100644 index 9e36500c1698f379dd90dbf9300d89bce5f02b75..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251119-js\345\207\275\346\225\260\347\254\224\350\256\260.md" +++ /dev/null @@ -1,204 +0,0 @@ -## 笔记 - -### 函数 - -1.函数的嵌套调用 - -2.递归函数 - -- 定义递归函数时需要的两个必要条件 - - - 包括一个结束递归的条件。如if(num<=1)语句,如果满足条件,则执行return1;语句,不递归。 - - - 包括一个递归调用语句,如return f(num-1)*num;语句,用于实现调用递归函数 - -3.JavaScript中的内置函数 -| 函数 | 描述 | -|-----|-----| -| parseINT() | 将字符型转换为整型 | -| parseFloat() | 将字符型转换为浮点型 | -| isNaN() | 判断一个数值是否为NaN | -| isFinite() | 判断一个数值是否有限 | -| eval() | 求字符中表达式的值 | -| encodeURI() | 将URI字符串进行编码 | -| decodeUAI() | 对已编码的URI字符串进行解码 | - - -## 练习(第四章) -训练3.比较两个数字的大小 定义一个判断两个数字大小关系的函数,将要比较的两个数字作为函数的参数,将比较结果作为返回值,输出两个数字(如9和10)的大小关系。 -```html - -``` -训练四.获取3个数字中的最小值 定义一个获取3个数字中最小值的函数,将要比较的3个数字作为函数的参数进行传递,输出3个数字(如16、12、17)中的最小值。 -```html - -``` -训练五.判断顾客是否可以享受优惠活动 某商场举办促销活动,凡是购物消费总额满500元的顾客即可享受打九折的优惠活动。某顾客去商场购物,他在商场超市中消费199元,在洗化专柜消费156元,在服装专柜消费165元,应用函数的嵌套判断该顾客是否可以享受商场的优惠活动。 -```html - -``` -训练6.判断考生成绩是否达到本科分数线 某考生参加高考,他的考试成绩为语文108分、数学115分、外语126分、理科综合237分,假设本科分数线是550分,应用函数的嵌套判断该考生的成绩是否达到本科分数线。 -```html - -``` -训练7.判断登录是否成功 假设某用户的微信号为mr,密码为mrsoft,应用匿名函数判断使用微信号mr和密码mrsoft是否能登陆成功。 -```html - -``` -训练8.获取1000以内能同时被3和5整除的正整数 编写一个判断某个整数是否能同时被3和5整除的匿名函数,在页面中输出1000以内所有同属被3和5整除的正整数,要求每行显示7个数字。 -```html - -``` -综合训练1.判断20岁处在哪个年龄段 已知年龄在18岁以下为未成年,年满18岁为成年,其中,年龄为66岁及以上属于老年。应用函数判断20岁处在哪个年龄段。 -```html - -``` -综合训练2.输出某年某月的天数 应用函数的嵌套实现判断指定年份和月份对应天数的功能,将年份和月份作为函数的参数进行传递,输出2024年6月有多少天。 -```html - -``` -综合训练3.输出自定义表格 利用自定义向页面中输出一个自定义的表格,将表格的行数、列数、宽度、高度和边框颜色作为函数的参数进行传递,输出一个5行6列的表格。 -```html - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251120-\345\257\271\350\261\241.md" "b/\351\273\204\346\267\274\346\236\227/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index cb2c8f46e6ae8570712476af0e42a76f1976cddb..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,103 +0,0 @@ -## 笔记 - -### 对象(第5章) -1.对象 -- 对象就是一个使用大括号包裹内容的一个容器 -- CRUD create创建 select查询 update修改/更新 delete删除 - -2.内置对象 -- window是js中唯一的全局变量(下学期第一门课的nodejs中,会学习在nodejs下另外一个全局变量global) -- Math -- Date -- Event - -## 练习 -练习1.计算两个日期的间隔小时数 将2023年5月1日作为开始日期,将2023年6月1日作为结束日期,计算开始日期和结束日期之间的间隔小时数。 -```html - - -``` -练习2.高考倒计时 以2023年高考时间作为截止时间,在页面中显示距2023年高考还有多少天的提示信息。 -```html - -``` -练习3.判断单击的鼠标按键 在页面中单击鼠标弹出一个对话框,在该对话框中显示刚刚单击了哪个鼠标按键。(提示:通过button属性进行判断) -```html - -``` -综合练习1.生成指定位数的1~6的随机数 生成指定位数的随机数,要求每位数字都在1~6取值。 -```html - - -
      - -``` -综合练习2.计算从出生到现在度过的时间 假设周星星的出生日期是1996年6月9日,计算周星星从出生到现在已经度过了多长时间,要求计算出天数、小时数、分钟数和秒数。 -```html - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251121-\346\225\260\347\273\204.md" "b/\351\273\204\346\267\274\346\236\227/20251121-\346\225\260\347\273\204.md" deleted file mode 100644 index daefdc84c50d8ed3ac5cf2666e3bf7e154d7843d..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251121-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,31 +0,0 @@ -## 笔记 - -### 数组 - -1.定义数组 - -- 定义空数组 - -- 指定数组长度 - -- 指定数组元素 - -- 直接定义数组 - -2.数组元素的输入和输出 - -- 数组元素的输入 - - - 在定义数组对象时直接输入数组元素 - - - 利用数组对象的下标向其输入数组元素 - - - 利用for语句向数组对象中输入数组元素 - -- 数组元素的输出 - - - 用下标获取指定元素值 - - - 用for语句获取数组中的元素值 - - - 用数组对象名输出所有元素 \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210\345\222\214string.md" "b/\351\273\204\346\267\274\346\236\227/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210\345\222\214string.md" deleted file mode 100644 index 05e816f9f935096a08893296f0e371763e2e91cd..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251124-\346\225\260\347\273\204\344\270\216\351\233\206\345\220\210\345\222\214string.md" +++ /dev/null @@ -1,194 +0,0 @@ -## 笔记 -### 数组与集合 -1.数组对象的方法及说明 - -| 方法 | 说明 | -|-----|-----| -| concat() | 连接两个或更多的数组,并返回结果 | -| pop() | 删除并返回数组中的最后一个元素 | -| push() | 向数组的尾部添加一个或多个元素,并返回新的长度 | -| shift() | 删除并返回数组中的第一个元素 | -| splice() | 删除元素,并向数组中添加新元素 | -| unshift() | 向数组的头部添加一个或多个元素,并返回新的长度 | -| reverse() | 颠倒数组中元素的顺序 | -| sort() | 对数组中的元素进行排序 | -| slice() | 从某个已有的数组中返回选定的元素 | -| toSource() | 代表对象的源代码 | -| toString() | 把数组转换为字符串,并返回结果 | -| toLocaleString() | 把数组转换为本地字符串,并返回结果 | -| jion() | 把数组中的所有元素放入一个字符串,元素间通过指定的分隔符进行分隔 | -| valueOf() | 返回数组对象的原始值 | - -2.Map集合(Map的操作方法) - -| 属性与方法 | 说明 | -|-----|-----| -| size | 返回Map对象键/值对的数量 | -| set() | 设置键/值对,返回该Map对象 | -| get() | 返回键对应的值,如果不存在,则返回undefined | -| has() | 返回一个布尔值,用于判断Map中是否包含键对应的值 | -| delete() | 删除MAP中的元素,删除成功返回true,失败返回false | -| clear() | 移除Map对象的所有键/值对 | -| keys() | 返回一个新的Iterator(迭代器)对象,包含Map对象中的每个元素的键 | -| values() | 返回一个新的Iterator,包含Map对象中每个元素的值 | -| entries() | 返回一个新的Iterator,包含Map对象中每个元素的[key,value]数组 | -| forEach() | 为每个元素调用回调函数 | - -### String对象 - -1.String对象的创建 - -2.String对象的属性 - -- length属性 - -- constructor属性 - -- prototype属性 - -3.String对象的方法 - -## 练习 -1.第6章 -训练1 为了使日期信息显示得更详细,一般会在日期后面显示星期几,通过数组来显示当前的星期信息。 -```html - -``` - -训练2 自定义一个函数用于获取元素中最大值的方法,找到5,7,6,3,9,2这几个数字中的最大值。 -```html - -``` - -训练3 获取数组(1,2,3,4,5,6)中第2个到倒数第2个数组元素(提示:使用数组对象中的slice()方法)。 -```html - -``` - -综合1 由长春站始发,到北京站的D20次列车途经车站为昌图西、铁岭西、沈阳北和绥中北。编写程序,首先输出该次列车的途经站,然后反向输出该列车的途径站。 -```html - -``` - -综合2 将2022年国内手机销售排行榜前五名的手机品牌和销售市场份额定义在数组中,按手机销售市场份额进行降序排列,将排序后的排名、手机品牌和市场份额输出在页面中。 -```html - -``` - -2.第7章 -训练1 书架上存放着《雪山飞狐》《连城诀》《天龙八部》《射雕英雄传》《鹿鼎传》《笑傲江湖》《书剑恩仇录》《神雕侠侣》《倚天屠龙记》《碧血传》10本书籍,检索出书名为4个字的书籍。 -```html - -``` - -训练2 通讯录中有6位联系人,号码分别为1330431****、1567766****、1304316****、1526567****、1580433****、139****0431。找到并输出通讯录中含有0431的所有手机号码。 -```html - -``` - -训练3 明日科技的企业QQ邮箱地址为4006****66@qq.com,应用substr()方法截取该QQ邮箱中的QQ号。 -```html - -``` - -综合1 在一些网站进行用户注册时,需要使用邮箱地址作为用户名。编写程序,判断abc@sina.com是否为有效的邮箱地址。(提示:以"@"字符和“.”字符作为依据,应用indexOf()方法判断字符的位置) -```html - -``` -综合2 在开发网络应用程序时,经常会遇到由系统自动生成指定位数的随机字符串的情况,如生成随机密码或验证码等。应用split()方法实现生成六位随机字符串的功能,要求字符串中只能包含0~9的整数,或者A~G的大写字母。 -```html - -``` -综合3 在实际网站开发过程中,很有可能遇到这样的情况:客户要求将一串长数字分位显示,如将13625966显示为13,625,966。编写一个自定义函数,实现将数字13625966格式化为分位显示的字符串。 -```html - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\351\273\204\346\267\274\346\236\227/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index c585cad94e8d8bb75677b59f6e66384dda98b616..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,11 +0,0 @@ -## 笔记 - -### 正则表达式 - -1.字符串.match(正则) 返回匹配到的字符串 - -2.字符串.replace(正则,'要替换的字符串') 返回替换后的完整字符串 - -3.正则.exec(字符串) 返回匹配到的字符串(所在位置完整字符串) - -4.正则.test(字符串) 返回匹配字符串的结果:true false \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\351\273\204\346\267\274\346\236\227/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index c3677f257935b4c606442c2c9836b8a8c79a6fa6..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\345\222\214\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,141 +0,0 @@ -## 笔记 -### 异常处理与程序调试(第9章) -1.异常处理 -- 异常类型 - - 语法异常 - - 运行时的异常 - - 逻辑异常 -- 触发onerror事件处理异常 -- 使用try...catch...finally语句处理异常 -```html - -``` -2.程序调试 -- 使用alert()语句调试 -- 使用write()语句调试 -- 使用抛出自定义异常消息调试 - -### 事件处理(第11章) -1.DOM事件模型 -- 取消事件传递和默认处理 - - 取消事件传递是指停止捕获型事件或冒泡型事件的进一步传递。 - -2.页面相关事件 -- onload事件 - - onload事件会在页面或图像加载完成后立即发生,在页面或图像完全载入后触发事件处理程序。 - -## 练习(第9章) -训练1 对字符串“我喜欢js”应用错误的subStr()方法进行截取,在catch区域中弹出设置的异常提示信息“对象不支持此方法” -```html - -``` -训练2 对字符串“我喜欢js”应用错误的subStr()方法进行截取,在catch区域中弹出错误类型和错误信息 -```html - -``` -综合1 有一个数组("A","B","C","D","E"),在文本框中输入1~5的数字,输入数字后单击按钮查找数组中的相应字母并在第二个文本框中显示出来,如果输入的不是1~5的数字,那么单击按钮后就会弹出异常提示信息对话框,在该对话框中显示“输入1~5的数字”的提示信息。 -```html - - - - - - - - -``` -综合2. 通过正则表达式验证用户输入的注册信息是否符合要求,并通过try...catch语句弹出不符合要求的提示信息对话框。在注册表单中分别输入用户名、密码,如果输入的注册信息不符合要求,那么在单击“测试”按钮后就会显示相应的提示信息。 -```html - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\351\273\204\346\267\274\346\236\227/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 2534b345d77fd557e8a9b7f218fbc8e9e445d904..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,243 +0,0 @@ -## 笔记 - -### 事件处理 - -1.页面相关事件 - -(1)onload事件 -onload事件会在页面或图像加载完成后立即发生,在页面或图像完全载入后触发事件处理程序。 - -(2)onresize事件 -onresize事件即页面大小事件,它是用户改变浏览器窗口的大小时触发的事件。 - -2.表单相关事件 - -表单事件实际上就是对元素获得或失去焦点的动作进行控制。 - -## 练习(第11章) -训练1 实现为图片添加和去除边框的功能。当鼠标指针指向图片时,为图片添加边框;当鼠标移出图片时,去除图片边框 -```html -示例图片 - - -``` -训练2 设计如下选择题,通过键盘上的A、B、C、和D4个按键来选择正确的答案,并判断结果是否正确。 -中国的“国球”是(c) -A篮球 B排球 C乒乓球 D羽毛球 -```html -

      选择题:中国的“国球”是()

      -
      -
      A. 篮球
      -
      B. 排球
      -
      C. 乒乓球
      -
      D. 羽毛球
      -
      -

      - - -``` -训练3 当页面加载时输出当前的日期和时间 -```html -

      当前日期和时间

      -
      - - -``` -训练4 在页面中应用onresize事件,当调整浏览器窗口的大小时,在页面中输出浏览器窗口的宽度和高度。 -```html -

      浏览器窗口大小信息

      -
      - - -``` -训练5 当用户选择页面中的文本框时,改变被选中文本框的边框颜色,当用户选择其他文本框时,将失去焦点的文本框恢复为原本的样式。 -```html -
      - - -
      -
      - - -
      -
      - - -
      -``` -训练6 根据用户在下拉菜单中选择的年份和月份输出用户的出生年月 -```html -

      选择你的出生年月

      -
      - - - - -
      -
      - - -``` -训练7 在用户登录页面中,通过onreset事件对用户输入的登录信息进行重置,在重置之前弹出重置表单的提示对话框 -```html - -

      用户登录

      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" "b/\351\273\204\346\267\274\346\236\227/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" deleted file mode 100644 index 71115f710648ad02e2ca33c77b7c916859d158f2..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251201-\347\274\226\350\276\221\344\272\213\344\273\266.md" +++ /dev/null @@ -1,256 +0,0 @@ -## 笔记 -1.文本编辑事件 - -- 复制事件 - -- 剪切事件 - -- 粘贴事件 - -- 选择事件 - -2.对象拖放事件 - -- 拖放对象事件 - -- 放置目标事件 - -## 练习 -训练8 通过对图片的拖放操作,在窗口标题栏中显示ondragover、ondragleave和ondrop事件的相关描述。 -```html - - - - -
      -
      - -
      -
      -
      - - - -``` -训练9 将页面中定义的文本拖曳到下方指定的矩形区域中。 -```html - - - -

      可拖拽文本:

      - 文本1 - -

      放置区域:

      -
      - - - - - -``` -综合1 实现文字变色和放大的效果,即当鼠标指针移到文字上时,文字的颜色改变字号变大,当鼠标指针移出文字时,文字恢复为原来的样式。 -```html - - - 文字变色放大效果 - - - -

      欢迎购买明日科技图书

      - - - -``` -综合2 页面中有一个“关灯”按钮,当单击“关灯”按钮时,页面背景变成黑色,同时“关灯”按钮变成“开灯”按钮;当单击“开灯”按钮时,页面背景变成白色,同时“开灯”按钮变成“关灯”按钮。 -```html - - - - - -``` -综合3 定义一个“测试”按钮,当鼠标键被按下时,将为该按钮加一个绿色的背景,同时该按钮文字变成白色;当鼠标被松开时,将其恢复为初始状态。 -```html - - - - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251203-Document.md" "b/\351\273\204\346\267\274\346\236\227/20251203-Document.md" deleted file mode 100644 index 03a10b6b2820d27220ebe65c53a56fc29c065702..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251203-Document.md" +++ /dev/null @@ -1,79 +0,0 @@ -## Document对象笔记 -1.Document对象的应用 -- 设置文档背景色和前景色 - (1)获取或设置页面的背景色 - ```js - [color=]document.body.backgroundColor[=setColor] - ``` - (2)获取或设置页面的前景色,即页面中文字的颜色 - ```js - [color=]document.body.style.color[=setColor] - ``` - -- 设置动态标题栏 - -- 获取URL - -- 获取当前文档的状态 - -- 在文档中输出数据 - -- 打开新文档并输出内容 - (1)open()方法 - (2)close()方法 - -- 动态添加HTML标记 - ```js - sElement=document.createElement(sName) - ``` - -- 获取文本框并修改其内容 - ```js - sElement=document.getElementByld(id) - ``` - -## 练习 -训练1 在页面中设置一个“交互颜色”按钮,当单击该按钮时,实现文档的背景色和前景色互换的功能。 -```html - - -

      这是一段测试的文本

      - - -``` -训练2 通过Document对象的URL属性获取当前文档的文件名称 -```html - - - -``` -训练3 在页面中定义一个“添加文字”按钮,当单击该按钮时,可动态地向页面中逐个添加文字。 -```html - - -
      - - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251204-DOM\343\200\201DOM\350\212\202\347\202\271\345\222\214\350\212\202\347\202\271.md" "b/\351\273\204\346\267\274\346\236\227/20251204-DOM\343\200\201DOM\350\212\202\347\202\271\345\222\214\350\212\202\347\202\271.md" deleted file mode 100644 index f50ec69478a508881d40b88df7226cad948b954a..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251204-DOM\343\200\201DOM\350\212\202\347\202\271\345\222\214\350\212\202\347\202\271.md" +++ /dev/null @@ -1,67 +0,0 @@ -## 笔记 -1.DOM概述 - - - DOM意为文档对象模型 - -2.DOM节点属性 - -| 属性 | 说明 | -|-----|-----| -| nodeName | 节点的名称 | -| nodeValue | 节点的值,通常只应用于文本节点 | -| nodeType | 节点的类型 | -| parentNode | 返回当前节点的父节点 | -| childNodes | 子节点列表 | -| firstChild | 返回当前节点的第一个子节点 | -| lastChild | 返回当前节点的最后一个节点 | -| previousSibling | 返回当前节点的前一个兄弟节点 | -| nextSibling | 返回当前节点的后一个兄弟节点 | -| attributes | 元素的属性列表 | - -3.节点 -- 创建节点 - - - newChild:表示新的子节点 - - ```js - obj.appendChild(newChild) - ``` - -- 插入节点 - - - new:表示新的子节点 - - - ref:指定一个节点,在这个节点前插入新的节点 - - ```js - obj.insertBefore(new,ref) - ``` - -- 复制节点 - - ```js - obj.cloneNode(deep) - ``` - -- 删除于替换节点 - - 删除节点 - - oldChild:表示需要删除的节点 - - ```js - obj.removeChild(oldChild) - ``` - - 替换节点 - - - new:替换后的新节点 - - - old:需要被替换的旧节点 - - ```js - obj.replaceChild(new,old) - ``` - -3.获取文档中的指定元素 - -- 通过元素的id属性获取元素 - -- 通过元素的class属性获取元素 \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251205-\346\226\207\346\241\243\345\257\271\350\261\241\344\270\216window\345\257\271\350\261\241.md" "b/\351\273\204\346\267\274\346\236\227/20251205-\346\226\207\346\241\243\345\257\271\350\261\241\344\270\216window\345\257\271\350\261\241.md" deleted file mode 100644 index 9eb9282ebff8a54271c4abf9e8b702fb7aa70437..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251205-\346\226\207\346\241\243\345\257\271\350\261\241\344\270\216window\345\257\271\350\261\241.md" +++ /dev/null @@ -1,40 +0,0 @@ -## 笔记 - -### 与DHTML相对的DOM - -1.innerHTML和innerText属性 - -2.outerHTML和outerText属性 - -### Window对象 - -1.Window对象简介 - - 属性 - - 方法 - - 使用 - -2.对话框 - - 警告对话框 - ```js - window.alert(str) - ``` - - 确认对话框 - - question:要在对话框中显示的纯文本 - ```js - window.confirm(question) - ``` - - 提示对话框 - ```js - window.prompt(str1,str2) - ``` - -3.窗口的打开与关闭 - - 打开窗口 - - 关闭窗口 - -4.控制窗口 - - 移动窗口 - - 窗口滚动 - - 设置超时 - -5.窗口事件 \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\351\273\204\346\267\274\346\236\227/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" deleted file mode 100644 index ab6cc307602fb2d75ddc185b970a46285c98ce68..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" +++ /dev/null @@ -1,29 +0,0 @@ -## 笔记 -### 浏览器对象模型 - -1.location对象 - -- location对象的属性 - -| 属性 | 说明 | -|-----|-----| -| portocal | 页面使用的协议,通常是“http:”或“https:” | -| hostname | 服务器域名 | -| port | 请求的端口号 | -| host | 服务器名及端口号 | -| origin | URL的源地址,只读属性 | -| href | 完整的URL地址 | -| pathname | URL中的路径和文件名 | -| search | URL的查询字符串 | - -- location对象的方法 - -2.navigator对象 - -3.screen对象 - -4.history对象 - -- history对象的属性 - -- history对象的对象 diff --git "a/\351\273\204\346\267\274\346\236\227/20251210-style\345\257\271\350\261\241.md" "b/\351\273\204\346\267\274\346\236\227/20251210-style\345\257\271\350\261\241.md" deleted file mode 100644 index 88a19735f867737075d3c1d39c636e7cd3791080..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251210-style\345\257\271\350\261\241.md" +++ /dev/null @@ -1,183 +0,0 @@ -## Style笔记 -1.Style对象简介 - -2.样式标签属性和样式属性 - -3.常用样式属性操作 - -- 颜色和背景属性 - -- 边框属性 - -- 定位属性 - -- 字体属性 - -- 表格布局属性 - -## 练习 -训练1 定义一行文本和一个“放大”按钮,每次单击“放大”按钮都使文本大小增加两个像素,并为文本随机设置一个颜色 -```html - - - 请输入何琳这个sha子 - - - -``` -训练2 实现为图片添加一个特殊边框的效果。当鼠标指针移入图片时,为图片添加一个宽度为5像素、颜色为蓝色的双实线边框,当鼠标指针移出时,去除图片的边框 -```html - - - 示例图片 - - -``` -综合1 实现抽屉风格的滑动菜单。在页面中输出一个竖向的导航菜单,当鼠标指针移到某个菜单项上面时,该菜单项会向右滑出当鼠标指针移出菜单项时,该菜单项会恢复为初始状态。(提示:设置元素的paddingLeft属性) -```html - - -
        -
      • 首页
      • -
      • 产品中心
      • -
      • 关于我们
      • -
      • 联系我们
      • -
      - - -``` -综合2 实现图片在页面中随意摆放的功能。在页面中显示3张旋转一定角度的图片,拖动图片可以在页面中随意进行摆放。(提示:使用定位属性中的top属性和left属性设置图片的位置) -```html - - - 图片1 - 图片2 - 图片3 - - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251211-Form\345\257\271\350\261\241.md" "b/\351\273\204\346\267\274\346\236\227/20251211-Form\345\257\271\350\261\241.md" deleted file mode 100644 index 8bd9408d69d325539142481264797cb8a31aac3e..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251211-Form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,265 +0,0 @@ -## Form对象 - -1.访问表单与表单元素的方法 - -- JavaScript访问表单 - -- JavaScript访问表单元素 - -2.Form对象的属性、方法与事件 - -3.Form对象的应用 - -- 文本框 - -| 属性 | 说明 | -|-----|-----| -| id | 返回或设置文本框的id属性值 | -| name | 返回文本框的名称 | -| type | 返回文本框的类型 | -| value | 返回或设置文本框中的文本,即文本框的值 | -| rows | 返回或设置多行文本框的高度 | -| cols | 返回或设置多行文本框的宽度 | -| disabled | 返回或设置文本框是否被禁用,该属性值为true时禁用文本框,该属性值为false时启用文本框 | - -- 按钮 - -- 单选按钮和复选框 - -- 下拉菜单 - -## 练习 -练习1 星哥在网上买了两张万达影城上映的《勇敢者游戏》的电影票,电影票的兑换码为99632570063166,现模拟自动取票系统的功能,判断星哥取票是否成功。 -```html -
      -

      万达影城自动取票系统

      - - -
      -
      - - -``` -训练2 在用户注册协议页面,如果多行文本框中的文字比较多,多行文本框会自动产生滚动条,试着通过控制按钮来调整多行文本框的高度,以方便用户浏览。 -```html -
      -
      - - -
      - -
      - -``` -训练3 某学校的学生可以自主选择课程,但是,每名学生最多只能选择6门课程,在用户选择的复选框的个数超过6个时给出相应的提示。 -```html -
      -

      请选择课程

      -
      -
      语文
      -
      数学
      -
      英语
      -
      物理
      -
      化学
      -
      生物
      -
      历史
      -
      地理
      -
      政治
      -
      - -
      - - -``` -综合1 如果未选择答案,直接单击“提交答案”按钮,则提示“请选择答案”。如果选择的选项不正确,则单机“提交答案”按钮时提示“答案不正确”,否则提示“答案正确”。 -```html -
      -

      问题:电影《变相怪杰》的主演是谁?

      -
      布拉德·皮特
      -
      亚当·桑德勒
      -
      金·凯瑞
      -
      杰夫·丹尼尔斯
      - -
      - - -``` -综合2 在查看数据信息时,经常需要对多条数据进行操作。编写程序,使用复选框实现兴趣爱好选项的全选、全不选或反选的功能。 -```html - -
      -

      请选择你的兴趣爱好

      -
      - - - -
      -
      -
      -
      -
      -
      -
      -
      -
      - - - -``` -综合3 通过二级联动菜单选择用户所在的省市信息,当省份菜单中的选项改变时,城市菜单中的选项也将随之改变。 -```html - -
      -

      请选择所在省市

      - - -
      - - - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251212-json\345\222\214fecth.md" "b/\351\273\204\346\267\274\346\236\227/20251212-json\345\222\214fecth.md" deleted file mode 100644 index 0629630aca4b45a8dbd7141d4ae321cd383edbd5..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251212-json\345\222\214fecth.md" +++ /dev/null @@ -1,14 +0,0 @@ -## 笔记 - -### json - -- json是一种数据传输格式,其形态为字符串 - -**序列化和反序列化**: -序列化是将对象转化为JSON字符串的过程,而反序列化则是将JSON字符串转化为对象的过程。 - -| 操作 | 定义 | 核心目标 | 常用场景 | -| --- | --- | --- | --- | -| 序列化(JSON.stringify) | 将 JavaScript 对象 / 数组转为 JSON 字符串 | 把内存中的数据转为可传输 / 存储的格式 | 前端向后端传参、本地存储数据 | -| 反序列化(JSON.parse) | 将 JSON 字符串转回 JavaScript 对象 / 数组 | 把传输 / 存储的字符串还原为可操作的 JS 数据 | 接收后端返回数据、读取本地存储 | -Gitee - 基于 Git 的代码托管和研发协作平台 \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251215-js\345\217\230\351\207\217\344\270\216\345\270\270\351\207\217.md" "b/\351\273\204\346\267\274\346\236\227/20251215-js\345\217\230\351\207\217\344\270\216\345\270\270\351\207\217.md" deleted file mode 100644 index 00f3a989087f4bf7912760a88278d96d7150ad4d..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251215-js\345\217\230\351\207\217\344\270\216\345\270\270\351\207\217.md" +++ /dev/null @@ -1,114 +0,0 @@ -```html - - - - - - Document - - - - - - - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251217-jQuery\347\254\224\350\256\260.md" "b/\351\273\204\346\267\274\346\236\227/20251217-jQuery\347\254\224\350\256\260.md" deleted file mode 100644 index 241dafa95a1f84ebb12a66d5f76542cdb3a7dc40..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251217-jQuery\347\254\224\350\256\260.md" +++ /dev/null @@ -1,34 +0,0 @@ -## 笔记 -### jQuery基础 -1.jQuery基础 -- 是一个js库,为了方便dom操作 -- 和js的引用一样,建议在body结束标签前引用 -- 使用`$`来使用jQuery库的能力,`$`符号实际是一个方法,当然方法在js中也是一个对象 -- jquery获取到的jQuery,和原生js拿到的dom对象不同,但它们间可以相互转换 - -2.jQuery选择器与操作 - -- 基础选择器 - - - 标签选择器 - - 类名选择器 - - id选择器 - -- 关系选择器 - - - 子代选择器 - - 直接子代选择器`>` - - 兄弟选择器`~` - - 相邻兄弟选择器`+` - -- 高级选择器 - - - 属性选择器 - - 伪类选择器 - - 伪元素选择器 - -3.jQuery DOM操作 -- 新增append给拿到的元素增加一个下级元素 -- 移除remove移除拿到的元素 -- text()拿到文本内容,text('要设置的内容')可以修改纯文本内容 -- html()拿到包含标签的内容,html('要设置的内容')可以修改包含标签的内容 \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251218-js\346\225\260\347\273\204.md" "b/\351\273\204\346\267\274\346\236\227/20251218-js\346\225\260\347\273\204.md" deleted file mode 100644 index 212c35f974d84b50838b3674c7f881bd5bfe88b3..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251218-js\346\225\260\347\273\204.md" +++ /dev/null @@ -1,96 +0,0 @@ -```html - - - - - - Document - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251219-\350\277\220\347\256\227\347\254\246\344\270\216\347\261\273\345\236\213\350\275\254\346\215\242.md" "b/\351\273\204\346\267\274\346\236\227/20251219-\350\277\220\347\256\227\347\254\246\344\270\216\347\261\273\345\236\213\350\275\254\346\215\242.md" deleted file mode 100644 index ff6532ab83f22a9768075734737fcde20a18c48f..0000000000000000000000000000000000000000 --- "a/\351\273\204\346\267\274\346\236\227/20251219-\350\277\220\347\256\227\347\254\246\344\270\216\347\261\273\345\236\213\350\275\254\346\215\242.md" +++ /dev/null @@ -1,61 +0,0 @@ -```html - - - - - - Document - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git "a/\351\273\204\350\264\235\347\204\266/20251110-js\345\237\272\347\241\200.md" "b/\351\273\204\350\264\235\347\204\266/20251110-js\345\237\272\347\241\200.md" deleted file mode 100644 index 308848dc784d5bcfe933237101b9b90550fa4ae1..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251110-js\345\237\272\347\241\200.md" +++ /dev/null @@ -1,61 +0,0 @@ -## 笔记 - - -1. js引用样式 - -- 内部引用 - -```html - - - -``` - -- 外部引用 - -```html - - - - -``` - -2. console.log:用于在控制台输出 - - -## 作业 - - -1. - -![alt text](./图片/image-1.png) - -```html - - - -``` - -2. - -![alt text](./图片/image-2.png) - - -```html - - - - -alert('http://www.mingrisoft.com'); - -``` - diff --git "a/\351\273\204\350\264\235\347\204\266/20251112-js\345\237\272\347\241\2002.md" "b/\351\273\204\350\264\235\347\204\266/20251112-js\345\237\272\347\241\2002.md" deleted file mode 100644 index c7a1ec863a2250114e5a2027aa83e2a91cc49d9b..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251112-js\345\237\272\347\241\2002.md" +++ /dev/null @@ -1,135 +0,0 @@ -## 笔记 - -1. i++与++i - -- i++:先参与表达式运算,再执行自增操作 -- ++i‌:先执行自增操作,再参与表达式运算 - -```html - -int i = 3; -int a = i++; // a = 3, i = 4 -int b = ++i; // b = 4, i = 4 - -``` - -2. \转译字符 - - -## 作业 - - -1. - -![alt text](./图片/image-3.png) - -```html - - - -``` - -2. - -![alt text](./图片/image-4.png) - -```html - - - -``` - -3. - -![alt text](./图片/image-5.png) - -```html - - - -``` - - -4. - -![alt text](./图片/image-6.png) - -```html - - - -``` - - -### 综合题 - -1. - -![alt text](./图片/image-8.png) - -```html - - - -``` - -2. - -![alt text](./图片/image-9.png) - -```html - - - -``` - - -3. - -![alt text](./图片/image-10.png) - -```html - - - -``` - diff --git "a/\351\273\204\350\264\235\347\204\266/20251113-\345\276\252\347\216\257+\350\241\250\346\240\274.md" "b/\351\273\204\350\264\235\347\204\266/20251113-\345\276\252\347\216\257+\350\241\250\346\240\274.md" deleted file mode 100644 index 11672261907bee1559315a2c0e4094d3fc44125a..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251113-\345\276\252\347\216\257+\350\241\250\346\240\274.md" +++ /dev/null @@ -1,121 +0,0 @@ -## 笔记 - -1. typeof - -- 用于获取数据类型 - -## 作业 - - -5. - -```html - - - -``` - -6. - -```html - - - -``` - -7. - -```html - - - -``` - - -### 综合练习 - -1. - -![alt text](./图片/image-11.png) - -```html - - - -``` -2. - -![alt text](./图片/image-12.png) - -```html - - - - - - -``` -3. -![alt text](./图片/image-13.png) -```html - - - -``` - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251114-if+switch.md" "b/\351\273\204\350\264\235\347\204\266/20251114-if+switch.md" deleted file mode 100644 index f731703b044c5eb0b7c43b2a8fae79aa9f3e9c2d..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251114-if+switch.md" +++ /dev/null @@ -1,202 +0,0 @@ -## 作业 - - -1. -![alt text](./图片/image-14.png) - -```html - - -``` - - -3. - -![alt text](./图片/image-16.png) -```html - - - -``` - - -4. - -![alt text](./图片/image-17.png) - -```html - - - -``` - - -5. - -![alt text](./图片/image-18.png) - -```html - - -``` - -6. - -![alt text](./图片/image-19.png) - -```html - - - -``` - - -7. - -![alt text](./图片/image-20.png) - -```html - - - -``` - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251117-\345\207\275\346\225\260.md" "b/\351\273\204\350\264\235\347\204\266/20251117-\345\207\275\346\225\260.md" deleted file mode 100644 index f61de5ffec96bc747c782888be0e275199ead7ee..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251117-\345\207\275\346\225\260.md" +++ /dev/null @@ -1,136 +0,0 @@ -## 笔记 - - -1. 形参跟实参 - -- 形参是在函数定义时列出的变量,作为函数预期接收输入的占位符。在函数未被调用时,形参不占用存储单元,只有在函数调用时才会分配内存,调用结束后自动释放 - -- 实参是在函数调用时传递给函数的实际值,用于替换形参并执行函数。实参可以是常量、变量、表达式或函数返回值,但要求有确定的值。 - - - -2. 函数的定义 - -- 第一种:传统、原始方式 - -```html - - - -``` - -- 第二种:匿名函数定义 - -```html - - - -``` - -- 第三种:箭头函数 - -```html - - - -``` - - -3. argunmet:其length属性用获取实际传入的参数个数 - -```html - - - -``` - -4. 返回值 - -- 有return,则有返回值,而且通常不为underfined -- 无return,总是私下返回一个underfined -- 函数可以返回函数 - -```html - - - -``` - - -## 作业 - -1. - -![alt text](./图片/image-21.png) - -```html - - - -``` - - -2. - -![alt text](./图片/image-22.png) -```html - - - -``` - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251119-\345\207\275\346\225\2602.md" "b/\351\273\204\350\264\235\347\204\266/20251119-\345\207\275\346\225\2602.md" deleted file mode 100644 index 77bbfcb036b1c9d71efdef6dabfa42ab5f237190..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251119-\345\207\275\346\225\2602.md" +++ /dev/null @@ -1,315 +0,0 @@ -## 笔记 - - -1. 内置函数 - -- parseInt() 将字符类型转化为整型:parselInt(string,[n]) - -主要将首位为数字的字符串转化为数字,如果字符串不是以数字开头,那么将返回NaN。 - -- parseFloat() 将字符类型转化为浮点类型:parseFloat(string) - -函数主要是将首位为数字的字符串转化成浮点型数字,如果字符串不是艺术字开头,那么将返回NaN。 - -- isNaN() 判断一个数值是否为NaN:isNaN(num) - -- isFinite() 判断一个数值是否有限 - -- eval() 求字符串中表达式的值 - -- encodeURI() 将URI字符串进行编码 - -- decodeURI() 对已编码的URI字符串进行解码 - - -## 作业 - -斐波那契数列: -![alt text](./图片/image-23.png) - -```html - - - -``` - -### 训练 - - -3. - -```html - - - -``` - - -4. - -```html - - - -``` - - -6. - -```html - - - -``` - -7. - - -```html - - - -``` - -8. - -![alt text](./图片/image-24.png) - -```html - - - -``` - -### 综合训练 - -1. - -```html - - - -``` - -3. - -![alt text](./图片/image-25.png) - - -```html - - - -``` - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251120-\345\257\271\350\261\241.md" "b/\351\273\204\350\264\235\347\204\266/20251120-\345\257\271\350\261\241.md" deleted file mode 100644 index dbeed5adbd6b511c4179ab54cace42d541f0803c..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251120-\345\257\271\350\261\241.md" +++ /dev/null @@ -1,179 +0,0 @@ -## 笔记 - -1. 操作对象 - -- 访问属性:对象名[属性名] - -```html - - - -``` - -- 添加属性 - -```html - - - -``` - -- 删除属性:delete goods.number; - -- 添加方法 - -2. 遍历对象 - -- 语句:for...in -- 此循环语句用于遍历对象 - - -3. Math对象 - -- 提供大量的数学函数和数学常量 - - -4. Date对象 - -- 实现对日期跟时间的控制 -- 获取本地时间的月份时,通常会少一个月,记得+1 - -- 创建Date - -```html - - - -``` - - -## 作业 - -### 练习 - - -1. - -```html - - - -``` - - -2. - -```html - - - -``` - - -3. - -```html - - - -``` - -### 综合题 - - -1. - -![alt text](./图片/image-26.png) -```html - - - -``` - - -2. - -```html - - -``` - diff --git "a/\351\273\204\350\264\235\347\204\266/20251121-\346\225\260\347\273\204.md" "b/\351\273\204\350\264\235\347\204\266/20251121-\346\225\260\347\273\204.md" deleted file mode 100644 index 37e0726183293eb79a025727adc0517d58f4c56e..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251121-\346\225\260\347\273\204.md" +++ /dev/null @@ -1,72 +0,0 @@ -## 笔记 - -1. 定义数组 - -- arrayObiect = new Array();、 - -- 数组元素个数从0开始 - -- 数组可以指定数组的元素个数:arrayObject = new Array(size); - -- 指定数组元素:arrayObject = new Array(element1, element2, element3...); - -- 直接定义:arrayObject = [element1, element2, element3...]; - - -2. 数组的输入与输出 - -- 数组元素的输入: - (1)直接输入数组元素,在数组元素确定的情况下才可以使用: - arrayObj = new Array("cat", "dog", "horse", "pig"); - (2)利用元素组下标: - arrayObj = newArry(6) - arrayObj[2] = "cat"; - (3)用for语句 - var n = 6; - arrayObj = new Array() - for(var i = 0; i < n; i++) - { - arrayObj[i] = i; - } - -- 元素组输出 - -3. 获取元素组长度:array.length - -4. 增加元素组长度:array[array.length] = arrar.lrngth+1 - -5.数组对象与方法 - -- concat() 连接多个数组并返回新数组 - -- pop() 从数组末尾删除最后一个元素并返回该元素 - -- push() 向数组末尾添加一个或多个元素 - -- shift() 从数组开头删除第一个元素 - -- splice() 在指定位置增加或删除数组元素 - -- unshift() 向数组开头添加元素 - -- reverse() 颠倒数组中元素的顺序 - -- sort() 对数组内容进行排序 - -- slice() 提取数组指定部分生成新数组 - -- toSource() 代表对象的源代码 - -- toString() 把数组转换为字符串,并返回结果 - -- toLocaleString() 把数组转换为本地字符串,并返回结果 - -- join() 将数组所有元素转换为字符串 - -- valueOf() 返回数组对象的原始值 - - - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251124-\346\225\260\347\273\204+string\345\257\271\350\261\241.md" "b/\351\273\204\350\264\235\347\204\266/20251124-\346\225\260\347\273\204+string\345\257\271\350\261\241.md" deleted file mode 100644 index 8530d87f830a2f322cb18121e1573d25d3447f87..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251124-\346\225\260\347\273\204+string\345\257\271\350\261\241.md" +++ /dev/null @@ -1,354 +0,0 @@ -## 笔记 - - -### 数组 - -1. sort:对数组中的元素进行排列 - -- 先进行比较首位数字大小,再比较第二位,以此类推,当需要进行按数字排列的时候,可使用以下方法: - -```html - - - -``` - - -2. concat:连接两个或者更多的数组,并返回结果 - -```html - - - -``` -- 两个数组先后顺序影响连接排列顺序 - - -3. splice:删除元素,并向数组中添加新元素 - -```html - - - -``` - -- 第一个指从第几个开始,后面指的删除几个 - - -4. slice:从某个已有的数组中返回选定的元素 - - -```html - - - -``` - -5. join:把数组中所有元素放入一个字符串,元素箭通过指定的分隔符进行分隔 - - - -6. Array.from() 是 JavaScript 中一个非常实用的静态方法,主要用于将‌类数组对象‌或‌可迭代对象‌转换为真正的数组 - - -### Map集合(这个跟set不考) - -1. forEach方法:使用回调的方式,依次迭代每个键对值 - - -### string对象 - -1. charAt():返回字符串指定对象的字符 - -2. indexOf():返回数组中指定元素的位置 - -### 补充 - -- filter(),js中的高阶函数,用于历遍数组进行条件筛选 - - -## 作业 - - -### 数组练习 - - -1. - -```html - - - -``` - -2. - -```html - - - -``` - -3. - -```html - - - -``` - -### 数组综合练习 - -1. - -```html - - - -``` - - -2. - -```html - - - -``` - - - - -### string对象练习 - -1. - -```html - - - -``` - -2. - -```html - - - -``` - - -3. - -```html - - - -``` - - -### string对象综合练习 - - -1. - -![alt text](./图片/image-27.png) -```html - - - -``` - - -2. - -```html - - - -``` - -3. - -```html - - - -``` - - - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\351\273\204\350\264\235\347\204\266/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" deleted file mode 100644 index f7b2b39f9aa28b69d25d34bb8676e4d3b1a1dac2..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" +++ /dev/null @@ -1,15 +0,0 @@ -## 笔记 - -### 常用表达式 - -1. 字符串.match(正则) 返回匹配到的字符串 - -2. 字符串.replace(正则, '要替换的字符串') 返回替换后的字符串 - -3. 正则.exec(字符串) 返回匹配到的字符串、所在的位置,完整字符串 - -4. 正则.test(字符串) 返回匹配到的字符串的结果: true false - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251127-\346\215\225\350\216\267\345\274\202\345\270\270+\345\256\236\350\267\265\345\244\204\347\220\206.md" "b/\351\273\204\350\264\235\347\204\266/20251127-\346\215\225\350\216\267\345\274\202\345\270\270+\345\256\236\350\267\265\345\244\204\347\220\206.md" deleted file mode 100644 index 02fd015370aad78523b496a3d9a208f6fd021332..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251127-\346\215\225\350\216\267\345\274\202\345\270\270+\345\256\236\350\267\265\345\244\204\347\220\206.md" +++ /dev/null @@ -1,225 +0,0 @@ -## 笔记 - -### 捕获异常 - -- 语句:try...catch...finally - -- try捕获到异常时显示出来,并且可以继续处理后续代码 - - -### 事件处理 - -- 取消事件传递和默认处理 - -1. 取消浏览器的事件传递,如冒泡传递 - -```html - - - -``` - -2. 取消事件传递后的默认处理,如刷新页面,点击跳转等事件,冒泡传递不属于其中 - - - -3. 条件 ? 条件为true时执行 : 条件为false时执行 - - -### 捕获异常练习 - -1. - -```html - - - -``` - - -2. - -```html - - - -``` - - -### 综合练习 - - -1. - - -```html - - - -``` - - -2. - -```html - - - - - - - - - - -``` - - -3. enter触发提交内容 - -```html - - - -``` - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\351\273\204\350\264\235\347\204\266/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" deleted file mode 100644 index 4e49f3d6f4c4b6d330b7d7a0a53c937f4e81597f..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" +++ /dev/null @@ -1,17 +0,0 @@ -## 笔记 - -1. 获得焦点和失去焦点事件 - -| 事件名 | 触发时机 | 特点 | -| --- | --- | --- | -| onfocus | 元素获得焦点时(如点击输入框、Tab 键切换到元素) | 不冒泡(事件不会向上传播到父元素) | -| onblur | 元素失去焦点时(如点击其他元素、Tab 键离开元素) | 不冒泡 | - - -2. 表单提交与重置事件 - -- 表单提交(onfsubmit)通常在用户提交表单之前触发,因此,该事件处理程序通过返回false值来阻止表单的提交,可用于验证表单输入项的正确性 - -- 表单重置事件(onreset)与表单提交事件的处理过程相同,前者只是将表单中各元素的值设为原始值。onreset事件一般用于清空表单中的文本 - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251201-\345\257\271\350\261\241\346\213\226\346\224\276.md" "b/\351\273\204\350\264\235\347\204\266/20251201-\345\257\271\350\261\241\346\213\226\346\224\276.md" deleted file mode 100644 index b4ad1238e1fbf91bdf1f6dfc669514ee5508756c..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251201-\345\257\271\350\261\241\346\213\226\346\224\276.md" +++ /dev/null @@ -1,7 +0,0 @@ -## 笔记 - - - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251203-Document\345\257\271\350\261\241.md" "b/\351\273\204\350\264\235\347\204\266/20251203-Document\345\257\271\350\261\241.md" deleted file mode 100644 index 5ddd1e0aa687de7e303d69593416dd5ff543ae03..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251203-Document\345\257\271\350\261\241.md" +++ /dev/null @@ -1,152 +0,0 @@ -## 笔记 - - -1. documnet常用方法 - -- getElementById(): 返回指定id对象 -- getElementsByName(): 返回带有指定名称的对象集合 -- getElmentsByTagName():返回带有指定标签名的对象集合 -- createElmentI(): 返回html文档 -- document.querySelector('CSS选择器')(全局查找)或 父元素.querySelector('CSS选择器')(局部查找) - -2. document常用属性 - -- body:提供对body元素的直接访问 -- lastModified:获取文档最后的修改日期和时间 -- title:获取当前文档的标题 - -3. Document对象的应用 - -3.1 设置文档背景色和前景色 - -- 获取或设置页面的背景色 - - - [color]document.body.style.backgroundColor[=setColor] - - color:变量名称 - - setColor:设置颜色RGB值 - -- 获取或设置页面的前景色,即页面中的文字颜色 - - - [color]document.body.style.color[=setColor] - - color:变量名称 - - setColor:设置颜色RGB值 - - - -## 作业 - -1. 切换文字跟背景颜色 - -```html - - - - 666666 - - - -``` - - -2. 获取URL地址 - -```html - - - - - - -``` - - - -3. 逐个添加文字 - -```html - - - - - - - - -``` - - -### 综合练习 - -```html - - - -

      李白《行路难·其一》

      -
      -        金樽清酒斗十千,玉盘珍羞直万钱。
      -        停杯投箸不能食,拔剑四顾心茫然。
      -        欲渡黄河冰塞川,将登太行雪满山。
      -        闲来垂钓碧溪上,忽复乘舟梦日边。
      -        行路难!行路难!多歧路,今安在?
      -        长风破浪会有时,直挂云帆济沧海。
      -    
      - -``` - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\347\261\273\345\236\213.md" "b/\351\273\204\350\264\235\347\204\266/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\347\261\273\345\236\213.md" deleted file mode 100644 index 5252e77407fa3ed6886d82b31746c35248fa9247..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\347\261\273\345\236\213.md" +++ /dev/null @@ -1,238 +0,0 @@ -## 笔记 - -1. document常用方法补充: - -- getElementsByClassName() 根据class的值获取元素集合 -- querSelector() 根据选择器获取元素(只含第一个匹配元素) -- querySelector() 根据选择器获取元素集合 - - -2. 节点 - -- 创建节点 - - obj.appendChild(newChild) - -- 插入节点 - - obj.insertBefore(new,ref) - -- 复制节点 - - obj.cloneNode(deep) - -- 删除节点 - - obj.removeChild(oldChild) - -- 替换节点 - - obj.replaceChild(new,old) - - - -## 作业 - - -1. -```html - - 文本框: - - - -
      - - - -``` - -2. - -```html - - 歌名: - - - -
      - -

      尘间雪  纷纷扬扬落满肩

      -

      覆盖了  所有未圆的愿

      -

      像那年  你转身的瞬间

      -

      留我在这  风雪里飘远

      -

      尘间雪  层层叠叠埋誓言

      -

      模糊了  相爱的起点

      -

      若轮回  能再续前缘

      -

      我愿化雪  护你岁岁安

      - - - - -``` - - -3. - -```html -

      最新电影资讯

      -
        -
      • 1.《金蝉脱壳》
      • -
      • 2.《阿甘正传》
      • -
      • 3.《爱乐之城》
      • -
      • 4.《头号玩家》
      • -
      - -
      输入影片资讯号: - - - - - -``` - - -4. - -```html - -
        -
      • 黄瓜
      • -
      • 茄子
      • -
      • 芒果
      • -
      - -
        -
      • 西瓜
      • -
      • 蜜橘
      • -
      • 萝卜
      • -
      - - - - - -``` - - -5. - -```html - - - - - Document - - - - - -

      在《倚天屠龙记》中,张三丰是_____派的掌门?

      -
      -
      - - 少林 -
      -
      - - 武当 -
      -
      - - 峨眉 -
      -
      - - 昆仑 -
      -
      - - - - -``` - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251205- Windows\345\257\271\350\261\241.md" "b/\351\273\204\350\264\235\347\204\266/20251205- Windows\345\257\271\350\261\241.md" deleted file mode 100644 index ac75c7d0ab4c1f10a4f7f4c6df98bab0cae0d115..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251205- Windows\345\257\271\350\261\241.md" +++ /dev/null @@ -1,18 +0,0 @@ -## 笔记 - -- 顶层Windows对象是所有其他子对象的父对象 - -1. 警告框 - -- window.alert() - -2. 确认对话框 - -- window对象confirm用于弹出一个确认对话框,确认与取消,若点击确认则返货true,反之取消返回值为false。 - -3. 提示对话框 - -- window对象的prompt方法可以在窗口中弹出一个提示对话框,点击确定可返回用户输入的字符串,取消返回null值 - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251208-windows\345\274\271\347\252\227.md" "b/\351\273\204\350\264\235\347\204\266/20251208-windows\345\274\271\347\252\227.md" deleted file mode 100644 index 574c2ade9066e6df86958f99a430b3e0c6a66db9..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251208-windows\345\274\271\347\252\227.md" +++ /dev/null @@ -1,76 +0,0 @@ -## 笔记 - -1. window -- 控制浏览器窗口、全局弹窗、定时器 - - alert() - - confirm()(返回布尔-值) - - prompt("输入:", "默认值")(返回输入内容) - - 定时器:setTimeout(函数, 毫秒)(延迟执行1次)、 - - setInterval(函数, 毫秒)(重复执行)、clearInterval(定时器ID)(停止) - - 窗口信息:innerWidth/innerHeight(可视区宽高) - - -2. document - -- 操作当前HTML页面(隶属于BOM的window) -必记语法: - - -3. location - -- 控制URL、跳转、刷新 - - 跳转:location.href = "https://xxx.com"(设置URL) - - 刷新:location.reload()(true强制刷新) - - 获取信息:location.host(主机名)、location.search(URL参数?后面部分) - - -4. history - -- 浏览器前进/后退 - - 后退:history.back()(等价浏览器后退键) - - 前进:history.forward()(等价浏览器前进键) - - 跳转:history.go(数字)(正数前进、负数后退) - -5. navigator - -- 获取浏览器/设备信息 - - - -## 作业 - -1. -```html - - - - - - -``` - - - -2. - -```html - - - - - - -``` - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251210-style.md" "b/\351\273\204\350\264\235\347\204\266/20251210-style.md" deleted file mode 100644 index d1c6d758863f7d76588aea2ffdc126d4687115fe..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251210-style.md" +++ /dev/null @@ -1,30 +0,0 @@ -## 作业 - - -1. - -```html - - 不想敲代码 - - - - -``` - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251211-form\345\257\271\350\261\241.md" "b/\351\273\204\350\264\235\347\204\266/20251211-form\345\257\271\350\261\241.md" deleted file mode 100644 index 36aad6f24f1ed5df1a0ce26ae451bd5702869b94..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251211-form\345\257\271\350\261\241.md" +++ /dev/null @@ -1,92 +0,0 @@ -## 作业 - -1. -```html - - 请输入电影票兑换码: - - - - - -``` - -2. - -```html - - - - - - - - - -``` - - -3. - -```html - -
      -

      请选择课程

      - C语言 - 机械制图 - 单片机 - 自动控制 - 传感器 - 高等数学 - 计算机基础 - Oracle数据库 - 商务英语 - PLC设计基础 -
      - - - - -``` - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251212-json\350\267\237fetch.md" "b/\351\273\204\350\264\235\347\204\266/20251212-json\350\267\237fetch.md" deleted file mode 100644 index c1134f0eb3faec9a6b46feeeea2d745e19f37680..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251212-json\350\267\237fetch.md" +++ /dev/null @@ -1,62 +0,0 @@ -## json - -- json是一种数据传输格式,其形态是字符串 --用途: - - "API 数据传输" - - "配置文件" - - "数据存储" - -```html - - - -``` - -## fetch api - -```html - -``` - - - - - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251215.md" "b/\351\273\204\350\264\235\347\204\266/20251215.md" deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git "a/\351\273\204\350\264\235\347\204\266/20251217-jquery.md" "b/\351\273\204\350\264\235\347\204\266/20251217-jquery.md" deleted file mode 100644 index 5d0022e94543a812e927010bf9f55ac7a41b3dc0..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251217-jquery.md" +++ /dev/null @@ -1,148 +0,0 @@ -## 笔记 - -- jquery是一个js库,为了方便dom操作 -- 和js一样,建议在body结束标签之前引用 -- 使用`$`符号来使用jQuery库能力,`$`符号实际是一个方法,当然方法在js中也是一个对象,所以其也有一些属性可以使用 -- jquery获取到的是jQuery,和原生拿到的动漫对象不同,但它们之间可以相互转换 - -- 相互转换方法: - -```html - -
      - - - - - -``` - -## 作业 - - -1. -- 题目描述: - 引入 jQuery 库,使用 $(document).ready() 确保 DOM 加载完成后执行代码,输出 "jQuery 已就绪" -- 输出示例: - 页面加载完成后控制台输出 "jQuery 已就绪" - -```html - - - - - -``` - -2. -- 题目描述: - 比较 $ 和 jQuery 的使用,验证它们是同一个对象 -- 输出示例: - true - -\\ 验证$和jQuery这两个符号使用的是不是同一种东西 - -```html - - - - - -``` - -3. - -- 题目描述: - 使用 jQuery 获取 id 为 "demo" 的元素,并输出该元素的 jQuery 对象 -- HTML 结构: - -```html - -
      演示内容
      - - - - - -``` - -4. - -- 题目描述: - 理解 jQuery 对象和原生 DOM 对象的区别,实现两者之间的转换 -- 输出示例: - jQuery对象转DOM对象:`$('#demo')[0] 或 $('#demo').get(0)` - DOM对象转jQuery对象:`$(domElement)` - -```html - -
      演示内容
      - - - - - -``` - -5. - -- 题目描述: -- 使用 jQuery 的链式调用,一次性完成多个操作 - -```html - -
      内容
      - - - - - -``` - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251218-jQuery\344\272\213\344\273\266\345\244\204\347\220\206\344\270\216\345\212\250\347\224\273.md" "b/\351\273\204\350\264\235\347\204\266/20251218-jQuery\344\272\213\344\273\266\345\244\204\347\220\206\344\270\216\345\212\250\347\224\273.md" deleted file mode 100644 index 619ddafbd43c031dcb21524f192c7ecf0f401517..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251218-jQuery\344\272\213\344\273\266\345\244\204\347\220\206\344\270\216\345\212\250\347\224\273.md" +++ /dev/null @@ -1,67 +0,0 @@ -## 笔记 - -### jQuery事件处理 - -- jQuery对象.on('click', function(){}) -- jQuery对象.click(function(){}) -- jQuery对象.trigger('click', function(){}) - -```html - - - -
      - 想一夜暴富然后混吃混合等死 -
      - - - - - -``` - - -### jQuery动画与效果 - -- 基础效果:显示、隐藏 show()、hide()、toggle() -- 进阶效果:淡入、淡出 fadeIn()、fadeOut() -- 高级效果:animate() - - -### jQuery DOM 操作 - -- 新增 append给按到的元素增加一个下级元素 -- 移除 remove 移除拿到的元素 -- text() 拿到文本内容, text('要设置的内容')可以修改纯文本内容 -- html() 拿到包含标签的内容,html('要射这的内容')可以修改包含标签的内容 - - - - - - - - - - diff --git "a/\351\273\204\350\264\235\347\204\266/20251219-api.md" "b/\351\273\204\350\264\235\347\204\266/20251219-api.md" deleted file mode 100644 index 6c0ca6cb35c6d416592fae47854b339fd1cbf17e..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/20251219-api.md" +++ /dev/null @@ -1,328 +0,0 @@ -```html - - - - - - - - 实践星球 - - - - - -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      序号标题内容摘要作者发布日期操作
      - - -
      - - -
      - - -
      - - -
      - - -
      - - -
      - - -
      - - -
      - - -
      -
      - - - - - - - -``` \ No newline at end of file diff --git "a/\351\273\204\350\264\235\347\204\266/js\347\273\203\344\271\240.md" "b/\351\273\204\350\264\235\347\204\266/js\347\273\203\344\271\240.md" deleted file mode 100644 index c0262080769ea41f575df95f9596e7849906e68b..0000000000000000000000000000000000000000 --- "a/\351\273\204\350\264\235\347\204\266/js\347\273\203\344\271\240.md" +++ /dev/null @@ -1,451 +0,0 @@ - -## js基础 -1. 题目描述: 判断给定的变量 value 是什么数据类型,并返回类型名称的字符串 -输入示例: 123 -输出示例: "number" - -```html - - - -``` - - -2. 题目描述: 创建一个变量 age,初始值为 18,然后将其修改为 20,最后输出修改后的值 -输出示例: 20 - -```html - -``` - -3. - -- undefined(未定义)‌ 表示变量已声明但未赋值,是 JavaScript 自动赋予的默认值。 - - -- ‌null(空值)‌ 表示一个有意的空对象引用,需要程序员主动设置 - - -4. - -特性 | var(函数作用域) | let/const(块级作用域) -| --- | --- | --- | -‌作用域范围‌ | 整个函数内部可见| 仅在声明所在的代码块内有效 -‌变量提升‌ |声明被提升到作用域顶部| 存在暂时性死区,声明前不可访问 -‌重复声明‌ |允许在同一作用域重复声明| 禁止重复声明同名变量 -‌全局属性‌ |成为全局对象属性| 不会添加到全局对象 - -- const不可重新声明变量 - -5. -- var 的行为 - -```html - -``` - -- 实际执行:声明提升,赋值不提升 - -- const或let 的行为 - -```html - -``` -- 必须初始化,且不可重新赋值 - -## 运算类型转化 - -1. - -- 转化为number:Number() 或 parseInt() -- 转化为string:String() 或 toString() - -2. - -- ==(抽象相等)和 ===(严格相等)的核心区别是 是否会进行「类型转换」 -- ==会先转化类型再比较,===不会转化 - -3. - -- 一元 !! 运算符:任意类型 → 布尔值(双重否定,强制转布尔) - -- 原理: - - 第一个 !:将值转为布尔值并取反(如 "hello" → !true → false) - - 第二个 !:再次取反,还原为原始值对应的布尔值(如 !false → true) - - -4. -- NaN(Not a Number,非数字)是 JavaScript 中一个特殊的 number 类型值,自身不相等 - -- NaN === NaN // false -- isNaN(NaN) // true -- Number.isNaN(NaN) // true - -5. -- ~~num用于取整数 - -```html - - - -``` - -6. 短路求值:逻辑运算符 - -- && 一个为false则返回false -- || 一个为true则返回true -- ?? 左侧为null或者undefined时,返回右侧 -- ? 左侧为null或者undefined时,直接终止并返回undefined,避免报错 - -```html - - - -``` - -## 流程控制 - -2. for循环计算1到n的累加 - - -```html - - - -``` - -3. 历遍数组,输出所有偶数 - -```html - - - -``` - -4. 判断给定数字 num 是否为质数(只能被1和自身整除的大于1的自然数) - -- 要判断是否为质数: - - 排除小于1的数 - - 排除 除了2以外偶数(2为唯一质偶数) - - 在上面的基础上,检查3到根号num的奇数,能被整除的不是质数 - -```html - - - -``` - -5. - -- 使用 while 循环找出小于 n 的所有3的倍数 -- 先执行判断再执行i++,否则则会偏离范围 - -```html - - - -``` - -6. - -- 使用 switch 语句根据星期几输出不同的信息 - -```html - - - -``` - -7. - -- 使用 for...of 循环遍历数组 - -```html - - - -``` - -8. - -- 使用 for...in 循环遍历对象的属性 - -```html - - - -``` - -10. - -- 打印乘法表 - -```html - - - -``` - - -## 数组 - -1. - -- 计算并返回给定数组 arr 中所有元素的总和 - -```html - - - -``` - -3. - -- 合并数组 arr1 和数组 arr2。不要直接修改数组 arr,结果返回新的数组 - -```html - - - -``` - -4. - -- 统计数组 arr 中值等于 item 的元素出现的次数 - -```html - - - -``` - - -```html - - - -``` - - -```html - - - -``` - - -```html - - - -``` - - -```html - - - -``` - - -```html - - - -``` - - -```html - - - -``` - - -```html - - - -``` - - -```html - - - -``` - - diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-1.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-1.png" deleted file mode 100644 index 91682b88d85ac9b00e6897a8bd837f5fc94c26f5..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-1.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-10.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-10.png" deleted file mode 100644 index 2a0029b479eaf739b2115d5c808da55c87dbbb56..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-10.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-11.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-11.png" deleted file mode 100644 index 0cf4f4e2da881199e716e46b3a5cf790383a3eb1..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-11.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-12.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-12.png" deleted file mode 100644 index 5b9da7366cab4de24c03446c0de467863d089208..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-12.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-13.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-13.png" deleted file mode 100644 index c7132c97aa4e254cf23591ab63fd16e4dc8047d1..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-13.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-14.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-14.png" deleted file mode 100644 index 05f940fb4673b089f9624bbdd390bc9afc6fbac0..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-14.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-15.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-15.png" deleted file mode 100644 index 589b9791ad01931177d15d9a0b444df29c2b5a0b..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-15.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-16.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-16.png" deleted file mode 100644 index 259febb1a9717a60a3b8df4d31ec372c2eb79697..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-16.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-17.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-17.png" deleted file mode 100644 index 2abaa640b94ce5eba2002cf4a1bc340a64f6b301..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-17.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-18.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-18.png" deleted file mode 100644 index 11f6efc91eff85553e9cfa40943e46ef74e383ce..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-18.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-19.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-19.png" deleted file mode 100644 index 6bae05e16b0d2b79fdc3f1702421d146ee3183b9..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-19.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-2.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-2.png" deleted file mode 100644 index 246fd091b1a436afc4bd83adc408875de84aec20..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-2.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-20.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-20.png" deleted file mode 100644 index 40aac806ec547b8efd77a9869913292ebd57fcbd..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-20.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-21.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-21.png" deleted file mode 100644 index 7e705f463bdc8015742480b00f992a83b861b9e4..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-21.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-22.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-22.png" deleted file mode 100644 index 0d73289592dd2ecf375cd0ce83e4fdadbce8ca75..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-22.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-23.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-23.png" deleted file mode 100644 index 2d301251208668bcd072fe928efa076bc6d84222..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-23.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-24.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-24.png" deleted file mode 100644 index 64207b25a5bd38714f59105ebe7082f3920c8a15..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-24.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-25.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-25.png" deleted file mode 100644 index ee3f22f6ed6c6ab61ee32552a3e6e36f5c0c6555..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-25.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-26.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-26.png" deleted file mode 100644 index 731679a7e61e7c5c591ffc530414a1d4582d620d..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-26.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-27.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-27.png" deleted file mode 100644 index f7d6227606c4cb1f666f2c81441da6e0f8749017..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-27.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-3.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-3.png" deleted file mode 100644 index 5cceb5e7588d13b2d4fe58ec33581afbaed2d569..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-3.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-4.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-4.png" deleted file mode 100644 index c56cc5fc5d7a2f43e1eec7e96790ab1ca1e7d33d..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-4.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-5.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-5.png" deleted file mode 100644 index 929bcb32ebf44e7fd5ba879be633e1fa0d242a01..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-5.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-6.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-6.png" deleted file mode 100644 index 9b7cd849ed169c6751fa423841696cb564eeca7f..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-6.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-8.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-8.png" deleted file mode 100644 index 492314b6bc97aea185a59b6cb8f52c2ba8dd06da..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-8.png" and /dev/null differ diff --git "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-9.png" "b/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-9.png" deleted file mode 100644 index cff5ce3cb69314f0ee9887b52b322a93f00f94e7..0000000000000000000000000000000000000000 Binary files "a/\351\273\204\350\264\235\347\204\266/\345\233\276\347\211\207/image-9.png" and /dev/null differ