JS進階第一天

函數節流

JS基礎講過事件，有這麼一個窗口事件，窗口改變時觸發 window.onresize 滾動條觸發事件 window.onscroll
　　函數節流（throttle）當達到了一定的時間間隔就會執行一次；可以理解爲是縮減執行頻率；
　　控制好處理頻率，可以確保瀏覽器不會在極短的時間內進行過多次的計算。
　　函數節流（throttle）：一個水龍頭在滴水，可能一次性會滴很多滴，但是我們只希望它每隔 500ms 滴一滴水，保持這個頻率。即我們希望函數在以一個可以接受的頻率重複調用。
　　使用原因：DOM操作比起非DOM交互，需要更多的內存和CPU時間，連續嘗試過多的DOM操作可能會導致瀏覽器掛起，甚至崩潰。DOM操作太珍貴，前端優化目的之一就是儘可能減少DOM操作。
　　應用場景：只要代碼是週期執行的，都應該節流。鼠標移動mousemove事件、滾動條滾動scroll事件，瀏覽器窗口改變resize事件等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body style="height:2000px">

</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    //獲取元素id值 

    var flag = true; //創建鎖
    window.onscroll = function(params) {

        if (!flag) { //進行條件判斷
            return;
        }

        flag = false
        setInterval(function(params) {
            flag = !flag;
            console.log("堯子陌")
        }, 5000)
    }




    /*var flag;
    console.log(flag) 

    window.onscroll = function(params) {
        if (flag) {
            return
        }
        flag = true;
        setInterval(function() {
            console.log("叫爸爸 孩子")
                flag = true
        }, 2000)
    }*/
</script>


</html>

javascript回顧

Javascript簡介：
    網警公司  布蘭登·艾奇  前身LiveScipt；
    基於對象、基於客戶端瀏覽器、事件驅動的腳本語言；
    輕量級但功能強大的類編程語言；
    是一門動態的、弱類型語言；
    用於網頁遊戲開發、交互、表單驗證等等；

JavaScript組成:
    ECMAScript核心語法:常量、變量、數據類型、運算符、流程語句、函數、內置對象等等
    BOM:Browser Object Model 瀏覽器對象 封裝操作瀏覽器相關的API
        window
        history
        navaditor
        location
        等...  
    DOM:Document Object Model 文檔對象模型 操作文檔相關API
        頁面加載後，會形成DOM True，自動創建DOM對象

DOM節點類型和相關屬性

DOM介紹：
1 什麼是 DOM？
DOM(Document Object Model)文檔對象模型，用來表示和操作 html 或 xml 文檔內容的基礎 API;
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型 DOM，而 DOM 模型被構造爲對象的樹（Dom Html Tree）;
DOM 包含了所有的 html 標籤元素、文本字符串、甚至是 html 註釋；
利用 DOM 中的屬性和方法，使程序有能力動態的訪問和更新文檔中的內容、結構以及樣式，這樣就使得頁面的交互性大大增強；
2 DOM 有什麼用？
通過 DOM 操作能夠改變頁面中所有 HTML 元素；
通過 DOM 操作能夠改變頁面中所有 HTML 屬性；
通過 DOM 操作能夠改變頁面中所有 CSS 樣式；
通過 DOM 操作能夠對頁面中所有事件做出反應；
3 DOM Tree 介紹
DOM 把層次中的每一個對象都稱之爲節點，這個層次結構可以看作樹形結構，就如同我們的目錄，一個根目錄下有子目錄，子目錄下面還有子目錄。
4 DOM 樹中所有的對象都是節點，如：文檔節點、元素節點、屬性節點、文本節點、註釋節點等；
節點相關的屬性如下：
nodeName 獲取節點的名稱，只讀
nodeValue 獲取節點內容（適用於文本節點和註釋節點）
nodeType 獲取節點類型，只讀
元素節點 1
屬性節點 2
文本節點 3
註釋節點 8
文檔節點 9
5. 獲取元素的方式
getElementById() 通過id值獲取唯一元素
getElementsByTagName() 通過標籤名獲取所有對應的元素（類數組 HTML Collection）
getElementsByClassName() 通過類名獲取所有對應的元素（類數組 HTML Collection）
getElementsByName() 通過name值獲取所有元素（類數組 NodeList）

    querySelector()  通過指定的選擇器匹配第一個符合條件的元素
    querySelectorAll() 通過指定的選擇器匹配所有符合條件的元素（類數組 NodeList）

