Dom排他思想

基础JavaScript

Dom文档对象模型

4.6 排他思想

4.61 排他详解

image-20230301145432119

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1、获取所有元素
        var  btn=document.querySelectorAll('button')
        // 2、btn得到的是伪数组
        for (var i=0; i<btn.length; i++){
            btn[i].onclick=function(){
                // (1)事件触发时，先把其他所有按钮的背景颜色去掉
                for(var i=0;i<btn.length;i++){
                    btn[i].style.backgroundColor=''
                }
                // (2)保留当前的按钮背景颜色
                this.style.backgroundColor='pink'
            }
        }
    </script>
</body>

</html>

4.62 排他案例

1.百度换肤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: url('./images/1.jpg') no-repeat fixed;
            background-size: cover;
            background-position: center top;
        }

        div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* width: 400px; */
            display: flex;
            border: 5px solid rgb(255, 255, 255);
        }

        img {
            width: 200px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/1.jpg" alt="" srcset="">
        <img src="./images/2.jpg" alt="" srcset="">
        <img src="./images/3.jpg" alt="" srcset="">
        <img src="./images/4.jpg" alt="" srcset="">
    </div>
    <script>
        var bg = document.body
        // 1、获取图片元素
        var imgs = document.querySelector('div').querySelectorAll('img')
        // 2、循环点击事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                for (var i = 0; i < imgs.length; i++) {
                    bg.style.backgroundImage='url()'
                }
                bg.style.backgroundImage='url('+this.src+')'
            }

        }
    </script>
</body>

</html>

2.表格隔行变色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 80vw;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        table thead {
            color: rgb(0, 0, 0);

            background-color: skyblue;
        }

        tr {
            height: 30px;
        }

        tbody tr {
            font-size: 12px;
            height: 30px;
            border-bottom: 0.5px solid rgb(184, 173, 173);
            color: blue;
        }
        .bg{
            background-color: skyblue;
        }
    </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>
        <script>
            var line = document.querySelector('tbody').querySelectorAll('tr')
            // 循环得到所有的tr
            for (var i = 0; i < line.length; i++) {
                // 1、鼠标经过
                line[i].onmouseover =function(){
                    // this为了返回当前元素
                    this.className='bg';
                } 
                // 2、鼠标移除
                line[i].onmouseout =function(){
                    this.className='';
                } 
            }


            // 该案例也可通过css的hover实现
        </script>
</body>

</html>

3.复选框全选与取消

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

        table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 300px;
        }

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

        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="shotted" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="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>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var all = document.querySelector('#shotted')
        var inputbox = document.querySelector('#tb').querySelectorAll('input')
        all.onclick = function () {
            for (var i = 0; i < inputbox.length; i++) {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                inputbox[i].checked = this.checked
            }
        }
        // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 
        // 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < inputbox.length; i++) {
            inputbox[i].onclick = function () {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < inputbox.length; i++) {
                    if(!inputbox[i].checked){
                        flag=!flag
                        // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                        break
                    }
                }
                all.checked = flag
            }
        }
    </script>
</body>

</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~