1. 模态框案例

　　需求：

　　打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并弹出一个弹出框，点击X的时候会关闭当前的模态框

　　代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             html,body{
  12.                 height: 100%;
  13.             }
  14.             #box{
  15.                 width: 100%;
  16.                 height: 100%;
  17.                 background: rgba(0,0,0,.3);
  18.             }
  19.             #content{
  20.                 position: relative;
  21.                 top: 150px;
  22.                 width: 400px;
  23.                 height: 200px;
  24.                 line-height: 200px;
  25.                 text-align: center;
  26.                 color: red;
  27.                 background-color: #fff;
  28.                 margin: auto;
  29.             }
  30.             #span1{
  31.                 position: absolute;
  32.                 background-color: red;
  33.                 top: 0;
  34.                 right: 0;
  35.                 width: 30px;
  36.                 height: 30px;
  37.                 line-height: 30px;
  38.                 text-align: center;
  39.                 color: #fff;
  40.  
  41.             }
  42.         </style>
  43.     </head>
  44.     <body>
  45.         <button id="btn">弹出</button>
  46.     </body>
  47.     <script type="text/javascript">
  48.         //获取dom元素 1.获取事件源
  49.         var oBtn = document.getElementById('btn');
  50.         //创建弹出模态框的相关DOM对象
  51.         var oDiv = document.createElement('div');
  52.         var oP = document.createElement('p');
  53.         var oSpan = document.createElement('span');
  54.  
  55.         // 设置属性
  56.         oDiv.id = 'box';
  57.         oP.id = 'content'
  58.         oP.innerHTML = '模态框成功弹出'
  59.         oSpan.innerHTML = 'X';
  60.         oSpan.id = 'span1'
  61.  
  62.         // 追加元素
  63.         oDiv.appendChild(oP);
  64.         oP.appendChild(oSpan);
  65.  
  66.         // 点击弹出按钮 弹出模态框
  67.         oBtn.onclick = function(){
  68.             //动态的添加到body中一个div
  69.             this.parentNode.insertBefore(oDiv,oBtn)
  70.  
  71.         }
  72.         // 点击X 关闭模态框
  73.         oSpan.onclick = function(){
  74.             // 移除oDiv元素
  75.             oDiv.parentNode.removeChild(oDiv)
  76.         }   
  77.  
  78.     </script>
  79. </html>

2.简易留言板

　　需求：

　　当在textarea中输入内容，点击留言按钮，会添加到浏览器中

　　效果图如下：

