<!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操作排他思想的更多相关文章

  1. DOM操作的概念

    ////dom 操作//核心思想:找到元素 操作元素//js 找元素:// document.getElementById(dd); 唯一确定// 返回的都是数组 数组元素是元素对象// docume ...

  2. 12-关于DOM操作的相关案例

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

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

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

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

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

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

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

  6. 关于DOM操作的相关案例

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

  7. 12 DOM操作的相关案例

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

  8. javascrtpt DOM操作

    DOM DOM:(document object mode)文档对象模型.DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的就是为了能让js操作html元素而制定的一个规范 DO ...

  9. 关于DOM操作的案例

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

随机推荐

  1. 时间超限问题处理（c++）

    c++中 如果时间超上限 做题上: 考虑关于二进制的方法 比如说 find your present (2) 这道题 可以用异或运算 来发现不重复数 对于动态规划 状态压缩发面 方面应用更多 比如说p ...

  2. QRegExp

    这段代码会越界,百思不得七姐(过了N久时间 之后^^)原来是把i写成了1  --! //#if 0 QRegExp re1("AT+CGATT?"); QRegExp re2(&q ...

  3. 求两个数a、b的最大公约数

    //求两个数a.b的最大公约数 function gcd(a,b){ return b===0?a:gcd(b,a%b) }

  4. AXI协议（一）

    最近弄Zynq,不懂AXI协议Zynq很难玩儿的转.这些笔记主要攻克AXI中的一些难题. 所有的AXI4包含了5个不同的通道:     (1)读/写地址通道(Read/Write address ch ...

  5. amqp模块在python2.7.6版本上报错的问题

    机器的环境是python2.7.6; 使用pip install安装了amqp.正常安装,未报错. amqp安装的版本是2.1.4. 在python中,使用import amqp,报错如下: Trac ...

  6. storm（5）-分布式单词计数例子

    例子需求: spout:向后端发送{"sentence":"my dog has fleas"}.一般要连数据源,此处简化写死了. 语句分割bolt(Split ...

  7. vue 打印

    vue 方法 第一种方法:通过npm 安装插件 1,安装  npm install vue-print-nb --save 2,引入  安装好以后在main.js文件中引入  import Print ...

  8. pandas中获取数据框的行、列数

    获取数据框的行.列数 # 获取行数 df.shape[0] # 获取行数 len(df) # 获取列数 df.shape[1]

  9. 如何正确且高效地中文汉化Spyder 2 或 Spyder3（图文详解）（博主推荐）

    不多说,直接上干货!   汉化下载和教程页面 : https://github.com/kingmo888/Spyder_Simplified_Chinese 汉化文件最新版直接下载 : https: ...

  10. js中有关类、对象的增强函数

    javascript中继承的实现 基础实现 function Range(from,to){ this.from =from; this.to =to; } Range.prototype = { i ...