关于DOM操作的相关案例
1.模态框案例
需求：
打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并弹出一个弹出框，点击X的时候会关闭当前的模态框
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
#box{
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
#content{
position: relative;
top: 150px;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: red;
background-color: #fff;
margin: auto;
}
#span1{
position: absolute;
background-color: red;
top: 0;
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff; }
</style>
</head>
<body>
<button id="btn">弹出</button>
</body>
<script type="text/javascript">
//获取dom元素 1.获取事件源
var oBtn = document.getElementById('btn');
//创建弹出模态框的相关DOM对象
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span'); // 设置属性
oDiv.id = 'box';
oP.id = 'content'
oP.innerHTML = '模态框成功弹出'
oSpan.innerHTML = 'X';
oSpan.id = 'span1' // 追加元素
oDiv.appendChild(oP);
oP.appendChild(oSpan); // 点击弹出按钮 弹出模态框
oBtn.onclick = function(){
//动态的添加到body中一个div
this.parentNode.insertBefore(oDiv,oBtn) }
// 点击X 关闭模态框
oSpan.onclick = function(){
// 移除oDiv元素
oDiv.parentNode.removeChild(oDiv)
} </script>
</html>
2.简易留言板
需求：
当在textarea中输入内容，点击留言按钮，会添加到浏览器中
图如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.close{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
background-color: rgba(0,0,0,.1);
margin-left: 20px;
}
</style>
</head>
<body>
<h1>简易留言板</h1>
<div id="box">
<!--<ul> </ul>--> </div>
<textarea id="msg"></textarea>
<input type="button" id="btn" value="留言"/>
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript"> // 0 将ul标签添加到div#box标签中
var oUl = document.createElement('ul');
var oBox = document.getElementById('box');
oBox.appendChild(oUl); var oBtn = document.getElementById('btn');
var oMsg = document.getElementById('msg')
// 控制留言的总数量
var count = 0;
oBtn.onclick = function(){ // 点击留言按钮事件操作
// 1.创建li标签
var oLi = document.createElement('li');
//2.设置内容
oLi.innerHTML = oMsg.value + "<span class='close'>X</span>" // 3.如果想在插入的第一个li获取的前面继续添加li标签
//3.1获取li标签
var olis = document.getElementsByTagName('li');
//3.2 如果是第一次添加的li标签，则直接添加到ul的后面
if(olis.length == 0){
oUl.appendChild(oLi);
count++; }else{
// 3.3 如果不是第一次添加的li标签，则插入到第一个li标签的前面
oUl.insertBefore(oLi,olis[0]);
count++;
}
// 4.添加完成之后 清空textarea的值
oMsg.value = ''; // 5.点击X的时候删除当前的一条数据
//5.1先获取所有的X
var oSpans = document.getElementsByTagName('span'); // 5.2for循环 对所有的X添加点击事件
for(var i = 0; i< oSpans.length; i++){
oSpans[i].onclick = function(){
// 5.3 移除当前的li标签
oUl.removeChild(this.parentNode)
count--;
}
} } function sum(){
alert('一共发布了'+count+'条留言'); }
</script>
</html>
3.使用js模拟选择器中hover
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button> <script>
//需求：鼠标放到哪个button上，改button变成黄色背景（添加类） var btnArr = document.getElementsByTagName("button");
//绑定事件
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseover = function () {
//【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current"; //【重要】核心代码
}
} //鼠标离开current时，还原背景色
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
this.className = "";
}
} </script> </body> </html>
代码解释：
鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是：
//排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
4.tab栏选项卡
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
} ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block; } </style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p> </div>
</body>
<script type="text/javascript">
window.onload = function(){
// //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。 var tabli = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p') for(var i = 0; i < tabli.length; i++){
// 绑定索引值（新增一个自定义属性：index属性）
tabli[i].index = i;
tabli[i].onclick = function(){ // 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j = 0; j < tabli.length; j++){
tabli[j].className = '';
tabContent[j].className = '';
}
this.className = 'active' tabContent[this.index].className = 'active';//【重要代码】
}
}
} </script>
</html>
5、购物车案例
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 500px;
height: 400px;
margin: 100px auto;
background-color: rgba(255,255,255,0.4);
position: relative; }
.car{
width: 150px;
height: 30px;
background-color: #fff;
padding-left: 30px;
position: absolute;
left: 130px;
top: 3px;
z-index: 3;
border: 1px solid green; }
.shop{
width: 310px;
height: 70px;
background-color: #fff;
position: absolute;
top:33px;
left: 0;
display: none; }
div.c{ border-bottom-width: 0; }
div.t{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="car" id="myCar">我的购物车</div>
<div class="shop t" id="shop"></div>
</div>
<script type="text/javascript">
var myCar = document.getElementById('myCar');
var shop = document.getElementById('shop');
myCar.onmouseover = function(){
shop.style.display = 'block';
myCar.className +=' c';
}
myCar.onmouseout = function(){
shop.style.display = 'none';
myCar.removeAttribute('class');
myCar.className = 'car';
}
</script>
</body>
</html>
关于DOM操作的相关案例的更多相关文章
- python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- 12-关于DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 12 DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- Dom操作的常用案例实现
本文介绍几个Dom操作的几个常用的案例.虽然现在各种web框架层出不穷,也很方便.但是了解最基本的实现方法对我们开发还是有很大的帮助的: 1.图片滚动案例 1.1 效果如下: 1.2 代码如下: ...
- WebApis中DOM操作的基本案例
1.1. 排他操作 1.1.1 排他思想 如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意 ...
- 前端 ----关于DOM的操作的相关实例
关于DOM操作的相关案例 1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE ...
- 12-DOM相关案例
12-关于DOM操作的相关案例 1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCT ...
随机推荐
- Python进阶-打包程序为exe
操作系统:win7 x64 运行环境:Python3.5 安装PyInstaller 第一步:下载PyInstaller https://github.com/pyinstaller/pyinstal ...
- 2.Linux文件IO编程
2.1Linux文件IO概述 2.1.0POSIX规范 POSIX:(Portable Operating System Interface)可移植操作系统接口规范. 由IEEE制定,是为了提高UNI ...
- 【Codeforces 988D】Points and Powers of Two
[链接] 我是链接,点我呀:) [题意] 让你从一个集合中找出来一个子集 使得这个子集中任意两个数相减的绝对值是2^的整数次幂 且集合的大小最大 [题解] 考虑子集的个数为4个或4个以上 那么我们找到 ...
- Android NumberProgressBar：动态移动显示百分比进度的进度条
Android NumberProgressBar:动态移动显示百分比进度的进度条 NumberProgressBar是github上一个开源项目,其项目主页是:https://github.c ...
- bzoj 1664 （贪心）
[Usaco2006 Open]County Fair Events 参加节日庆祝 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 487 Solved: ...
- node.js 发布订阅模式
//导入内置模块 let EventEmitter = require('events'); let util=require('util'); //Man继承EventEmitter util.in ...
- MyBatis3错误：Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/log4j/Priority的问题解决
在使用Maven新建QuitStart类型项目时,引入了MyBatis3.2.0版本的JAR包之后,出现如下错误: Exception in thread "main" java. ...
- linux下nginx+svn
http://fengqi.me/unix/23.html 因为没有什么可以定制的, 所以svn直接使用系统自带的包管理软件安装, 以centos系列为例, 命令如下: yum install sub ...
- 1.4 - OSPF的运行模式⑦
帧中继的子接口选用原则: 1.在一个封装FR的物理接口上,可以同时承载多条PVC. 为了网络的可扩展性,建议不论在考试环境还是在工程环境中,都应该优先考虑使用子接口 2.应该创建几个子接口:在一个物理 ...
- [JavaEE] Implement a test for REST endpoint
1. We have the BookEndpoint.java: package com.pluralsight.bookstore.rest; import com.pluralsight.boo ...