dom练习题-全选反选、可展开子菜单、事件冒泡、二级联动、表格增删、定时器、多事件绑定

2024-08-31 22:32
文章标签 练习题 定时器 表格 绑定 事件 联动 冒泡 展开 增删 dom 二级 菜单 全选 反选

本文主要是介绍dom练习题-全选反选、可展开子菜单、事件冒泡、二级联动、表格增删、定时器、多事件绑定，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

      • checkbox全选反选
      • 可展开菜单
      • 事件冒泡
      • 二级联动菜单
      • 表格增删
      • 定时器
      • 多事件绑定

checkbox全选、反选

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业分解小礼包</title><style></style><script>// 全选function checkAll() {var jishis = document.getElementsByClassName("jishi")for (var i = 0; i < jishis.length; i++) {jishis[i].checked = true;// jishis[i].setAttribute("checked", "checked")}}// 取消function cancleAll() {var jishis = document.getElementsByClassName("jishi")for (var i = 0; i < jishis.length; i++) {jishis[i].checked = false;// jishis[i].removeAttribute("checked")}}// 反选function reverse() {var jishis = document.getElementsByClassName("jishi")for (var i = 0; i < jishis.length; i++) {jishis[i].checked=!jishis[i].checked;// if (jishis[i].checked == true) {////     jishis[i].checked = false// } else if (jishis[i].checked == false) {//     jishis[i].checked = true// }}}</script>
</head>
<body>
<label for="i1">技师1号</label>
<input class="jishi" id="i1" type="checkbox" checked="checked"><label for="i2">技师2号</label>
<input class="jishi" id="i2" type="checkbox"><input type="button" value="全选" onclick="checkAll();">
<input type="button" value="反选" onclick="reverse();">
<input type="button" value="取消" onclick="cancleAll();">
</body>
</html>

或者利用如下结合使用

 // jishis[i].setAttribute("checked", "checked")// jishis[i].removeAttribute("checked")

