冰凍三尺非一日之寒--js dom

    1. 寫頁面是以爲醜
        float,clear:both,margin,padding
        position:
            left：
        
        網上找模板
        HTML模板，BootStrap
    2. 背景圖片
        
HTML
    一大堆的標籤：塊級、行內
    
CSS
    position
    background
    text-align
    margin
    padding
    font-size
    z-index
    over-flow
    :hover
    opacity
    float (clear:both)
    line-height
    border
    color
    display
    
    補充：頁面佈局
          主站—
                <div class='pg-header'>
                       <div style='width:980px;margin:0 auto;'>
                           內容自動居中
                       </div>
                
                </div>
                <div  class='pg-content'></div>
                <div  class='pg-footer'></div>
          後臺管理佈局：
            position:
                fiexd    -- 永遠固定在窗口的某個位置
                relative -- 單獨無心義
                absolute -- 第一次定位，能夠在指定位置，滾輪滾動時，不在了。。。。
                
            a.
                左側菜單跟隨滾動條
            b.
                左側以及上不不動   ******


JavaScript


    六、for循環
    
        for(var item in [11,22,33]){
            console.log(item);
            continue;
        }
        
        var arra = [11,22,32,3]
        for(var i=0;i<arra.lenght;i=i+1){
            break;
        }
        
        while(條件){
        
        
        }
    七、條件語句
    
        if(){
        
        }else if(){
        
        }else{
        
        }
        
        ==
        ===
        
        name='3';
        
   
        switch(name){
            case '1':
                age = 123;
                break;
            case '2':
                age = 456;
                break;
            default :
                age = 777;
        }
        
    8. 函數
        function func(arg){
        
            return arg+1
        }
        var result = func(1)
        console.log(result);
        
        普通函數：
            function func(){
                
            }
        匿名函數：
            
            function func(arg){
            
                return arg+1
            }
            
            setInterval("func()", 5000);
            
            setInterval(function(){
                console.log(123);
            
            },5000)
            
        自執行函數(建立函數而且自動執行)：
            function func(arg){
                console.log(arg);
            }
            // func(1)
            
            (function(arg){
                console.log(arg);
            })(1)
    九、序列化
        JSON.stringify()   將對象轉換爲字符串
        JSON.parse()       將字符串轉換爲對象類型
        
    十、轉義
        客戶端（cookie）   =》 服務器端
        將數據通過轉義後，保存在cookie
        
    十一、eval
        python:
            val = eval(表達式)
                  exec(執行代碼)
        JavaScript:
            eval
    十二、時間
        Date類
        
        var d = new Date()
        
        d.getXXX  獲取
        d.setXXX  設置
        
    1三、做用域
        ================================ 1. 以函數做爲做用域 （let）================================
        
        其餘語言： 以代碼塊做爲做用域
                    public void Func(){
                        if(1==1){
                            string name = 'Java';
                            
                        }
                        console.writeline(name);
                        
                    }
                    Func()
                    // 報錯
                    
        Python：   以函數做爲做用域
                    狀況一：
                        def func():
                            if 1==1:
                                name = 'alex'
                            print(name)
                            
                        func()
                        // 成功
                    狀況二：
                        def func():
                            if 1==1:
                                name = 'alex'
                            print(name)
                            
                        func()
                        print(name)
                        // 報錯
                
        JavaScript:  以函數做爲做用域
        
                    function func(){
                        if(1==1){
                            var name = 'alex';
                        }
                        console.log(name);
                    }
                    func()
        
        ================================ 2. 函數的做用域在函數未被調用以前，已經建立 ================================
        
        function func(){
            if(1==1){
                var name = 'alex';
            }
            console.log(name);
        }
        
        ================= 3. 函數的做用域存在做用域鏈，而且也是在被調用以前建立 ==================
        示例一：
            xo = "alex";
            
            function func(){
                // var xo = 'eric';
                function inner(){
                    // var xo = 'tony';
                    console.log(xo);
                }
                
                inner()
            }
            
            func()
        
        示例二：
            xo = "alex";
            
            function func(){
                var xo = 'eric';
                function inner(){
                    
                    console.log(xo);
                }
                
                return inner;
            }
            
            var ret = func()
            ret()
        
        
        
        示例三：
            xo = "alex";
            
            function func(){
                var xo = 'eric';
                function inner(){
                    
                    console.log(xo);
                }
                var xo = 'tony';
                
                return inner;
            }
            
            var ret = func()
            ret()
        
        ================= 4. 函數內局部變量 聲明提早 ==================
        
        function func(){
            console.log(xxoo);
        }
        
        func();
        // 程序直接報錯
        
        function func(){
            console.log(xxoo);
            var xxoo = 'alex';
        }
        解釋過程當中：var xxoo;
        
        func();
        // undefined
        
    1四、JavaScript面向對象
        
        JavaScript面向對象
            function foo(){
                var xo = 'alex';
            }
            
            foo()
            
            
            
            function Foo(n){
                this.name = n;
                this.sayName = function(){
                    console.log(this.name);
                }
            }
            
            var obj1 = new Foo('we');
            obj1.name
            obj1.sayName()
            
            
            var obj2 = new Foo('wee');
            obj2.name
            obj2.sayName()
            ==============》
                a. this代指對象(python self)
                b. 建立對象時, new 函數()
        
        
        Python的面向對象：
            class Foo:
                def __init__(self,name):
                    self.name = name
                    
                def sayName(self):
                    print(self.name)
                    
            obj1 = Foo('we')

            obj2 = Foo('wee')
        
       
        原型：
        
            function Foo(n){
                this.name = n;
            }
            # Foo的原型
            Foo.prototype = {
                'sayName': function(){
                    console.log(this.name)
                }
            }
            
        
            obj1 = new Foo('we');
            obj1.sayName()
            
            obj2 = new Foo('wee');


