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：打開一個新的瀏覽器。要傳三個參數第一個爲將要打開新的窗口的路徑第二個爲打開的方式第三個爲對於新打開瀏覽器的描述（高和寬等）。

    <button οnclick="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 = "";
}