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.mzph.cn/diannao/61377.shtml

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

相关文章

Jenkins下载安装、构建部署到linux远程启动运行

Jenkins详细教程 Winodws下载安装Jenkins一、Jenkins配置Plugins插件管理1、汉化插件2、Maven插件3、重启Jenkins&#xff1a;Restart Safely插件4、文件传输&#xff1a;Publish Over SSH5、gitee插件6、清理插件&#xff1a;workspace cleanup system系统配置1、Gitee配置2、…

数据分析——Python绘制实时的动态折线图

最近在做视觉应用开发&#xff0c;有个需求需要实时获取当前识别到的位姿点位是否有突变&#xff0c;从而确认是否是视觉算法的问题&#xff0c;发现Python的Matplotlib进行绘制比较方便。 目录 1.数据绘制2.绘制实时的动态折线图3.保存实时数据到CSV文件中 import matplotlib.…

Unity 使用 ExcelDataReader 读取Excel表

文章目录 1.下载NuGet包2.通过NuGet包获取dll3.将dll复制unity Plugins文件夹下4.代码获取Excel表内容 1.下载NuGet包 通过NuGet下载&#xff1a; ExcelDataReaderExcelDataReader.DataSet离线下载方法 2.通过NuGet包获取dll 根据编译时程序集找到dll位置&#xff0c;找到与…

【vmware+ubuntu16.04】ROS学习_博物馆仿真克隆ROS-Academy-for-Beginners软件包处理依赖报错问题

首先安装git 进入终端&#xff0c;输入sudo apt-get install git 安装后&#xff0c;创建一个工作空间名为tutorial_ws&#xff0c; 输入 mkdir tutorial_ws#创建工作空间 cd tutorial_ws#进入 mkdir src cd src git clone https://github.com/DroidAITech/ROS-Academy-for-Be…

九、FOC原理详解

1、FOC简介 FOC&#xff08;field-oriented control&#xff09;为磁场定向控制&#xff0c;又称为矢量控制&#xff08;vectorcontrol&#xff09;&#xff0c;是目前无刷直流电机&#xff08;BLDC&#xff09;和永磁同步电机&#xff08;PMSM&#xff09;高效控制的最佳选择…

Linux的指令(三)

1.grep指令 功能&#xff1a; 在文件中搜索字符串&#xff0c;将找到的行打印出来 -i&#xff1a;忽略大小写的不同&#xff0c;所以大小写视为一样 -n&#xff1a;顺便输出行号 -v:反向选择&#xff0c;就是显示出没有你输入要搜索内容的内容 代码示例&#xff1a; roo…

2025蓝桥杯(单片机)备赛--扩展外设之DS1302的使用(九)

1.DS1302数据手册的使用 a. DS1302 features: 工作电压&#xff1a;2V-5.5V 通信协议&#xff1a;3线接口&#xff08;CE、IO、SCLK&#xff09; 计时&#xff1a;秒、分、小时、月日期、月、星期、年&#xff08;闰年补偿器期至2100年&#xff09; b.原理图接线说明&#xff…

在CentOS中,通过nginx访问php

其实是nginx反向代理到php-fpm&#xff0c;就像nginx反向代理到tomcat。 1、安装PHP-FPM 1.1 安装 yum install php yum install php-fpm php-common 这里只安装了php-fpm&#xff0c;根据需要安装php模块&#xff0c;比如需要访问mysql则添加安装 php-mysqlnd。 1.2 启动…

Photino:通过.NET Core构建跨平台桌面应用程序,.net国产系统

一、Photino.NET简介&#xff1a; 最近发现了一个不错的框架 Photino.Net 一份代码运行&#xff0c;三个平台 windows max linux &#xff0c;其中windows10,windows11,ubuntu 18.04,ubuntu 20.04 已测试均可以。mac 因为没有相关电脑没有测试。 github:https://github.com/t…

编辑器vim 命令的学习

