编程思维---排他思想

排他思想:就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除再设置当前元素。

大白话---简单总结:干掉兄弟,复活自己

使用场景:1.Tab栏效果切换 2. 轮播图下方高亮小圆点 3.按钮的选择 4.一组同类便签中(如li标签,span标签,div标签),其中一个便签需要实现某一个样式.就可以使用 for循环清除所需要的样式,再添加自己需要的样式

排他思想步骤:1.获取元素-------利用for循环获取

利用事件委托(冒泡原理)

2.注册事件(常见的事件:鼠标事件,键盘事件,焦点事件,文本事件)

3.所有元素清除样式（干掉其他人）

4.给当前元素设置样式（留下我自己）

注意点:顺序不能颠倒(先移除,后添加)

举例子如下:

<body><div class="domestic"><div class="clearfix"><span class="active" data-id="0">登高踏青</span><span data-id="1">小憩温泉</span><span data-id="2">天然氧吧</span><span data-id="3">草原撒欢</span></div></div><script>/* 思路分析：事件源：span 事件类型：点击事件 click事件处理程序 排他思想*///获取元素const span = document.querySelectorAll('span')//利用for循环  for(let i = 0; i<arr.length; i++) {// console.log(i)//注册事件span[i].addEventListener('click',function(){//排他思想 先移除document.querySelector('.active').classList.remove('active')//再添加span[i].classList.add('active')})}</script>

特殊情况没有要移除的样式,但是我们要添加我们想要的样式如下

不允许改变结构的情况下,可以想象的有这个样式,按照排他思想走下去 ,但是这里就得加判断了

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {padding: 0;margin: 0;}ul {list-style-type: none;}.parentWrap {width: 200px;text-align: center;margin: 50px auto auto;}.menuGroup {border: 1px solid #999;background-color: green;}.groupTitle {display: block;height: 20px;line-height: 20px;font-size: 16px;border-bottom: 1px solid #ccc;cursor: pointer;}.menuGroup>div {height: 200px;background-color: #fff;display: none;}/* 注意看这里，可以采用类名的形式直接实现 *//* 思路： 点哪个 li ，哪个 li 添加 active 这个类，其余 li移除类 */.parentWrap .active span {/* 如果li添加active类，则 span 就改为红色 */background-color: red;}.parentWrap .active div {/* 如果当前li 添加 active 类，则 里面的div 就显示 */display: block;}</style></head><body><ul class="parentWrap"><li class="menuGroup"><span class="groupTitle">标题1</span><div>我是弹出来的div1</div></li><li class="menuGroup"><span class="groupTitle">标题2</span><div>我是弹出来的div2</div></li><li class="menuGroup"><span class="groupTitle">标题3</span><div>我是弹出来的div3</div></li><li class="menuGroup"><span class="groupTitle">标题4</span><div>我是弹出来的div4</div></li></ul><script>/* 思路分析:事件源 :li事件类型 : 点击事件事件处理程序 : 颜色变红  位置发生变化利用事件委托*///获取元素const list = document.querySelectorAll('li')//遍历for (let i = 0; i < list.length; i++) {//注册事件list[i].addEventListener('click', function () {// 先 移除 在添加const ac = document.querySelector('.active')//如果没有active这个类   不移除 也不会报错if (ac) {ac.classList.remove('active')}//当前追加 activethis.classList.add('active')})}</script></body></html>

总结:排他思想,先移除样式,在添加样式(顺序不能反)

编程思维---排他思想相关推荐

深入理解Golang 编程思维和工程实战
| 导语 Golang 的一些编程思维和思想,以及总结一些常见的优雅编程实战技巧目录一 Golang 编程思维二 Golang 高级编码技巧 1 优雅的实现构造函数编程思想 2 优雅的实现继承编 ...
Golang 编程思维和工程实战
Golang 的一些编程思维和思想,以及总结一些常见的优雅编程实战技巧. 作者:allendbwu,腾讯 PCG 后台开发工程师一 Golang 编程思维首先,我们先来看下最基本的,就是 Gola ...
『编程思维』之我见
编程思维,对于一个开发人员来说是必备的,但凡能让应用跑起来,不管应用的大小,优劣,说明这个开发人员都具有编程思维,毕竟程序认可了这个开发人员逻辑,能启动起来. 小到几行代码,一个小的桌面应用:大到一个 ...
语言编程思维陈萌_这本书告诉你，计算机为何能读懂人类语言，编程思维让你更聪明...
在这个互联网时代,我们出门购物.拍照.打电话.浏览信息,只需要带上一部智能手机就可以了.如果在20年前,要实现这些功能,需要带一大堆东西.如今,我们口袋里的这台计算机,和50年前送宇航员上月球的那台计 ...
java一个方法排他调用_Java编程实现排他锁代码详解
一 .前言某年某月某天,同事说需要一个文件排他锁功能,需求如下: (1)写操作是排他属性 (2)适用于同一进程的多线程/也适用于多进程的排他操作 (3)容错性:获得锁的进程若Crash,不影响到后续 ...
8种提升程序猿编程能力的方法+编程思维四个核心：分解、抽象、模式识别和算法
8种提升程序猿编程能力的方法对于程序员来说,提高自己的编程能力,算是给自己定的职业发展目标之一,不过定一个成为编程大神的目标很容易,具体做起来可能就不是一件简单的事了.首先,既然决定"我要 ...
世界读书日：带你走近Go语言编程思维
经过十几年的演化和发展,Go语言在全世界范围内已经拥有了百万级别的拥趸,在这些开发者当中,除了一部分新入行的编程语言初学者之外,更多的是从其他编程语言阵营转过来的开发者.由于Go语言上手容易,在转Go ...
「编程思维」究竟是一种什么思维？
首先,以下思维方法(或者套路.模式等)是编程所必需的,但我认为不应该被阐释为编程思维的内涵: 1.框架思维写一个软件,需要搭架构:写一段程序,需要有一个大体框架.如同建一栋楼,需要首先搭脚手架.显然 ...
深度解析“编程思维”：从容迎接新时代的能力神器
人的财富也好,幸福度也好,本质上都是"思维模式的变现":关于思维的论述很多了,那么,有没有什么思维能力,很容易被忽略,却又非常实用且重要呢?有,它就是-- "编程思维&q ...

编程思维---排他思想

编程思维---排他思想相关推荐

最新文章

热门文章