<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
</body>
<script>
    var btns = document.getElementsByTagName("button");
    for(var i = 0; i < btns.length;i++) {
     
       btns[i].onclick = function() {
        for(var i = 0;i<btns.length;i++) {
            btns[i].style.background = '';
        }
        this.style.backgroundColor = "pink";
       }
        
            
            
       
     }
    
</script>
先让所有的都没有，再设置自己的，这是排他思想的核心。

Js中的排他思想的更多相关文章

  1. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  2. 谈一谈原生JS中的【面向对象思想】

           [重点提前说:面向对象的思想很重要!]         最近开始接触学习后台的PHP语言,在接触到PHP中的面向对象相关思想之后,突然想到之前曾接触的JS中的面向对象思想,无奈记性太差, ...

  3. js 排他思想案例

    <!-- 排他思想 --> <button>按钮1</button> <button>按钮2</button> <button> ...

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

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

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

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

  6. JS中的prototype

    JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...

  7. 【巩固】JS中的封闭空间

    封闭空间的主要思想在于: JS中给一个变量外面加小括号,是不改变任何结果的.比如 var show = function(){ //定义一个名字为show的函数 ); }; show(); //调用名 ...

  8. 在js中怎么样选择互斥的相邻元素

    在使用jquery中,我们通常会选择siblings()去选择相邻元素,使用eq()方法去匹配元素,使用index()获取对应元素的索引值,具体jquery代码如下: <style> *{ ...

  9. js中各种跨域问题实战小结（一）

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

随机推荐

  1. freemarker中8个常用的指令

    这里列举出Freemarker模板文件中8个常用的指令. 1. assign assign指令用于创建或替换一个顶层变量,assign指令的用法有多种,包括创建或替换一个顶层变量,创建或替换多个变量等 ...

  2. JavaScriptCore在浏览器引擎中的位置

    因为随着JS这门语言的发展,JS的宿主越来越多,有各种各样的浏览器,甚至是常见于服务端的Node.js(基于V8运行). 2.       Webkit 源代码由三大模块组成: 1). WebCore ...

  3. Elastic Stack 证书创建

    1.创建CA证书 ./bin/elasticsearch-certutil ca # 默认文件名:elastic-stack-ca.p12 2.生成节点使用的证书 ./bin/elasticsearc ...

  4. C# LDAP认证登录类参考

    public class LDAPHelper     {         private DirectoryEntry _objDirectoryEntry;         /// <sum ...

  5. DatetimeHelper类的编写

    公共类 DAtaTimeHelper类的编写 public class Appointment { public DateTime StartDate { get; set; } public Dat ...

  6. mvc5 源码解析2-1：mvchandler的执行

    上一节说在urlroutingmodule中mvchandler 映射到httpcontext上,那mvchandler又是怎么执行的呢? (1).httpruntime 从isapiruntime  ...

  7. python机器学习简介

    目录 一:学习机器学习原因和能够解决的问题 二:为什么选择python作为机器学习的语言 三:机器学习常用库简介 四:机器学习流程   机器学习是一门多领域交叉学科,涉及概率论.统计学.逼近论.凸分析 ...

  8. css实现保持div的等宽高比

    这篇文章主要为回答这个问题:“做响应式网页,如何让一个div的高和宽保持比例放大或是缩小?”,这里不介绍媒体查询的实现. 那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可 ...

  9. bugku——宽带信息泄露（RouterPassView 查看路由器配置信息）

    题目地址:http://ctf.bugku.com/files/5986768ca8b96cead45aec16a88431b5/conf.bin 下载之后发现是个后缀名为bin的二进制文件,其实这个 ...

  10. 用jTessBoxEditorFX训练字库

    软件下载:https://sourceforge.net/projects/vietocr/files/jTessBoxEditor/ 官方字库下载:https://github.com/tesser ...