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类，并将mouseover和mouseout事件更改添加到第三个css类，突出显示鼠标下的行。

我不确定是否引用了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，假设它是一个表。它得到所有＆lt; tr＆gt;表中的标签（getElementsByTagName），然后遍历它们，将类名“alt”分配给交替的行。它还为鼠标悬停和鼠标移除添加了事件处理程序。
mouseover（row） - 行的“鼠标悬停”事件处理程序，它存储行的旧类和背景颜色，然后为其分配类名“over”
mouseout（row） - 鼠标悬停的反向，恢复旧的类名和背景颜色。

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

，则返回null

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

Answer 8

看一下你从中得到代码的文章的底部，你会发现他们说你还需要prototype's $ function。来自文章

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

有人可以解释下面的JavaScript代码吗？

8 个答案: