第六周预习-BOM

最新推荐文章于 2024-09-07 14:37:16 发布

lznzl

最新推荐文章于 2024-09-07 14:37:16 发布

阅读量118

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_74242351/article/details/130503738

版权

一、BOM概述

BOM——Browser Object Model，浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window（顶级对象）。
BOM将浏览器当做一个对象来看待。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。
BOM缺乏标准，最初是Netscape浏览器最标准的一部分。
BOM学习的是浏览器窗口交互的一些对象。
BOM是浏览器厂商在各自浏览器定义的，兼容性较差

BOM比DOM更大，包含DOM（window中包含document）

BOM的双重角色

BOM是JS访问浏览器窗口的一个接口
BOM是全局对象，定义在全局作用域的变量、函数都会变成window对象的属性和方法

调用时可省略window，如alert（），prompt（）

注：window下的一个特殊属性window.name （声明对象最好不要用name）

二、 window对象常见事件

①窗口加载事件

以下是窗口加载事件的两种方式，当文档内容完全加载完毕会触发该事件，调用处理函数

    <button>点击查看</button>
    <script>
        // 1
        window.onload = function(){
            var btn = document.querySelector('button');
            btn.onclick=function(){
                alert('你来人间一趟');
            }
        }
        // 2
        window.addEventListener("load",function(){
            var btn = document.querySelector('button');
            btn.onclick=function(){
                alert('你要看看太阳');
            }
        })
        // 输出“你要看看太阳”
        // 3
        document.addEventListener('DOMContentLoaded',function(){
            alert('加载完DOM就可执行，更快！');
        })
        // 加载完毕后最先弹出这个
    </script>

有这个就可以将JS代码写在页面元素上方
window.onload传统注册方式，只能写一次，多个会以最后一个window.onload为准
addEventListener没有上述限制
load：页面全部加载完毕，包含页面dom元素，图片，flash，css等
DOMContentloaded：dom加载完毕，不包含图片，flash，css等就可执行

②调整窗口大小事件

<div style="width: 300px; height: 300px; background-color: blueviolet;"></div>
    <script>
        // 1
        window.onresize = function(){
            console.log('change');
        }
        // 2
        window.addEventListener('load',function(){
            var div = document.querySelector('div');
        window.addEventListener('resize',function(){
            console.log('变化');
            console.log(window.innerWidth);
            if(window.innerWidth<=800){
                div.style.display = 'none';
            }
            else{
                div.style.display = 'block';
            }
        })
        })
        
    </script>

上述两种方式可判别调整窗口大小

其中第二种方式里的内容可以通过判断window.innerWidth长度来决定元素的显示与否

三、定时器

①setTimeout（）定时器

语法：window.setTimeout（调用函数，延时时间）；（window在调用时可省略）

注：

延时单位默认是ms，但是可以省略，省略默认为0（立即执行）
这个调用函数可以直接写函数，还可以写函数名，'函数名()'
页面中可能有很多计时器，我们常给其加标识符（var timer1=balabala）

    <script>
        // 1.直接写函数
        setTimeout(function(){
            console.log('time is due');
            // 2s后显示
        },2000);
        // 2.函数名
        function callback(){
            console.log('boom');
        }
        setTimeout(callback,3000);
        // 3.'函数名()'  但是不提倡这种写法！
        setTimeout('callback()',5000);
    </script>

setTimeout() 这个调用函数我们也称回调函数（等待时间，回头调用）

②停止setTimeout（）定时器

语法：window.clearTimeout(timeoutID)；

<script>
        var timer = setTimeout(function(){
            console.log('time is due');
        },2000);
        //window.clearTimeout(timeoutID)  window可省略
        var btn = document.querySelector('button');
        btn.onclick = function(){
            clearTimeout(timer);
        }
    </script>

③setInterval（）定时器

语法：window.setInterval（调用函数，间隔时间）；

    <script>
        setInterval(function(){
            console.log('time is due');
        },2000);
    </script>

每隔一段时间调用一次定时器

④停止setInterval（）定时器

语法：window.clearInterval(interval ID)；

    <script>
        var btn = document.querySelector('button');
        // var timer = null;
        // 如果计时器和停止计时器分别在两个监听器中
        // 须在外面定义timer为全局变量，令其为空（null）
        // 使其能被两个监听器调用
        timer = setInterval(function(){
            console.log('time is due');
        },1000);
        btn.addEventListener('click',function(){
            clearInterval(timer);
        })
    </script>

⑤this

this指向问题：一般情况下this最终指向调用它的对象

    <button>点击</button>
    <script>
        // 返回window
        // 例1
        console.log(this);
        // 例2
        function fn(){
            console.log(this);
        }
        window.fn();
        // 例3
        window.setTimeout(function(){
            console.log(this);
        },1000)

        // 方法调用中：谁调用指向谁
        // 例1
        var xiaoming = {
            say:function(){
                console.log(this);  //指向xiaoming这个对象，它调用了say
            }
        }
        xiaoming.say();
        // 例2
        var btn = document.querySelector('button');
        btn.onclick = function(){
            console.log(this);  //指向btn这个按钮对象，返回button
            // addEventListener同理
        }
    </script>

全局作用域或者普通函数中this指向的是全局对象window（定时器里面的this指向window）
方法调用中—谁调用this指向谁

四、JS执行队列

JS是单线程

为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是出现了同步异步。

同步：前一个任务结束再执行后一个任务，程序的执行顺序与任务的排列顺序一致同步。

异步：在做一件事的同时也可以做其他事情。

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

异步任务通过回调函数实现，一般有以下三种类型

普通事件，如click，resize
资源加载，如load，error
定时器，如setTimeout，setInterval

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

JS执行机制

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

五、location对象

①什么是location对象

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

②URL

统一资源定位符，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL它包含的信息指出文件的位置以及浏览器应该怎么处理它

URL一般语法格式为

protocol：//host[:port] /path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

③location对象的属性

重点记住 href 和 search

④location对象的方法

location.assign() :和href一样，可以跳转页面（重定向页面）
location.replace():替换当前页面，因为不记录历史，所以不能后退页面
location.reload():重新加载页面，相当于刷新按钮或f5，如果参数为true强制刷新Ctrl+f5

    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            // 记录浏览历史，所以可以实现后退功能
            location.assign('http://www.baidu.com');
            // 不记录浏览历史，不能后退
            location.replace('http://www.baidu.com');
            // 点击按钮=刷新
            location.reload();
        })
    </script>