可展开菜单

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>左侧菜单示例</title><style>.left {position: fixed;left: 0;top: 0;width: 20%;background-color: darkgrey;height: 100%;}.right {width: 80%;}.title {text-align: center;padding: 10px 15px;border-bottom: 1px solid red;}.content {background-color: #336699;}.content > div {padding: 10px;color: white;border-bottom: 1px solid black;}.hide {display: none;}</style><script>// 定义一个函数function show(ths) {// 隐藏所有的.content标签     --> classList.add("hide")// 1. 找标签（所有.content标签 ）var contentEles = document.getElementsByClassName("content");// 节点对象.属性// 遍历上面的标签数组for (var i=0;i<contentEles.length;i++){contentEles[i].classList.add("hide");}// 如何让函数知道我点的哪个菜单（传参数）
//            console.log(ths);// 显示我下面的.content标签 --> classList.remove("hide")// 2.找这个标签下面的content标签var nextEle = ths.nextElementSibling;// 2. 显示这个content标签nextEle.classList.toggle("hide");console.log(nextEle);}</script>
</head>
<body><div class="left"><div class="item"><div class="title" onclick="show(this);">菜单一</div><div class="content hide"><div>111</div><div>222</div><div>333</div></div></div><div class="item"><div  class="title" onclick="show(this);">菜单二</div><div class="content hide"><div>111</div><div>222</div><div>333</div></div></div><div class="item"><div  class="title" onclick="show(this);">菜单三</div><div class="content hide"><div>111</div><div>222</div><div>333</div></div></div></div>
<div class="right"></div>
</body>
</html>

事件冒泡

透明模糊弹框~

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件绑定示例</title>
</head>
<body><ul id="i1"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul><script>// 传统写法
//    var liEles = document.getElementsByTagName("li");
//    for (var i=0;i<liEles.length;i++) {
//        liEles[i].onclick=function () {
//            // this 哪个标签触发的这个事件，this就指的谁哪个标签
//            alert(this.innerText);
//        }
//    }// 更好的方式target //事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。var ulEle = document.getElementById("i1");ulEle.onclick=function (e) {  // 把事件本身当成参数传进来// event.target  // 点击的目标是谁console.log(e.target);var targetEle = e.target;alert(targetEle.innerText);}
</script>
</body>
</html>

二级联动菜单

2级联动~

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>select联动</title></head>
<body><select name="" id="s1" onchange="loadData();"><option value="">请选择省份</option></select><select name="" id="s2"><option value="">请先选择省份</option>
</select><script>var s1Ele = document.getElementById("s1");var data = {"河北": ["石家庄", "保定", "邯郸"], "湖南": ["长沙", "岳阳", "张家界"], "四川": ["成都", "绵阳", "攀枝花"]}// 把data里面的key都拿出来，生成option标签， 添加到s1这个select// 1.var str = "";for (var key in data) {// 2.var s = "<option>" + key + "</option>";console.log(s);str += s;}console.log(str);// 找到s1 select标签s1Ele.innerHTML=str;function loadData() {var s2Ele = document.getElementById("s2");s2Ele.options.length=0;  // 清空select下面的option// 自己用removeChild（）练习一下// 把data里面的key都拿出来，生成option标签， 添加到s1这个selectvar indexValue= s1Ele.selectedIndex;var optionELes = s1Ele.options;var key = optionELes[indexValue].innerText;var data2 = data[key];for (var i=0; i<data2.length;i++) {var optionEle = document.createElement("option");optionEle.innerText = data2[i];s2Ele.appendChild(optionEle);}}</script>
</body>
</html>

表格增删

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业分解大礼包</title><style>.cover {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.3);z-index: 999;}.modal {position: fixed;top: 50%;left: 50%;width: 600px;height: 400px;margin-left: -300px;margin-top: -200px;z-index: 1000;background-color: white;}.hide {display: none;}</style>
</head>
<body><input type="button" id="b1" value="添加"><table border="1" id="t1"><thead><tr><th>#</th><th>姓名</th><th>爱好</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>小王</td><td>写代码</td><td><input type="button" value="编辑"><input class="delete" type="button" value="删除"></td></tr><tr><td>2</td><td>小李</td><td>游泳</td><td><input type="button" value="编辑"><input class="delete" type="button" value="删除"></td></tr><tr><td>3</td><td>小张</td><td>健身</td><td><input type="button" value="编辑"><input class="delete" type="button" value="删除"></td></tr></tbody>
</table><div class="cover hide c1"></div>
<div class="modal hide c1"><p>姓名<input type="text" id="modal-name"></p><p>爱好<input type="text" id="modal-hobby"></p><input type="button" value="提交" id="modal-submit"><input type="button" value="取消" id="modal-cancel">
</div><script>// 显示模态框function showModal() {// 找到那两个divvar c1Eles = document.getElementsByClassName("c1");for (var i=0;i<c1Eles.length;i++) {c1Eles[i].classList.remove("hide");}}// 隐藏模态框function hideModal() {// 找到那两个divvar c1Eles = document.getElementsByClassName("c1");for (var i=0;i<c1Eles.length;i++) {c1Eles[i].classList.add("hide");}}// 找到添加按钮绑定事件var b1Ele = document.getElementById("b1");b1Ele.onclick=function () {showModal();};// 找到取消按钮var cancelEle = document.getElementById("modal-cancel");cancelEle.onclick=function () {//  点击取消按钮要做的事儿// 添加hide classhideModal();};//  找modal中的提交按钮，绑定事件var submitEle = document.getElementById("modal-submit");submitEle.onclick=function () {// 模态框里点击提交按钮要做的事儿// 1. 取到input筐的值var nameInput = document.getElementById("modal-name");var hobbyInput = document.getElementById("modal-hobby");var name = nameInput.value;var hobby = hobbyInput.value;// 2. 创建tr标签var trEle = document.createElement("tr");// 序号var tableEle = document.getElementById("t1");var number = tableEle.getElementsByTagName("tr").length;// 拼接tr的内容trEle.innerHTML = "<td>" + number + "</td>" + "<td>" + name + "</td>" + "<td>" + hobby + "</td>" + '<td><input type="button" value="编辑"> <input class="delete" type="button" value="删除"></td>'// 3. 添加到tbody里面var tbodyEle = tableEle.getElementsByTagName("tbody")[0];tbodyEle.appendChild(trEle);// 4. 隐藏modalhideModal();};// 删除按钮绑定事件// 1. 找标签var tableEle = document.getElementById("t1");tableEle.onclick=function (event) {// 删除按钮var currentEle = event.target;if (currentEle.classList.contains("delete")) {// 执行删除操作var currentTr = currentEle.parentElement.parentElement;var tbodyEle = tableEle.getElementsByTagName("tbody")[0];tbodyEle.removeChild(currentTr);// ID重排}}
</script>
</body>
</html>

定时器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定时器示例</title>
</head>
<body><input type="text" id="i1"><input type="button" value="开始" onclick="start();">
<input type="button" value="结束" onclick="end();"><script>var t;   // undefinedfunction f() {var dateObj = new Date();//  获取i1标签var i1Ele = document.getElementById("i1");i1Ele.value=dateObj.toLocaleString();}// 每隔一秒就执行一次f()function start() {f();// 只创建一个定时器，有定时器的话我就不创建了if (t === undefined) {t = setInterval(f, 1000);}}// 停止计时function end() {clearInterval(t);// t现在是什么？console.log("---> ", t)t = undefined;}</script>
</body>
</html>

