笔记--BOM浏览器对象模型

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量120 收藏
点赞数
文章标签： javascript bom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43488583/article/details/115279010
版权

BOM浏览器对象模型

1. BOM概述

(1). 什么是BOM?

在这里插入图片描述

(2). BOM的构成

在这里插入图片描述

在这里插入图片描述

2. window 对象的常见事件

(1). 窗口加载事件

在这里插入图片描述
在这里插入图片描述

        // window.onload = function() {}
        // // 或者
        // window.addEventListener("load", function() {})

        document.addEventListener('DOMContentloaded', function() {})
        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加载完毕，不包含图片，flash，css等就可以执行，加载速度比load更快

(2). 调整窗口大小事件

在这里插入图片描述

    window.onresize = function() {}
    window.addEventListener("resize", function() {});
    // window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数
    // 注意：
    // 1. 只要窗口大小像素发生变化，就会触发这个事件
    // 2. 我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
        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';
                }
            })
        })

3. 定时器

(1). 两种定时器

在这里插入图片描述

(2). setTimeout() 定时器

    window.setTimeout(调用函数, [延迟的毫秒数]);
    setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
    注意：
        1. window可以省略
        2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串，'函数名()'三种形式。第三种不推荐
        3. 延迟的毫秒数省略默认是0，如果写，必须是毫秒
        4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

        setTimeout(function() {
            console.log('时间到了');
        },2000);
        function callback() {
            console.log('爆炸了');
        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 不提倡这个写法

在这里插入图片描述

实例：5 秒后自动关闭广告

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

(3). 停止setTimeout() 定时器

    window.clearTimeout(timeoutID)
    clearTimeout() 方法取消了当前通过调用setTimeout() 建立的定时器。
    注意：
        1. window可以省略
        2. 里面的参数就是定时器的标识符。

        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })

(4). setnterval() 定时器

    window.setInterval(回调函数, [间隔的毫秒数]);
    setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
    注意：
        1. window可以省略
        2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 '函数名()' 三种形式
        3. 间隔的毫秒数省略默认是0，如果写，必须毫秒，表示每隔多少毫秒就自动调用这个函数
        4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

        // 1. setInterval
        // 语法规范：window.setInterval(调用函数，延时时间);
        setInterval(function() {
            console.log('继续输出');
        }, 1000);
        // 2. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次，就结束了这个定时器
        // 3. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

实例：京东秒杀

在这里插入图片描述

        // 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;
        }

(5). 停止setInterval() 定时器

    window.clearInterval(intervalID);
    clearInterval() 方法取消了先前通过调用 setInterval() 建立的定时器
    注意： 
        1. window 可以省略
        2. 里面的参数就是定时器的标识符。

        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null;
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');
            },1000); 
        });
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })

实例：发送短信

在这里插入图片描述

    // 按钮点击后，会禁用disabled 为true
    // 同时按钮里面的内容会发生变化，注意button里面的内容通过innerHTML修改
    // 里面的秒数是变化的，因此需要用到定时器
    // 定义一个变量，在定时器里面，不断衰减
    // 如果变量为o 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
    // <input type="text">
    // <button>点击</button>
    <script>
        var ipt = document.querySelector('input');
        var btn = document.querySelector('button');
        btn.addEventListener('click', function(){
            var num = 6 ;
            btn.disabled = true;
            btn.innerHTML='还剩'+num+'秒';
            
            var timer = setInterval(function() {
                num--;
                if (num >= 0) {
                    btn.innerHTML='还剩'+num+'秒';
                    btn.disabled = true;
                } else {
                    btn.innerHTML = '点击';
                    btn.disabled = false;
                    clearInterval(timer);
                }
            }, 1000);
        })
    </script>

(6). this

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

    // this 指向问题，一般情况下this的最终指向的是那个调用它的对象
    // 1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
    console.log(this);
    function fn() {
        console.log(this);
    }
    window.fn();
    window.setTimeout(function() {
        console.log(this);
    }, 1000);
    // 2. 方法调用中谁调用this指向谁
    var o = {
        sayHi: function() {
            console.log(this); // this指向的是 o 这个对象
        }
    }
    o.sayHi();
    var btn = document.querySelector('button');
    // btn.onclick = function() {
    //     console.log(this); // this指向的是btn这个按钮对象
    // }
    btn.addEventListener('click', function() {
        console.log(this); // this指向的是btn这个按钮对象
    })
    // 3. 构造函数中this指向构造函数的实例
    function Fun() {
        console.log(this); // this指向的是fun实例对象
    }
    var fun = new Fun();

4. js 执行机制

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5. location对象

(1). 什么是location对象

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

(2). URL

