js BOM JavaScript - 锐客网

BOM 1.BOM简介
BOM是浏览器对象模型,它提供了独立于内容而浏览器窗口进行交互的对象,核心是window;
BOM由一系列相关的对象构成,每个对象有很多方法和属性;
BOM包含DOM;
window包括(document, location , navigation , screen , history);
2.顶级对象window
window对象是浏览器顶级对象;
1.它是js访问浏览器窗口的一个接口;
2.它是一个全局对象,定义在全局作用域中的变量,函数都会成为window对象的属性和方法;
3.window对象事件
3.1页面加载事件(两种) 3.11

window.onload = function(){} 或者window.addEventerListener('load',function(){})

window.load是窗口加载事件,当文档内容加载完毕会触发该事件(包括图像,脚本文件,…),就调用的函数;
注意:
1.用window.load可以把js代码写到页面元素上方,由于onload是等页面内容全部加载完毕,再去执行处理函数;
2.window.load传统的注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准;
3.使用addEventListener 没有限制;
3.12(ie9+支持)

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件触发时,仅当DOM加载完毕,不包括样式表,图片,flash…;
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适;
3.2调整窗口大小事件

window.onresize = function({}) window.addEventListener('resize',function(){})

window.onresize是调整窗口大小加载事件,当触发就调用的处理函数;
只要窗口大小发生像素变化就会触发该事件;
这个事件经常用在响应式布局 window.innerWidth 当前屏幕宽度;
4.定时器(两个)
4.1 setTimeout() window.setTimeout(调用函数,[延迟的毫秒数]);
setTimeout() 这个调用函数也被称为回调函数 callback;
注意:
1.window可以省略;
2.这个调用函数可以直接写函数,或者写函数名或者字符串 ‘函数名()’ 三种形式;
3.延迟毫秒数省略默认是0, 如果写,必须是毫秒数;
4.由于定时器可能要用到很多,记得给定时器赋值一个标识符;
停止定时器
window.clearTimeout(timeoutID)
clearTimeout() 方法取消了前边通过调用setTimeout() 建立的定时器;
【js BOM】注意:
1.window可以省略;
2.里面的参数就是定时器的标识符;
4.2 setInterval()定时器

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval()方法重复调用一个函数,每个这个时间,就去调用一次回调函数;
注意:
1.window可以省略;
2.这个调用函数可以直接写函数,或者写函数名或者字符串 ‘函数名()’ 三种形式;
3.延迟毫秒数省略默认是0, 如果写,必须是毫秒数,表示每隔多少毫秒就自动调用这个函数;
4.因为定时器可能有很多,记得给定时器赋值一个标识符;
5.第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次;
停止定时器

window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用setInterval()建立的定时器;
注意: window可以省略; 里面参数就是定时器的标识符;
倒计时

> span { display: inline-block; width: 50px; height: 50px; background-color: #000; color: #fff; line-height: 50px; text-align: center; }.box { width: 300px; height: 100px; margin: 100px auto; } class="days">天 class="hours">时 class="minutes">分 class="seconds">秒 > var box = document.querySelector('.box'); var day = box.children[0]; var hours = box.children[1]; var minutes = box.children[2]; var seconds = box.children[3]; function countDown() { //当前时间距离1970的毫秒数 var date = +new Date(); //目标时间 var now = +new Date('2099-11-11 00:00:00'); var leadTime = (now - date) / 1000; var d = parseInt(leadTime / 60 / 60 /24); var h = parseInt(leadTime / 60 /60 % 24); var m = parseInt(leadTime / 60 % 60); var s = parseInt(leadTime % 60); d = d < 10 ? '0' + d : d; h = h < 10 ? '0' + h : h; m = m < 10 ? '0' + m : m; s = s < 10 ? '0' + s : s; day.innerHTML = d ; hours.innerHTML = h ; minutes.innerHTML = m; seconds.innerHTML = s ; } countDown(); setInterval(countDown,1000);

5.this指向
this的指向在函数定义的时候确定不了,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是哪个调用它的对象;
1.全局作用域或者普通函数中this指向全局对象window;
2.定时器里边的this指向window;
3.方法调用中谁调用this指向谁;
4.构造函数中this指向构造函数的实例;
6.loaction对象
location属性用于获取或者设置窗体的URL,并且可以用于解析URL,这个属性返回的是一个对象,也被称为location对象;
6.1URL URL:统一资源定位符(Uniform Resource Locator,URL)是互联网标准资源的地址,互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件位置以及浏览器应该怎么处理它;
组成

protocol:通信协议常用的是http, ftp , maito......; host:主机(域名) ; port:端口号可选,省略时使用的方案的默认端口http的默认端口为80; path:路径由零或多个'/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址; query:参数以键值对的形式,通过&符号分开; fragment:片段 #后面内容常用于链接锚点;

6.2 location对象的属性

location.href获取或者设置整个URL; location.host返回主机(域名); location.port返回端口号如果未填写空字符串; location.pathname 返回路径; location.search返回参数; location.hash返回片段 #后面内容常用于链接锚点;

6.3 location对象常见方法

location.assign() 跟href一样,可以跳转页面(也被称为重定向页面); location.replace() 替换当前页面,不记录历史,不能后退页面; location.reload() 重新加载页面,相当于刷新按钮或者 f5如果参数为true 强制刷新;

7.navigator 对象
navigator 对象包含有关浏览器的信息;
判断用户用哪个终端打开页面,实现跳转;

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.hrefhttps://www.it610.com/article/= ""; //手机 } else { window.location.hrefhttps://www.it610.com/article/= ""; //电脑 }

8.history对象
用于与浏览器历史记录进行交互,该对象包含用户(在浏览器串口中) 访问过的URL;
8.1 history对象方法