javascript 組成部分
????1.ECMAScript
????????javascript的核心解釋器

????2.DOM
????????Document Object Modle????文檔對(duì)象模型
????DOM操作
????????獲取元素
????????改變樣式
????????改變內(nèi)容
????3.BOM
????????瀏覽器對(duì)象模型
????????瀏覽器操作
????????????window.navigator.userAgent
????????????window.open()
????????????window.close()

DOM操作
????獲取元素
????????document.getElementById()
????????????通過id獲取一個(gè)元素
????????document.getElementsByTagName()
????????????通過標(biāo)簽名獲取一組元素
????????document.getElementsByClassName()
????????????通過class獲取一組元素
????????document.querySelector()
????????????獲取第0個(gè)
????????document.querySelectorAll()
????????????獲取一組

節(jié)點(diǎn)===標(biāo)簽===元素
????DOM樹 頁面結(jié)構(gòu)關(guān)系

    獲取子節(jié)點(diǎn)
        oEle.children
            只能獲取一層
    獲取父節(jié)點(diǎn)
        oEle.parentNode
            獲取結(jié)構(gòu)父級(jí)
        oEle.offsetParent
            獲取定位父級(jí)
    獲取兄弟節(jié)點(diǎn)
        獲取上一個(gè)兄弟節(jié)點(diǎn)
            oEle.previousElementSibling
        獲取下一個(gè)兄弟節(jié)點(diǎn)
            oEle.nextElementSibling
        注意：不兼容低版本IE瀏覽器
    獲取首尾子節(jié)點(diǎn)
        首子節(jié)點(diǎn)
            aEle[0]
            oPrent.firstElementChild
        尾子節(jié)點(diǎn)
            aEle[aEle.length-1]
            oPrent.lastElementChild

    獲取標(biāo)簽名
        oEle.tagName

獲取元素信息
????盒子模型
????????width/height+padding+border
????盒子模型的寬高
????????盒子模型的寬
????????????oEle.offsetWidth
????????盒子模型的高
????????????oEle.offsetHeight

獲取非行間樣式

            function getStyle(obj,sName){
                return 
              (obj.currentStyle||getComputedStyle(obj,false))[sName];
            }

獲取元素的定位
????oEle.offsetLeft
????oEle.offsetTop

獲取定位父級(jí)
????oEle.offsetParent

????創(chuàng)建
????????document.createElement('標(biāo)簽名');

????插入
????????后面添加
????????父級(jí).appendChild(要添加的子級(jí))
????????某一個(gè)子級(jí)前面插入
????????父級(jí).insertBefore(要插入的元素,插入誰之前);
????刪除
????????父級(jí).removeChild(要?jiǎng)h的元素);

事件
????事件對(duì)象 觸發(fā)事件時(shí)的詳細(xì)信息

    需求:
        點(diǎn)擊頁面，彈出鼠標(biāo)在頁面中的位置

    獲取鼠標(biāo)在可視區(qū)中的位置
        ev.clientX      鼠標(biāo)X軸可視區(qū)中的位置
        ev.clientY      鼠標(biāo)Y軸可視區(qū)中的位置

    獲取鼠標(biāo)在頁面中的位置
        ev.pageX        鼠標(biāo)X軸頁面中的位置
        ev.pageY        鼠標(biāo)Y軸頁面中的位置

    需求:
        頁面中有一個(gè)div，當(dāng)鼠標(biāo)移動(dòng)的時(shí)候，div跟著鼠標(biāo)動(dòng)。

        新的事件
            onmousemove         當(dāng)鼠標(biāo)移動(dòng)的時(shí)候觸發(fā)