DOM
    查找
        直接查找
            var obj = document.getElementById('i1')
        間接查找
            文件內容操做：
                innerText    僅文本
                innerHTML    全內容
                value
                    input    value獲取當前標籤中的值
                    select   獲取選中的value值（selectedIndex）
                    textarea value獲取當前標籤中的值
                
                搜索框的示例
    操做：      
            樣式操做：
                className
                classList
                    classList.add
                    classList.remove
                   
                   
                obj.style.fontSize = '16px';
                obj.style.backgroundColor = 'red';
                obj.style.color = "red"
                
                
            屬性操做：
                attributes
                getAttribute
                removeAttribute
                
            建立標籤，並添加到HTML中：
                a. 字符串形式
                
                b. 對象的方式
                    document.createElement('div')
                
                
            提交表單
                任何標籤經過DOM均可提交表單
                
                document.geElementById('form').submit()
            
            其餘：
                console.log()
                alert
                var v = confirm(信息)  v:true false
                
                location.href
                location.href = ""  # 重定向，跳轉
                location.reload()   # 頁面刷新
                location.href = location.href   < === > location.reload()
                
                
                var o1 = setInterval(function(){}, 5000)
                clearInterval(o1);
                
                var o2 = setTimeout(function(){}, 50000);
                clearTimeout(o2);
                
                var obj = setInterval(function(){
                    
                }, 5000)
                
                clearInterval(obj);
        
    事件：
        onclick，onblur，onfocus
        
        行爲  樣式  結構 相分離的頁面？
        js    css   html  
        
        綁定事件兩種方式：
            a. 直接標籤綁定 onclick='xxx()'  onfocus
            b. 先獲取Dom對象，而後進行綁定
                document.getElementById('xx').onclick
                document.getElementById('xx').onfocus
                
        this，當前觸發事件的標籤
            a. 第一種綁定方式
                <input id='i1' type='button' onclick='ClickOn(this)'>
                
                function ClickOn(self){
                    // self 當前點擊的標籤
                    
                }
            b. 第二種綁定方式
                <input id='i1' type='button' >
                document.getElementById('i1').onclick = function(){
                
                    // this 代指當前點擊的標籤
                }
            
                
        做用域示例：
                var myTrs = document.getElementsByTagName("tr");
                var len = myTrs.length;
                for(var i=0;i<len;i++){
                    // i=0,i=1,i=2
                    myTrs[i].onmouseover = function(){
                         this.style.backgroundColor = "red";
                    };

                }