Bom操作01

基础JavaScript

Bom操作

1. Bom概念

1.1 什么是Bom

image-20230302112948386

1.2 Bom构成

image-20230302113009191

1.3 顶级对象window

image-20230302113030437

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
 <script>
        // 顶级对象window
        // window对象是浏览器的顶级对象，它具有双重角色。
        // 1.它是S访问浏览器窗口的一个接口。
        // 2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成wdow对象的属性和方法。
        // 在调用的时候可以省略window,前面学习的对话框都属于window对象方法，如alert0、prompt(0等。
        // 注意：window下的一个特殊属性window.name

        // window.document.querySelector()

        // 2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
        var num=10//num是一个全局变量
        console.log(num) //之前的写法
        console.log(window.num)//定义在全局作用域中的变量会变成window对象的属性和方法。
        function fn(){
            console.log(11);
        }
        fn()//之前是直接调用
        window.fn()//定义在全局作用域中的函数会变成window对象的属性和方法。

        alert(11)
        window.alert(11)//在调用的时候可以省略window,前面学习的对话框都属于window对象方法，如alert0、prompt(0等。

        // 查看window包含的内容
        console.dir(window)

        // 注意：window下的一个特殊属性window.name，不要以name来命名
        console.log(window.name);

</script>

2. window对象的常见事件

2.1 页面（窗口）加载事件

image-20230302113458523

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
<!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>
    <script>
        // window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本 文件、CSS 文件等), 就调用的处理函数。
        // 使用window.onload 是窗口 (页面）加载事件，js脚本语言不再局限于引入方式
        // 页面（窗口）加载事件（2种）
        //注意：
        // 1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，
        // 再去执行处理函数。
        // 2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
        // 3.如果使用addEventListener则没有限制

        // 第一种
        // window.onload function(){}或者
        // window.addEventListener ("load",function(){});
        // window.onload = function () {
        //     var btn = document.querySelector('button')
        //     btn.addEventListener('click', function (e) {
        //         alert('Click  me!');
        //     })
        // }

        // 2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
        // 3.如果使用addEventListener则没有限制
        window.addEventListener("load", function () {
            var btn = document.querySelector('button')
            btn.addEventListener('click', function (e) {
                alert('Click  me!');
            })
        })
        window.addEventListener("load", function () {
            alert('11')
        })

        // 第二种,推荐使用
        // document.addEventListener ('DOMContentLoaded',function(){})
        // DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
        // iE9以上才支持！！！
        // 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，
        // 必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。
        document.addEventListener("DOMContentLoaded", function (e) {
            var btn = document.querySelector('button')
            btn.addEventListener('click', function (e) {
                alert('Click  meeeeeee!');
            })
        })

        // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
        // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些(推荐使用)
    </script>
    <button>click</button>

</body>

</html>

2.2 调整窗口大小事件

image-20230302113706164

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
<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <script>
        // 调整窗口事件
        // window.onresize function(){}
        // window.addEventListener("resize",function (){})
        // window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
        // 注意：
        // 1.只要窗口大小发生像素变化，就会触发这个事件。
        window.addEventListener('resize', function (e) {
            console.log('窗口变化了');
        })

        // 2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
        document.addEventListener('DOMContentLoaded', function (e) {
            var div = document.querySelector('div')
            window.addEventListener('resize', function (e) {
                console.log(window.innerWidth);
                if (window.innerWidth <= 900) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })

    </script>
    <div></div>
</body>

</html>

3. 定时器

3.1 setTimeout()

3.11 概要

image-20230302114149095

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
        // 1、setTimeout
        // 语法规范：window.setTimeout(调用函数，延时时间）
        // 1、window可以省略
        // 2、延时时间单位是毫秒，可以省略，如果省略默认是0
        // 3、这个调用函数可以直接写函数，还可以写函数名，另一个写法'函数名()'

        // 回调函数是一个匿名函数
        setTimeout(function () {
            console.log('time is begin')
        }, 2000)

        // 回调函数是一个有名函数
        function callback() {
            console.log('time is over')
        }
        var time1=setTimeout(callback, 4000)
        var time2=setTimeout(callback, 6000)

        //setTimeout('callback()', 4000)不提倡这种写法
</script>

3.12 5秒后关闭广告案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
    <script>
        //5秒后关闭广告案例
        document.addEventListener("DOMContentLoaded",function(){
            var img = document.querySelector("img")
            function hide() {
                img.style.display='none'
            }
            setTimeout(hide,5000)
        })
    </script>
    <img src="./images/ad.jpg" alt="" srcset="">
</body>
</html>

3.13 清除定时器

image-20230302114458836

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
<!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>
    <script>
        // 停止定时器
        // window.clearTimeout (timeoutID)
        // clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。
        // 注意：
        // 1.window可以省略。
        // 2.里面的参数就是定时器的标识符。

        document.addEventListener("DOMContentLoaded", function () {
            var timer=setTimeout(function () {
                alert('时间到')
            }, 3000)

            var btn=document.querySelector('button')
            btn.addEventListener("click", function(){
                clearTimeout(timer)
            })
        })

    </script>
    <button>停止setTimeout</button>
</body>

</html>

3.2 setInterval()

3.21 概要

image-20230302114739452

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
        // window.setInterval(回调函数，[间隔的毫秒数])；
        // setInterval0方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
        // 注意：
        // 1.window可以省略。
        // 2.这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名0'三种形式。
        // 3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
        // 4.因为定时器可能有很多，所以我们经常给定时器威值一个标识符。
        // 5.第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

        // 1. setInterval 
        // 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('继续输出');

        }, 1000);
        // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
    </script>

