BOM 基础详解

于 2022-10-03 16:30:02 发布
阅读量780 收藏 4
点赞数 1
分类专栏： JavaScript 文章标签： javascript 前端 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52861684/article/details/127104411
版权

文章目录

一、BOM 概述

BOM 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多的方法和属性。但是 BOM 缺乏标准，兼容性差，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netscape 浏览器标准的一部分。

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

BOM 比 DOM 更大，它包含了 DOM！

在这里插入图片描述

① window 对象是浏览器的顶级对象，它具有双重角色；
② 它是 JS 访问浏览器窗口的一个接口；
③ 它是一个全局变量，定义在全局作用域中的变量，函数都会变成 window 对象的属性和方法；
④ 只不过在调用的时候可以省略 window，前面学习的对话框也都属于 window 对象方法

二、常见事件

1.页面加载事件

① 文档内容完全加载完触发

window.onload 是窗口（页面）加载事件，当文档内容完全加载完后才会触发该事件。（包括样式表、图片等）

//窗口加载事件
window.onload = function() {};
//或者
window.addEventListener("load", function() {});

注意：
① 有了 window.onload 就可以把JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数；
② window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准；
③ 如果使用 addEventListener 则没有次数限制。

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

② 仅当 DOM 加载完触发

DOMContentLoaded 事件仅当 DOM 加载完成时触发。（不包括样式表、图片等）
如果页面很多的话，从用户访问到 onload 触发可能会需要较长的时间，交互效果就不能很好地实现，必然影响到用户的体验，此时用 DOMContentLoaded 事件比较合适。

document.addEventListener('DOMContentLoaded', function() {
    alert('小兔崽子？');
})

2.调整窗口大小事件

window.onresize 是调整窗口大小的事件，当触发时就会调用处理函数。

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

注意：
① 只要窗口大小发生像素变化，就会触发这个事件；
② 我们经常利用这个事件完成响应式布局；
③ window.innerWidth 获得当前屏幕的宽度。

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';
        }
    })
})

三、定时器

① setTimeout() 定时器

该方法用于设置一个定时器，定时器到期后执行调用函数（只调用一次）。

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

① 这个 window 在调用的时候可以省略；
② 这个延时单位是毫秒，但是可以省略，如果省略默认是0；
③ 页面中可能有很多的定时器，我们经常给定时器加标识符（名字）；
④ 我们可以叫它定时炸弹。

//案例 5秒后自动关闭广告
<img src="images.jpg" class="ad"/>
<script>
    var ad = document.querySelector('.ad');
    function callback() {
        ad.style.display = 'none';
    }
    setTimeout(callback, 5000);
</script>

② clearTimeout() 清除定时器

清除定时器括号里面跟的就是计时器的名字！

//案例 点击按钮定时停止
<button>点击停止定时器</button>
<script>
    var btn = document.querySelector('button');
    var timer = setTimeout(function() {
        console.log('爆炸啦！');
    }, 5000);
    btn.addEventListener('click', function() {
        clearTimeout(timer);
    });
</script>

③ setInterval() 定时器

与上面方法不同的是，setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数（重复调用多次）。

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

① 同样这里的 window 可以省略；
② 单位是毫秒，不写默认是0；
③ 也要给定时器赋值一个标识符；
④ 回调函数可以直接写 callback，也可以写 ’ callback() '。

//案例 手动开始、停止定时器
<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() {
        timer = setInterval(function() {
        console.log('I love you.');
    }, 1000);
    });
    stop.addEventListener('click',function() {
        clearInterval(timer);
    });
</script>

没有秒数变化用 setTimeout()，想要有秒数变化的效果就用 setInterval()！

1.倒计时效果

案例分析：
① 这个倒计时是不断变化的，因此需要定时器来自动变化。
② 三个黑色盒子里面分别存放时分秒。
③ 利用 innerHTML 将计算好的时分秒放入三个黑盒子里面。

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 190px;
            margin: 100px auto;
        }
        span {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: black;
            color: aliceblue;
            font-size: 27px;
            text-align: center;
            line-height: 50px;
            margin: 0 1px;
        }
    </style>
