js BOM模型常用方法梳理

ops/2024/12/23 2:45:53/

1、Bom定义

        BOM是操作浏览器的模型,主要是对浏览器的一些操作。

2、获取浏览器窗口的尺寸

        window.innerHeight:获取窗口的高度。

        window.innerWidth:湖区窗口的宽度,只在window浏览器下使用。

3、弹出层

        alert:弹出框。

        confirm:确认框。返回值有true 和false。一般开发少用window自带的弹出层,因为不同的浏览器展示样式不一样。

        prompt:输入框。当点击确定时,返回输入值;但返回false时,返回null.

        注意:在开发使用过程中,容易阻碍bom的执行。由于js是单线程的程序,弹出层会导致程序无法执行,卡在当前状态了。

4、地址信息

        location.href:获取地址。

        hash:#号后面的内容。注意:url地址中

        origin:域名。注意:该域名是带着http或者https的。

        host:url的主机名和端口。

        protocal:端口号。

        reload:重新加载页面。注意:页面使用中不多,尽可能少用。

5、浏览器常用事件

        onload:页面所有资源都加载完之后,才会执行onload方法。

        onresize:当浏览器的屏幕尺寸发生变化时,触发事件。

        onscroll:浏览器滚动条触发事件。

6、获取页面滚动距离

        scrollTop:已经向上滚动的距离。

        scrollTo:滚动到指定位置。

        注意:在使用的过程中,为了兼容低版本浏览器,可以用document.body.scrollTop来获取body的向上滚动高度。

7、标签打开与关闭

        open:打开新标签。open(地址,弹框类型,可选参数,是否替换当前页面)。参数类型主要有_self(当前窗口打开)和_blank(新窗口打开);可选参数可以设置窗口的高度、宽度等属性,主要属性是以下几种:

        width:窗口的宽度;
        height:窗口的高度;
        top:窗口距离屏幕顶部的距离,默认0;
        left:窗口距离屏幕左侧的距离,默认0;

javascript">window.open("www.baidu.com", "_self", "width=400,height=400,top = 200, left=400");

        close:关闭当前标签。注意:使用时只能关闭当前标签,在使用vue3开发是,静态服务器状态使用这个,不生效。

8、浏览器的历史记录

        history:获取历史记录。

        history.back:回退。

        history.length:历史记录的数量。

        history.forward:前进。

        history.go:可以一次性调指定数量的历史就页面。go(数字),注意在使用时,传正数就是前进,传负数就是后退。

9、本地存储

存在本地的电脑的文件夹里面。

locationStorage:本地缓存-永久存储,一直保留数据信息,及时浏览器关闭了,信息依然存在。不好被浏览器安全策略禁用。

sessionStorage:会话存储-临时存储,只要会话窗口未关闭,缓存就不会丢失。

其中都有:

setItem:设置(新增和编辑)。一般都存储json字符串。

getItem:读取。

removeItem:删除。

提示:缓存信息,可以打开F12,在Application里面查看。如下图

Bom常用的方法梳理,再次加深原来一些未用到的方法的印象。温故而知新,一步步向前。

        


http://www.ppmy.cn/ops/2023.html

相关文章

Android开发——ListView

activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_height"match_parent"android:layout_width"match_parent"…

使用Python操作SQLite

1、连接数据库 import sqlite3 conn sqlite3.connect(example.db)其中 example.db 是数据库文件名&#xff0c;如果不存在则会自动创建。connect() 方法还可以接收多个参数&#xff0c;用于设置连接属性&#xff0c;如 conn sqlite3.connect(example.db, isolation_levelNo…

多模态之ALBEF—先对齐后融合,利用动量蒸馏学习视觉语言模型表征,学习细节理解与论文详细阅读:Align before Fuse

Align before Fuse: Vision and Language Representation Learning with Momentum Distillation &#xff08;ALBEF&#xff09;在融合之前对齐&#xff1a;利用动量蒸馏进行视觉与语言表示学习 Paper: arxiv.org/pdf/2107.07651.pdf Github: https://github.com/salesforce/…

PyTorch环境配置问题

为什么深度学习都是用英伟达的显卡&#xff1f; 首先我们需要了解什么是CUDA&#xff1f; CUDA&#xff08;Compute Unified Device Architecture&#xff09;&#xff0c;是显卡厂商 NVIDIA 推出的运算平台。 CUDA就类似于编程语言&#xff0c;开发者和显卡通过CUDA进行交流…

前端面试常见问题

CSS 盒模型和box-sizing ​ 内容(content)&#xff0c;内边距(padding)&#xff0c;边框(border)&#xff0c;外边距(margin) ​ 标准&#xff1a;box-sizing: content-box; widtdcontent ​ 怪异&#xff1a;box-sizing: border-box; width contentpadding border&#xf…

js 使用Object.toString.call()判断数据类型

使用Object.toString.call()判断数据类型 使用Object.toString.call()可以用来判断: 判断基本数据类型 判断复杂数据类型 判断null和undefined 需要注意的是&#xff0c;Object.prototype.toString 方法返回的字符串格式为 “[object 数据类型]”&#xff0c;其中数据类型和 J…

分布式快照算法 Chandy-Lamport

0. 引言 上一篇文章最后说到 Spark 的 Structured Streaming 的 Continuous Processing Mode 的容错处理使用了分布式快照&#xff08;Distributed Snapshot&#xff09;算法 Chandy-Lamport 算法&#xff0c;那么分布式快照算法可以用来解决什么问题呢&#xff1f; A snapsho…

黄金投资对于普通人来说难吗?

黄金&#xff0c;自古以来就被视作财富的象征。在投资市场上&#xff0c;黄金投资更是备受关注的话题。然而&#xff0c;对于普通人来说&#xff0c;黄金投资是否真的难呢&#xff1f;实际上&#xff0c;只要掌握了正确的方法和策略&#xff0c;普通人完全有可能在黄金投资中取…