JavaScript基礎視頻教程總結（091-100章）

時間 2019-12-06
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>091-100章總結</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>

<pre> 091. DOM簡介
什麼是DOM
• DOM，全稱Document Object Model文檔對象模型。
• JS中經過DOM來對HTML文檔進行操做。只要理解了DOM就能夠爲所欲爲的操做WEB頁面。
• 文檔– 文檔表示的就是整個的HTML網頁文檔
• 對象– 對象表示將網頁中的每個部分都轉換爲了一個對象。
• 模型– 使用模型來表示對象之間的關係，這樣方便咱們獲取對象（倒樹模型）。
節點
• 節點Node，是構成咱們網頁的最基本的組成部分，網頁中的每個部分均可以稱爲是一個節點。
• 好比：html標籤、屬性、文本、註釋、整個文檔等都是一個節點。
• 雖然都是節點，可是實際上他們的具體類型是不一樣的。
• 好比：標籤咱們稱爲元素節點、屬性稱爲屬性節點、文本稱爲文本節點、文檔稱爲文檔節點。
• 節點的類型不一樣，屬性和方法也都不盡相同。
• 經常使用節點分爲四類
– 文檔節點：整個HTML文檔
– 元素節點：HTML文檔中的HTML標籤
– 屬性節點：元素的屬性
– 文本節點：HTML標籤中的文本內容
節點的屬性

文檔節點（document）
• 文檔節點document，表明的是整個HTML文檔，網頁中的全部節點都是它的子節點。
• document對象做爲window對象的屬性存在的，咱們不用獲取能夠直接使用。
• 經過該對象咱們能夠在整個文檔訪問內查找節點對象，並能夠經過該對象建立各類節點對象。
元素節點（Element）
• HTML中的各類標籤都是元素節點，這也是咱們最經常使用的一個節點。
• 瀏覽器會將頁面中全部的標籤都轉換爲一個元素節點，咱們能夠經過document的方法來獲取元素節點。
• 好比：
– document.getElementById()
– 根據id屬性值獲取一個元素節點對象。
屬性節點（Attr）
• 屬性節點表示的是標籤中的一個一個的屬性，這裏要注意的是屬性節點並不是是元素節點的子節點，而是元素節點的一部分。
• 能夠經過元素節點來獲取指定的屬性節點。
• 例如：
– 元素節點.getAttributeNode("屬性名");
• 注意：咱們通常不使用屬性節點。
文本節點（Text）
• 文本節點表示的是HTML標籤之外的文本內容，任意非HTML的文本都是文本節點（包括換行和空格）。
• 它包括能夠字面解釋的純文本內容。
• 文本節點通常是做爲元素節點的子節點存在的。
• 獲取文本節點時，通常先要獲取元素節點。在經過元素節點獲取文本節點。
• 例如：
– 元素節點.firstChild;
– 獲取元素節點的第一個子節點，通常爲文本節點。
</pre>
<button id="btn001">我是一個按鈕</button>
<script type="text/javascript">
    console.log("第091");
    
    /*
     * 瀏覽器已經爲咱們提供 文檔節點 對象這個對象是window屬性
     *  能夠在頁面中直接使用，文檔節點表明的是整個網頁
     */
    console.log(document);
    //獲取到button對象
    var btn001 = document.getElementById("btn001");
    //修改按鈕的文字
    btn001.innerHTML = "I'm Button";
</script>

<pre> 092. 事件的簡介
• 事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。
• JavaScript 與 HTML 之間的交互是經過事件實現的。
• 對於 Web 應用來講，有下面這些表明性的事件：點擊某個元素、將鼠標移動至某個元素上方、按下鍵盤上某個鍵，等等。
事件發生之後要處理這個事件（好比你親了某人一下，某人有什麼反應）。
</pre>
<!--
    咱們能夠在事件對應的屬性中設置一些js代碼，這樣當事件被觸發時，這些代碼將會執行
    這種寫法咱們稱爲結構和行爲耦合，不方便維護，不推薦使用 
