操作元素

排他思想案例

1. 背景換膚案例

這個案例練習的是給一組元素注冊事件
給4個小圖片利用回圈注冊點擊事件
當點擊了這個圖片，讓頁面背景改為當前的圖片
核心演算法：把當前圖片的src 路徑取過來，給 body 做為背景即可
在這里插入圖片描述

    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        body {
            background: url(img/今天也要加油鴨.jpg) no-repeat center top;
        }
    
        li {
            list-style: none;
        }
    
        .yemian {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 40px;
            padding-top: 3px;
        }
    
        .yemian li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
    
        .yemian img {
            width: 100px;
        }
    </style>
</head>
<body>
    <ul class="yemian">
        <li><img src="./img/今天不想加油鴨.jpg"></li>
        <li><img src="./img/今天也要加油鴨.jpg"></li>
        <li><img src="./img/特警.jpg"></li>
        <li><img src="./img/鴨子.jpg"></li>
    </ul>
    <script>
        // 1.獲取元素
        var imgs = document.querySelector('.yemian').querySelectorAll('img')
        // 2.回圈注冊事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                document.body.style.backgroundImage = 'url(' + this.src + ')'
            }

        }
    </script>
</body>

2. 表格隔行變色案例

用到新的滑鼠事件滑鼠經過 onm ouseover 滑鼠離開 onm ouseout
核心思路：滑鼠經過 tr 行，當前的行變背景顏色，滑鼠離開去掉當前的背景顏色
注意：第一行（thead里面的行）不需要變換顏色，因此我們獲取的是 tbody 里面的行
在這里插入圖片描述

<body>
    <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: gray;
        }
    </style>
    <table>
        <thead>
            <tr>
                <th>代碼</th>
                <th>名稱</th>
                <th>最新公布凈值</th>
                <th>累計凈值</th>
                <th>前單位凈值</th>
                <th>凈值增長率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>003526</th>
                <th>農銀金穗3個月定期開放債券</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>270047</th>
                <th>廣發理財</th>
                <th>0.903</th>
                <th>3.386</th>
                <th>0.000</th>
                <th>0.000%</th>
            </tr>
            <tr>
                <th>163417</th>
                <th>興全合宜</th>
                <th>0.860</th>
                <th>0.860</th>
                <th>0.863</th>
                <th>-0.382%</th>
            </tr>
            <tr>
                <th>003929</th>
                <th>中銀證券</th>
                <th>1.034</th>
                <th>1.088</th>
                <th>1.034</th>
                <th>+0.077%</th>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.獲取元素：tbody里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr')
        // 2. 利用回圈系結注冊時間
        for (var i = 0; i < trs.length; i++) {
            // 3.滑鼠經過事件 
            trs[i].onmouseover = function () {
                this.className = 'bg'
            }
            // 4. 滑鼠離開事件
            trs[i].onmouseout = function () {
                this.className = ''
            }
        }
    </script>
</body>

3. 表單全選取消案例

業務需求：

點擊上面全選復選框，下面所有的復選框都選中（全選）
再次點擊全選復選框，下面所有的復選框都不中選（取消全選）
如果下面復選框全部選中，上面全選按鈕就自動選中
如果下面復選框有一個沒有選中，上面全選按鈕就不選中
所有復選框一開始默認都沒選中狀態

分析：

全選和取消全選做法：讓下面所有復選框的checked屬性（選中狀態）跟隨全選按鈕即可
下面復選框需要全部選中，上面全選才能選中做法：給下面所有復選框系結點擊事件，每次點擊，都要回圈查看下面所有的復選框是否有沒選中的，如果有一個沒選中的，上面全選就不選中，
可以設定一個變數，來控制全選是否選中

<body>
    <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 th {
            background-color: #f0f0f0;
            color: #404060;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <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>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>榮耀20</th>
                    <th>2799</th>
                </tr>
                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>小米</th>
                    <th>2699</th>
                </tr>
                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>oppo</th>
                    <th>2699</th>
                </tr>
                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>vivo</th>
                    <th>2699</th>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 全選和取消全選
        // 1. 獲取元素
        var j_cbAll = document.getElementById('j_cbAll')   //全選按鈕
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input')   //下面所有的復選框
        // 注冊事件
        j_cbAll.onclick = function () {
            // this.checked可以得到當前復選框的選中狀態，true則為選中
            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++) {   //該for回圈包含在上一個function函式中，屬于不同的作用域，兩個i不受影響
                    if (!j_tbs[i].checked) {   //對該按鈕取反則表示該按鈕沒有被選中，默認全部都是未選中，所以第一次選中得到的是true
                        //j_cbAll.checked = false    //因為存在按鈕沒有被選中，所以讓全選按鈕改成flase
                        flag = false
                        break   //退出for回圈，提高執行效率，只要有一個沒選中就不用再繼續判斷，就無意義了
                    }
                }
                j_cbAll.checked = flag
            }
        }
    </script>