拖拽 drag
????事件

            onmousedown             鼠標(biāo)按下
                獲取鼠標(biāo)在div中的位置
                var disX = ev.pageX-oDiv.offsetLeft
                var disY = ev.pageY-oDiv.offsetTop
            onmousemove             鼠標(biāo)移動(dòng)
                改變div的left和top
                oDiv.style.left = ev.pageX-disX+'px';
                oDiv.style.top = ev.pageY-disY+'px';
            onmouseup               鼠標(biāo)抬起
                把onmousemove干掉
                把onmouseup干掉

    
        問題一：
            鼠標(biāo)沒點(diǎn)就懂了
            解決：
                把onmousemove放在onmousedown里面
        問題二:
            鼠標(biāo)移動(dòng)過快，就移出div了
            解決:
                1.把div放大        不靠譜，設(shè)計(jì)和產(chǎn)品會(huì)找你拼命
                以下方法靠譜
                把onmousemove事件加給document
        問題三:
            鼠標(biāo)抬起依然能動(dòng)
            解決:
                正在onmouseup中把onmousemove干掉
        問題四:
            鼠標(biāo)拖拽的時(shí)候，會(huì)選中頁面內(nèi)容
            解決:
                在onmousedown中把默認(rèn)事件阻止
                return false;   注意一定要放在最后

擴(kuò)展:

        限制范圍拖拽
        得到l和t
        var l = ev.pageX-disX;
        var t = ev.pageY-disY;
        限制l和t的范圍
        if(l<0){
            l = 0;
        }else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
            l = document.documentElement.clientWidth-oDiv.offsetWidth;
        }
        if(t<0){
            t = 0;
        }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
            l = document.documentElement.clientHeight-oDiv.offsetHeight;
        }

瀏覽器默認(rèn)行為,瀏覽器默認(rèn)事件
????return false;

????鼠標(biāo)右鍵
????????oncontextmenu

????document.documentElement ???? html
????document.body ???? body

獲取可視區(qū)寬高
????可視區(qū)寬度
????????document.documentElement.clientWidth
????可視區(qū)高度
????????document.documentElement.clientHeight

事件冒泡
????取消冒泡
????????ev.cancelBubble = true;

????平時(shí)沒事的情況下不要取消。如果出現(xiàn)問題了才取消

事件綁定(事件監(jiān)聽)
????給同一個(gè)元素加同一個(gè)事件可以加多次。
????解決事件沖突

   不兼容低版本瀏覽器
    oEle.addEventListener('click', function(){

    }, false);
    低版本瀏覽器
        oEle.attachEvent('onclick',function(){});

    切記:
        addEventListener中 return false失效了
        ev.preventDefault();
        不兼容低版本瀏覽器

事件解綁

    oEle.removeEventListener('click',function(){},false);

????切記：不能使用匿名函數(shù)

????事件流 事件在程序中的走向
????DOM事件流 高級(jí)瀏覽器的事件流
????????事件冒泡 事件捕獲
????????(冒泡階段) (捕獲階段)
????addEventListener第三個(gè)參數(shù)決定是什么?
????????false 冒泡
????????true 捕獲
????????捕獲階段只有addEventListener第三個(gè)參數(shù)是true才觸發(fā)

????IE事件流 低版本IE的事件流
????????事件冒泡
????????(冒泡階段)

事件流有幾種？
????DOM事件流
????IE事件流
事件流的區(qū)別？
????DOM事件流有冒泡階段和捕獲階段
????IE事件流有冒泡階段

if的簡寫

    if(條件){
        語句
    }
    簡寫
    條件&&語句;

    true&&alert(1);
    false&&alert(1);

    &&并且，兩邊的條件都是真的才算是真的

    true&&alert(1);


    true||alert(1);             不能彈
    false||alert(1);            能彈

    (obj.currentStyle||getComputedStyle(obj,false))[sName]

onmouseover和onmouseout的bug
????onmouseover ????移入
????onmouseout ???? 移出
換事件
????onmouseenter ????移入
????onmouseleave ????移出

事件委托(事件委派、事件派生)
????1.動(dòng)態(tài)創(chuàng)建的元素加事件 ????解決
????2.循環(huán)加事件太麻煩 ????解決

