JS事件

DOM

DOM查詢

  1. 通過(guò)domcument對(duì)象獲取元素節(jié)點(diǎn)：
    1. getElementById("id")：通過(guò)id屬性獲取一個(gè)元素節(jié)點(diǎn)對(duì)象奖唯；
    2. getElementsByTagName("tag")：通過(guò)標(biāo)簽名獲取一組元素節(jié)點(diǎn)對(duì)象构眯；
    3. getElementsByTagName("*")：支持通配符，獲取所有節(jié)點(diǎn)對(duì)象嵌洼；
    4. getElementsByName("name")：通過(guò)name屬性獲取一組元素節(jié)點(diǎn)對(duì)象。
    5. 獲取元素節(jié)點(diǎn)的屬性值：節(jié)點(diǎn)對(duì)象.屬性名封恰，但對(duì)于class屬性麻养，節(jié)點(diǎn)對(duì)象.className
  2. 通過(guò)具體的元素節(jié)點(diǎn)對(duì)象獲取其子節(jié)點(diǎn)：
    1. childNodes：獲取其所有的子節(jié)點(diǎn)，包括文本節(jié)點(diǎn)诺舔、換行鳖昌、標(biāo)簽間的空白等备畦，但IE8不會(huì)；
    2. children：獲取所有的子元素许昨，只獲取標(biāo)簽元素懂盐，且是直接子元素；
    3. firstChild/lastChild：獲取第一個(gè)/最后一個(gè)子節(jié)點(diǎn)糕档，也包括文本節(jié)點(diǎn)莉恼、換行，空白等速那；
    4. firstElementChild：獲取第一個(gè)標(biāo)簽元素俐银，不兼容<=IE8；
  3. 獲取父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)：
    1. parentNode：獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)端仰；
    2. previousSibling/nextSibling：獲取前/后一個(gè)兄弟節(jié)點(diǎn)悉患；
    3. previousElementSibling：獲取前一個(gè)兄弟標(biāo)簽元素，也不兼容<=IE8榆俺；
    4. innerText/innerHTML/textContent：都可以獲取一個(gè)標(biāo)簽的內(nèi)容售躁，innerHTML的內(nèi)容包含子標(biāo)簽，而innerText和textContent只獲取標(biāo)簽內(nèi)的字符串文本茴晋；
    5. 只獲取標(biāo)簽內(nèi)自己的字符串：firstChild.nodeValue陪捷，沒(méi)有字符串文本，則返回空字符串诺擅；對(duì)于不能做父元素的標(biāo)簽市袖，如<img/>, 其firstChild為null
  4. 每個(gè)節(jié)點(diǎn)(包括文本節(jié)點(diǎn))都具有的3個(gè)屬性：nodeName、nodeType苍碟、nodeValse
    1. 文檔節(jié)點(diǎn)：nodeName =>#document、nodeType =>9撮执、nodeValse =>null
    2. 元素節(jié)點(diǎn)：標(biāo)簽名、1、null
    3. 屬性節(jié)點(diǎn)：屬性名退个、2、屬性值
    4. 文本節(jié)點(diǎn)：#text、3照棋、文本內(nèi)容
  5. document.documentElement/body：獲取<html>/<body>的元素對(duì)象资溃；
  6. document.all/document.getElementsByTagName("*")：獲取所有節(jié)點(diǎn)的標(biāo)簽元素；
  7. getElementsByClassName('選擇器名稱')：根據(jù)class屬性值獲取一組元素烈炭，兼容到>=IE8
  8. querySelector('CSS選擇器')：根據(jù)CSS選擇器獲取標(biāo)簽元素溶锭，只返回第一個(gè)，兼容到>=IE8符隙；
  9. querySelectorAll('CSS選擇器')：返回一組標(biāo)簽元素趴捅；
  10. HTML是自頂向下解析的，不能提前獲取document節(jié)點(diǎn)
    1. 在<body>標(biāo)簽之后使用<script>霹疫，可以獲取節(jié)點(diǎn)對(duì)象拱绑；
    2. window.onload = function(){ ... }：等待HTML文檔加載并渲染完成再執(zhí)行.

