1. 案例需求分析?

点击ul里的任意小li，当前小li的背景颜色变成红色

其他的小li的背景颜色变成白色

2.具体思路

预先有一个【red】类名

运用排他思想，点击当前小li之前

第一步，所有的小li里面，有red类名的都先删除这个类名

第二步，再给当前点击的这个小li添加red类名

3. 代码演示

html文件

     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

css文件

        .red {
            background-color: red;
        }

3.1? 利用className进行排他思想实现

js文件

        var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function () {
                for (var j = 0; j <= lis.length; j++) {
                    lis[j].className = '';
                }
                this.className = 'red';
            })
        }

3.2 利用classList进行排他思想的实现

        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function () {
                ul.querySelector('.red').classList.remove('red');
                this.classList.add('red');
            })
        }

注意，写到这里的时候，记得先给ul里面的小li任意一个预先添加一个red类名

但是我感到奇怪的是以往的classList会变成深蓝色，但是这里没有，想必是有错误的？欢迎评论探讨

3.3 利用jQuery进行排他思想的实现

        $("ul").on("click", "li", function () {
            // $(".red").removeClass("red");
            // $(this).addClass("red");
            $(this).addClass("red").siblings().removeClass("red");
        })

此处用到了知识点：

事件委托：只需要给父元素绑定事件，当点击小li时，因为有冒泡的机制存在，向上冒泡，发现父元素绑定了事件，就能够触发事件。
事件委托的好处：

????????1.节省内存，只需要给父元素绑定事件即可

????????2.元素更新的好处。能够给后来创建的元素也绑定事件。

addClass----用于添加指定类名
removeClass----用于删除指定类名
隐式迭代的概念：给匹配到的所有的元素进行遍历，不需要我们手写遍历，能够简化操作。
链式编程：核心是return this,$(this).addClass("red").siblings().removeClass("red")这一段代码中，$(this).addClass("red")这里返回的仍旧是this，链式才能继续下去，如果链式返回的是数字，就会报错。

4. 进一步案例

?需求分析：

类似tab栏切换，鼠标经过按钮，对应的图片就显示，其余的图片隐藏

html

    <div class="wrapper">
        <ul id="left">
            <li><a href="#">焦迈奇</a></li>
            <li><a href="#">沈以诚</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/1111.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/2222.jpg" width="200" height="250" /></a>
            </div>
        </div>


    </div>

css

        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }

        #left,
        #content {
            float: left;
        }

        #left li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover {
            background-image: url(images/abg.gif);
        }

        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }

js模块

         $("#left").on("mouseover", "li", function () {
            var index = $(this).index();
            $("#content div").css("display", "none");
            $("#content div").eq(index).css("display", "block");
        })

运用到的方法:

$(this).index(); 获取左侧小li的索引号，li的索引和图片的索引一致
$("#content div").css("display","none")----选出右边的图片，进行链式编程的遍历，所有的display都预先设置为none
$("#content div").eq(index).css("display", "block");-----选出对应的图片，显示

总结分析：jQuery的结构看起来比其他两种方法更加方便。其次是classList。最后是className

结尾：

学习id： 201903090124-

现在是大三学生，学习到了前后端交互的express阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。