誰かが次のjavascriptコードを説明できますか？

Question

説明に加えて、javascriptの$ meanは何を意味しますか？コードは次のとおりです。

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クラスを持っているテーブルの行を交互に設定し、マウスの下行をハイライト第三のCSSクラスにマウスオーバーとマウスアウトイベントの変更を、追加します。

jQuery、プロトタイプ、または別のサードパーティのJSライブラリが参照されているかどうかは分かりませんが、ドル記号はセレクタとしてjQueryによって使用されます。この場合、ユーザーはオブジェクトがヌルであるかどうかを確認するためにテストしています。

Answer 5

この関数はテーブル内の行をループし、2つのことを行います。

1）交互の行スタイルを設定します。 .class（i％2 == 0）rows [i] .className = 'alt'は、他のすべての行のクラス名がaltに設定されていることを意味します。

2）mouseoverイベントとmouseoutイベントをこの行に結びつけるので、ユーザーがマウスオーバーすると背景色が変わります。

$は単にコードのdocument.getElementById

Answer 6

を呼び出し（例えばjQueryのような）種々のJavaScriptフレームワークによって設定された関数はJavaScriptで行によってストライプテーブルの行のJavascriptにZebraTable「オブジェクト」を作成しています。

それはノートのメンバ関数のカップルを持っています

• ストライプ（エル） - あなたは、テーブルを想定している素子ELに渡します。テーブル内のすべての<tr>タグ（getElementsByTagName）を取得し、それらをループして、クラス名「alt」を交互の行に割り当てます。また、マウスオーバーおよびマウスアウトのイベントハンドラも追加されています。
• mouseover（row） - 行の古いクラスと背景色を格納している行の "mouse over"イベントハンドラを呼び出し、クラス名を "over"に設定します。
• mouseout（row）古いクラス名と背景色を復元します。

$は、要素名または要素自体のいずれかの要素を返す関数です。そのパラメータが無効である場合は

私はあなたがより多くの情報

Answer 7

のために彼らのドキュメントをチェックアウトすることができるように下を見てください、使用されているフレームワークはプロトタイプであると信じて（存在しない要素、たとえば）はnullを返しますあなたがコードを持っている記事のうち、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属性によって要素を探しています。