JS（JavaScript）的BOM操作

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

兰陵美酒郁金香，玉碗盛来琥珀光。
但使主人能醉客，不知何处是他乡。
——《客中作》

文章目录

  • JS（JavaScript）的BOM操作
    • 1. BOM简介
    • 2. window对象
    • 3. window对象的常用方法
      • 3.1 常用方法列举
      • 3.2 方法示例代码
        • 3.2.1 alert示例
        • 3.2.2 prompt示例
        • 3.2.3 confirm示例
        • 3.2.4 open示例
        • 3.2.5 setTimeout示例
        • 3.2.6 setInterval示例
        • 3.2.7 clearTimeout示例
        • 3.2.8 clearInterval示例
      • 3.3 示例代码下载
    • 4. window对象的常用事件
      • 4.1 常用事件列举
      • 4.2 方法示例代码
        • 4.2.1 alert示例
        • 4.2.2 prompt示例
        • 4.2.3 confirm示例
      • 4.3 示例代码下载
    • 5. window对象的常用子级对象
      • 5.1 location对象
      • 5.2 history对象
      • 5.3 示例代码
      • 5.4 页面效果
      • 5.5 window常用子级对象示例代码下载
    • 6. 本文所有示例代码下载

JS（JavaScript）的BOM操作

1. BOM简介

JavaScript共三部分组称：ECMAScript核心语法、DOM文档对象模型、BOM浏览器对象模型
BOM就是浏览器对象模型
以下是BOM的结构图
在这里插入图片描述

2. window对象

window对象包含frames视图、history历史、location位置、navigator导航、screen屏幕以及文档document。
window对象是操作整个页面的对象，可通过该对象操作页面的属性、方法、事件。
window对象的属性（子级对象）有：document、location、history等等。
window对象的常用方法有：alert、prompt、confirm、open等等。
window对象的常用事件有：onload、onscroll、onclick等等。

3. window对象的常用方法

3.1 常用方法列举

常用方法如下表

方法名含义
alert(text)显示一个带有提示信息和确定按钮的警告框
prompt(text)显示一个带有提示信息、文本输入框、确定和取消按钮的输入框，返回值为输入的数据
confirm(text)显示一个带有提示信息、确定和取消按钮的确认框，确定返回true，取消返回false
open(url,name,options)打开具有指定名称的新窗口，并加载给定url所指定的文档
setTimeout(fn,delay)设置一次性定时器，在指定毫秒值后执行某个函数
setInterval(fn,delay)设定周期性定时器，周期性循环执行某个函数
clearTimeout(timer)清除一次性定时器
clearInterval(timer)清除周期性定时器

3.2 方法示例代码

以下使用实例代码演示页面效果

3.2.1 alert示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用方法-alert</title><script>// window的常用方法，window可省略不写//1 alert()window.alert(111);</script></head>
<body></body>
</html>

页面
在这里插入图片描述

3.2.2 prompt示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用方法-prompt</title><script>// window的常用方法，window可省略不写//2 prompt()window.prompt("请输入姓名：");var name = window.prompt("请输入姓名：","默认名");console.log(name);</script></head>
<body></body>
</html>

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

3.2.3 confirm示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用方法-confirm</title><script>// window的常用方法，window可省略不写//3 confirm()window.confirm("点击确认删除");</script></head>
<body></body>
</html>

页面
在这里插入图片描述

3.2.4 open示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用方法-open</title><script>// window的常用方法，window可省略不写//4 open() 打开新窗口// open("https://www.sogou.com","sogou","width=800px,height=800px");function f(){//打开新窗口跳转到指定地址// open("https://www.baidu.com");//open中的参数可以有多个，第一个是链接地址，第二个是地址名，第三个是窗口大小设置(包括窗口大小是否可变设置，由于兼容性，谷歌浏览器无法生效，换成ie浏览器即可)open("https://www.baidu.com","连接名","width=500px,height=500px,resizable=no");// open("01bom_review.html","连接名","width=500px,height=500px");}</script></head>
<body><!-- 打开新窗口测试按钮 --><input type="button" value="打开新窗口" id="" onclick="f()"><br></body>
</html>