DOM增刪改

  1. appendChild()/removeChild()/replaceChild()：添加/刪除/替換子節(jié)點(diǎn)；
  2. insertBefore(newNode, oldNode)：在指定的子節(jié)點(diǎn)前插入新的子節(jié)點(diǎn)丽蝎；
  3. createElement()/createAttribute()/createTextNode()：創(chuàng)建元素/屬性/文本節(jié)點(diǎn)猎拨；
    var li = document.createElement("li"); --> 創(chuàng)建一個(gè)<li>
    var text = document.createTextNode("Mark"); --> 創(chuàng)建文本節(jié)點(diǎn)
    li.appendChild(text); --> 把文本節(jié)點(diǎn)添加到<li>中
  1. innerHTML也可以完成DOM的增刪改：li.innerHTML="<span>Smith</span>" 
    var li = document.createElement("li");
    li.innerHTML = "Mark"; --> create與innerHTML結(jié)合使用
  1. setAttribute()/getAttribute()：設(shè)置/獲取指定的屬性；
  2. confirm(str)：確認(rèn)/取消提示框屠阻，帶有確認(rèn)和取消按鈕红省，返回true/false；
        <button>Button-1</button> <button>Button-2</button>

    window.onload=function(){
        var btns = document.getElementsByTagName("button")
        for (var i=0; i<btns.length; i++) {
            btn[i].onclick=function(){
                confirm(this.innerHTML); --> this指向當(dāng)前button對(duì)象
                confirm(btns[i].innerHTML); -->報(bào)異常undefined国觉，此時(shí)的i=btns.length
            }; --> 頁(yè)面加載完成吧恃，首先執(zhí)行的是for循環(huán)，而不會(huì)執(zhí)行函數(shù)蛉加；
        } --> 在點(diǎn)擊按鈕時(shí)蚜枢，此時(shí)的i=btns.length，所以報(bào)異常针饥；
    }; --> 而函數(shù)內(nèi)的this始終指向調(diào)用者，所以可以正常執(zhí)行需频。

DOM操作CSS

JS修改元素樣式

  1. 選擇器中的樣式是無(wú)法獲取丁眼，也無(wú)法修改的，但可以操作元素的內(nèi)聯(lián)樣式昭殉，其優(yōu)先級(jí)高于選擇器苞七；
  2. 元素對(duì)象.style.樣式名 = "樣式值"藐守，通用寫法：元素對(duì)象.style["樣式名"] = "樣式值"
  3. 對(duì)于 - 連接的屬性，則去掉 -蹂风，并把后面的首字母大寫：btn.style.fontSize="20px";
  4. 通用形式則不需要去掉屬性名中的連接符：btn.style["font-size"]="20px";
  5. <style>中的選擇器應(yīng)避免使用 !important卢厂，它表示樣式的最高優(yōu)先級(jí)，內(nèi)聯(lián)樣式也無(wú)法覆蓋惠啄；
  6. element.setAttribute('style', 'width:20px;height:30px;')：設(shè)置元素的 style 屬性慎恒；
  7. element.setAttribute('style')：移除元素的 style 屬性，也即刪除 style 樣式撵渡；
  8. 如果要修改多個(gè)樣式融柬，可以在<style>中預(yù)定義CSS樣式選擇器，再賦值給元素的 className 屬性趋距，這種方式的性能比較高粒氧，也使得JS和CSS更好的分離。

