BOM..-优快云博客

本文链接：https://blog.youkuaiyun.com/Python1One/article/details/120578939

1.BOM概述

1. 什么是BOM

浏览器对象模型：给浏览器窗口做交互，核心对象是windows
BOM缺乏标准
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xx3wiqRH-1633078394839)(vx_images/2140755200971.png)]

2. 构成

BOM比DOM更大，它包含DOM
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gIKcqmQ8-1633078394841)(vx_images/688125119468.png)]
window对象是顶级对象，具有双重角色

他是js访问浏览器的一个接口
他是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。
在调用时可以省略window，alert()、prompt()都属于window对象方法
window下的一个特殊属性window.name

2. window对象的常见对象

1. 窗口加载事件

window.onload = function(){}
或者
window.addEventListener('load',function(){})

window.onload是窗口（）加载事件，当文档内容加载完成会触发改事件
注意

有了window.onload就可以吧js代码写到元素上方，因为onload是等页面全部加载完毕，再去执行处理函数。
window.onload传统注册方式只能写一次，如有多个，以最后一个为准。
使用window.addEventListener()可以写多个

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件出发时，仅当DOM加载完成，不包括样式表，图片，flash等
IE9以上支持
如果图片汗多用户访问到onload触发需要很长时间，此时用DOMContentLoaded比较合适。

<!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>点击</button>
</body>
<script>
    // window.onload = function () {
    //     var btn = document.querySelector("button");
    //     btn.addEventListener('click', function () {
    //         alert("点击")
    //     })
    // }

    window.addEventListener('load', function () {
        var btn = document.querySelector("button");
        btn.addEventListener('click', function () {
            alert("点击")
        })
    })

    window.addEventListener('load', function () {
        alert("111111")
    })

    document.addEventListener('DOMContentLoaded', function () {
        alert(2222)
    })

    // load 等页面全部加载完毕执行 如图片 dom
    // DOMContentLoaded是dom加载完毕执行  不包含css图片
</script>

</html>

2. 调整窗口大小事件

window.onresize = function(){};
window.addEventListener('resize',function(){});

window.onresize()当窗口大小改变就会触发
注意

只要窗口发生大小变化就会触发
利用这个事件完成响应式布局,window.innerWidth当前屏幕宽度

<!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: 50px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        window.addEventListener('load', function () {
            var div = document.querySelector('div');
            window.addEventListener('resize', function () {
                console.log(window.innerWidth);
                if (window.innerWidth <= 500) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
                // alert(1111);
            })
        })
    </script>

    <div></div>

</body>

</html>

3. 定时器

1. 两种定时器

setTimeout()
setInterval()

2. setTimeOut()定时器

window.setTimeOut(调用函数,[延迟的毫秒数])；
setTimeOut()方法用于设置一个定时器，该定时器到期后执行调用函数
注意

window可以省略
点用函数可以直接写函数，也可以函数名，或者采取字符串’函数名()'三种方式，第三种不推荐
延迟毫秒数不写，默认立即执行
可以给定时器起标识符
调用函数也称为了回调函数callback

案例：5秒钟后自动关闭的广告

<!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>
    <img src="./images/ad.jpg" alt="">
    <script>
        var img = document.querySelector('img');
        function fn() {
            img.style.display = 'none';
        }
        var adnone = setTimeout(fn, 5000)
    </script>
</body>

</html>

3. 停止setTimeout()定时器

window.clearTimeout(timeoutID)
注意

window可以省略
函数里面跟的就是定时器的标识符

4. setInterval()定时器

window.setInterval(回调函数,[间隔毫秒数])
setInterval()方法重复调用一个函数，每隔这个时间就调用一次
注意

window可以省略
点用函数可以直接写函数，也可以函数名，或者采取字符串’函数名()'三种方式，第三种不推荐
延迟毫秒数不写，默认立即执行
可以给定时器起标识符

<!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>
        //1. setInertval()
        setInterval(function () {
            console.log('调用');
        }, 1000)

        //2. setTimeout 延时到了就执行一次
        //3. setInterval 间隔一段时间执行一次
    </script>
</body>

</html>

案例：倒计时

<!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 {
            margin: 200px;
        }

        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>

    <script>
        //1. 获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2021-10-1 14:00:00')
        conutDown();//先调用防止刷新页面有空白
        //2. 开启定时

        setInterval(conutDown, 1000);
        function conutDown() {

            var nowTime = +new Date();
            var times = (inputTime - nowTime) / 1000; //剩余时间秒
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? "0" + h : h;
            hour.innerHTML = h;     //把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? "0" + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);
            s = s < 10 ? "0" + s : s;
            second.innerHTML = s;
        }
    </script>

