会社に JQuery 本が転がっていたので、ちょっと JQuery の勉強でもしてみようかと本を手に取った。本当に基本的なことをメモ。
jQueryデザインブック 仕事で絶対に使うプロのテクニック
CDN の利用
CDN: Contents Delivery Network を利用すると、バージョンを指定したり、最新の JQuery を自動的に取得したりできる。
CDN の提供は Google, Microsoft, JQuery, CDNJS の三者が行なっている。
- Google: //ajax.googleapis.com/ajax/libs/jquery/VERSION/jquery.min.js
- Microsoft: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-VERSION.js
- jQuery: http://code.jquery.com/jquery-VERSION.min.js
- CDNJS: //cdnjs.cloudflare.com/ajax/libs/jquery/VERSION/jquery.min.js
大文字で「VERSION」と書いた部分には、JQuery のバージョン番号を入れる。
Google では、下の番号を省略すると最新バージョンが自動的に指定される (他の CDN は知らない)。例えば、2.0.2 とフルバージョンを指定するのもあり。2.0 とすると、2013-07-16 現在最新の 2.0.3 が使われる。単に 2 とするとバージョン 2 系の最新版が得られるハズ。
フルバージョン指定すると、丸一年間キャシュされるのでその分高速化が期待できる。一方、バージョンを省略すると、24 時間しかキャッシュされない。キャッシュの恩恵に与かるか、サービスを自動で最新にしたいか。目的によって使い分けると良さそう。
最後に Google の Script を書いておく。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
おや、http: がないけれど良いのかしらん。
JQuery 基礎の基礎
JQuery の基本的な構文は下記の通り:
jQuery('セレクタ').メソッド(パラメーター)
セレクターは CSS と同じものが使える。ID を指定するなら #id, クラスを指定するなら .class, h1 要素直下の p 要素は h1+p といった具合。
メソッドは... 本やウェブサイトで勉強して...
パラメーターも同様に...
jQuery にはシンタックス・シュガーが用意されていて、普通はこちらを使う:
$('セレクタ').メソッド(パラメーター)
JQuery のコードは、onload 以前に走らせることが可能。タイミングとしては HTML の準備が整った段階でのスタートとのこと。
$(document).ready(処理);
実際のコードは次の様になるか...
$(document).ready(function(){
処理
});
これもシンタックス・シュガーが用意されている:
$(function(){ 処理 });
簡単なサンプル
というわけで、簡単なサンプル。サイト内に foo という ID を持つ a 要素があったらクリックした時に alert を出す jQuery Script。
$(function(){
$('#foo').click(function(){
alert('#foo is clicked')
return false;
})
});
あとがき
うん。まだ、始めたばかりで勝手が良く分かってない。とにかく楽しそうなのは実感した。
