JS复习13：BOM

最新推荐文章于 2022-01-10 19:20:09 发布

好汤圆

最新推荐文章于 2022-01-10 19:20:09 发布

阅读量109

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_47436772/article/details/115998776

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

JS复习13：BOM

一、什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

浏览器对象模型
把「浏览器」当做一个「对象」来看待
BOM 的顶级对象是 window
BOM 学习的是浏览器窗口交互的一些对象
BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM 比 DOM 更大，它包含 DOM

在这里插入图片描述

二、window的常见事件

页面加载事件

<script>
        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {

            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
            // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
            // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
</head>

<body>

    <button>点击</button>

</body>

调整窗口大小事件

<style>
        div {
            width: 200px;
            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);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>
    <div></div>
</body>

三、定时器

setTimeout

<script>
    // 1. setTimeout 
    // 语法规范：  window.setTimeout(调用函数, 延时时间);
    // 1. 这个window在调用的时候可以省略
    // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
    // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
    // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
    // setTimeout(function() {
    //     console.log('时间到了');

    // }, 2000);
    function callback() {
    console.log('爆炸了');

}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// setTimeout('callback()', 3000); // 我们不提倡这个写法
</script>

小案例：5秒后自行关闭的广告

<img src="images/ad.jpg" alt="" class="ad">
    <script>
    var ad = document.querySelector('.ad');
setTimeout(function() {
    ad.style.display = 'none';
}, 5000);
</script>

如何清除该定时器？

<button>点击停止定时器</button>
<script>
    var btn = document.querySelector('button');
var timer = setTimeout(function() {
    console.log('爆炸了');

}, 5000);
btn.addEventListener('click', function() {
    clearTimeout(timer);
})
</script>

setInterval

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

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

小案例：实现倒计时效果

<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">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            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>

如何清除该定时器？

<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
    var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局变量  null是一个空对象
begin.addEventListener('click', function() {
    timer = setInterval(function() {
        console.log('ni hao ma');

    }, 1000);
})
stop.addEventListener('click', function() {
    clearInterval(timer);
})
</script>

小案例：发送短信

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var btn = document.querySelector('button');
        var time = 3; // 定义剩下的秒数
        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>

四、JS执行机制

JavaScript 语言的一大特点就是单线程，即同一个时间只能做一件事。

这是因为JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。

比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。否则就违背了JS语言的执行机制。

单线程所导致的问题是：如果JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

比如一个多图网站，图片需要一个一个加载，非常缓慢！

同步和异步

为了解决这个问题，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。

于是，JS 中出现了同步和异步这两个概念。

同步

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

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情

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

同步任务和异步任务

同步任务

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

异步任务

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

执行机制

先执行执行栈中的同步任务
异步任务（回调函数）放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

在这里插入图片描述

五、location对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

location对象的属性

属性	返回值
herf	获取或设置整个url
host	域名
port	端口号
pathname	路径
search	参数
hash	返回#后面的内容

小案例：5s后跳转页面

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }

        }, 1000);
    </script>
</body>

location对象的方法

方法	作用
assign（）	重定向页面
replace（）	替换页面
reload（）	重新加载页面

六、navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

即可以返回用户所使用的设备是什么类型。

七、history对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。

方法	作用
back()	后退
forward()	前进
go(参数)	前进和后退（取决于参数，1前进，-1后退）

好汤圆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS复习13：BOM

JS复习13：BOM一、什么是BOMBOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。浏览器对象模型把「浏览器」当做一个「对象」来看待BOM 的顶级对象是 windowBOM 学
复制链接

扫一扫