排他操作

排他思想

如果有同一組元素，我們想要某一個元素實現(xiàn)某種樣式斯辰，需要用到循環(huán)的排他思想算法：

所有元素全部清除樣式（干掉所有人）
給當前元素設(shè)置樣式（留下我自己）
注意順序不能顛倒量瓜，首先干掉其他人想暗，再設(shè)置自己

<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
    var btns = document.getElementsByTagName('button')
    // btns[0]
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            // 干掉所有人
            for (var j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = '';
            }
            // for (var i = 0; i < btns.length; i++) {
            //     btns[i].style.backgroundColor = '';
            // }
            this.style.backgroundColor = 'blue';
        }

    }
</script>

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(../imgs/bgc/1.jpg) no-repeat center top;
        }
        li{
            list-style-type: none;
        }
        .baidu{
            overflow: hidden;
            margin: 100px auto;
            width: 410px;
            padding-top: 3px;
            background-color: #fff;

        }
        .baidu li{
            float: left;
            margin: 0 1px;
            /*小手*/
            cursor: pointer;
        }

        .baidu img{
            width: 100px;

        }
    </style>
</head>
<body>
<ul class="baidu">
    <li><img src="../imgs/bgc/1.jpg" alt=""></li>
    <li><img src="../imgs/bgc/2.jpg" alt=""></li>
    <li><img src="../imgs/bgc/3.jpg" alt=""></li>
    <li><img src="../imgs/bgc/4.jpg" alt=""></li>
</ul>
<script>
    // 控制 img
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function () {
        // console.log(this.src)
        document.body.style.backgroundImage = 'url('+ this.src +')';
    }
}
</script>

</body>
</html>

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>Document</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
            height: 30px;
        }

        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
            background-color: pink;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>代碼</th>
        <th>名稱</th>
        <th>最新公布凈值</th>
        <th>累計凈值</th>
        <th>前單位凈值</th>
        <th>凈值增長率</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>003526</td>
        <td>農(nóng)銀金穗3個月定期開放債券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>農(nóng)銀金穗3個月定期開放債券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>農(nóng)銀金穗3個月定期開放債券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>農(nóng)銀金穗3個月定期開放債券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>農(nóng)銀金穗3個月定期開放債券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>農(nóng)銀金穗3個月定期開放債券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    </tbody>
</table>
<script>
    var trs = document.querySelector('tbody').querySelectorAll('tr')
    for (var i = 0; i < trs.length; i++) {
        trs[i].onmouseover = function () {
            this.className = 'bg';
        }
        trs[i].onmouseout = function () {
            this.className = '';
        }
    }
</script>
</body>
</html>

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }

        td {
            font: 14px "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>商品</th>
            <th>價錢</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>

        </tbody>
    </table>
</div>
<script>
    var j_cbAll = document.getElementById('j_cbAll') // 全選按鈕
    // 下面的所有復選框
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input')
    // 注冊事件
    j_cbAll.onclick = function () {
        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 () {
            var flag = true;
            // 每次點擊下面的復選框都要檢查4個小按鈕是否全被選中
            for (var j = 0; j <j_tbs.length  ; j++) {
                if(!j_tbs[j].checked){
                    // 沒有被選中
                    flag = false;
                    // 只要有一個沒選中就不需要判斷了
                    // console.log('flag' + flag)
                    break;
                }
            }
            j_cbAll.checked = flag;
        }
    }

</script>
</body>
</html>

自定義屬性操作

獲取屬性值

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo" index = "1" class="nav"> </div>
<script>
    var div = document.querySelector('div');
    console.log(div.id) // demo
    console.log(div.getAttribute('id')) //demo
    console.log(div.getAttribute('index')) //1  自定義
</script>
</body>
</html>

設(shè)置屬性值

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo" index = "1" class="nav"> </div>
<script>
    var div = document.querySelector('div');
    console.log(div.id) // demo
    console.log(div.getAttribute('id')) //demo
    console.log(div.getAttribute('index')) //1  自定義
    console.log('++++++++++++++++++++++++++++++++++++++++')
    div.id = 'test'
    console.log(div.id)
    div.className = 'navs';
    console.log(div.className)

    div.setAttribute('index', 2);
    console.log(div.getAttribute('index')) //2 自定義
    div.setAttribute('class', 'footer') // footer
    // class 特殊
    console.log(div.className)
    // 移除屬性
    div.removeAttribute('index')
    console.log(div.getAttribute('index')) // null
</script>
</body>
</html>

H5自定義屬性

自定義屬性目的：是為了保存并使用數(shù)據(jù)陋桂。有些數(shù)據(jù)可以保存到頁面中而不用保存到數(shù)據(jù)庫中广鳍。
自定義屬性獲取是通過getAttribute(‘屬性’) 獲取荆几。
但是有些自定義屬性很容易引起歧義，不容易判斷是元素的內(nèi)置屬性還是自定義屬性赊时。
H5給我們新增了自定義屬性：

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div getTime = "20" data-index = "2" data-list-name="eric"></div>
<script>
    var div = document.querySelector('div')
    console.log(div.getAttribute('getTime'))
    div.setAttribute('data-time', 20)

    console.log(div.getAttribute('data-index'))
    console.log(div.getAttribute('data-list-name'))
    //  h5新增
    // dataset 是一個集合存放了所有以data開頭的自定義屬性
    console.log(div.dataset)
    // 訪問map
    console.log(div.dataset.index)
    console.log(div.dataset['index'])

    console.log(div.dataset.listName)
    console.log(div.dataset['listName'])
</script>
</body>
</html>

節(jié)點操作

節(jié)點概述
網(wǎng)頁中的所有內(nèi)容都是節(jié)點（標簽吨铸、屬性、文本祖秒、注釋等）诞吱，在DOM 中，節(jié)點使用 node 來表示竭缝。HTML DOM 樹中的所有節(jié)點均可通過 JavaScript 進行訪問房维，所有 HTML 元素（節(jié)點）均可被修改，也可以創(chuàng)建或刪除抬纸。

image

一般地咙俩，節(jié)點至少擁有nodeType（節(jié)點類型）、nodeName（節(jié)點名稱）和nodeValue（節(jié)點值）這三個基本屬性湿故。

image

節(jié)點層級

父級節(jié)點

image

<div>我是div</div>
<span>我是span</span>
<ul>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
</ul>
<div class="demo">
    <div class="box">
        <span class="erweima">x</span>
    </div>
</div>
<script>
    // 父節(jié)點  parentNode
   var erweima =  document.querySelector('.erweima');
   // 最近的
   console.log(erweima.parentNode)
</script>

子節(jié)點

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li>我是li4</li>
    <li>我是li5</li>
</ol>
<script>
   var ol =  document.querySelector('ol')
    console.log(ol.firstChild)
    console.log(ol.lastChild)
    console.log(ol.firstElementChild)
    console.log(ol.lastElementChild)
    // 既兼容 有方便 實際開發(fā)
    console.log(ol.children[0])
    console.log(ol.children[ol.children.length-1])
</script>
</body>
</html>

JavaScript3

JavaScript3

排他操作

排他思想

自定義屬性操作

獲取屬性值

設(shè)置屬性值

H5自定義屬性

節(jié)點操作

節(jié)點層級

父級節(jié)點

子節(jié)點