3.22 倒计时案例

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
<!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;
        }

        .box {
            margin: 200px auto;
            width: 210px;
        }

        .time {
            display: flex;
            justify-content: space-between;
        }

        span {
            width: 50px;
            height: 50px;
            background-color: black;
            color: white;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            font-size: 20px;
        }

        p {
            display: none;
            width: 100%;
            height: 50px;
            background-color: brown;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <script>
        // 1、这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)
        // 2、三个黑色盒子里面分别存放时分秒
        // 3、三个黑色盒子利用innerHTML放入计算的小时分钟秒数
        // 4、第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
        // 5、最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题

        document.addEventListener("DOMContentLoaded", function () {
            var div = document.querySelector('.box')
            var dd = document.querySelector('.d')
            var hh = document.querySelector('.h')
            var mm = document.querySelector('.m')
            var ss = document.querySelector('.s')
            var p = document.querySelector('p')
            // 倒计时效果
            // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
            // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
            // 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
            // 转换公式如下： 
            //  d = parseInt(总秒数/ 60/60 /24);    //  计算天数
            //  h = parseInt(总秒数/ 60/60 %24)   //   计算小时
            //  m = parseInt(总秒数 /60 %60 );     //   计算分数
            //  s = parseInt(总秒数%60);            //   计算当前秒数
            var inputTime = +new Date('2023-12-30 23:59:59'); // 返回的是用户输入时间总的毫秒数
            function countDown() {
                var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
                var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
                var d = parseInt(times / 60 / 60 / 24); // 天
                d = d < 10 ? '0' + d : d;
                dd.innerHTML = d + '天'

                var h = parseInt(times / 60 / 60 % 24); //时
                h = h < 10 ? '0' + h : h;
                hh.innerHTML = h + '时'

                var m = parseInt(times / 60 % 60); // 分
                m = m < 10 ? '0' + m : m;
                mm.innerHTML = m + '分'

                var s = parseInt(times % 60); // 当前的秒
                s = s < 10 ? '0' + s : s;
                ss.innerHTML = s + '秒'

                if (times <= 0) {
                    div.style.display = 'none'
                } else if (times <= 6) {
                    p.style.display = 'block'
                    p.innerHTML = '该广告' + parseInt(times) + '秒后关闭'
                }
            }
            countDown()// 我们先调用一次这个函数，防止第一次刷新页面有空白 

            // 开启定时器
            var timer = setInterval(countDown, 1000)
        })
    </script>
    <div class="box">
        <div class="time">
            <span class="d"></span>
            <span class="h"></span>
            <span class="m"></span>
            <span class="s"></span>
        </div>
        <p></p>
    </div>
</body>

</html>

3.23 清除定时器

image-20230302115145793

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
<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: brown;
            text-align: center;
            line-height: 200px;
            color: white;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <button class="begin">开启定时器</button>
    <button class="end">关闭定时器</button>
    <div></div>
    <script>
        // 停止定时器
        // window.clearInterval(intervalID)
        // clearInterval()方法取消了先前通过调用setInterval()建立的定时器。
        // 注意：
        // 1.window可以省略。
        // 2.里面的参数就是定时器的标识符。

        document.addEventListener("DOMContentLoaded", function () {
            var begin = document.querySelector('.begin')
            var end = document.querySelector('.end')
            var div = document.querySelector('div')

            var count = 10
            var timer = null
            begin.addEventListener('click', function (e) {
                timer = setInterval(function () {
                    div.innerHTML = count
                    count--
                    if (count < 0) {
                        div.innerHTML = '计时结束'
                    }
                }, 1000)
            })

            end.addEventListener('click', function (e) {
                clearInterval(timer)
            })
        })
    </script>
</body>

</html>

3.24 短信案例

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
<!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>
    <!-- 点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。 -->
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        document.addEventListener("DOMContentLoaded", function () {
            var input = document.querySelector('input')
            var btn = document.querySelector('button')
            // var sum = 6
            var timer = null
            btn.addEventListener("click", function () {
                sum = 6
                btn.disabled = true
                timer = setInterval(function () {
                    sum--
                    btn.innerHTML = sum + '秒以后再发送'
                    if (sum == 0) {
                        btn.innerHTML = '发送'
                        btn.disabled = false
                        clearInterval(timer)
                    }
                }, 1000)
            })
        })
    </script>
</body>

</html>

4. this指向问题

image-20230302115344396

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
<!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>
    <script>
        // this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般
        // 情况下this的最终指向的是那个调用它的对象。
        // 现阶段，我们先了解一下几个this指向

        // this指向问题，一般情况下this的最终指向的是那个调用它的函数

        // 1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

        // 1.1全局作用域
        console.log(this);

        // 1.2普通函数
        function fn() {
            console.log(this);
        }
        window.fn()

        // 1.3定时器
        window.setInterval(function () {
            console.log(this);
        }, 1000);

        // 2. 方法调用中谁调用this指向谁
        var method = {//this指向method
            sayHi: function () {
                console.log(this);
            }
        }
        method.sayHi()

        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            console.log(this);
        })
        btn.onclick = function () {
            console.log(this);
        }

        // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this);//this指向实例对象fun
        }
        var fun = new Fun()
    </script>
    <button>btn</button>
