有人可以解释以下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类。 这是一个简单的演示，其中还包含您将需要的其他功能（事件注册对象和原型的$函数）。