javaScript BOM
2020年6月29日- 整个浏览器就是一个BOM,把浏览器当做对象看待
- BOM的顶级对象是window
- BOM学习的是浏览器窗口交互的一些对象
- BOM包含DOM
- BOM(browser Object Model)浏览器对象模型,他提供了独立内容而与浏览器窗口进行交互的对象,其核心对象是window
- BOM是由一系列相关对象构成,并且每个对象都提供了很多方法和属性
window对象是浏览器的顶级对象,它具有双重角色
- 它是js访问浏览器窗口的一个接口
- 它是一个全局对象,定义在全局作用域的变量,函数都会成为window对象的属性和方法
- 调用的时候可以省略window
常用事件
1 2 3 4 5 6 |
//传统页面加载完毕执行 ,可以写多次 window.addEventListener('load',function () { }) //dom加载完毕I9以上支持 window.addEventListener('DOMContentLoaded',function () {}) //调整浏览器大小 window.addEventListener('reset',function () {}) |
计时器
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//倒计时器 var sto1 = setTimeout(function () { console.log(11) }, 1000) //停止倒计时 clearTimeout(sto1) //循环定时器每过两秒执行一次 var siv1 = setInterval(function () { console.log(11); },2000) //停止循环计时器 clearInterval(siv1) |
计时器案例(短信发送倒计时)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var time = 60; var siv = null; var btn = document.querySelector("button") btn.addEventListener('click',function () { //禁用开启 btn.disabled = true; siv = setInterval(function () { if (time == 0) { time = 60; btn.disabled = false; btn.innerHTML = '发送'; clearInterval(siv) }else{ btn.innerHTML = '剩余时间' + time + '秒'; time--; } }, 1000) }) |
this 指向问题
- 一般情况下this的最终指向的是哪个调用它的对象
- 全局作用域或普通函数中,this指向全局对象window
- 对象方法调用中,那个对象调用this指向那个对象
- 构造函数中this指向构造函数的实例
js执行机制
- 限执行栈中的同步任务
- 异步任务(回调函数)放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕,系统就会按照次序读取任务队列中的异步任务,被读取的异步任务结束等待,进入执行栈,开始执行
location对象
window对象给我们提供了一个location属性用户获取或这只窗体的URL,并且可以用于解析URL.因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象
location对象常用属性和方法
1 2 3 4 5 6 7 8 9 |
location.href //获取整个URL (重点) location.host //返回域名 location.port //返回端口号 未写返回空字符串 location.pathname //返回路径 location.search //返回参数 (重点) location.hash //返回片段 #后面的锚点 location.assign() //跟href一样,可以跳转页面 location.replace() //替换当前页面,不记录历史,所以不能后退 location.reload() //重载页面相当于刷新页面 |
Navigator对象
navigator对象包含有关浏览器的信息,他有很多属性,我们最常用的就是userAgent,该属性可以返回由客户端发送服务器的user-agent头部值
判断设备跳转链接代码
1 2 3 |
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 = "../H5/index.html"; //手机 } |
history对象
window对象提供给我们一个history对象,与浏览器历史记录进行交互.该对象包含用户(在窗口浏览中)访问过的URL
history对象常用属性和方法
1 2 3 |
history.forward() //按照历史记录前进 history.back() //按照历史记录后退 history.go() // -n 为后退 +n为前进 n代表任意数值 |