当前位置： 首页 > news >正文

JS-学生管理系统（功能实现）

news 文章来源：https://blog.csdn.net/Liuzhengyue_/article/details/142833816 2025/5/11 5:48:28

基础知识点掌握：

1.DOM节点

首先DOM树当做一颗到着生长的树，DOM树里面的每一个内容称为节点

节点类型：

  • 属性节点
  • 元素节点
  • 文本节点
  • 其他

2.查找节点：

查找节点分为3个类型：

  • 父节点
  • 子节点
  • 兄弟节点
（1）父节点使用   parentNode 属性

使用模板 ：子元素.parentNode

<div class="one"><div class="two">我是one的儿子</div></div><script>//查找节点const two = document.querySelector('.two')console.log(two.parentNode)</script>
（2）子节点使用    children属性

使用模板：父元素.children (注意：得到的是一个伪数组，选择的是亲儿子)

<div class="students"><p class="one">1</p><p class="one">2</p><p class="one">3</p><p class="one">4</p><p class="one">5</p></div><script>// 子节点的使用 childNodes（可以获取所有子节点包括文本空格换行注释等） 或 children（仅获取所有元素节点，返回的还有一个伪数组）const div = document.querySelector('div')console.log('div.children') //得到的是伪数组，选择的是亲儿子</script>
（3）兄弟节点使用 ：

        下一个兄弟节点  nextElementSibing 属性

        上一个兄弟节点  previousElementSibing 属性

使用模板：同级元素.nextElementSibing    或   同级元素.previousElementSibing 

 <div class="students"><p class="one">1</p><p class="one">2</p><p class="one">3</p><p class="one">4</p><p class="one">5</p></div><script>//兄弟关系查找//1.下一个兄弟节点  nextElementSibing 属性//2.上一个兄弟节点  previousElementSibing 属性const one2 = document.querySelector('div p:nth-child(2)')console.log(one2.previousElementSibling)  //上一个兄弟console.log(one2.nextElementSibling)      //下一个兄弟</script>

