JavaScript之BOM(八)

news/2023/12/9 20:07:15 标签: javascript, 开发语言, ecmascript

JavaScript之BOM

      • 1、BOM中的对象
      • 2、window对象
        • 2.1、简介
        • 2.2、常用的属性与方法
        • 2.3、常用的事件
        • 2.4、定时器和延时器
      • 3、navigator 常用属性与方法
      • 4、history 常用属性与方法
      • 5、location 常用属性与方法

BOM:浏览器对象模型(Browser Object Model),是一套 JS 与浏览器窗口交互的接口。
 
请添加图片描述

1、BOM中的对象

名称描述
windowwindow 对象表示浏览器中打开的窗口,下列的5个对象都是window对象的属性或子对象。
navigatornavigator 对象包含有关浏览器的信息。
historyhistory 对象包含用户(在浏览器窗口中)访问过的 URL。
locationlocation 对象包含有关当前 URL 的信息。
screenscreen 对象包含显示器的分辨率、坐标等信息。
documentdocument 对象既是BOM中的对象之一,也是DOM中的对象之一,习惯上指的是HTML文档中的body部分。

2、window对象

2.1、简介

Window 对象是 JavaScript 层级中的顶层对象,代表一个浏览器窗口或一个框架,这个窗口中包含 DOM 结构,window.document 属性就表示 document 对象。
 
全局变量/函数会成为 window 对象的属性/方法。

2.2、常用的属性与方法

javascript">//浏览器窗口大小
innerHeight //浏览器窗口的内部高度
innerWidth //浏览器窗口的内部宽度

//弹出框
alert() //警告框
prompt() //提示框,提示用户输入信息,接受两个参数,即要显示给用户的文本和文本框中的默认值,将文本框中的值作为函数值返回
confirm()   //确认框,弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值

//计时器相关
setInterval()   //按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()    //在指定的延时时间后来执行代码
clearInterval() //取消setInterval()的设置
clearTimeout()  //取消setTimeout() 的设置

//其它
open()  //打开新窗口
close() //关闭当前窗口
print() //打印当前窗口的内容
focus() //把键盘焦点给予一个窗口
blur()  //把键盘焦点从顶层窗口移开
moveBy()    //可相对窗口的当前坐标把它移动到指定的像素
moveTo()    //把窗口的左上角移动到一个指定的坐标
resizeBy()  //按照指定的像素调整窗口的大小
resizeTo()  //把窗口的大小调整到指定的宽度和高度
scrollBy()  //按照指定的像素值来滚动内容
scrollTo()  //把内容滚动到指定的坐标

2.3、常用的事件

名称描述
onresize监听窗口改变大小事件
onscroll监听窗口滚动事件

2.4、定时器和延时器

方法描述
setTimeout(“函数”,间隔时间);设置定时器
clearTimeout();清除定时器
setInterval(“函数”,间隔时间);设置延时器
clearInterval();清除延时器

两者的区别:

  1. setTimeout() 在指定间隔时间后,执行特定的函数或代码一次;
  2. setInterval() 在指定间隔时间周期,重复执行特定的函数或代码;

两者的用法:

  1. setInterval() 定时器,写在初始化函数或 <script> 脚本中调用一次即可;
  2. setTimeout() 定时器,需要写在定时器调用的函数中,来实现setInterval()重复调用计时执行功能。

3、navigator 常用属性与方法

属性说明
appName完整的浏览器名称和版本信息
platform浏览器所在的系统平台
plugins浏览器中安装的插件信息的数 组
userAgent浏览器的用户代理字符串
userLanguage操作系统的默认语言

4、history 常用属性与方法

属性/方法描述
lengthhistory 对象中的记录数
back()前往浏览器历史条目前一个 URL,类似后退
forward()前往浏览器历史条目下一个 URL,类似前进
go(num)浏览器在 history 对象中向前或向后,go(-1)为前进、go(1)为后退

5、location 常用属性与方法

名称描述
href设置或返回完整的 URL 地址
search设置或返回从问号 (?) 开始的 URL(查询部分)
reload()重新加载当前页面
replace()把新的页面显示在浏览器中,替换掉当前页面内容,不能使用history对象来后退和前进。
assign()把新的页面显示在浏览器中,但可以通过history历史对象来后退,回到前一个页面。

http://www.niftyadmin.cn/n/393786.html

相关文章

chatgpt赋能python:Python程序的暂停使用介绍

Python程序的暂停使用介绍 Python是一种高级编程语言&#xff0c;适用于各种应用程序&#xff0c;包括Web开发、数据分析、机器学习等领域。它是一个非常强大的工具&#xff0c;但很多人可能不知道Python是否可以被暂停。在这篇文章中&#xff0c;我们将探讨Python是否可以…

PyTorch深度学习实战(2)——PyTorch基础

PyTorch深度学习实战&#xff08;2&#xff09;——PyTorch基础 0. 前言1. 搭建 PyTorch 环境2. PyTorch 张量2.1 张量初始化2.2 张量运算2.3 张量对象的自动梯度计算 3. PyTorch 张量相对于 NumPy 数组的优势小结系列链接 0. 前言 PyTorch 是广泛应用于机器学习领域中的强大开…

前端Rust开发WebAssembly与Swc插件快速入门

前言 现代前端对速度的追求已经进入二进制工具时代&#xff0c;Rust 开发成为每个人的必修课。 一般我们将常见的前端 Rust 开发分为以下几类&#xff0c;难度由上至下递增&#xff1a; 开发 wasm 。 开发 swc 插件。 开发代码处理工具。 我们将默认读者具备最简单的 Rus…

