有人可以解释以下 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

这个函数循环遍历表中的行并做两件事。

1) 设置交替行样式。 if (i % 2 == 0) rows[i].className = 'alt' 表示每隔一行都将其类名设置为 alt。

2) 将 mouseover 和 mouseout 事件附加到该行，以便当用户将鼠标悬停在该行上时该行会更改背景颜色。

$是各种javascript框架（如jquery）设置的函数，简单调用document.getElementById

Answer 5

代码基本上将交替的表格行设置为具有不同的 CSS 类，并将 mouseover 和 mouseout 事件更改添加到第三个 css 类，突出显示鼠标下的行。

我不确定是否引用了 jQuery、原型或其他第三方 JS 库，但 jQuery 使用美元符号作为选择器。在这种情况下，用户正在测试对象是否为空。

Answer 6

$ 是所谓的“美元函数”，在许多 JavaScript 框架中用于查找元素和/或“包装”它，以便它可以与框架函数和类一起使用。我不认识使用的其他函数，所以我不能确切地告诉你这是使用哪个框架，但我的第一个猜测是Prototype 或Dojo。 （当然不是jQuery。）

Answer 7

该代码在 Javascript 中创建了一个 ZebraTable“对象”，它在 Javascript 中逐行对表进行条带化。

它有几个值得注意的成员函数：

• stripe(el) - 你传入一个元素 el，假定它是一个表格。它获取表中的所有 标记 (getElementsByTagName)，然后遍历它们，将类名“alt”分配给交替行。它还为鼠标悬停和鼠标移出添加了事件处理程序。
• mouseover(row) - 行的“鼠标悬停”事件处理程序，存储行的旧类和背景颜色，然后为其分配类名“over”
• mouseout(row) - 与鼠标悬停相反，恢复旧的类名和背景颜色。

$ 是一个函数，它返回给定元素名称或元素本身的元素。如果其参数无效（例如不存在的元素），则返回 null

我相信正在使用的框架是 Prototype，因此您可以查看他们的文档了解更多信息

【讨论】：

Answer 8

查看您从中获取代码的文章底部，您会看到他们说您还需要prototype's $ function。来自文章

在您的 CSS 中，您需要指定 表格行的默认样式，加上 tr.alt 和 tr.over 类。这是一个 简单的演示，其中还包括 您需要的其他功能（事件 注册对象和Prototype的$ 函数）。