Javascript学习笔记4 BOM

学 JavaScript 前,这 4 个词你必须懂:JS、ES、DOM、BOM 每次有人问我“JavaScript 到底是什么?”我就忍不住想讲个故事。它不是冰冷的语法,而是让网页活过来的灵魂;它有标准、有规则、有魔法通道,还有能操控浏览器的超能力。今天就跟着小米,一起走进 JavaScript 的奇妙世界吧! 阅读详情

window对象

BOM:浏览器对象模型,其核心对象是window,表示浏览器的一个实例。其作为Global对象,在全局作用域中声明的变量和函数都会变成window对象的属性和方法

每个框架都具有自己的 window 对象,并且保存在 frames 集合中,且每个window对象都有一个 name 属性,其中包含着框架的名字。 top 对象始终指向最外层的框架(浏览器窗口),而 parent 对象始终指向当前框架的直接上层框架,在没有框架的情况下,top等于parent。self 对象始终指向window
frames[0],frames[1]...
frames["name"]
top.frames[0]
window.frames[0]

窗口位置:screenLeft和screenTop属性(相对屏幕左边和上边的位置),或者screenX和screenY。moveTo(x,y)移动窗口至新的x,y坐标,moveBy(x_relative,y_relative)水平和垂直方向上的移动像素值

窗口大小:innerWidth和innerHeight属性(页面视图大小),outerWidth和outerHeight浏览器窗口本身大小。resizeTo(x,y)改变窗口大小至新宽度和高度,resizeBy(x_relative,y_relative)水平和垂直方向上新窗口和原窗口的宽度和高度差

打开窗口

window.open(url,窗口目标,特性字符串,表示新页面是否取代浏览器浏览记录中当前加载页面的布尔值);
窗口目标:_self(自身),_parent(父窗口),_top(浏览器窗口),_blank(新的空白窗口)或新窗口的名称字符串
new_window = window.open("https://www.zjw666.top");
new_window.close()  //只能关闭使用open方法打开的窗口

超时调用和间歇调用

window.setTimeout(执行的代码,毫秒为单位的时间值);
var timeoutId = window.setTimeout(function(){alert("zjw");},1000);  //在1秒之后调用
window.clearTimeout(timeoutId);   //取消尚未执行的超时调用
window.setInterval(执行的代码,毫秒为单位的时间值);
var timeoutId = window.setInterval(function(){alert("zjw");},1000);  //每隔1秒重复调用
window.clearInterval(timeoutId);   //取消间歇调用

系统对话框

alert()   //接受一个字符串并显示给用户,
confirm()   //接受一个字符串,根据用户选择返回true或false
prompt()  //用于提示用户输入一些文本,返回输入值或null

location对象

最有用的BOM对象之一,其即是window对象的属性,也是document对象的属性

location对象属性

属性名例子说明
hash#contents返回URL的hash(#号后跟的字符)
host“www.zjw.com:80”服务器名称和端口
hostname“www.zjw.com”不带端口号的服务器名称
href“https://www.zjw666.top”返回完整的URL
pathname“/zjwfile/”返回URL中文件目录和文件名
port“8080”返回URL中的端口号,若没有,则返回空字符串
protocol“http:”返回协议
search“?q=javasrcipt”返回URL中的查询字符串
  • 可以更改location或location的href属性来改变当前加载的页面
window.location = "www.zjw666.top"
或location.href = "www.zjw666.top"
  • 使用replace()方法避免生成历史记录(不能使用后退按钮)
window.location.replace("www.zjw666.top");
  • 使用reload()方法重新加载页面
window.location.reload(); //当接受true关键字时,表示从服务器而不是从缓存中重新加载

history对象

保存着用户上网记录,可以使用go()方法在记录中任意跳转

history.go(-1); //回退1页
history.go(1);  //前进一页
history.go(2);  //前进两页
history.go("www.zjw666.top")  //历史记录中包含该字符串的位置
history.length //历史记录的数量
【前端学习笔记】Web API——BOM与DOM DOM定义了节点和对象的属性、方法,这些属性、方法可以动态地更新页面内容,响应用户的交互。在这种做法中,当我们想在用户与大量的子元素中的任何一个互动时运行一些代码时,我们在它们的父元素上设置事件监听器,让发生在它们身上的事件冒泡到它们的父元素上,而不必在每个子元素上单独设置事件监听器。window 代表浏览器的一个窗口或标签页,提供了控制浏览器窗口的方法和属性,是浏览器中最顶层的对象,同时也是全局对象,所以在全局作用域中声明的所有变量和函数都成为了 window 对象的属性。BOM:浏览器对象模型。 阅读详情

相关推荐

10分钟训练你的AI歌手:RVC WebUI声音克隆保姆级教程

本文提供了一份详细的RVC WebUI声音克隆保姆级教程,指导用户如何在10分钟内利用Retrieval-based-Voice-Conversion技术训练专属AI歌手。教程涵盖从环境配置、数据准备、模型训练到最终推理应用的全流程,即使是新手也能快速上手,实现高质量的声音克隆与歌曲生成。

weixin_29073241的博客 819

