JavaScript笔记(13)

先总结一下操作元素的知识点

排他思想

今天学习的是排他思想,具体表现为什么呢?

就比如这个轮播图,当我们选择了特定的元素时样式才会改变,而其他的不变,返回原来的状态

我们试着用按钮模拟一下,当我们点击了哪一个,哪一个按钮的背景颜色就变成粉色.

一开始是这样写的,让我们看看会有什么问题

我们会发现我们在点击别的按钮的时候,原来被按下的按钮并不会还原,这时候就体现出排他思想的作用了.

解决的思路:

1.在按下其他按钮前,先还原原来的背景色

2.然后再设置我们当前按下的按钮的背景颜色

所以我们再写一个循环,遍历所有的元素,将他们的背景色都还原:

想要背景颜色不变就让backgroundcolor = ' '就可以了.

现在又要做一个百度换肤的小案例啦,说实话每次要做案例的时候都有点点小痛苦哈哈哈~但是可以让我们更好的掌握,不知道以后没有老师了自己怎么做案例...

分析:

老师的做法:

获取图片路径的地方非常巧妙

一开始我想到更换body背景图片的方法只有

document.body.style.backgroundImage = `url(./images/${i 1}.jpg)`

但是后来我发现这是行不通的,因为会报错,报错原因是没有./images/5.jpg这张图片,后来我换成了 url(./images/${i}.jpg) 我发现无论点击哪张照片出来的背景图片都是最后一张,冥思苦想了很久!!!于是去网上找了找资料,才知道这里是有问题的:

就是因为i被提升为了全局变量,所以onclick的时候只能求到最后一个循环到的值,那就是我的例子中的4,所以i 1的时候会报错,所以i的时候会一直显示最后一张照片.

当然也是有解决办法的,目前我会的:

将var换成let.
将值在每次遍历循环以后先赋值保存下来,令i = i.

这样效果也是一样的.

隔行变色案例(重点)

分析:

用到新的鼠标事件

鼠标经过: onmouseover 鼠标离开: onmouseout

核心思路: 鼠标经过tr行,当前的行变背景颜色,鼠标离开去掉当前的背景颜色.

接下来是一个非常常见的案例, 下面的框框是多选框,如果把商品全部选中,那么全选框会打上勾,如果取消掉其中一个,全选框的勾勾会消失

我们要分成两大块来做:

经历千辛万苦我终于做出来了!一开始跟着老师做的,但是电脑抽风了,明明写的代码是对的就是不执行...

代码语言：javascript复制

    <script>
        var all = document.getElementById('j_cbAll'); // 全选框
        var select = document.getElementById('j_tb').querySelectorAll('input');
        // 第一块 全选反选
        all.onclick = function () {
            if (this.checked == true) {
                for (var i = 0; i < select.length; i  ) {
                    select[i].checked = true;
                }
            } else {
                for (var i = 0; i < select.length; i  ) {
                    select[i].checked = false;
                }
            }
        }
       // 第二块 
        var flag = 0;
        for (let i = 0; i < select.length; i  ) {
            select[i].onclick = function () {
                if (select[i].checked) {
                    flag  
                    if (flag == 4) {
                        all.checked = true;
                    }
                }
                if (select[i].checked == false) {
                    flag--
                    all.checked = false;
                }
                console.log(flag);
            }
        }
    </script>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