Javascript-API-DOM-全選反選、Tab欄切換案例、節點的操作、自定義屬性的操作、

使用對象的方式操作HTML和CSS

步驟：

  1、獲取元素對象

  	使用id、類名、標籤名或css選擇器獲得元素對象

  		getElementById()

  		getElementsByTagName

  		getElementsByClassName

  		querySelector()

  		querySelectorAll()

  	(節點操作)使用元素間的關係獲得元素對象

  		父子關係

  			parentNode： 獲取父元素

  			children：獲取所有子元素的僞數組

  			firstElementChild：相當於 children[0]

  			lastElementChild:  相當於 children[children.length - 1]

  		兄弟關係

  			nextElementSibling： 下一個兄弟元素

  			previousElementSibling：上一個兄弟元素

  	創建新的元素對象：

  			document.createElement('標籤名') ： 創建一個新的元素對象 			添加元素對象：

  			父元素.appendChild(子元素)： 把子元素對象追加到父元素的最後

  			父元素.insertBefore(子元素, 指定元素)：把子元素添加到指定元素之前。


  2、操作元素對象

  	操作屬性：

  			原生屬性：

  					img的src

  					a的href

  			表單元素的屬性：

  					type: input標籤類型

  					value: 表單項的值

  					disabled： 禁用

  					checked： 單選和複選框元素對象

  					selected：下拉列表框中選項被選中

  			自定義屬性是指程序員自己定義的屬性。原生屬性指標籤默認有的屬性（img默認有src屬性、a標籤的href等等）

  				setAttribute(屬性名, 屬性值)： 給元素設置自定義屬性

  				getAttribute(屬性名)： 根據屬性名獲取屬性值

  				 removeAttribute(屬性名)： 刪除自定義屬性

  				建議自定義屬性以data-開頭

  	操作文本內容：

  		innerHTML

  		innerText

  	操作樣式：

  		style

  		className

  	綁定事件：

  		onclick

  		onmouseover

  		onmouseout

思想：

  排他思想：

  	幹掉所有人，留下我自己。

this：

     誰調用我，我就代表誰（誰發生的事件，this就代表誰。）

排他思想

如果有同一組元素，我們想要某一個元素實現某種樣式，需要用到循環的排他思想算法：

所有元素全部清除樣式（幹掉其他人）

給當前元素設置樣式（留下我自己）

注意順序不能顛倒，首先幹掉其他人，再設置自己

    <button>按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
    <button>按鈕4</button>
    <button>按鈕5</button>
    <script>
        // 1. 獲取所有按鈕元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是僞數組  裏面的每一個元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我們先把所有的按鈕背景顏色去掉  幹掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然後才讓當前的元素背景顏色爲pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
    </script>

百度換膚

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 獲取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循環註冊事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我們點擊圖片的路徑   images/2.jpg
                // console.log(this.src);
                // 把這個路徑 this.src 給body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

表格經過高亮

  <script>
        // 1.獲取元素 獲取的是 tbody 裏面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循環綁定註冊事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠標經過事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠標離開事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>

全選與反選

 <script>
        // 1. 全選和取消全選做法：  讓下面所有複選框的checked屬性（選中狀態） 跟隨 全選按鈕即可
        // 獲取元素
        
        var j_cbAll = document.getElementById('j_cbAll'); 
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); 
        // 全選按鈕註冊事件
        j_cbAll.onclick = function() {
                // this.checked 當前複選框的選中狀態
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
         }
         // 給所有的子複選框註冊單擊事件
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全選按鈕是否選中
                var flag = true;
                // 每次點擊下面的複選框都要循環檢查者4個小按鈕是否全被選中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; 
                    }
                }
                // 設置全選按鈕的狀態
                j_cbAll.checked = flag;
            }
        }
    </script>

自定義屬性操作

獲取屬性值

    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 獲取元素的屬性值
        // (1) element.屬性
        console.log(div.id);
        //(2) element.getAttribute('屬性')  get得到獲取 attribute 屬性的意思 我們程序員自己添加的屬性我們稱爲自定義屬性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
	</script>

設置屬性值

        // 2. 設置元素屬性值
        // (1) element.屬性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('屬性', '值');  主要針對於自定義屬性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  這裏面寫的就是

移出屬性
**element.removeAttribute(‘屬性’);

	// class 不是className
        // 3 移除屬性 removeAttribute(屬性)    
        div.removeAttribute('index');

tab欄切換

