まずは、日本語版リファレンスサイト: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すると、そのセレクタがどこにあるか調べることができます。