javascript中的BOM

来源：互联网发布：山东临沂外包淘宝客服编辑：程序博客网时间：2024/06/05 02:34

BOM：browser object model浏览器对象模板

1常用对象

window：浏览器的窗口

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

vara=1;
functiontest(){
   vara= 2;
   alert(a);
   alert(window.a);
}

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

窗口body的宽度：window.innerWidth

窗口body的高度：window.innerHeight

常用的方法：

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

varmyWindow=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省略。

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

varscrWidth=window.screen.width; //此处window可省略
varscrHeight=screen.height;
document.write("屏幕的宽："+scrWidth+"屏幕的高："+scrHeight+"<br>");
varscrAviWidth=screen.availWidth;
varscrAviHeight =screen.availHeight;
document.write("屏幕的宽："+scrWidth+"屏幕的高："+scrHeight+"<br>");

location：地址

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

常用方法：

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

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

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

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

history：历史记录

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

back：返回上一页

forward：进入下一页

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

history.back();

history.forward();

history.go(-1);

2弹窗

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

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

显示结果：

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

varstr=prompt("请输入内容","helloworld");//信息提示输入框

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

varisRight=confirm("是否确定删除");
document.write(typeof(isRight) + isRight);

3cookie

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

cookie的组成：

键值对的形式

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

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

存储cookie：

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

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

获取cookie：

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

vardata= document.cookie;
varresult = [];
result= data.split("; ");
varuserIdData =result[0].split("=")[1];
varpsdData =result[1].split("=")[1];

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

清除cookie：

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

vardate= newDate();
date.setDate(date.getDate() - 7 );
varcookieText ="psd=;expires="+ date;
document.cookie= cookieText;

4计时事件

setInterval(“函数”，“毫秒数”) 计时器，就是每隔多长时间就调用一次函数。

1000毫秒是1秒

时钟的演示：

<body>
   <pid="p1">时间</p>
</body>
<script>
   var timer= setInterval("getTime()",1000);
   functiongetTime(){
       var time= newDate();
       var hour= time.getHours();
       var minute= time.getMinutes();
       var second= time.getSeconds();
       var p1= document.getElementById("p1");
       p1.innerHTML= hour+":"+ minute+ ":"+second;
   }
</script>

clearInterval（计时器），//停止一个计时器

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

<body>
   <pid="p1">10</p>
</body>
<script>
   var timer= setInterval("countDown()",1000);
   var i = 10;
   functioncountDown(){
       if(i== 0){
           clearInterval(timer);
       }else{
           varp1= document.getElementById("p1");
           p1.innerHTML= i;
           i--;
       }
   }
</script>

阅读全文

0 0