瀏覽器 BOM 對(duì)象

之前學(xué)習(xí)過dom對(duì)象，d是document，o,obj對(duì)象，m是model模型
那么，顧名思義，什么是BOM
B，代表瀏覽器，borwser；o代表對(duì)象，object，m代表模型，model
那么，bom就是瀏覽器對(duì)象模型
其中，有一個(gè)很重要的東西，就是window，window是一個(gè)瀏覽器的實(shí)例，
在瀏覽器中，window有雙重角色，
它既是通過javascript訪問瀏覽器窗口的一個(gè)對(duì)象，有事ECMAScript定制的Global（世界）；

Window對(duì)象的方法：

語法：window.alert(“hello ”); //帶有一段小心和確認(rèn)按鈕的警告框
一般使用中，window對(duì)象中的window可以省略；
window.confirm(“啦啦啦”)
顯示一個(gè)帶有指定消息和ok及取消按鈕的對(duì)話框
如果用戶點(diǎn)擊確定按鈕，則confirm()返回true,點(diǎn)擊取消，則返回false
window.prompt(‘text,defaultText’);

text：對(duì)話框中顯示的純文本；
defaultText：默認(rèn)的輸入文本

返回值：如果用戶單機(jī)提示框的取消按鈕，返回null；
如果單機(jī)確認(rèn)按鈕，返回輸入字段當(dāng)前顯示的文本；
window.open(pageURL,name，parameters);
功能：打開一個(gè)新的瀏覽器窗口或者查找一個(gè)已命名的窗口
參數(shù)：pageURL:子窗口路徑；name：子窗口句柄；parameters：窗口參數(shù)
參數(shù)：newwindow(打開新窗口)；toolbar設(shè)置工具條，no為不要manubar菜單條scrollbars滾動(dòng)條

window.close（）：關(guān)閉瀏覽器窗口
//任何我們定義的全局變量，函數(shù)，對(duì)象，都會(huì)變成window對(duì)象的屬性

location對(duì)象

location對(duì)象提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息，還提供了一些導(dǎo)航的功能，它既是window對(duì)象的屬性，也是document對(duì)象的屬性

location           對(duì)象常用屬性：
location.href：      返回當(dāng)前加載頁面的完整URL；
location.hash:       返回URL中的hash，如果不包含，則返回空字符串（#后面跟的東西）；
location.host:        返回服務(wù)器名稱和端口號(hào)（如果有的話）
location.hostname:      返回不帶端口號(hào)的服務(wù)器名稱
location.pathname:       返回URL中的目錄和文件名
location.port:           返回URL中制定的端口號(hào)，如果沒有返回空字符串
location.protocol:        返回頁面所使用的協(xié)議
location.search:           返回UR的查詢字符串，這一坨以問號(hào)開頭
location.replace（url）:     重定向URL：：他沒有瀏覽記錄
location.reload():           重新加載當(dāng)前顯示的頁面（就是刷新）；
location.reload()            括號(hào)里面可以跟值，如果不寫值，那么有緩存就從緩存重新加載，沒有緩存就從服務(wù)器加載

      如果location.reload(true),則不管你本地有沒有緩存，都從服務(wù)器加載

history 歷史對(duì)象

history.back():      回到歷史記錄的上一步
history.forward():      回到歷史記錄的下一步

history.go(n)：      回到歷史記錄的后N步
history.go(1)== History.forward()
history.go(-n):      回到歷史記錄的前N步
history.go(-1)== History.back();

screen 對(duì)象屬性

語法：screen.availWidth

功能：返回可用的屏幕寬度

語法：screen.availHeight

功能：返回可用的屏幕高度

返回的不是瀏覽器的寬度和高度，是屏幕的寬度和高度

navigator:用來識(shí)別瀏覽器名稱、版本、引擎、以及操作系統(tǒng)等信息
API就是實(shí)現(xiàn)定義好的一個(gè)函數(shù)，調(diào)用他的接口方法（數(shù)據(jù)接口）；
訪問API就是訪問別人提供好的數(shù)據(jù)接口，以此來獲取數(shù)據(jù)

navigator.geolocation.getCurrentPosition(function(position){//獲取坐標(biāo)的方法函數(shù)
        console.log(position.coords.latitude+'和'+position.coords.longitude);
    });
// 獲取經(jīng)度緯度

offset 家族

offset就是 ‘自己的’的意思；
目的，這玩意的作用：JS中一套方便的獲取元素尺寸的辦法，就是Offset家族

offsetWidth offsetHeight

得到對(duì)象的寬度和高度（自己的啊，和其他人，其他元素沒任何關(guān)系）；

div.style.width和Offsetwidth的區(qū)別是什么呢？

offsetWidth的值==width+border+padding;

div{
    width:220px;
    border:1px solid red;
    padding:10px;
}

div.style.width只能得到行內(nèi)的數(shù)值，限制很大，不好使，并且，返回的值帶有px的字符串
offsetWidth?=242
所以，在我們的js中，需要用到元素自身屬性計(jì)算的時(shí)候，都用offset