JS獲取元素樣式

  1. element.style：獲取的是當(dāng)前元素上的所有內(nèi)聯(lián)樣式节腐，包括默認(rèn)存在的內(nèi)聯(lián)樣式外盯；
  2. element.style.樣式名、element.style["樣式名"]：根據(jù)屬性名獲取內(nèi)聯(lián)樣式的屬性翼雀；
    1. 獲取的只是內(nèi)聯(lián)樣式上的屬性门怪，如果內(nèi)聯(lián)樣式上沒(méi)有手動(dòng)設(shè)置該屬性，則獲取的屬性值為''锅纺；
    2. element.style.cssText：只獲取標(biāo)簽上手動(dòng)設(shè)置的CSS樣式掷空，是一個(gè)字符串；
    element.style.cssText = "width:100%;font-size:16px;" -->修改/添加內(nèi)聯(lián)樣式
  1. element.getAttribute('style')：獲取標(biāo)簽上的style屬性值囤锉，同element.style.cssText
  2. element.currentStyle.樣式名：IE獨(dú)有的坦弟，獲取元素當(dāng)前正在使用的所有樣式信息；如果沒(méi)有手動(dòng)設(shè)置樣式的默認(rèn)值官地，則返回 auto酿傍；
  3. getComputedStyle(element, null)：window 的方法，獲取元素當(dāng)前正在使用的的所有樣式驱入；
    let sty = getComputedStyle(btn, null)
    1. sty["background-color"] 返回的是 rgb 值赤炒，btn.style["background-color"] 返回的是當(dāng)前樣式中設(shè)置的 background-color 屬性值；
    2. 不兼容<=IE8
  4. currentStyle 和 getComputedStyle() 獲取的屬性都是只讀的亏较，不能修改莺褒；
  5. 獲取CSS樣式屬性的兼容方式：
    function getStyle(element, styleName) {
        if(window.getComputedStyle) {
            return getComputedStyle(element, null)[styleName];
        } else { --> IE8的window中沒(méi)有g(shù)etComputedStyle，則返回undefined雪情，即false
            return element.currentStyle[styleName];
        } --> 屬性styleName要顯示設(shè)置一個(gè)默認(rèn)值遵岩，否則瀏覽器可能返回auto
    }

DOM屬性事件

  1. clientWidth/clientHeight：獲取元素的可見寬高，不帶單位px，返回的是數(shù)值尘执；
    1. clientWidth = width + paddingLeft + paddingRight
    2. clientWidth和clientHeight 都是只讀屬性舍哄；
    3. 瀏覽器窗口的寬度/高度：document.documentElement.clientWidth/clientHeight
  2. scrollWidth/scrollHeight：獲取元素的滾動(dòng)區(qū)域?qū)捀撸?
    1. 如果元素區(qū)域帶有滾動(dòng)條，clientWidth/clientHeight 只能獲取滾動(dòng)窗口內(nèi)可見的寬高誊锭，而scrollWidth/scrollHeight 獲取的寬高表悬，包含滾動(dòng)窗口外的寬高；
    2. clientWidth/clientHeight 獲取的寬高包含滾動(dòng)條的寬度/高度丧靡；
    3. scrollLeft/scrollTop：水平/垂直滾動(dòng)的距離蟆沫；
    4. 當(dāng)垂直滾動(dòng)條滾到底部時(shí)，clientHeight == scrollHeight-scrollTop
    5. element.onscroll = function(){};：綁定滾動(dòng)條滾動(dòng)事件
  3. offsetWidth/offsetHeight：獲取元素的整個(gè)寬度和高度窘行，width+padding+border
  4. offsetParent：獲取距離最近的饥追、使用了定位的父元素對(duì)象，如果都沒(méi)有定位罐盔，則返回body但绕；
  5. offsetLeft/offsetTop：當(dāng)前元素相對(duì)于其定位父元素的水平/垂直偏移量，都是只讀的屬性惶看；

上傳圖片

