WEB前端06-BOM对象

BOM浏览器对象模型

浏览器对象模型:将浏览器的各个组成部分封装成对象。是用于描述浏览器中对象与对象之间层次关系的模型,提供了独立于页面内容、并能够与浏览器窗口进行交互的对象结构。

  • 组成部分
Window:浏览器窗口对象
Navigator:浏览器对象
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象
  • Window窗口对象

window对象是一个全局对象,因此可以直接使用全局对象的属性和方法,而无须写出全局对象的对象名。 window对象在某种意义上代表了浏览器本身,它包含了大量关于浏览器的属性

* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。  方法名();

1.常用属性

image-20231230202631998

1. 获取其他BOM对象: history,location,Navigator,Screen
2. 获取DOM对象: document

2.常用方法

image-20231230202645286

3.常用方法详解

对话框方法

对话框是跟用户进行交流的一种形式,对话框有提示、选择 和获取信息的功能。JavaScript提供了三种标准的对话框,分别是弹出对话框、选择对话框和输入对话框。

方法描述
alert()弹出一个只包含确定的对话框
confirm()弹出一个包含【确定】和【取消】按钮的对话框,如果单击 【确定】,则返回true,如果单击【取消】,则返回false
prompt()弹出一个包含【确定】按钮、【取消】按钮和一个文本框的对话框,可以接收用户输入的信息。如果单击【确定】,则 返回文本框已有内容,如果单击【取消】,则返回null

窗口打开与关闭方法

方法描述
open()打开一个新window对象; open(“URL”)表示要指定打开的窗口; open()方法会返回一个表示新窗口的window对象
close()关闭调用close方法的window窗口对象

定时器方法

setInterval-----周期性的执行某一个函数

let id = setInterval(方法对象, 毫秒值)
//会返回定时器的id值

setTimeout-----延迟时间执行一次函数

let id = setTimeout(方法对象, 毫秒值)
//会返回定时器的id值

clearInterval()-----取消由 setInterval() 设置的 timeout

clearInterval(id);

clearTimeout()-----取消由 setTimeout() 方法设置的 timeout。

clearTimeout(id);

案例:轮播图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title>
</head><body><img src="image/banner_1.jpg" id="banner" width="100%"><script>let num = 1;setInterval(change, 3000);function change() {num++;if (num === 4) {num = 1;}let str = "image/banner_" + num + ".jpg";document.getElementById("banner").src = str;}</script>
</body></html>
  • Location地址栏对象

常用方法

location.reload();//重新加载当前文档,刷新页面

常用属性

获取地址
location.href
//作用:跳转地址
location.href=“www.baidu.com”

案例:自动跳转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跳转首页</title><style>p {text-align: center;font-size: 30px;}.time {color: red;}</style>
</head>
<body><p><span class="time" id="time">5</span>秒后自动跳转首页</p><script>let count = 5;let t = document.getElementById("time");setInterval(change, 1000);function change() {count--;t.innerHTML = count;if (count == 1) {location.href = "https://www.baidu.com";}}</script>
</body>
</html>
  • History:历史记录对象

history对象只是表示在当前页面下访问了几个窗体,并不是指浏览器的历史记录

常用方法:

* back()	 加载 history 列表中的前一个 URL* forward()	 加载 history 列表中的下一个 URL* go(参数)    加载 history 列表中的某个具体页面。
正数:前进几个历史记录
负数:后退几个历史记录

常用属性:

length	返回当前窗口历史列表中的 URL 数量。

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

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

相关文章

【STC89C51单片机】定时器中断系统

中断概念 中断是一种重要的硬件机制&#xff0c;用于在处理器正在执行程序时&#xff0c;能够及时响应某些外部或内部事件。中断可以临时中止当前正在执行的指令序列&#xff0c;转而去执行专门的中断服务程序&#xff08;ISR&#xff0c;Interrupt Service Routine&#xff0…

Linux系统部署MySQL数据库

1.Linux插入光盘&#xff0c;使用df-h获取光盘信息&#xff0c;默认/dev/sr0文件为光盘文件 使用命令 mount -o ro /dev/sr0 /media进行手动挂载 mount -o ro /dev/sr0 /media 2.进入cd /etc/yum.repos.d目录 编辑配置yum库&#xff0c;编辑vim yum.repos [BaseOS] nameba…

Re:从零开始的C++世界——类和对象(下)

文章目录 前言1.再谈构造函数&#x1f34e;构造函数体赋值&#x1f34e;初始化列表&#x1f34e;特性&#x1f34c;特性一&#x1f34c;特性二&#x1f34c;特性三&#x1f34c;特性四&#x1f34c;特性五 &#x1f34e;explicit 关键字 2.static成员&#x1f34e;概念&#x1…

边缘设备使用记录--阿加犀AIBox 6490

边缘设备使用记录--阿加犀AIBox 6490 设备介绍设备连接glog && gflagsonnx2tfliteAidLite SDK for C模型输入输出的shape执行推断 OpenCV使用 设备介绍 阿加犀AIBox 6490是一款基于高通QCS6490平台的高性价比智能边缘计算终端&#xff0c;具有14TOPS AI算力&#xff0…

Springboot整合ShardingJdbc实现分库分表方案

