Может кто-нибудь объяснить следующий код 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, который взял этот код и использовал его для выполнения чередования таблиц. Вот ссылка:

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

Из примера, на который вы ссылались:

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 3

$ ничего не значит в Javascript, но это допустимое имя функции, и несколько библиотек используют его как свою всеобъемлющую функцию, например Prototype и jQuery

Answer 4

Эта функция перебирает строки в таблице и выполняет две функции.

1) устанавливает стиль чередующихся строк. if (i% 2 == 0) row [i] .className = 'alt' означает, что для каждой другой строки имя класса установлено в alt.

2) Присоединяет событие наведения курсора и наведения мыши к строке, поэтому строка меняет цвет фона, когда пользователь наводит на него курсор.

$ - это функция, созданная различными структурами javascript (например, jquery), которая просто вызывает document.getElementById

Answer 5

Код в основном устанавливает чередующиеся строки таблицы, имеющие другой класс CSS, и добавляет изменение события mouseover и mouseout к третьему классу CSS, выделяя строку под мышью.

Я не уверен, есть ли ссылка на jQuery, прототип или, может быть, на другую библиотеку JS третьей стороны, но знак доллара используется jQuery в качестве селектора. В этом случае пользователь проверяет, является ли объект нулевым.

Answer 6

Посмотрите на нижнюю часть статьи, из которой вы получили код, вы увидите, что они говорят, что вам также понадобится прототип $ function . Из статьи

В вашем CSS вам нужно указать стиль по умолчанию для строк таблицы, плюс классы tr.alt и tr.over Вот простая демонстрация, которая также включает в себя другие функции, которые вам понадобятся (событие объект регистрации и прототип $ функция).

Answer 7

Код создает "объект" ZebraTable в Javascript, который чередует таблицу построчно в Javascript.

Имеет несколько функций-членов:

• stripe (el) - вы передаете элемент el, который считается таблицей. Он получает все
• mouseover (row) - обработчик события «mouse over» для строки, в котором хранится старый класс и цвет фона для строки, а затем назначается имя класса «over»
• mouseout (row) - при наведении курсора мыши восстанавливает старое имя класса и цвет фона.

$ - это функция, которая возвращает элемент с указанным именем или самим элементом. Он возвращает ноль, если его параметры недопустимы (например, несуществующий элемент)

Я считаю, что используемая среда - Prototype, поэтому вы можете проверить их документы для получения дополнительной информации

Answer 8

$ - это так называемая «функция доллара», используемая в ряде структур JavaScript для нахождения элемента и / или «обертывания» его, чтобы его можно было использовать с функциями и классами инфраструктуры. Я не распознаю другие используемые функции, поэтому не могу точно сказать, какой какой фреймворк использует, но мое первое предположение будет Prototype или Dojo . (Это, конечно, не jQuery .)