<input type="file" accept="image/*" onchange="uploadImg(this)" />

  1. accept：指定上傳文件的類型捏顺，打開資源管理器展示的文件類型；
  2. onchange：<input/>中的內(nèi)容發(fā)生變化時(shí)的事件纬黎；
  3. 預(yù)覽圖片幅骄，F(xiàn)ileReader是H5提供的，用于讀取文件
    uploadImg(ev) {
        let file = ev.files[0]
        let reader = new FileReader() -->創(chuàng)建FileReader對(duì)象
        reader.onloadstart = function (e) { //開始讀取 }
        reader.onprogress = function (e) { //正在讀取中 }
        reader.onabort = function (e) { //中斷讀取 }
        reader.onerror = function (e) { //讀取異常 }
        reader.onload = function (e) { --->讀取成功的回調(diào)
            let img = document.querySelector("input[type=file]")
            img.src = e.target.result
        }
        reader.readAsDataURL(file) --->開始讀取本地選擇的文件
    }
  1. element.onmousemove = function(event){}：鼠標(biāo)在元素中移動(dòng)時(shí)被觸發(fā)本今；
    1. 回調(diào)的參數(shù) event 中封裝了所有信息拆座，如鼠標(biāo)的水平/垂直坐標(biāo)：clientX/clientY
    2. 但在IE8中不會(huì)回調(diào)event，而是將事件對(duì)象保存在window的屬性中：window.event
    3. clientX/clientY只針對(duì)當(dāng)前瀏覽器的可見窗口冠息，窗口左上角的坐標(biāo)始終是(0, 0)挪凑；
    4. pageX/pageY：鼠標(biāo)相對(duì)于當(dāng)前頁(yè)面的坐標(biāo)，頁(yè)面左上角的坐標(biāo)才是(0, 0)逛艰，不兼容IE8躏碳；
  2. 頁(yè)面垂直滾動(dòng)時(shí)，scrollTop 的兼容性：獲取頁(yè)面滾動(dòng)的距離散怖；
    1. document.body.scrollTop：只適用于 Chrome 瀏覽器菇绵，其他瀏覽器返回 0；
    2. document.documentElement.scrollTop：適用于Foxfire镇眷、IE咬最，但Chrome仍返回 0；
    3. 水平方向滾動(dòng)時(shí)偏灿，scrollLeft 同理丹诀。
  3. 事件冒泡：如果父節(jié)點(diǎn)和子節(jié)點(diǎn)綁定了相同的事件，那么觸發(fā)子節(jié)點(diǎn)事件時(shí)翁垂，父節(jié)點(diǎn)也會(huì)觸發(fā)铆遭；
    1. 事件只會(huì)向上傳遞父節(jié)點(diǎn)的相同事件，不會(huì)向下傳遞沿猜；
    2. 阻止事件冒泡：event.stopPropagation(); --> 不兼容IE
    3. IE瀏覽器特有的阻止事件冒泡：window.event.cancelBubble = true;

事件委托

事件委托：多個(gè)子元素需要注冊(cè)同一種事件時(shí)枚荣，給其共同的父元素注冊(cè)該事件，事件響應(yīng)時(shí)啼肩，通過(guò)回調(diào)參數(shù) event 獲取每個(gè)子元素橄妆，根據(jù)不同的子元素，執(zhí)行不同的代碼祈坠；

    <ul> 
        <li><a href="javascript:;">超鏈接一</a></li>
        <li><a href="javascript:;">超鏈接二</a></li>
    </ul>
    var uls = document.getElementsByTagName("ul")[0];
    uls.onclick = function(event) {
        event = event || window.event; --> 兼容IE
        var node = event.target; --> 獲取當(dāng)前點(diǎn)擊的子元素節(jié)點(diǎn)對(duì)象
    };
  1. event.currentTarget 害碾、 event.target
    1. click事件實(shí)際注冊(cè)到<ul>標(biāo)簽上，event.target獲取的是實(shí)際點(diǎn)擊標(biāo)簽的元素對(duì)象赦拘；
      點(diǎn)擊<li>慌随，則event.target就是li；點(diǎn)擊<a>躺同，則event.target就是 a阁猜。
    2. event.currentTarget 獲取的是實(shí)際注冊(cè) click 事件的元素對(duì)象，始終是 <ul> 對(duì)象蹋艺。
  2. event.relatedTarget 返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)
    1. 對(duì)于 mouseover 事件來(lái)說(shuō)剃袍，該屬性是鼠標(biāo)指針移到目標(biāo)節(jié)點(diǎn)上時(shí)所離開的那個(gè)節(jié)點(diǎn)。
    2. 對(duì)于 mouseout 事件來(lái)說(shuō)捎谨，該屬性是離開目標(biāo)時(shí)民效，鼠標(biāo)指針進(jìn)入的節(jié)點(diǎn)。
    3. 對(duì)于其他類型的事件來(lái)說(shuō)涛救，這個(gè)屬性沒(méi)有用畏邢。

函數(shù)節(jié)流：

  1. JS中有些事件的觸發(fā)頻率特別高，比如：onresize州叠，onmousemove
  2. 對(duì)于短時(shí)間內(nèi)高頻率觸發(fā)的函數(shù)棵红，可以在函數(shù)內(nèi)使用定時(shí)器減少觸發(fā)次數(shù)，實(shí)現(xiàn)函數(shù)節(jié)流咧栗；
  3. 在觸發(fā)定時(shí)器之前逆甜，先清除一次定時(shí)器，只保留最后一次定時(shí)器任務(wù)致板；
    clearTimeout(timer); timer = setTimeout(function{ ... }, 200);

事件

  1. addEventListener("事件名", function, false)：事件綁定交煞，事件名不帶 on；
  2. element.onclick=function(event){}; ->屬性的方式綁定事件斟或，多次綁定同一事件時(shí)素征，最后一次綁定會(huì)覆蓋之前的事件；
  3. addEventListener() 可以重復(fù)綁定同一事件，響應(yīng)事件時(shí)御毅，從第一次綁定時(shí)開始響應(yīng)根欧；
    uls.addEventListener('click', function(){}, false); --> 綁定click事件
  4. removeEventListener('事件名', callback)：移除綁定的事件，callback 并不是移除事件的回調(diào)端蛆，而是addEventListener() 的回調(diào)函數(shù)名凤粗，因?yàn)樗梢詫?duì)同一事件綁定多次；
  5. addEventListener() 只兼容到IE9今豆，而在IE8中嫌拣，綁定事件使用attachEvent()
  6. attachEvent("事件名", function)：事件名中帶 on，也可以多次綁定同一個(gè)事件呆躲，但事件的響應(yīng)順序與addEventListener() 相反异逐；
  7. addEventListener() 中的 this 指向綁定事件的對(duì)象，而 attachEvent() 中指向window插掂；
  8. 兼容性：
    function bind(obj, event, callback) {
        if(obj.addEventListener) {
            obj.addEventListener(event, callback, false);
        } else {
            obj.attachEvent("on"+event, function() {
                callback.call(obj);   // 讓回調(diào)函數(shù)中的this指向綁定的對(duì)象
            });
        }
    }
  1. 事件的傳播：
    1. 微軟公司認(rèn)為事件應(yīng)該從內(nèi)向外灰瞻，即事件冒泡的形式；而網(wǎng)景公司認(rèn)為恰恰相反燥筷；
    2. W3C綜合兩種方案箩祥，將事件傳播分為 3 個(gè)階段：捕獲階段、目標(biāo)階段肆氓、冒泡階段
    3. 捕獲階段：事件從最外層的父元素袍祖，向目標(biāo)子元素進(jìn)行事件的捕獲，但默認(rèn)此時(shí)不會(huì)觸發(fā)事件；
    4. 目標(biāo)階段：事件捕獲到目標(biāo)元素，捕獲結(jié)束李破，開始在目標(biāo)元素上觸發(fā)事件句伶；
    5. 冒泡階段：事件從目標(biāo)元素向父元素傳遞葵硕，并依次觸發(fā)父元素上的事件；
    6. 在捕獲階段也觸發(fā)事件：addEventListener("事件名", function, true)
    7. IE<=8 沒(méi)有事件捕獲階段。
  2. 鼠標(biāo)按下/移動(dòng)/松開：onmousedown、onmousemove缩举、onmouseup
    1. 拖拽網(wǎng)頁(yè)中的內(nèi)容時(shí)，瀏覽器默認(rèn)會(huì)執(zhí)行搜索內(nèi)容匹颤，導(dǎo)致拖拽功能異常仅孩；
    2. return false; 禁止默認(rèn)行為，但不兼容IE8
    3. element.setCapture(); 捕獲element綁定的相關(guān)事件印蓖，優(yōu)先響應(yīng)辽慕；
    4. element.releaseCapture(); 釋放捕獲；
    5. 但是赦肃，setCapture()只有IE支持溅蛉，Firefox不會(huì)報(bào)錯(cuò)公浪，Chrome會(huì)報(bào)錯(cuò)；
      element.setCapture && element.setCapture(); --> 有setCapture()方法船侧，則執(zhí)行
    6. 鼠標(biāo)拖拽標(biāo)簽：
    element.onmousedown = function(event){  //  給被拖拽的標(biāo)簽注冊(cè)鼠標(biāo)的按下事件
        if (event.button != 0) return; // 只有鼠標(biāo)左鍵按下才有效
        element.setCapture&&element.setCapture()  // 兼容IE
        document.onmousemove = function(e){   // 把移動(dòng)事件注冊(cè)到document上欠气，防止卡頓
            ......  // 更改標(biāo)簽的left/top，達(dá)到移動(dòng)效果
            e.preventDefault();  // 阻止瀏覽器的默認(rèn)行為
        }
        document.onmouseup = function(e){  // 抬起事件也必須注冊(cè)到document上勺爱，任何地方
            document.onmousemove = null;  // 都可以取消事件
            document.onmouseup = null;
            document.releaseCapture&&document.releaseCapture(); // 兼容IE
        }
        // 屏蔽第二次拖拽時(shí)的鬼影晃琳，return false 無(wú)效
        event.preventDefault();
        event.stopPropagation();
    }
  1. 鼠標(biāo)滾輪：onmousewheel讯检，但Firefox不支持琐鲁，而是使用DOMMouseScroll，而且火狐必須通過(guò) addEventListener() 綁定滾輪事件人灼；
    1. event.wheelDelta：鼠標(biāo)滾輪滾動(dòng)的方向围段，只看正負(fù)，不管大小投放，負(fù)值表示向下滾動(dòng)奈泪；
    2. FireFox也不支持 event.wheelDelta，而是使用 event.detail灸芳，正數(shù)表示向下滾涝桅；
    3. 如果瀏覽器有滾動(dòng)條，滾動(dòng)鼠標(biāo)滾輪將執(zhí)行瀏覽器的默認(rèn)行為烙样，而不會(huì)執(zhí)行元素的滾輪事件冯遂；
    element.onmousewheel=function(event){
        return false;   // 阻止瀏覽器的默認(rèn)行為，執(zhí)行元素的滾輪事件谒获；
    };
    element.addEventListener("DOMMouseScroll", function(event){
        event.preventDefault && event.preventDefault();   // 阻止瀏覽器的默認(rèn)行為
    }, false);
  1. return false; 在 addEventListener() 注冊(cè)的事件中蛤肌，無(wú)法阻止瀏覽器的默認(rèn)行為，必須使用tevent.preventDefault();
  2. 鼠標(biāo)右擊事件：oncontextmenu
  3. 鍵盤事件：onkeydown(按下)批狱、onkeyup(松開)裸准、onkeypress(按下并松開)
    1. 鍵盤事件一般綁定給可以獲取焦點(diǎn)的元素對(duì)象，或者document赔硫，比如 <input />輸入框炒俱；
    2. 對(duì)于onkeydown，如果長(zhǎng)時(shí)間按下一個(gè)按鍵爪膊，那么事件將一直觸發(fā)权悟，而且第一次和第二次觸發(fā)的時(shí)間間隔會(huì)比第二次之后的時(shí)間間隔長(zhǎng)一些，為了避免誤操作惊完；
    3. event.KeyCode：獲取按鍵的編碼僵芹，從而判斷按鍵的類型，如 y=89
    4. altKey小槐、ctrlKey拇派、shiftKey：判斷 Alt荷辕、Ctrl、Shift 鍵是否被按下件豌；
      event.keyCode===89 && event.ctrlKey --> Ctrl+y
    5. <input /> 的 onkeydown 事件默認(rèn)行為就是輸入內(nèi)容疮方，return false; 可以阻止輸入。
  4. 阻止默認(rèn)行為：return false; 與 event.preventDefault();
    1. 在jQuery中茧彤，return false; 相當(dāng)于同時(shí)調(diào)用 preventDefault() 和 stopPropagation()骡显；
    2. IE不支持preventDefault()，需要使用：window.event.returnValue = false;
    3. 在原生JS中曾掂，addEventListener()/attachEvent() 綁定的事件中惫谤，不支持return false 阻止默認(rèn)行為，必須使用preventDefault()珠洗、window.event.returnValue=false
    4. H5規(guī)范指出溜歪，在mouseover等幾種特殊事件中，return false;并不一定能終止事件许蓖，所以H5建議盡量不要使用 return false 來(lái)阻止事件的默認(rèn)行為蝴猪。

BOM

BOM：瀏覽器對(duì)象模型，可以讓我們通過(guò)JS來(lái)操作瀏覽器膊爪；

  1. BOM對(duì)象：Window自阱、Navigator、Location米酬、History沛豌、Screen
    1. Window：代表整個(gè)瀏覽器窗口，同時(shí)淮逻，window也是網(wǎng)頁(yè)中的全局對(duì)象琼懊；
    2. Navigator：表示當(dāng)前瀏覽器的信息，可以用來(lái)識(shí)別不同的瀏覽器爬早；
    3. Location：瀏覽器的地址欄哼丈，可以獲取地址欄信息，操作瀏覽器跳轉(zhuǎn)頁(yè)面筛严；
    4. History：表示瀏覽器的歷史紀(jì)錄醉旦，但由于隱私原因，不能獲取到具體的歷史紀(jì)錄桨啃，只能操作
      瀏覽器向前/后退车胡，而且只在當(dāng)次訪問(wèn)時(shí)有效，關(guān)閉之后再打開則無(wú)效照瘾；
    5. Screen：表示擁護(hù)的屏幕信息匈棘，可以獲取顯示器的相關(guān)信息，常用于移動(dòng)端析命；
    6. 這些 BOM 對(duì)象在瀏覽器中都是作為 window 對(duì)象的屬性保存的主卫，又因?yàn)?window 是全局的對(duì)象逃默，可以直接使用這些對(duì)象，而不用通過(guò) window.navigator 調(diào)用簇搅；
  2. Navigator
    1. 由于歷史原因完域，navigator對(duì)象中的大部分屬性都已經(jīng)不能識(shí)別瀏覽器了；
    2. 一般只會(huì)使用 userAgent 來(lái)判斷瀏覽器的信息：navigator.userAgent
    3. IE11中的 userAgent 已經(jīng)去除了微軟和IE的相關(guān)標(biāo)識(shí)瘩将，不能通過(guò)userAgent來(lái)準(zhǔn)確識(shí)別IE吟税；
    4. window.ActiveXObject：IE 特有的函數(shù)，根據(jù)這些特有的信息獲取瀏覽器的類型姿现；
    if(window.ActiveXObject) --> 微軟發(fā)現(xiàn)了這種判斷方式肠仪，所以在IE11返回的是false
    但并不意味著IE11中沒(méi)有該對(duì)象：if("ActiveXObject" in window) --> true
  1. History
    1. length：瀏覽器歷史列表中的URL數(shù)量；
    2. back()/forward()：加載前/下一個(gè)建钥，回退/前進(jìn)一個(gè)頁(yè)面藤韵；
    3. go()：加載某個(gè)具體頁(yè)面，go(1)相當(dāng)于forward()熊经，go(-1) 相當(dāng)于 back()；
  2. Location
    1. location 可以獲取地址欄的完成信息欲险，也可以直接操作地址欄镐依，同 window.location
    2. 屬性：hash、host天试、hostname槐壳、href、pathname喜每、port务唐、protocol、search
  3. location.：重定向到一個(gè)新的網(wǎng)站带兜，會(huì)生成歷史紀(jì)錄
  4. location = "/login/login.html"：重定向到新的頁(yè)面枫笛，當(dāng)前域名 /login/login.html
    1. window.location.search：獲取地址的參數(shù)部分，?...
    2. window.location.hash：獲取頁(yè)面的錨點(diǎn)刚照，#...
  5. assign()：加載新的文檔刑巧，assign("https://www.baidu.com/")
  6. reload()：刷新，默認(rèn)刷新帶有緩存无畔，reload(true)：強(qiáng)制清空緩存刷新
  7. replace()：用新的文檔替換當(dāng)前文檔啊楚，不會(huì)生成歷史紀(jì)錄，即不能回退浑彰。
  8. window.open()：開啟一個(gè)新的窗口恭理，加載文檔。

