Может кто-нибудь объяснить следующий код 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

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

Answer 4

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

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

Answer 5

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

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

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

за $ есть функция настройки различных яваскрипта структур (например, JQuery), что просто вызывает document.getElementById

Answer 6

код создает ZebraTable «объект» в Javascript, что полосы таблицы построчно в Javascript ,

Он имеет несколько функций-членов Примечание:

• полоса (эль) - вы передаете в элементе эль, который, как предполагается, будет таблицей. Он получает все теги <tr> внутри таблицы (getElementsByTagName), затем пересекает их, назначая имя класса «alt» чередующимся строкам. Он также добавляет обработчики событий для мыши и мыши.
• mouseover (строка) - обработчик события «мышь» для строки, в которой хранится старый класс и цвет фона для строки, затем присваивается ему имя класса «over»
• mouseout (строка) - обратное mouseover, восстанавливает старое имя класса и цвет фона.

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

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

Answer 7

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

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

Answer 8

Из примера вы связаны с:

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.