有人可以解释以下 javascript 代码吗？

Posted 2023-04-19

【中文标题】有人可以解释以下 javascript 代码吗？

【英文标题】：Can someone explain the following javascript code?

【发布时间】：2009-04-08 20:59:59

【问题描述】：

除了解释，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

【参考方案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');

【参考方案2】：

$ 在 Javascript 中没有任何意义，但它是一个有效的函数名称，并且有几个库将它用作包罗万象的函数，例如 Prototype 和 jQuery

【讨论】：

上面的代码似乎没有使用任何库，但它有 if (!$(el)) return;在这种情况下是什么意思？

如果页面不包含任何外部JS文件，并且本身没有定义$函数，那么它会抛出一个“不可调用”的错误。

【参考方案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 属性搜索元素。

【参考方案4】：

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

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

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

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

【参考方案5】：

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

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

【讨论】：

在我看来它不像 jQuery，尤其是在 jQuery 中这会更加简洁。

【参考方案6】：

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

【讨论】：

你确定吗？ Event.add 和 addClassName 看起来确实像框架工具。如果没有使用任何框架并且没有定义 $，那么它根本就不起作用（请参阅我对 Gareth 回答的评论）。

我实际上不确定 var ZebraTable 部分在做什么？它是在创建一个对象并向其添加属性和事件吗？

【参考方案7】：

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

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

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

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

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

【参考方案8】：

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

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

【讨论】：

是的，先生。感谢那。我需要多加注意，大声笑