页面
在这里插入图片描述

3.2.5 setTimeout示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用方法-setTimeout</title><script>// window的常用方法，window可省略不写//5 setTimeout() 设置一次性定时器function fsetTimeout(){//设置一次性定时器，第一个参数是一个需要定时触发的函数，第二个参数是定时的事件，单位为毫秒setTimeout(fplayKing, 2000);setTimeout(function(){console.log("一次性触发的定时器");}, 2000);}//一次性执行的函数，可以写在上面的函数中function fplayKing(){console.log("一次性定时器触发。。。。。。。")//这里可以使用一次性计时器实现周期性计时器的效果，只需要在一次性计时器的回调函数中添加一个调用自己的的一次性计时器即可setTimeout(fplayKing,1000);}</script></head>
<body><!-- 设置一次性定时器的按钮 --><input type="button" value="一次性计时器" id="" onclick="fsetTimeout()"><br></body>
</html>

页面
在这里插入图片描述

3.2.6 setInterval示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用方法-setInterval</title><script>// window的常用方法，window可省略不写//6 周期性计时器function fsetInterval(){//参数有两个，同setTimeout，第一个参数是函数，第二个是间隔时间setInterval(function(){console.log("周期性计时开始------>");}, 2000);}</script></head>
<body><!-- 周期性计时器 --><input type="button" value="周期性计时器" id="" onclick="fsetInterval()"></body>
</html>

页面
在这里插入图片描述

3.2.7 clearTimeout示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用方法-clearTimeout</title><script>// window的常用方法，window可省略不写//7 clearTimeout() 取消一次性定时器var timer;function fsetTimeout(){//使用参数接收一次性计时器的元素对象timer = setTimeout(function(){console.log("一次性触发的定时器");}, 3000);}//取消一次性计时器，点击取消按钮触发该函数，则一次性计时器不会触发function fclearTimeout(){clearTimeout(timer);}</script></head>
<body><!-- 设置一次性定时器的按钮 --><input type="button" value="一次性计时器" id="" onclick="fsetTimeout()"><br><!-- 取消一次性计时器的按钮 --><input type="button" value="取消一次性计时器" id="" onclick="fclearTimeout()"></body>
</html>

页面，在点了一次性计时器按钮后，在输出内容前（设置的3秒）点击取消按钮，即可取消一次性计时器的输出执行
在这里插入图片描述

3.2.8 clearInterval示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用方法-clearInterval</title><script>// window的常用方法，window可省略不写//8 clearInterval() 取消周期性计时器 var timer;function fsetInterval(){//参数有两个，同setTimeout，第一个参数是函数，第二个是间隔时间timer = setInterval(function(){console.log("周期性计时开始------>");}, 2000);}//取消周期性计时器function fclearInterval(){clearInterval(timer);}</script></head>
<body><!-- 周期性计时器 --><input type="button" value="周期性计时器" id="" onclick="fsetInterval()"><!-- 取消周期性计时器 --><input type="button" value="取消后期性计时器" id="" onclick="fclearInterval()"><br></body>
</html>

页面，在点了周期性计时器后，点击取消周期性计时器即可终止周期性计时器
在这里插入图片描述

3.3 示例代码下载

相关常用方法的示例代码已上传CSDN
下载地址：JavaScript bom操作 window对象的方法 示例代码

4. window对象的常用事件

4.1 常用事件列举

window常用事件如下表

事件名描述
onload页面加载完成
onscroll窗口滚动条滑动
onclick鼠标单机

4.2 方法示例代码

以下使用实例代码演示页面效果

4.2.1 alert示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用事件-onclick</title><script>// window的常用事件，window可省略不写//1 onclick 点击事件 ，点击页面触发onclick=function(){console.log("点击页面了");}</script></head>
<body></body>
</html>