定時(shí)器

setTimeout()郭变、setInterval()颜价、clearTimeout()薄风、clearInterval()

  1. 延遲任務(wù)：
    1. setTimeout(function, time)：time毫秒之后執(zhí)行function，返回Number型的數(shù)據(jù)拍嵌；
    2. clearTimeout(timer)：即使 timer 是undefined遭赂，也不會(huì)報(bào)錯(cuò)，什么也不做横辆；
  2. 定時(shí)任務(wù)
    1. setInterval(function, time)：每隔 time 毫秒執(zhí)行一次 function撇他；
    2. clearInterval(timer)：清除定時(shí)器；

JSON

  1. JSON：JavaScript Object Notation狈蚤，JS對(duì)象表示法
    1. JSON和JS對(duì)象的格式一樣困肩，只不過(guò)JSON字符串中的屬性名必須加雙引號(hào)；
      var str = '{"name": "Mack", "age": 18}';
    2. JSON類型：對(duì)象{}脆侮，數(shù)組[]
    3. JSON中允許的屬性值：字符串锌畸、數(shù)值、布爾值靖避、null潭枣、對(duì)象、數(shù)組
  2. JSON字符串與JS對(duì)象相互轉(zhuǎn)換：JSON
    1. JSON.parse(str)：JSON字符串轉(zhuǎn)JS對(duì)象幻捏；
    2. JSON.stringify(obj)：JS對(duì)象轉(zhuǎn)JSON字符串盆犁；
    3. IE7不支持JSON，可以使用 eval(str) 函數(shù)篡九，將一個(gè)字符串轉(zhuǎn)為有效的表達(dá)式谐岁；
        var obj = eval("(" + str +")"); -->對(duì)字符串加"()"，告訴瀏覽器{}不是一個(gè)代碼塊榛臼；
        // obj = {"name": "Mack", "age": 18}
  1. 但是伊佃，eval()的性能比較低，而且存在安全隱患沛善，轉(zhuǎn)換的字符串可能是一段有害的JS代碼航揉。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市路呜，隨后出現(xiàn)的幾起案子迷捧，更是在濱河造成了極大的恐慌，老刑警劉巖胀葱，帶你破解...
    沈念sama閱讀 221,635評(píng)論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件漠秋，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡抵屿，警方通過(guò)查閱死者的電腦和手機(jī)庆锦，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)轧葛，“玉大人搂抒，你說(shuō)我怎么就攤上這事艇搀。” “怎么了求晶？”我有些...
    開封第一講書人閱讀 168,083評(píng)論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵焰雕，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我芳杏，道長(zhǎng)矩屁，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 59,640評(píng)論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任爵赵，我火速辦了婚禮吝秕，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘空幻。我一直安慰自己烁峭，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布秕铛。 她就那樣靜靜地躺著约郁，像睡著了一般。 火紅的嫁衣襯著肌膚如雪如捅。 梳的紋絲不亂的頭發(fā)上棍现，一...
    開封第一講書人閱讀 52,262評(píng)論 1贊 308
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音镜遣，去河邊找鬼。 笑死士袄，一個(gè)胖子當(dāng)著我的面吹牛悲关，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播娄柳，決...
    沈念sama閱讀 40,833評(píng)論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼寓辱，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了赤拒？” 一聲冷哼從身側(cè)響起秫筏，我...
    開封第一講書人閱讀 39,736評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎挎挖，沒(méi)想到半個(gè)月后这敬，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1贊 319
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡蕉朵，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年崔涂，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片始衅。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1贊 352
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡冷蚂，死狀恐怖缭保，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情蝙茶，我是刑警寧澤艺骂，帶...
    沈念sama閱讀 36,185評(píng)論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站隆夯，受9級(jí)特大地震影響钳恕，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜吮廉，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3贊 333
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一苞尝、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧宦芦，春花似錦宙址、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評(píng)論 0贊 24
  • 一樁弒父案抡砂，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至恬涧，卻和暖如春注益，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背溯捆。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工丑搔， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人提揍。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3贊 376
  • 代替公主和親
    正文 我出身青樓啤月，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親劳跃。 傳聞我的和親對(duì)象是個(gè)殘疾皇子谎仲，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2贊 359

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)刨仑。 注意：講述HT...
    kismetajun閱讀 27,513評(píng)論 1贊 45
  • 事件源對(duì)象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 890評(píng)論 0贊 0
  • 事件類型 Web瀏覽器可能發(fā)生的事件類型有很多郑诺。不同的事件類型具有不同的信息，而“DOM3級(jí)事件“規(guī)定了以下幾類事...
    ConRon閱讀 885評(píng)論 0贊 1
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,223評(píng)論 0贊 3
  • 第一章 1.什么是DOM DOM: Document Object Model(文檔對(duì)象模型) 是JavaScri...
    fastwe閱讀 810評(píng)論 0贊 0