DOM和BOM-day24-个人学习笔记

DOM和BOM-day24-个人学习笔记

一、BOM：专门操作浏览器窗口的对象

1、window对象：

角色：a、充当全局对象！b、包含BOM常用对象

属性：

（1）窗口大小和定位

innerHeight/Width：文档显示区的大小
outerHeight/Width:窗口大小
pageYOffest：文档左上角到文档显示区左上角的距离

（2）分辨率

screen.height/width:桌面完整分辨率宽高
screen.availHeight/availWidth:去掉任务栏后剩余分辨率的宽高

（3）调整大小

window.resizeTo(width，height)调整到
window.resizeBy(变化的width，变化的height)

（4）位置

左上角X坐标：window.screenLeft||window.screenX
左上角Y坐标：window.screenTop||window.screenY;
将窗口移动到指定坐标：window.moveTo(x,y)
事件发生时，鼠标相对于整个屏幕的坐标：event.screenX|screenY

(5)打开新链接：4种效果

a、在当前窗口打开新链接，可后退

html:<a href="url" target="_self"></a>
js:[window.]open("url","_self")

b、在当前窗口打开新链接，禁止后退

js:location.replace("新url")

c、在新窗口打开新链接，可同时打开多个

html:<a href="url" target="_blank"></a> 
js:[window.]open("url","_blank")

d、在新窗口打开新链接，只能打开一个

html:<a href="url" target="自定义窗口名"></a>
js:[window.]open("url","自定义窗口名")

2、定时器：让浏览器按指定时间间隔反复执行同一任务

周期性定时器：让浏览器按指定时间间隔反复执行同一任务，如果不手动停止，则一直反复执行

一次性定时器：让浏览器等到一段时间间隔，执行一次任务自动停止。

建议：尽量使用一次性定时器，代替周期性定时器

如何使用：周期性和一次性用法完全相同的

（1）周期性定时器：3件事

a、动画的每一步要执行的任务（函数对象）

function step(){每一步要做的事情}

b、将一步的任务放入定时器，反复调用

timer=setInterval(step,间隔毫秒数)

c、必须用全局变量，临时存储定时器的编号

clearInterval(timer);
timer=null;

（2）一次性定时器：3件事
a、动画的每一步要执行的任务（函数对象）

function step(){每一步要做的事情//根据条件判断是否有必要继续注册}

b、将一步的任务放入定时器，反复调用

timer=setTimeout(step,间隔毫秒数)

c、必须用全局变量，临时存储定时器的编号

clearTimeout(timer);
timer=null;