querySelector的使用，兼容性较好，排他思想

通过类名获取

  1. document.getElementsByClassName('类名')根据类名获得某些元素的集合
  2. document.querySelector('.box')返回指定选择器的第一个元素对象
  3. document.querySelectorAll('选择器')返回指定选择器的所有元素对象

获取特殊元素

  1. 获取body元素 document.body
  2. 获取html元素 document.documentElement

事件基础

  1. 被JavaScript检测到的行为，响应机制
  2. 事件源，时间类型，时间处理程序
  3. 事件源 按钮对象
  4. 事件类型 比如onclick
  5. 事件处理程序 通过一个函数赋值的方式完成

查看实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <button id="btn">你好</button>
        <script>
            var btn = document.getElementById('btn');
            btn.onclick = function(){
                alert('世界')
            }
        </script>
<div>你好世界</div>
        <script>
            var dir = document.querySelector('div');
            dir.onclick = function(){
                console.log('我被选中了');
            }
</script>

操作元素

  1. 改变页面元素的内容 元素.innerText，不识别标签，非标准，去除空格和换行
  2. 元素.innerHtml 可识别标签，可获取标签和空格（形式）
  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
<style>
p{
            width: 200px;
            height: 50px;
            line-height: 50px;
            background-color: #7a1d8d;
        }
        div {
            width: 100px;
            height: 40px;
            list-style: 40px;
            background-color: #8a4444;
        }
    </style>
    <button>
        显示当前系统时间
    </button>
    <div>某个时间</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var p = document.querySelector('p')
        btn.onclick = function() {
            div.innerText = date();
        }
        function date() {
            var date = new Date();
            var day = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return '今天是' + day[date.getDay()];
        }
        p.innerText = date();
    </script>

通过修改标签属性

  1. 比如：img.src

查看实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
        img{
            width: 200px;
        }
    </style>
    <button class="ni">你好</button>
    <button class="ss">世界</button>
    <img src="https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png" alt="">
    <script>
        var ni = document.querySelector('.ni');
        var ss = document.querySelector('.ss');
        var img = document.querySelector('img');
        ni.onclick = function(){
            img.src = 'https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_68883968_20180804_203521.webp'
        }
        ss.onclick = function(){
            img.src = 'https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png'
        }
</script>
  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
<style>
    img{
        width: 300px;
    }
</style>
<body>
    <img src="https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png" alt="">
    <div>当前的时间为</div>
    <script>
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        var date = new Date();
        var h = date.getHours();
        if (h < 12){
            img.src = 'https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png'
            div.innerHTML = '现在是上午，好好写代码'
        }else if(h<18){
            img.src = 'https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_68883968_20180804_203521.webp'
            div.innerHTML = '现在是傍晚，好好写代码'
        }else{
            img.src = 'https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_65203608_20171003_092952.webp'
            div.innerHTML = '现在是晚上，好好写代码'
        }
    </script>

修改表单属性

  1. 通过修改表单元素的属性，比如：表单元素按钮中，按钮禁用的两种方法
  2. 属性名(this).disabled = true

查看答案

1
2
3
4
5
6
7
8
9
10
11
12
<button>按钮</button>
<input type="text" value="输入内容">
<script>
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    btn.onclick = function(){
        input.value = '你好世界';
        btn.disabled = true;
        // 禁用按钮 this.disabled = true  
        // this是指时间函数的调用者
    }
</script>
  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
<style>
    input {
        outline: none;
        border-radius: 5px;
        border: 1px solid #888;
        width: 100%;
    }


    div {
        position: relative;
        width: 200px;
    }

    i {
        position: absolute;
        right: 0px;
        top: 5px
    }
</style>

<body>
    <div>
        <input type="text" placeholder="请输入密码"><i class="fa fa-battery-2"></i>
    </div>
    <script>
        var input = document.querySelector('input');
        var i = document.querySelector('i');
        i.onclick = function () {
            if (input.type == 'text') {
                input.type = 'password';
            } else {
                input.type = 'text';
            }
        }
</script>

