JavaScript之BOM(八)

news/2024/12/23 12:26:14 标签: 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;背包正序排列…