From fcd818c6b204ab85bf6d1218655a94ee681af219 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E5=B1=95?= <1742965070@qq.com> Date: Fri, 24 Nov 2023 04:59:23 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=E6=9E=97=E5=B1=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 林展 <1742965070@qq.com> --- .../20231123/\347\254\224\350\256\260.md" | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 "03\346\236\227\345\261\225/20231123/\347\254\224\350\256\260.md" diff --git "a/03\346\236\227\345\261\225/20231123/\347\254\224\350\256\260.md" "b/03\346\236\227\345\261\225/20231123/\347\254\224\350\256\260.md" new file mode 100644 index 0000000..7d33cfc --- /dev/null +++ "b/03\346\236\227\345\261\225/20231123/\347\254\224\350\256\260.md" @@ -0,0 +1,5 @@ +# 笔记 + +取消默认行为 事件对象.preventDefault() + +创建新节点 .document.createElement(标签名) \ No newline at end of file -- Gitee From 7bd1b0c8df9ef9bf3d2c95c6f0e031a234325fb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E5=B1=95?= <1742965070@qq.com> Date: Sun, 26 Nov 2023 08:40:39 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=E6=9E=97=E5=B1=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 林展 <1742965070@qq.com> --- .../css/index.css" | 71 +++++++++ .../do.js" | 60 ++++++++ ...\350\241\250\346\241\210\344\276\213.html" | 54 +++++++ ...10\345\231\250\345\217\202\346\225\260.md" | 137 ++++++++++++++++++ 4 files changed, 322 insertions(+) create mode 100644 "03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" create mode 100644 "03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/do.js" create mode 100644 "03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html" create mode 100644 "03\346\236\227\345\261\225/20231124/\346\234\254\345\234\260\345\255\230\345\202\250localStorage,\345\273\266\350\277\237\345\207\275\346\225\260,\346\265\217\350\247\210\345\231\250\345\217\202\346\225\260.md" diff --git "a/03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" "b/03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" new file mode 100644 index 0000000..cd74974 --- /dev/null +++ "b/03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" @@ -0,0 +1,71 @@ +* { + margin: 0; + padding: 0; +} + +a { + text-decoration: none; + color:#721c24; +} +h1 { + text-align: center; + color:#333; + margin: 20px 0; + +} +table { + margin:0 auto; + width: 800px; + border-collapse: collapse; + color:#004085; +} +th { + padding: 10px; + background: #cfe5ff; + + font-size: 20px; + font-weight: 400; +} +td,th { + border:1px solid #b8daff; +} +td { + padding:10px; + color:#666; + text-align: center; + font-size: 16px; +} +tbody tr { + background: #fff; +} +tbody tr:hover { + background: #e1ecf8; +} +.info { + width: 900px; + margin: 50px auto; + text-align: center; +} +.info input, .info select { + width: 80px; + height: 27px; + outline: none; + border-radius: 5px; + border:1px solid #b8daff; + padding-left: 5px; + box-sizing: border-box; + margin-right: 15px; +} +.info button { + width: 60px; + height: 27px; + background-color: #004085; + outline: none; + border: 0; + color: #fff; + cursor: pointer; + border-radius: 5px; +} +.info .age { + width: 50px; +} \ No newline at end of file diff --git "a/03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/do.js" "b/03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/do.js" new file mode 100644 index 0000000..a38b934 --- /dev/null +++ "b/03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/do.js" @@ -0,0 +1,60 @@ +let i = localStorage.getItem(`a`) || 1;//键值对的键 +let tbody = document.querySelector(`tbody`);//下面的表格 +let uname = document.querySelector(`.uname`);//名字 +let age = document.querySelector(`.age`);//姓名 +let gender = document.querySelector(`.gender`);//性别 +let salary = document.querySelector(`.salary`);//工资 +let city = document.querySelector(`.city`);//城市 +let btn = document.querySelector(`.add`);//按钮 +//按钮的点击事件 +btn.addEventListener(`click`, function (e) { + e.preventDefault(); + if (uname.value == `` || age.value == `` || salary.value == ``) { + alert(`没有填完哦`); + } else { + //键值对的值 + let man = JSON.stringify({ + id: i, + uname: uname.value, + age: age.value, + gender: gender.value, + salary: salary.value, + city: city.value + }) + document.querySelector(`form`).reset(); + localStorage.setItem(`${i++}`, `${man}`); + xr(); + localStorage.setItem(`a`, `${i}`) + } +}) +//表格渲染 +//调整把列表数据从自动添加变为由数组添加 +function xr() { + tbody.innerHTML = ``; + for (let index = 0; index < i; index++) { + let man = JSON.parse(localStorage.getItem(`${index}`)) + if (man == null) { continue; } + else if (man != null) { + let table = document.createElement(`tr`); + table.innerHTML = + `${man.id} + ${man.uname} + ${man.age} + ${man.gender} + ${man.salary} + ${man.city} + + 删除 + ` + tbody.appendChild(table); + } + } +} +//获取表单对象当点击时如果时a标签则删 +tbody.addEventListener(`click`, function (e) { + if (e.target.tagName === `A`) { + localStorage.removeItem(`${e.target.dataset.id}`) + xr(); + } +}) +xr(); \ No newline at end of file diff --git "a/03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html" "b/03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html" new file mode 100644 index 0000000..89b2d0c --- /dev/null +++ "b/03\346\236\227\345\261\225/20231124/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html" @@ -0,0 +1,54 @@ + + + + + + + + 学生信息管理 + + + + +