JS学习笔记之BOM 4.28

JS学习笔记之BOM

qq_36450483的博客 276

dify智能体:日志管理与标注功能详解

日志管理与标注功能是优化聊天助手、Agent、文本生成应用、Chatflow 和工作流等工具交互体验的关键。日志管理允许用户查看、修改和标注日志,帮助回顾和优化交互内容。用户可以通过点击👍或👎按钮快速标注满意度,标注后的日志可用于后续优化和分析。标注功能则支持用户对交互内容进行标记和调整,以提升模型输出质量。此外,用户还可以调整界面语言和时区设置,确保在熟悉的环境中操作。这些功能共同作用,显著提升了交互体验和模型性能。

zyx_bx的博客 2711

初学js4_js的bom和dom_学习笔记

强行推一推博文~js04.html<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>js的bom      

没有标题 335

极速建站!用1Panel面板一键部署Halo博客的保姆级教程 | 企业官网/个人博客搭建教程

个人博客是一种在互联网上发布自己的文章、图片、视频等内容的平台,通常以文字为主要形式,但也可以包含其他媒体。个人博客的用途非常广泛。它可以用来记录博主的日常生活、分享自己的知识和经验、展示自己的作品和技能,以及交流自己的观点和看法。通过个人博客,博主可以与读者建立联系,分享自己的见解和体验,同时也可以从读者那里获得反馈和建议。

zeruns的博客 1832

Java高频面试基础问题与知识点整理

Java高频面试知识点总结:覆盖高频基础知识考点+高频集合知识点深入分析+高频多线程与并发编程面试题汇总+其他扩展考察等。

曾经“等你生日那天”都遥远得像未来,如今却可欢愉的挥手说“下个十年见” 172万+

web 学习笔记4-BOM和JavaScript事件

1、BOM的概述: 2、window的属性: 3、history对象: 4、location对象: 5、常用事件:

pin-csdn的博客 386

【瑞芯微px30】【RTL8363】【一】驱动移植-网卡驱动概述

linux rtl8363驱动移植

weixin_34799243的博客 1180

JavaScript BOM学习笔记——window对象4

1.系统对话框:window.alert(),window.confirm(),window.prompt() (1).window.alert();         这个可能是写Javascript程序中最常见的用的最多的方法了。这个用来产生警示框,提示用户。 (2).window.confirm();         例如window.confirm("确定吗?")。该对话框基本上与上...

wawlian说 166

BMS硬件设计要点:从STM32主控到BQ76920监控芯片的工程实践

电池管理系统(BMS)是锂电安全与寿命保障的核心,其硬件设计涉及微控制器选型、专用监控芯片接口、电源完整性、信号完整性及PCB布局等多维度协同。基于STM32与BQ76920的典型双层架构,需深入理解功能安全解耦原理——关键保护由ASIC硬件实现,算法决策交由MCU完成,契合ASIL-B等级要求。技术价值体现在毫秒级硬件保护响应、±10mV电压采样精度及抗EMI鲁棒性设计;广泛应用于电动工具、储能系统与轻型电动车等中高功率场景。本文聚焦BMS控制板硬件实现中的高频时钟EMC、I²C总线信号完整性、被动均衡可

weixin_30591519的博客 92

YOLOv13改进目录一览 | 涉及卷积层、轻量化、注意力、损失函数、Backbone、SPPF、Neck、检测头等全方位改进

1️⃣ 已更新种不同的改进方案,专栏内的每篇文章皆,均可顺利运行。2️⃣ 订阅专栏即可进群获取以及从的各种答疑内容。3️⃣ 全新的YOLOv13改进专栏,,只为更好的满足论文发表的要求。专栏内容,专栏实时评分,全网最高,质量保证。🎫。。

Limiiiing的博客 9157

Javascript高级编程学习笔记(30)—— BOM(4)navigator对象

Javascript高级编程学习笔记(30)—— BOM(4)navigator对象 window对象作为浏览器的全局对象、location对象保存了页面的url信息 那么navigator对象又有什么作用呢? navigator对象 该对象最早由 Netspace Navigator 2.0 引入,用于识别浏览器客户端的事实标准 在...

巽秋的博客 111

NVIDIA Isaac Sim 入门教程(二)

