<!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. CDQZ Day7

    #include<cstdio> #include<cstring> #include<iostream> #include<algorithm> #i ...

  2. 3.nginx日志

    1. 自定义日志格式为json log_format json '{"@timestamp":"$time_iso8601",' '"@version ...

  3. JAVA统计一定范围内的质数个数

    public class TestNumber{ public static void main(String[] args){ System.out.println(roundPrimeCount( ...

  4. spring、springmvc和mybatis整合（xml方式）

    今天搭建一个基于xml的ssm整合demo.话不多说,直接上代码. 我的开发环境如下: web服务器:tomcat8 开发工具:STS JDK版本:1.8 项目构建工具:maven 1.pom.xml ...

  5. Git学习系列之一些常用的Git命令收录更新ing

    不多说,直接上干货!  前言 对于Git工具,有必要整理和总结一些常用实用的命令. http://p.primeton.com/articles/53cce3a3e138236138000026 ht ...

  6. 深入java虚拟机学习 -- 类的卸载

    类的生命周期 在开始本节之前让我们再来回顾下类的生命周期 没看过前6个过程的同学建议从头看下<深入java虚拟机学习 -- 类的加载机制>,这里就不再过多介绍了,着重说下类的卸载 类的卸载 ...

  7. div+css 制作表格

    <div class="table"> <h2 class="table-caption">花名册:</h2> <di ...

  8. pyquery库简介

    html = '''<div><ul><li class="item-0">li0</li><li class="i ...

  9. POj2387——Til the Cows Come Home——————【最短路】

    A - Til the Cows Come Home Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & ...

  10. android 9 patch