Javascript（3）-BOM

最新推荐文章于 2023-10-03 21:29:43 发布

无敌的小周

最新推荐文章于 2023-10-03 21:29:43 发布

阅读量557

点赞数

分类专栏：前端基础文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52972575/article/details/124132660

版权

前端基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript的浏览器对象模型BOM，重点讨论了window对象的事件如窗口加载和调整大小，以及location、navigator和history属性。同时，通过实际案例展示了如何实现自动关闭广告、倒计时、发送短信等应用场景，揭示了JavaScript的执行机制和this的指向问题。

摘要由CSDN通过智能技术生成

一.简介

BOM（Browser Object Model）浏览器对象模型，与浏览器窗口进行交互。核心对象是window。

BOM比DOM大，包含了DOM。

document操作文档中的元素

location操作地址栏的URL

navigation包含浏览器的信息，必须浏览器是由什么设备打开的（手机/电脑）

history可以进行回退和前进，与历史浏览记录相关

二.理论基础

1.this的指向问题

一般情况下，this最终指向的是那个调用它的对象

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

因为调用函数的默认是window.fn()；
console.log(this);

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

o.sayHi();

var btn = document.qs
btn.onclick = function(){
    console.log(this);//指向btn
}
3.构造函数中this指向构造函数的实例
function Fun(){
    console.log(this);//this 指向fun实例对象
}
var fun = new Fun();

2.JS执行机制

    <script>
    console.log(1);
    setTimeout(function () {
        console.log(3)
    },1000);
    console.log(2);
    </script>
这段代码中JS会输出123，不会等待3执行完再执行2.

回调函数一般和时间有关系，需要等待的时间可能长。

所以上面的代码将1000毫秒改为0，也不会输出132.而是输出123

多个异步任务时怎么执行处理

先执行第一个同步函数，将第一个异步函数交给异步进程处理，等待点击鼠标事件，如果不点击，异步任务就不放到异步任务中。再执行控制台打印2，再将第二个异步函数放到异步任务中。

当执行完异步任务后，异步任务队列就清空了。如果不点击鼠标就输出123.如果任何时候点击鼠标，异步进程处理就把异步任务放到队列中。

三.window对象

1.window对象的事件

window是一个全局对象，定义在全局作用域中的变量或者方法都会变成window对象的属性和方法，在调用的时候可以省略window。

<script>
    var num = 10;
    function fn(){
        window.alert("oops")
    };
    alert(window.num);
    window.fn();
</script>

window下面有一个特殊的属性是name，所以定义变量时不要var name。

窗口加载事件

当文档内容完全加载完成（包括图片，脚本文件，CSS文件等）会触发该事件，这样就可以不用把script标签写到body中了，不用写到标签的后面。可以写在head中。
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function (){
            var btn = document.querySelector('button');
            btn.onclick = function (){
                alert('oops');
            }
        }
    </script>
</head>
<body>
<button>按钮</button>
</body>
</html>
用传统的写法时，当写多个window.onload事件时，会以最后一个为准，其他的都不生效了。

所以用下面的方式
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      window.addEventListener('load',function () {
          alert('oops');
      })
      window.addEventListener('load',function () {
          alert('tap me');
      })
    </script>
</head>
<body>
<button>按钮</button>
</body>
</html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.addEventListener('load',function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click',function () {
                alert('oops');
            })
        })
        window.addEventListener('load',function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click',function () {
                alert('tap me');
            })
        })
    </script>
</head>
<body>
<button>按钮</button>
</body>
</html>
var btn不能写到最外层。
document.addEventListener('DOMContentLoaded',function(){})
这个事件当DOM加载完成后触发，不包括样式表，图片，flash等等。

如果页面图片特别多，用window.onload会加载事件很长，影响js的交互效果的实现，所以这时候用DOM的加载完成事件会更合适。

调整窗口大小事件

当浏览器的窗口大小发生了变化而产生的一些交互效果

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

