jQuery　メモ帳

まずは、日本語版リファレンスサイト：http://semooh.jp/jquery/

リファレンス等から引用しつつ、加筆修正をしたりして、自分なりに理解しやすいようにまとめています。

スピードに関する重要な関数ready(fn)

DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。

殆ど全てのJavaScriptはDOMの準備が出来たタイミングで処理を実行したいと思いますが、 window.onloadでは画像などのロードが済む時点にタイミングを合わせるブラウザもあります。
ということは、重い画像などがあると、それのロードを待つことになり、体感処理速度が重く感じてしまうことがるということです。
それを解決するために、readyイベントを用いることで、アプリケーションの体感処理速度を大きく向上させることができます。

ready関数にコールバック関数を渡します。
コールバック関数の引数に$エイリアスが来るので、これを用いることでグローバル名前空間での衝突を避けた安全なコードを書くことが出来ます。

この関数を使う場合、bodyのonloadイベントには何も書かないこと。readyイベントが実行されなくなってしまいます。

$(document).readyを用いてもかまいません。複数の関数を登録した場合、登録した順に実行されます。

jQueryはセレクターを操るのがすごく楽！

これが一番のjQueryのポイントでは。
h1とか、dic#naviとか、cssを書くときの感覚で操作したいセレクターを指定することができます。

書き方は

$('セレクタ')

超単純！
セレクタに続いてAPIを記載することで簡単に操作できるわけです。

例えばこのサイトのフッターですが、ブラウザのサイズが変更されるといったん消えて再登場しますが、これは


$(window).resize(function(){
$("#setting-footer").css("display", "none").slideDown("500");
});

のように書かれています。

$(window).resize(function()

windowがresizeされたときfunctionする。

functionの内容は

$("#setting-footer").css("display", "none").slideDown("500");

セレクタdiv idの#setting-footerのcssをdisplay:noneにし、続いて(スピード)でスライドさせる。。。

すごく、直感的に書けて便利だと思います。

なお、日本語リファレンス内にセレクターをしらべるためのブックマークが用意されています。

[jQuery Selectors Inspector]

ブックマークに追加して、クリックするとセレクタを入力するフォームが立ち上がります。
入力しOKすると、そのセレクタがどこにあるか調べることができます。