学习笔记(6):javascript BOM

最新推荐文章于 2024-08-13 16:15:07 发布

zty666_

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量137

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/zty666_/article/details/124817966

版权

一、什么是BOM

BOM（Browser Object Model）即浏览器对象模型。
BOM提供了独立于内容而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

二、学习BOM学什么

我们将学到与浏览器窗口交互的一些对象，例如可以移动、调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器、操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。在这里，只介绍一些window对象等的基础知识，其中会有一些ECMAscript的知识还会说明。其他对象Location、Screen、Navigator、History不一一详细介绍了。。

在这里插入图片描述

三、window对象

 window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。
      例：打开窗口 window.open(url,target,param);
           // url 要打开的地址
 //target  新窗口的位置   _blank  _self  _parent(父框架)
 //param  新窗口的一些设置
 //返回值，新窗口的句柄
      关闭窗口：window.close();

四、window对象的常见事件：

1、窗口加载事件
（1）window.onload:是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数。
实现方式：

window.onload = function () {};  //方式一

window.addEventListener('load', function () {});  //方式二

2）document.DOMContentLoaded：document.DOMContentLoaded加载事件，会在DOM加载完成时触发，这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载
2、调整窗口大小事件window.onresize
当调整window窗口大小的时候，就触发window.onresize事件，调用事件处理函数

// 方式1
window.onresize = function () {};
// 方式2
window.addEventListener('resize', function () {});

五、BOM零碎知识（window对象）

1.定时器函数

定时器方法如下：

方法	功能
setTimeout( [string/function] code, interval)	在指定的毫秒数后调用函数执行一段代码
clearTimeout([number] intervalId)	取消 setTimeout()设置的定时器
setInterval（ [string/function] code, interval)）	按照指定的·周期（毫秒）来调用函数或者执行一段代码
clearIntervalout（）	取消 setInterval（）设置的定时器

1.1setTimeout() 定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

例子：3秒后页面中的图片消失
注意：

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串~~‘函数名()’~~三种形式。第三种不推荐
延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

<body>
    <img src="../image/1.jfif">
    <script>
        function fn(){
            var img = document.querySelector('img')  //获取标签
            img.style.display = 'none'   //style为样式规则
        }
        var hidden = setTimeout(fn,3000)
    </script>
</body>

1.2clearTimeout()停止定时器

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
注意：

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

// 案例 : 在5s内点击停止按钮,不会在控制台显示 '爆炸了'
<body>
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');

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

1.3setInterval() 定时器

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

注意：

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

// 每隔一秒控制台都会打印这个 '继续输出'
<body>
    <script>
        // 1. setInterval 
        // 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('继续输出');

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

1.4停止 setInterval() 定时器

window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。
注意：

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

// 注意 : 需要定义一个全局变量timer=null
<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>

2.offset系列方法

在这里插入图片描述

3.事件参数e

当事件发生的时候，系统会自动的给事件处理函数传递一个参数，会提供事件相关的一些数据，事件参数e浏览器的兼容性检测: e = e || window.event
在这里插入图片描述

4.scroll系列方法

在这里插入图片描述

zty666_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记(6):javascript BOM

一、什么是BOMBOM（Browser Object Model）即浏览器对象模型。BOM提供了独立于内容而与浏览器窗口进行交互的对象；由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。二、学习BOM学什么我们将学到与浏览器窗口交互的一些对象，例如可以移动、调整浏览
复制链接

扫一扫