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…
阅读更多...
Go线程实现模型-G

Go线程实现模型-G

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

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

小编通过链上地址监控&#xff0c;令人意外的发现德国和美国政府都进行了大规模的数字货币转移&#xff0c;转移了价值 1.5 亿美元的比特币和以太坊。这些大额转移势必引起了数字货币市场分析师和投资者的关注。 BTC价格 从今年起德国政府已转移了其持有的相当一部分比特币&…
阅读更多...
【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;具有非常好的质…
阅读更多...
数据结构笔记第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;用最短的时间掌握最核心的技术。 这篇文章带大家…
阅读更多...
C++编程（七）继承

C++编程（七）继承

文章目录 一、继承&#xff08;一&#xff09;概念&#xff08;二&#xff09;语法格式&#xff08;三&#xff09;通过子类访问父类中的成员1. 类内2. 类外 &#xff08;四&#xff09;继承中的特殊成员函数1. 构造函数2. 析构函数3. 拷贝构造函数4. 拷贝赋值函数 二、多重继承…
阅读更多...
怎样把热门抖音短视频下载保存到手机相册?

怎样把热门抖音短视频下载保存到手机相册?

怎样把热门抖音短视频下载保存到手机相册? 1、在手机上打开抖音短视频APP&#xff1b; 2、打开后搜索或找到要下载保存的抖音短视频&#xff1b; 3、打开短视频后&#xff0c;点击右则的分享&#xff0c;并滑动找到保存到相册&#xff1b; 4、点击后等待完成下载&#xff0c;…
阅读更多...
Python实现接糖果小游戏

Python实现接糖果小游戏

介绍: 基于Pygame的糖果从屏幕顶部下落的游戏代码。这个游戏包括了一个可以左右移动的篮子来接住下落的糖果&#xff0c;接住糖果会增加得分。 代码: import pygame import random import os# 初始化pygame和设置屏幕大小 pygame.init() screen_width, screen_height 800, 6…
阅读更多...
海康视频播放，包含h5和web插件

海康视频播放，包含h5和web插件

自行下载 海康开放平台 demo 都写得很清楚&#xff0c;不多描述 1.视频web插件 vue2写法&#xff0c;公共vue文件写法&#xff0c;调用文件即可 开始时需要以下配置&#xff0c;不知道的找对接平台数据的人&#xff0c;必须要&#xff0c;否则播不了 getParameterData: {po…
阅读更多...
万字总结随机森林原理、核心参数以及调优思路

万字总结随机森林原理、核心参数以及调优思路

万字总结随机森林原理、核心参数以及调优思路 在机器学习的世界里&#xff0c;随机森林&#xff08;Random Forest, RF&#xff09;以其强大的预测能力和对数据集的鲁棒性而备受青睐。作为一种集成学习方法&#xff0c;随机森林通过构建多个决策树并将它们的预测结果进行汇总&…
阅读更多...
暴雨来袭，陈赫家变“水帘洞”网友：赫哥滴滴打船吗？

暴雨来袭，陈赫家变“水帘洞”网友：赫哥滴滴打船吗？

在魔都上海&#xff0c;一场突如其来的暴雨 不仅让街道变成了河流&#xff0c;还悄悄上演了一场现实版的“水帘洞”奇遇 而这场奇遇的主角&#xff0c;竟然是喜剧界的明星——陈赫&#xff01; 这天&#xff0c;乌云密布&#xff0c;电闪雷鸣 魔都的天空仿佛被捅了个窟窿 雨…
阅读更多...
吴恩达《LangChain for LLM Application Development》课程笔记

吴恩达《LangChain for LLM Application Development》课程笔记

目录 1. 前言 2. 课程笔记 2.1. 模型、提示和解析器 2.2. LLM记忆&#xff0c;上下文管理 2.3. 链式操作 2.4. 文档问答 2.4.1. stuff 方法 2.4.2. 其他方法 2.5. LLM应用评估 2.6. 代理 2.6.1. 预定义工具 2.6.2. 自定义工具 代码资源&#xff1a; 1. 前言 LangC…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （293）-- 算法导论21.4 2题

文心一言 VS 讯飞星火 VS chatgpt （293）-- 算法导论21.4 2题

二、证明&#xff1a;每个结点的秩最多为 ⌊lgm⌋ 。如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 在数据结构和算法中&#xff0c;当我们谈论“结点的秩”时&#xff0c;这通常与某些特定的数据结构&#xff08;如B树或B树&#xff09;相关&#xff0c;其中每…
阅读更多...
代码随想录算法训练营第40天| 518. 零钱兑换 II、 377. 组合总和 Ⅳ、70. 爬楼梯 （进阶）

代码随想录算法训练营第40天| 518. 零钱兑换 II、 377. 组合总和 Ⅳ、70. 爬楼梯 （进阶）

518. 零钱兑换 II 题目链接&#xff1a;518. 零钱兑换 II 文档讲解&#xff1a;代码随想录 状态&#xff1a;不会 思路&#xff1a; 和494.目标和类似&#xff0c;这题属于组合问题&#xff0c;当我们有一个硬币coin时&#xff0c;对于每个金额j&#xff0c;通过添加这个硬币&a…
阅读更多...
平安养老险陕西分公司参加2024上半年省级单位驻富平帮扶团联席会

平安养老险陕西分公司参加2024上半年省级单位驻富平帮扶团联席会

6月28日&#xff0c;平安养老险陕西分公司工会副主席武媛携驻村工作队赴富平县庄里镇永安村参加2024上半年度省级单位驻富平帮扶团联席会议。 会议由省委金融办副主任、省委金融工委委员李嘉辉及省委金融办选派挂职干部、富平县副县长席玮共同主持。 会上&#xff0c;席玮县长带…
阅读更多...
吴恩达机器学习 第三课 week2 推荐算法（下）

吴恩达机器学习 第三课 week2 推荐算法（下）

目录 01 学习目标 02 基于内容的过滤算法 03 实现“电影推荐系统” 3.1 问题描述 3.2 算法实现 04 大项目&#xff08;数据很大&#xff09;的推荐方法※ 4.1 方法原理 4.2 实施示例 05 总结 01 学习目标 &#xff08;1&#xff09;理解基于内容的过滤算法&#xff08…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023