6. 層級關係訪問相關屬性
    節點遍歷
        previousSibling    上一個兄弟節點
        nextSibling        下一個兄弟節點
        parentNode         獲取父節點
        firstChild         獲取第一個子節點
        lastChild          獲取最後一個子節點
        childNodes         獲取所有的子節點，是一個類數組（NodeList 通過length屬性獲取子節點個數）

    元素遍歷
        previousElementSibling  獲取上一個兄弟元素
        nextElementSibling      獲取下一個兄弟元素
        firstElementChild       獲取第一個子元素
        lastElementChild        獲取最後一個子元素
        children                獲取所有的子元素，是一個類數組（HTML Collection 通過length屬性獲取子節點個數）
        childElementCount       獲取所有子元素的數量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li><a href="javascript:;">網易</a></li>
        <li><a href="javascript:;">騰訊</a></li>
        <li><a href="javascript:;" id="item">新浪</a></li>
        <li><a href="javascript:;">阿里巴巴</a></li>
        <li id="item4"><a href="javascript:;">360</a><span>堯子陌</span></li>
        <li><a href="javascript:;">百度</a></li>
        <li><a href="javascript:;">知乎</a></li>
        <li><a href="javascript:;">愛奇藝</a></li>
    </ul>
</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    //獲取元素
    var item = document.getElementById("item");
    console.log(item);

    var item4 = document.getElementById("item4");
    console.log(item4);


    //查看item的節點屬性;
    console.log("元素的節點類型", item.nodeType) //元素的節點類型
    console.log("元素的節點值", item.nodeValue) //元素的節點值值
    console.log("元素的名稱", item.nodeName) //元素的節點名稱 爲大寫的A

    //查找item的上一個兄弟節點和下一個兄弟節點
    console.log("item的上一個兄弟元素", item.previousSibling) //查找上一個兄弟節點
    console.log("查找item的下一個兄弟節點", item.nextSibling) //查找下一個兄弟節點

    //訪問父節點 祖先節點
    console.log("item的父節點", item.parentNode) //item的父節點
    console.log("item的父節點父節點", item.parentNode.parentNode); //item的父節點的父節點
    console.log("查看item的父節點的父節點的父節點", item.parentNode.parentNode.parentNode) //item的父節點的父節點的父節點
    console.log("item的父節點父節點父節點父節點", item.parentNode.parentNode.parentNode.parentNode); //item的父節點父節點父節點父節點
    console.log("item的祖先節點", item.parentNode.parentNode.parentNode.parentNode.parentNode) //item的祖先節點

    //訪問子節點 後代節點
    var firCh = item4.firstChild; //訪問第一個子節點
    console.log(firCh); //查看第一個子節點


    var firlast = item4.lastChild //訪問最後一個子節點
    console.log(firlast) //訪問最後一個子節點

    var all = item4.childNodes //查看全部子節點
    console.log(all) //打印全部子節點

    var tch = all[0]; //根據索引拿到節點
    console.log(tch) //打印節點

    //訪問子元素的節點 後代節點
    var fir = item4.firstElementChild //第一個子元素節點
    console.log(fir)
    var las = item4.lastElementChild //最後一個子元素節點
    console.log(las)

    var allc = item4.children //子元素節點
    console.log(allc, allc.length)

    var attc = all[0];

    console.log(attc)


    var fic = attc.firstChild //最一個子節點
    console.log(fic)
</script>

</html>

DOM創建節點和追加節點

創建節點 
    document.creatElement("tagName") （最常用）創建元素節點，返回一個 element 對象 
    document.creatTextNode("data") 創建新的文本節點，返回新創建的 Text 節點 
    document.createAttribute("attributename") 創建一個指定名稱的屬性，並返回 Attr 對象屬性
追加節點
    element.appendChild(newnode) 在指定節點的最後一個子節點列表之後添加一個新的子節點
插入節點 
    element.insertBefore(newnode,oldnode) 在已有的子節點前插入一個新的子節點
刪除、替換和克隆子節點 
    element.removeChild(node) 從子節點列表中刪除某個節點，若果刪除成功，此方法返回被刪除的節點；如果 失敗，則返回 null 
    element.replaceChild(newNode,oldNode) 實現子節點(對象)的替換，返回被替換對象的引用 
    element.remove(index) 用於從下拉列表刪除選項（參數 index，規定要刪除的選項的索引號） 
        注：如果不添加參數，可以用於移除當前元素 如：document.getElementById('div').remove();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <button id="bth">
        堯子陌
    </button>
    <ul id="con"></ul>