</head>
<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>    
    <div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var times = '2022-10-01 18:30:00';
        //先调用一次函数，防止页面刷新时有空白
        countDown(times);
        setInterval('countDown(times)', 1000);
        
        //倒计时函数
        function countDown(time) {
            var nowTime = +new Date();
            var inputTime = +new Date(time);
            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; 
            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>

运行结果：
在这里插入图片描述

上面是倒计时案例的全部代码，倒计时不清楚的可以看我前面 JS 对象里面的日志对象，先自己动手写一遍，实际开发中直接搬过来用就可以！

特别注意，为防止页面刷新时有空白，先调用一次函数再倒计时！

2.短信倒计时

案例分析：
① 按钮点击之后，会禁用发送按钮，disabled 为 true。
② 同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML 修改。
③ 里面的秒数是有变化的，因此需要用到定时器。

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 400px;
            height: 30px;
            margin: 100px auto;
        }
        button {
            width: 65px;
            height: 23px;
            background-color: rgb(168, 165, 165);
            color: black;
        }
    </style>
</head>
<body>
    <div>
        <input type="text"/>
        <button>提交</button>
    </div>
    <script>
        var i = 5;
        var btn = document.querySelector('button');
        btn.addEventListener('click', fn);
        function fn() {
            btn.disabled = true;
            countDown();
            var timer = setInterval(countDown, 1000);
            function countDown() {
                if (i === 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '提交';
                    i = 5;
                } else {
                    btn.innerHTML = i + '秒后重试';
                    i--;
                }       
            }
        }
        </script>
</body>
</html>

在这里插入图片描述

注意倒计时完了之后 i 要恢复到初始值，保证下一次点击！

3.this 指向问题

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

① 全局作用域或者普通函数中，this 指向全局对象 window；
② 注意定时器里面的 this 也指向 window；
③ 方法调用中，this 指向方法的调用者；
④ 构造函数中，this 指向的是构造函数的实例；

四、JS 执行队列

1.同步和异步

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 JavaScript 这门脚本语言诞生的使命所致 —— JS 是为处理页面中用户的交互，以及操作 DOM 而诞生的。
单线程就意味着，所有的任务都需要排队，前一个任务结束，才会执行下一个任务，这样所导致的问题是，当 JS 执行时间过长时，页面的渲染就会不连贯，导致页面渲染加载阻塞。
为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，于是就出现了同步和异步。

① 同步，前一个任务结束后再执行后一个任务，程序的执行顺序和任务的排列顺序是一致的、同步的；
② 异步，执行一个任务的同时，还可以去处理其他的任务，也就是说，如果一个任务的执行时间比较长，我们就可以先执行下一个任务。

它们的本质区别是，这条流水线上各个流程的执行顺序不同！

2.任务执行过程

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

② 异步任务
JS 的异步任务是通过回调函数实现的，相关回调函数都添加到任务队列中。一般而言，异步任务有以下三种类型：
（1）普通事件，如 click、resize 等；
（2）资源加载，如 load、error 等；
（3）定时器，包括 setInterval、setTimeout 等。

① 同步任务在执行栈，异步任务在任务队列；
② 先执行同步任务，同步任务执行完毕后，系统会按次序读取任务队列中的异步任务，被读取到的异步任务依次进入到执行栈，开始执行任务。

先执行同步任务，再执行异步任务！

五、location 对象

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

1.URL 简介

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

URL 的一般语法格式：

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

在这里插入图片描述

2.常见属性

通过这些属性可以得到地址中的各个部分！
在这里插入图片描述
重点记住，href 和 search！

3.自动跳转页面

案例分析：
① 利用定时器做倒计时效果。
② 时间到了就跳转页面，使用 location.href。