</body>

</html>

5. 停止setInterval()定时器

window.clearInterval(intervalID)

<!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 class="begin">开始</button>
    <button class="stop">结束</button>

    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null;   //全局变量
        begin.addEventListener('click', function () {
            //var 声明局部变量
            beginTimer = setInterval(function () {
                console.log("你好");
            }, 1000)
        })
        stop.addEventListener('click', function () {
            clearInterval(beginTimer);
        })
    </script>
</body>

</html>

案例：发送短信（点击之后60s内不得点击）

分析

点击之后，禁用disabled为true
按钮内容会变化
在计时器设置一个变量不断递减
当递减到0停止计时器，并且不再禁用

<!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>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 10; //剩余的秒数
        btn.addEventListener('click', function () {
            btn.disabled = true;
            var timer = setInterval(function () {
                if (time == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000)
        })

    </script>
</body>

</html>

6. this

this的指向在函数定义时是确定不了的，只有函数执行的时候才能确定this到低指向谁，一般情况下this的最终指向的是调用它的对象

全局作用域或者普通函数中的this只想全局对象window（计时器中的this指向window）

<!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>点击</button>
    <script>
        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象

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

        function fn() {
            console.log(this);
        }
        window.fn()

        setTimeout(function () {
            console.log(this);
        }, 1000);
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function () {
                console.log(this); //指向o
            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.addEventListener('click', function () {
        //     console.log(this);  //this指向btn对象
        // })
        btn.onclick = function () {
            console.log(this);
        }
        // 3. 构造函数中this指向构造函数的实例

        function Fun() {
            console.log(this);// 指向fun实例对象
        }
        var fun = new Fun();
    </script>
</body>

</html>

4. JS执行机制

1. JS是单线程

js最大的特点就是单线程，同一时间只能做一件事

3. 同步和异步

同步

前一个任务结束后再执行下一个任务

异步

一件事等待时间长等待时可以做其他事

本质区别

这条流水线上各个流程的执行顺序不同

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务

JS的异步通过回调函数实现的
异步任务有以下三种：

普通事件如：click、resize
资源加载：load、error
定时器，包括setInterval、setTimeout等

4. 执行机制

先执行执行栈中的同步任务
异步任务（回调函数）反诬任务队列中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qrtETRny-1633078394842)(vx_images/3153757157501.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m8gfisbs-1633078394843)(vx_images/545300160170.png)]
由于主线程不断重复获得任务、执行任务、在获取任务、执行任务，所以这种机制称为事件循环。

5. location对象

1. 什么是location对象

window对象给我们提供了一个location属性用于获取或者设置窗体的URl，并且可以用于解析url

2. url

统一资源定位符

Protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议如常见的http ftp maito等
host	主机（域名）www.itheima.com
port	端口号省略事使用默认如http默认为80端口号
path	路径
query	参数
fragment	片段

3. location对象的属性

属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机(域名)
location.port	返回端口号如未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后内容

重点是href和search

案例点击按钮5秒后跳转

<!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>点击</button>
    <div></div>

    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var timer = null;
        var time = 5;

        btn.addEventListener('click', function () {
            btn.disabled = true;
            fn();
            // console.log(location.href);
            // location.href = 'http://www.itcast.cn'
            timer = setInterval(fn, 1000)
        })

        function fn() {
            if (time == 0) {
                location.href = 'http://www.itcast.cn'
            } else {
                div.innerHTML = '您将在' + time + '秒后跳转';
                time--;
            }

        }

    </script>
</body>

</html>

案例获取URL参数数据

login.html

<!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>
    <form action="./index.html" method="GET">
        用户名：<input type="text" name="uname">
        <input type="submit" value="登陆">
    </form>
</body>

</html>

index.html

<!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>
    <div></div>
    <script>
        console.log(location.search);//？uname=ads;
        //1. 利用分割字符串去掉?uname=
        var uname = location.search.substr(7);
        //2. 利用分割
        var uname1 = location.search.split("=");
        console.log(uname1[1]);
        //3. 把数据写入div
        var div = document.querySelector('div');
        div.innerHTML = uname1[1] + '欢迎您！';

    </script>
</body>

</html>

4. location对象方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转（重定向页面）
location.replace()	替换当前页面，不记录历史，不能后退
location.reload()	重新加载页面，相当于刷新或者F5，参数如果为true则是强制刷新ctrl+f5

<!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>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            // location.assign("http://www.itcast.cn");         //跳转后可以后推
            // location.replace("http://www.itcast.cn");           //跳转后不能后退
            location.reload();                                  //刷新当前页面
        })

    </script>
</body>

</html>