</body>

自定義屬性案例

1.tab欄切換（重點案例）

當滑鼠點擊上面相應的選項卡（tab），下面的內容跟隨變化
在這里插入圖片描述

案例分析：

Tab欄切換有2個大的模塊
上面的模塊選項卡，點擊某一個，當前這一個底色會是紅色，其余不變（排他思想）修改類名的方式
下面的模塊內容，會跟隨上面的選項卡變化，所以下面模塊變化寫到點擊事件里面，
規律：下面的模塊顯示內容和上面的選項卡一一對應，相匹配，
核心思路：給上面的tab_list 里面的所有小li 添加自定義屬性，屬性值從0開始編號，
當點擊tab_list 里面的某個小li，讓tab_con 里面對應序號的內容顯示，其余隱藏（排他思想）

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介紹</li>
                <li>規格與包裝</li>
                <li>售后保障</li>
                <li>商品評價（50000)</li>
                <li>手機社區</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介紹模塊內容
            </div>
            <div class="item">
                規格與包裝模塊內容
            </div>
            <div class="item">
                售后保障模塊內容
            </div>
            <div class="item">
                商品評價模塊內容
            </div>
            <div class="item">
                手機社區模塊內容
            </div>
        </div>
    </div>
    <script>
        // 1.上面的選項卡，點擊一個底色會變紅，其余不變（排他）
        // 獲取元素
        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 () {
                // 干掉所有人，其余的li清除class這個類
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = ''
                }
                // 留下自己
                this.className = 'current'
                // 2.下面的顯示內容模塊
                var index = this.getAttribute('index')
                // 干掉所有人 讓其余的item 這些div隱藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none'
                }
                // 留下我自己 讓對應的item 顯示出來
                items[index].style.display = 'block'  //block不僅有轉換的作用，還有顯示的效果
            }
        }
    </script>
</body>

節點層級案例

1. 下拉選單案例

案例分析：運用子節點

導航欄里面的li 都要有滑鼠經過效果，所以需要回圈注冊滑鼠事件
核心原理：當滑鼠經過li 里面的第二個孩子 ul 顯示，當滑鼠離開，則ul 隱藏

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            /*因為給了絕對定位，要和上欄錯開距離，就設定和div的高度*/
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <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'  //li里面有兩個元素，一個a 一個ul
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none'
            }
        }
    </script>
</body>

2. 簡單版發布留言案例

分析：

核心思路：點擊按鈕之后，就動態創建一個li，添加到ul 里面，
創建li 的同時，把文本域里面的值通過li.innerHTML 賦值給 li
如果想要新的留言后面顯示就用 appendChild 如果想要前面顯示就用insertBefore
當把文本域里面的值賦值給li 的時候，多添加一個洗掉的鏈接
需要把所有的鏈接獲取過來，當我們點擊當前的鏈接的時候，洗掉當前鏈接所在的li
阻止鏈接跳轉需要添加 javascript:void(0); 或者 javascript:;

   <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        body {
            padding: 100px;
        }
    
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid blue;
            outline: none;
            resize: none;
        }
    
        ul {
            margin-top: 50px;
        }
    
        li {
            width: 300px;
            padding: 5px;
            background-color: burlywood;
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
    
        li a {
            float: right;
        }
    </style>
    <textarea name="" id="">123</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 {
                // (1)創建元素
                var li = document.createElement('li')
                // 先有li才能賦值
                li.innerHTML = text.value + "<a href = 'javascript:;'>洗掉</a>"
                // （2）添加元素
                // ul.appendChild(li)
                ul.insertBefore(li, ul.children[0])  //最新一條訊息會顯示在最前面
                // (3)洗掉元素
                var as = document.querySelectorAll('a')
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        ul.removeChild(this.parentNode)
                    }
                }
            }
        }
    </script>
    </body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/286400.html

標籤：其他

上一篇：開發者必備神器！最新穩定版發布，這些新特性你需要知道！

下一篇：Vue + Spring Boot + Shiro 跨域解決（開發+生產）

JavaScript- 操作元素案例

文章目錄