多事件绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绑定多个事件</title>
</head>
<body><input type="button" value="点我" id="i1"><script>function f1() {console.log(1);}function f2() {console.log(2);}var i1Ele = document.getElementById("i1");// addEventListener， 绑定多个事件，不覆盖i1Ele.addEventListener("click", f1);i1Ele.addEventListener("click", f2);</script>
</body>
</html>

这篇关于dom练习题-全选反选、可展开子菜单、事件冒泡、二级联动、表格增删、定时器、多事件绑定的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1125170。

相关文章

JavaScript DOM操作与事件处理方法

JavaScript DOM操作与事件处理方法

《JavaScriptDOM操作与事件处理方法》本文通过一系列代码片段,详细介绍了如何使用JavaScript进行DOM操作、事件处理、属性操作、内容操作、尺寸和位置获取,以及实现简单的动画效果,涵... 目录前言1. 类名操作代码片段代码解析2. 属性操作代码片段代码解析3. 内容操作代码片段代码解析4.
阅读更多...
Python中的异步:async 和 await以及操作中的事件循环、回调和异常

Python中的异步:async 和 await以及操作中的事件循环、回调和异常

《Python中的异步:async和await以及操作中的事件循环、回调和异常》在现代编程中,异步操作在处理I/O密集型任务时,可以显著提高程序的性能和响应速度,Python提供了asyn... 目录引言什么是异步操作？python 中的异步编程基础async 和 await 关键字asyncio 模块理论
阅读更多...
禁止平板,iPad长按弹出默认菜单事件

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件，把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new
阅读更多...
[MySQL表的增删改查-进阶]

[MySQL表的增删改查-进阶]

🌈个人主页：努力学编程’ ⛅个人推荐： c语言从初阶到进阶 JavaEE详解 数据结构 ⚡学好数据结构，刷题刻不容缓：点击一起刷题 🌙心灵鸡汤：总有人要赢，为什么不能是我呢 💻💻💻数据库约束 🔭🔭🔭约束类型 not null: 指示某列不能存储 NULL 值unique: 保证某列的每行必须有唯一的值default: 规定没有给列赋值时的默认值.primary key:
阅读更多...
dp算法练习题【8】

dp算法练习题【8】

不同二叉搜索树 96. 不同的二叉搜索树 给你一个整数 n ，求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种？返回满足题意的二叉搜索树的种数。 示例 1： 输入：n = 3输出：5 示例 2： 输入：n = 1输出：1 class Solution {public int numTrees(int n) {int[] dp = new int
阅读更多...
SpringMVC入参绑定特别注意

SpringMVC入参绑定特别注意

1.直接在controller中定义一个变量，但是此种传输方式有一个限制就是参数名和请求中的参数名必须保持一致，否则失效。 @RequestMapping("test2")@ResponseBodypublic DBHackResponse<UserInfoVo> test2(String id , String name){UserInfoVo userInfoVo = new UserInf
阅读更多...
Windows如何添加右键新建菜单

Windows如何添加右键新建菜单

Windows如何添加右键新建菜单 文章目录 Windows如何添加右键新建菜单实验环境缘起以新建`.md`文件为例第一步第二步第三步 总结 实验环境 Windows7 缘起 因为我习惯用 Markdown 格式写文本，每次新建一个.txt后都要手动修改为.md，真的麻烦。如何在右键新建菜单中添加.md选项呢？ 网上有很多方法，这些方法我都尝试了，要么太麻烦，要么不凑效
阅读更多...
Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式，需要不断条件和优化提示词。记录一下调整好的提示词，以后在继续优化迭代。 1. 提示词 英文版本： You are an AI assistant tasked with extracting the content of
阅读更多...
Maven(插件配置和生命周期的绑定)

Maven(插件配置和生命周期的绑定)

1.这篇文章很好，介绍的maven插件的。 2.maven的source插件为例，可以把源代码打成包。 Goals Overview就可以查看该插件下面所有的目标。 这里我们要使用的是source:jar-no-fork。 3.查看source插件的example，然后配置到riil-collect.xml中。  <build>   <plugins>    <pl
阅读更多...
FreeRTOS内部机制学习03（事件组内部机制）

FreeRTOS内部机制学习03（事件组内部机制）

文章目录 事件组使用的场景事件组的核心以及Set事件API做的事情事件组的特殊之处事件组为什么不关闭中断xEventGroupSetBitsFromISR内部是怎么做的？ 事件组使用的场景 学校组织秋游，组长在等待： 张三：我到了 李四：我到了 王五：我到了 组长说：好，大家都到齐了，出发！ 秋游回来第二天就要提交一篇心得报告，组长在焦急等待：张三、李四、王五谁先写好就交谁的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2