JavaScript - BOM
2022/1/20 9:12:28
本文主要是介绍JavaScript - BOM,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
BOM
1 什么是BOM
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
2 BOM的结构
在 BOM 中包含了 DOM,整个 BOM 结构如下:
3 window对象
window 对象是浏览器的顶级对象,它具有双重角色。
- 它是 JavaScript 访问浏览器窗口的一个接口对象。
- 它是一个全局对象,所有定义在全局作用域的变量、函数都是它的属性或方法。
由于所有全局属性和方法都属于 window 对象,因此在调用时是可以省略 window 的。如调用 alert() 方法时,可以写成 window.alert(),但通常都会直接调用 alert() 方法即可。
function myFunction1(){ console.log('hello'); } window.myFunction1(); console.log(window)
4 常用的方法
4.1 alert()
用于在页面中弹出一个警告框,一般用于程序调试。
使用语法:
window.alert(提示信息);
示例:
alert('start') window.alert('end')
4.2 confirm()
消息确认提示框,一般用于删除时进行确认,防止误删除。这个方法可以给定提示信息,执行后会返回一个布尔类型的值。
使用语法:
var 返回值 = confirm(提示信息);
示例:
var f = confirm('你确定要删除么?') console.log(f); if (confirm('你确定要删除么?删除后不能恢复!')) { console.log('已经成功删除!') }
说明:confirm() 方法执行后,会返回一个布尔类型的值,根据这个值我们可以进行相应的操作。
5 常用的事件
5.1 页面加载
事件 | 说明 |
---|---|
window.onload = function(){} window.addEventListener('load', function(){}) |
传统方式加载 监听事件方式加载 |
window.addEventListener('DOMContentLoaded', function(){}) | 监听事件方式加载 |
window.onload 是页面加载事件,当文档内容(包括图像、脚本文件、CSS 样式文件等)完全加载完成后会触发该事件——即调用处理函数。window.onload 是传统事件注册方式,只会调用一次,如果在页面中写了多个该事件,只会执行最后一个加载事件。
使用示例:
window.onload = function () { console.log('页面加载完成!') };
5.2 调整窗口大小
当调整页面窗口大小时,会触发 onresize 事件,该事件语法如下。
window.onresize = function(){ }
注意:
- 只要窗口大小发生像素变化时就会触发此事件。
- 当使用这个事件来实现响应式布局时可以使用 window.innerWidth 属性获取当前屏幕宽度。
演示案例:
window.onresize = function () { console.log('当前窗口宽度为:' + window.innerWidth); console.log('当前窗口高度为:' + window.innerHeight); };
6 定时器方法
window 对象中提供了两种定时器方法。
- setTimeout()
- setInterval()
6.1 setTimeout()
setTimeout() 定时器是延迟指定时间(毫秒数)就会执行回调函数。
语法如下:
window.setTimeout(回调函数, [延迟执行毫秒数])
使用此定时器需要注意如下事项:
- window 对象可以省略
- 回调函数可以直接写在定时器方法内也可以只写函数名
- 延迟执行时间的单位是毫秒,默认为 0 表示立即执行回调函数
- 一般会给定时器指定一个名称
使用示例:
<script> console.log('你好') setTimeout(function(){ console.log('hello') }, 2000) console.log('大家上午好!') console.log('-----------'); function fn(){ console.log('回调函数的输出'); } setTimeout(fn, 2000); </script>
需求:希望点击按钮后,结束定时器的运行。
<script> // 点击按钮时结束定时器运行 var timer = null; // 句柄对象,用于获取定时器对象 function btnOnClick(){ // 删除定时器对象 clearTimeout(timer); } var index = 0; function fn() { console.log(index++); timer = setTimeout(fn, 2000); } timer = setTimeout(fn, 2000); </script>
说明:我们可以在定义定时器对象时,给它指定一个引用名称,通过这个引用名称,我们就可以根据自己的业务逻辑来结束这个定时器的运行。
结束定时器的运行需要使用 window 对象中的 clearTimeout() 方法,这个方法的参数就是定时器的引用对象。
6.2 setInterval()
setTimeout() 是指定时间之后执行,如果想每隔多少时间就执行一次,就需要使用 setInterval() 定时器了。
语法如下:
window.setInterval(回调函数, [间隔执行时间毫秒数])
示例:
setInterval(function () { console.log('hello'); }, 2000);
使用此定时器需要注意如下事项:
- window 对象可以省略
- 回调函数可以直接写在定时器方法内也可以只写函数名
- 间隔执行时间的单位是毫秒,默认为 0 表示立即执行回调函数
- 一般会给定时器指定一个名称
- 第一次执行也是延迟指定毫秒之后执行,之后是每隔指定毫秒数就执行一次
说明:上例中会每隔 2 秒就会执行输出一次 hello 字符串。
setTimeout 和 setInterval 的区别:
setTimeout 是延迟指定的毫秒数后执行一次,而 setInterval 是延迟指定的毫秒数后反复执行。
如果希望 setTimeout 实现 setInterval ,那么需要在 setTimeout 的回调函数中再次调用自己才可以。
可以给 setInterval 定义一个名称,同时可以利用这个名称来结束定时任务的执行。
<script> // 需求:当 index 的值达到 5 时,就结束。 var timer = null; var index = 1; timer = setInterval(function () { if (index === 5) clearInterval(timer); console.log(index++); }, 1000); </script>
7 location对象
7.1 什么是 location
window 对象中提供了 location 属性,该属性用于获取或设置浏览器地址栏中的 URL 值。这个获取或设置属性后会返回一个对象,所以将这个属性称为 location 对象。
URL(Uniform Resource Locator)叫统一资源定位符,是互联网上标准资源的地址。它由以下几部分组成。
组成 | 说明 |
---|---|
protocol | 协议,如:http、https、ftp等 |
host | 主机(域名),如:www.baidu.com |
port | 端口号,如:80、8080、3306等 |
path | 路径,由零个或多个'/'隔开的字符串,一般表示主机上一个目录或文件 |
query | 参数,以键值对形式显现,多个使用 & 号连接 |
fragment | 片段,以 # 号后面内容,常用于锚点 |
示例:
<form> <input type="text" name="account" placeholder="账号"> <input type="password" name="pwd" placeholder="密码"> <input type="submit" value="提交"> </form> <script> console.log(location); console.log(location.protocol); // 协议 console.log(location.host); console.log(location.hostname + ', ' + location.port); console.log(location.href); console.log(location.search); </script>
7.2 location 属性
location 对象中提供了以下属性。
属性 | 返回值 |
---|---|
href | 获取或设置 URL |
host | 返回主机名 |
port | 返回端口号 |
pathname | 返回路径 |
search | 返回参数 |
hash | 返回片段 |
示例:把请求参数保存到对象中。如:把 user=xaoupeng&pwd=123456 保存到一个对象中。
<form> <input type="text" name="account" placeholder="账号" value="xaoupeng"> <input type="password" name="pwd" placeholder="密码" value="123"> <input type="text" name="code" placeholder="验证码" value="abc1"> <input type="submit" value="提交"> </form> <script> // 需求:把请求参数保存到对象中。如:把 user=xaoupeng&pwd=123 保存到一个对象中。 function getSearchString() { // 1. 通过 location 的 search 属性来获取请求的参数列表 // '?account=xaoupeng&pwd=123' var queryString = location.search; // 1.1 判断请求参数是否存在 queryString = queryString.length > 0 ? queryString : ''; // 2. 去掉字符串前的 ? 号 // 'account=xaoupeng&pwd=123' queryString = queryString.substr(1); // console.log(queryString); // 3. 把多参数进行切割 // ['account=xaoupeng', 'pwd=123'] var obj = {}; if (queryString.indexOf('&') !== -1) { var parameters = queryString.split('&') // 4. 遍历数组,然后再把参数名和参数值进行切分,并把它赋给对象。 var items = null; for (var i = 0; i < parameters.length; i++) { //console.log(parameters[i]); items = parameters[i].split('=') //console.log(items); obj[items[0]] = items[1] } } //console.log(obj); return obj; } var result = getSearchString(); console.log(result); </script>
7.3 location 方法
除了上面的属性外,location 中还提供了如下方法。
方法 | 返回值 |
---|---|
assign() | 跟 href 一样可以跳转页面 |
replace() | 替换当前页面,不记录历史无法进行后退 |
reload() | 重新加载页面,相当于按 f5,如果参数为 true,相当于按 ctrl + f5 |
方法使用示例:
<script> // location.href = 'https://www.baidu.com/' location.assign('https://www.baidu.com') location.replace('a.html') location.reload(); </script>
8 navigator 对象
navigator 对象包含有关浏览器的信息。
查看 navigator 对象所有信息:
console.log(navigator)
下面以判断浏览器是否安装了某个插件为例,来说明其用法。
在 navigator 对象众多属性中,有一个属性叫 Plugins,里面存放的就是插件信息,可通过如下方式进行查看:
console.log(navigator.plugins);
下面通过封装一个方法,来判断是否安装了某个插件,如果安装则返回 true,否则返回 false。
<script> function hasPlugin(name) { name = name ? name.toLocaleLowerCase() : ''; console.log('name = ' + name); var plugins = navigator.plugins; for (var i = 0; i < plugins.length; i++) { //console.log(typeof plugins[i]); console.log(plugins[i].name); return plugins[i].name.toLocaleLowerCase().indexOf(name) !== -1 ? true : false; } } var r = hasPlugin('pdf') console.log(r); </script>
在 navigator 对象中还有一个叫 userAgent 属性比较常用。它一般用于获取浏览器的信息。
该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面代码可以判断用户由那个终端打开页面,实现跳转
//console.log(navigator.userAgent) if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { //window.location.href = "https://m.xxx.com"; //手机 } else { //window.location.href = "https://www.xxx.com"; //电脑 }
9 history 对象
window 对象还提供了一个 history 对象,它与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。方法如下表所示。
方法 | 作用 |
---|---|
back() | 后退 |
forward() | 前进 |
go(参数) | 前进和后退,参数为正整数表示前进,参数为负整数表后退 |
示例:
<a href="b.html">b.html</a> <script> console.log('-----------') //history.forward(); history.go(1) </script> <a href="a.html">a.html</a> <script> //history.back(); history.go(-1) </script>
这篇关于JavaScript - BOM的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南