<!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. 基础篇：4.2）规范化：3d软件工程图纸用模板

    本章目的:分享一些国标标准模板,方便作图时使用 这篇博文的内容作者会定时的更新 1.工程图模板 drawing template 定义 三维机械设计软件中的一种文件类型.通过标准化定制和使用该文件,可 ...

  2. System Verilog基础（一）

    学习文本值和基本数据类型的笔记. 1.常量(Literal Value) 1.1.整型常量 例如:8‘b0 32'd0 '0 '1 'x 'z 省略位宽则意味着全位宽都被赋值. 例如: :] sig1 ...

  3. 【Python】Excel数据处理

    1.环境准备 > python2.7 > xlrd,xlwt模块下载与安装,前者用来读取excel文件,后者用来写入excel文件 2.实战案例 案例场景: > excel1中包含某 ...

  4. python爬虫之urllib库（二）

    python爬虫之urllib库(二) urllib库 超时设置 网页长时间无法响应的,系统会判断网页超时,无法打开网页.对于爬虫而言,我们作为网页的访问者,不能一直等着服务器给我们返回错误信息,耗费 ...

  5. c# 小票打印

    c# 在进行小票打印时大致有三种方法. 1. 使用水晶报表进行打印.可以参考:https://www.cnblogs.com/aitong/p/10717786.html 2. 在 PrintDocu ...

  6. 【转】常用算法复习及实现（C++版）

    一.霍夫曼树实现 给定n个权值作为n个叶子结点,构造一棵二叉树,若带权路径长度达到最小,称这样的二叉树为最优二叉树,也称为哈夫曼树(Huffman tree).哈夫曼树是带权路径长度最短的树,权值较大 ...

  7. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  8. PHP面向对象的基本原则

    对象内部是高内聚的 ——对象只负责一项特定的功能(职能可大可小) ——所有对象相关的内容都封装到对象内部 高内聚就是该有的都有,用的时候不会缺胳膊少腿! 对象对外是低耦合的 ——外部世界可以看到对象的 ...

  9. 【curl】Linux下命令行curl详解

    在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一款很强大的http命令行工具.它支持文件的上传和下载,是综合传输工具,但按传统,习惯称url为下载工具. 语法:# c ...

  10. ASP.NET能知道的东西

    ASP.NET能知道的东西 获取服务器电脑名: Page.Server.ManchineName 获取用户信息: Page.User 获取客户端电脑名:Page.Request.UserHostNam ...