????核心：
????1. 給父級(jí)加事件
????2. 獲取事件源
????????var oSrc = ev.srcElement||ev.target;

window.onload
????當(dāng)所有資源都加載完成之后觸發(fā)

DOMReady ????????????推薦
????當(dāng)html，css，js加載完畢執(zhí)行
????給document添加事件
????????DOMContentLoaded事件????????不兼容低版本瀏覽器

????DOM事件
????????特點(diǎn)以DOM開頭
????????必須用事件綁定

????事件
????????DOM2事件
????????????onclick
????????????onmouseover
????????DOM3事件 ???? 必須用事件綁定
????????????DOMContentLoaded

DOMReady另一種玩法

    document.onreadystatechange = function(){
        document.readyState
            interactive         準(zhǔn)備
            complete            完成
        需要判斷readyState是否是complete
        if(document.readyState=='complete'){
            //執(zhí)行我們的代碼
        }
    };

總結(jié):

    javascript的組成部分：
        ECMAScript          核心解釋器
        DOM                 文檔對(duì)象模型
        BOM                 瀏覽器對(duì)象模型
    DOM操作
        DOM樹
            document
                html
                    head
                        title
                        made
                        style
                        link
                        script
                    body
                        div
                            p
                                a
                            a
                            ul
                        div
                        div
                        section
        獲取子節(jié)點(diǎn)
            父級(jí).children         獲取第一層子節(jié)點(diǎn)    √
            父級(jí).childNodes   不推薦用        ×
        獲取父節(jié)點(diǎn)
            獲取結(jié)構(gòu)父級(jí)
                子級(jí).parentNode
            獲取定位父級(jí)
                子級(jí).offsetParent
        獲取兄弟節(jié)點(diǎn)
            上一個(gè)
                obj.previousElementSibling
            下一個(gè)
                obj.nextElementSibling
        獲取首尾子節(jié)點(diǎn)
            首
                父級(jí).firstElementChild
                父級(jí).children[0];
            尾
                父級(jí).lastElementChild
                父級(jí).children[父級(jí).children.length-1]

        獲取信息
            盒子模型的寬高
                obj.offsetWidth         盒子模型寬度
                obj.offsetHeight        盒子模型高度
            獲取相對(duì)位置
                obj.offsetLeft
                obj.offsetTop
            獲取可視區(qū)寬高
                document.documentElement.clientWidth
                document.documentElement.clientHeight
--------------------------------------------------------------
    事件
        事件對(duì)象
            包含了事件的詳細(xì)信息
            切記：只能獲取鼠標(biāo)和鍵盤的
        獲取鼠標(biāo)在可視區(qū)中的位置
            ev.clientX/clientY
        獲取鼠標(biāo)在頁面中的位置
            ev.pageX/ev.pageY
        事件綁定(事件監(jiān)聽)
            防止事件沖突
            obj.addEventListener('sEv',fn,false);
            事件解綁
            obj.removeEventListener('sEv',fn,false);
        阻止默認(rèn)事件
            return false;
            但是遇到addEventListener不好使.
            用:  ev.preventDefault&&ev.preventDefault();
        事件流:
            DOM事件流
                冒泡階段        捕獲階段
            IE事件流
                冒泡階段
        onmosueover和onmouseout的bug
            解決：
                onmouseenter
                onmouseleave
        事件委托(事件派生，事件委派)
            給動(dòng)態(tài)元素加事件
            1.給父級(jí)加事件
            2.獲取事件源
                var oSrc = ev.srcElement||ev.target;
        DOMReady
            比window.onload快
            第一種         推薦
                document.addEventListener('DOMContentLoaded',function(){
                    //你的代碼
                },false);
            第二種
                document.onreadystatechange = function(){
                    if(document.readyState=='complete'){
                        //你的代碼
                    }
                };