js BOM

BOM

browser objest model 的缩写

1. 常用对象

window：窗口，浏览器的窗口

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

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

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

窗口body的宽度：window.innerWidth。

var width= window.innerWidth;

 

窗口body的高度：window.innerHeight

var height= window.innerHeight;

常用的方法：

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

    <buttononclick="openWin()"> 打开一个新浏览器</button>
</body>
<script>
    function openWin(){
       var myWindow = window.open("http://www.baidu.com","_blank","width=");
      }

Close：关闭一个窗口。

function closeWin(){
    myWindow.close();
}

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

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

focus：使窗口获得焦点

resizeto：改变窗口的大小

function resizeWin(){
    myWindow.resizeTo(1000,1500);
    myWindow.focus();//窗口获得焦点
}

screen：屏幕  也是window下面的一个对象在使用的时候可以用

window.screen ，也可以把window 省略掉。

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

var scrWidth= window.screen.width;
var scrHeight = window.screen.height;
document.write("屏幕的宽"+scrWidth+"屏幕高度"+scrHeight)
var scrAviWidth= screen.availWidth;
var scrAviHeight = screen.availHeight;
document.write("屏幕的宽"+scrAviWidth+"屏幕高度"+scrAviHeight)

 

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

 

 2. 窗口

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

alert("提示框");

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

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

 

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

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

3.cookie

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

Cookie的组成：

键值对的形式

存储的数据：“userId=123456； password=123123”

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

 

存储cookie

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

var userId= document.getElementById("userId");
 function saveCookie(){
     var userId = document.getElementById("password").value;
     var date = new Date();
     date.setDate(date.getDate()+7);

     var cookieText = "password="+userId+";"+"expires="+date;
     document.cookie= cookieText;

 }

 

获取cookie

通过doc .cookie

 

function getCookie(){
    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("password");
    psd.value= psdData;

}

 

清除cookie

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

function removeCookie(){
    var date= new Date();
    date.setDate(date.getDate()-7);
    var cookieText= "userId=;expires="+date;
    document.cookie= cookieText;
}

 

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（计时器）：停止计时器。

SetTime（“函数名”，“毫秒数”）；延时器，就是隔了多长时间后调用一次函数

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