有人可以解釋以下javascript代碼嗎？

Question

除了說明之外，$在javascript中是什么意思？ 這是代碼：

var ZebraTable = {
    bgcolor: '',
    classname: '',
    stripe: function(el) {
        if (!$(el)) return;
        var rows = $(el).getElementsByTagName('tr');
    for (var i=1,len=rows.length;i<len;i++) {
        if (i % 2 == 0) rows[i].className = 'alt';
        Event.add(rows[i],'mouseover',function() { 
ZebraTable.mouseover(this); });
    Event.add(rows[i],'mouseout',function() { ZebraTable.mouseout(this); });
    }
},
mouseover: function(row) {
    this.bgcolor = row.style.backgroundColor;
    this.classname = row.className;
    addClassName(row,'over');
},
mouseout: function(row) {
    removeClassName(row,'over');
    addClassName(row,this.classname);
    row.style.backgroundColor = this.bgcolor;
}
}

window.onload = function() {
ZebraTable.stripe('mytable');
}

這是我獲得代碼的鏈接，您可以在頁面上查看演示。 它似乎沒有使用任何框架。 我實際上正在閱讀一個JQuery教程，該教程接受了此代碼，並在其上使用了JQuery來進行表划分。 鏈接在這里：

http://v3.thewatchmakerproject.com/journal/309/stripe-your-tables-the-oo-way

Answer 1

有人可以解釋以下javascript代碼嗎？

//Shorthand for document.getElementById
function $(id) {
    return document.getElementById(id);
}

var ZebraTable = {
    bgcolor: '',
    classname: '',

    stripe: function(el) {
        //if the el cannot be found, return
        if (!$(el)) return;

        //get all the <tr> elements of the table
        var rows = $(el).getElementsByTagName('tr');

        //for each <tr> element
        for (var i=1,len=rows.length;i<len;i++) {

            //for every second row, set the className of the <tr> element to 'alt'
            if (i % 2 == 0) rows[i].className = 'alt';

            //add a mouseOver event to change the row className when rolling over the <tr> element
            Event.add(rows[i],'mouseover',function() {
                ZebraTable.mouseover(this); 
            });

            //add a mouseOut event to revert the row className when rolling out of the <tr> element
            Event.add(rows[i],'mouseout',function() { 
                ZebraTable.mouseout(this); 
            });
        }
    },

    //the <tr> mouse over function
    mouseover: function(row) {
        //save the row's old background color in the ZebraTable.bgcolor variable
        this.bgcolor = row.style.backgroundColor;

        //save the row's className in the ZebraTable.classname variable
        this.classname = row.className;

        //add the 'over' class to the className property
        //addClassName is some other function that handles this
        addClassName(row,'over');
    },
    mouseout: function(row) {
        //remove the 'over' class form the className of the row
        removeClassName(row,'over');

        //add the previous className that was stored in the ZebraTable.classname variable
        addClassName(row,this.classname);

        //set the background color back to the value that was stored in the ZebraTable.bgcolor variable
        row.style.backgroundColor = this.bgcolor;
    }
}

window.onload = function() {
    //once the page is loaded, "stripe" the "mytable" element
    ZebraTable.stripe('mytable');
}

Answer 2

$在Javascript中並不代表任何含義，但是它是一個有效的函數名，並且幾個庫將其用作其全部功能，例如Prototype和jQuery

Answer 3

在示例中，您鏈接到：

function $() {
    var elements = new Array();
    for (var i=0;i<arguments.length;i++) {
        var element = arguments[i];
        if (typeof element == 'string') element = document.getElementById(element);
        if (arguments.length == 1) return element;
        elements.push(element);
    }
    return elements;
}

$函數通過其id屬性搜索元素。

Answer 4

該代碼基本上將交替的表行設置為具有不同的CSS類，並在第三個CSS類中添加了mouseover和mouseout事件更改，從而突出顯示了鼠標下方的行。

我不確定是否引用了jQuery，原型或其他第三方JS庫，但是jQuery使用美元符號作為選擇器。 在這種情況下，用戶正在測試以查看對象是否為空。

Answer 5

此函數循環遍歷表中的行，並執行兩項操作。

1）設置交替行樣式。 if（i％2 == 0）rows [i] .className ='alt'表示每隔一行將其類名設置為alt。

2）將mouseover和mouseout事件附加到該行，以便當用戶將鼠標懸停在該行上時，該行會更改背景色。

$是由各種javascript框架（例如jquery）設置的函數，它僅調用document.getElementById

Answer 6

$是所謂的“美元函數”，在許多JavaScript框架中用於查找元素和/或“包裝”它，以便可以與框架函數和類一起使用。 我不認識所使用的其他函數，因此無法確切告訴您它正在使用哪個框架，但是我的第一個猜測是Prototype或Dojo 。 （當然不是 jQuery 。）

Answer 7

該代碼在Javascript中創建了ZebraTable“對象”，從而在Javascript中一行一行地划分了表。

它具有以下幾個成員功能：

• stripe（el）-傳入元素el，該元素假定為表格。 它獲取表（getElementsByTagName）中的所有<tr>標記，然后遍歷它們，將類名“ alt”分配給交替的行。 它還為鼠標懸停和鼠標懸停添加了事件處理程序。
• mouseover（row）-行的“ mouse over”事件處理程序，該事件處理程序存儲行的舊類和背景色，然后為其分配類名稱“ over”
• mouseout（row）-鼠標懸停的相反方法，恢復舊的類名稱和背景顏色。

$是返回給定元素名稱或元素本身的元素的函數。 如果其參數無效，則返回null（例如，不存在的元素）

我相信所使用的框架是Prototype，因此您可以查看他們的文檔以獲取更多信息

Answer 8

看一下您從中獲得代碼的文章的底部，您會看到他們說您還需要原型的$函數 。 從文章

在CSS中，您需要為表格行指定默認樣式，以及tr.alt和tr.over類。 這是一個簡單的演示，其中還包含您將需要的其他功能（事件注冊對象和原型的$函數）。