1.模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.6;

            z-index: 9;

        }

        .c2{

            width: 500px;

            height: 400px;

            background-color: white;

            position: fixed;

            left: 50%;

            top: 50%;

            margin-left: -250px;

            margin-top: -200px;

            z-index: 10;

        }

    </style>

</head>

<body>

    <div>

        <input type="button" value="添加" onclick="ShowModel();" />

    </div>

    <!--遮罩层开始-->

    <div id="i1" class="c1 hide" ></div>

    <!--遮罩层结束-->

    <!--弹出框（模态框）开始-->

    <div id="i2" class="c2 hide">

        <p><input type="text" /></p>

        <p><input type="text" /></p>

        <p>

            <input type="button" value="取消" onclick="HideModel();" />

            <input type="button" value="确定" onclick="HideModel();" />

        </p>

    </div>

    <!--弹出框（模态框）结束-->

    <script>

        function ShowModel(){

            document.getElementById('i1').classList.remove('hide');

            document.getElementById('i2').classList.remove('hide');

        }

        function HideModel(){

            document.getElementById('i1').classList.add('hide');

            document.getElementById('i2').classList.add('hide');

        }

    </script>

</body>

</html>

2.全选反选以及取消

checkbox

    获取值

    checkbox对象.checked

    设置值

    checkbox对象.checked = true
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.6;

            z-index: 9;

        }

        .c2{

            width: 500px;

            height: 400px;

            background-color: white;

            position: fixed;

            left: 50%;

            top: 50%;

            margin-left: -250px;

            margin-top: -200px;

            z-index: 10;

        }

    </style>

</head>

