什么是排他思想算法？（源码解析）

最新推荐文章于 2023-08-28 23:40:05 发布
最新推荐文章于 2023-08-28 23:40:05 发布
阅读量457 收藏
点赞数 4
分类专栏： 前端 文章标签： 算法 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50569789/article/details/120017013
版权

排他思想算法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>排他思想算法</title>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
        // 1. 获取所有按钮元素
        // var btns = document.querySelectorAll('button');
        var btns = document.getElementsByTagName('button');

        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {

            btns[i].onclick = function () {

                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人

                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';//将全部的button的backgroundColor设置为空
                }

                // (2) 然后才让当前的元素背景颜色为skyblue 留下我自己
                this.style.backgroundColor = 'skyblue';//然后给点击的之和加backgroundColor

            }
        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
    </script>
</body>

</html>
不易撞的网名
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
编程思维---排他思想
m0_73596760的博客
10-13 1640
JS 排他思想
ReentrantReadWriteLock 源码解析
01-21
一、读写锁简介  现实中有这样一种场景：对共享资源有读和写的操作，且...一个是写相关的锁，称为排他锁 类图如下： 说明：如上图所示Sync为ReentrantReadWriteLock内部类，Sync继承自AQS、NonfairSync继承自Sync类、
排他思想(算法)
休思_J的博客
05-29 5088
排他思想(算法) 给一组相同的元素添加相同的事件，利用for循环来实现。 代码验证 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1.
JavaScript【排他思想及其优化】
Coding
04-02 1880
JavaScript【排他思想及其优化】
HTML 排他思想
2301_77427226的博客
08-28 108
4使用双重for循环遍历圆点下标，保存自己，清除其他。2.给无序列表添加样式。3.获取所有圆点的下标。
排他思想（算法）
m0_59735348的博客
04-28 276
<html> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> </html> <script> // 获取所有按钮元素 var bt.
深入浅出ReentrantReadWriteLock源码解析.docx
07-10
什么是读锁和写锁 对于资源的访问就两种形式：要么是读操作，要么是写操作。读写锁是将被锁保护的临界资源的读操作和写操作分开，允许同时有多个线程同时对临界资源进行读操作，任意时刻只允许一个线程对资源进行写...
JavaScript排他算法实现选项卡的应用研究.pdf
最新发布
01-03
JavaScript排他算法实现选项卡的应用研究.pdf
Java编程实现排他锁代码详解
08-29
主要介绍了Java编程实现排他锁的相关内容，叙述了实现此代码锁所需要的功能，以及作者的解决方案，然后向大家分享了设计源码，需要的朋友可以参考下。
mysql共享锁与排他锁用法实例分析
09-09
主要介绍了mysql共享锁与排他锁用法,结合实例形式分析了mysql共享锁与排他锁相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
操作元素排他算法以及三个实用的例子
shen_yk的博客
11-21 807
操作元素 排他算法 如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法: 1.所有元素全部清除样式(干掉其他人) 2.给当前元素设置样式( 留下我自己) 3.注意顺序不能颠倒,首先干掉其他人,再设置自己 例子 点击按钮 按钮背景颜色改变 再次点击其他的 再次改变 并且之前点击的按钮变回原来的颜色 var btns = document.getElementsByTag...
排他思想（点击它时，只有它一个做效果）
DF_jie的博客
11-20 432
排他思想：排除其他元素，给自己添加效果（独享一份）； 例如： 先设置几个按钮，在写出JavaScript 显示效果； 实现效果：点击任何一个按钮，只有当前按钮显示效果（如：添加背景颜色） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
DOM对象之排他思想(算法)
m0_53417841的博客
06-30 228
排他思想经典案例
JS---排他思想及Tab栏的切换
热门推荐
F__Rong的博客
07-30 1万+
JS的排他思想及tab栏切换,利用数组，循环，自定义属性，通过标签名字选择等
tab 切换 利用排他思想
一阵云翳✲
06-11 301
tab 切换原理：利用排他思想，隐藏所有，当前对应的显示&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #box{
JS学习-----排他思想（算法）
m0_48716885的博客
01-24 1035
如果有同一组元素，我们想要一个元素实现某种样式，需要用到循环的排他思想算法。步骤如下： 1.所有元素全部清除样式。 2.给当前元素设置样式。 3.顺序不能颠倒，首先清除所有样式，然后在设置自己。 案例 ：设置一排按键，当我们点击，按键出现颜色变化，点击另外一个按键也出现颜色变化，而之前出现颜色变化的按键，恢复原样。 <div> <button type="button">按键1</button> <button type="button
前端学习（834）：排他思想
歌谣的博客
04-13 457
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
举出一个js排他思想算法实例
04-11
Sure, 一个经典的js排他思想算法实例是通过给DOM元素添加class来实现同类元素之间的排他效果。比如，我们可以通过以下代码让同类按钮只能有一个被选中： ``` $('.btn-group > .btn').click(function(){ $(this)....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不易撞的网名

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值