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

        

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据治理实战——元数据管理

一、元数据概述 1.1 定义 描述数据的数据,本质还是数据。数据本身带有的技术属性与其在业务运行中的业务属性,称其为元数据,例如:表数据量,占用空间,字段信息,业务描述,负责人&…

计算机视觉实验五——图像分割

计算机视觉实验五——图像分割 一、实验目标二、实验内容1.了解图割操作,实现用户交互式分割,通过在一幅图像上为前景和背景提供一些标记或利用边界框选择一个包含前景的区域,实现分割①图片准备②代码③运行结果④代码说明 2.采用聚类法实现…

单调队列(C/C++)

引言: 单调队列和单调栈都是一种数据结构,应用十分广泛,在蓝桥杯、ICPC、CCPC等著名编程赛事都是重点的算法,今天博主将自己对单调栈与单调队列的理解以及刷题的经验,用一篇博客分享给大家,希望对大家有所…

在线拍卖系统|基于Springboot的在线拍卖系统设计与实现(源码+数据库+文档)

在线拍卖系统目录 基于Springboot的在线拍卖系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、前台: 2、后台 用户功能模块 5.2用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a…

使用脚本部署openstack平台

两台虚拟机,compute和controller 建议两台虚拟机都配置,内存4G,硬盘60G,网络要在虚拟机设置这里添加一个网络适配器,第一个是主机模式192.168.10.0,第二个是NAT模192.168.20.0, 可以在此处了解一…

Unity Standalone File Browser,Unity打开文件选择器

Unity Standalone File Browser,Unity打开文件选择器 下载地址:GitHub链接: https://github.com/gkngkc/UnityStandaloneFileBrowser简单的示例代码 using SFB; using System; using System.IO; using UnityEngine; using UnityEngine.UI;…

从三大层次学习企业架构框架TOGAF

目录 前言 掌握TOGAF的三个层次 层次1:怎么学? 层次2:怎么用? 层次3:怎么思? 结束语 前言 对于一名架构师来讲,如果说编程语言是知识库层次中的入门石,那么企业架构框架则相当…

cesium加载倾斜影像数据(模拟雨、雪、雾、无人机飞行、测距、箭头标绘、电子围栏等)

实现效果如下: 功能菜单如下: 加载倾斜影像核心代码: var palaceTileset new Cesium.Cesium3DTileset({url: http://127.0.0.1:9002/tileset.json,//控制切片视角显示的数量,可调整性能maximumScreenSpaceError: 0.1,maximumNum…

python/pygame 挑战魂斗罗 笔记(三)

感觉最难的部分已经解决了,下面开始发射子弹。 一、建立ContraBullet.py文件,Bullit类: 1、设定子弹速度 Config.py中设定子弹移动速度为常量Constant.BULLET_SPEED 8。 2、载入子弹图片: 图片也是6张,子弹发出后…

OceanBase数据库日常运维快速上手

这里为大家汇总了从租户创建、连接数据库,到数据库的备份、归档、资源配置调整等,在OceanBase数据库日常运维中的操作指南。 创建租户 方法一:通过OCP 创建 确认可分配资源 想要了解具体可分配的内存量,可以通过【资源管理】功…

Unity 对APK签名

关键代码 PS D:\UnityProject\YueJie> jarsigner -verbose -keystore D:\UnityProject\YueJie\user.keystore -signedjar D:\UnityProject\YueJie\meizuemptyapk-release-signed.apk D:\UnityProject\YueJie\MeizuEmpty-release-unsigned.apk 1 示例 # jarsigner的命令格…

【C++从练气到飞升】08---模板

🎈个人主页:库库的里昂 ✨收录专栏:C从练气到飞升 🎉鸟欲高飞先振翅,人求上进先读书。 目录 一、泛型编程 什么是泛型编程: 二、函数模板 1. 函数模板概念 2. 函数模板格式 3. 函数模板的原理 4. 函数模板的实例…

Ubuntu 传输文件

scp [选项] 源文件 目标路径 以下是一些常用的 scp 命令选项: -r:递归复制目录和子目录。 -P:指定远程 SSH 服务器的端口号。 -i:指定用于身份验证的私钥文件。 -p:保留源文件的时间戳、权限和所有者。 -v&#x…

element-ui合计逻辑踩坑

element-ui合计逻辑踩坑 1.快速实现一个合计 ​ Element UI所提供的el-table中提供了方便快捷的合计逻辑实现: ​ https://element.eleme.cn/#/zh-CN/component/table ​ 此实现方法在官方文档中介绍详细,此处不多赘述。 ​ 这里需要注意&#xff0c…