仕事でめっきり管理が多くなった関係でコーディングすることがだいぶへりました。
そんな中、Webの仕事ではjQueryを使うことが多くなりました。
しかし自分はjQueryの知識がない、、、上がってくるプログラムを読んでも、これがあっているのか？判断がつかなかったりします。
そこで一から空いた時間を使って、jQueryの勉強していきたいと思います。
1.モジュールのダウンロード
1-1. jQueryの種類
・jQuery - http://jquery.com/
・jQuery UI - http://jqueryui.com/
・jQuery Mobile - http://jquerymobile.com/
・Sizzle - http://sizzlejs.com/
・QUnit - http://qunitjs.com/
今回は全くの無知であるため「jQuery」を勉強していきたいと思いますので、 jQueryサイト（http://jquery.com/）からモジュールをダウンロードします。
ダウンロード先は「http://jquery.com/download/」になります。
1-2. 1.x系と2.x系
2013/04/19の時点では1.x系と2.x系の２パターンがあります。
何が違うのか、、、どうやらAPIは共通なのですが、2.x系はIE6~8がサポート対象外のようです。
自分はIE使わないので2.x系で勉強進めます。
1-3. compressedとuncompressed
compressed - コメントや改行などを削除してサイズを極力少なくしているものです。
uncompressed - コメントやインデントがしっかりあるのでコードを読むときはこちらがよいです。
今回は勉強なので「uncompressed」を利用します。
2. 基本設定
以下のサイトをもとに勉強を進めていきたいと思います。
How jQuery Works - http://learn.jquery.com/about-jquery/how-jquery-works/
まあまあ、普通にjavascriptの定義でjQuery読み込んでいるだけですね。
以下のそれぞれの処理は「// Your code goes here」の位置に記述していきます。
2-1. javascriptのイベントへ設定
Javascriptの各イベントへ設定したい場合は以下のように記述する。
上記ではページ読み込みの際のonLoad()イベントで指定した処理（今回はメッセージを表示）を実行します。
2-2. jQuery独自イベントへ設定
上記のonLoad()イベントと同様に、jQuery独自のイベント処理で設定することも可能。
ready()のように独自のイベントがjQueryでは定義されています。
参考：http://api.jquery.com/ready/
注意：通常のonLoad()と併用した場合、ready()→onLoad()の順番に処理される。
jQueryでは各要素を指定する場合、「$(名称)」が使用される。
2-3.Click時のイベント設定
Click時に呼び出されるClick()イベントへ処理を登録しています。
ready()イベントにて呼び出された際のイベントを事前に定義しています。
ただし、上記の場合はメッセージが表示された後にaタグの通常処理が実行されたページが遷移してしまいます。
これを防ぐためには以下の処理をalert()文の下に挿入することで、イベント本来の処理をキャンセルすることができます。
今回使用したサンプルコード
