本文主要是介绍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练习题-全选反选、可展开子菜单、事件冒泡、二级联动、表格增删、定时器、多事件绑定的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