一、创建库表 1、创建两个数据库 CREATE SCHEMA shard_db_0 DEFAULT CHARACTER SET utf8 ; CREATE SCHEMA shard_db_1 DEFAULT CHARACTER SET utf8 ; 2、在每个数据库各创建三个分表 CREATE TABLE tb_order_0 (order_id bigint(20) NOT NULL,buyer_id bigint(20) not null …

dom4j 操作 xml 之按照顺序插入标签

最近学了一下 dom4j 操作 xml 文件&#xff0c;特此记录一下。 public class Dom4jNullTagFiller {public static void main(String[] args) throws DocumentException {SAXReader reader new SAXReader();//加载 xml 文件Document document reader.read("C:\\Users\\24…

【数据结构】探索排序的奥秘

若有不懂地方&#xff0c;可查阅我之前文章哦&#xff01; 个人主页&#xff1a;小八哥向前冲~_csdn博客 所属专栏&#xff1a;数据结构_专栏 目录 排序的概念 几种排序方法介绍 冒泡排序 选择排序 插入排序 堆排序 向上调整建堆排序 向下调整建堆排序 希尔排序 快速…

前后端数据交互设计到的跨域问题

前后端分离项目的跨域问题及解决办法 一、跨域简述 1、问题描述 这里前端vue项目的端口号为9000&#xff0c;后端springboot项目的端口号为8080 2、什么是跨域 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域 当前页面url被请求页面url是否…

K8S 上部署 Emqx

文章目录 安装方式一&#xff1a;1. 快速部署一个简单的 EMQX 集群&#xff1a;2. 部署一个持久化的 EMQX 集群&#xff1a;3. 部署 EMQX Edge 集群和 EMQX 企业版集群&#xff1a; 安装方式二&#xff1a;定制化部署1. 使用 Pod 直接部署 EMQX Broker2. 使用 Deoloyment 部署 …

Jmeter关联

案例脚本实现&#xff1a;选择商品加入购物车 客户端发送一个登录的HTTP请求&#xff0c;服务端返回一个带着token的响应&#xff0c;后续发出一个带token信息的加入购物车的HTTP请求&#xff0c;返回响应。 关联&#xff1a;当请求直接由依赖关系的时候&#xff0c;比如一个请…

LLM基础模型系列:Prompt-Tuning

------->更多内容&#xff0c;请移步“鲁班秘笈”&#xff01;&#xff01;<------ 大型预训练语言模型的规模不断扩大&#xff0c;在许多自然语言处理 &#xff08;NLP&#xff09; 基准测试中取得了最先进的结果。自GPT和BERT开发以来&#xff0c;标准做法一直是在下游…

IDEA中Git常用操作及Git存储原理

Git简介与使用 Intro Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git是一款分布式版本控制系统&#xff08;VCS&#xff09;&#xff0c;是团队合作开发…

2010-2022年别克英朗维修手册电路图线路图接线图资料更新

经过整理&#xff0c;2010-2022年别克英朗汽车全系列已经更新至汽修帮手资料库内&#xff0c;覆盖市面上99%车型&#xff0c;包括维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图解对…

How to integrate GPT-4 model hosted on Azure with the gptstudio package

题意&#xff1a;怎样将托管在Azure上的GPT-4模型与gptstudio包集成&#xff1f; 问题背景&#xff1a; I am looking to integrate the OpenAI GPT-4 model into my application. Here are the details I have: Endpoint: https://xxxxxxxxxxxxxxx.openai.azure.com/Locatio…

uniapp 开发 App 对接官方更新功能

插件地址&#xff1a;升级中心 uni-upgrade-center - App - DCloud 插件市场 首先创建一个 uni-admin 项目&#xff0c;选择你要部署的云开发服务商&#xff1a; 然后会自动下载模板&#xff0c;部署云数据库、云函数 第二步&#xff1a;将新创建的 uni-admin 项目托管到…

[算法] 优先算法(六):二分查找算法(下)

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

传输层和网络层的关系,ip协议+ip地址+ip报头字段介绍(4位TOP字段,8位生存时间(ttl)),ip地址和端口号的作用

目录 传输层和网络层的关系 引入 介绍 ip协议 介绍 ip地址 引入 数据传递过程 举例(ip地址的作用) ip报头 格式 4位版本号 ip地址不足的问题 8位服务类型 4位TOP(type of service)字段 最小延时 最大吞吐量 4位首部长度 16位总长度 8位协议号 首部校验和…

vivado FFT IP Core

文章目录 前言FFT IP 接口介绍接口简介tdata 格式说明 其他细节关于计算精度及缩放系数计算溢出架构选择数据顺序实时/非实时模式数据输入输出时序关于配置信息的应用时间节点 FFT IP 例化介绍控制代码实现 & 测试参考文献 前言 由于计算资源受限&#xff0c;准备将上位机 …

【Linux应用编程】系统信息与资源 | 如获取、设置系统时间、日期、/proc 虚拟文件系统等

系统信息与系统资源 通过 Linux 系统调用或 C 库函数获取系统信息&#xff08;如获取系统时间、日期以及设置系统时间、日期等&#xff09;&#xff1b; Linux 系统下的/proc 虚拟文件系统&#xff08;读取系统、进程有关信息&#xff09;&#xff1b; 系统信息 主要介绍了用…

成都亚恒丰创教育科技有限公司 【插画猴子:笔尖下的灵动世界】

在浩瀚的艺术海洋中&#xff0c;每一种创作形式都是人类情感与想象力的独特表达。而插画&#xff0c;作为这一广阔领域中的璀璨明珠&#xff0c;以其独特的视觉语言和丰富的叙事能力&#xff0c;构建了一个又一个令人遐想连篇的梦幻空间。成都亚恒丰创教育科技有限公司 在众多插…