JavaScript之BOM
2022/1/26 12:34:39
本文主要是介绍JavaScript之BOM,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 一.BOM概述
- 1.什么是BOM
- 2.BOM的构成
- 3.窗口加载事件
- 4.调整窗口大小事件
- 5. 定时器
- 6.this
- 二.JS执行机制
- 1.JS是单线程
- 2.location对象
- 3.location对象的属性
- 4.location对象的方法
- 5.navigator对象
- 6.history对象
一.BOM概述
1.什么是BOM
BOM(BrowserObject Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
BOM由一系列相关的对象构成,并且每个对象都提供了很对方法和属性
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是w3c,BOM最初是Netscape浏览器标准的一部分
2.BOM的构成
BOM比DOM更大,它包含了DOM
window对象是浏览器的顶级对象,它具有双重角色。
1.它是JS访问浏览器的一个接口
2.它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法。在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如:alert( )、prompr( )等
注意:window下的一个特殊属性window.name
3.窗口加载事件
<!-- 传统的窗口加载事件 只能写一次--> window.onload = function(){} 或者 <!-- 没有限制 --> window.addEventListener(‘load’,function(){});
window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)就调用到处理函数
window.addEventListener(‘DOMContentLoaded’,function(){});
4.调整窗口大小事件
window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数
window.onresize = function(){} 或者 window.addEventListener(‘resize’,function(){});
注意:
1.只要窗口大小发生像素变化,就会触发这个事件
2.我们经常利用这个事件完成响应式布局。window.innerWidth当屏幕的宽度
5. 定时器
两种定时器
- setTimeout()
- setInterval ()
setTimeout()定时器
window.setTimeout(调用函数,[延迟的毫秒数]);
setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数
setTimeout()这个调用函数我们也称之为回调函数callback
普通函数是按照代码顺序直接调用
而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数
简单理解:回调,就是回头调用的意思,上一件事干完,再回头再调用这个函数
5秒之后自动关闭广告案例:
<img src="../BOM/ad.jpg" alt="" class ="ad"> <script> var ad = document.querySelector('.ad'); setTimeout(function(){ ad.style.display = 'none'; },5000) </script>
停止setTimeout()定时器:
window.clearTimeout(timeoutID);
1.window 可以省略
2.里面的参数就是定时器的标识符
setInterval()定时器
window.setInterval(调用函数,[间隔的毫秒数]);
setTimeout()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数
倒计时案例:
<style> div { margin: 200px; } span { display: inline-block; width: 40px; height: 40px; background-color: #333; font-size: 20px; color: #fff; text-align: center; line-height: 40px; } </style> </head> <body> <div> <span class = "hour"></span> <span class = "minute"></span> <span class = "second"></span> </div> <script> // 1. 获取元素 var hour = document.querySelector('.hour'); // 小时的黑色盒子 var minute = document.querySelector('.minute'); // 分钟的黑色盒子 var second = document.querySelector('.second'); // 秒数的黑色盒子 var inputTime = +new Date('2022-1-25 18:00:00'); // 返回的是用户输入时间总的毫秒数 countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 // 2. 开启定时器 setInterval(countDown, 1000); function countDown() { var nowTime = +new Date(); // 返回的是当前时间总的毫秒数 var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 var h = parseInt(times / 60 / 60 % 24); //时 h = h < 10 ? '0' + h : h; hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子 var m = parseInt(times / 60 % 60); // 分 m = m < 10 ? '0' + m : m; minute.innerHTML = m; var s = parseInt(times % 60); // 当前的秒 s = s < 10 ? '0' + s : s; second.innerHTML = s; } </script>
清除计时器:
发送短信案例:
发送短信<input type="number"><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);//当时间为0时销毁定时器 btn.disabled = false; btn.innerHTML = '发送'; time = 3; }else{ btn.innerHTML = '还剩下'+ time +'秒'; time--; } },1000); }) </script>
6.this
this的指向在函数定义的时候是确定不了的,只有在函数执行的时候才能确定this到底指向谁。一般情况下this的最终指向的是那个调用它的对象
1.全局作用域或者普通函数中this指向全局对象window(主营定时器里面的this指向window)
二.JS执行机制
1.JS是单线程
JavaScript语言的一大特点是单线程,同一个时间只能做一件事。这是因为JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的,比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束才会执行后一个,导致的问题是:如果JS执行的时间过长,这样会造成页面渲染不连贯,导致页面渲染加载阻塞的感觉
于是JS提出了同步和异步
JS的执行机制:
2.location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
URL:
统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它
3.location对象的属性
4.location对象的方法
5.navigator对象
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的uesr-agent头部的值
6.history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互该对象包含用户(在浏览器窗口中)访问过得URL
这篇关于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动态主题处理入门:新手必读指南