BOM：Browser Object Model 浏览器对象模型
Window提供的一些操作浏览器的属性或方法
1、BOM 第一部分---操作直属于window下的BOM方法
window.open(页面的地址url,打开的方式) 方法---打开一个新的窗口(页面)
如果url为空，则默认打开一个空白页面
如果打开方式为空，默认为新窗口方式打开
【返回值：返回新打开的窗口的window对象】
aInput[0].onclick = function(){
//window.open(‘http://www.baidu.com‘,‘_self‘);
opener = window.open();
//alert(opener == window); //false
opener.document.body.style.background = ‘red‘;
}
//会有跨域的问题,比如wo给出百度的路径,但我不可能改变百度页面的背景颜色
window.close()方法---关闭当前window代指的窗口
不同浏览器会有不同的效果,可以关闭在本窗口通过js方法打开的窗口
FF 不支持该方法
IE 询问用户
Chrome 默认直接关闭
aInput[1].onclick = function(){
//opener.close();
window.close(); //关闭当前window对象代指的页面
}
//老版本支持
// moveBy() 方法可相对窗口的当前坐标把它移动指定的像素[右,下] window.moveBy(50,50); //moveTo() 方法可把窗口的左上角移动到一个指定的坐标 window.moveTo(50,50);
//新版本支持 //scrollTo 直接让滚动条移动到相应的位置上 window.scrollTo(0,100); //scrollBy 在原有的滚动条位置上进行改变 window.scrollBy(0,100); //resizeTo 将浏览器的大小直接变为500*500 window.resizeTo(500,500); //resizeBy 将浏览器的大小在原有大小的基础上进行加载[刷新] window.resizeBy(20,20);
2、BOM 第二部分---操作直属于window下的四个BOM对象
[navigator、location、screen、history]
1.window.navigator -> 浏览器信息
window.navigator.appCodeName //浏览器代码名字符串表示
window.navigator.appName //返回浏览器名称
window.navigator.appVersion //返回浏览器的平台和版本信息
window.navigator.platform //返回运行浏览器的操作系统平台
window.navigator.onLine //是否连接互联网
window.navigator.userAgent
//返回由客户机发送服务器的user-agent头部的值
利用window.navigator.userAgent 判断是否是IE浏览器！！！
if(window.navigator.userAgent.indexOf(‘MSIE‘) != -1){
alert(‘我是ie‘);
}else{
alert(‘我不是ie‘);
}
2.window.location -> 浏览器地址信息[页面传值]
alert(window.location) //http://www.baidu.com:8080/my.php?uname=wangwu&&pwd=123#mediaid118
alert(window.location.href) //返回完整的URL路径 等同于 window.location
alert(window.location.protocol) //http---设置或返回当前URL的协议(http/https)
alert(window.location.host) //www.baidu.com：8080 ---设置或返回主机名和前URL的端口当号
alert(window.location.hostname) //www.baidu.com---设置和返回主机名
alert(window.location.port) //8080 端口号
alert(window.location.pathname) //my.php---设置返回当前的路径部分
alert(window.location.search) //?uname=wangwu&&pwd=123---设置获取问号开始的URL
alert(window.location.hash) //#mediaid118---设置或返回从#开始的锚点
3.window.screen -> 返回屏幕的可用宽高，以像素计，减去界面特性，比如窗口任务栏
window.screen.availWidth //可用的屏幕宽度 window.screen.availHeight //可用的屏幕高度
4.window.history -> 历史记录对象
window.history.back() //返回上一页 window.history.forward() //去下一页[必须先执行back()操作]
【注意:上述四个对象在使用时，可以不加window前缀】
3 、BOM 第三部分---文档宽高以及窗口事件
1>可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
2>滚动距离
document.body.scrollTop/scrollLeft //谷歌支持，原因是谷歌认为滚动条是body内的内容 document.documentElement.scrollTop/scrollLeft //除谷歌以外的浏览器支持
3>内容高度
document.body.scrollHeight
4>文档高度
document.documentElement.offsetHeight //除IE以外的浏览器支持,IE认为是可视区内容
document.body.offsetHeight //所有浏览器支持
5>窗口事件
【连续触发的事件并不是由次数为触发条件 而是单位时间内对象的改变作为触发条件】
onscroll:当滚动条滚动的时候触发
onresize：当窗口大小发生改变的时候触发
4、BOM 第四部分---Event事件
1>焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接受用户的输入。
我们可以通过一些方式给元素设置焦点【浏览器端和代码端】
1. 点击
2. tab
3. js
【能够响应用户操作的元素才有焦点(例如：div元素就没有)】
onfocus：当元素获取到焦点的时候触发
onblur：当元素失去焦点的时候触发
Obj.focus() 给指定的元素设置焦点
Obj.blur() 取消指定元素的焦点
Obj.select() 选择指定元素里面的内容【选中的只能是可交互的文本内容】
2> Event对象【核心】：当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象内，供我们在需要的时候调用。【类似飞机-黑匣子】--必须在一个事件调用的函数内使用
1.兼容：
[ie/chrome ：event是一个内置全局对象]
标准下：事件对象是通过事件函数的第一个参数传入;如果一个函数是被事件调用的，那么，这个函数定义的第一个参数就是事件对象[event对象]
非标准浏览器[IE6/7...]:没有标准浏览器的规定
解决方案：var ev = ev || event； [ev 是事件函数的第一个参数]
2.事件函数：判断函数是不是事件函数，不在创建的时候决定，而在调用的时候决定
3.Event对象内的属性或方法
clientX[Y]:当一个事件发生的时候，鼠标到页面可视区的距离 左[上]
【和上面的滚动距离一起使用】
4. 事件流
事件冒泡：当一个元素接收到事件以后，会把他接受到的所有事件传播给他的父级[如果父级无该事件处理机制，则继续想上执行，层层递进]，一直到顶层window,我们称之为事件冒泡！【默认冒泡】
<style> div{padding:40px;} div1{background:red;} div2{background:green;} div3{background:blue;position:absolute; top:20px;} </style> <body> <div id=‘div1‘> <div id=‘div2‘> <div id=‘div3‘></div> </div> </div> </body> <script> window.onload = function(){ //onload---事件函数绑定 给元素加事件【正确叫法：给元素加事件处理函数】 var oDiv1=document.getElementById(‘div1‘); var oDiv2=document.getElementById(‘div2‘); var oDiv3=document.getElementById(‘div3‘); function fun1(){ alert(this.id); } oDiv1.onclick = fn1; oDiv2.onclick = fn1; oDiv3.onclick = fn1; } </script>
阻止冒泡：当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;[默认为false]---会阻止当前对象的当前事件的冒泡，阻止向上递进
事件绑定：
第一种：obj.onclick = fun; 一个页面绑定多个事件时会覆盖
第二种：给一个对象的同一个事件判定多个不同的函数出现第二种形式
ie：obj.attachEvent(事件名称,事件函数)
1. 没有捕获
2. 事件名称有on
3. 事件函数执行的顺序：标准ie_》正序 非标准ie_》逆序
4. this指向window
/*衍生解决this指向问题
fn1.call() //调用函数 fn1() == fn1.call()
call() 函数下的一个方法，call方法第一个参数可以改变函数执行过程中的内部this指向，call方法 从第二个参数开始就是函数原来的参数列表
第一个参数为null 表示不改变this指向
*/
//IE 标准下：先执行fn1,后执行fn2 非标准下：先执行fn2后执行fn1
document.attachEvent(‘onclick‘,fn1); document.attachEvent(‘onclick‘,fn2); fun1(){ alert(1); } fun2(){ alert(2); }
标准浏览器：obj.addEventListener(事件名称,事件函数，是否捕获)
1. 有捕获
2. 事件名称没有on
3. 事件执行顺序：正序
4. this指向触发该事件的函数
【是否捕获】:默认是false false：冒泡 true：捕获
//顺序执行
document.addEventListener(‘click‘,fn1,false); document.addEventListener(‘click‘,fn1,false);
事件捕获: 如果有进去的事件触发了你，你就去执行这个函数方法---在浏览器上表现的形式与事件冒泡正好相反
事件捕获只有addEventListener绑定事件才会有
ture 代表进去的事件触发了你，你就去执行函数
false 代表出去的事件触发了你，你就去执行函数
oDiv1.addEventListener(‘click‘,function(){ alert(1); },false); oDiv1.addEventListener(‘click‘,function(){ alert(1); },true); oDiv3.addEventListener(‘click‘,function(){ alert(1); },false); //3 2 1 将三个div比作三个叠放在一起的砖头,div1放在最上面,添加事件就如同向div1施加力---进去的力 出来的力[反作用力]
事件取消: 取消事件的绑定函数---对应事件绑定方式
第一种：取消普通的事件绑定 document.onclick = null;
第二种：取消绑定事件的事件绑定
ie：取消指定事件的指定函数
obj.detachEvent(事件名称,事件函数);
标准：取消指定事件的(捕获方式或者冒泡方式的)指定函数
[是否捕获也是决定删除函数的条件]
obj.removeEventListener(事件名称,事件函数,是否捕获)
5.键盘事件
onkeydown：当键盘按键按下的时候触发
如果按下不抬起，那么会连续触发
触发连续时，系统会有一个停顿时间 来判断用户是否想要触发连续【导致一个问题：在游戏时，移动人物会有一个停顿 解决方案：定时器(定时器做引擎，键盘控制方向)】
onkeyup：当键盘按键抬起的时候触发
evnet.keyCode: 返回值为数字--键盘按键的值 键值【阿斯克码】
ctrlKey，shilftKey，altKey 布尔值
当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，event.ctrlKey[event.shilftKey/event.altKey]返回true 否则返回false【例子：多选事件】
6.事件默认行为
【在浏览器反键会出现列表框等。。。】
当一个事件发生的时候浏览器会自己默认做的事情
怎么阻止？当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false；
oncontextmenu: 右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发
7. 鼠标滚轮
IE/chrome: onmousewheel
event.wheelDelta [判断滚轮方向]
上:返回值为120
下:返回值为-120
Firefox: DOMMouseScroll 必须用addEventlistener绑定事件
event.detail [判断滚轮方向]
上：-3
下：3
oDiv.onmousewheel = fn; if(oDiv.addEventListener){ oDiv.addEventListener(‘DOMMouseScroll‘,fn,false); } function fn(ev){ var ev = ev || event; var b=true; //解决鼠标滚轮的兼容问题 if(ev.wheelDelta){ b=ev.wheelDelta > 0 ? true : false; }else{ b=ev.detail < 0 ? true : false; } if( b ){ this.style.height = this.offsetHeight - 10 + ‘px‘; }else{ this.style.height = this.offsetWidth + 10 + ‘px‘; } if(ev.preventDefault){ ev.preventDefault(); } return false; //阻止滚轮事件默认行为的发生--阻止的是 obj.on开头事件函数 }
【addEventListener绑定事件需要通过event下面的prevetDefault IE下的attachEvent仍旧是return false】
5、BOM 第五部分---cookie本地存储数据
当用户访问了某个网站(网页)的时候，我们就可以通过cookie来向访问者电脑上存储数据【chrome默认不能操作本地cookie】
查看本地cookie位置：FF 点击左上角-》右边选项-》选项-》删除个人cookie
*不同的浏览器存放的cookie位置不一样，也是不能通用的[储存在电脑硬盘中]
*cookie的存储是以域名形式进行区分的
*cookie的数据可以设置名字的：document.cookie = ‘名字=值‘；
*一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样
*每个cookie存放的内容大小也是有限制的，不同的浏览器存放的大小不一样
我们通过document.cookie来获取当前网站下的cookie的时候，得到字符串形式的值，它包含了当前网站下所有地点cookie 它会把所有的cookie通过一个分号[&]+空格的形式串联起来
document.cookie = ‘username=leo‘; alert(document.cookie);
如果我们想长时间存放一个cookie，需要在设置这个cookie的时候给他设置一个过期的时间：document.cookie = ‘名称=值;expires=‘+时间;[字符串格式的时间 否则IE不兼容]
//错误写法 oDate 默认是以毫秒为计数单位,所以保存的cookie瞬间清空 var oDate = new Date(); document.cookie = ‘username=leo;expires=‘ + oDate; //设置清空的时间 alert(document.cookie); //调用时 时间已经超过设置的时间 //正确方法 var oDate = new Date();
oDate.toGMTString(); //②
oDate.setDate(oDate.getDate()+5); //通过setDate指定当前对象的-号数[年月日中的日] IE下获取的是对象不兼容 通过②转换为string
内容最好编码【可能出现问题，特殊字符可能丢失】，encodeURL
输出时用decodeURL解码
document.cookie = ‘username‘+encodeURL(‘leo\n你好‘); alert(decodeURL(document.cookie)); // \n 表示换行
【cookie封装】
//设置时间封装 function setCookie(key,value,t){ var oDate = new Date(); oDate.setDate( oDate.getDate()+t ); documen.cookie = key + ‘=‘ + value + ‘expires=‘ + oDate.toGMTstring(); } //获取单个cookie封装 function getCookie(key){ var arr1 = document.cookie.split(‘;‘); for(var i=0;i<arr1.length;i++){ var arr2 = arr1[i].split(‘=‘); if(arr2[0] == key){ return decodeURL(arr2[1]); } } } //移除cookie 设置时间为昨天 function removeCookie(key){ setCookie(key,‘‘,-1); }
【cookie应用:用户名登入】
<body>
<input type=‘text‘ id=‘username‘>
<input type=‘button‘ value=‘登入‘ id=‘login‘>
<input type=‘button‘ value=‘删除‘ id=‘del‘>
</body>
<script>
var oUsername=document.getElementById(‘username‘);
var oLogin=document.getElementById(‘login‘);
var oDel=document.getElementById(‘del‘);
if(getCookie(‘username‘)){
oUsername.value = getCookie(‘username‘);
}
oLogin.onclick = function(){
alert(‘登入成功‘);
setCookie(‘username‘,oUsername.value,5);
}
oDel.onclik = function(){
removeCookie(‘username‘);
oUsername.value = ‘‘;
}
</script>
