美文网首页qwlz
javascript排他思想

javascript排他思想

作者: 9979eb0cd854 | 来源:发表于2018-07-23 15:24 被阅读4次

排他思想:

干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值

1、含义: 关于排他思想,我的理解就是先排除掉其他的(包括自己) ,最后再给自己(this)加想要的效果。

2、小思路:

a. 通过document.ElementsBytagName();选择需要的一类标签,获得一个伪数组

b.由于是伪数组的原因,而对数组的处理最多的是遍历,所以会用到for(); 通过循环可以排除掉其他(包括自己)

c.遍历后可以用this改变自己的样式

3、数组都会有下标(索引号),在遍历伪数组的时候就可以利用自定义属性记录它的索引号,如下 arr[i].index=i;

比如:获得一组button标签,点击button按钮时,改变每个按钮的颜色

html

      <button>点击改变颜色</button>
        <button>点击改变颜色</button>
        <button>点击改变颜色</button>
        <button>点击改变颜色</button>
        <button>点击改变颜色</button>

css

 .yanse {
       background-color: aqua;
    }

js

<script>
        //获得一类button标签,得到伪类数组
        var btns = document.getElementsByTagName('button');
        /*
        由于是伪数组的原因,而对数组的处理最多的是遍历,
        所以会用到for(); 通过循环可以排除掉其他(包括自己)
        */
        for (var i = 0;i < btns.length;i++) {
            //给每个button加点击事件
            btns[i].onclick = function() {

                //通过循环可以排除掉其他(包括自己)
                for (var j = 0;j < btns.length;j++) {
                    //排除其他
                    btns[j].className = '';
                }
                //遍历后可以用this改变自己的样式
                this.className = 'yanse';
            }
        }
    </script>

效果图

图片.png

相关文章

  • javascript排他思想

    排他思想: 干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值 1、含义: 关于排他思想,我的理解...

  • Javascript排他思想

    改進

  • 排他思想

    先清空所有的,然后单独设置当前; 基于 for 循环来实现的排他思想;

  • 排他思想

    排他 p {width: 100px;height: 100px;back...

  • 排他思想

    排他思想

  • JavaScript----同步异步和排他思想

    同步和异步 同步就是先后执行,只有当当前的执行完,才能执行下一个,好比一个隧道只能一辆车一辆车的过 异步就是同时执...

  • JS之排他思想

    干掉所有人,留下我自己 HTML 按钮1 按钮2 按钮3 按钮4 JS 1.先获取所有按钮元素let b...

  • 操作元素--排他思想

    如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:1.所有元素全部清除样式2.给自己(...

  • JavaScript第三天

    排他操作 排他思想 如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 所有元素全部...

  • Web API -- 排他操作

    1.1. 排他操作 1.1.1 排他思想 如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思...

网友评论

    本文标题:javascript排他思想

    本文链接:https://www.haomeiwen.com/subject/twljmftx.html