1.编辑器Vim 1.vim是一个专注的编辑器 2.是一个支持多模式的编辑器 1.1见一见&#xff1a; vim 的本质也是一条命令 退出来&#xff1a;-> Shift:q 先创建一个文件 再打开这个文件 进入后先按 I 然后就可以输入了 输入完后&#xff0c;保存退出 按Esc --> 来到最后一…

Ubuntu22.04LTS 部署前后端分离项目

一、安装mysql8.0 1. 安装mysql8.0 # 更新安装包管理工具 sudo apt-get update # 安装 mysql数据库&#xff0c;过程中的选项选择 y sudo apt-get install mysql-server # 启动mysql命令如下 &#xff08;停止mysql的命令为&#xff1a;sudo service mysql stop&#xff0…

Python爬虫:如何从1688阿里巴巴获取公司信息

在当今的数字化时代&#xff0c;数据已成为企业决策和市场分析的重要资产。对于市场研究人员和企业分析师来说&#xff0c;能够快速获取和分析大量数据至关重要。阿里巴巴的1688.com作为中国最大的B2B电子商务平台之一&#xff0c;拥有海量的企业档案和产品信息。本文将介绍如何…

10 基于深度学习的目标检测

首次完成时间&#xff1a;2024 年 11月 20 日 1. 使用OpenCV的dnn模块实现图像分类。 1&#xff09;程序代码&#xff1a; import numpy as np import cv2# 解析标签文件 row open("model1/synset_words.txt").read().strip().split("\n") class_label …

Spring WebFlux 高级实战(3-2)

1、SpringBoot 使用 1.1、Spring Core 中的响应式 Spring 生态系统的核心模块是Spring Core 模块。Spring 5.x 引入对响应式流和响应式库的原生支持&#xff0c;其中&#xff0c;响应式库包含RxJava 1/2 和Project Reactor 3。 1.1.1、响应式类型转换支持 为了支持响应式流规…

河道水位流量一体化自动监测系统:航运安全的护航使者

在广袤的水域世界中&#xff0c;航运安全始终是至关重要的课题。而河道水位流量一体化自动监测系统的出现&#xff0c;如同一位强大的护航使者&#xff0c;为航运事业的稳定发展提供了坚实的保障。 水位传感器&#xff1a;负责实时监测河道的水位变化。这些传感器通常采用先进的…

RHCE的学习(21)

第三章 Shell条件测试 用途 为了能够正确处理Shell程序运行过程中遇到的各种情况&#xff0c;Linux Shell提供了一组测试运算符。 通过这些运算符&#xff0c;Shell程序能够判断某种或者几个条件是否成立。 条件测试在各种流程控制语句&#xff0c;例如判断语句和循环语句中…

uni-app Vue3语法实现微信小程序样式穿透uview-plus框架

1 问题描述 我在用 uni-app vue3 语法开发微信小程序时&#xff0c;在项目中使用了 uview-plus 这一开源 UI 框架。在使用 up-text 组件时&#xff0c;想要给它添加一些样式&#xff0c;之前了解到微信小程序存在样式隔离的问题&#xff0c;也在uview-plus官网-注意事项中找到…

数据结构(双向链表——c语言实现)

双向链表相比于单向链表的优势&#xff1a; 1. 双向遍历的灵活性 双向链表&#xff1a;由于每个节点都包含指向前一个节点和下一个节点的指针&#xff0c;因此可以从头节点遍历到尾节点&#xff0c;也可以从尾节点遍历到头节点。这种双向遍历的灵活性使得在某些算法和操作中&a…

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

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

ES分词环境实战

文章目录 安装下载1.1 下载镜像1.2 单节点启动 防火墙设置异常处理【1】iptable链路中断 参考文档 参加完2024年11月软考&#xff0c;对ES的分词进行考查&#xff0c;前期有【 Docker 环境下安装部署 Elasticsearch 和 kibana】和【 Docker 环境下为 Elasticsearch 安装IK 分…