一. BOM基础:
a) BOM:
i. browser object model浏览器对象模型
ii. 提供让JavaScript能操作浏览器窗口的相关api(方法或函数)
iii. 没有标准,不同的浏览器会有不同兼容性问题
b) window对象:
i. 浏览器窗口对象
ii. 浏览器环境下JavaScript中的顶级对象,
iii. 所有全局对象、变量、方法以及第三方拓展对象都属于window对象的属性和方法。
1. DOM
2. HTML5相关: 本地存储 音频,视频Canvas,svg
c) Window常用事件:
i. window.onload:等待所有资源都加载完再加载JavaScript代码,页面加载完事件。
ii. window. onresize:浏览器窗口大小变化时事件
// 一、Window常用事件
//用于等html节点加载完毕后再进行js对节点的渲染
window.οnlοad=function(){
// alert("哈哈哈");
}
//浏览器窗口大小变化时事件,会监听浏览器窗口的变化
window.οnresize=function(){
console.log('11');
}
d) window下常用的对象及其属性:
i. navigator:导航器对象
1. 含有浏览器相关的信息。
2. 练习:判断浏览器类型:window.navigator.userAgent
// 二、window下常用的对象及其属性:
//1、navigator:导航器对象,含有浏览器相关的信息
//appVersion返回浏览器的平台和版本信息
console.log(window.navigator.appVersion);
//userAgent返回有客户机发送服务器的user-agent头部的值,可用于判断浏览器类型
// console.log(window.navigator.userAgent);
//实例:判断浏览器的类型
function diffBrowser() {
var str = window.navigator.userAgent.toLowerCase();
var reg=/(msie|chrome|firefox|opera|safari)/g;
return str.match(reg)[0];
}
ii. Location:位置对象
1. 用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
2. window.location.href获取页面ur,跳转
3. location.relaod重新加载页面
<button id="btn1">刷新页面</button>
<button id="btn2">跳转</button>
<script>
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
oBtn1.οnclick=function(){
window.location.reload();
}
oBtn2.οnclick=function(){
window.location.href="浏览历史对象.html";
}
console.log(window.location);
console.log(window.location.href);
iii. History:浏览器历史对象
1. 包含了浏览器访问的历史记录
2. Back、go方法用来返回前一个ulr
3. 练习:返回上一页
<div>历史对象</div>
<button id="btn">返回上一页</button>
<a href="javascript:history.back()">返回</a>
<a href="javascript:history.go(-1)">返回</a>
<script>
var oBtn=document.getElementById("btn");
oBtn.οnclick=function(){
// history.back();
history.go(-1);
}
e) 窗口内部文档滚动的距离:(这个很重要,一般用作导航栏在滚动到某一位置出现或者消失)
i. IE:window.document.body.scrollTop;
ii. 非IE:window.pageYOffset
iii. 滚动视听
var oNav = document.getElementById("nav");
//导航栏到一定位置才能出现
window.onscroll = function(){
console.log(document.documentElement); //html文档
if( window.document.documentElement.scrollTop > 300 ){
oNav.style.display = 'block';
}
else{
oNav.style.display = 'none';
}
}
a) 窗口对话框
i. 警告框:alert(‘警告信息’)没有返回值
ii. 确认框:confirm(‘确认信息’)返回true/false
iii. 输入框:promt(‘输入信息’)返回输入信息/null
f) 定时器:(定好时间再执行)
i. setTimeout(function,seconds)
1. 第一个参数为回调函数
2. 第二个参数为间隔执行时间,单位:毫秒
3. 只执行一次
4. 清除方式:clearTimeout(obj)
5. 值为一个对象
6. 返回的是定时器的位置(属于第几个定时器)
ii. setInterval(function,seconds)
1. 第一个参数为回调函数
2. 第二个参数为间隔执行时间
3. 循环执行
4. 清除方式:clearInterval(obj)
5. 值为一个对象
6. 返回的是定时器的位置(属于第几个定时器)
var i = 0;
var oTime = null;
oTime=setTimeout(function(){
clearTimeout(oTime);
alert("哈哈啊哈哈");
},3000);
// 1.setTimeout(function,seconds)
//只执行一次
// var count=0;
// var time;
// function timeCount(){
// document.getElementById("text").value=count;
// count+=1;
// time=setTimeout(timeCount,1000);
// }
// function stopCount(){
// clearTimeout(time);
// }
//3、setInterval(function,seconds)
//循环执行
// 第一个参数为回调函数
// 第二个参数为间隔执行时间
var oTime = window.setInterval(function () {
console.log(++i);
if (i == 10) {
clearInterval(oTime);
}
}, 1000);