JS-学生管理系统(功能实现)
基础知识点掌握:
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-学生管理系统(功能实现)
基础知识点掌握: 1.DOM节点 首先DOM树当做一颗到着生长的树,DOM树里面的每一个内容称为节点 节点类型: 属性节点元素节点文本节点其他 2.查找节点: 查找节点分为3个类型: 父节点子节点兄弟节点 (1&…...
C# 屏幕录制工具
屏幕录制工具 开发语音:C# vb.net 下载地址:https://download.csdn.net/download/polloo2012/89879996 功能:屏幕录制,声卡采集,麦克风采集。 屏幕录制:录制屏幕所有操作,并转换视频格式&…...
前端开发攻略---前端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开放原子开源生态大会,分享开源教育及社区治理经验
9 月 25-27 日,2024 开放原子开源生态大会在北京成功举办,本次大会以“开源赋能产业,生态共筑未来”为主题,由开放原子开源基金会主办,聚焦地方开源实践、企业开源建设思路,围绕开源生态建设,突…...
OCR经典神经网络(二)文本检测算法DBNet算法原理及其在icdar15数据集上的应用
OCR经典神经网络(二)文本检测算法DBNet算法原理及其在icdar15数据集上的应用 场景文本检测任务,一直以来是OCR整个任务中最为重要的一环。虽然有一些相关工作是端对端的,但是从工业界来看,相关落地应用较为困难。因此,两阶段的OC…...
论文笔记:Prompt-Based Meta-Learning For Few-shot Text Classification
论文来源:EMNLP 2022 论文地址:2022.emnlp-main.87.pdf (aclanthology.org) 代码地址: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…...
光耦知识分享 | AC晶体管光耦在照明控制领域的应用与选型推荐
随着智能建筑与智能家居技术的迅猛崛起,照明控制技术亦随之日新月异。传统的照明控制手段已难以适应现代化、智能化的新需求。在这样的技术革新浪潮中,AC晶体管光耦以其卓越的性能和可靠性,成为了照明控制领域中不可或缺的一环。AC晶体管光耦…...
RBTree(红黑树)的介绍和实现
欢迎来到杀马特的主页:羑悻的小杀马特.-CSDN博客 目录 编辑 一红黑树介绍: 1.1红黑树概念: 1.2红黑树遵循的原则: 1.3红黑树效率分析: 二.红黑树的实现: 2.1红黑树结构: 2.2红黑树节点…...
信息安全数学基础(30)指数及其基本性质
一、指数的定义 数学定义: 指数是幂运算a3表示3个a相乘。 经济学定义: 广义地讲,任何两个数值对比形成的相对数都可以称为指数。狭义地讲,指数是用于测定多个项目在不同场合下综合变动的一种特殊相对数。 二、指数的基本性质…...
Android开发首页底部tab切换图标有动画效果
Android开发首页底部tab切换图标有动画效果 主页tab切换很正常,但往往加上写动画更好看 一、思路: 用属性动画,并且事先准备多张图片,用于切换后播放动画 二、效果图: 单纯图看不出来,看下视频效果 An…...
Web前端高级工程师培训:异步处理专题
异步处理专题 课前准备 工具 编辑器 VSCode浏览器 Chorme 前置知识 ES6基础语法 课堂主题 同步及异步概念方块运动的实现promise的用法then的返还值Async 函数 和 await 课堂目标 理解并学会使用promise使用方式以及async 、await的使用 同步异步概念 js是单线程 单线程…...
ESP32-C3实现热点并在浏览器中输入域名访问网页
源代码 #include <WiFi.h> // 引入 WiFi 库,用于处理网络连接 #include <WebServer.h> // 引入 WebServer 库,用于创建 HTTP 服务器 #include <DNSServer.h> // 引入 DNSServer 库,用于处理 DNS 请…...
基于Python的自然语言处理系列(32):spaCy属性扩展
1. 介绍 在 spaCy 中,自定义扩展属性让我们能够为 Doc、Token 和 Span 对象添加元数据。通过这些扩展属性,开发者可以根据需要存储额外的上下文信息,或者动态计算属性值。 自定义属性通过点下划线(dot-underscore)属性访问,例如 token._.is_color。这种命名方式确保这些属…...
STM32 输入捕获模式详解:PWM 输入捕获与 PWI 模式(续篇)
在前两篇文章中,我们探讨了 STM32 输入捕获的基础和 PWI 模式的工作原理,特别是定时器的两个通道如何协同工作以捕获 PWM 信号。本文将进一步结合 STM32 标准库函数中的 TIM_PWMIConfig(),来讲解如何通过库函数配置定时器实现 PWI 模式。 我…...
【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[] 一、…...
【算法篇】动态规划类(1)(笔记)
目录 一、理论基础 1. 大纲 2. 动态规划的解题步骤 二、LeetCode 题目 1. 斐波那契数 2. 爬楼梯 3. 使用最小花费爬楼梯 4. 不同路径 5. 不同路径 II 6. 整数拆分 7. 不同的二叉搜索树 一、理论基础 1. 大纲 动态规划,英文:Dynamic Programm…...
mysql学习教程,从入门到精通,SQL 约束(Constraints)(41)
在数据库设计中,约束(Constraints)用于确保数据的准确性和完整性。它们通过限制可以插入到数据库表中的数据类型来防止无效数据。SQL 中有几种常见的约束类型,包括主键约束(Primary Key)、外键约束…...
使用CSS3与JavaScript实现炫酷的3D旋转魔方及九宫格交换动效
文章目录 前言一、项目需求背景二、CSS3 3D基础知识介绍2.1 什么是CSS3 3D?2.2 主要使用的CSS属性 三、使用HTML和CSS搭建魔方结构四、让魔方动起来:CSS3动画五、九宫格数字交换的JavaScript实现5.1 九宫格布局5.2 随机交换数字 六、随机交换与相邻格子的…...
springboot项目通过maven的profile功能实现通过不同文件夹的方式来组织不同环境配置文件
写在前面 本文看下springboot项目如何通过文件夹的方式来组织不同环境配置文件。 1:正文 一般的我们写springboot项目时配置文件是这个样子的: appliction.yaml --> 通过spring.profiles.activexxx来激活某个指定后缀的配置文件 application-evn1…...
GAN(Generative Adversarial Nets)
GAN(Generative Adversarial Nets) 引言 GAN由Ian J. Goodfellow等人提出,是Ian J. Goodfellow的代表作之一,他还出版了大家耳熟能详的花书(Deep Learning深度学习),GAN主要的思想是同时训练两个模型,生成…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗? 在ComfyUI中实现图生视频并延长到5秒,需要结合多个扩展和技巧。以下是完整解决方案: 核心工作流配置(24fps下5秒120帧) #mermaid-svg-yP…...
第八部分:阶段项目 6:构建 React 前端应用
现在,是时候将你学到的 React 基础知识付诸实践,构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段,你可以先使用模拟数据,或者如果你的后端 API(阶段项目 5)已经搭建好,可以直接连…...