-->
<button id="btn" onclick="alert('討厭，你點我幹嗎！');">我是一個按鈕點我</button>
<button id="btn002">我是一個按鈕點我</button>
<script type="text/javascript">
    console.log("第092");
    
    /*
     * 事件，就是用戶和瀏覽器之間的交互行爲，
     *  好比：點擊按鈕，鼠標移動、關閉窗口。。。
     */
    //獲取按鈕對象
    var btn002 = document.getElementById("btn002");
    /*
     * 能夠爲按鈕的對應事件綁定處理函數的形式來響應事件
     *  這樣當事件被觸發時，其對應的函數將會被調用
     */
    
    //綁定一個單擊事件
    //像這種爲單擊事件綁定的函數，咱們稱爲單擊響應函數
    btn002.onclick = function(){
        alert("你還點~~~");
    };
    
</script>

<pre> 093. 文檔的加載
瀏覽器在加載一個頁面時，是按照自上向下的順序加載的，讀取到一行就運行一行,若是將script標籤寫到頁面的上邊，在代碼執行時，頁面尚未加載，頁面沒有加載DOM對象也沒有加載，會致使沒法獲取到DOM對象。
onload事件會在整個頁面加載完成以後才觸發，爲window綁定一個onload事件，該事件對應的響應函數將會在頁面加載完成以後執行，這樣能夠確保咱們的代碼執行時全部的DOM對象已經加載完畢了。
注意：window.onload一個頁面只能寫一個，多個一塊兒會執行最後一個，能夠寫個方法解決。
</pre>
<script type="text/javascript">
    console.log("第093");
    
    function btn003(){
        //獲取id爲btn的按鈕
        var btn003 = document.getElementById("btn003");
        //爲按鈕綁定一個單擊響應函數
        btn003.onclick = function(){
            alert("hello");
        };
    };
</script>
<button id="btn003">我是一個按鈕</button>

<pre> 094. DOM查詢
獲取元素節點
• 經過document對象調用
1. getElementById()
– 經過id屬性獲取一個元素節點對象
2. getElementsByTagName()
– 經過標籤名獲取一組元素節點對象,僞數組
3. getElementsByName()
– 經過name屬性獲取一組元素節點對象
</pre>

<pre> 095. DOM查詢2
獲取元素節點的子節點
• 經過具體的元素節點調用
1. getElementsByTagName()
– 方法，返回當前節點的指定標籤名後代節點
2. childNodes
– 屬性，表示當前節點的全部子節點
3. firstChild
– 屬性，表示當前節點的第一個子節點
4. lastChild
– 屬性，表示當前節點的最後一個子節點
</pre>

<pre> 096. DOM查詢3
獲取父節點和兄弟節點
• 經過具體的節點調用
1. parentNode
– 屬性，表示當前節點的父節點
2. previousSibling
– 屬性，表示當前節點的前一個兄弟節點
3. nextSibling
– 屬性，表示當前節點的後一個兄弟節點
</pre>

<div class="clearfix">
    <div id="total">
        <div class="inner">
            <p>你喜歡哪一個城市?</p>
            <ul class="clearfix" id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>東京</li>
                <li>首爾</li>
            </ul>
            <p>你喜歡哪款單機遊戲?</p>
            <ul class="clearfix" id="game">
                <li id="rl">紅警</li>
                <li>實況</li>
                <li>極品飛車</li>
                <li>魔獸</li>
            </ul>
            <p>你手機的操做系統是?</p>
            <ul id="phone"> <li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
        </div>
        <div class="inner">
            <p>gender:</p>
            <p>
                <span>
                    <input class="hello" id="male" type="radio" name="gender" value="male"/>
                    <label for="male">male</label>
                </span>
                <span>
                    <input class="hello" id="female" type="radio" name="gender" value="female"/>
                    <label for="female">female</label>
                </span>
            </p>
            <p>name:<input type="text" name="name" id="username" value="abcde"/></p>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">查找#bj節點</button></div>
        <div><button id="btn02">查找全部li節點</button></div>
        <div><button id="btn03">查找name=gender的全部節點</button></div>
        <div><button id="btn04">查找#city下全部li節點</button></div>
        <div><button id="btn05">返回#city的全部子節點</button></div>
        <div><button id="btn06">返回#phone的第一個子節點</button></div>
        <div><button id="btn07">返回#bj的父節點</button></div>
        <div><button id="btn08">返回#android的前一個兄弟節點</button></div>
        <div><button id="btn09">返回#username的value屬性值</button></div>
        <div><button id="btn10">設置#username的value屬性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