页面，点击页面空白处即可触发事件
在这里插入图片描述

4.2.2 prompt示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用事件-onscroll</title><script>// window的常用事件，window可省略不写//2 onscroll 页面滚动事件 ，滚动页面触发onscroll=function(){console.log("滚动页面了");}</script></head>
<body><p style="width: 1000px; height: 1000px;"></p></body>
</html>

页面，滚动滚动条即可触发事件
在这里插入图片描述

4.2.3 confirm示例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用事件-onload</title><script>// window的常用事件，window可省略不写//3 onload 页面加载事件 ，页面加载完成触发onload=function(){console.log("页面加载完成了");}</script></head>
<body></body>
</html>

页面，打开页面加载完成即可出发事件
在这里插入图片描述

4.3 示例代码下载

相关window事件的示例代码已上传CSDN
下载地址：JavaScript bom操作 window-event 示例代码

5. window对象的常用子级对象

5.1 location对象

location对象是window的子级对象，用于地址栏的调用，包含常用属性href和常用方法reload()
href属性可设置或返回地址栏中的url
reload()方法可以重新加载当前页面

5.2 history对象

history对象是window的自己对象，用于历史页面的操作，有常用方法back()和forward()
back() 后退，加载history列表中的上一个url
forward() 前进，加载history列表中的下一个url

5.3 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bom操作-window常用对象-location和history</title><script>// window的常用对象，window可省略不写// location 地址栏对象，location的常用属性有href，常用方法有reload()// 1 href 该属性设置或返回地址栏中的urlfunction fhref(){var url = location.href;console.log("当前地址栏的url：",url);}function fhref2(){//通过location的href属性实现跳转location.href = "https://blog.csdn.net/mo_sss";}//2 reload() 该方法重新加载当前页面function freload(){location.reload();}// history 历史对象， history的常用方法有back和forward// 1 back() 后退 加载history列表中的上一个urlfunction fback(){history.back();}// 2 forward() 前进 加载history列表中的下一个urlfunction fforward(){history.forward();}</script></head>
<body><input type="button" value="获取地址栏中的url" onclick="fhref()"><br><br><input type="button" value="location的href实现跳转页面" onclick="fhref2()"><br><br><input type="button" value="location的reload方法刷新页面" onclick="freload()"><br><br><hr><input type="button" value="history的后退方法" onclick="fback()"><br><br><input type="button" value="history的前进方法" onclick="fforward()"></body>
</html>

5.4 页面效果

页面展示效果如下
在这里插入图片描述

5.5 window常用子级对象示例代码下载

关于window对象的常用子级对象的示例代码已上传至CSDN
下载地址：JavaScript BOM操作 window对象的子级对象 示例代码

6. 本文所有示例代码下载

下载地址：JavaScript BOM操作 示例代码

感谢阅读，祝君暴富！

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

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

相关文章

一文汇总VSCode多光标用法

一文汇总VSCode多光标用法

光标的创建 按住alt&#xff0c;鼠标左键单击&#xff0c;在单击位置生成光标/删除光标 按住ctrlalt&#xff0c;单击↑/↓&#xff0c;在每行同一个位置&#xff08;若某一行较短&#xff0c;则在行尾&#xff09;生成光标&#xff0c;这个不会删除光标&#xff0c;只会在光标…
阅读更多...
Day61 代码随想录打卡|回溯算法篇---组合优化

Day61 代码随想录打卡|回溯算法篇---组合优化

本篇是针对上一题的优化&#xff0c;因为在计算所有可能的组合结果时&#xff0c;不是每一条路径都是我们需要遍历的&#xff0c;如图&#xff0c;当n和k都为4的时候&#xff0c;其实最终的结果只有一个[1,2,3,4]是符合结果的。因此我们遍历的时候就不需要遍历每一条边&#xf…
阅读更多...
数据结构递归（01）汉诺塔经典问题

数据结构递归（01）汉诺塔经典问题