<!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');
        btn.addEventListener('click', fn);
        function fn()
        {   
            var timer = 5;
            btn.style.display = 'none';
            countDown();
            setInterval(countDown, 1000);
            function countDown() {
                if (timer == 0){
                    location.href = 'http://www.itcast.cn';
                } else {
                    div.innerHTML = '您将在'+ timer +'秒后跳转到首页';
                    timer--;
                }   
            }
        }
    </script>
</body>
</html>

4.获取 URL 参数

案例分析：
① 第一个登录页面，里面有提交表单，action 提交到 index.html 页面。
② 第二个页面，可以利用第一个页面的参数，实现一个数据在不同页面之间的传递效果。
③ 核心思路，利用 URL 里面的 location.search 属性，返回数据参数。
④ 第一步去掉 ?，利用 substr。
⑤ 第二步利用 = 号分隔键和值，split(‘=’)。

<!--原文件-->
<!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">
    用户名：<input type="text" name="uname"/>
    <input type="submit" value="登录"/>
</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>
</head>
<body>
    <div></div>
    <script>
        //去掉问号
        var params = location.search.substr(1); 
        //利用等号分隔符把字符串分隔成一个数组
        var arr = params.split('='); 
        var div = document.querySelector('div');
        div.innerHTML = arr[1] + '欢迎你！'; 
    </script>
</body>
</html>

5.常见方法

在这里插入图片描述

① 前两个都能实现跳转页面，参数是跳转地址，location.assign() 记录浏览历史，也就是说可以实现后退功能；
② location.reload(true) 可以强制刷新页面。

六、navigator 对象

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

下面代码可以判断用户使用哪个终端打开的页面，实现跳转：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //跳转到手机端的页面
 } else {
    window.location.href = "";     //跳转到pc端的页面
 }

不需要记，用的时候复制粘贴就行！

七、history 对象

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

在这里插入图片描述

<button>返回上一页</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click',function() {
        history.go(-1);
    })
</script>

history 对象一般在实际开发中很少用，但是会在一些 OA 办公系统中见到！