在这里插入图片描述

(3). location对象的属性

在这里插入图片描述

在这里插入图片描述

    var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            var timer = 5;
            var timer1 = setInterval(function() {
                if (timer === 0 ) {
                    location.href = 'http://www.baidu.com';
                }
                else {
                    timer--;
                    div.innerHTML = '还剩'+ timer +'秒后自动跳转！！';
                }
            }, 1000);
        });

在这里插入图片描述
在这里插入图片描述

(4). location对象的方法

在这里插入图片描述

    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        // 记录浏览历史，所以可以实现后退功能
        // location.assign('http://www.itcast.cn');
        // 不记录浏览历史，所以不可以实现后退功能
        // location.replace('http://www.itcast.cn');
        location.reload(true);
    })

6. navigator对象

在这里插入图片描述

7. history 对象

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

若梦丶忆流年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BOM浏览器对象模型(一)
m0_65729457的博客
10-25 129
浏览器对象模型：内置对象之间按照某种层次组织起来的结构；BOM对象、window对象、定时器函数、事件处理、标签属性
BOM 浏览器对象模型
langmanboy的博客
04-15 342
BOM 浏览器对象模型 浏览器对象模型（Browser Object Model），简称 BOM，表示由浏览器（主机环境）提供的用于处理文档（document）之外的所有内容的其他对象 window 浏览器实例 location 加载文档的信息和常用导航功能实例 navigator 客户端标识和信息的对象实例 history 当前窗口建立以来的导航历史记录 screen 客户端窗口及屏幕信息 1. window 对象 window 对象是 BOM 的核心，是 js 访问浏览器的接口，也是 ES 规定的
JavaScript基础学习笔记--BOM（浏览器对象模型）
2303_77224751的博客
09-01 108
Cookie用于。
JavaScript - BOM浏览器对象模型笔记1.0
weixin_42857338的博客
09-29 230
浏览器对象模型 (BOM) 浏览器对象模型（Browser Object Model）尚无正式标准 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 浏览器对象(BOM)的层次结构 当前浏览器窗口即Window 对象 网页文档内容即document对象 浏览器地址栏即location对象 前进和后退即history对象 Window 对象 ...
javascript学习笔记（三）BOM和DOM详解
01-19
我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准] 2. BOM 是 ...
JavaWeb02-JavaScript学习笔记
08-22
BOM（Browser Object Model）是浏览器对象模型，提供了访问浏览器窗口和文档的方法，例如window.alert、confirm、setInterval、setTimeout等。 Location Location对象提供了访问当前页面的URL信息，例如location....
JavaScript基础笔记-尚硅谷视频自己总结
01-13
- **BOM (Browser Object Model)**: 提供了一组与浏览器交互的对象，如window、navigator等。 #### 四、JavaScript的主要特性 - **解释型语言**：JavaScript是一种解释型语言，意味着代码可以在运行时直接执行，...
JavaScript-学习笔记.pdf
08-04
- BOM（浏览器对象模型）：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。 2. JavaScript的书写位置 JavaScript的代码通常可以放置在三种位置： - 行内式：直接写在HTML元素的事件属性中，如`onclick...
12-15 课堂笔记1
08-08
JavaScript作为行为层的核心，其组成主要包括ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）。ECMAScript是JavaScript的标准化语法规范，定义了变量、函数、对象等语言特性。DOM则是一种编程接口，它将...
vue ref和reactive区别
最新发布
灰海
08-25 268
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 371
npm。
2024前端面试题-js篇
FormAda的博客
08-22 864
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 364
【代码】【js】各类前端输入校验方法。
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
liyy614的博客
08-23 831
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 948
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
前端点击预览图片：Viewer.js 使用方法
mq1314520_zhl的博客
08-21 745
Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。Viewer.js分为2个版本，js版本和jquery版本，下载地址分别为jQuery 版本：GitHub - fengyuanchen/jquery-viewer: A jQuery plugin wrapper for Viewer.js.
Vue路由
程小白的博客
08-19 675
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
JavaScript 错误 - Throw 和 Try to Catch的使用
逆风优雅的博客
08-23 153
trycatchthrow上面的代码 因为 try中 没有adddlert这个方法，或者这个方法有误，这时，代码会执行catch部分。JavaScript 实际上会创建带有两个属性的Error 对象name和message。
JavaScript高级程序设计核心笔记-ECMAScript与DOM解析
JavaScript起源于Netscape公司的开发，由ECMAScript（核心）、DOM（文档对象模型）和BOM（浏览器对象模型）三部分组成。ECMAScript定义了语言的语法、类型、语句等，其版本发展至今已至第五版。DOM是一种统一接口，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值