<body style="margin: 0;">

    <div>

        <input type="button" value="添加" onclick="ShowModel();" />

        <input type="button" value="全选" onclick="ChooseAll();" />

        <input type="button" value="取消" onclick="CancleAll();" />

        <input type="button" value="反选" onclick="ReverseAll();" />

        <table>

            <thead>

                <tr>

                    <th>选择</th>

                    <th>主机名</th>

                    <th>端口</th>

                </tr>

            </thead>

            <tbody id="tb">

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>1.1.1.1</td>

                    <td>190</td>

                </tr>

                <tr>

                    <td><input type="checkbox"f id="test" /></td>

                    <td>1.1.1.2</td>

                    <td>192</td>

                </tr>

                <tr>

                    <td><input type="checkbox" /></td>

                    <td>1.1.1.3</td>

                    <td>193</td>

                </tr>

            </tbody>

        </table>

    </div>

    <!-- 遮罩层开始 -->

    <div id="i1" class="c1 hide"></div>

    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->

    <div id="i2" class="c2 hide">

        <p><input type="text" /></p>

        <p><input type="text" /></p>

        <p>

            <input type="button" value="取消" onclick="HideModel();"/>

            <input type="button" value="确定"/>

        </p>

    </div>

    <!-- 弹出框结束 -->

    <script>

        function ShowModel(){

            document.getElementById('i1').classList.remove('hide');

            document.getElementById('i2').classList.remove('hide');

        }

        function HideModel(){

            document.getElementById('i1').classList.add('hide');

            document.getElementById('i2').classList.add('hide');

        }

        function ChooseAll(){

            var tbody = document.getElementById('tb');

            // 获取所有的tr

            var tr_list = tbody.children;

            for(var i=0;i<tr_list.length;i++){

                // 循环所有的tr，current_tr

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                checkbox.checked = true;

            }

        }

        function CancleAll(){

            var tbody = document.getElementById('tb');

            // 获取所有的tr

            var tr_list = tbody.children;

            for(var i=0;i<tr_list.length;i++){

                // 循环所有的tr，current_tr

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                checkbox.checked = false;

            }

        }

        function ReverseAll(){

            var tbody = document.getElementById('tb');

            // 获取所有的tr

            var tr_list = tbody.children;

            for(var i=0;i<tr_list.length;i++){

                // 循环所有的tr，current_tr

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}

    </script>

</body>

</html>

3.后台管理左侧菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .item .header{

            height: 35px;

            background-color: #2459a2;

            color: white;

            line-height: 35px;

        }

    </style>

</head>

<body>

    <div style="height: 48px"></div>

    <div style="width: 300px">

        <div class="item">

            <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>

            <div class="content">

                <div>内容1</div>

                <div>内容1</div>

                <div>内容1</div>

            </div>

        </div>

        <div class="item">

            <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>

            <div class="content hide">

                <div>内容2</div>

                <div>内容2</div>

                <div>内容2</div>

            </div>

        </div>

        <div class="item">

            <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>

            <div class="content hide">

                <div>内容3</div>

                <div>内容3</div>

                <div>内容3</div>

            </div>

        </div>

        <div class="item">

            <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>

            <div class="content hide">

                <div>内容4</div>

                <div>内容4</div>

                <div>内容4</div>

            </div>

        </div>

    </div>

    <script>

        function ChangeMenu(nid){

            var current_header = document.getElementById(nid);

            var item_list = current_header.parentElement.parentElement.children;

            for(var i=0;i<item_list.length;i++){

                var current_item = item_list[i];

                current_item.children[1].classList.add('hide');

            }

            current_header.nextElementSibling.classList.remove('hide');

        }

    </script>

</body>

</html>

前端武器库之DOM练习的更多相关文章

  1. 前端基础之DOM和BOM

    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...

  2. 进击的Python【第十五章】：Web前端基础之DOM

    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...

  3. 前端——BOM与DOM

    目录 前戏 window对象 window的子对象 navigator对象(了解即可) screen对象(了解即可) history对象(了解即可) location对象 弹出框 计时相关 DOM H ...

  4. Python开发【前端】：DOM

    DOM(文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页 ...

  5. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  6. Web前端 --- BOM和DOM

    目录 前端基础之BOM和DOM BOM DOM 前端基础之BOM和DOM BOM是指浏览器对象模型,他使JavaScript有能力与浏览器进行对话 DOM是指文档对象模型,通过它,可以访问HTML文档 ...

  7. 前端BOM和DOM

      前端基础之BOM和DOM   前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些 ...

  8. web前端基础知识 Dom

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  9. 前端——BOM和DOM

    要想和浏览器有交互的动作,即要继续学习DOM,BOM. JavaScript分为 ECMAScript,DOM,BOM. BOM (Browser Object Model) 是指浏览器对象模型,他使 ...

随机推荐

  1. vs setup 自动下载依赖的framework配置

    1.项目->属性->签名->选中为ClickOnce清单签名->创建测试证书 2.项目->属性->安全性->启用ClickOnce安全设置 3.setup项目 ...

  2. 2019年全国高校sql数据库

    2019年全国高校名单sql数据库信息: 根据教育部发布的文件整理形成可用.sql文件,导入数据库即可使用. 包括全国高等学校共计2956所,其中:普通高等学校2688所(含独立学院257所),成人高 ...

  3. ajax中的事件

    blur : 当光标移开时(点击)触发 change : 当光标移开并且文本框中的内容和上一次不一致时(点击)触发

  4. Python Scrapy 实战

    Python Scrapy 什么是爬虫? 网络爬虫(英语:web crawler),也叫网络蜘蛛(spider),是一种用来自动浏览万维网的网络机器人.其目的一般为编纂网络索引. Python 爬虫 ...

  5. js防抖节流

    防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 防抖函数分为非立即执行版和立即执行版. 非立即执行版: 第一 ...

  6. 6.JUC之ReentrantReadWriteLock

    一.概述: Java纪年1.5年,ReentrantReadWriteLock诞生于JUC,此后,国人一般称它为读写锁.人如其名,他就是一个可重入锁,同时他还是一个读写锁 a)跟ReentrantLo ...

  7. vue简单todolist

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 【JUC】1.线程

    先复习一下线程的东西: Java线程的内存模型 主内存与工作内存 Java内存模型主要定义了程序中各个变量的访问规则 所有的变量都在主内存,Java堆(线程共享) 每条线程都有自己的工作内存,虚拟机栈 ...

  9. 【OF框架】配置信息Config添加配置和代码调用api

    一.配置规范 配置信息全部写在OF.WebShell项目文件config.json中 配置键使用OF.开头,配置格式如下: { "OF.IgnoredUrl": "log ...

  10. 一款免费监控aix与Linux的软件--nmon

    性能介绍 nmon 工具可以为 AIX 和 Linux 性能专家提供监视和分析性能数据的功能,其中包括: CPU 使用率 内存使用情况 内核统计信息和运行队列信息 磁盘 I/O 速度.传输和读/写比率 ...