栈老师不回家
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
最清晰的BOM架构体系，看完直接有手就行
weixin_67260069的博客
05-17 1627
小伙伴们，大家好，欢迎和汤姆一起学习BOM。 在学习BOM之前，我们要了解JavaScript是由ECMAScript（语法）、Bom 浏览器与js交互、Dom html内容与js交互三个部分组成的，之后就可以进入到BOM的学习中。 学习BOM，第一，我们要了解几个常用的全局方法，比如第一种 script 中 var 声明变量没有用var 声明的变量 都是window全局变量；有id命名的html节点也是全局对象可以通过window.id名访问；常用全局方法，都是省略了windowalert警告，co.
bom例子
05-26
bom例子
BOM数据库设计的详解
07-02
里面详细解释了DOM的基础知识，和erp数据库设计
BOM和DOM入门（修订）
cnds123的专栏
11-12 973
在Web开发中，JavaScript通常与ECMAScript、DOM和BOM一起使用。ECMAScript是JavaScript语言的核心规范，而DOM和BOM是宿主环境（如Web浏览器）提供的API，它们允许JavaScript与网页文档和浏览器本身进行交互。
BOM详解
weixin_33694620的博客
05-20 65
1.WINDOW对象   BOM的核心对象是WINDOW,它表示一个浏览器的实例。在浏览器中，window对象有双重角色，它既是通过   JavaScript访问浏览器的一个接口，又是ECMAScript规定的Global对象。这意味着，在网页中定义任意一个对象，变量和函数，都以WINDOW作为其Global对象，因此有权访问parseInt()等方法。       1.1全局作用...
BOM和DOM详解
热门推荐
anythings的专栏
04-25 2万+
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。 js组成 我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C
浏览器对象模型BOM
a9794666的博客
04-02 158
1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 BOM的左右 弹出新浏览器窗口的能力； 移动、关闭和更改浏...
BOM 详解
m0_48041877的博客
08-26 209
BOM 详细介绍
js DOM的事件常见操作实例详解
12-13
JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。 BOM：...
creo2.0基础培训资料
06-04
资源为pdf文本，内容较为全面丰富，适于creo2.0考证...3基础特征 4对象选择 5基准特征 6工程特征 7阵列详解 8特征操作 9特征失败的处理 10分析参数关系 11ASM 12视角和剖面 13工程图 14组件中视图处理 15文件管理 16BOM
bom表结构，例子(有五金厂，文具厂，电子厂)
05-22
完全的BOM结构，包含多层得BOM，并且有许多现成例子，有五金厂，电子厂，家具厂，玩具厂，电脑厂等物料BOM示范例子，告知你怎么建立BOM，完全可以对您现成得ERP，或SAP有帮助。
BOM管理及维护，根据BOM数据来组织生产和服务
07-20
表达产品的物料构成关系，精确描述产品由哪些元器件构成；反映产品由原材料到半成品、再到成品的基本加工装配过程。
JavaScript组成、引入、输出、运算符基础知识讲解
11-29
下文重点给大家介绍js组成，引入，输出，运算符基础知识，具体详解如下所示： JavaScript组成： ECMAscript 浏览器对象模型 BOM 文档对象模型 DOM // ecmascript bom dom dom （文档对象模型） 用来访问和操纵html...
高级java笔试题-FE_ROAD:现代前端基础知识点学习、进阶
06-03
翻译过来的内容，对ES6各个知识点进行了详解，英文原版在这里 Promise是JS中非常重要的编程思想 内容有些老了，依然是经典 Ecmascript DOM BOM 基础 js 开发者书单，英文的 Dan Abramov的个人博客，对React基础的...
BOM清单详解
u010086298的专栏
10-09 6081
SAPBOM按技术类型，又可分为简单BOM、派生BOM、多重BOM等，那么这些BOM的概念是什么呢？ (１)简单BOM：最开始创建一个物料BOM时，它就是一个简单物料BOM。在附加替代或派生创建之前，系统不会自动定义技术类型。 (２)多重BOM：是指用来表示由不同的生产过程而生产出来的一物料的组件的替代组合。即一个成品有两个可选替代BOM，替代BOM间的差异是很小...
js 学习笔记---BOM
weixin_30566111的博客
11-03 103
window对象 1、 window 对象是Global对象，在全局作用域中声明的变量和函数都可以通过window.来访问。跟直接在window上添加属性效果一样。唯一的区别就是delete时，如果是全局变量会返回false，而window的属性会返回true(但是变量依然存在，跟没删除没区别)。所以，全局变量不可以delete，只有局部变量可以通过delete销毁。 2、尝试访问未定...
BOM基础知识
m0_48839439的博客
08-26 193
BOM全Browser Object Model。BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象。BOM 的核心是 window 对象，表示浏览器的实例。
BOM的构造方法
Reker熊的Blog
07-01 2341
BOM的构造方法 物料清单BOM是运行MRP三个基本输入信息之一，根据产品的特性进行不同的构造可以减少基础数据准备实施工作量，提高物料分解算法的速度。本文详细分析几中BOM的构造方法，以供同行参考。 一、常规方法 在传统的MRP软件中，BOM是采用网状的结构存储数据的，因此可能出现一个父项编号下面有很多个子项编号，一个子项编号同时属于不同的父项编号的情况。其数据结构为：父项编号，子项编号，结
物料bom和销售bom
最新发布
04-01
物料BOM (Bill of Materials) 和销售BOM是两种不同的BOM类型，具有不同的用途和功能。 1. 物料BOM 物料BOM是指一种清单，列出了制造产品所需的原材料、零部件和其他物料的详细信息。它通常由设计师或工程师创建，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

栈老师不回家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值