BOM的详细讲解

BOM概述

BOM简介

BOM(browser Object)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。

BOM由一系列的对象构成,并且每个对象都提供了很多方法与属性

BOM缺乏标准,JS语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分

DOM与BOM的区别

类别

DOM

BOM

1

文档对象模型

浏览器对象模型

2

DOM是把文档当做一个对象来看待

把浏览器当做一个对象来看待

3

顶级对象是document

顶级对象是window

4

主要学习操作页面元素

学习浏览器窗口交互的一些对象

5

W3C标准规范

各浏览器厂商在各自浏览器上定义的标准,兼容性较差

BOM的构成(对象)

BOM比DOM更大,它包含DOM

window

document

location

navigation

screen

history

Window

代表的是整个浏览器的窗口,同时windonw也是网页的全局对象

window 对象是浏览器的顶级对象,它具有双重角色

  • 它是js访问浏览器窗口的一个接口
  • 它是一个全局对象。定义在全局作用域中的变量,函数都会变成window对象的属性和方法,在调用的时候,可以省略window,前面学习的对话框都属于window对象方法,如alert(),prompt()等

注意:window下的一个特殊属性window.name,所以定义变量时,尽量不用name这个变量名

Navigator(浏览器的意思)

-代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器

Location

-代表浏览器的地址栏信息,通过location可以获取地址栏信息,或者跳转页面

History

-代表浏览器的历史记录,可以通过该对象操作浏览器的历史记录

由于隐私的原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或者向后翻页

而且该操作只在当次访问有效

Screen

-代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关信息

注意:这些BOM对象在浏览器中都是作为window对象的属性来保存的,可以通过window对象来使用,也可以直接使用

window对象的常见事件

onload窗口加载事件

1、window.οnlοad=function(){} 传统注册事件方式(只能写一次,如果有多个,会以最后一个为准)

2、window.addEventListener("load",function(){} )

当文档内容完全加载完成会触发该事件(包括图像,脚本文件、css文件等),就调用的处理函数

DOMContentLoaded窗口加载事件

document.addEventListener("DOMContentLoaded",function(){} )

<body><script>//1、 onload写法//   window.onload = function () {//     var box = document.querySelector(".box");//     box.addEventListener("click", function () {//       this.style.backgroundColor = "pink";//     });//   };//2、addEventListener 写法//   document.addEventListener("load", function () {//     var box = document.querySelector(".box");//     box.addEventListener("click", function () {//       this.style.backgroundColor = "pink";//     });//   });//3、DOMContentLoaded写法document.addEventListener("DOMContentLoaded", function () {var box = document.querySelector(".box");box.addEventListener("click", function () {this.style.backgroundColor = "pink";});});</script><!-- 需求:点击box,box背景色变化,js交互可以放在任意位置 --><div class="box">box</div></body>

调整窗口大小事件

window.οnresize=function(){}

window.addEventListener("resize",function(){} )

调整窗口大小(像素)就会触发,调用内部处理函数,可以用来完成响应式效果

<!--需求:当前屏幕大小在800以内的时候,box消失,否则显示 -->
<div>box</div>
<script>var box = document.querySelector("div");window.addEventListener("resize", function () {if (window.innerWidth < 800) {box.style.display = "none";} else {box.style.display = "block";}});
</script>

定时器

setInterval() 定时调用

js的程序的执行速度是非常非常快的,如果希望一段程序,可以每间隔一段时间执行一次,可以使用定时调用

语法:

setInterval(回调函数,间隔时间) 定时调用,可以将一个函数,每隔一段时间执行一次

参数:

第一个:回调函数,该函数会每隔一段时间调用一次

第二个:每次调用间隔时间,单位是毫秒

返回值:

返回一个Number类型的值,这个数字用来作为定时器的唯一标识

关闭定时器:

clearInterval(number)

方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器

<body><!-- 需求:页面出现出现数字,每秒自增1 --><h1 id="count"></h1><script>var count = document.getElementById("count");var num = 1;var timer = setInterval(function () {count.innerHTML = num++;if (num == 5) {clearInterval(timer);}}, 1000);console.log(timer);//1</script></body>

 setTimeoutl() 延时调用

概念:延时调用,一个函数不马上执行,而是隔一段时间以后再执行 ,而且只会执行一次

语法:

window.setTimeout(回调函数,延迟秒数)

参数:

1、回调函数直接写函数,或者写函数名皆可

2、延迟秒数若省略,默认是0,单位是毫秒

返回值:数字标识

关闭定时器:clearTimeout(timer)

区别:定时调用会执行多次,而延时调用只会调用一次,延时调用和定时调用可以互相代替,在开发中,可根据自己的需要去选择

