BOM基础

最新推荐文章于 2022-12-30 19:07:09 发布

m0_63483865

最新推荐文章于 2022-12-30 19:07:09 发布

阅读量91

点赞数 1

分类专栏： JS 文章标签：大数据

本文链接：https://blog.csdn.net/m0_63483865/article/details/125510768

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

BOM概述

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

BOM由一系列相关的对象构成，并且没个对象都提供了很多方法与属性。

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

window对象是浏览器的顶级对象

它是JS访问浏览器窗口的一个接口
它是一个全局对象。定义在全局作用域中的变量。函数都会变成window对象的属性和方法

window对象的常见事件

窗口加载事件

window.onload = function(){ }

或者

window.addEventListener("load",function(){ });

window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本事件、CSS文件等)，就调用的处理函数。

注意：

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
window.onload传统注册事件只能写一次，如果有多个以最后一个为准
如果使用addEventListener没有限制

调整窗口大小事件

window.onresize = function() { }

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

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数

注意：

只要窗口大小发生像素变化，就会触发这个事件。
window.innerWidth当前屏幕的宽度

定时器

setTimeout()
setInterval()

setTimeout()定时器

window.setTimeout(调用函数，{延迟的毫秒数});

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意：

window可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名()'三种形式。
延迟的毫秒数省略默认是0，如果写必须是毫秒。
因为定时器可能有很多，所以经常给定时器赋值一个标识符。

停止setTimeout()定时器

window.clearTimeout(timeout ID)

setInterval()定时器

window.setInterval(回调函数，间隔毫秒数)；

setInterval()方法重复调用一个函数，每隔这个事件，就去调用一次回调函数。

注意：

window可以省略
调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()’三种形式
间隔的毫秒数省略默认是0，如果写单位必须是毫秒，表示每隔多少毫秒就自动调用这个函数
定时器很多，经常给定时器加标识符

停止setInterval()定时器

window.clearInterval(intervalID);

clearinterval()方法取消了先前通过调用setInterval()建立的定时器

注意：

window可以省略
里面的参数就是定时器的标识符

JS执行机制

JS是单线程

JS语言的一大特点就是单线程，也就是说，同一时间只能做一件事。

同步和异步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步：在做一个任务的同时做其他任务。

同步任务：同步任务都在主线程上执行，形成一个执行线。

异步任务：JS异步是通过回调函数实现的。

一般而言，异步任务有三中类型：

普通事件，如click、resize等
资源加载，如load、error等
定时器，包括setInterval、setTimeout等

执行顺序

先执行执行栈中的同步任务
异步任务(回调函数)放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统根据次序读取任务队列中的异步任务，被读取任务结束等待状态进入执行栈

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

Window Location Href

location.href 属性返回当前页面的 URL。

document.write(location.href);

Window Location Pathname

location.pathname 属性返回 URL 的路径名。

document.write(location.pathname);

Window Location Assign

location.assign() 方法加载新的文档。

<html>
<head>
<script>
function newDoc()
  {
  window.location.assign("http://www.w3cschool.cc")
  }
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newDoc()">

</body>
</html>

navigator对象

window.navigator 对象包含有关访问者浏览器的信息。

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统

history对象

window.history 对象包含浏览器的历史。

Window History Back

history.back() 方法加载历史列表中的前一个 URL。

<html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

Window History Forward

history forward() 方法加载历史列表中的下一个 URL。

<html>
<head>
<script>
function goForward()
  {
  window.history.forward()
  }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

m0_63483865

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
BOM基础

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且没个对象都提供了很多方法与属性。BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。window对象是浏览器的顶级对象window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本事件、CSS文件等)，就调用的处理函数。注意：window.onresiz
复制链接

扫一扫