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. .Net DLL类库引用时没有注释信息

    自己编写的类库提供给别人引用时,别人获取不到DLL内部的方法.变量的注释信息,无法了解内部情况和使用方法. 原因:没有随DLL类库一同输出注释文档 解决方案: 在VS界面中选中提供给别人的类库项目 在 ...

  2. ASP.NET Core利用拦截器 IActionFilter实现权限控制

    “麦荻网教系统”采用了前后端代码分离的架构,即“Miidy.Cloud.Console”站与“Miidy.Cloud.Manage”站(两个前端站)同时通过web api的方式调用“Miidy.Clo ...

  3. Ubuntu安装opencv3.4.4教程

    1 去官网下载opencv 在本教程中选用的是opencv3.4.4,下载链接 http://opencv.org/releases.html ,选择sources. 2 解压 unzip openc ...

  4. Linux命令——pr

    参考:Linux命令——column 前言 接触这个命令的初衷是我想把一个很长的单列输出设置成多列输出,奈何column的分列输出机制太智障,直到我发现了pr 参数 pr -# 输出指定的列数. -t ...

  5. 【转载】Redis 4.0 自动内存碎片整理（Active Defrag）源码分析

    click原文链接原文链接:https://blog.csdn.net/zouhuajianclever/article/details/90669409阅读本文前建议先阅读此篇博客: Redis源码 ...

  6. 基于fastai的分类网络

    classify.fastai Classifier based on fastai 欢迎访问:https://github.com/pprp/classify.fastai/ 字符识别分类器-基于f ...

  7. Dymola — 多学科系统仿真平台

            Dymola 是法国Dassault Systems公司的多学科系统仿真平台,广泛应用于国内外汽车.工业.交通.能源等行业的系统总体架构设计.指标分解以及系统功能验证及优化等.Dymo ...

  8. 剑指Offer（三十一）：整数中1出现的次数（从1到n整数中1出现的次数）

    剑指Offer(三十一):整数中1出现的次数(从1到n整数中1出现的次数) 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https:// ...

  9. Eclipse安装scala插件

    1.下载插件 http://scala-ide.org/download/current.html ​ 2.将下载的压缩包解压,拷贝到eclipse\dropins目录下 3.启动eclipse,安装 ...

  10. 缺包与maven

    一. 缺包 1. 打开pom.xml 将依赖加入. 2. mvn clean install -DskipTests 3. scp target/lib/****.jar(刚刚的依赖的架包) 服务器地 ...