</div>
<script type="text/javascript">
    console.log("第094,095,096");
    
    // 定義一個通用點擊事件函數
    function myClick(btn,fun){
        var btn = document.getElementById(btn);
        btn.onclick = fun;
    };
    myClick("btn01",function(){
        var bj = document.getElementById('bj');
        alert(bj.innerHTML);
    });
    myClick("btn02",function(){
        var lis = document.getElementsByTagName("li"); //一組元素節點對象
        //alert(lis[0]);
        for(var i=0 , liLen = lis.length; i<lis.length; i++){
            console.log(lis[i].innerHTML);
        }
    });
    myClick("btn03",function(){
        var names = document.getElementsByName("gender");//一組元素節點對象
        /*
         * innerHTML用於獲取元素內部的HTML代碼的
         *  對於自結束標籤，這個屬性沒有意義
         */
        //alert(inputs[i].innerHTML);
        /*
         * 若是須要讀取元素節點屬性，
         *  直接使用 元素.屬性名
         *      例子：元素.id 元素.name 元素.value
         *      注意：class屬性不能採用這種方式，
         *          讀取class屬性時須要使用 元素.className
         */
        for(var i=0;i<names.length;i++){
            alert(names[i].value);
        }
    })
    myClick("btn04",function(){
        var city = document.getElementById('city');
        var lis = city.getElementsByTagName('li'); //返回當前節點的指定標籤名後代節點
        //alert(lis[0]);
        for(var i=0;i<lis.length;i++){
            alert(lis[i].innerHTML);
        }
    });
    myClick("btn05",function(){
        var city = document.getElementById('city');
        var cns = city.childNodes;
        /*
         * childNodes屬性會獲取包括文本節點在內的全部節點
         * 根據DOM標籤標籤間空白也會當成文本節點
         * 注意：在IE8及如下的瀏覽器中，不會將空白文本當成子節點，
         *  因此該屬性在IE8中會返回4個子元素而其餘瀏覽器是9個
         */
        //alert(cns.length);
        for(var i=0;i<cns.length;i++){
            alert(cns[i]);
        }
        /*
         * children屬性能夠獲取當前元素的全部子元素
         */
        var cns2 = city.children;
        alert(cns2.length);
    });
    myClick("btn06",function(){
        var phone = document.getElementById('phone');
        var fir = phone.firstChild; // 獲取到當前元素的第一個子節點（包括空白文本節點）
        alert(fir);
        //firstElementChild獲取當前元素的第一個子元素
        /*
         * firstElementChild不支持IE8及如下的瀏覽器，
         *  若是須要兼容他們儘可能不要使用
         */
        fir = phone.firstElementChild;
        alert(fir);
    });
    myClick("btn07",function(){
        var bj = document.getElementById('bj');
        var pn = bj.parentNode;
        alert(pn.innerHTML);
        /*
         * innerText
         *  - 該屬性能夠獲取到元素內部的文本內容
         *  - 它和innerHTML相似，不一樣的是它會自動將html標籤去除
         */
        alert(pn.innerText);
    });
    myClick("btn08",function(){
        var android = document.getElementById('android');
        var ps = android.previousSibling; //前一個兄弟節點（也可能獲取到空白的文本）
        alert(ps);
        //previousElementSibling獲取前一個兄弟元素，IE8及如下不支持
        var ps = android.previousElementSibling;
        
        alert(ps);
    });
    myClick("btn09",function(){
        var username = document.getElementById('username');
        var um = username.value;
        alert(um);
    });
    myClick("btn10",function(){
        var username = document.getElementById('username');
        username.value = "今每天氣真好。";

    });
    myClick("btn11",function(){
        var bj = document.getElementById('bj');
        alert (bj.innerHTML);
        alert (bj.innerText);
        alert(bj.firstChild.nodeValue);
    });
