js BOM模型常用方法梳理

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;

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常用的方法梳理,再次加深原来一些未用到的方法的印象。温故而知新,一步步向前。

        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/555424.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis中的Lua脚本(三)

Lua脚本 EVAL命令的实现 EVAL命令的执行过程可以分为以下三个步骤: 1.根据客户端给定的Lua脚本,在Lua环境中定义一个Lua函数2.将客户端给定的脚本保存到lua_scripts字典,等待将来进一步使用3.执行刚刚在Lua环境中定义的函数,以此来执行客户…

2.核心概念与安装配置

核心概念与安装配置 文章目录 核心概念与安装配置1、核心概念Docker整体架构及底层通信原理 2、安装DockerCentos安装Docker引擎阿里云镜像加速Docker run的过程 3、Docker相关命令 1、核心概念 镜像(image) Docker 镜像(Image)就…

Linux 搭建私有yum源仓库

一、环境准备 IP系统版本作用192.168.140.155CentOS 7.9.2009yum源仓库192.168.140.153CentOS 7.9.2009测试 准备两台服务器,一台作为yum源仓库,另一台作为测试使用。 二、搭建yum源服务器 (无法连接外网的情况,需要去官网下载镜…

ssm058基于Java的共享客栈管理系统+jsp

共享客栈管理系统的设计与实现 摘 要 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对房屋出租信息管理混乱,出…

语言的未来:深度学习在自然语言处理中的革命

语言的未来:深度学习在自然语言处理中的革命 1 引言 自古以来,语言就是人类表达思想、传递信息、进行社会互动的基石。语言的复杂性既体现在其变化多端的语义、句法和语用层面,同时也反映在人类如何理解和产生自然语言的深奥之中。在这一节中…

飞企互联FE业务协作平台 ProxyServletUti 任意文件读取漏洞复现

0x01 产品简介 飞企互联-FE企业运营管理平台是一个基于云计算、智能化、大数据、物联网、移动互联网等技术支撑的云工作台。这个平台可以连接人、链接端、联通内外,支持企业B2B、C2B与O2O等核心需求,为不同行业客户的互联网+转型提供支持。其特色在于提供云端工作环境,整合…

活动报名 | 如何进行全增量一体的异构数据库实时同步

伴随着新技术的不断涌现,市场竞争也在不断开辟新的角斗场——新的业务需求,新的应用设想都在这里迸发。 面对如此日新月异的竞争环境,企业的当务之急,是为新应用扎根准备好随时可取、准确一致的高质量数据土壤。在这样的背景下&a…

电工与电子技术选择题填空题计算题复习题含参考答案

答案:更多答案,请关注【电大搜题】微信公众号 答案:更多答案,请关注【电大搜题】微信公众号 答案:更多答案,请关注【电大搜题】微信公众号 电工与电子技术复习题 一 . 单选题(共 33 题&a…

[Meachines][Easy]Headless

Tools https://github.com/MartinxMax/MDOG 针对XXS攻击 Main $ nmap -sC -sV 10.10.11.8 --min-rate 1000 类似于留言板 通过目录扫描,发现一个仪表盘 $ gobuster dir -u "http://10.10.11.8:5000" -w /usr/share/wordlists/dirbuster/directory-list-1.0.txt 回…

邮箱群组是什么?怎么创建邮箱群组?

在我们群发邮件时,可能会遇到这样的状况,一个个输入邮箱地址效率很低,而且很容易就漏发。而对于一个企业来说,如果出现这样的问题,很有可能会影响公司的业务进展和团队协作。这个时候我们就需要邮箱群组这个功能&#…

移远通信:立足5G RedCap新质生产力,全力推动智能电网创新发展

随着全球能源结构的转型和电力需求的持续增长,智能电网产业迎来了新的发展机遇。而物联网、大数据等前沿技术的创新和应用,正在为电力行业的发展注入强劲的新质生产力。 4月9日,第四十八届中国电工仪器仪表产业发展技术研讨及展会在杭州拉开帷…

使用自己训练好的模型YOLOv8进行X-AnyLabeling自动标注

目录 1. 下载项目2. 创建环境3. 运行程序3.1 自行下载和添加官方模型3.2 使用自己训练好的模型标注自己的数据集 本机环境:win 10, GPU 1. 下载项目 git clone https://github.com/CVHub520/X-AnyLabeling.git2. 创建环境 仔细查看项目的README文件 …

电脑技巧:如何把Edge浏览器扩展程序打包安装到其他浏览器

目录 1、进入浏览器扩展界面 2、找到Edge浏览器扩展插件的路径 3、找到需要扩展的插件ID 4、打开浏览器扩展插件目录 5、进入打包扩展界面 6、 安装到其他浏览器 大家日常使用浏览器的时候通常会安装很多浏览器插件,从而大大提升我们的办公效率,有…

CTF中常见的四种python逆向

说在前面: 什么是pyc文件? pyc是一种二进制文件,是由py文件经过编译后,生成的文件,是一种byte code,py文件变成pyc文件后,加载的速度有所提高, pyc 文件是 Python 编译过的字节码文…

文件IO基础

一、文件描述符 调用 open 函数会有一个返回值,该返回值就是一个文件描述符( file descriptor),这说明文件描述符是一个 非负整数;对于 Linux 内核而言,所有打开的文件都会通过文件描述符进行索引。 当调用…

2024年第十六届“华中杯”(B题)大学生数学建模挑战赛| 时间序列,滑动窗口 | 数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时,你是否曾经感到茫然无措?作为2022年美国大学生数学建模比赛的O奖得主,我为大家提供了一套优秀的解题思路,让你轻松应对各种难题。 让我们来看看华中杯 (B题)! CS团队倾…

《四月女友》定档5月18日 佐藤健、长泽雅美演绎唯美爱情

由川村元气担任编剧,山田智和导演,佐藤健、长泽雅美、森七菜主演的唯美爱情电影《四月女友》今日正式宣布定档5月18日,并发布了“相恋”版预告和“相拥”版海报。预告中,优美宁静的风景令人心生向往,藤代俊&#xff08…

【深度学习实战(8)】如何绘制loss曲线图

一、步骤 我们先定义一个dict,每一个key对应的value都是一个list。 loss_history dict((k, []) for k in ["epoch", "train_loss", "val_loss"])每一轮或者每一次迭代的损失都通过list记录下来。 loss_history["epoch"…

改手机IP地址的软件推荐

随着移动互联网的普及,手机已成为人们日常生活中不可或缺的一部分。而在使用手机的过程中,IP地址作为一个重要的网络标识,有时也需要进行修改或更改。为了满足这一需求,市面上涌现出了许多改手机IP地址的软件。虎观代理将对这些软…

2024年腾讯云服务器价格一览表

随着云计算技术的快速发展,越来越多的企业和个人开始选择使用云服务器来满足他们的数据存储和计算需求。腾讯云作为国内领先的云服务提供商,其服务器产品因性能稳定、安全可靠而备受用户青睐。那么,2024年腾讯云服务器的价格情况如何呢&#…