</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    // 獲取元素id
    /*  var bth = document.getElementById("bth");
      var con = document.getElementById("con");
      //設置點擊事件
      var cont = 0;

      bth.onclick = function(params) {
          //創建一個新元素
          var li = document.createElement("li");
          //設置li的樣式
          li.style.backgroundColor = "red";
          //將li追加到ul裏面
          con.appendChild(li);
          //爲li創建屬性
          var att = document.createAttribute("type"); //創建屬性

          att.value = "circle" //給屬性添加屬性值

          li.setAttributeNode(att) //追加到li上面

          li.innerHTML = "堯子陌" + cont++


      }*/
</script>
<script>
    var bth = document.getElementById("bth");
    var con = document.getElementById("con");
    var cont = 0;
    bth.onclick = function(params) {
        var li = document.createElement("li");
        con.appendChild(li);
        li.innerHTML = "堯子陌" + cont++
            li.style.backgroundColor = "yellow"
        li.style.cssText = "list-style:none;font-family:楷體" //注意使用;
    }
</script>

</html>

DOM插入更換克隆節點

創建節點 
    document.creatElement("tagName") （最常用）創建元素節點，返回一個 element 對象 
    document.creatTextNode("data") 創建新的文本節點，返回新創建的 Text 節點 
    document.createAttribute("attributename") 創建一個指定名稱的屬性，並返回 Attr 對象屬性
追加節點
    element.appendChild(newnode) 在指定節點的最後一個子節點列表之後添加一個新的子節點
插入節點 
    element.insertBefore(newnode,oldnode) 在已有的子節點前插入一個新的子節點
替換節點        
    element.replaceChild(newNode,oldNode) 實現子節點(對象)的替換，返回被替換對象的引用
克隆節點
    cloneNode(boolean) 方法可創建指定的節點的精確拷貝
        注：本方法將複製並返回調用它的節點的副本。如果傳遞給它的參數是 true，它還將遞歸複製當前節點的所有子孫節點。否則，它只複製當前節點。
移除節點
    element.removeChild(node) 從子節點列表中刪除某個節點，若果刪除成功，此方法返回被刪除的節點；如果 失敗，則返回 null  
    element.remove(index) 用於從下拉列表刪除選項（參數 index，規定要刪除的選項的索引號） 
        注：如果不添加參數，可以用於移除當前元素 如：document.getElementById('div').remove();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="bth">點擊追加新的克隆節點</button>
    <button id="bth2">點擊追加新的克隆節點（true）</button>
    <button id="bth3">點擊插入新的節點</button>
    <button id="bth4">點擊更換節點</button>

    <ul id="con">
        <li><a href="javascript:;">中國</a></li>
        <li>
            <a href="javascript:;">俄羅斯</a>
        </li>
        <li>
            <a href="javascript:;">巴基斯坦</a>
        </li>
        <li>
            <a href="javascript:;">美國</a>
        </li>
        <li>
            <a href="javascript:;">英國</a>
        </li>
        <li>
            <a href="javascript:;">法國</a>
        </li>
    </ul>
</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    // 獲取元素
    var bth = document.getElementById("bth");
    var bth2 = document.getElementById("bth2");
    var bth3 = document.getElementById("bth3");
    var bth4 = document.getElementById("bth4");
    var con = document.getElementById("con")

    //克隆第一條
    bth.onclick = function(params) {
        var cole = con.firstElementChild.cloneNode(); //只會克隆節點  不會克隆後代節點
        con.appendChild(cole)
    }

    bth2.onclick = function(params) {
        var cole2 = con.firstElementChild.cloneNode(true); //不僅會克隆節點 而且還會克隆後代節點;
        con.appendChild(cole2)
    }

    bth3.onclick = function name(params) {
        var li = document.createElement("li");
        li.innerHTML = "堯子陌  真帥氣";
        con.insertBefore(li, con.children[2]) //在某個節點之前插入新的節點

    }

    bth4.onclick = function(params) {
        var li = document.createElement("li");
        li.innerHTML = "臨風笑卻世間 ";
        con.replaceChild(li, con.children[3]) //用新的節點插入指定節點

    }
</script>

</html>

DOM 刪除節點

創建節點 
    document.creatElement("tagName") （最常用）創建元素節點，返回一個 element 對象 
    document.creatTextNode("data") 創建新的文本節點，返回新創建的 Text 節點 
    document.createAttribute("attributename") 創建一個指定名稱的屬性，並返回 Attr 對象屬性
追加節點
    element.appendChild(newnode) 在指定節點的最後一個子節點列表之後添加一個新的子節點