</body>

</html>

5. JS执行机制

5.1 JS 是单线程

image-20230302115548122

5.2 同步任务和异步任务

image-20230302115603522

5.3 JS执行机制（事件循环）

image-20230302115613572

5.4 代码解释

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
<script>
        // 第一个问题123
        // console.log(1);

        // setTimeout(function() {

        //     console.log(3);

        // }, 1000);

        // console.log(2);

        // 2. 第二个问题123
        // console.log(1);

        // setTimeout(function() {//回调函数是异步任务

        //     console.log(3);

        // }, 0);

        // console.log(2);

        // 3. 第三个问题123click或者12click3

        console.log(1);
        document.onclick = function() {
            console.log('click');
        }
        console.log(2);
        setTimeout(function() {
            console.log(3)
        }, 3000)


        //  JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
        // 同步任务指的是：
        //      在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
        // 异步任务指的是：
        //      不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取
        //      出异步任务放入主线程执行。

        // 先同步后异步
</script>

6. Bom常见对象

6.1 location对象

6.11 什么是 location 对象

image-20230302160340108

6.12 URL

image-20230302160354466

6.13 location 对象的属性

image-20230302160404659

6.14 案例分析

6.141 5秒钟自动跳转页面

image-20230302160420092

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
<!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>5秒跳转</button>
    <script>
        document.addEventListener("DOMContentLoaded", function (e) {
            var btn = document.querySelector('button');
            var sum = 5
            var timee = null
            btn.addEventListener("click", function (e) {
                timee = setInterval(function () {
                    sum--
                    btn.innerHTML = sum + '秒跳转'
                    if (sum <= 0) {
                        btn.innerHTML = '已跳转'
                        location.href='https://www.baidu.com/'
                        clearInterval(timee)
                    }
                }, 1000)
            })
        })
    </script>
</body>

</html>

6.142 获取URL参数

image-20230302160608697

image-20230302160625483

6.15 location对象的常见方法

image-20230302160649974

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
<!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>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var btn = document.querySelector('button')
            var sum = 5
            var timee = null
            btn.addEventListener("click", function (e) {
                timee = setInterval(function () {
                    sum--
                    btn.innerHTML = sum + '秒跳转'
                    if (sum <= 0) {
                        btn.innerHTML = '已跳转'
                        // 记录浏览历史，所以可以实现后退功能
                        // location.assign('https://www.baidu.com/') 

                        // 不记录浏览历史，所以不可以实现后退功能
                        // location.replace('https://www.baidu.com/');

                        // 重新加载当前页面，相当于刷新
                        // location.reload();
                        location.reload(true);//强制刷新


                        clearInterval(timee)
                    }
                }, 1000)
            })
        })
    </script>
    <button>点击</button>
</body>

</html>

6.2 navigator对象

image-20230302160824817

image-20230302160847243

6.3 history对象

image-20230302161025144

image-20230302161135633

image-20230302161150684

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~