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 . top 栏选项卡

  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. Phoenix简介概述，Phoenix的Java API 相关操作优秀案例

    Phoenix简介概述,Phoenix的Java API 相关操作优秀案例 一.Phoenix概述简介 二.Phoenix实例一:Java API操作 2.1 phoenix.properties 2 ...

  2. DOM及DOM相关操作

    DOM 概述: DOM 全称(document object model)文档对象模型(文档指定为对应html文档),对应的DOM就是操作HTML文档的(增删改查) DOM结构 document 文档 ...

  3. java 使用xom对象数据序列化为xml、反序列化、Preferences相关操作小案例

    package org.rui.io.xml; import java.io.BufferedOutputStream; import java.io.FileOutputStream; import ...

  4. 前端JavaScript之DOM事件操作

    DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...

  5. 10 关于DOM的操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...

  6. BOM和DOM的操作

    到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互.也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知 ...

  7. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  8. Jsoup代码解读之二-DOM相关对象

    Jsoup代码解读之二-DOM相关对象   之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼了很多 ...

  9. 前端学习笔记(zepto或jquery)——对li标签的相关操作（一）

    对li标签的相关操作——点击li标签进行样式切换的两种方式 Demo演示: 1 2 3 4 // 详解: 第一种方式(以ul为基础): $("ul").bind("cli ...

随机推荐

  1. jmeter3.x的jtx文件解析

    jtl保存测试结果 打开jtl文件,内容为下: timeStamp,elapsed,label,responseCode,responseMessage,threadName,dataType,suc ...

  2. Intellij IDEA 拷贝的项目变为红色名字

    Intellij IDEA 拷贝的项目变为红色名字 学习了:https://blog.csdn.net/lishaoran369/article/details/72991805 settings & ...

  3. RMQ(区间求最值)

    1. 概述 RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度为n的数列A.回答若干询问RMQ(A,i,j)(i,j<=n).返回数列A ...

  4. 性能测试报告模板 V1.0

    1． 测试项目概述与测试目的 1.1 项目概述 本部分主要是针对即将进行压力测试的对象(接口.模块.进程或系统)进行概要的说明,让人明白该测试对象的主要功能与作用及相关背景. 1.2 测试目标 简要列 ...

  5. 分层架构web容器的配置安全

    转自:http://hi.baidu.com/shineo__o/item/7520d54c24d234c71081da82 /ps:本以为这是一个偶然配置失误造成的问题,但最近几天无聊时测试发现,有 ...

  6. （转）微信小程序开发项目——笑话大全

    此项目是学习完微信小程序后实现的一个demo,采用聚合数据的免费api获取最新的文本笑话和趣图(图片和gif图)   项目地址:https://github.com/zhijieeeeee/wecha ...

  7. mysql rpm安装,以及修改charset

    http://my.oschina.net/u/1156660/blog/343154?fromerr=tmDGGiDL 修改charset: http://stackoverflow.com/que ...

  8. 安装nagios

    第二部分.apache的安装 615  tar zxvf httpd-2.2.9.tar.gz   616  cd httpd-2.2.9  617   ./configure --prefix=/u ...

  9. apue学习笔记（第七章 进程环境）

    本章将了解进程的环境. main函数 C程序总是从main函数开始执行,main函数的原型是: int main(int argc,char *argv[]); 其中,argc是命令行参数的数目,ar ...

  10. ck-reset css(2016/5/13)

    /**rest by 2016/05/04 */ * {box-sizing: border-box;} *:before,*:after {box-sizing: border-box;} body ...