1. 程式人生 > >JS中的BOM操作(一)

JS中的BOM操作(一)

目錄

 

Tips

1.BOM簡介

2.對話方塊

3.載入事件

4.location物件

5.history物件

6.navigator物件


Tips

1.BOM簡介

    JavaScript分三個部分:
    1. ECMAScript標準---基本語法
    2. DOM--->Document Object Model 文件物件模型,操作頁面元素的
    3. BOM--->Browser Object Model 瀏覽器物件模型,操作瀏覽器的
    瀏覽器中有個頂級物件:window----皇上
    頁面中頂級物件:document-----總管太監
    頁面中所有的內容都是屬於瀏覽器的,頁面中的內容也都是window的,因為頁面中的所有內容都是window的,window是可以省略的.
    變數是window的


2.對話方塊

window.alert("您好啊");//以後不用,測試的時候使用
window.prompt("請輸入帳號");
var result=window.confirm("您確定退出嗎");


3.載入事件

只要頁面載入完畢,這個事件就會觸發-----頁面中所有的內容,標籤,屬性,文字,包括外部引入js檔案
    window.onload=function () {
      document.getElementById("btn").onclick=function () {
        alert("您好");
      };
    };
    很重要
    onload=function () {
      document.getElementById("btn").onclick=function () {
        alert("您好");
      };
    };

    擴充套件的事件---頁面關閉後才觸發的事件
    window.onunload=function () {

    };
    擴充套件事件---頁面關閉之前觸發的
    window.onbeforeunload=function () {
      alert("哈哈");
    };


4.location物件


    location物件
    console.log(window.location);

//    //位址列上#及後面的內容
//    console.log(window.location.hash);
//    //主機名及埠號
//    console.log(window.location.host);
//    //主機名
//    console.log(window.location.hostname);
//    //檔案的路徑---相對路徑
//    console.log(window.location.pathname);
//    //埠號
//    console.log(window.location.port);
//    //協議
//    console.log(window.location.protocol);
//    //搜尋的內容
//    console.log(window.location.search);

 //設定跳轉的頁面的地址
       //location.href="http://www.jd.com";//屬性----------------->必須記住
       //location.assign("http://www.jd.com");//方法
        //location.reload();//重新載入--重新整理
        //location.replace("http://www.jd.com");//沒有歷史記錄


5.history物件

  //跳轉的
  my$("btn1").onclick = function () {
    window.location.href = "15test.html";
  };
  //前進
  my$("btn2").onclick = function () {
    window.history.forward();
  };


6.navigator物件

    //通過userAgent可以判斷使用者瀏覽器的型別
    console.log(window.navigator.userAgent);
    //通過platform可以判斷瀏覽器所在的系統平臺型別.
    //console.log(window.navigator.platform);