jquery dom节点操作完成备考抽查演练和英雄排名表
2024-06-01 10:14:56
1.备考抽查演练
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../js/jquery-3.3.1.min.js"></script><style>div{width: 30%;height: 600px;border-right: 1px solid red ;float: left;}</style>
</head>
<body>
<div><h3>1.1.1 实施标准化教学活动</h3><select name="" id="sel1"><option value="">--请选择场景--</option></select> <br><h3>1.1.2 负责所带班级升学率、合格率、就业率</h3><select name="" id="sel2"><option value="">--请选择场景--</option></select><br><h3>1.1.3 个人能力提升</h3><select name="" id="sel3"><option value="">--请选择场景--</option></select><br>
</div>
<div><h3>在此答题：<span id="sp1"></span></h3><textarea name="" id="" cols="50" rows="30"></textarea><br><input type="button" value="核对答案">
</div>
<div><h3>正确答案：</h3><ul id="ul1"><li></li></ul>
</div></body>
<script>var arr1=['(01)准备开学典礼','(02)参加开学典礼','(03)教员交班','(04)教员接班','(05)准备各学期第一次理论课','(06)讲授各学期第一次理论课','(07)准备常规理论课','(08)讲授常规理论课','(09)总结理论课','(10)准备上机课','(11)实施上机课','(12)总结上机课','(13)收取、批改、发还和点评作业','(14)准备项目案例','(15)讲授项目案例','(16)总结项目案例','(17)准备技术讲座或演讲','(18)实施技术讲座或演讲']var arr2=['(01)与班主任当面沟通学员学习情况','(02)与问题学员谈话','(03)准备小班辅导','(04)实施小班辅导','(05)出内部测试题','(06)组织所带班级的内部测试','(07)批阅、分析内部测试（机试）成绩','(08)批阅、分析内部测试（笔试）成绩','(09)准备体验课','(10)实施体验课']var arr3=['(01)准备试讲课','(02)讲授试讲课','(03)总结试讲课','(04)准备参加公司教员认证培训']//通过for循环把arr1数组里面的内容追加到下拉框中for (let i = 0; i <arr1.length ; i++) {//获取id为sel1的下拉框添加元素 $("#sel1").append("<option>"+arr1[i]+"</option>")}for (let i = 0; i <arr2.length ; i++) {$("#sel2").append("<option>"+arr2[i]+"</option>")}for (let i = 0; i <arr3.length ; i++) {$("#sel3").append("<option>"+arr2[i]+"</option>")}//获取所有的下拉框标签绑定改变时间$("select").change(function () {//获取id值为sp1的标签添加文本为当前点击的下拉框value值$("#sp1").text($(this).val())})
</script>
</html>
2.英雄排名表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js"></script><style>table{border:1px solid greenyellow;width: 300px;}.hero{display: none;}.show{display: block;}</style>
</head>
<body><h3>三国英雄人物排行榜</h3><input type="button" value="我来添加英雄" id="add1"><div class="hero">英雄：<input type="text" id="heroName"></div><table id="tab"><tr><td>排名</td><td>人物</td><td>操作</td></tr><tr><td>1</td><td>关羽</td><td><input type="button" onclick="up(this)" value="上移"/><br/><input type="button" value="下移" onclick="down(this)"></td></tr><tr><td>2</td><td>马超</td><td><input type="button" onclick="up(this)" value="上移"/><br/><input type="button" value="下移" onclick="down(this)"></td></tr><tr><td>3</td><td>吕布</td><td><input type="button" onclick="up(this)" value="上移"/><br/><input type="button" value="下移" onclick="down(this)"></td></tr><tr><td>4</td><td>典韦</td><td><input type="button" onclick="up(this)" value="上移"/><br/><input type="button" value="下移" onclick="down(this)"></td></tr><tr><td>5</td><td>张飞</td><td><input type="button" onclick="up(this)" value="上移"/><br/><input type="button" value="下移" onclick="down(this)"></td></tr><tr><td>6</td><td>赵云</td><td><input type="button" onclick="up(this)" value="上移"/><br/><input type="button" value="下移" onclick="down(this)"></td></tr></table></body><script>//表格隔行变色$("tr:odd").children().css("background","#b9ffd2")$("tr:even").children().css("background","aqua")//点击按钮添加英雄隐藏和显示$("#add1").click(function () {$(".hero").toggleClass("show")})//将英雄人物上移function up(btn){//获取当前行的英雄姓名的tdlet td1 = $(btn).parent().prev();//获取上一行英雄姓名的tdlet td2 = $(btn).parent().parent().prev().children().eq(1);//如果上一行不为“人物”就执行上移if(td2.text()!="人物"){//获取当前行英雄姓名let t1 = td1.text();//获取上一行英雄姓名let t2 = td2.text();//交换文本值td1.text(t2)td2.text(t1)}}//同理function down(btn){let td1 = $(btn).parent().prev();let td2 = $(btn).parent().parent().next().children().eq(1);if(td2.text()!=""){let t1 = td1.text();let t2 = td2.text();td1.text(t2)td2.text(t1)}}//添加英雄let i =6;//失去焦点$("#heroName").blur(function () {//获取输入框文本值let val = $("#heroName").val();//非空判断 如果输入的空格或没有输入为falseif(val.trim()){$("#tab").append('<tr>\n' +' <td>'+(++i)+'</td>\n' +' <td>'+val+'</td>\n' +' <td>\n' +' <input type="button" οnclick="up(this)" value="上移"/><br/>\n' +' <input type="button" value="下移" οnclick="down(this)">\n' +' </td>\n' +' </tr>')//添加之后的英雄进行隔行换色$("tr:odd").children().css("background","#b9ffd2")$("tr:even").children().css("background","aqua")}})
</script>
</html>
jquery dom节点操作完成备考抽查演练和英雄排名表相关推荐
- jQuery DOM 节点操作
DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...
- jQuery DOM节点操作
开发工具与关键技术:Adobe Dreamweaver JavaScript 作者:执~漠 撰写时间:2020年4月22日 在 HTML DOM 中,所有事物都是节点. jQuery创建节点 jQue ...
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
- jquery dom 节点append、before、after、prepend、insertBefore、empty、remove等添加、移除操作汇总
之前有个项目前端页面会根据权限进行DOM操作,比如:增加新增.编辑按钮,增加表格操作列等,涉及节点新增.某个节点前后插入.节点移除等操作,在此,对jquery DOM节点的各种操作做一总结. 1.父节 ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- jquery元素节点操作
jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...
- DOM节点操作大全(一)
下面是对DOM节点操作的整理,有创建节点.插入节点.删除节点.复制节点 希望可以帮助到有需要的小伙伴哦 在下一篇博客小编会整理DOM节点属性的知识点 文章目录 创建节点 插入节点 删除节点 复制节点 ...
- 第四章 DOM节点操作
1.什么是DOM: DOM(document object model)文档对象模型,把每一个元素看做是一个 节点,然后对节点进行增删改查的操作 2.DOM的分类: (1)Core Dom:可以对ht ...
- 【学亮IT手记】jQuery DOM插入操作
DOM插入操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
最新文章
- tomcat 配置 使用 HTTPS
- [SCOI2010]生成字符串
- 编写脚本自动部署反向代理、web、nfs
- java dalvik_深入理解Android之Java虚拟机Dalvik
- 282天，汇付天下“冲上云霄”
- 求【javascript设计模式】【高性能网站建设指南】PDF！哪位有给下啊！！！
- 走近分形与混沌(part4)--牛顿与混沌
- dedecms最新版本修改任意管理员漏洞
- viewpager 自定义翻页效果_Android RecyclerView自定义LayoutManager
- CSDN创始人董事长蒋涛对话阿里云张献涛：距离云计算终极目标还有多远？
- 2020 年百度之星·程序设计大赛 - 初赛二
- php js轮播图片代码,javascript实现焦点图轮播效果代码示例
- 哈工大教授车万翔：基于迁移学习的任务型对话系统
- 机器学习、深度学习、计算机视觉、自然语言处理及应用案例
- 数字电路（4）门电路（三）
- 2022-09-29：在第 1 天，有一个人发现了一个秘密。 给你一个整数 delay ，表示每个人会在发现秘密后的 delay 天之后， 每天 给一个新的人 分享 秘密。 同时给你一个整数 forg
- wr885n虚拟服务器设置,TP-Link TL-WR885N V4路由器上网设置方法
- 当你在浏览器地址栏中输入地址并回车的一瞬间到页面展示回来，经历了什么？
- 【AI面试】L1 loss、L2 loss和Smooth L1 Loss，L1正则化和L2正则化
- 让你的 CDN 费用省 50% 以上！图片瘦身的正确姿势
热门文章
- 编译polygeist-polymer项目
- win10环境下Smart3D(ContextCapture)集群创建
- sublime text3安装emmet插件
- office 2007 oracle 9,Office 2010与Office 2007用户界面对比赏析
- 【愚公系列】2023年05月 网络安全高级班 038.WEB渗透与安全（红队渗透测试入门指南）
- php0034 rankl,血清中Sclerostin、RANKL及OPG在老年股骨转子间骨折早期的含量改变及其临床意义...
- 基于三代测序数据的结构变异检测，PBHoney方法解读
- 7. EAL parameters（dpdk参数介绍）
- java中关闭redis事务_Redis 事务支持
- bugku-writeup-web-社工-初步收集