<script>var num = 0;var timer = setTimeout(function () {console.log(num++);}, 1000);//使用clearTimeout()来关闭一个延时调用clearTimeout(timer);</script>

JS执行机制

JS是单线程

JS语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是JS这门脚本语言诞生的使命所致——用来处理页面中用户的交互,以及操作DOM而诞生的。

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长,这样会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉

同步和异步

为了解决这个问题,利用多核CPU的计算能力,HTML5提出了Web Worker标准,允许JS脚本创建多个线程,于是,jS中出现了同步和异步

同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的,同步的。比如:我们要烧水煮饭,等水开了(10分钟后),再去切菜,炒菜

异步:你在做一件事情时,因为这件事会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如烧水的10分钟内,去切菜,炒菜

同步任务:在主线程上排队执行任务,只有前一个任务执行完毕,才能执行后一个任务

异步任务:不进入主线程,而是进入"任务队列"的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

一般而言,异步任务有以下三种类型

    • setTimeout和setlnterval
    • DOM事件 普通事件如:click、resize,资源加载事件:onload等
    • ES6中的Promise
    • Ajax异步请求

异步任务相关回调函数添加到任务队列中(消息队列)

JS执行机制

  1. 先执行执行栈中的同步任务
  2. 异步任务(回调函数)放入任务队列中
  3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行

事件循环

  1. 首先,执行栈开始顺序执行
  2. 判断是否为同步,异步则进入异步线程,最终事件回调给事件触发线程的任务队列等待执行,同步继续执行
  3. 执行栈为空,询问任务队列中是否有事件回调
  4. 任务队列中有事件回调则把回调加入执行栈末尾继续从第一步开始执行
  5. 任务队列中没有事件回调则不停发起询问
 <body><button>点击</button><script>var setTimeoutCallBack = function () {console.log("我是定时器回调");};var btn = document.querySelector("button");btn.onclick = function () {console.log("我是点击事件");};// 同步任务console.log("我是同步任务1");// 异步定时任务setTimeout(setTimeoutCallBack, 1000);// 同步任务console.log("我是同步任务2");</script></body>

JS引擎线程 只会执行执行栈中的事件,执行栈中的代码执行完毕,就会读取事件队列中的事件并添加到执行栈中继续执行,这样反反复复就是我们所谓的事件循环(Event Loop)

location对象

location对象初识

window对象给我们提供了一个location属性用户获取或设置窗体的URL,并且可以用于解析URL。因为这个对象返回的是一个对象,所以我们称为location对象

URL

统一资源定位符(Uniform Resource Locator,简称URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息支出文件的位置以及浏览器应该如何处理它。简单地说URL就是web地址,俗称“网址”。

URL由三部分组成:资源类型、存放资源的主机域名、资源文件名。

URL的一般语法格式为:

protocol :// hostname[:port] / path / [;parameters][?query]#fragment

京东家电

格式说明:

(1)、protocol(协议)

指定使用的传输协议,最常用的HTTP协议,它是目前WWW中应用最广的协议。

      • http 通过 HTTP 访问该资源。 格式 HTTP://
      • https 通过安全的 HTTPS 访问该资源。 格式 HTTPS://
      • ftp 通过 FTP访问资源。格式 FTP://

一般来说,https开头的URL要比http开头的更安全,因为这样的URL传输信息是采用了加密技术。

(2)、hostname(主机名)

是指存放资源的服务器的域名系统(DNS) 主机名或 IP 地址。有时,在主机名前也可以包含连接到服务器所需的用户名和密码(格式:username:password@hostname)。

(3)、port(端口号)

HTTP缺省工作在TCP协议80端口,用户访问网站http:// 打头的都是标准HTTP服务。

HTTPS缺省工作在TCP协议443端口。

(4)、path(路径)

由零或多个“/”符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。

(5)、parameters(参数)

这是用于指定特殊参数的可选项。

(6)、query(查询)

可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP。NET等技术制作的网页)传递参数,可有多个参数,用“&”符号隔开,每个参数的名和值用“=”符号隔开。

(7)、fragment(信息片断)

信息片断,字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。

3)location对象的属性

location对象属性

返回值

location.href

返回当前加载页面的完整URL

location.href 与 window.location.href等价

location.hash