说明&#xff1a;使用递归时&#xff0c;必须要遵守两个限制条件&#xff1a; 递归存在限制条件&#xff0c;满⾜这个限制条件时&#xff0c;递归不再继续&#xff1b; 每次递归调⽤之后越来越接近这个限制条件&#xff1b; 1 汉诺塔&#xff08;Hanoi Tower&#xff09;经典…
阅读更多...
java List接口介绍

java List接口介绍

List 是 Java 集合框架中的一个接口，它继承自 Collection 接口，代表一个有序的元素集合。List 允许重复的元素，并且可以通过索引来访问元素。Java 提供了多种 List 的实现，如 ArrayList、LinkedList、Vector 和 CopyOnWriteArrayList。 List接口概述 List 接口提供了一些…
阅读更多...
打造未来应用：Python GUI库全景指南与实战演练

打造未来应用：Python GUI库全景指南与实战演练

打造未来应用&#xff1a;Python GUI库全景指南与实战演练 引言 在软件开发领域&#xff0c;图形用户界面&#xff08;GUI&#xff09;对于提升用户体验至关重要。Python凭借其简洁的语法和强大的库支持&#xff0c;为GUI编程提供了丰富的选项。本文将深入探讨Python中的GUI库…
阅读更多...
卷积层的输出

卷积层的输出

卷积层的输出 flyfish 在卷积神经网络中&#xff0c;卷积层的输出尺寸计算主要依赖于输入尺寸、卷积核尺寸、步幅&#xff08;stride&#xff09;和填充&#xff08;padding&#xff09;。 经典的卷积神经网络模型 - AlexNet 标准卷积 以AlexNet第一个卷积层作为说明 imp…
阅读更多...
SpringBoot设置自动跳转前端界面

SpringBoot设置自动跳转前端界面

一般情况下&#xff0c;我们的Application启动文件的内容为一行的运行代码&#xff0c;默认启动项目以后不会自动跳转到我们的前端页面 public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);} 这里我的可以通过设置文件的内容&#…
阅读更多...
【系统架构设计师】计算机组成与体系结构 ⑤ ( 主存编址计算 | 存储单元 | 内存编址 | 存储单元个数 和 总容量 计算 )

【系统架构设计师】计算机组成与体系结构 ⑤ ( 主存编址计算 | 存储单元 | 内存编址 | 存储单元个数 和 总容量 计算 )

文章目录 一、主存编址计算1、存储单元2、内存编址3、存储单元个数 和 总容量 计算4、主存编址案例 一、主存编址计算 1、存储单元 存储单元 概念 : 最小存储单位 : 1 bit 是 计算机中最小的 容量单位 , 只能表示 0 或 1 ;存储单元 : 在 存储器 中 , 查找 1 bit 是比较困难的 …
阅读更多...
c++全排列函数next_permutation详解

c++全排列函数next_permutation详解

c全排列函数next_permutation详解 在 C 的 库中&#xff0c;next_permutation 是一个用于计算给定范围内元素的下一个排列的函数。这个函数特别适用于对整数序列或可以比较的元素进行全排列的生成。 参数 first, last&#xff1a;表示范围的迭代器&#xff0c;即要重新排列的…
阅读更多...
300价值指数投资价值

300价值指数投资价值

300价值指数是价值股的代表。 它的选股是在沪深300指数里面按照低市盈率&#xff0c;低市净率&#xff0c;低市现率&#xff0c;高股息率挑选的100只股票组成。 这个指数是由中证指数公司于2008年1月21日发布&#xff0c;以2004年12月31日为基准&#xff0c;是个老牌指数了。 …
阅读更多...
Go线程实现模型-G

Go线程实现模型-G

G 概述 一个G就代表一个goroutine(或称Go例程)&#xff0c;也与go函数相对应。作为编程人员&#xff0c;我们只是使用go语句向Go的运行时系统提交一个并发任务&#xff0c;而Go的运行时系统则会按照我们要求并发地执行它 Go编译器会把go语句变成对内部函数newproc的调用&…
阅读更多...
美德政府转移比特币、以太坊引发市场下跌

