關於BOM的那些事兒

window對象
1.window對象是最頂層的對象
2.window對象有六大屬性，這六大屬性本身也是對象
3.window對象旗下的document也是對象 並且document旗下有五大屬性
4.document旗下的五大屬性又是對象，總結：都是對象

Window screenLeft 和 screenTop 屬性(Window screenLeft 和 screenTop 屬性返回窗口相對於屏幕的X和Y座標)

//其它瀏覽器都支持 screenLeft 和 screenTop兩個屬性 但是Firefox不支持；可以通過screenX 和 screenY 獲取火狐的座標，但是IE又不支持screenX ，screenY ,所以提供下面跨瀏覽器獲取座標的方法

//跨瀏覽器操作
 var i= typeof window.screenLeft=='number'?window.screenLeft:window.screenX;
 var e= typeof window.screenTop=='number'?window.screenLeft:window.screenY;
 alert(i);
 alert(e);

跨瀏覽器獲取可視窗口的範圍

//跨瀏覽器獲取可視範圍的窗口

var width= window.innerWidth;    //ie不支持 
var height = window.innerHeight;   //支持inner的就使用這個
//不支持的就是用document對象的方法  （所有的都支持）
if(typeof width!='number'){
  if(document.compatMode=='CSSCompt'){   //標準兼容模式下
    width= document.documentElement.clientWidth;
    height = document.documentElement.clientHeight;
  }else{     //非
     width=  document.body.clientWidth;
     height =  document.body.clientHeight;  
}
}
alert(width);
alert(height);

計時器
1.超時調用

var box=setTimeout(function(){  
  alert('Lee');
},2000);
clearTimeout(box); //取消當前的超時調用計劃

2.間歇調用

var box=setInterval(function(){   
  alert('Lee');
},1000)

clearInterval(box);

//使用超時調用 模擬定時器
var num = 0;
var max = 5;  
function box () {
  num++;
  document.getElementById('a').innerHTML += num;
  if(num==max){ 
    alert('5秒到了！');   
  }else{
    setTimeout(box,1000);     //不超過5秒就調用本身
  }
}
setTimeout(box,1000);

location對象

//location對象 是window的屬性 也是document的屬性
alert(window.location);    //與下面等效 獲取當前的url
alert(window.document.location);

location.href='http://ww.baidu.com';   //跳轉到指定的url
 location.assign('http://www.baidu.com');  //跳轉
location.reload();   //重新加載 有可能是從緩存裏面加載
location.reload(true);   //強制從源頭加載

function a(){
  location.replace('http://www.baidu.com');   //不產生任何歷史痕跡的跳轉
}

history對象

function back(){     
  history.back();   //跳轉到前一個URL
}

function forward(){
  history.forward();    //跳轉到後一個URL
}

function go(num) {
  history.go(num); //go(-1)相當於history.back()  go(1)相當於history.forward()
}