</script>

<pre> 097. 圖片切換的練習 </pre>
<div class="img-exercise">
    <p id="infor"></p>
    <img src="images/1.jpg" alt="1" />
    <button id="prev">上一個</button>
    <button id="next">下一個</button>
</div>
<script type="text/javascript">
    console.log("第097");
    
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var img = document.getElementsByTagName('img')[0];
    var imgArray = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
    var imgArrayLength = imgArray.length;
    var infor = document.getElementById('infor');
    var index = 0;
    infor.innerHTML = "一共"+imgArrayLength+"張圖片，當前是第"+(index+1)+"張。";
    prev.onclick = function(){
        index--;
        if(index <0 ){
            index = imgArrayLength -1;
        }
        img.src = imgArray[index];
        infor.innerHTML = "一共"+imgArrayLength+"張圖片，當前是第"+(index+1)+"張。";
    }
    next.onclick = function(){
        index++;
        if(index > imgArrayLength -1 ){
            index = 0;
        }
        img.src = imgArray[index];
        infor.innerHTML = "一共"+imgArrayLength+"張圖片，當前是第"+(index+1)+"張。";
    }
</script>

<pre> 098. 全選練習1 </pre>
<pre> 099. 全選練習2 </pre>
<pre> 100. 全選練習3 </pre>
<form method="post" action="">
    <p>你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選 </p>
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="籃球" />籃球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全　選" />
    <input type="button" id="checkedNoBtn" value="全不選" />
    <input type="button" id="checkedRevBtn" value="反　選" />
    <input type="button" id="sendBtn" value="提　交" />
</form>
<script type="text/javascript">
    console.log("第098,099,100");
    
    function inClick(inBtn,fun){
        var inBtn = document.getElementById(inBtn);
        inBtn.onclick = fun;
    };
    
    function moreSelect(){
        var items = document.getElementsByName('items');
        var itemsLength = items.length;
        var checkedAllBox = document.getElementById('checkedAllBox');
        // 全選
        inClick('checkedAllBtn',function(){
            for(var i=0;i<itemsLength;i++){
                items[i].checked = true;
            }
            checkedAllBox.checked = true;
        })
        // 全不選
        inClick('checkedNoBtn',function(){
            for(var i=0;i<itemsLength;i++){
                items[i].checked = false;
            }
            checkedAllBox.checked = false;
        })
        // 反選
        inClick('checkedRevBtn',function(){
            for(var i=0;i<itemsLength;i++){
                /*if(items[i].checked){
                    items[i].checked = false;
                }else{
                    items[i].checked = true;
                }*/
                items[i].checked = !items[i].checked;
            }
            checkedAllBox.checked = !checkedAllBox.checked;
        })
        // 提交
        inClick('sendBtn',function(){
            for(var i=0;i<itemsLength;i++){
                if(items[i].checked){
                    alert(items[i].value);
                }
            }
        })
        // 全選/全不選
        inClick('checkedAllBox',function(){
            for(var i=0;i<itemsLength;i++){
                items[i].checked = this.checked;
            }
        })
        // items點擊
        /*
         * 若是四個多選框全都選中，則checkedAllBox也應該選中
         * 若是四個多選框沒都選中，則checkedAllBox也不該該選中
         */
        for(var i=0;i<itemsLength;i++){
            items[i].onclick = function(){
                checkedAllBox.checked = true;
                for (var j=0; j<items.length; j++) {
                    if(!items[j].checked){
                        checkedAllBox.checked = false;
                        break;
                    }
                }
            }
        }
    }
</script>

<pre>
附加：window.onload 加載多個函數的的兩種方法
</pre>
<script type="text/javascript">
    function a(){
        console.log("a");
    }
    function b(){
        console.log("b");
    }
    function c(){
        console.log("c");
    }
    //1
    window.onload =function() { 
        a();
        b(); 
        c();
    }
    //2
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {  
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }
    
    addLoadEvent(a);
    addLoadEvent(b);
    addLoadEvent(c);
    addLoadEvent(btn003);
    addLoadEvent(moreSelect);
</script>

</body>
</html>