ホーム > タグ > jQuery

jQuery

[JavaScriptとcssを簡単にするためのjQuery] 2ndDay ストライプテーブル

2日目はストライプテーブルとtrのマウスオーバーイベントを設定する章です。

Table Striping Made Easy

この表組みのように偶数列と奇数列で異なるclassを設定し、背景色を別にします。

ここで覚えることは以下です。

  • $("table.stripe tr:even").addClass("even");…擬似クラスっぽい:evenを設定
  • $("table.stripe tr").hover(function() { , });…擬似クラス:hoverを設定

$("table.stripe tr:even").addClass("even");

偶数、奇数を設定する擬似クラスっぽいものに:odd, :evenがあります。書き方はcssを編集する感覚でオッケー!!そこにaddClass("even")などを設定することで奇数または偶数の要素にクラスを追加設定できます。

今回のストライプテーブルの設定は以下です。

  1. ストライプテーブルにするtableにclass stripeを設定します。
  2. $("table.stripe tr:even").addClass("even");
  3. 偶数行 trに以下のcssを設定します。
    / *  stripe
    -----------------------------------*/
    table.stripe tr.even td {
    background-color: #f3f3f3;
    }

これで偶数行のみ背景色を変更できます。

trのhover時に背景色を変更

trにマウスオーバーしたときにハイライト表示する設定をします

 $("table.stripe tr").mouseover(function() {$(this).addClass("hover");})
.mouseout(function() {$(this).removeClass("hover");}); 

本来なら、jqueryのhoverメソッドを用いればいいのですが、今回のエッセンスはそうではありません。mouseoverとmouseoutの二つのメソッドを同時に指定できるところにあります(たぶん!)。

実際にはマウスオーバーイベントよりhoverの方がよさげなので、僕は以下のように設定しました。

 $("table.generalTbl tr").hover(function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
} );  

メソッドの引数は

hover(hover時の設定,hoverが外れたときの設定)

と、このようになります

  • Comments (Close): 0
  • Trackbacks (Close): 0

[JavaScriptとcssを簡単にするためのjQuery] 1stDay

jQueryをそこそこ使いこなすための日記。チュートリアルがあったので、軽く訳しながら実践してみますね~。

Quicker Than window.onload

DHTMLなど動的なhtmlをいじる際には、window.onloadが必要になってきます。しかし、画像ファイルサイズがでかいときはなかなかロードしてくれない、という問題あります。

「jQuery」にはDOMが読み込まれた時点で、おまじないをかけて(このへん訳できへんかった!)onloadとみなしてユーザ定義関数を実行してくれます。というわけでめっさ速くなる。そのおまじないコードがこれです。


$(document).ready(function(){
// ここにコードを書く!!
});

このように書けばDOM読み込むや否や、さっさと動作してくれます。ということが書いてあったのが1st Day!!

Home > Tags > jQuery


Search
Feeds
Meta

Return to page top