dom操作排他思想
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<style type="text/css">
div{
width: 600px;
height: 100px;
border: 1px solid gray;
}
p{
float: left;
width: 60px;
height: 60px;
background-color: #ccc;
margin-right: 10px;
border-radius: 50%;
}
</style>
<script type="text/javascript">
window.onload=function(){
var Ops=document.getElementById('box1').getElementsByTagName('p');
var biaoti=document.getElementById('biaoti');
for(var i = 0;i < Ops.length;i++){
Ops[i].index = i;
Ops[i].onclick = function(){
//点击后才执行这里的代码
//第一件事：让所有人(包括自己)都变灰色
for(var j = 0;j < Ops.length;j++){
Ops[j].style.backgroundColor = "#ccc";
} //第二件事：让自己变红色
this.style.backgroundColor = "greenyellow"; //第三件事：让h1里面xcg的内容变为自己的编号
biaoti.innerHTML = this.index;
}
} } </script>
</head>
<body>
<h1 id="biaoti">哈哈</h1>
<div id="box1">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
dom操作排他思想的更多相关文章
- DOM操作的概念
////dom 操作//核心思想:找到元素 操作元素//js 找元素:// document.getElementById(dd); 唯一确定// 返回的都是数组 数组元素是元素对象// docume ...
- 12-关于DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- 关于DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 12 DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- javascrtpt DOM操作
DOM DOM:(document object mode)文档对象模型.DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的就是为了能让js操作html元素而制定的一个规范 DO ...
- 关于DOM操作的案例
1. 模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> < ...
随机推荐
- 剑指offer——面试题18.1：删除链表中重复的节点
// 面试题18(二):删除链表中重复的结点 // 题目:在一个排序的链表中,如何删除重复的结点?例如,在图3.4(a)中重复 // 结点被删除之后,链表如图3.4(b)所示. #include &l ...
- odoo 开发 context 上下文的用法
context 这是一个上下文,运用很灵活 得到整个context self.context_get() self.env['res.users'].context_get() 得到cont ...
- UML-6.1-用例-示例
1.总览要点:用例.摘要.非正式.详述.测试用例.用例分析与迭代联系起来. 2.示例:Process Sale 1).客户携带所购商品到达收银台. 2).收银员使用pos系统记录每件商品. 操作契约: ...
- python学习 条件控制
if - else if 条件a : 内容a else : 内容 非a if - elif - else if 条件a : 内容a elif 条件b: 内容b-a else : 内容 非(a∪b) ...
- $bzoj1011-HNOI2008$ 遥远的行星 其他
题面描述 直线上\(N\)颗行星,\(X=i\)处有行星\(i\),行星\(j\)受到行星\(i\)的作用力,当且仅当\(i<=A_j\).此时J受到作用力的大小为\(F_{i\to j}=\f ...
- 面经问题总结——django相关
1.让你从头设计一个web框架,第一步你会做什么? 2.django的orm是怎么实现的? 3.django的URL路径映射是怎么实现的? 4.平常你怎么运用django提供的钩子函数? 5.三级分销 ...
- linux下非root用户获得/dev/ttyUSB0的读写权限
首先查看/dev/ttyUSB0的权限属性,在终端输入: ll /dev/ttyUSB0 teashaw@xiaopeiqing.com:~$ ll /dev/ttyUSB0 crw-rw—- 1 r ...
- 【随笔】nginx下的301跳转，两个域名指向同一个服务器ip
301跳转 页面永久性移走,通常叫做301跳转,也叫301重定向,301转向. 指的是当用户点击一个网址时,通过技术手段,跳转到指定的一个网站. 用以解决两个域名指向同一个服务器ip,当访问m.xxx ...
- jcef视频教程
http://www.cnblogs.com/Johness/p/java-cef-1-building.html
- LINQ学习(1)
LINQ LINQ,语言集成查询(Language INtegrated Query)是一组用于C#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同 ...