　　代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>留言板</title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             .close{
  12.                 display: inline-block;
  13.                 width: 20px;
  14.                 height: 20px;
  15.                 line-height: 20px;
  16.                 text-align: center;
  17.                 cursor: pointer;
  18.                 background-color: rgba(0,0,0,.1);
  19.                 margin-left: 20px;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <h1>简易留言板</h1>
  25.         <div id="box">
  26.             <!--<ul>
  27.  
  28.             </ul>-->
  29.  
  30.         </div>
  31.         <textarea id="msg"></textarea>
  32.         <input type="button" id="btn" value="留言"/>
  33.         <button onclick="sum()">统计</button>
  34.     </body>
  35.     <script type="text/javascript">
  36.  
  37.         // 0 将ul标签添加到div#box标签中
  38.         var oUl = document.createElement('ul');
  39.         var oBox = document.getElementById('box');
  40.         oBox.appendChild(oUl);
  41.  
  42.         var oBtn = document.getElementById('btn');
  43.         var oMsg = document.getElementById('msg')
  44.         // 控制留言的总数量
  45.         var count = 0;
  46.         oBtn.onclick = function(){
  47.  
  48.             // 点击留言按钮事件操作
  49.             // 1.创建li标签
  50.             var oLi = document.createElement('li');
  51.             //2.设置内容
  52.             oLi.innerHTML = oMsg.value + "<span class='close'>X</span>"
  53.  
  54.             // 3.如果想在插入的第一个li获取的前面继续添加li标签
  55.             //3.1获取li标签
  56.             var olis = document.getElementsByTagName('li');
  57.              //3.2 如果是第一次添加的li标签，则直接添加到ul的后面
  58.             if(olis.length == 0){
  59.                 oUl.appendChild(oLi);
  60.                 count++;
  61.  
  62.             }else{
  63.                 // 3.3 如果不是第一次添加的li标签，则插入到第一个li标签的前面
  64.                 oUl.insertBefore(oLi,olis[0]);
  65.                 count++;
  66.             }
  67.             // 4.添加完成之后 清空textarea的值
  68.             oMsg.value = '';
  69.  
  70.             // 5.点击X的时候删除当前的一条数据
  71.             //5.1先获取所有的X
  72.             var oSpans = document.getElementsByTagName('span');
  73.  
  74.             // 5.2for循环 对所有的X添加点击事件
  75.             for(var i = 0; i< oSpans.length; i++){
  76.                 oSpans[i].onclick  = function(){
  77.                     // 5.3 移除当前的li标签
  78.                     oUl.removeChild(this.parentNode)
  79.                     count--;
  80.                 }
  81.             }
  82.  
  83.         }
  84.  
  85.         function sum(){
  86.             alert('一共发布了'+count+'条留言');
  87.  
  88.         }
  89.     </script>
  90. </html>

3.使用js模拟选择器中hover

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         button {
  8.             margin: 10px;
  9.             width: 100px;
  10.             height: 40px;
  11.             cursor: pointer;
  12.         }
  13.         .current {
  14.             background-color: red;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <button>按钮1</button>
  20. <button>按钮2</button>
  21. <button>按钮3</button>
  22. <button>按钮4</button>
  23. <button>按钮5</button>
  24.  
  25. <script>
  26.     //需求：鼠标放到哪个button上，改button变成黄色背景（添加类）
  27.  
  28.     var btnArr = document.getElementsByTagName("button");
  29.     //绑定事件
  30.     for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
  31.         btnArr[i].onmouseover = function () {
  32.             //【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
  33.             //排他思想和for循环连用
  34.             for(var j=0;j<btnArr.length;j++){
  35.                 btnArr[j].className = "";
  36.             }
  37.             this.className = "current";  //【重要】核心代码
  38.         }
  39.     }
  40.  
  41.     //鼠标离开current时，还原背景色
  42.     for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
  43.         btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
  44.             this.className = "";
  45.         }
  46.     }
  47.  
  48. </script>
  49.  
  50. </body>
  51.  
  52. </html>

　　代码解释：

　　鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是：

  1. //排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
  2.             //排他思想和for循环连用
  3.             for(var j=0;j<btnArr.length;j++){
  4.                 btnArr[j].className = "";
  5.             }
  6.             this.className = "current";

4. tab栏选项卡

　　代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             ul{
  12.                 list-style: none;
  13.             }
  14.             #tab{
  15.                 width: 480px;
  16.                 margin: 20px auto;
  17.                 border: 1px solid red;
  18.             }
  19.             ul{
  20.                 width: 100%;
  21.                 overflow: hidden;
  22.             }
  23.             ul li{
  24.                 float: left;
  25.                 width: 160px;
  26.                 height: 60px;
  27.                 line-height: 60px;
  28.                 text-align: center;
  29.                 background-color: #cccccc;
  30.             }
  31.  
  32.             ul li a{
  33.                 text-decoration: none;
  34.                 color:black;
  35.             }
  36.             li.active{
  37.                 background-color: red;
  38.             }
  39.             p{
  40.                 display: none;
  41.                 height: 200px;
  42.                 text-align: center;
  43.                 line-height: 200px;
  44.                 background-color: red;
  45.             }
  46.             p.active{
  47.                 display: block;
  48.  
  49.             }
  50.  
  51.         </style>
  52.     </head>
  53.     <body>
  54.         <div id="tab">
  55.             <ul>
  56.                 <li class="active">
  57.                     <a href="#">首页</a>
  58.                 </li>
  59.                 <li>
  60.                     <a href="#">新闻</a>
  61.                 </li>
  62.                 <li>
  63.                     <a href="#">图片</a>
  64.                 </li>
  65.             </ul>
  66.             <p class="active">首页内容</p>
  67.             <p>新闻内容</p>
  68.             <p>图片内容</p>
  69.  
  70.         </div>
  71.     </body>
  72.     <script type="text/javascript">
  73.         window.onload = function(){
  74.             // //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
  75.                     //思路：1.点亮上面的盒子。   2.利用索引值显示下面的盒子。
  76.  
  77.             var tabli = document.getElementsByTagName('li');
  78.             var tabContent = document.getElementsByTagName('p')
  79.  
  80.             for(var i = 0; i < tabli.length; i++){
  81.                 // 绑定索引值（新增一个自定义属性：index属性）
  82.                 tabli[i].index  = i;
  83.                 tabli[i].onclick = function(){
  84.  
  85.                     // 1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
  86.                     for(var j = 0; j < tabli.length; j++){
  87.                         tabli[j].className = '';
  88.                         tabContent[j].className = '';
  89.                     }
  90.                     this.className = 'active'
  91.  
  92.                     tabContent[this.index].className = 'active';//【重要代码】
  93.                 }
  94.         }
  95.         }
  96.  
  97.     </script>
  98. </html>

