javascriptBOM

BOM

概念：BrowserObject Model

1.1常用对象1window

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("","_blank","width=200,height=300");

close()：关闭一个窗口

myWindow.close();

moveTo()：移动一个窗口。以窗口的左上角为坐标起点

function moveWin(){

        //一个窗口的左上角为移动窗口的左边

       myWindow.moveTo(200,200);

       myWindow.focus();//窗口获得焦点

}

focus()：使窗口获得焦点

resize()：改变窗口的大小

myWindow.resizeTo(1000,1500);

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

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

var scrWidth = window.screen.width;

    varscrHeight = screen.height;

   document.write("屏幕的宽："+scrWidth+"屏幕的高："+scrHeight+"<br>");

    varscrAvaWidth = screen.availWidth;

    varscrAvaHeight = screen.availHeight;

document.write("屏幕的可用宽："+scrWidth+"屏幕的可用高："+scrHeight);

location：地址

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

常用方法：

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

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

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

function newLoadDoc(){

       location.reload();//如果传值为true为强制刷新，不传就是不同刷新

}

history历史记录

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

back()：返回上一页

history.back();

forward()：进入下一页

history.forward();

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

location.go(-1);

1.2弹窗

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

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

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

var str = prompt("请输入内容","HelloWorld");//请输入内容是提示信息，后面的Hello World是默认的

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

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

document.write(isRight);

1.3cookie

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

cookie的组成：

键值对的形式：

存储的数据：“userId=12345; pwd=12345; phone=1843943”

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

存储cookie：

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

function saveCookie(){

        varpwd = document.getElementById("pwd").value;

        vardate = new Date();

       date.setDate(date.getDate()+7);

        varcookieText = "pwd="+pwd+";"+"expires="+date;

       document.cookie = cookieText;

    }

获取cookie：

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

var data = document.cookie;

var result = data.split("; ");

var userIdData =result[0].split("=")[1];

var psdData = result[1].split("=")[1];

 

var userId =document.getElementById("userId");

var psd =document.getElementById("pwd");

userId.value = userIdData;

psd.value = psdData;

清除cookie：

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

var date = new Date();

date.setDate(date.getDate()-7);

var cookieText = "pwd=;expires=" + date;

document.cookie = cookieText;

1.4计时事件

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

var timer =setInterval("getTime()",1000);

    functiongetTime(){

        vardate = new Date();

        varcontent =date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

        varp1 = document.getElementById("p1");

       p1.innerHTML = content;

}

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

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

var timer =setTimeout("alarmClock()",3000);

    functionalarmClock(){

        varp1 = document.getElementById("p1");

       p1.innerHTML = "";

    }