JavaScript学习笔记之BOM篇,认识几种常见的浏览器对象
BOM(Browser Object Document)即浏览器对象模型,顾名思义就是为了控制浏览器的行为而出现的接口。浏览器可以做什么呢?比如跳转到另一个页面、前进、后退等等,程序还可能需要获取屏幕的大小之类的参数。而BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面,只需要location.href = "http://www.xxxx.com";
这个 location 就是 BOM 里的一个对象。
BOM提供了许多独立于内容而与浏览器窗口进行交互的对象,包括 Window、Navigator、Screen 、History、Location、弹出框、定时器等等,其核心对象是Window。而Window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一个Global(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都以window作为其global对象。
下面为大家介绍一下这几种常见的浏览器对象,以及他们的属性和方法。
window对象
Window 对象是 JavaScript 层级中的顶层对象,代表一个浏览器窗口或一个框架。Window 对象会在 < body> 或 < frameset> 每次出现时被自动创建。
属性和方法 | 描述 |
---|---|
closed | 返回窗口是否已被关闭。 |
innerheight | 返回窗口的文档显示区的高度。 |
innerwidth | 返回窗口的文档显示区的宽度。 |
outerheight | 返回窗口的外部高度。 |
outerwidth | 返回窗口的外部宽度。 |
status | 设置窗口状态栏的文本。 |
self | 返回对当前窗口的引用。等价于 Window 属性。 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
close() | 关闭窗口 |
scrollBy() | 按照指定的像素值来滚动内容。 |
scrollTo() | 把内容滚动到指定的坐标。 |
resizeBy() | 按照指定的像素调整窗口的大小。 |
resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
window监听:浏览器窗口大小的改变对页面产生的影响。
<style>div {width: 200px;height: 200px;background-color: violet;}
</style>
<script>window.addEventListener('load', function () {var div = document.querySelector('div');window.addEventListener('resize', function () {if (window.innerWidth <= 800) {div.style.display = 'none';} else {div.style.display = 'block';}})})
</script>
<div></div>
注意:只要窗口大小发生变化,就会触发这个事件,我们经常利用这个事件完成响应式布局。
Navigator对象
navigator`对象包含大量有关Web浏览器的信息,在检测浏览器及操作系统上非常有用。
属性 | 描述 |
---|---|
appCodeName | 获取浏览器代码名 |
appName | 获取浏览器步伐名 |
appMinorVersion | 获取浏览器补钉版本 |
cpuClass | 获取cpu类型 |
platform | 获取操作体系类型 |
appVersion | 获取浏览器版本(包括体系版本) |
systemLanguage | 获取客户体系语言 |
onLine | 获取用户否在线的信息 |
Screen对象
属性 | 描述 |
---|---|
width | 获取屏幕宽度 |
height | 获取屏幕高度 |
colorDepth | 获取屏幕颜色深度 |
availWidth | 获取可用宽度(除去任务栏的宽度) |
availHeight | 获取可用高度(除去任务栏的高度) |
document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height)
document.write("可用区域大小: ")
document.write(screen.availWidth + "*" + screen.availHeight)
History对象
属性和方法 | 描述 |
---|---|
history.length |
返回历史列表中的网址数 注意:IE和Opera从0开始,而Firefox、Chrome和Safari从1开始。 |
history.back() | 在浏览历史里后退一步 |
history.forward() | 在浏览历史里前进一步 |
history.go(i) | i>0表示向前跳转,i<0表示向后跳转 |
<a href="https://www.baidu.com">百度一下</a>
<button onclick="prew()">上一页</button>
<button onclick="next()">下一页</button>
<button onclick="info()">获取url</button>
<script>function prew(){window.history.back();}function next(){window.history.go(1);}function info() {console.log(window.location);}
</script>
Location对象
window 对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为Location属性返回的是一个对象,所以我们将这个属性也称为对象。
属性和方法 | 描述 |
---|---|
location.href | 获取或者设置整个URL |
location.portocol | 返回URL中使用的协议 |
location.host | 返回服务器名称和端口号 |
location.hostname | 返回服务器名称 |
location.port | 返回端口号(如果没有,返回空字符串) |
location.pathname | 返回路径 |
location.search | 返回参数(查询字符串) |
location,hash | 如果URL包含#,返回该符号之后的内容 |
locatio.assign() | 跳转页面(也称为重定向页面) |
location.replace() | 替换当前页面(因为不记录历史,所以不能后退页面) |
location.reload() | 重新加载页面,相当于刷新按钮 |
<button class="assign">跳转页面</button>
<button class="replace">替换页面</button>
<button class="reload">刷新</button>
<script>document.querySelector('.assign').addEventListener('click',function(){// 记录浏览历史,可以实现后退功能location.assign('http:www.itcast.cn');});document.querySelector('.replace').addEventListener('click',function(){// 不记录浏览历史,不能后退location.replace('http:www.itcast.cn')});document.querySelector('.reload').addEventListener('click',function(){location.reload()});
</script>
弹出框
方法 | 描述 |
---|---|
alert(“message”) | 弹出一个具有OK按钮的系统消息框,显示指定的文本。 |
confirm(“Are you sure?”) | 弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值。 |
prompt(“What’s your name?”, “Default”) | 提示用户输入信息,将文本框中的值作为函数值返回。 |
定时器
setTimeout()
setTimeout() 我们称之为回调函数,普通函数是按照代码顺序直接调用,而这个函数,需要等待时间,时间到了之后才去调用这个函数,因此称为回调函数。简单理解:回调,就是回头调用的意思,上一件事干完,再回头调用这个函数,比如element.οnclick=function(){}和 element.addEventlistener(‘click’,function(){} )里面的函数都是回调函数。语法规格为:setTimeout(调用函数,延迟时间)
。
setTimeout(function(){console.log('时间到了');
},2000);
function callback() {console.log('时间到了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
<script>var flag = setTimeout(function(){console.log(new Date().getTime());},3000)document.querySelector("#clear_timeout").onclick = function(){clearTimeout(flag);}
</script>
<button id="clear_timeout">取消超时调用</button>
setInterval()
<script>var index = setInterval(() => {console.log(new Date().getTime());}, 2000);console.log("index:",index)document.querySelector("#clear_interval").onclick = function(){clearInterval(index);console.log("取消成功");}}
</script>
<button id="clear_interval">取消间歇调用</button>
拓展1:使用超时调用来模拟间歇调用。
var num=0;
var max=10;
function incrementNum(){num++;if(num<max){alert(num);setTimeout(incrementNum,500);}else{alert("Done"+num);}
}
setTimeout(incrementNum,500);
拓展2:设计一个定时发送按钮,要求按钮中提示剩余时间。
<button>发送</button>
<script>var btn = document.querySelector('button');var time = 3; // 定义剩下的秒数btn.addEventListener('click', function () {btn.disabled = true;var timer = setInterval(function () {if (time == 0) {// 清除定时器并且复原按钮clearInterval(timer);btn.disabled = false;//修改按钮中的内容btn.innerHTML = '发送';time = 3; } else {btn.innerHTML = '还剩' + time + '秒'time--;}}, 1000)})
</script>
JavaScript学习笔记之BOM篇,认识几种常见的浏览器对象相关推荐
- JavaScript学习笔记之入门篇
JavaScript学习笔记之入门篇 JavaScript引入 1. 页面级 js: 2. 外部js文件: JavaScript变量 1. 变量的作用: 2. 声明变量: 3. 变量赋值: 4. 单一 ...
- JavaScript学习笔记之DOM篇,带你全面了解什么是DOM
DOM在前面的JavaScript学习笔记(一)–JS基础里简单提到过,它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型,是JavaScript的重要组成部分,现在带大家详细了解 ...
- JavaScript学习笔记(BOM编程案例)
文章目录 1.window中的open.close.alert.confirm方法 2.history和location 2.1 history中的back和go方法 2.2 location的hre ...
- JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- JavaScript学习笔记(五)
JavaScript学习笔记(五) ①Array类 本地对象 ②Date类 ①Global对象 对象的类型 内置对象 ②Math对象 宿主对象 今天继续学习JS中的对象,昨天内置对象Global对 ...
- Java程序猿的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端 学习路线 笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
- JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
最新文章
- COS 访谈第 19 期:张志华教授
- 特约专栏丨王耀南院士:人工智能赋能无人系统
- git clone的时候报error: RPC failed; result=18错误
- 大数据产业正处在蓬勃发展的孕育期与机遇期
- php中条件查询语句,thinkphp3.2框架中where条件查询用法总结
- Linux中OBS在Wayland环境下黑屏只显示鼠标的应对措施
- ARM嵌入式平台性能测试
- 计算机应用技能大赛海报,2017年计算机应用工程系技能大赛汇总 ——大赛点亮人生 技能改变命运...
- python3中的正则模块
- 什么是分布式微服务架构?-开课吧
- 跨平台的PHP+MySQL_跨平台的PHP+MySQL
- winpe加载raid_WinPE如何添加RAID驱动|WinPE添加RAID驱动教程
- JAVA远程声卡,Delphi带多声道声卡(ASIO)
- 分享从零开始学习网络设备配置--2.1 交换机基本配置
- teamviewer13试用期已到期,错装商业版怎么还原成个人版?
- 小米、Vivo、Oppo后台弹出界面和锁屏权限检测
- 智汀双管齐下,玩转米家HomeKit智能家居
- 1231321321
- 快手IT部门负责人受贿70万元:判18个月
- 无领导小组讨论如何带飞全组
热门文章
- c语言实现目录下文件的多选 反选,oto高清正版分享(53页)-原创力文档
- Centos 系统添加/删除用户和用户组
- 100级大橙武升级流程_DNF:女气功升级100级无暇手套,前后伤害对比。
- python删除数据库_用Python删除Cosmos数据库文档
- inno setup 中文乱码问题_解决Inno Setup制作中文安装包在非中文系统上显示乱码的问题...
- 将毫秒转换_上海科大:超强电镜技术!原子级分辨率,毫秒级可视化
- mysql连接池 golang_Golang 你一定要懂的连接池
- JavaScript简介---JS基础
- 轻松入门CAS系列(1)-轻松看懂企业单点登录的解决方案
- CountDownLatch/CyclicBarrie用法记录