JQuery を初めて触ってみた

会社に 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;
  })
});

あとがき

うん。まだ、始めたばかりで勝手が良く分かってない。とにかく楽しそうなのは実感した。