3.增加节点：很多时候我们需要使用到增加节点的功能，比如给一个视频进行评论

            其中分为2个步骤：1）创建一个新的节点(docmennt.createElement('标签名')

const li = document.createElement（'li'）

                                        2）追加节点

                                （插入到父元素里面的最后：父元素：appendchild(要插入的元素)）

ul.appendchild(li)

                (插入到某个元素的前面：当前元素.insertBefore(需要插入元素,元素在哪个前面)

one.insertBefore(div,one.children[0])

整体代码：

<div class="one"><div></div><div></div></div><div class="two"></div><script>// 获取第一个divconst one = document.querySelector('.one')//1.创建一个新的节点const div = document.createElement('div')//2.追加接地单，插入到父元素的最后一个子元素div.innerHTML = '我是第一个div的儿子'// one.appendChild(div)//插入到某个元素的前面，使用   父元素.insertBefore(要插入的元素，哪一个元素之前)  one.insertBefore(div,one.children[0])</script>

4.克隆节点：将原有的节点复制放到指定位置

<ul><li>1</li><li>2</li><li>3</li></ul><script>//1.获得元素const ul = document.querySelector('ul')//2.克隆元素const li = ul.children[0].cloneNode(true)//3.追加节点ul.appendChild(li)</script>

5.删除节点：注意删除节点和隐藏节点是不一样的，隐藏节点，隐藏后它还是占用位置display：none

// 删除节点 父元素.removeChlid(子元素)const ul = document.querySelector('ul')ul.removeChild(ul.children[0])

学生管理系统管理页面实现（增加，删除）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>学生信息管理</title><link rel="stylesheet" href="css/index.css" />
</head><body><h1>新增学员</h1><form class="info" autocomplete="off">   <!-- 禁止自动填充 -->姓名：<input type="text" class="uname" name="uname" />年龄：<input type="text" class="age" name="age" />性别:<select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select>薪资：<input type="text" class="salary" name="salary" />就业城市：<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></form><h1>就业榜</h1><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1001</td><td>欧阳霸天</td><td>19</td><td>男</td><td>15000</td><td>上海</td><td><a href="javascript:">删除</a></td></tr> --></tbody></table><script>// 获取所有带name属性的元素const item = document.querySelectorAll('[name]')// 创建数组const arr = []//获取元素 const uname = document.querySelector('.uname')const age = document.querySelector('.age')const gender = document.querySelector('.gender')const salary = document.querySelector('.salary')const city = document.querySelector('.city')const tbody = document.querySelector('tbody')// 表单提交事件const info = document.querySelector('.info')info.addEventListener('submit', function(e) {// 阻止表单默认跳转行为e.preventDefault()//  进行表单验证，如果不通过直接中断，不进行添加元素for(let i = 0;i <item.length; i++) {if(item[i].value === '') {return alert('输入内容不能为空')}}// 创建性的对象const obj = {stuId:arr.length+1,uname:uname.value,age:age.value,gender:gender.value,salary:salary.value,city:city.value}// 追加到数组里面arr.push(obj)// console.log(arr)// 清空表单this.reset()render()})// 渲染函数function render() {// 先清空tbody，把最新数组里面得到数据渲染完毕tbody.innerHTML = ''for(let i = 0 ;i < arr.length; i++) {// 生成trconst tr = document.createElement('tr')tr.innerHTML = `<td>${arr[i].stuId}</td><td>${arr[i].uname}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td><td>${arr[i].salary}</td><td>${arr[i].city}</td><td><a href="javascript:" data-id = ${i}>删除</a></td>`// 追加元素tbody.appendChild(tr)}}// 数据删除tbody.addEventListener('click',function(e) {if(e.target.tagName === 'A') {// 使用自己定义属性data-idarr.splice(e.target.dataset.id,1)render()}})</script></body></html>

相关文章：

JS-学生管理系统（功能实现）

基础知识点掌握&#xff1a; 1.DOM节点 首先DOM树当做一颗到着生长的树&#xff0c;DOM树里面的每一个内容称为节点 节点类型&#xff1a; 属性节点元素节点文本节点其他 2.查找节点&#xff1a; 查找节点分为3个类型&#xff1a; 父节点子节点兄弟节点 &#xff08;1&…...

编程日记 2024/10/13 11:18:25

C# 屏幕录制工具

屏幕录制工具 开发语音&#xff1a;C# vb.net 下载地址&#xff1a;https://download.csdn.net/download/polloo2012/89879996 功能&#xff1a;屏幕录制&#xff0c;声卡采集&#xff0c;麦克风采集。 屏幕录制&#xff1a;录制屏幕所有操作&#xff0c;并转换视频格式&…...

编程日记 2024/10/13 11:17:23

前端开发攻略---前端ocr图片文字提取功能

1、引入资源 通过链接引用 <script src"https://cdn.bootcdn.net/ajax/libs/tesseract.js/5.1.0/tesseract.min.js"></script> npm或其他方式下载 npm i tesseract 2、示例 <!DOCTYPE html> <html lang"en"><head><meta…...

编程日记 2024/10/13 11:15:20

平凯星辰亮相 2024开放原子开源生态大会，分享开源教育及社区治理经验

9 月 25-27 日&#xff0c;2024 开放原子开源生态大会在北京成功举办&#xff0c;本次大会以“开源赋能产业&#xff0c;生态共筑未来”为主题&#xff0c;由开放原子开源基金会主办&#xff0c;聚焦地方开源实践、企业开源建设思路&#xff0c;围绕开源生态建设&#xff0c;突…...

编程日记 2024/10/13 11:14:19

OCR经典神经网络(二)文本检测算法DBNet算法原理及其在icdar15数据集上的应用

OCR经典神经网络(二)文本检测算法DBNet算法原理及其在icdar15数据集上的应用 场景文本检测任务&#xff0c;一直以来是OCR整个任务中最为重要的一环。虽然有一些相关工作是端对端的&#xff0c;但是从工业界来看&#xff0c;相关落地应用较为困难。因此&#xff0c;两阶段的OC…...

编程日记 2024/10/13 11:13:18

论文笔记：Prompt-Based Meta-Learning For Few-shot Text Classification

论文来源&#xff1a;EMNLP 2022 论文地址&#xff1a;2022.emnlp-main.87.pdf (aclanthology.org) 代码地址&#xff1a;GitHub - MGHZHANG/PBML GB/T 7714 Zhang H, Zhang X, Huang H, et al. Prompt-Based Meta-Learning For Few-shot Text Classification[C]//Proceedi…...

编程日记 2024/10/13 11:12:16

光耦知识分享 | AC晶体管光耦在照明控制领域的应用与选型推荐

随着智能建筑与智能家居技术的迅猛崛起&#xff0c;照明控制技术亦随之日新月异。传统的照明控制手段已难以适应现代化、智能化的新需求。在这样的技术革新浪潮中&#xff0c;AC晶体管光耦以其卓越的性能和可靠性&#xff0c;成为了照明控制领域中不可或缺的一环。AC晶体管光耦…...

编程日记 2024/10/13 11:11:16

RBTree(红黑树)的介绍和实现

欢迎来到杀马特的主页&#xff1a;羑悻的小杀马特.-CSDN博客 目录 ​编辑 一红黑树介绍&#xff1a; 1.1红黑树概念&#xff1a; 1.2红黑树遵循的原则&#xff1a; 1.3红黑树效率分析&#xff1a; 二.红黑树的实现&#xff1a; 2.1红黑树结构&#xff1a; 2.2红黑树节点…...

编程日记 2024/10/13 11:07:11

信息安全数学基础（30）指数及其基本性质

一、指数的定义 数学定义&#xff1a; 指数是幂运算a3表示3个a相乘。 经济学定义&#xff1a; 广义地讲&#xff0c;任何两个数值对比形成的相对数都可以称为指数。狭义地讲&#xff0c;指数是用于测定多个项目在不同场合下综合变动的一种特殊相对数。 二、指数的基本性质…...

编程日记 2024/10/13 11:06:09

Android开发首页底部tab切换图标有动画效果

Android开发首页底部tab切换图标有动画效果 主页tab切换很正常&#xff0c;但往往加上写动画更好看 一、思路&#xff1a; 用属性动画&#xff0c;并且事先准备多张图片&#xff0c;用于切换后播放动画 二、效果图&#xff1a; 单纯图看不出来&#xff0c;看下视频效果 An…...

编程日记 2024/10/13 11:05:08

Web前端高级工程师培训：异步处理专题

异步处理专题 课前准备 工具 编辑器 VSCode浏览器 Chorme 前置知识 ES6基础语法 课堂主题 同步及异步概念方块运动的实现promise的用法then的返还值Async 函数 和 await 课堂目标 理解并学会使用promise使用方式以及async 、await的使用 同步异步概念 js是单线程 单线程…...

编程日记 2024/10/13 11:04:07

ESP32-C3实现热点并在浏览器中输入域名访问网页

源代码 #include <WiFi.h> // 引入 WiFi 库&#xff0c;用于处理网络连接 #include <WebServer.h> // 引入 WebServer 库&#xff0c;用于创建 HTTP 服务器 #include <DNSServer.h> // 引入 DNSServer 库&#xff0c;用于处理 DNS 请…...

编程日记 2024/10/13 11:03:06

基于Python的自然语言处理系列（32）：spaCy属性扩展

1. 介绍 在 spaCy 中，自定义扩展属性让我们能够为 Doc、Token 和 Span 对象添加元数据。通过这些扩展属性，开发者可以根据需要存储额外的上下文信息，或者动态计算属性值。 自定义属性通过点下划线（dot-underscore）属性访问，例如 token._.is_color。这种命名方式确保这些属…...

编程日记 2024/10/13 11:00:52

STM32 输入捕获模式详解：PWM 输入捕获与 PWI 模式（续篇）

在前两篇文章中&#xff0c;我们探讨了 STM32 输入捕获的基础和 PWI 模式的工作原理&#xff0c;特别是定时器的两个通道如何协同工作以捕获 PWM 信号。本文将进一步结合 STM32 标准库函数中的 TIM_PWMIConfig()&#xff0c;来讲解如何通过库函数配置定时器实现 PWI 模式。 我…...

编程日记 2024/10/13 10:59:50

【C++】set/map（重点解析）

目录 一、关联式容器和序列式容器 二、C中的键值对——pair 1.概念 2.定义 3.构造pair 三.set 1.construct构造 2.iterator迭代器 3.insert插入 4.erase删除 5.find查找 6.lower_bound和upper_bound 7.count 四.multiset 五.map 1.insert 2.operator[] 一、…...

编程日记 2024/10/13 10:58:48

【算法篇】动态规划类（1）（笔记）

目录 一、理论基础 1. 大纲 2. 动态规划的解题步骤 二、LeetCode 题目 1. 斐波那契数 2. 爬楼梯 3. 使用最小花费爬楼梯 4. 不同路径 5. 不同路径 II 6. 整数拆分 7. 不同的二叉搜索树 一、理论基础 1. 大纲 动态规划&#xff0c;英文&#xff1a;Dynamic Programm…...

编程日记 2024/10/13 10:53:45

mysql学习教程，从入门到精通，SQL 约束（Constraints）（41）

在数据库设计中&#xff0c;约束&#xff08;Constraints&#xff09;用于确保数据的准确性和完整性。它们通过限制可以插入到数据库表中的数据类型来防止无效数据。SQL 中有几种常见的约束类型&#xff0c;包括主键约束&#xff08;Primary Key&#xff09;、外键约束&#xf…...

编程日记 2024/10/13 10:52:43

使用CSS3与JavaScript实现炫酷的3D旋转魔方及九宫格交换动效

文章目录 前言一、项目需求背景二、CSS3 3D基础知识介绍2.1 什么是CSS3 3D&#xff1f;2.2 主要使用的CSS属性 三、使用HTML和CSS搭建魔方结构四、让魔方动起来&#xff1a;CSS3动画五、九宫格数字交换的JavaScript实现5.1 九宫格布局5.2 随机交换数字 六、随机交换与相邻格子的…...

编程日记 2024/10/13 10:51:36

springboot项目通过maven的profile功能实现通过不同文件夹的方式来组织不同环境配置文件

写在前面 本文看下springboot项目如何通过文件夹的方式来组织不同环境配置文件。 1&#xff1a;正文 一般的我们写springboot项目时配置文件是这个样子的&#xff1a; appliction.yaml --> 通过spring.profiles.activexxx来激活某个指定后缀的配置文件 application-evn1…...

编程日记 2024/10/13 10:46:31

GAN(Generative Adversarial Nets)

GAN(Generative Adversarial Nets) 引言 GAN由Ian J. Goodfellow等人提出&#xff0c;是Ian J. Goodfellow的代表作之一&#xff0c;他还出版了大家耳熟能详的花书&#xff08;Deep Learning深度学习&#xff09;&#xff0c;GAN主要的思想是同时训练两个模型&#xff0c;生成…...

编程日记 2024/10/13 10:45:29

linux下使用mpi求自然数和

搭建MPI并行计算环境&#xff0c;编写 MPI程序&#xff0c;求和 1 23....1 0000。 要求: 1.使用100个进程; 2.进程0计算1 2...100, 进程1计算101 102... 200, ..... 进程99计算9901 9902... 10000; 3.调用计时函数,分别输出每个进程的计算时间; 4.需使用MPI集群通信函数和同…...

编程日记 2024/10/13 10:42:26

WebGl学习使用attribute变量绘制一个水平移动的点

在WebGL编程中&#xff0c;attribute变量是一种特殊类型的变量&#xff0c;用于从客户端传递数据到顶点着色器。这些数据通常包括顶点的位置、颜色、纹理坐标等&#xff0c;它们是与每个顶点直接相关的信息。attribute变量在顶点着色器中声明&#xff0c;并且对于每个顶点来说都…...

编程日记 2024/10/13 10:38:23

机器学习四大框架详解及实战应用：PyTorch、TensorFlow、Keras、Scikit-learn

目录 框架概述PyTorch&#xff1a;灵活性与研究首选TensorFlow&#xff1a;谷歌加持的强大生态系统Keras&#xff1a;简洁明了的高层 APIScikit-learn&#xff1a;传统机器学习的必备工具实战案例 图像分类实战自然语言处理实战回归问题实战 各框架的对比总结选择合适的框架 1…...

编程日记 2024/10/13 10:35:20

linux源码安装slurm以及mung和openssl

一、源码安装munge 1、编译安装munge &#xff08;1&#xff09;下载munge地址&#xff1a;https://github.com/dun/munge/releases &#xff08;2&#xff09;解压编译安装&#xff1a; 1 2 3 4 5 6 7 8 创建/data目录 复制文件munge-0.5.15.tar.xz 到/data目录下 tar -Jx…...

编程日记 2024/10/13 10:34:19

分享蓝牙耳机A2DP音频卡顿原因及解决思路

背景 最近一直在更新博客&#xff0c;我觉得写博客有三个好处&#xff0c;一是很多东西时间久了就会忘&#xff0c;记下来方便自己以后回忆和总结&#xff0c;二是记下来可以加深自己对知识的理解&#xff0c;三是可以知识分享&#xff0c;方便他人。 言归正传&#xff0c;今天…...

编程日记 2024/10/13 10:31:16

Mac 下编译 libaom 源码教程

AV1 AV1是一种开放、免版税的视频编码格式&#xff0c;由开放媒体联盟&#xff08;AOMedia&#xff09;开发&#xff0c;旨在提供高压缩效率和优秀的视频质量。AV1支持多种分辨率&#xff0c;包括SD、HD、4K和8K&#xff0c;并适用于视频点播&#xff08;VOD&#xff09;、直播…...

编程日记 2024/10/13 10:30:14

【成品设计】基于Arduino平台的物联网智能灯

《基于Arduino平台的物联网智能灯》 整体功能&#xff1a; 这个任务中要求实现一个物联网智能灯。实际测试环境中要求设备能够自己创建一个热点&#xff0c;连接这个热点后能自动弹出控制界面&#xff08;强制门户&#xff09;。 功能点 基础功能 (60分) 要求作品至少有2个灯…...

编程日记 2024/10/13 10:29:13

安装和配置k8s可视化UI界面dashboard-1.20.6

安装和配置k8s可视化UI界面dashboard-1.20.6 1.环境规划2.初始化服务器1&#xff09;配置主机名2&#xff09;设置IP为静态IP3&#xff09;关闭selinux4&#xff09;配置主机hosts文件5&#xff09;配置服务器之间免密登录6&#xff09;关闭交换分区swap&#xff0c;提升性能7&…...

编程日记 2024/10/13 10:26:06

VLAN:虚拟局域网

VLAN:虚拟局域网 交换机和路由器协同工作后&#xff0c;将原先的一个广播域&#xff0c;逻辑上&#xff0c;切分为多个广播域。 第一步:创建VLAN [SW1]dispaly vlan 查询vlan VID&#xff08;VLAN ID&#xff09;:用来区分和标定不同的vlan 由12位二进制构成 范围: 0-4…...

编程日记 2024/10/13 10:25:04

利用可解释性技术增强制造质量预测模型

概述 论文地址&#xff1a;https://arxiv.org/abs/2403.18731 本研究提出了一种利用可解释性技术提高机器学习&#xff08;ML&#xff09;模型性能的方法。该方法已用于铣削质量预测&#xff0c;这一过程首先训练 ML 模型&#xff0c;然后使用可解释性技术识别不需要的特征并去…...

编程日记 2024/10/13 10:23:02