JavaScript中BOM的基礎知識總結

1、什麼是BOM

     BOM（Browser Object Model）即瀏覽器對象模型。

     BOM提供了獨立於內容 而與瀏覽器窗口進行交互的對象；

     因爲BOM主要用於管理窗口與窗口之間的通信，所以其核心對象是window；

     BOM由一系列相關的對象構成，而且每一個對象都提供了不少方法與屬性；

     BOM缺少標準，JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C，BOM最初是Netscape瀏覽器標準的一部分。

 

 

下面我是總結的一些基礎知識，但願可以多多交流

         //1.系統對話框
         //alert() confirm() prompt()
//         alert(123);
//         confirm(456);//用戶點擊肯定返回true 不然返回false
//         
//         prompt(789);//彈出一個讓用戶輸入數據的對話框
         //沒有輸入返回空   點擊取消返回null
         //第二個參數返回默認值
//         var num = prompt("返回輸入的值","默認值");
//         alert(num);
        
        //print();//顯示打印對話框
        //find();//顯示查找對對話框
        
        
        
        
        
        ;

        //2.新建窗口
        //第二個參數給打開的窗口命名
        //window.open("http://www.baidu.com","qingkun");
        //window.open("tabs.html");
        //第三個參數用來設置新窗口的屬性 
        //window.open("tabs.html","qingkun","width=300,height=300");
         
            
        
        
         //3.窗口的位置和大小
         //位置
         //IE,Google支持：screenLeft screenTop
         //alert(window.screenLeft);
         //alert(window.screenTop);
         
         
         //firefox  google支持screenX screenY
         //alert(window.screenX);
        // alert(window.screenY);
         
         
         //兼容性寫法
//         var x = typeof screenLeft == "number"? screenLeft:screenX;
//         var y = typeof screenTop == "number"? screenTop:screenY;
//         alert(x+","+y);


        //獲取窗口大小 IE8不支持
//        alert(window.innerHeight);//窗口頁面高度
//        alert(window.innerWidth);//窗口頁面寬度
        
//        alert(window.outerHeight);//窗口高度+邊框高度
//        alert(window.outerWidth);//窗口寬度+邊框寬度
        
        //IE 8
//        document.documentElement.clientHeight;
//        document.documentElement.clientWidth; 
        //IE 6
//        document.body.clientHeight
//        document.body.clientWidth

        //兼容性
//        var width = innerWidth;
//        var height = innerHeight;
//        if(typeof width != "number"){
//            if (document.compatMode == "CSS1Compat") {
//                width = document.documentElement.clientWidth;
//                height = document.documentElement.clientHeight;
//            }else{
//                width = document.body.clientWidth;
//                height = document.body.clientHeight;
//            }
//            
//        }





        //4.間隔調用和超時調用
        //超時調用  setTimeout
        //setTimeout("alert('123')",1000);
        
//        function show(){
//            alert(123);
//        }
//        setTimeout(show,1000);


//        var a = setTimeout(function(){
//            alert(123);
//        },1000);
//        alert(a);//返回一個惟一的整數值
//        clearTimeout(a);//清除超時調用


        
        //間隔調用 setInterval 重複執行
//        var b = setInterval(function(){
//            alert("hello");
//        },1000);
//        
//        setTimeout(function(){
//            clearInterval(b);
//        },1000);
//        




        //實現一個定時器的功能  5s
//        var s = 0;
//        var a = setInterval(function(){
//            s++;
//            if (s == 5) {
//                alert("計時結束");
//                clearInterval(a);
//            }
//        },1000);




        //location
        //window.location.href = "http://www.baidu.com?name=lisi&age=23";
        //alert(window.location);
        
//        alert(window.location.protocol);//協議
//        alert(window.location.hostname); //主機名
//        alert(window.location.port);//端口號
//        alert(window.location.pathname)//路徑
        
        //alert(window.location.hash);//獲取錨點
        //alert(window.location.search);//獲取？後面
        
        //截取？後面
        
        function getSearch(){
            var arrs = {};
            //?name=lisi&age=23
             var str = window.location.search.length>0?window.location.search.substring(1):"";
             //alert(typeof str);
             var arr = str.split("=");
             
             var a = null,m = null,n = null;
             //alert(typeof arr)
             console.log(arr[1]);
             for (var i=0;i<arr.length;i++) {
                  a = arr[i].split("=");
                  m = a[0];
                  n = a[1];
                 arrs[m]=n;
             }
             return arrs;
        }
        var sss = getSearch();
        //console.log(sss);
        //alert(arrs["name"]);
//        alert(arrs["age"]);



        //2:
       var str = "name=qingkun&age=23";
       var arr = str.split("&");
       var arrs = {};
//     console.log(arr);
       for (var i=0;i<arr.length;i++) {
               var a = arr[i].split("=");
//             console.log(a);
            var m = a[0];
            var n = a[1];
            arrs[m] = n;
       }
      // alert(JSON.stringify(arrs));
       for (var j in arrs) {
//             console.log(j);
//             console.log(arrs[j]);
       }
       
       
       
       
       
       
       //改變地址欄中的地址
       function changeUrl(){
               window.location.href = "tabs.html";//當前窗口
               //window.open("tabs.html");//新窗口
//             window.location.assign("tabs.html");
//             window.location.replace("tabs.html");//不會生成歷史記錄
//             window.open("tabs.html");//新窗口
//            window.location.reload();//從緩存中加載
//            window.location.reload(true);//從服務器中加載
               
       }