BOM的使用与常用属性

12.1 常用对象

Window:窗口，浏览器的窗口

我们定义的全局变量和全局函数都是window对象的属性和方法。

var a = 1;
function test(){
    var a = 2;
    alert(a);
    alert(window.a);
}

全局变量是window的属性。全局函数时window的方法。

窗口body的宽度：window.innerWidth

窗口body的高度：window.innerHeight

常用的方法：

Open： 打开一个新的窗口。要传三个参数第一个为将要打开窗口的路径第二个为打开的方式第三个为对于新打开浏览器的描述（宽和高等）。

var myWindow = window.open("http://www.baidu.com","_blank","width=200,height=300");

close: 关闭一个窗口。

myWindow.close();

moveto:移动一个窗口。以窗口的左上角为坐标起点

function removeWin(){
    //一个窗口的左上角为移动窗口的坐标
    myWindow.moveTo(200,200);
    myWindow.focus();//窗口获得焦点
}

focus:使窗口获得焦点

resizeto:改变窗口的大小

myWindow.resizeTo(1000,1500);

screen:屏幕  也是window下面的一个对象 在使用的时候可以用window.screen，也可以把window省略掉

屏幕的常用属性：宽，高；可用宽和可用高（可用高不包括任务栏）

var scrWidth = window.screen.width;
var scrHeight = screen.height;
document.write("屏幕的宽:"+scrWidth+"屏幕的高:"+scrHeight+"<br>");
var scrAvaWidth = screen.availWidth;
var scrAvaHeight = screen.availHeight;
document.write("屏幕的宽:"+scrAvaWidth+"屏幕的高:"+scrAvaHeight+"<br>");

location：地址

常用属性：href完整路径  port端口号 pathname：路径名  protocol:协议

常用方法：

打开一个新的路径（窗口）

location.assign("http://www.runoob.com");

刷新：普通刷新和强制刷新

function reloadDoc(){
    location.reload();//如果传值为true那么就是强制刷新
}

history:历史记录

记录当前窗口的历史，可以进行页面的转换。

back:返回上一页

forward:进入下一页

go：进入确定的哪一页（-1时为回到上一页）

history.back();

history.forward();

history.go(-1);

12.2 弹窗

alert()：警告提示框。也是window对象下的方法， window可以省略不写。

alert("提示的内容");//警告提示框

 

prompt(“提示的信息”,”默认值”)：信息提示输入框。也是window对象下的方法，window也可以省略不写。当点击了确定后才把值返回否则返回为空

var str = prompt("请输入内容","hello world");//请输入内容就是提示的信息，后面的hello world是默认值。

 

confirm(“提示的信息”)确认框。也是window对象下的方法，window可以省略不写。当点击确定的时候，返回true。如果点取消返回false

var isRight = confirm("是否确定删除");

document.write(typeof (isRight) + isRight);

 

 

12.3 cookie

cookie的作用：在本地浏览器存储数据。常用于记住账号等

cookie的组成：

键值对的形势

存储的数据：”userId=123456; psd=123345; phone=1875455”

有效期：”expires=今天以后的时间”

存储cookie：

按照cookie的格式写好一个字符串 然后将它赋值给document.cookie，浏览器就存了这个cookie。可以存储多个键值对，但是键的名字不能重复。

var psd = document.getElementById("psd").value;
        var date = new Date();
        date.setDate(date.getDate() + 7);
//        var cookieText ="userId="+userId+";"+"expires="+date;
        var cookieText ="psd="+psd+";"+"expires="+date;
        document.cookie = cookieText;

 

获取cookie：

通过document.cookie就能得到浏览器之前存储的cookie。是一个字符串。将这个字符串进行解析，得到自己想要的内容。

var data = document.cookie;
var result = [];
result = data.split("; ");
var userIdData = result[0].split("=")[1];
var psdData = result[1].split("=")[1];

var userId = document.getElementById("userId");
userId.value = userIdData;
var psd = document.getElementById("psd");
psd.value = psdData;

 

清除cookie：

将存储的cookie的有效期改为过去的某一天，就清除了cookie

var date = new Date();
date.setDate(date.getDate() - 7);
var cookieText = "psd=;expires=" + date;
document.cookie = cookieText;

 

12.4 计时事件

setInterval(“函数”,“毫秒数”);//计时器，就是每隔多长时间就调用一次函数。例如时钟的演示：

var timer = setInterval("getTime()",1000);
function getTime(){
    var time = new Date();
    var hour = time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    var p1 = document.getElementById("p1");
    p1.innerHTML = hour + ":" + minute + ":" + second;
}

clearInterval(计时器);//停止一个计时器。

 

setTimeout(“函数名”,”毫秒数”)；//延时器，就是隔了多长时间后调用一次函数。

var timer = setTimeout("alarmClock()",3000);
function alarmClock(){
    var p1 = document.getElementById("p1");
    p1.innerHTML = "";
}

总结：其中cookie和计时器部分是最重要的一环，掌握计时器我们能控制函数的动态，配合事件点击比如能通过鼠标的点击实现气球的增大与缩小，时间的倒计时0以及日常生活中正在反复做的事情。