美德政府转移比特币、以太坊引发市场下跌

小编通过链上地址监控&#xff0c;令人意外的发现德国和美国政府都进行了大规模的数字货币转移&#xff0c;转移了价值 1.5 亿美元的比特币和以太坊。这些大额转移势必引起了数字货币市场分析师和投资者的关注。 BTC价格 从今年起德国政府已转移了其持有的相当一部分比特币&…
阅读更多...
OPPO保活方案测试

OPPO保活方案测试

下面是OPPO手机各种方案的测试记录, 也包括无效的方案 1. OPPO的电源设置和应用省电设置 OPPO手机电源设置里面不限制性能, 优化全部关闭, "自动优化"修改成不优化 第四张图应用省电设置里面的开关也全部打开 图片不能在本地保存, 保存在文件<OPPO手机电池设置和…
阅读更多...
【MySQL备份】Percona XtraBackup实战篇

【MySQL备份】Percona XtraBackup实战篇

目录 1. 前言 2.准备工作 2.1.创建备份目录 2.2.配置/etc/my.cnf文件 2.3.授予root用户BACKUP_ADMIN权限 3.全量备份 4.准备备份 5.数据恢复 6.总结 "实战演练&#xff1a;利用Percona XtraBackup执行MySQL全量备份操作详解" 1. 前言 本文将继续上篇【My…
阅读更多...
玩Stable Diffusion不可不知的5款真人模型！大佬都在用！（附模型包）

玩Stable Diffusion不可不知的5款真人模型！大佬都在用！（附模型包）

模型对于AI绘画起决定性作用&#xff0c;今天推荐5款超好用的Stable Diffusion模型。 这些模型都在市面上收获了各种好评&#xff0c;而且各具特色&#xff0c;能满足你对写实人像的各种要求。 1、MajicMIX realisric 麦橘写实 写实系的人像大模型&#xff0c;具有非常好的质…
阅读更多...
uboot 环境变量初始化流程

uboot 环境变量初始化流程

初始化在board_f.c,读取flash环境变量到ddr内在board_r.c arch/arm/cpu/armv8/start.Sbl _mainarch/arm/lib/crt0_64.S xxxxbl board_init_fxxxxb board_init_r commonboard_f.c static const init_fnc_t init_sequence_f[] {setup_mon_len,arch_cpu_init, /* basic arch c…
阅读更多...
数据结构笔记第3篇：双向链表

数据结构笔记第3篇：双向链表

1、双向链表的结构 注意&#xff1a;这里的 "带头" 跟前面我们说的 "头结点" 是两个概念&#xff0c;实际前面的在单链表阶段称呼不严谨&#xff0c;但是为了同学们更好的理解就直接称为单链表的头结点。 带头链表里的头结点&#xff0c;实际为 "哨兵…
阅读更多...
勒索病毒--认知与防范

勒索病毒--认知与防范

免责声明:本文仅做技术交流与学习... 目录 应急响应-勒索病毒 1、什么是勒索病毒&#xff1f; 勒索病毒是一种新型电脑病毒&#xff0c;主要以RDP爆破、邮件、程序木马、网页挂马的形式进行传播。该病毒性质恶劣、危害极大&#xff0c;一旦感染将给用户带来无法估量的损失。…
阅读更多...
已解决 SyntaxError: invalid syntax，Python报错原因和解决方案。

已解决 SyntaxError: invalid syntax，Python报错原因和解决方案。

「作者简介」&#xff1a;冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础著作 《网络安全自学教程》&#xff0c;适合基础薄弱的同学系统化的学习网络安全&#xff0c;用最短的时间掌握最核心的技术。 这篇文章带大家…
阅读更多...
【推荐算法】负采样导致预估偏低

【推荐算法】负采样导致预估偏低

负采样导致预估偏低 待完善
阅读更多...
最新文章

Copyright @ 2022~2023