当页面宽度小于800，div隐藏，当页面宽度大于800，div显示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.addEventListener('load',function () {
            var div = document.querySelector('div');
            window.addEventListener('resize',function (){
                if(window.innerWidth < 800){//当前窗口的宽度
                    div.style.display = 'none';
                }else{
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #9900bb;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

定时器 setTimeout

比如某些轮播图，隔一段事件就轮播一张。
        //window.setTimeout(调用函数,[延迟的毫秒数]);设置一个定时器，定时在延迟到时之后调用函数
        //window在调用时可以省略,延迟毫秒数也可以省略，省略后默认是0
        //如果函数的内容很多，可以采用写函数名的方式
        setTimeout(function (){
            alert("It's time!");
        },2000)

        //页面中可能有很多定时器，可以给定时器起名字

        var timer1 = setTimeout(function(){},3000);
        var timer2 = setTimeout(function(){},5000);
setTimeout也称为回调函数callback，普通函数是按顺序执行的，而回调函数是等待时间，只有时间到了才返回头调用函数。所以onclick也是回调函数。

清除定时器
window.clearTimeout(timer1);
定时器 setInterval
//window.setInterval(回调函数,[间隔毫秒数]);
        //作用：每隔一秒就调用一次
        window.addEventListener('load',function () {
            setInterval(function (){
                alert('oops');
            },2000)
        })
清除计时器
clearInterval(timer1);
注意timer1需要时全局变量，要是在一个方法内，就关闭不了了。

2.window对象的属性

location属性

URL

location对象的属性

navigator属性

可以根据打开该页面的设备来显示不同格式的页面，手机端和电脑端打开的页面有各自不同的显示效果。

手机端的页面代码和电脑端的页面代码不同，根据navigator的属性值来打开不同的页面。

history属性

back()和forward()就是浏览器中后退和前进的功能

这两个功能也能通过js代码来实现

go既可以实现back功能也能实现forwar功能

案例

1.五秒后自动关闭的广告

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.addEventListener('load',function () {
            var ad = document.querySelector('img');
            setTimeout(function (){
                ad.style.display = 'none';
            },5000)
        })
    </script>
</head>
<body>
<img src="../images/logo.png" alt="">
</body>
</html>

2.倒计时

setInterval里面的方法只能传方法名，不能传递参数，传递参数后就没有效果了，Do not know why。

因为setInterval执行的函数的时候也是打开页面一秒后，这一秒没有执行方法会显示空白，所以我们先执行一遍方法，就可以解决了

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.addEventListener('load',function () {

            var day = document.querySelector('.day')
            var hour = document.querySelector('.hour');
            var min = document.querySelector('.min');
            var sec = document.querySelector('.sec');
            var inputTime = +new Date('2022-5-1 0:0:0');//返回输入时间距离1970的总毫秒数
            countDown();
            setInterval(countDown,1000);
            function countDown(){
                var nowTime = +new Date();//返回当前时间距离1970总的毫秒数
                var times = (inputTime-nowTime) / 1000;//剩余时间的总秒数
                var d = parseInt(times/60/60/24);//天
                d = d<10?'0'+d:d;
                var h = parseInt(times/60/60%24);//时
                h = h<10?'0'+h:h;
                var m = parseInt(times/60%60);//分
                m = m<10?'0'+m:m;
                var s = parseInt(times%60)//秒
                s = s<10?'0'+s:s;
                day.innerHTML = d;
                hour.innerHTML = h;
                min.innerHTML = m;
                sec.innerHTML = s;
            }

        })
    </script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: black;
            color: white;
            float: left;
            margin: 10px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="day"></div>
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</body>
</html>

3.发送短信

点击按钮，60秒之内不能再次点击，防止重复发送

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.addEventListener('load',function () {
            var send = document.querySelector('.send');
            var time = 5;
            send.addEventListener('click',function () {
                send.disabled = true;
                var timer = setInterval(function (){
                     if(time == 0){
                         clearInterval(timer);
                         send.innerHTML = '发送';
                         send.disabled = false;
                         time = 5;
                     }else {
                         send.innerHTML = '还剩'+(time--)+'秒再次点击';
                     }
                 },1000);
            })
        })
    </script>
    <style>

    </style>
</head>
<body>
<input type="text" class="mess">
<button class="send">发送</button>
</body>
</html>

4.5s之后跳转页面

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.addEventListener('load',function (){
            var btn = document.querySelector('.jump');
            var div = document.querySelector('div');
            var time = 5;
            btn.addEventListener('click',function (){
                var timer = setInterval(function () {
                    if(time <=0){
                        clearInterval(timer);
                        location.href = 'https://www.baidu.com';
                    }else{
                        div.innerHTML = '页面'+(time--)+'秒后跳转';
                    }
                },1000)
            })

        })
    </script>
    <style>
        div{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background-color: salmon;
        }
    </style>
</head>
<body>
<button class="jump">跳转</button>
<div></div>
</body>
</html>

5.欢迎页面

<form action="BOM2.html">
    <input type="text" name="username">
    <input type="submit">
</form>

window.addEventListener('load',function () {
            var div = document.querySelector('div');
            var para = location.search;//?username=zhou
            //利用=把字符串分割为数组
            var arr = para.split('=');//得到一个数组，arr[0] = ?username，arr[1] = zhou;
            div.innerHTML = arr[1]+'，欢迎登录';
        })