排他思想的运用

排他

DOM

发布日期: 2019-05-07

文章字数: 2.2k

阅读时长: 12 Min

阅读量:

JavaScript排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

demo1多个按钮

<button>BTN1</button>
   <button>BTN2</button>
   <button>BTN3</button>
   <button>BTN4</button>
   <button>BTN5</button>
   <script>
       var btns = document.querySelectorAll("button");
       for (var i = 0; i < btns.length; i++) { //此处是为了绑定事件
           btns[i].onclick = function () {
               for (var i = 0; i < btns.length; i++) {
                   btns[i].style.backgroundColor = "";
               }
               this.style.backgroundColor = "cyan";
           }
       }
   </script>

首先去获取的一个伪数组
利用双重for循环
首先先排除其他人，然后才设置自己的样式，这种排除其他人的思想我们称为排他思想

demo2全选反选

  <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        var cbAll = document.querySelector("#j_cbAll");
        var cbItems = document.querySelectorAll("#j_tb input");
        cbAll.onclick = function () {
            for (var i = 0; i < cbItems.length; i++) {
                cbItems[i].checked = this.checked;
            }
        }

      

        for (var i = 0; i < cbItems.length; i++) {
            cbItems[i].onclick = function () {
                var flag = true;
                for (var i = 0; i < cbItems.length; i++) {
                    if (!cbItems[i].checked) {
                        flag = false;
                        break;
                    }
                }
                cbAll.checked = flag;
            }
        }
    </script>
</body>

demo3表格隔行变色

<style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
            height: 30px;
        }

        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function () {
                this.className = 'bg';
            }
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }
    </script>
</body>

demo4打开一个视口

<a href="javascript:popUP('http://www.baidu.com/');">baidu</a>  //Chrome会拦截弹窗,允许即可
   <script>
       function popUp(winURL) {
           window.open(winURL, " popup", "width=400,height=280");
       }
       popUp('http://www.baidu.com/');
   </script>

demo5循环精灵图

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(../img/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var lis = document.querySelectorAll("li");
        for (var i = 0; i < lis.length; i++) {
            var index = i * 44;
            lis[i].style.backgroundPosition = `0 -${index}px`;
        }
    </script>
</body>

demo6tab栏切换

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        var tab_list = document.querySelector('.tab_list'); //获取dom元素
        var lis = tab_list.querySelectorAll('li'); //获取dom元素
        var items = document.querySelectorAll('.item'); //获取dom元素
        for (let i = 0; i < lis.length; i++) { //给所有li 注册事件
            lis[i].setAttribute('index', i); //给遍历到的li 添加 index = i 的属性和属性值
            lis[i].onclick = function () { //绑定函数
                for (let i = 0; i < lis.length; i++) { //第一遍循环
                    lis[i].className = ''; //给遍历到的li 赋空值;
                }
                this.className = 'current'; // 给遍历到的函数添加类名为'current'
                var index = this.getAttribute('index'); //获取 index这个dom元素
                console.log(index);
                for (let i = 0; i < items.length; i++) { //给遍历到的Dom添加 事件
                    items[i].style.display = 'none';
                }
                items[i].style.display = 'block';
            }
        }
    </script>
</body>

demo表单提交

 <style>
        /* * {
            margin: 0;
            padding: 0;
        } */

        div {
            display: flex;
            align-items: center;
        }

        input {
            margin-left: 10px;
            width: 200px;
            height: 20px;
        }

        table {
            width: 600px;
            cursor: pointer;
        }

        table td {
            text-align: center;
        }

        table th {
            background-color: blueviolet;
        }

        table tr {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        <p>请输入姓名:</p>
        <input type="text" id="username" value="">
    </div>

    <div>
        <p>请输入邮箱:</p>
        <input type="text" id="email" value="">
    </div>
    <button>添加</button>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>小黑</td>
                <td>eocho@126.com</td>
            </tr>
            <tr>
                <td>小白</td>
                <td>echo@alibaba.com</td>
            </tr>
        </tbody>
    </table>
    <script>
         var username = document.querySelector("#username");
         var btn = document.querySelector("button");
         var email = document.querySelector("#email");
        // btn.onclick = function () {
        //     if (username.value === "" || email.value === "") {
        //         alert("不要提交空信息");
        //         return;
        //     }
        //     var tr = document.createElement("tr"); // 声明创建一个tr
        //     tb.appendChild(tr); // 在tb节点插入tr
        //     var td = document.createElement("td");
        //     td.innerHTML = username.value;
        //     tr.appendChild(td);
        //     var td2 = document.createElement("td"); //声明:创建一个变量名为tb2的tb标签
        //     td2.innerHTML = email.value; //把email.value值写入tb2
        //     tr.appendChild(td2);
        // }
        btn.onclick = function () {
            if (username.value.trim() === "" || email.value.trim() === "") {
                alert("请输入正确的值");
                return;
            }
            var tr = document.createElement("tr");
            tb.insertBefore(tr, tb.children[0]);
            var td = document.createElement("td");
            td.innerHTML = username.value;
            tr.insertBefore(td, tr.children[0]);
            var td2 = document.createElement("td");
            td2.innerHTML = email.value;
            tr.insertBefore(td2, tr.children[0]);
            username.value = email.value = "";
        }
    </script>