offsetLeft offsetTop

返回元素自身距離上級(jí)（最近的帶有定位）盒子的坐標(biāo)（上面）的位置；
如果父級(jí)都沒有定位，則以body為準(zhǔn)
這里的上級(jí)指的是上一級(jí)，不僅僅指爸爸，可以使?fàn)敔?，曾爺爺，十八代祖宗?br> offsetLeft從上一級(jí)的padding開始算，上級(jí)的border不算
總結(jié)一下就是：盒子到定位的父盒子的邊框到邊框的距離；
如果需要計(jì)算圖片距離父級(jí)的top，用個(gè)div把圖片包起來，然后獲取div距離上級(jí)的top值，防止出現(xiàn)誤差；

offsetParent

返回該對(duì)象最近的帶有定位的父級(jí)（不一定是親爸爸）；
offset和style的區(qū)別，也是最重要的一點(diǎn)
offset只是單純的可讀，style可讀可寫
offset僅僅只是可以獲取值，查看值，而不能修改值
如果要修改，請(qǐng)用style

event 事件對(duì)象

之前學(xué)過很多事件：onclick、onmouseover、……
你知道這些事件發(fā)生的過程中，瀏覽器產(chǎn)生了哪些數(shù)據(jù)嗎？
div.onclick=function(event){執(zhí)行語句}
event翻譯過來，就是事件的意思
那么，event就是事件對(duì)象，它指向的事件，就是onclick
我們?cè)谟|發(fā)DOM上的某一個(gè)事件的時(shí)候，都會(huì)產(chǎn)生event對(duì)象，但是支持的方式不同
比如，鼠標(biāo)操作的時(shí)候，會(huì)添加鼠標(biāo)位置的相關(guān)信息到事件對(duì)象中
還有要注意的一點(diǎn)，event有兼容問題
常規(guī)瀏覽器可以直接識(shí)別，比如你function(event)，常規(guī)瀏覽器可以直接讀取event,IE不行
IE必須讀取window.event

常用的event屬性

data :     返回拖拽對(duì)象的URL字符串
width:     該窗口或框架的寬度
height:    該窗口或框架的高度
pageX:     鼠標(biāo)光標(biāo)相對(duì)于該網(wǎng)頁的水平位置（IE不支持）；
pageY:     鼠標(biāo)光標(biāo)相對(duì)于該網(wǎng)頁的垂直位置（IE不支持）；
screenX:   光標(biāo)相對(duì)于該屏幕的水平位置；
screenY:   光標(biāo)相對(duì)于該屏幕的垂直位置；
target:    該事件被傳送到的對(duì)象
type:      事件類型
clientX:   光標(biāo)相對(duì)于該網(wǎng)頁的水平位置(當(dāng)前可見區(qū)域)
clientY:   光標(biāo)相對(duì)于該網(wǎng)頁的垂直位置(當(dāng)前可見區(qū)域)

     主要看看pageX、screenX、clientX的區(qū)別

screenX      是點(diǎn)擊的位置距離屏幕最邊緣的位置
pageX、Y     距離網(wǎng)頁最頂端，包括了被卷起來的部分
clientX、Y   只是我們可以看得到的哪一塊區(qū)域的位置；

onmousedown 鼠標(biāo)按下事件，只要鼠標(biāo)不松開，就一直觸發(fā)
onmousemove 鼠標(biāo)移動(dòng)事件

拖拽進(jìn)度條

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 400px;
            height: 8px;
            background: #ccc;
            margin-top: 100px;
            margin-left: 20px;
            position: relative;
        }
        #bar{
            position: absolute;
            width: 10px;
            height: 20px;
            background: palevioletred;
            top: -7px;
            left: 0;
        }
        #mask{
            width: 0;
            height: 100%;
            background: palevioletred;
            position: absolute;
            top: 0;
            left: 0;
        }
        #demo{
            margin-top: 50px;
        }
    </style>

<div id="box">
    <div id="bar"></div>
    <div id="mask"></div>
</div>
<div id="demo"></div>

<script>
    var box = document.getElementById("box");
    var bar = box.children[0];   //  div 的第一個(gè)孩子
    var mask = box.children[1] ;       //  div 的第二個(gè)孩子
    var demo = document.getElementById("demo");

    bar.onmousedown = function(e){
        var e = e || window.e;
        var left = e.clientX - this.offsetLeft;
        var that = this;
        document.onmousemove = function(e){
            var e = e || window.e;
            that.style.left = e.clientX - left + "px";
            var val = parseInt(that.style.left);
            if(val<0){
                that.style.left='0px'
            }else if(val>390){
                that.style.left='390px'
            }
            mask.style.width = that.style.left;
            demo.innerHTML = "已經(jīng)走了："+ parseInt(parseInt(that.style.left)/390*100)+'%';
        }
    };
    document.onmouseup = function(){
        document.onmousemove = null;
    }
</script>