當鼠標點擊上面相應的選項卡、下面的內容跟隨變化

  <script>
        // 獲取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循環，給選項卡綁定點擊事件
        for (var i = 0; i < lis.length; i++) {
            // 開始給5個小li 設置索引號 
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                // 1. 上的模塊選項卡，當前這一個底色會是紅色，其餘不變（排他思想）
                // 幹掉所有人 其餘的li清除 class 這個類
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 留下我自己 
                this.className = 'current';
                // 2. 下面的顯示內容模塊
                var index = this.getAttribute('index');
                console.log(index);
                // 幹掉所有人 讓其餘的item 這些div 隱藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 留下我自己 讓對應的item 顯示出來
                items[index].style.display = 'block';
            }
        }
    </script>

自定義屬性

自定義屬性目的：是爲了保存並使用數據。有些數據可以保存到頁面中而不用保存到數據庫中。
自定義屬性獲取是通過getAttribute(‘屬性’) 獲取。
但是有些自定義屬性很容易引起歧義，不容易判斷是元素的內置屬性還是自定義屬性。
H5給我們新增了自定義屬性：

    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的獲取自定義屬性的方法 它只能獲取data-開頭的
        // dataset 是一個集合裏面存放了所有以data開頭的自定義屬性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定義屬性裏面有多個-鏈接的單詞，我們獲取的時候採取 駝峯命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

節點操作

節點概述

網頁中的所有內容都是節點（標籤、屬性、文本、註釋等），在DOM 中，節點使用 node 來表示。 HTML DOM 樹中的所有節點均可通過 JavaScript 進行訪問，所有 HTML 元素（節點）均可被修改，也可以創建或刪除。
節點層次：利用 DOM 樹可以把節點劃分爲不同的層級關係，常見的是父子兄層級關係。

一般地，節點至少擁有nodeType（節點類型）、nodeName（節點名稱）和nodeValue（節點值）這三個基本屬性。

父親節點
node.parentNode

parentNode屬性可返回某節點的父親節點、注意是最近的一個父親節點
如果指定的節點沒有父節點就返回null

  <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>
    <script>
        // 1. 父節點 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是離元素最近的父級節點(親爸爸) 如果找不到父節點就返回爲 null
        console.log(erweima.parentNode);
    </script>

子節點
-所有子節點

子元素節點

    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        // DOM 提供的方法（API）獲取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子節點  childNodes 所有的子節點 包含 元素節點 文本節點等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 獲取所有的子元素節點 也是我們實際開發常用的
        console.log(ul.children);
    </script>

子節點

實際開發中，firstChild 和 lastChild 包含其他節點，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性問題，那麼我們如何獲取第一個子元素節點或最後一個子元素節點呢？

 <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一個子節點 不管是文本節點還是元素節點
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一個子元素節點 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 實際開發的寫法  既沒有兼容性問題又返回第一個子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>

新浪下拉菜單

    <script>
        // 1. 獲取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children; // 得到4個小li
        // 2.循環註冊事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>

兄弟節點

下一個兄弟節點
上一個兄弟節點

 <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一個兄弟節點 包含元素節點或者 文本節點等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一個兄弟元素節點
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>

下一個兄弟元素節點（有兼容性問題）
上一個兄弟元素節點（有兼容性問題）

如何解決兼容性問題
封裝一個兼容性函數

 function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }

創建節點

添加節點

    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 創建節點元素節點
        var li = document.createElement('li');
        // 2. 添加節點 node.appendChild(child)  node 父級  child 是子級 後面追加元素
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加節點 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我們想要頁面添加一個新的元素 ： 1. 創建元素 2. 添加元素

簡單版發佈留言案例

<body>
    <textarea name="" id=""></textarea>
    <button>發佈</button>
    <ul>

    </ul>
    <script>
        // 1. 獲取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 註冊事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您沒有輸入內容');
                return false;
            } else {
                // console.log(text.value);
                // (1) 創建元素
                var li = document.createElement('li');
                // 先有li 才能賦值
                li.innerHTML = text.value;
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>

Javascript-API-DOM-全選反選、Tab欄切換案例、節點的操作、自定義屬性的操作、

Wireshark 安裝+使用（一）

Vue-基本使用、模板語法(插值表達式、指令、事件綁定、屬性綁定、樣式綁定、分支循環結構)

git與gitHub的使用

JS高級-類與對象

Javascript-API-DOM-操作元素對象的屬性、文本內容、子元素、樣式、事件

JS高級-函數定義與調用、函數內的this指向、改變this指向方法、閉包、遞歸、嚴格模式

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結