新增学员

+
+ 姓名： + 年龄： + 性别: + + 薪资： + 就业城市： + +
+

就业榜

+ + + + + + + + + + + + + + + + + +
学号姓名年龄性别薪资就业城市操作
+ + + + \ No newline at end of file diff --git "a/03\346\236\227\345\261\225/20231124/\346\234\254\345\234\260\345\255\230\345\202\250localStorage,\345\273\266\350\277\237\345\207\275\346\225\260,\346\265\217\350\247\210\345\231\250\345\217\202\346\225\260.md" "b/03\346\236\227\345\261\225/20231124/\346\234\254\345\234\260\345\255\230\345\202\250localStorage,\345\273\266\350\277\237\345\207\275\346\225\260,\346\265\217\350\247\210\345\231\250\345\217\202\346\225\260.md" new file mode 100644 index 0000000..0054a98 --- /dev/null +++ "b/03\346\236\227\345\261\225/20231124/\346\234\254\345\234\260\345\255\230\345\202\250localStorage,\345\273\266\350\277\237\345\207\275\346\225\260,\346\265\217\350\247\210\345\231\250\345\217\202\346\225\260.md" @@ -0,0 +1,137 @@ +# 笔记 + +小知识:表单里面的按钮具有submit的作用 + +### localStorage + +> `localStorage`是JavaScript中的一个Web Storage API，用于在浏览器中存储和访问数据。它是一个简单的键值存储系统，可以存储字符串类型的数据。 +> +> 通过使用`localStorage`，您可以在浏览器中存储数据，并在页面重新加载时保留这些数据。这对于存储用户偏好设置、表单数据、购物车内容等非敏感信息非常有用。 +> +> 在这个API里面存储的数据均为键值对，用自定义的键来为存储的值标明，可以查长度，遍历只能用foreach遍历 +> +> +> +> #### 方法(增删改查) +> +> 存储/修改数据 `setItem(键,值)` 可以直接覆盖 +> +> 获取数据 `getItem(键)` +> +> 删除数据 `removeItem(键)` +> +> 清空所有数据 `clear()` +> +> +> +> **注意** +> +> 在localStorage里存储的不管是键还是值都是字符串，也只能存储字符串，存储复杂类型要用`json`里面的方法 +> +> +> +> #### `json` +> +> JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，通常用于通过网络传输数据。它基于JavaScript语法，但是可以被多种编程语言解析和生成。JSON格式的数据可以用于存储、传输和表示结构化数据。 +> +> 在目前暂时不需要了解太多，如果要把复杂类型存储到localStorage则需要转换成`json字符串` +> +> - `JSON.stringify`方法用于将JavaScript对象转换为JSON格式的字符串。(转换) +> +> - `JSON.parse`方法用于将JSON格式的字符串转换回JavaScript对象。(还原) +> +> +> +> #### 存储流程 +> +> 总体的流程可以概括为 +> +> 对象 通过`json`转字符串(`stringify`) 传入 localStorage +> +> localStorage 通过`json`转字符串(`parse`) 转换 对象 +> +> #### 工具 +> +> 在浏览器中可以通过F12的application查看(中文时找应用程序) + +### 间歇函数(`setTimeout`) + +> `setTimeout`是JavaScript中的一个内置函数，用于在一定时间延迟后执行指定的函数或一段代码。 +> +> ```js +> setTimeout(function, delay, arg1, arg2, ...); +> +> function：要执行的函数或要执行的代码块。 +> delay：延迟的毫秒数，表示多久后执行函数或代码块。 +> arg1, arg2, ...（可选）：传递给函数的参数。可以有多个参数。 +> ``` +> +> 和间隔函数的区别在与，这个只跑一次，而间隔函数可以根据定的事件重复跑 +> +> #### `clearTimeout(函数)`清除间歇函数 +> +> 意如其名,可以将间歇函数清除,而且可以在间歇函数被定义时直接清除 + +### local (页面的URL信息) + +> `location`是JavaScript中的内置对象，用于获取和操作当前页面的URL信息。 +> +> 通过`location`对象，我们可以获取或修改以下与URL相关的信息： +> +> - `location.href`：获取或设置完整的URL（包括协议、域名、路径和查询参数）。可以给这个赋予网址来直接跳转页面。 +> - `location.host`：获取或设置主机名和端口号。 +> - `location.hostname`：获取或设置主机名。 +> - `location.protocol`：获取或设置协议。 +> - `location.pathname`：获取或设置路径部分。 +> - `location.search`：获取或设置查询参数部分（以`?`开头）。 +> - `location.hash`：获取或设置URL中的片段标识符（以`#`开头）。 +> - `location.reload()`：重新加载当前页面。 +> - `location.replace(url)`：将当前页面替换为指定的URL。 + +### navigator(浏览器的信息) + +> `navigator`是JavaScript中的一个全局变量，表示当前浏览器的信息。通过`navigator`对象，可以获取到关于浏览器的各种信息，例如浏览器名称、版本、语言设置等。 +> +> 常见的`navigator`属性： +> +> - `navigator.userAgent`: 返回包含浏览器厂商和版本信息的字符串。 +> - `navigator.vendor`: 返回浏览器厂商名称。 +> - `navigator.platform`: 返回浏览器运行的操作系统平台。 +> - `navigator.language`: 返回浏览器语言设置，通常是ISO 639-1代码。 +> - `navigator.onLine`: 返回一个布尔值，表示浏览器是否连接到互联网。 +> +> 以下是一些常见的`navigator`方法： +> +> - `navigator.geolocation.getCurrentPosition()`: 获取设备的地理位置信息。 +> - `navigator.permissions.query()`: 查询用户是否对某个API或功能有权限访问。 +> - `navigator.mediaDevices.getUserMedia()`: 请求用户授权访问媒体设备（例如摄像头或麦克风）。 + +### history(浏览器历史记录) + +> `history`是JavaScript中的一个全局对象，它提供了在浏览器历史记录中前进或后退的功能。通过`history`对象，可以访问当前浏览器窗口的所有历史记录，并且可以在不刷新页面的情况下修改URL。 +> +> 常见的`history`属性和方法： +> +> - `history.length`: 返回当前浏览器历史记录的长度（即浏览器已经访问过的页面数量）。 +> +> - `history.back()`: 在浏览器历史记录中后退一页。 +> +> - `history.forward()`: 在浏览器历史记录中前进一页。 +> +> - `history.go(n)`: 在浏览器历史记录中移动n个页面，为正数时前进n, 为负数时后退n。 +> +> +> +> - `history.pushState(stateObj, title, url)`: 向浏览器历史记录栈中添加一个新的状态，并且更新当前URL。其中，`stateObj`是一个JavaScript对象，表示新状态的数据；`title`是新页面的标题；`url`是新页面的URL。 +> +> - `history.replaceState(stateObj, title, url)`: 与`pushState()`方法类似，但是不会向浏览器历史记录栈中添加一个新状态，而是替换当前状态。 + +### 网址中的?和# + +> 问号（?）用于表示查询字符串的开始，用于向服务器传递参数或在前端进行处理。查询字符串是一系列键值对的集合，键和值之间用等号（=）连接，不同的键值对之间用与号（&）连接。 +> +> 井号（#）用于表示片段标识符（fragment identifier），用于定位文档中的具体位置或指定特定的片段。片段标识符通常用于跳转到页面内部的锚点链接。 +> +> 当浏览器加载网页时，问号后面的查询字符串部分通常会被发送给服务器，以便服务器可以根据这些参数执行相应的操作。而片段标识符部分仅用于在页面中定位特定的位置。 +> +> 在前端开发中，可以使用JavaScript来获取和操作URL中的查询字符串和片段标识符。可以使用`location.search`来获取查询字符串部分(?)，使用`location.hash`来获取片段标识符部分(#)。 \ No newline at end of file -- Gitee