JavaScript

BOM概述

BOM(Browser Object Model ): 浏览器对象模型
它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分

DOM BOM
文档对象模型 浏览器对象模型
DOM 就是把 文档 当作一个对象来看待 把 浏览器当作一个对象来看待
DOM 的顶级对象是 document BOM 的顶级对象是 window
DOM 主要学习的是操作页面元素 BOM 学习的是浏览器窗口交互的一些对象
DOM 是 W3C 标准规范 BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差

BOM的构成

bom

  • BOM 比 DOM 更大。它包含 DOM。
  • window 对象是浏览器的顶级对象,它具有双重角色
  • 它是 JS 访问浏览器窗口的一个接口
  • 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

alert()、prompt()等都是window的方法

window 对象的常见事件

窗口加载事件

window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,CSS文件等),就调用的处理函数。

两种写法:

1
2
window.onload = function(){};
window.addEventListener("load",function(){});

使用了window.onload可以把JS代码写到页面元素的上方,因为load是等页面内容全部加载完毕,再去执行处理函数

window.onload 传统注册事件方式,只能写一次,如果有多个,会以最后一个window.onload为准

如果使用addEventListener 则没有限制

load()和DOMContentLoaded()的区别:

load等页面内容全部加载完毕,包括页面dom元素,图片,flash,css等

DOMContentLoaded 是DOM加载完毕,不包含图片 flash css 等就可以执行,加载速度比load更快一些

调整窗口大小事件

window.onresize 是调整窗口大小加载事件,当触发时就调用的处理函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onresize = function() {}
window.addEventListener('resize',function(){});
//窗口变化的时候,会有变化
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);

console.log('变化了');
if (window.innerWidth <= 500) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}

})
})
</script>

定时器

window 对象给我们提供了两个定时器

  • setTimeout()
  • setInterval()

setTimeout()定时器

setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。

1
window.setTimeout(调用函数,[延迟的毫秒数]);

clearTimeout()停止定时器

clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器

1
window.clearTimeout(timeoutID)

setInterval()定时器

setInterval()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数

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

clearInterval()停止定时器

clearInterval ( ) 方法取消了先前通过调用 setInterval() 建立的定时器

1
window.clearInterval(timeoutID)

this指向

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁

全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
方法调用中谁调用this指向谁
构造函数中this指向构造函数实例

location对象

window 对象给我们提供了一个 location属性用于获取或者设置窗体的url,并且可以解析url。因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。

url

统一资源定位符(uniform resouce locator)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

url 的一般语法格式为:

1
2
3
4
protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

组成 说明
protocol 通信协议 常用的http,ftp,maito等
host 主机(域名)
port 端口号
path 路径 由零或多个'/'符号隔开的字符串
query 参数 以键值对的形式,通过&符号分隔开来
fragment 片段 #后面内容 常见于链接 锚点

location对象属性

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

location对象方法

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

navigator对象

navigator 对象包含有关浏览器的信息,它有很多属性

我们常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

下面前端代码可以判断用户是用哪个终端打开页面的,如果是用 PC 打开的,我们就跳转到 PC 端的页面,如果是用手机打开的,就跳转到手机端页面:

1
2
3
4
5
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 = ""; //手机
} else {
window.location.href = ""; //电脑
}

history对象

window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互

该对象包含用户(在浏览器窗口中)访问过的 URL。

history对象方法 作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能,参数如果是 1 前进1个页面 如果是 -1 后退1个页面