BOM
DOM事件
浏览器对象模型（Browser ）,它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了相应的属性和方法
BOM缺乏标准，javascript标准是ecma，dom的标准组织是w3c
window对象是浏览器的顶级对象，它具有双重角色
- 它是js访问浏览器窗口的一个接口
- 它是一个全局变量，定义在全局作用域的变量，函数都会变成window对象的属性和方法，在调用的时候可以省略window
- window.name是一个特殊属性，不用name来命名
属性
closed 返回窗口是否已被关闭。
document 对 Document 对象的只读引用
history 对 History 对象的只读引用
innerHeight 返回窗口的文档显示区的高度
innerWidth 返回窗口的文档显示区的宽度
outerHeight 返回窗口的外部高度，包含工具条与滚动条
outerWidth 返回窗口的外部宽度，包含工具条与滚动条
screenLeft 返回相对于屏幕窗口的x坐标
screenTop 返回相对于屏幕窗口的y坐标
screenX 返回相对于屏幕窗口的x坐标
screenY 返回相对于屏幕窗口的y坐标
location 用于窗口或框架的 Location 对象
navigator 对 Navigator 对象的只读引用
onload 指定所有配置都加载完成时(图片例外)调用的函数.
pageXOffset 返回当前页面相对于窗口显示区左上角的 X 位置(body横向滚动的距离)
pageYOffset 返回当前页面相对于窗口显示区左上角的 Y 位置(body纵向滚动的距离)
screen 对 Screen 对象的只读引用
onload加载页面
-
window.onload = function() {}; window.addEventListener('load',function(){ //代码块 });window.onload是窗口加载事件，当文档全部加载完成的时候（包括文本，标签，图像，css，文件等）
注意
- 有了load就可以把代码写在页面元素的上方
- window.load传统注册方式只能写一次，如果是多次写，则只执行最后一次
- 如果是window.addEventListener()就没有限制
-
document.addEventListener('DOMContentLoaded',function(){})DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式，图片等 ie9以上支持
如果页面图片很多，onload触发可能需要花费更多的事件，影响用户体验，此时用DOMContentLoaded事件比较合适
resize窗口调整
window.onresize = function() {}
window.addEventListener('resize',function(){})
注意
- 只要窗口大小发生变化像素变化，就会触发事件
- 我们经常利用这个事件完成响应式布局，**window.innerWidth当前屏幕的宽度
方法
alert() 显示带有一段消息和一个确认按钮的警告框。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
open(url,打开方式,新窗口配置,BOOL) 打开一个新的浏览器窗口
//4个参数都可选(一般就填第一个参数)
//url:新窗口地址 打开方式:blank(默认),parent,self,top 配置(各种):一般默认 BOOL:新窗口在历史记录里面有,要不要替换
print() 打印当前窗口的内容。
prompt(tishi,value) 显示可提示用户输入的对话框。
scrollBy() 按照指定的像素值来滚动内容(前提是你的有滚动条:内容够多)
scrollTo() 把内容滚动到指定的坐标。(前提是你的有滚动条:内容够多)
setInterval(callback,times) 按照指定的周期（以毫秒计）来调用函数
setTimeout(callback,times) 在指定的毫秒数后调用函数
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
计时器
-
window.setTimeout(调用函数,时间) // 里面的函数又叫回调函数，因为这个函数需要等待时间，因此叫回调函数 var timeoutID = scope.setTimeout(code[, delay]); // code可以是字符串，但不推荐使用，和eval()一样，会有安全问题setTimeout()方法设置一个定时器，该定时器在到期后调用函数，只调用一次
注意
- window可以省略
- 这个调用函数可以直接写函数名，写函数或是次啊用字符串格式'函数名()'三种方式，不建议使用第三种
- 默认延迟时间为0，时间单位是毫秒，一秒等于一千毫秒
- 因为定时器有很多，所以经常给定时器赋值一个标识符
-
window.clearTimeout(timeoutID)clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器
注意
- window可以省略
- 里面的参数就是定时器的标识符
// 定时器生成和取消
<button>停止</button>
<script>
var time1 = setTimeout(function(){
console.log('over break')
},5000);
var button = document.querySelector('button');
button.addEventListener('click',function(){
clearTimeout(time1);
})
</script>
-
window.setInterval(调用函数,时间)重复调用很多次
注意
- window可以省略
- 这个调用函数可以直接写函数名，写函数或是次啊用字符串格式'函数名()'三种方式，不建议使用第三种
- 默认延迟时间为0，时间单位是毫秒，一秒等于一千毫秒
- 因为定时器有很多，所以经常给定时器赋值一个标识符
-
window.clearInterval(intervalID)clearInterval()方法取消了先前通过调用setInterval()建立的定时器
注意
- window可以省略
- 里面的参数就是计时器的标识符
元素对象
- element.offsetLeft:是一个只读属性，返回当前元素相对于 offsetParent 节点左边界的偏移像素值。
- element.offsetTop:是一个只读属性，返回当前元素相对于 offsetParent 节点上边界的偏移像素值。
- element.offsetParent:元素是一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的元素
<style>
img {
position: absolute;
left: 0;
top: 0;
}
</style>
<img src="../theday11/images/下载.png" alt="">
<script>
var img = document.querySelector('img');
document.addEventListener('keydown',function(event) {
var event = event || window.event; // 兼容问题，火狐浏览器找不到event的问题
var award = event.keyCode;
// console.log(img.offsetParent);
switch(award) {
case 37 : img.style.left = img.offsetLeft - 10 + 'px'; break;
case 38 : img.style.top = img.offsetTop - 10 + 'px'; break;
case 39 : img.style.left = img.offsetLeft + 10 + 'px'; break;
case 40 : img.style.top = img.offsetTop + 10 + 'px'; break;
default : break;
}
})
</script>
location对象
当前页面的url
属性:
hash 返回一个URL的锚部分//192.168.1.102:8081?name=jack&pwd=123#page1
host 返回一个URL的主机名和端口
hostname 返回URL的主机名
href 返回完整的URL
pathname 返回的URL路径名。
port 返回一个URL服务器使用的端口号
protocol 返回一个URL协议
search 返回一个URL的查询部分
方法:
assign(url) 载入一个新的文档
reload() 重新载入当前文档
replace(url) 用新的文档替换当前文档
window对象提供了location属性用于获取或设置窗体的url,并且可以用于解析url,返回的是一个对象，也称为location对象
url统一资源定位符（Uniform Resource Locator URL）是互联网标准资源的地址。互联网上的每个文档都有一个唯一的url，它包含的信息指出文件的位置以及浏览器该如何处理它
url语法
protocol://host[:port]/path/[?auery]#fragment
protocol:通信协议，常见的http ftp matio等
host:主机（域名）
port:端口 可选 省略时使用默认端口
path:路径由零或多个/符号隔开的字符串，一般来表示主机上一个目录或文件地址
query:参数 以键值对的形式通过$符号分割
fragment:片段 #后买你内容常见于链接 锚点
location对象属性
- location.href:获取或设置整个url
- location.host:返回主机
- location.port:返回端口号
- location.pathname:返回路径
- location.search:返回参数
- location.hash:返回片段
<button>跳转</button>
<script>
var button = document.querySelector('button');
var body = document.querySelector('body');
function outTime(time) {
var time1 = setInterval(function() {
if(time == 0) {
clearInterval(time1);
location.href = 'http://www.baidu.com'; // 核心
}
body.innerHTML = '倒计时' + time;
time--;
}, 1000);
}
button.onclick = function() {
var time = 5;
outTime(time);
}
</script>
location对象方法
- location.assign()：跳转页面，记录历史，所以可以返回以前的页面（也称为重定向页面）
- location.replace()：跳转页面，不记录历史
- location.reload()：重新刷新页面，相当于刷新按钮或f5，如果参数是true，则是强制刷新 ctrl+f5
navigator对象
属性:
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent 头部的值
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent,该属性可以返回由客户端发送服务器的user-agent头部的值
if(navigator.userAgent.math(/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对象
属性:
length返回访问历史列表中的网址数
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go(number|url)加载 history列表中的某个具体页面//负数后退,正数前进
- history.back()：后退功能
- history.forward()：前进功能
- go(参数)：前进后退功能，如果参数是1 前进一个页面 后退一个页面
screen
属性:
availHeight 返回屏幕的高度（不包括Windows任务栏）
availWidth 返回屏幕的宽度（不包括Windows任务栏）
height 返回屏幕的总高度
width 返回屏幕的总宽度
pixelDepth 返回屏幕的颜色分辨率（每象素的位数）
