当前位置: 首页 > news >正文

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操作 示例代码


感谢阅读,祝君暴富!


相关文章:

JS(JavaScript)的BOM操作

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

【CT】LeetCode手撕—82. 删除排序链表中的重复元素 II

题目 原题连接&#xff1a;82. 删除排序链表中的重复元素 II 1- 思路 模式识别1&#xff1a;已排序链表 ——> 判重逻辑 &#xff0c;涉及到 while 2- 实现 ⭐82. 删除排序链表中的重复元素 II——题解思路 class Solution {public ListNode deleteDuplicates(ListNode h…...

C++ STL unique_ptr智能指针源码剖析

由于上一篇博客将shared_ptr,weak_ptr,enable_shared_form_this的源码实现整理了一遍,想着cpp智能指针还差个unique_ptr故写下此篇博客,以供学习 源码剖析 一,模板参数 首先,我们先看unique_ptr的模板参数,第一个参数_TP自是不用说表示对象类型,第二个模板参数定义了unique_p…...

Unity中的的文件夹(特殊文件夹)

Unity中的的文件夹(特殊文件夹) Unity工程中的关键文件夹和路径知识点, 以下是对Unity工程中几个关键文件夹和路径的总结&#xff1a; 1. 工程路径获取 ​ print(Application.dataPath) 用途&#xff1a;通常只在编辑模式下使用。注意事项&#xff1a;游戏发布后&#xff0…...

Go语言定时器Timer和Ticker到底怎么用

原文链接&#xff0c;可获取更多Go语言学习资料 概述 在日常开发中&#xff0c;我们不可避免的需要使用到定时任务用来处理业务逻辑。在Go语言中内置的有两个定时器&#xff0c;Timer和Ticker&#xff0c;合理的使用这两个定时器可以很好的解决定时任务的需求&#xff0c;同时…...

41、web基础和http协议

web基础与http协议 一、web web&#xff1a;就是我们所说得页面&#xff0c;打开网页展示得页面。&#xff08;全球广域网&#xff0c;万维网&#xff09; world wide webwww 分布式图形信息系统 http&#xff1a;超文本传输协议 https&#xff1a;加密的超文本传输协议…...

6-173 二分查找的关键字比较次数

6-173 二分查找的关键字比较次数 - &#xff08;32&#xff09;专科段数据结构专项练习&#xff08;2024版&#xff09; (pintia.cn) int CountSearchTimes(int a[], int low, int high, int x) {int time0;while(low < high){int mid(lowhigh)/2;time;if(a[mid]x)return t…...

【基础篇】第5章 Elasticsearch 数据聚合与分析

在Elasticsearch的庞大功能体系中&#xff0c;数据聚合与分析扮演着至关重要的角色&#xff0c;它使我们能够从海量数据中提炼出有价值的信息&#xff0c;为决策提供依据。本章将深入探讨Elasticsearch的聚合功能&#xff0c;从基本概念到常见类型的实践&#xff0c;让你掌握如…...

【网络安全】修改Host文件实现域名解析

场景 开发一个网站或者服务&#xff0c;需要在本地测试时&#xff0c;可以将线上的域名指向本地开发环境的IP地址。从而模拟真实环境中的域名访问&#xff0c;方便调试和开发。 步骤 1、以管理员身份打开命令提示符 2、编辑hosts文件&#xff1a; 输入以下命令打开hosts文…...

Spring Boot 全面解析:从入门到实践案例

引言&#xff1a; Spring Boot 是由 Pivotal 团队提供的全新框架&#xff0c;旨在简化 Spring 应用的初始搭建以及开发过程。它基于 Spring 平台&#xff0c;通过“约定优于配置”的原则&#xff0c;尽可能自动化配置&#xff0c;减少XML配置&#xff0c;使得开发者能够快速启…...

222222222

2222222...

Boost 智能指针

scoped_ptr 不能被复制或赋值给其他 scoped_ptr 对象&#xff0c;不能与其他指针比较 (除了 nullptr) scoped_ptr 用例 template <typename T> class scoped_ptr { public:// 构造函数&#xff1a;初始化 scoped_ptr 并接管指针的所有权explicit scoped_ptr(T* ptr n…...

在WSL Ubuntu中启用root用户的SSH服务

在 Ubuntu 中&#xff0c;默认情况下 root 用户是禁用 SSH 登录的&#xff0c;这是为了增加系统安全性。 一、修改配置 找到 PermitRootLogin 行&#xff1a;在文件中找到 PermitRootLogin 配置项。默认情况下&#xff0c;它通常被设置为 PermitRootLogin prohibit-password 或…...

C语⾔数据类型和变量

C语⾔数据类型和变量 1.数据类型介绍1.1 字符型1.2 整型1.3 浮点型1.4 布尔类型1.5 各种数据类型的长度1.5.1 sizeof操作符1.5.2 数据类型长度1.5.3 sizeof中表达式不计算 2. signed 和 unsigned3. 数据类型的取值范围4. 变量4.1 变量的创建4.2 变量的分类 5. 算术操作符&#…...

运行时类型信息(RTTI)

在计算机编程中,运行时类型信息(Runtime Type Information,简称RTTI)或运行时类型标识(Runtime Type Identification)是某些编程语言(如C++、Object Pascal、Ada)的一个特性,它允许在程序运行时获取对象的数据类型信息。RTTI可以用于所有类型,也只能用于显式启用RTTI…...

使用 NVivo 定性数据分析软件指导癌症护理研究

您是否曾因进行全面文献综述所需的大量研究而感到不知所措&#xff1f;在比较和整理大量冗长的出版物时&#xff0c;您是否不知道从哪里开始&#xff1f;幸运的是&#xff0c;这正是定性研究专家 Heidi Rishel Brakey 硕士擅长的领域&#xff0c;我们将在本案例研究中介绍这一点…...

R语言 | 使用ggplot绘制柱状图,在柱子中显示数值和显著性

原文链接&#xff1a;使用ggplot绘制柱状图&#xff0c;在柱子中显示数值和显著性 本期教程 获得本期教程示例数据&#xff0c;后台回复关键词&#xff1a;20240628。&#xff08;PS&#xff1a;在社群中&#xff0c;可获得往期和未来教程所有数据和代码&#xff09; 往期教程…...

第十四届蓝桥杯省赛C++B组D题【飞机降落】题解(AC)

解题思路 这道题目要求我们判断给定的飞机是否都能在它们的油料耗尽之前降落。为了寻找是否存在合法的降落序列&#xff0c;我们可以使用深度优先搜索&#xff08;DFS&#xff09;的方法&#xff0c;尝试所有可能的降落顺序。 首先&#xff0c;我们需要理解题目中的条件。每架…...

容器化spring boot应用程序

容器化spring boot应用程序有多种方式&#xff0c;如基于简单的Dockerfile&#xff0c;多阶段Dockerfile以及基于Docker Compose等&#xff0c;我们将逐步给大家介绍&#xff0c;本节主要介绍基于简单的Dockerfile进行容器化spring boot的应用程序。 创建Spring boot应用程序 …...

掌握智慧校园:资产来源功能解析

在智慧校园的资产管理框架下&#xff0c;资产来源管理是确保资产数据完整性和合规性的重要一环。这一功能通过数字化手段&#xff0c;详尽记录每一项资产从何而来&#xff0c;无论是采购、捐赠、内部调拨&#xff0c;还是自制与改造&#xff0c;均需经过严格记录与追踪&#xf…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...