Omniverse Isaac Sim 的工作空间非常容易自定义。调整用户界面的大小、停靠、取消停靠、添加和移除面板都非常容易。进入顶部菜单栏,单击下拉菜单最下方的窗口 > 视口 > 视口 2(现在工作区中应该会出现一个名为 "视口 2 "的新视口。如果您想创建更多的视口,请按照相机检查器扩展进行操作。单击并拖动视口 2 的顶部标题以激活停靠部件。拖放到原始视口的右侧,将两个视口并排放置。单击并向左拖动视口 2 的左侧,使视口大小相等。

机器人控制与仿真应用 6545

JS学习笔记---16 BOM-4、JS 执行队列

4、JS执行队列

weixin_51744858的博客 143

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

JS(JavaScript)的BOM操作

JavaScript共三部分组称:ECMAScript核心语法、DOM文档对象模型、BOM浏览器对象模型BOM就是浏览器对象模型以下是BOM的结构图。

感谢阅读 1845

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

javaScript BOM简介

4.1.1、BOM简介BOM(browser Object)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。BOM由一系列的对象构成,并且每个对象都提供了很多方法与属性BOM缺乏标准,JS语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分4.1.2、DOM与BOM的区别类别DOMBOM1文档对象模型浏览器对象模型2DOM是把文档当做一个对象来看待把浏览器当做一个对象来看待3。

2403_88615647的博客 1626

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

JavaScript之BOM

window对象是浏览器的顶级对象,它具有双重角色。它是JS访问浏览器窗口的一个接口。它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert()、prompt()等。注意:window下的一个特殊属性window.nameload语法window可省略 传统写法是加on作用:加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件。

xrkhy的博客 1151

JavaScript详解十八 ——BOM

由于历史原因,navigator对象中的大部分属性都已经不能帮助我们识别浏览器了,一般我们只会用userAgent 来判断浏览器的信息,userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不同的userAgent。定义在全局作用域中的变量,函数都会变成window对象的属性和方法,在调用的时候,可以省略window,前面学习的对话框都属于window对象方法,如alert(),prompt()等。比如:我们要烧水煮饭,等水开了(10分钟后),再去切菜,炒菜。

奋斗的小前端 1794

JavaScript之BOM 操作介绍

不过,BOM 与严格标准化的 JS 语法(由 ECMA 组织规范)和 DOM(由 W3C 组织规范)不同,它最初源于 Netscape 浏览器的标准,在标准化方面存在一定缺失,这也导致了不同浏览器对 BOM 的支持和实现存在差异。然而,由于历史原因,navigator 对象中的大部分属性在现代浏览器中已不再可靠,无法准确地识别浏览器类型和版本。通过事件循环机制,JavaScript 能够在单线程环境下高效地处理同步和异步任务,实现复杂的交互功能和非阻塞的 I/O 操作,确保页面的流畅性和响应性。

奋斗的小前端 1084

JavaScript基础——DOM和BOM的常用api

DOM和BOM所有常用的API都在这里

蜡笔不新的博客 2113

Javascript 什么是BOM

核心说明window 对象表示浏览器窗口。它是 BOM 的核心对象,提供了浏览器窗口的各种方法和属性。location 对象表示当前文档的 URL 信息。它提供了访问和操作浏览器地址栏的方法和属性。navigator 对象对象:提供了浏览器的相关信息,如浏览器的名称、版本等。screen 对象提供了关于用户屏幕的信息,如屏幕尺寸、颜色深度等。history 对象表示浏览器的浏览历史记录,可以通过它来前进或后退到不同的页面。document对象。

2201_75883077的博客 1760

JavaScript- 1.4 BOM对浏览器进行操作

本文讲述了BOM, BOM主要用于操作浏览器本身的行为和窗口,提供与浏览器交互的功能。DOM主要用于操作网页文档的内容和结构,实现动态内容更新和交互效果。两者共同协作,使得JavaScript能够控制浏览器和网页的方方面面。以上就是今天要讲的内容,本文简单记录了BOM对浏览器进行操作,仅作为一份简单的笔记使用,大家根据注释理解。

HRDMN的博客 943

JavaScript基础知识之BOM

BOM是浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性。BOM缺乏标准,javascript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。DOM和BOM的比较DOM:文档对象模型、DOM就是把[文档]当作一个[对象]来看待、DOM的顶级对象是document、DOM主要学习的是操作页面元素、DOM是W3C标准规范。

qq_38652677的博客 2109

JavaScript核心之BOM基础学习笔记

JavaScript核心之BOM基础学习笔记1 BOM 概述1.1 什么是 BOM1.2 BOM 的构成2 window 对象的常见事件2.1 窗口加载事件2.2 调整窗口大小事件3 定时器3.1 两种定时器3.2 setTimeout() 定时器3.3 停止 setTimeout() 定时器3.4 setInterval() 定时器3.5 停止 setInterval() 定时器3.6 停止 setInterval() 定时器4 JS 执行机制4.1 JS 是单线程4.2 同步和异步4.3 同步和异步4.

Lostdeer的博客 348

前端javascript的BOM对象知识精讲

BOM:Browser Object Model,浏览器对象模型,提供一系列与浏览器相关的信息。 浏览器对象模型(Browser Object Model (BOM)) 不存在浏览器对象模型(BOM)的官方标准。 现代的浏览器已经(几乎)实现了 JavaScript 交互相同的方法和属性,因此它经常作为 BOM 的方法和属性被提到。 BOM对象:分为window对象和window子对象(screen对象,location对象,navigator对象,history对象)。

景天科技苑 1762

JS中的DOM与BOM

一.Javascript组成 JavaScript的实现包括以下3个部分: ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 (DOM)处理网页内容的方法和接口浏览器对象模型(BOM)与浏览器交互的方法和接口 javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异,IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaS...

CodeNotes 3334
上一篇: 直接插入排序
下一篇: Javascript学习笔记5 DOM
PAT-python-zjw
博客等级 码龄10年 381粉丝 408原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值