通过js修改样式

  1. 元素.style里面的属性采用驼峰命名法,行内样式，权重较高
  2. 元素.className类名样式属性
  3. 利用样式的显示和隐藏 box.style.display: 'none'
  4. 精灵图 对于有规律的，可以使用for循环

操作元素

  1. onfocus/onblur，获得焦点，失去焦点
  2. 元素.className类名样式属性，更改元素的样式，适合样式较多
  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
<style>
    .last {
        width: 300px;
        height: 200px;
        font-size: 12px;
        font-weight: 600;
        color: antiquewhite;
        background-color: blueviolet;
    }

    .chage {
        width: 200px;
        height: 300px;
        font-size: 12px;
        font-weight: 600;
        color: #172ca7;
        background-color: #19b8d471;
    }
</style>

<body>
    <input type="text" placeholder="你好世界">
    <div class="last">
        你好世界
    </div>
    <script>
        var div = document.querySelector('div');
        var flag = 0;
        div.onclick = function () {
            if (flag == 0) {
                div.className = 'chage';
                flag = 1;
            } else {
                div.className = 'last';
                flag = 0;
            }
        }
    </script>
</body>
  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
<style>
    input {
        width: 300px;
        border-radius: 5px;
        outline: none;
        border: 1px solid #888;
    }
    .itab{
        position: relative;
        display: inline-block;
        width: 100px;
        height: 20px;
        line-height: 20px;
    }
    .fa-exclamation-circle {
        position: absolute;
        display: none;
        left: 0;
        top:0;
        font-size: 12px;
        color: #0099ff;
    }

    .fa-times-circle {
        position:absolute;
        display: none;
        left: 0;
        top:12px;
        font-size: 12px;
        color: red;
    }

    i p {
        display: inline-block;
        font-size: 12px;
        color: #888;
    }
</style>

<body>
    <input type="text" name="" id="" placeholder="请输入密码">
    <div class="itab">
    <i class="fa fa-exclamation-circle">
        <p>6-16位字符</p>
    </i>
    <span class="fa fa-times-circle">密码较短</span></div>
    <script>
        var input = document.querySelector('input');
        var i = document.querySelector('i');
        var span = document.querySelector('span')
        input.onfocus = function(){
            i.style.display = 'block';
            span.style.display = 'none'
        }
        input.onblur = function(){
            i.style.display = 'none';
            span.style.display = 'block'
        }
    </script>

方法二

查看答案

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
<style>
    input {
        width: 300px;
        border-radius: 5px;
        outline: none;
        border: 1px solid #888;
    }


    .fa-exclamation-circle {
        color: #0099ff;
        font-size: 12px;
    }

    .fa-times-circle {
        color: red;
        font-size: 12px;
    }

    .fa-check-circle {
        color: green;
        font-size: 12px;
    }
</style>

<body>
    <input type="password" name="" id="" placeholder="请输入密码" value="">
    <i class="fa"></i>
    <!-- <span class="fa fa-times-circle">fa fa-check-circle密码较短</span></div> -->
    <script>
        var input = document.querySelector('input');
        var i = document.querySelector('i');
        input.onfocus = function () {
            i.className = 'fa fa-exclamation-circle';
            i.innerHTML = '请输入1-16位字符的密码';
        }
        input.onblur = function () {
            if (input.value.length < 6 || input.value.length > 16) {
                i.className = 'fa fa-times-circle';
                i.innerHTML = '您输入的密码不符合要求，请输入1-16位字符'
            }
            else {
                i.className = 'fa fa-check-circle';
                i.innerHTML = '您输入的密码正确！！'
            }
        }
    </script>

</body>

排他思想

  1. 原理：所有元素清除样式，给所有元素设置样式

经典案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
    var btns = document.getElementsByTagName('button');
    for(var i = 0;i<= btns.length - 1;i++){
        btns[i].onclick = function(){
            for(i = 0;i<btns.length;i++){
                btns[i].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'pink';
        }
    }
</script>

鼠标经过离开

  1. onmouseover鼠标经过
  2. onmouseout鼠标离开