javascript BOM

来源：互联网发布：离坚白知乎编辑：程序博客网时间：2024/05/18 11:47

常用对象

概念：BOM ：Browser Object Model

常用对象：

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=400,height=300")

Close：关闭一个窗口。

myWindow.close();

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

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

Focus：使窗口获得焦点。

resizeTo：改变窗口的大小。

function resizeWin(){    myWindow.resizeTo(600,700);    myWindow.focus();}

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);

Location：地址

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

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);

常用方法：

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

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

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

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

History：历史记录

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

back:返回上一页

forward：进入下一页

go: 进入确定的哪一页（-1时返回上一个页面）

<body>    <button onclick="goBack()">返回上一页</button>    <button onclick="goForward()">进入下一页</button>    <button onclick="newDoc()">新的页面</button>    <button onclick="goTo()">进去确定的页面</button></body><script>    function goBack(){        history.back();    }    function goForward(){        history.forward();    }    function newDoc(){        location.assign("http://www.runoob.com")    }    function goTo(){        history.go(-1);    }</script>

弹窗

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

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

prompt（“提示的信息”，“默认值”）：信息提示输入框。也是window对象下的方法，window也可以省略不写

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

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

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

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

cookie的组成：

键值对的形势

储存的数据：”uesrId=12345;psd=123;”

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

存储cookie：

按照cookie的格式写好一个字符串然后将她赋值给document.cookie，浏览器就存了这个cookie。可以存储多个键

值对，但是键的名字不能重复。

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

获取cookie：

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

内容。

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

清除cookie：

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

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

计时事件

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

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

clearInterval(计时器)：停止一个计时器。

clearInterval(timer);

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

<body>    <button onclick="goBack()">返回上一页</button>    <button onclick="goForward()">进入下一页</button>    <button onclick="newDoc()">新的页面</button>    <button onclick="goTo()">进去确定的页面</button></body><script>    function goBack(){        history.back();    }    function goForward(){        history.forward();    }    function newDoc(){        location.assign("http://www.runoob.com")    }    function goTo(){        history.go(-1);    }</script>

阅读全文

0 0