如何使用Java异常处理来优雅地处理各种异常情况?

在Java编程中&#xff0c;异常处理是一个非常重要的话题。良好的异常处理可以帮助我们更好地调试和排除代码中的错误&#xff0c;同时也可以提高代码的可读性、可维护性和稳定性。本文将详细介绍如何使用Java异常处理来优雅地处理各种异常情况。 异常分类 在Java中&#xff0…

chatgpt赋能python:**Python取余符号:了解%运算符的作用和用法**

Python取余符号&#xff1a;了解%运算符的作用和用法 作为一名有着10年编程经验的工程师&#xff0c;我对Python这门编程语言深有了解。在本文中&#xff0c;我将详细介绍Python的取余符号&#xff0c;即%运算符&#xff0c;其作用和用法。 什么是Python取余符号&#xff…

Java面向对象程序开发——基础

文章目录 前言类和对象类对象 构造方法匿名对象变量作用域this关键字总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; Java 是一种以面向对象编程为基础的编程语言 在 Java 编程中&#xff0c;一切皆为对象 每个对象都有其自己的属性和方法 对象可以…

Delphi11的多线程ⓞ,附送图片处理代码

Delphi11的多线程ⓞ OLD Coder , 习惯使用Pascal 接下来准备启用多线程&#xff0c;毕竟硬件多核&#xff0c;Timer不太爽了&#xff08;曾经的桌面&#xff0c;都是Timer——理解为“片”&#xff09; 突然想写写&#xff0c;不知道还有多少D兄弟们在。 从源码开始 用D11之…

代码随想录算法训练营第四十六天|139.单词拆分、关于多重背包,你该了解这些!、背包问题总结篇!

文章目录 一、139.单词拆分二、关于多重背包&#xff0c;你该了解这些&#xff01;三、背包问题总结篇&#xff01;总结 一、139.单词拆分 public boolean wordBreak(String s, List<String> wordDict) {//完全背包问题&#xff0c;因为可以重复&#xff0c;背包正序排列…

图文并茂教你快速入门React系列04-状态管理

在React中&#xff0c;什么是状态&#xff1f; 响应式 使用 React&#xff0c;你不用直接从代码层面修改 UI。举个栗子哇&#xff0c;不用编写诸如“禁用按钮”、“启用按钮”、“显示成功消息”等命令。相反&#xff0c;你只需要描述组件在不同状态&#xff08;“初始状态”…

Elasticsearch 和 Kibana 的实时大数据分析系统

Elasticsearch 和 Kibana 的实时大数据分析系统 一、简介1. 定义及特点2. 基本功能3. 数据索引与查询 二、Kibana 简介1. 定义及特点2. 基本功能与架构3. Kibana 可视化交互性 三、Elasticsearch 和 Kibana 的集成1. 集成意义2. 集成方法2.1 安装 Elasticsearch2.2 安装 Kibana…

web前端 --- BOM编程、DOM编程

BOM编程&#xff08;browser object model -- 浏览器对象模型&#xff09; BOM给JavaScript提供用来操作浏览器的若干的"方法" 操作 在 js 看来&#xff0c;一个完整的浏览器包含如下组件&#xff1a; window窗口 // 整个浏览器的窗口 |-- history …

chatgpt赋能python:Python取出列表中的某个数

Python取出列表中的某个数 在Python中&#xff0c;列表是一种非常重要的数据类型&#xff0c;它可以用来存储一系列有序的元素。在实际的开发中&#xff0c;经常会需要从列表中取出某个特定的数值&#xff0c;本文将介绍如何在Python中完成这个操作。 1. 使用index方法 Py…

chatgpt赋能python:Python句柄是什么意思?

Python句柄是什么意思&#xff1f; 在进行Python编程时&#xff0c;可能会涉及到句柄(handle)的概念。那么&#xff0c;什么是Python句柄呢&#xff1f;在本文中&#xff0c;我们将深入探讨这个问题&#xff0c;并解释句柄的用途和重要性。 什么是Python句柄&#xff1f; …

chatgpt赋能python:Python实现CSV文件只取某两列的方法详解

Python实现CSV文件只取某两列的方法详解 介绍 CSV是一种常见的数据格式&#xff0c;通常使用逗号或分号分隔不同的字段。在处理CSV文件时&#xff0c;我们经常需要只提取其中的某些列&#xff0c;以便进行进一步的分析或处理。使用Python语言&#xff0c;可以很方便地实现…

chatgpt赋能python:Python中取出中间文本的方法

Python中取出中间文本的方法 在Python开发中&#xff0c;我们常常需要从字符串中取出特定位置的文本&#xff0c;例如从一个网页源码中提取出指定的内容。而且&#xff0c;一份好的代码需要清晰易懂、高效可靠。那么&#xff0c;在Python中如何取出中间文本呢&#xff1f;…

他山之石可以攻玉:解锁9个chatGPT常用姿势

ChatGPT是一个颠覆性的人工智能&#xff0c;可以用来实现众多目标。下面是我们用中文提出的关于这些任务的指令&#xff0c;以及来自ChatGPT的中文回答示例。 调试代码 提示&#xff1a;为什么我的python代码报错&#xff1a;x [2, 3, 8 9]&#xff1f; ChatGPT回答&#x…
最新文章