关于DOM操作的案例的更多相关文章

  1. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  2. jQuery的DOM操作小案例

    案例一:下拉列表左右选择 <body> <div> <select style="width:60px" multiple size="10 ...

  3. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  4. Dom操作的常用案例实现

    本文介绍几个Dom操作的几个常用的案例.虽然现在各种web框架层出不穷,也很方便.但是了解最基本的实现方法对我们开发还是有很大的帮助的: 1.图片滚动案例 1.1  效果如下: 1.2  代码如下: ...

  5. 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  6. python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  7. php : DOM 操作 XML

    DOM 操作 XML 基本用法 XML文件: person.XML <?xml version="1.0" encoding="utf-8" ?> ...

  8. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  9. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

随机推荐

  1. python 文件操作的相对路径和绝对路径(windows)

    1.相对路径 windows  '.\'表示当前路径 with open(r'.\db\123.txt','w',encoding='utf-8') as f: f.write('abc') 2.绝对 ...

  2. Python3之Django框架搭建详细步骤

    安装Django 自行下载的pip,可执行如下命令: pip install django 下载python3版本可以自带pip3 ,命令如下: pip3 install django 此命令会下载d ...

  3. FastDFS为什么要结合Nginx？

    为什么选择Nginx Nginx 是一个很牛的高性能Web和反向代理服务器, 它具有有很多非常优越的特性: 在高连接并发的情况下,Nginx是Apache服务器不错的替代品: Nginx在美国是做虚拟 ...

  4. charindex函数--->检索字符在字符串中的起始位置

    语法:CHARINDEX(检索字符,被检索字符串) 返回值:检索字符在被检索字符串中的起始位置.

  5. isset和empty以及is_null区别

    2.empty,isset首先都会检查变量是否存在,然后对变量值进行检测.而is_null 和 “参数本身”只是直接检查变量值,是否为null,因此如果变量未定义就会出现错误! 3.isset():仅 ...

  6. delphi中Tkbmmemtable数据转成SQL脚本

    unit UMemtableToSql; interface uses SysUtils, Classes, DB, kbmMemTable, Variants, Dialogs, SuperObje ...

  7. 编写批处理使用msbuild编译项目

    echo off ::请把此bat脚本放到以下代码路径下 并在环境变量中配置对应版本的vs编译器的值 ::vs2017如:C:\Program Files (x86)\Microsoft Visual ...

  8. Android蓝牙通信

    Android为蓝牙设备之间的通信封装好了一些调用接口,使得实现Android的蓝牙通信功能并不困难.可通过UUID使两个设备直接建立连接. 具体步骤: 1. 获取BluetoothAdapter实例 ...

  9. JQuery动画之淡入淡出动画

    1. 淡入动画 1.1 不带参数的淡入动画 格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...

  10. 3.开始使用Spring Cloud实战微服务

                     开始使用Spring Cloud实战微服务 3.1. Spring Cloud实战前提 3.1.1. 需要的技术储备 语言方面:可以使用Java.scala.Groo ...