JavaScript第三天

排他操作

排他思想

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

所有元素全部清除樣式（干掉所有人）
給當(dāng)前元素設(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>累計(jì)凈值</th>
        <th>前單位凈值</th>
        <th>凈值增長(zhǎng)率</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>003526</td>
        <td>農(nóng)銀金穗3個(gè)月定期開(kāi)放債券</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個(gè)月定期開(kāi)放債券</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個(gè)月定期開(kāi)放債券</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個(gè)月定期開(kāi)放債券</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個(gè)月定期開(kāi)放債券</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個(gè)月定期開(kāi)放債券</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>價(jià)錢(qián)</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') // 全選按鈕
    // 下面的所有復(fù)選框
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input')
    // 注冊(cè)事件
    j_cbAll.onclick = function () {
        console.log(this.checked)
        for (var i = 0; i < j_tbs.length ; i++) {
            j_tbs[i].checked = this.checked;
        }
    }
    // 下面的復(fù)選框全部選中霹娄， 上面的全選自動(dòng)變成選中
    for (var i = 0; i <j_tbs.length ; i++) {
        j_tbs[i].onclick = function () {
            var flag = true;
            // 每次點(diǎn)擊下面的復(fù)選框都要檢查4個(gè)小按鈕是否全被選中
            for (var j = 0; j <j_tbs.length  ; j++) {
                if(!j_tbs[j].checked){
                    // 沒(méi)有被選中
                    flag = false;
                    // 只要有一個(gè)沒(méi)選中就不需要判斷了
                    // 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ù)可以保存到頁(yè)面中而不用保存到數(shù)據(jù)庫(kù)中。
自定義屬性獲取是通過(guò)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 是一個(gè)集合存放了所有以data開(kāi)頭的自定義屬性
    console.log(div.dataset)
    // 訪問(wèn)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é)點(diǎn)操作

節(jié)點(diǎn)概述
網(wǎng)頁(yè)中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽唧躲、屬性造挽、文本、注釋等）弄痹，在DOM 中饭入，節(jié)點(diǎn)使用 node 來(lái)表示。HTML DOM 樹(shù)中的所有節(jié)點(diǎn)均可通過(guò) JavaScript 進(jìn)行訪問(wèn)肛真，所有 HTML 元素（節(jié)點(diǎn)）均可被修改谐丢，也可以創(chuàng)建或刪除。

image

一般地蚓让，節(jié)點(diǎn)至少擁有nodeType（節(jié)點(diǎn)類型）乾忱、nodeName（節(jié)點(diǎn)名稱）和nodeValue（節(jié)點(diǎn)值）這三個(gè)基本屬性。

image

節(jié)點(diǎn)層級(jí)

父級(jí)節(jié)點(diǎn)

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é)點(diǎn)  parentNode
   var erweima =  document.querySelector('.erweima');
   // 最近的
   console.log(erweima.parentNode)
</script>

子節(jié)點(diǎn)

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)
    // 既兼容 有方便 實(shí)際開(kāi)發(fā)
    console.log(ol.children[0])
    console.log(ol.children[ol.children.length-1])
</script>
</body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末历极，一起剝皮案震驚了整個(gè)濱河市饭耳，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌执解，老刑警劉巖，帶你破解...
沈念sama閱讀 210,978評(píng)論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件纲酗，死亡現(xiàn)場(chǎng)離奇詭異衰腌，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)觅赊，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 89,954評(píng)論 2贊 384
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)右蕊，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人吮螺，你說(shuō)我怎么就攤上這事饶囚。” “怎么了鸠补？”我有些...
開(kāi)封第一講書(shū)人閱讀 156,623評(píng)論 0贊 345
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵萝风，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我紫岩，道長(zhǎng)规惰，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 56,324評(píng)論 1贊 282
?港島之戀（遺憾婚禮）
正文為了忘掉前任泉蝌，我火速辦了婚禮歇万，結(jié)果婚禮上揩晴，老公的妹妹穿的比我還像新娘。我一直安慰自己贪磺，他們只是感情好硫兰，可當(dāng)我...
茶點(diǎn)故事閱讀 65,390評(píng)論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著寒锚，像睡著了一般劫映。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上壕曼，一...
開(kāi)封第一講書(shū)人閱讀 49,741評(píng)論 1贊 289
城市分裂傳說(shuō)
那天苏研，我揣著相機(jī)與錄音，去河邊找鬼腮郊。笑死摹蘑，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的轧飞。我是一名探鬼主播衅鹿，決...
沈念sama閱讀 38,892評(píng)論 3贊 405
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼过咬！你這毒婦竟也來(lái)了大渤？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 37,655評(píng)論 0贊 266
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤掸绞，失蹤者是張志新（化名）和其女友劉穎泵三，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體衔掸，經(jīng)...
沈念sama閱讀 44,104評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡烫幕，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,451評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了敞映。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片较曼。...
茶點(diǎn)故事閱讀 38,569評(píng)論 1贊 340
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖振愿，靈堂內(nèi)的尸體忽然破棺而出捷犹，到底是詐尸還是另有隱情，我是刑警寧澤冕末，帶...
沈念sama閱讀 34,254評(píng)論 4贊 328
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布萍歉，位于F島的核電站，受9級(jí)特大地震影響档桃，放射性物質(zhì)發(fā)生泄漏翠桦。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,834評(píng)論 3贊 312
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望销凑。院中可真熱鬧丛晌，春花似錦、人聲如沸斗幼。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,725評(píng)論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)蜕窿。三九已至谋逻，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間桐经，已是汗流浹背毁兆。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,950評(píng)論 1贊 264
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留阴挣，地道東北人气堕。一個(gè)月前我還...
沈念sama閱讀 46,260評(píng)論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像畔咧，于是被迫代替她去往敵國(guó)和親茎芭。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,446評(píng)論 2贊 348