返回URL中的hash(#号后 跟零或多个字符),如果不包含则返回空字符串

location.host

返回服务器名称和端口号

location.hostname

返回不带端口号的服务器名称

location.pathname

返回URL中的目录和(或)文件名

location.port

返回URL中指定的端口号,如果没有返回空字符串

location.protocal

返回页面使用的协议

location.search

返回URL的查询字符串,查询?开头的的字符串

location对象方法

功能

location.assign()

用来跳转到其他的页面,作用和直接修改location一样,有历史记录(也称重定向页面)

location.replace()

重新定向URL,不会在历史记录中生成新纪录(没有后退按钮)

location.reload()

重新加载当前显示的页面,如果在方法中传递一个true,作为参数,则会强制刷新缓存

navigator对象

navigator代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器,由于历史原因,navigator对象中的大部分属性都已经不能帮助我们识别浏览器了,一般我们只会用userAgent 来判断浏览器的信息,userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不同的userAgent

history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互,该对象包含用户(在浏览器窗口中)访问过的URL

history对象属性

作用

length

可以获取当前访问的网页的链接数量

history对象方法

作用

back()

可以用来退到上一个页面,作用和浏览器的回退按钮一样

forward()

可以跳转到下一个页面,作用和浏览器的前进按钮一样

go()

可以跳转到指定的页面,它需要一个整数作为参数

正数:向前跳转n个页面

负数:向后跳转n个页面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/475353.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

湘潭大学软件工程算法设计与分析考试复习笔记(四)

回顾 湘潭大学软件工程算法设计与分析考试复习笔记&#xff08;一&#xff09;湘潭大学软件工程算法设计与分析考试复习笔记&#xff08;二&#xff09;湘潭大学软件工程算法设计与分析考试复习笔记&#xff08;三&#xff09; 前言 现在是晚上十一点&#xff0c;我平时是十…

STM32单片机ADC数模转换器

由于最近忘记了&#xff0c;自用。 转换模式 单次转换&#xff0c;非扫描模式 在非扫描模式下&#xff0c;列表中就只有序列1的位置有效&#xff0c;此时可以在序列1的位置指定我们想要转换的通道&#xff0c;然后ADC就会对这个通道进行模数转换。等待一段时间&#xff0c;转…

android 使用MediaPlayer实现音乐播放--获取音乐数据

前面已经添加了权限&#xff0c;有权限后可以去数据库读取音乐文件&#xff0c;一般可以获取全部音乐、专辑、歌手、流派等。 1. 获取全部音乐数据 class MusicHelper {companion object {SuppressLint("Range")fun getMusic(context: Context): MutableList<Mu…

Spring Boot中使用AOP和反射机制设计一个的幂等注解(两种持久化模式),简单易懂教程

该帖子介绍如何设计利用AOP设计幂等注解&#xff0c;且可设置两种持久化模式 1、普通模式&#xff1a;基于redis的幂等注解&#xff0c;持久化程度较低 2、增强模式&#xff1a;基于数据库&#xff08;MySQL&#xff09;的幂等注解&#xff0c;持久化程度高 如果只需要具有re…

VSCode+ESP-IDF开发ESP32-S3-DevKitC-1(1)开发环境搭建

VSCodeESP-IDF开发ESP32-S3-DevKitC-1&#xff08;1&#xff09;开发环境搭建 1.开发环境搭建&#xff08;安装ESP-IDF&#xff09;2.开发环境搭建&#xff08;安装VS Code&#xff09;3.开发环境搭建&#xff08;VSCode中安装ESP-IDF插件及配置&#xff09; 1.开发环境搭建&am…

论文分享 | FuzzLLM:一种用于发现大语言模型中越狱漏洞的通用模糊测试框架

大语言模型是当前人工智能领域的前沿研究方向&#xff0c;在安全性方面大语言模型存在一些挑战和问题。分享一篇发表于2024年ICASSP会议的论文FuzzLLM&#xff0c;它设计了一种模糊测试框架&#xff0c;利用模型的能力去测试模型对越狱攻击的防护水平。 论文摘要 大语言模型中…

opencv(c++)----图像的读取以及显示

opencv(c)----图像的读取以及显示 imread: 作用&#xff1a;读取图像文件并将其加载到 Mat 对象中。参数&#xff1a; 第一个参数是文件路径&#xff0c;可以是相对路径或绝对路径。第二个参数是读取标志&#xff0c;比如 IMREAD_COLOR 表示以彩色模式读取图像。 返回值&#x…

用源码编译虚幻引擎,并打包到安卓平台

用源码编译虚幻引擎&#xff0c;并打包到安卓平台 前往我的博客,获取更优的阅读体验 作业内容: 源码编译UE5.4构建C项目&#xff0c;简单设置打包到安卓平台 编译虚幻 5 前置内容 这里需要将 Epic 账号和 Github 账号绑定&#xff0c;然后加入 Epic 邀请的组织&#xff0c…

OpenAI震撼发布:桌面版ChatGPT,Windows macOS双平台AI编程体验!

【雪球导读】 「OpenAI推出ChatGPT桌面端」 OpenAI重磅推出ChatGPT桌面端&#xff0c;全面支持Windows和macOS系统&#xff01;这款新工具为用户在日常生活和工作中提供了前所未有的无缝交互体验。对于那些依赖桌面端进行开发工作的专业人士来说&#xff0c;这一更新带来了令人…

【AIGC】破解ChatGPT!如何使用高价值提示词Prompt提升响应质量

文章目录 为什么高价值提示词如此重要&#xff1f;&#x1f50d;1.1 提升响应的相关性和准确性1.2 节省时间与资源1.3 增强用户体验 了解ChatGPT的工作原理&#x1f9e0;2.1 语言模型的训练过程2.2 上下文理解与生成2.3 限制与挑战 高价值提示词的核心要素✍️3.1 清晰明确的指…

07架构面试题

目录 一、关于合生元的面试题的架构分析的问题 1. 陈述两种方案的优劣 2. 在那些条件下&#xff0c;会选择哪一个方案 3. 你倾向那一种&#xff1f; 4. 如果要实施方案二的&#xff0c;准备步骤和流程 一、关于合生元的面试题的架构分析的问题 1. 陈述两种方案的优劣 方案…

反转链表、链表内指定区间反转

反转链表 给定一个单链表的头结点pHead&#xff08;该头节点是有值的&#xff0c;比如在下图&#xff0c;它的val是1&#xff09;&#xff0c;长度为n&#xff0c;反转该链表后&#xff0c;返回新链表的表头。 如当输入链表{1,2,3}时&#xff0c;经反转后&#xff0c;原链表变…

关于win11电脑连接wifi的同时,开启热点供其它设备连接

背景&#xff1a; 我想要捕获手机流量&#xff0c;需要让手机连接上电脑的热点。那么问题来了&#xff0c;我是笔记本电脑&#xff0c;只能连接wifi上网&#xff0c;此时我的笔记本电脑还能开启热点供手机连接吗&#xff1f;可以。 上述内容&#xff0c;涉及到3台设备&#x…

Linux编辑器 - vim

目录 一、vim 的基本概念 1. 正常/普通/命令模式(Normal mode) 2. 插入模式(Insert mode) 3. 末行模式(last line mode) 二、vim 的基本操作 三、vim 正常模式命令集 1. 插入模式 2. 移动光标 3. 删除文字 4. 复制 5. 替换 6. 撤销上一次操作 7. 更改 8. 调至指定…

靓车汽车销售网站(源码+数据库+报告)

基于SpringBoot靓车汽车销售网站&#xff0c;系统包含两种角色&#xff1a;管理员、用户,系统分为前台和后台两大模块&#xff0c;主要功能如下。 前台功能简介&#xff1a; - 首页&#xff1a;展示网站的概要信息和推荐车辆。 - 车辆展示&#xff1a;展示可供销售的汽车。 - …

数据集-目标检测系列- 花卉 鸡蛋花 检测数据集 frangipani >> DataBall

数据集-目标检测系列- 花卉 鸡蛋花 检测数据集 frangipani >> DataBall DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 贵在坚持&#xff01; 数据样例项目地址&#xff1a; * 相关项目 1&#xff09;数据集…

数据库基础(MySQL)

1. 数据库基础 1.1 什么是数据库 存储数据用文件就可以了&#xff0c;为什么还要弄个数据库? 文件保存数据有以下几个缺点&#xff1a; 文件的安全性问题文件不利于数据查询和管理文件不利于存储海量数据文件在程序中控制不方便 数据库存储介质&#xff1a; 磁盘内存 为…

stm32cubemx+VSCODE+GCC+makefile 开发环境搭建

title: stm32cubemxVSCODEGCCmakefile 开发环境搭建 tags: FreertosHalstm32cubeMx 文章目录 内容往期内容导航第一步准备环境vscode 插件插件配置点灯 内容 往期内容导航 第一步准备环境 STM32CubeMXVSCODEMinGWOpenOcdarm-none-eabi-gcc 然后把上面下载的软件 3 4 5 bin 文…

【网络】网络抓包与协议分析

网络抓包与协议分析 一. 以太网帧格式分析 这是以太网数据帧的基本格式&#xff0c;包含目的地址(6 Byte)、源地址(6 Byte)、类型(2 Byte)、数据(46~1500 Byte)、FCS(4 Byte)。 Mac 地址类型 分为单播地址、组播地址、广播地址。 单播地址&#xff1a;是指第一个字节的最低位…

el-cascader 使用笔记

1.效果 2.官网 https://element.eleme.cn/#/zh-CN/component/cascader 3.动态加载&#xff08;官网&#xff09; <el-cascader :props"props"></el-cascader><script>let id 0;export default {data() {return {props: {lazy: true,lazyLoad (…