JS——高級各行換色

阿新 • • 發佈：2017-11-22

你好 () es2017 doc var 顏色 out point char

1、獲取tbody下的子元素

2、註冊鼠標覆蓋事件時存儲當時的背景顏色，註冊鼠標離開事件時把存儲的顏色賦值註冊事件對象

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

        div {
            width: 300px;
            margin: 50px auto;
        }

        table {
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            border 
-collapse: collapse;
        }

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

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

        tbody tr {
            background 
-color: #f0f0f0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <thead>
                <tr>
                    <th>序號</th>
                    <th>姓名</th>
                    <th>課程</th>
                    <th>成績</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>你好</td>
                    <td>你好</td>
                    <td>你好</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>你好</td>
                    <td>你好</td>
                    <td>你好</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>你好</td>
                    <td>你好</td>
                    <td>你好</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>你好</td>
                    <td>你好</td>
                    <td>你好</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>你好</td>
                    <td>你好</td>
                    <td>你好</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>你好</td>
                    <td>你好</td>
                    <td>你好</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var 
 tbody = document.getElementsByTagName("tbody")[0];
        var trs = tbody.children;
        var color = "";
        for (var i = 0; i < trs.length; i++) {
            if (i % 2 !== 0) {
                trs[i].style.backgroundColor = "#c3c3c3";
            } 
            trs[i].onmouseover = function () {
                color = this.style.backgroundColor;
                this.style.backgroundColor = "#fff";
            }
            trs[i].onmouseout = function () {
                this.style.backgroundColor = color;
            }
        }  
    </script>
</body>
</html>

技術分享圖片

JS——高級各行換色

你好 () es2017 doc var 顏色 out point char 1、獲取tbody下的子元素 2、註冊鼠標覆蓋事件時存儲當時的背景顏色，註冊鼠標離開事件時把存儲的顏色賦值註冊事件對象 <!DOCTYPE html> <html> &l

js高級程序設計

view typeof col span abc 技術分享完全 != 兩個 defer 異步腳本，腳本延遲到文檔完全被解析和顯示之後再執行。只對外部腳本文件有效。按順序執行腳本。但在實際情況下，並不一定會按照順序執行最好只有一個延遲腳本。支持H5的瀏覽器會忽略給腳本設置

css和js處理隔行換色的問題

ron -o user XML use type scala tex sha <html> <head> <meta charset="utf-8"> <met

《JS高級程序設計》之三

instance png ges code 高級內存設計 com 復雜數據類型 1、JS中 == 和 ==的區別　　== 可以進行類型的轉化，把true轉換為1，即為 "1" == 1；　　=== 嚴格比較，只要類型不匹配就返回false。 2、基礎類型在內存中的

JS高級. 02 面向對象、創建對象、構造函數、自定義構造函數、原型

浪費 truct 創建過程 spa const 使用指向找到 tro 面向對象的三大特性：　　封裝　　　　a) 把一些屬性和方法裝到一個對象裏　　2. 繼承　　　　a) js中的繼承是指: 　　一個對象沒有一些方法和屬性,而另一個對象有

JS高級. 04 增刪改查面向對象版歌曲管理、遞歸、

for this調用 obj push 方法 solid 工具條件 name 增數組.push() 刪數組.splice(開始刪除索引,刪除幾個) 在當前對象中調用當前對象的方法中和屬性,必須用this調用 nodeType判斷節點類型節點.nodeType ==

JS高級

進行 class 是否 creat 其他原型而且完全 inf 關於string，number是大寫，那麽就是構造函數，變量不可能為null值，除非手動設置，要解除對象的引用的時候手動去除。 in關鍵字操作數組的時候操作的是索引值，不是裏面的內容，。在操作對象的時候操作

JS高級程序設計筆記-ECMA基礎

返回值基礎直接 ora 運算如果存儲對象根據長度一、原始值和引用值原始值：存儲在棧（stack）中的簡單數據段，它們的值直接存儲在變量訪問的位置。引用值：存儲在堆（heap）中的對象，存儲在變量處的值是一個指針，指向存儲對象的內存處。二、原始類型：（基本

JS高級——邏輯中斷

size 表達式中斷 16px 高級 edi spa log med 1、表達式1||表達式2：表達式1為真，返回表達式1；表達式1為假，返回表達式2 2、表達式1&&表達2：表達式1為真，返回表達式2；表達式1為假，返回表達式1JS高級——邏輯中斷

JS高級——原型鏈

prototype fan 原型鏈 ret reat 對象 fun 搜索 .com 基本概念 1、通過同一個構造函數創建的對象都會關聯一個神秘的對象，可以通過構造函數.prototype進行訪問，這個神秘對象被稱為原型對象 2、這個原型對象可以被用來做繼承用，js中的繼承有

JS高級——Object.prototype成員

構造繼承 truct rabl 其他屬性 rip idt const isp 基本概念成員描述 Object.prototype.__proto__ 指向當對象被實例化的時候，用作原型的對象。 Object.prototype.hasOwnProperty

JS高級——arguments

class 函數調用 function bsp spa blog cal length span arguments 1、函數內部的一個對象，在函數調用的時候，默認的會將所有傳入的實參依次存入該對象 2、是一個偽數組 3、arguments.length 可以用來表示傳入實

JS高級——Function

ack 新建 pre 對象 spa body 情況函數 ret Function構造函數可以用來新建函數對象 1、一個參數都不傳的情況創建的就是一個空的函數 2、只傳一個參數的情況這個參數就是函數體 3、傳多個參數的情況，最後一個參數為函數體，前面的參數都是該函數的形參

JS高級——instanceof語法

back n) 使用基本使用 col on() class new -c 基本語法對象 instanceof 構造函數基本使用 <script> function Person() { } //p--->Person

JS高級——作用域鏈

基本 post 函數 bsp func scope 多個 gpo var 基本概念 1、只要是函數就可以創造作用域 2、函數中又可以再創建函數 3、函數內部的作用域可以訪問函數外部的作用域 4、如果有多個函數嵌套，那麽就會構成一個鏈式訪問結構，這就是作用域鏈 <sc

JS高級——沙箱

添加屬性在外什麽 round func pos 獨立原則 pre 基本概念 1、沙箱：與外界隔絕的一個環境，外界無法修改該環境內任何信息，沙箱內的東西單獨屬於一個世界 2、蘋果手的app使用的就是沙箱模式去運行，隔離app的空間，每個app獨立運行 js沙箱基本模式

JS高級——封裝註冊事件

target listen 函數封裝 and 強行 nload 事件 document scrip 兼容性問題 1、ele.on事件類型 = function(){}一個元素ele註冊一種事件多次，會被替換成最後一個，所以有局限性 2、addEventListener(事件

JS高級程序設計中對“私有作用域”的經典解釋

js高級程序設計 mef size 替換沒有 color 包含函數 16px JavaScript從來不會告訴你是否多次聲明了同一個變量；遇到這種情況，它只會對後續的聲明視而不見（不過，它會執行後續聲明中的變量初始化）。匿名函數可以用來模仿塊級作用域並避免這個問題。

各行換色

reference div pos () borde doc addclass rip bsp html: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>

js高級程序設計數組的一些方法

RR 前端 gree 數據後進先出數據結構數組 tro gre 數組的棧方法：棧是一種 LIFO（Last-In-First-Out，後進先出）的數據結構，也就是最新添加的項最早被移除。而棧中項的插入（叫做推入）和移除（叫做彈出），只發生在一個位置——棧的頂部

JS——高級各行換色

相關推薦