插入節點 
    element.insertBefore(newnode,oldnode) 在已有的子節點前插入一個新的子節點
替換節點        
    element.replaceChild(newNode,oldNode) 實現子節點(對象)的替換，返回被替換對象的引用
克隆節點
    cloneNode(boolean) 方法可創建指定的節點的精確拷貝
        注：本方法將複製並返回調用它的節點的副本。如果傳遞給它的參數是 true，它還將遞歸複製當前節點的所有子孫節點。否則，它只複製當前節點。
移除節點
    element.removeChild(node) 從子節點列表中刪除某個節點，若果刪除成功，此方法返回被刪除的節點；如果 失敗，則返回 null  
    element.remove(index) 用於從下拉列表刪除選項（參數 index，規定要刪除的選項的索引號） 
        注：如果不添加參數，可以用於移除當前元素 如：document.getElementById('div').remove();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul id="con">
        <li>
            <a href="javascript:;">我自關山點酒 千秋皆入喉</a>
        </li>
        <li>
            <a href="javascript:;">  更有沸雪酌與風雲某</a>
        </li>
        <li>
            <a href="javascript:;">2015年的某一天</a>
        </li>
        <li>
            <a href="javascript:;">我與你邂逅</a>
        </li>
        <li>
            <a href="javascript:;">那是很晴朗的一天</a>
        </li>
        <li>
            <a href="javascript:;">真的很開心</a>
        </li>
    </ul>
</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    // 需求一： 點擊新聞  新聞消失
    //獲取新的元素
    var con = document.getElementById("con");
    //獲取li的元素
    var li = document.querySelectorAll("li");
    console.log(li)

    //進行for循環
    for (var i = 0; i < li.length; i++) {
        li[i].onclick = function(params) {
            // this.remove()
            con.removeChild(this) //ul移除當前的孩子


        }
    }
</script>





</html>

DOM 刪除節點

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li><a href="javascript:;">鋤禾日當午</a><button>點擊刪除當前按鈕</button></li>
        <li><a href="javascript:;">旱地禾下土</a><button>點擊刪除當前按鈕</button></li>
        <li>
            <a href="javascript:;">誰知盤中餐</a><button>點擊刪除當前按鈕</button></li>
        <li>
            <a href="javascript:;">粒粒皆辛苦</a><button>點擊刪除當前按鈕</button></li>
        <li>
            <a href="javascript:;">窗前明月光</a><button>點擊刪除當前按鈕</button></li>
        <li>
            <a href="javascript:;">疑是地上霜</a><button>點擊刪除當前按鈕</button></li>
    </ul>
</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    var bth = document.querySelectorAll("button");
    console.log(bth)

    // 進行for循環
    for (var i = 0; i < bth.length; i++) {
        bth[i].onclick = function() {
            this.parentNode.remove()
        }
    }
</script>

</html>

DOM remove()節點

element.remove(index) 用於從下拉列表刪除選項（參數 index，規定要刪除的選項的索引號） 
    注：如果不添加參數，可以用於移除當前元素 如：document.getElementById('div').remove();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="bth">click me</button>
    <select name="" id="sth">
       <option >臨風笑卻世間</option>
       <option >hello word</option>
       <option >中國  我愛你</option>
       <option >偉大的中國</option>
       <option >永遠不要和傻逼一般見識</option>
       <option >狗要你一口 難道你還要咬狗嗎</option>
   </select>
</body>
<script src="./js文件/jquery-1.12.4.js"></script>
<script>
    //首先獲取元素
    var bth = document.getElementById("bth");
    console.log(bth);

    var options = document.getElementsByTagName("option");
    console.log(options)

    var sth = document.getElementById("sth")

    // 刪除指定的索引
    bth.onclick = function() {
        for (var i = 0; i < options.length; i++) {
            if (options[i].selected) {
                sth.remove(i)
                console.log(i)

            }

        }

    }
</script>

</html>

堯子陌

發佈了46 篇原創文章 · 獲贊 0 · 訪問量 1327

私信關注

函數節流

javascript回顧

DOM節點類型和相關屬性

DOM創建節點和追加節點

DOM插入更換克隆節點

DOM 刪除節點

DOM 刪除節點

DOM remove()節點

JS進階第一天

css 3D

JQuery第四天

JS進階第四天

ES5第二天

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

JS進階第一天

函數節流

javascript回顧

DOM節點類型和相關屬性

DOM創建節點和追加節點

DOM插入 更換 克隆節點

DOM 刪除節點

DOM 刪除節點

DOM remove()節點

DOM插入更換克隆節點