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

時間  2020-05-22
標籤 javascript 基礎 視頻 教程 總結 欄目 JavaScript 简体版
原文   原文鏈接 
<!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>

全部基礎課程連接：javascript

 1.JavaScript基礎視頻教程總結（001-010章）           2.JavaScript基礎視頻教程總結（011-020章）          3. JavaScript基礎視頻教程總結（021-030章）        4. JavaScript基礎視頻教程總結（031-040章）css

5. JavaScript基礎視頻教程總結（041-050章）           6. JavaScript基礎視頻教程總結（051-060章）         7. JavaScript基礎視頻教程總結（061-070章）        8. JavaScript基礎視頻教程總結（071-080章）html

9. JavaScript基礎視頻教程總結（081-090章）          10. JavaScript基礎視頻教程總結（091-100章）        11. JavaScript基礎視頻教程總結（101-110章）      12. JavaScript基礎視頻教程總結（111-120章）java

13. JavaScript基礎視頻教程總結（121-130章）        14. JavaScript基礎視頻教程總結（131-140章）node

 另外，歡迎關注個人新浪微博android

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程