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

最新推荐文章于 2022-10-14 11:20:46 发布
最新推荐文章于 2022-10-14 11:20:46 发布
阅读量690 收藏
点赞数
分类专栏： Jquery\Js\Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013210620/article/details/78925887
版权

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这个select
            var 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() {
        // 找到那两个div
        var c1Eles = document.getElementsByClassName("c1");
        for (var i=0;i<c1Eles.length;i++) {
            c1Eles[i].classList.remove("hide");
        }
    }

    // 隐藏模态框
    function hideModal() {
        // 找到那两个div
        var 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 class
        hideModal();
    };

    //  找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. 隐藏modal
        hideModal();
    };
        // 删除按钮绑定事件
        // 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;   // undefined
   function 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全选练习
sinat_33940108的博客
04-26 135
本页面完成全选/全不选，反选按钮。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
04-全选反选.html
02-15
04-全选反选.html
搜索界面和二级列表带全选，反选的数据同步
12-13
ListView嵌套ListView带多选，全选，反选,选中个数，点击父item可以收缩展开子listview listview嵌套listview全选，反选，跳到搜索页面选中的和搜索页面同步并计数
JavaScriptDOM 简单事件练习
qq_43780814的博客
07-01 273
点击更改图片路径属性 文本方式为innerHTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单击切换图片</title> </head> <body> <img id="num01" src="../image/1.jpg"> <script> var A = do
DOM事件练习 I
weixin_30341745的博客
08-16 146
目录 input框动态显示事件 红绿灯模拟 顶部广告栏关闭 鼠标悬停IMG上时，更换另一张图片 悬浮框自动出现 模态框案例 input框动态显示事件 1 <head> 2 <meta charset="UTF-8"> 3 <title>动态显示时间</title> 4 ...
imooc -dom事件练习（抽奖练习）
MJing_v的博客
04-04 394
又学完了一个imooc课程 练习抽奖小练习 主要是几个dom事件： keypress 按下任意键执行 keydown 按下字符键执行  keyup 释放键盘执行 开始抽奖了！ 开始 停止 var data=['笔记本','iphone4','iphone6','ipad','ipod','geogoo glasses','macbo
02-全选反选-js.html
最新发布
02-15
02-全选反选-js.html
02-全选反选-html.html
02-15
02-全选反选-html.html
05-全选反选.html
02-15
05-全选反选.html
11、DOM事件基础练习
执手天涯@的博客
01-14 262
1、点击切换图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
DOM操作及事件练习
星河梦~的博客
07-21 434
练习1.编写程序，实现计算器的相关功能2.鼠标经过时背景变色3.设置tab标签栏4.制作信息发布栏5.图片跟随鼠标移动 1.编写程序，实现计算器的相关功能 方法一： <body style="text-align: center;"> <img src="../images/8.png.jpeg" width="500" height="400"> <br> <label> 第一个数： <input
Jquery第二章常用方法，一二级菜单淡入淡出，event事件，复选框的全选反选第一节
Camel
05-07 555
hide() show() 通过滑动效果 slideToggle() 淡入淡出 fadeIn() fadeout() 向上 向下拉动 slideup() slidedown() display:none 默认不显示 text() 夹在两个标签之间是文本 也是一个重载的函数 val() 获取的是属性 append() appendTo() 要把某某方法，放到一个地方 each() 遍历...
JavaScript实现二级联动全选
xi5566的专栏
03-16 268
[code="js"] 请选择 1 2 3 [/code] [code="js"] 全部选中 function CheckAll(form) { /* for (var i=0;i ...
【前端】【JS】前端学习之路（十）：DOM练习（五）（元素与节点/节点兼容/全选&全不选）
SuiKaSan的自学室
06-18 499
1.12个获取元素与节点的代码（1）基本概念①文档：document②元素：页面中所有的标签，元素-----element，标签----&gt;元素----&gt;对象③节点：页面中所有的内容（标签、文本（文字、换行、空格、回车）、属性），节点-----Node④根元素：html标签（2）节点的属性（可以使用标签--元素.出来，可以使用属性节点.出来，文本节点.出来）①nodeType：节点的类型...
WEB安全之javascript基础（六）：js操作DOM定时器的使用案例、js课后练习题跑马灯搜索框
weixin_44891093的博客
10-14 607
WEB安全之javascript基础（六）：js操作DOM定时器的使用案例、js课后练习题跑马灯搜索框
常见dom事件
weixin_45669510的博客
10-28 572
<!-- 1.click点击事件 --> <button onclick="alert('hello world!')">点我试试</button> <!-- 2.dblclick双击事件 --> <button ondblclick="alert('双击了')">双击</button> <!-- 3.mousee...
checkbox全选和反选以及取消
73
12-15 398
很多网站页面上面经常可以看到，在每一条记录的前面会有一个一个选择框，下面这个例子实现了一键完成全选，一键完成反选，一键完成取消。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
前端学习之，昨日模仿的，js二级菜单无延迟仿京东
m0_37727198的博客
07-24 825
学习慕课网https://www.imooc.com/learn/829学习js实现京东无延迟菜单效果。   首先是主页目录设置。   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;scr
Android实现二级购物车全选反选与总价功能详解
本文将重点介绍如何在Android平台上构建一个具备全选加反选以及总价计算功能的二级购物车。首先，我们需要明确几个关键组件： 1. **Activity**：`MainActivity`作为主要的界面控制器，继承自`AppCompatActivity`，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值