jQueryを始めよう

●Flashに代わるもの?

デザインドリルでは、これまでデザイナー向けのActionScript講座を行ってきました。
これはデザイナーやコーダーも簡単なFlashコンテンツを作成できた方が仕事を
得やすいと考えていたからです。ですからカリキュラムも、利用頻度が高く比較的
難易度の低いサムネイル&ディテールやショーケースFlashなどを目標にカリキュラム
を作成してきました。

しかし、これらのコンテンツはiPhoneやiPadのFlash非対応の影響や、HTML5
CSS3の登場によって徐々にFlashから非Flashに移行することが考えられます。
昔はマウスオーバーで画像の切り替わるメニューもFlashで作成することが
ありましたが、今ではCSSやJavaScriptで作成してしまうのと同じように。

ですが、HTML5やCSS3だけでは十分なインタラクションを実現できません。
以下の様にHTMLやCSSの目的にはインタラクションは含まれていないのです。
————————————————————————————————————–
HTMLの目的は構造の設定(これは見出し、これは段落など)です。
CSSの目的はデザインの設定(サイズは10px、色は赤など)です。
————————————————————————————————————–
ロールオーバーでイメージの変わるような、シンプルなインタラクションは可能
 
 
 

● jQueryを始めよう

では、どのようにインタラクションを実現しFlashの代わりとするかというと、
これまでどおりjavaScriptを利用することになります。
ネットでもHTML5やCSS3はjavaScriptはまとめて語られることが多いです。
検索結果:html5, css, javascript

HTML5やCSS3はプログラム言語ではないため、デザイナーでも理解しやすいのですが、
javaScriptはActionScriptと同じくらいの難易度で、デザイナーにとっては習得が
難しいでしょう(ついでにブラウザ毎に動作が異なるケースもあります)。
これでは前回の記事で話したように修了率の高いカリキュラムを実現できません。
 
そこで着目するのがjQueryというJavaScriptライブラリです。これを利用すると
少ないソースでインタラクションを実現することができます。ネットで確認すると
たくさんの記事が書かれています。
検索結果:html5, css3, jquery
 
簡単なサンプルを用意したので、ソースを表示してコードの量を確認してください。
これだけならデザイナーでも習得は難しくないのではないでしょうか?
サムネイルをクリックすると写真がクロスフェード
3秒おきに写真がクロスフェード

デザインドリルを基礎講座まで修了した方はサムネイルのサンプルでjavaScriptの
コメント部分を確認してください。考え方はActionScriptもjavaScriptも非常に
似ていることが確認できます。以下にメリットをまとめます。

 
 
  

● jQueryのメリット

・デザインナー/コーダ−向けのjavaScriptライブラリ

 先発のjavaScriptライブラリ(prototype.js等)よりも短いコードで記述可能。
 インタラクションの対象としてCSSを指定でき、CSSに慣れているデザイナー
 との親和性も高い。

・対応ブラウザが多い

 IE6.0〜、FireFox2.0〜、Safari3.0〜、Chromeの全てに対応。
 結局はjavaScriptなので、古いブラウザでも利用できるのです。

・無料で利用できるオープンソース

 MIT License と GNU General Public License のデュアルライセンス。
 商用利用が可能な無料のオープンソースです。
 
 
 

●HTML3は「まだ」使えないのですが…

ですが問題があります。HTML5やCSS3は古いブラウザでは機能せず、未だにIE6に
対応しなければならないケースもある現状では利用できる機会が少ないのです。
html5 / css3の対応状況
 
しかし心配は無用です。jQueryは既存のHTML(XHTML)やCSSでも利用でき、
古いブラウザに対応しなければならない案件でも利用することができます。
紹介したサンプルもxhtmlとcssで作成されています。
html5やcss3は仕様が決定されてない部分も多く、現在はブラウザによって
対応がまちまちなので、当面はカリキュラムを作成しません。
 
 
 

●ブログでjQueryの記事を書いていきます

javaScriptはこれまでも仕事で利用してきたのですが、jQueryは始めたばかりです。
なので十分に利用して特長を理解するため、カリキュラムの作成に入る前に
いろいろ試してみる予定です。
その様子をこのブログで紹介していくので、興味のある方は是非御覧になってください。

実際に講座を開く際のカリキュラムはjavaScriptを利用したことがない方にも
分かるように基礎的な部分も説明していきますが、ブログではjavaScriptの基礎を
身につけている方向けに紹介していきます。またデザインドリルでActionScript講座を
受講された方は、プログラムの考え方「設計」はActionScriptと同じことが分かると思います。
 
 

 
 
 

jQuery 01-01: jQueryの取得と参考サイト

jQueryは以下のサイトからダウンロード出来ます(右側のdownloadボタン)。
http://jquery.com/
 
そして素敵なことに、マニュアルを日本語化してくださった方がいます。
ActionScriptと比較して、コマンドの数も少ないので、本気で覚えようとしている方は
一度、目を通して、どのような処理があるのか確認しておくと良いと思います。
jQuery日本語リファレンス
 
またIT系のwebマガジンでもたくさん紹介されています。
ASCII.jp:40分で覚える!jQuery速習講座
jquery.jsを読み解く:第1回 jQueryライブラリ(1~171行目)|gihyo.jp … 技術評論社
技術評論社のjQuery関連記事リスト
 
 
私は本を購入する際、実際に少し読んで確かめてから購入する派です。ですので、
良い内容かどうか調べられる知識を得るまで、ネットで情報収集するようにしています。
以下、情報収集中に参考になったサイトを紹介しています。
少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね – かちびと.net
 
 
またjQueryだけでなくJavaScript全般なのですが、JavaScript(+ HTML5, CSS3)の
共有サイトです。中にはjQueryを利用した作品もあったりします。
jsdo.it – Share JavaScript, HTML5 and CSS
 
上記のように、すでに良いサイトがたくさんあるのですが
自分の学習のためにも、このブログでjQueryの記事を連載していく予定です。
※左のカテゴリーに「jQuery」を追加しました。
 
実際のカリキュラムと差別化するため、基礎的な部分を省くので対象としては
HTML&CSS&javaScriptの基礎を理解している方むけになります。
実際の講座カリキュラムではjavaScriptを一切知らない方から受講できるようにします。
 
次回のjQuery記事は、最初に必要になるreadyイベントについて説明します。
 
 

jQuery 01-02: 読込が完了してから実行(イベントについて)

まずは今回のサンプルを紹介します。
一回目のサンプルなので、機能は非常にシンプルでアラートを表示するだけです。
このサンプルを通して、jQueryで必ず必要になるreadyイベントを説明します。

sample : ページの読込が完了したらアラートを表示する
http://www.designdrill.jp/jquery/01/step01.html

 

●jQueryへのリンク

jQueryを利用するためには前回の記事でダウンロードしたjQueryへリンクする必要があります。
リンクの方法は通常の外部javaScriptと同じでhead領域に以下の様に記します。

<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>

一応サンプルのhtmlを用意しました。機能や表示する要素はありません。ただ
jQueryにリンクしているだけです。ソースを確認し下さい。
http://www.designdrill.jp/jquery/01/step00.html
jQueryのコードは通常のjavaScript同様に外部jsファイルにすることも可能ですが
このブログではhead領域のscriptタグ内に書いていきます。では本題のjQueryに
入ります。
 
 

●readyイベント

javaScriptはhead領域に書かれるため(基本的に)body領域よりも先に
読み込まれます。ActionScriptと同じように読み込まれてないものを操作することは
できないので、jQueryではhtmlファイル(画像などは含みません)の読み込みが
完了してから、処理を開始するようにします。その仕組みがreadyイベントです。
リファレンス:ready(fn)
※引数のfnは関数(function)を指します。つまり引数として()内にfunctionを設定します。
 
ActionScriptのようにイベントはイベントハンドラの構造をとりますが、
ActionScriptとは構造が異なり以下の様な構文になっています。
※readyのイベントハンドラを短く書く構文があるのですが、それは別の講座で説明することになります。

jQuery(document).ready( function(){
  /*--------------------------------------------------
  document(htmlファイル)の読込が完了したら
  この{ }内の処理が実行されます。
  ---------------------------------------------------*/
});

少し細かく説明していきます。
最初のjQueryは、その名の通りjQueryをさし、jQueryの機能を利用するときに必要になります。
続く()の中には操作又は調査する対象を書きます。
ここではdocumentとなっており、これはhtmlファイルを指しています。
jQueryでは、この部分をセレクタと呼びます。
操作(もしくは調査)する対象を「選択している部分」だからセレクタと呼ばれているのでしょう。
()に続けて.(カンマ)を書き、そのあとにreadyと書きます。この部分はイベントと呼ばれ
「いつ」処理を実行するかを指定します。readyは「準備ができたら」という意味です。
ですから、ここまでの意味は「documentの準備ができたら」となります。
そして準備ができたらreadyの直後の” ( “と ; の前の” ) “で囲まれた部分が処理されます。

しかしjQueryでは、さらに別の構造をreadyの()内に入れておかなければなりません。
以下のようにfunction () { }が必要で、実際に実行される処理は、このfunctionの{ }内
に書くことになります。

jQuery(document).ready( function(){
  /*--------------------------------------------------
  実際の処理はfunction の構造内に書くことになります。
  ---------------------------------------------------*/
});

このfunctionの構造はメソッドの「作成」の構文であり「実行」ではないので
通常のjavaScriptでは実行されません。なのでjQuery独特の構文だと思います。
このfunctionについての考察は別の回で行います。
functionの構造まで含めてreadyのイベントハンドラとして覚えてしまいましょう。

今回のサンプルは、このreadyのイベントハンドラ内にalert文を入れているので、
htmlの読込が完了したらアラートが表示されるのです。

jQuery(document).ready( function(){
  alert("ready!");//---アラート表示
});

次回は、アラートを表示するのではなくページ内の要素を変更することに挑戦します。
 
 
 

jQuery 01-03: div要素に文字を設定する(メソッドについて)

jQueryでhtmlを操作する事に挑戦します。ここではdiv要素に文字を設定します。
実用性は無いのですが、簡単に記載でき構文の確認にちょうどよいのです。
特に、ここではメソッドについて学びます。

sample : divにjQueryで文字を表示する
http://www.designdrill.jp/jquery/01/step02.html
※ソースを表示して、htmlに3つある各divには何も書かれていないことを確認してください。
 表示した文字はjQueryによって表示されます。

 
ではソースを確認しましょう。チェックすべきは以下の一行です。この処理はreadyの
イベントハンドラ内に入っているので、htmlの読込が完了したらすぐに実行されることになります。

jQuery("div").text("hello world");	

まず、最初にjQueryを付けるのは前回のreadyイベントと同じで、まずは
jQueryの処理であることを明示します。続く()内にセレクタを指定します。
前回の記事ではdocumentを指定しましたが、今回はここにhtml要素の「div」を
設定します。これでdiv要素を操作する事ができます。
 
続いて.(カンマ)をはさみtextと記述されています。前回はここに設定された
readyをイベントと説明しましたが、今回は異なります。このtextは
イベント(いつ)ではなくメソッドと呼ばれ「何をする」かを指定しします。
textメソッドはセレクタに設定した要素の内容を設定することができます。
リファレンス:text(値)

メソッドの処理を実行するためには後ろに()を付けるのですが、メソッドによっては今回の
サンプルのように()の中に値を設定します。この値のことを引数と言います。
今回のサンプルでは”hello world”が引数になります。

つまりこの行は「div要素にhello worldと設定」という意味になります。 前回学んだreadyイベント
の中に書かれているので、サンプルをクリックするとすでにhello worldと表示されています。
 
 
 
●メソッドの返値
jQueryではメソッドの引数を設定しないと返値を返すように
なります。以下のstep03.htmlを開きソースを確認してください。
http://www.designdrill.jp/jquery/01/step03.html
リファレンスでは要素を設定するtextとは別に説明されています。
リファレンス:text( )

 
まずbodyタグ内の各div要素に文字があること(aaaaa, bbbbb, ccccc)を確認して下さい。
続いてjQueryのtextメソッドに引数が設定されていないことを確認してください。
ここで勘違いしやすいのが、引数を設定しないとdivの要素が何もない状態に
なるのではないかという点です。しかしstep03.htmlのように、引数に何も
設定していないからといってdivに何も設定されなくなるというわけではありません。
 
もしdivの内容を消したい場合は以下のstep03b.htmlのように引数に空の文字列
“”を設定することで可能です。
http://www.designdrill.jp/jquery/01/step03b.html
 
では実際に返値を受け取ってみましょう。
以下のstep04.htmlを開きソースを確認してください。
引数の受取方はActionScriptと同じで、=を使い左辺の変数に代入する形となります。
http://www.designdrill.jp/jquery/01/step04.html

var returnStrings = jQuery("div").text();	

サンプルでは受け取った返値をalertで表示するようにしていますが、alertの内容で確認
できるように、div要素が複数ある場合は全て連結した状態で返されます。

このように値を調べる仕組みを利用すれば、フォームなどに指定された内容を
書かないと、アラートを出すような仕組みも作成できます。
※追々そのようなサンプルも作成しようと思います。

次回はセレクタの細かい設定について説明します。
 
 

jQuery 01-04: セレクタの指定

●セレクタの指定

前回のサンプルでは3つある全てのdivに文字が設定されました。これは、
まとめて内容を設定したい場合には都合が良いかもしれませんが、大抵の場合不都合になるでしょう。
ですので今回はより詳細なセレクタの設定を学び、各divに個別の文章を表示させます。

sample : 各divに異なる文字を表示する
http://www.designdrill.jp/jquery/01/step05.html
※ソースを開き、divにidやclassが設定されていることを確認してください。

 
 
ポイントは各divにclassやidが設定されていることです。jQueryのセレクタはhtmlの要素だけでなく
idやclassも指定することができるのです。そして指定方法は以下の様にcssと同じ文法になっています。

jQuery("#id_test").text("id = id_test");//---idを指定
jQuery(".class_test").text("class = class_test");//---classを指定

また、初歩の段階で間違いやすいサンプルも確認しておきましょう。以下のstep05b.htmlのソースを
確認してください。step05.htmlとほとんど同じで問題ないように見えますが、実際には全て”div”と
表示されてしまっています。
http://www.designdrill.jp/jquery/01/step05b.html

これは設定の「順序ミス」によるものです。せっかくidやclassを指定したのに、その後で全てのdivを
設定するようにしているため、全て”div”となってしまうです。セレクタの指定は広い範囲から狭い範囲
へ設定するように気を付けましょう。
 
 
他にもcssと同じ設定のサンプルを確認しましょう。cssでは複数の要素をスペースを跨いで利用する
ことで、「〜にある〜」(例えばaタグに挟まれたbタグ)という指定ができました。これと同じように
セレクタも設定できるのです。

以下のstep06.htmlのソースを確認してください。このサンプルではpタグ内のbタグの内容だけ変更して
います。pタグの外にあるbタグは変更されないことを確認してください。
http://www.designdrill.jp/jquery/01/step06.html
他にも以下のリファレンスにあるような様々な選択方法があります。
フォームの要素も多く、ユーザビリティの高いフォームを作成できそうです。
リファレンス:セレクタ
セレクタの指定はcssの構文以外にもjQuery特有のものがあり、使い勝手が良さそうです。
以下に、偶数の要素だけを指定する「:even」を利用したサンプルを紹介します。 
※セレクタはjQueryのポイントとなりそうなので、他の構文も追々紹介しようと思います。
 
 

●テーブルの偶数行だけ色を付ける

まずはサンプルを確認しましょう。テーブルの偶数番目の列にjQueryで背景色を設定しています。

sample : 偶数番目の列にjQueryで背景色を設定
http://www.designdrill.jp/jquery/01/step07.html
※html部分にはテーブルの背景色指定がされていないことを確認してください。

 
セレクタの説明の前にstep07.htmlでは新しいメソッドを利用しているので紹介しておきます。
cssメソッドを利用するとセレクタで指定した部分のcssを設定することができます。引数は2つ
必要で、1つめがcssの属性、2つめがその値です。サンプルでは背景色(background-color)
をピンク(#FFCCCC)にしています。
リファレンス:css(name, value)メソッド

jQuery("tr:even").css("background-color", "#FFCCCC");

 
続いてセレクタの部分です。ここでtrに続けて「:even」とすることで偶数番目の行(tr)にだけ
メソッドが実行されるのです。
リファレンス::evenセレクタ
※行の番号は0(偶数扱い)から始まることに注意してください。

jQuery("tr:even").css("background-color", "#FFCCCC");
※evenの前のコロン(:)を忘れないようにしましょう

 
今回の記事はここで終わりです。
次回はインデックス番号(要素に振られた番号)について説明しようと思います。
今回の :even もインデックス番号が偶数という意味です。今回のサンプルはテーブルが
1つだからうまくいきましたが、複数のテーブルがある場合は思うように機能しない
場合があります。その問題を紹介しながらインデックス番号の理解を目指します。
 
 
 
 

jQuery 01-05: インデックス番号

●インデックス番号は0から始まる

jQueryではhtml内の同じ要素を操作できるように番号が割り当てられます。
この番号をインデックス(番号)と呼びます。前回利用したセレクタの” : even”も、
このインデックス番号が偶数の時に選択されます。これは便利なのですが、きちんと
理解していないと思うように利用できないので、今回はインデックス番号について説明します。

まずは本当にインデックス番号が割り当てられているのかを確認しましょう。
以下のサンプルではテーブルのtdにtrのインデックス番号を表示するようにしたサンプルです。
http://www.designdrill.jp/jquery/01/step08.html

ソースにはコメントで解説がありますが、これは現時点では覚える必要はありません。
前回も説明しましたが、最初の注意点はインデックス番号は0から始まるという点です。
だから前回、偶数の行に色を付ける処理で、最初の行に色がついたのです。
 

●インデックス番号はページを通して連番で割り当てられる

あと注意すべきことは、各要素にはそのページを通して番号が振られることです。
分かりにくいので、問題のあるサンプルで確認しましょう。
step09.htmlのjQueryのコードは前回のサンプルstep07.htmlと全く同じです。
ただテーブルが2つあります。注意すべきは2つめのテーブルは最初の行に色がついておらず、
次の行に色がついており最初のテーブルと色の付き方が逆になっている点です。
http://www.designdrill.jp/jquery/01/step09.html
前回のサンプルstep07.html
 
各テーブルとも最初の行に色を付けたいのに、何故このようになったかを考えます。
この問題を解く鍵はインデックス番号がページを通して振られることです。
step08.html同様にstep09.htmlにもインデックス番号を表示するようにしたサンプルを
用意したので確認してください。
http://www.designdrill.jp/jquery/01/step09b.html

tdのインデックス番号はテーブル毎に0から始まるのではなく、ページを通して
割り当てられるのです。そのため2つめのテーブルの行(tr)は9(奇数)から始まるのです。
そのために1つ目のテーブルと異なってしまったのです。
 
この問題を解決するのは意外と単純です。各テーブル毎にidを付けて、そのid毎のtrに
色を設定すればよいのです。実際に問題を解決したstep10.htmlのソースを確認してください。
ポイントは各テーブルタグにidで名前を付けている点と、jQueryのセレクタの部分でidの指定
を追加している点です。
http://www.designdrill.jp/jquery/01/step10.html
各テーブルとも、きちんと先頭の行に色がついているのを確認できます。
インデックス番号で今回のような問題にあったら、このようにidを追加して対応すると
良いでしょう。
 
 

●ついでにaddClassの紹介

前回/今回はcssメソッドを利用してhtmlの要素にcssを指定しましたが、他にも方法が
あるので、ついでに紹介しておきます。利用するのはaddClassというメソッドです。
リファレンス:addClass(class)メソッド
 
これを利用するとセレクタで指定した部位に、引数で指定したcssのクラスを設定する
ことができます。以下のサンプルを開いてソースを確認してください。
http://www.designdrill.jp/jquery/01/step11.html

このサンプルを開き、ソースのhead領域にcssが設定(クラスでtr-even)されていることを
確認してください。続いてjQueryの部分でtrの偶数行にaddClassメソッドでcssのクラス
tr-evenが設定されていることを確認しましょう。
複雑なcssのクラスを設定したい場合は、こちらのほうがソースが見やすくなるでしょう。

さらについでに、奇数行にも別のcssを割り当てたサンプルを紹介します。
奇数行の選択はセレクタの「: odd」を利用します。
リファレンス::oddセレクタ
http://www.designdrill.jp/jquery/01/step12.html
 
 
 

jQuery 01-06: 静的な部分にもjQueryを利用する是非

●要素の属性を追加修正する

今回はattrメソッドを利用して、要素の属性を追加/修正するサンプルを紹介します。
以下のサンプルは、jQueryで「リンクを別ウインドウで開く」ようにしています。
ソースを開いてhtmlにはtargetを設定していないことを確認してください。
http://www.designdrill.jp/jquery/01/step13.html
 
attrメソッドは引数を2つ必要とし、最初に追加/変更したい属性、2つめに設定したい
値を渡します。step13.htmlではセレクタでaタグを選択し、attrメソッドでtarget属性の
値を_blankに設定してあります。

jQuery("a").attr( "target" , "_blank" );

リファレンス:attr(key,value)メソッド
 
 

●jQueryは便利だけれど…

step13.htmlのようにjQueryはインタラクティブなコンテンツ以外にも便利に利用でき
そうです。例えば、リンク集のページで全てのリンクを別ウインドウで開くように
仕様変更する場合は大量のaタグを書き換えるよりも効率的でしょう。
 
しかし注意しなければいけない問題もあります。それは技術的な部分ではなく運用に
おいてです。htmlは最初に作成する人と、更新/運用する人が異なる場合も多いです。
そのような場合、更新/運用する方がjQueryの知識がないと更新できなくなってしまいます。
ですので、jQueryを利用するなら場所を限定して運用側が更新するような部分では
jQueryを利用せず、インタラクティブが必要な部分(ショーケース等)に限定して
利用した方が無難だと思います(もしくは更新の際の簡単なマニュアルを用意)。
 
またjQueryのサンプルサイトでは「タブで切り替え」や「開閉可能なdiv領域」など
紹介していますが、これらについても注意が必要です。jQueryの練習材料としては
良いのですが、実際の利用するかはターゲット層を考えましょう。
ネットに疎い方もターゲットとする場合は、タブや開閉式の仕組みは「気付かれず
スルーしてしまう危険」があります。
 
実際に私が一部関わった大手サイトでも開閉式の仕組み(カテゴリをクリックすると
関連商品へのリンクが表示される。たくさんのカテゴリ/製品をもった企業にとっては
有用に感じられたのだと思います)が利用されていましたが、次の更新の際には無く
なっていました。たぶん気付かずに閉じられたままでリンクがスルーされることが
多かったのでしょう。
 
jQueryを利用すると、いろいろインタラクティブな仕組みが作成できて楽しいのですが
ネット初心者にとって利用しにくい(気が付かれない)仕組みは採用すべきではない
でしょう。

 
 

jQuery 01-07: jQueryの短縮構文

●jQueryを$で置き換える

一章の最後に、jQueryの短縮構文を学びます。
これまで、通常のjavaScriptと区別しやすいようにjQueryと明示的に書いてきましたが
実はこれは「$」で置き換えることが可能です。

sample : jQueryを$で置き換える
 
 jQuery(“a”).attr(“target”,”_blank”);
  ↓
  $(“a”).attr(“target”,”_blank”);

 
http://www.designdrill.jp/jquery/01/step14.html
サンプルのstep14.htmlを開きソースを確認してください。jQueryが$になっていても正常に
機能することが確認できます。これはjQueryのソースを短くするのに大変便利ですが、
初めのうちはjQueryの機能を利用している事を意識できるようにjQueryと明示的に書くのも
良いと思います。

 
 

●readyイベントの短縮構文

jQueryでは必ずreadyのイベントハンドラが必要になってきます。ですのでreadyには以下の
様な短縮構文が用意されています。これを利用すれば書く量を大幅に減らすことできるので
大変便利ですが、最初のうちはreadyイベントを意識できるように短縮しないで書くのも
良いと思います。

sample : readyイベントハンドラの短縮構文
 
 jQuery(document).ready(function () {
  ↓
  $(function () {

 
http://www.designdrill.jp/jquery/01/step15.html 
step15.htmlを開いてソースを確認してください。上記のように短縮して書いても
正常に機能することを確認できます。
 
 
次回から2章に入ります。2章ではready以外のイベント(主にクリック)と
アニメについて説明する予定です。
 
 
 

jQuery 02-01: マウスに関連したイベントハンドラ

●clickイベント

大抵のインタラクティブコンテンツで必要になるのがクリックのイベントハンドラです。
1章で学んだreadyのイベントハンドラと考え方は同じで、構文も似ています。
まずは構文を確認しましょう。

 $("div.testDiv").click(function () {
  //ここにクリックされたら実行したい処理を書きます。					
 });

readyのイベントハンドラと同様にjQuery(ここでは$と省略)の後にセレクタを指定し
(サンプルではtestDivクラスのdiv要素).(ドット)を挟んでイベント名のclickを書き、
続く()とfunctionの構造は全く同じです。クリックしたら実行したい処理をfunctionの
{ }の中に書きます。
 
ではサンプルで本当にクリックが取得できるか確認しましょう。

sample : クリックしたらdivに文字を表示する
http://www.designdrill.jp/jquery/02/step01.html
※clickのイベントハンドラもreadyのイベントハンドラ内に書きます。

 
イベントの構文は慣れないと混乱しやすいので気を付けましょう。()の中にfunctionの
構造が入ることを忘れないようにします。つづいてはcssでもおなじみのhoverです。
 
 

●hoverイベント

hoverの機能はcssのものと同じですが、構文は異なりイベントハンドラの構文となります。
しかも、前述のclickやreadyとことなりイベントハンドラ内にいれるfunctionが2つになります。
※注意点として最初のfunctionの}の後ろにカンマを付けることを忘れないでください
 (下のコードでは赤字にしてあります)。

 $("div.testDiv").hover(
  function () {
   //マウスが上にのった時に実行したい処理を書きます。					
  },
  function () {
   //マウスが外れた時に実行したい処理を書きます。					
  }
 );

ではサンプルで本当にクリックが取得できるか確認しましょう。

sample : マウスオーバーとマウスアウト時にdivに文字を表示する
http://www.designdrill.jp/jquery/02/step02.html
※最初のfunctionの後ろに付けるカンマを忘れないようにしましょう。

 
それでは、これを利用してロールオーバーボタンを作成しましょう。
step03.htmlを開いてソースを確認してください。hoverのイベントハンドラはstep02.htmlと
全く同じです。ここで着目すべきはjQuery 01-06で紹介したattrメソッドを利用して
imgのsrc属性を変更して画像を変えている点だけです。
http://www.designdrill.jp/jquery/02/step03.html
 
このテクニックは実用的にも見えますが、今はcssで作成することの方が多いと思います。
そのほうがjavaScriptがoffの環境でも利用できますから。jQueryはcssでできることを
実現するのではなく簡単なFlashコンテンツを置き換える手段として考えた方が良いと思います。
googleによる検索結果(css ロールオーバー)

 
 

● toggleイベント(スイッチボタン)

トグル処理とは「クリック毎に異なる処理をすること」を指します。身近な例ではスイッチボタン
が該当します。例えばサウンドのON / OFFでは一回クリックするとサウンドをON、次にクリック
するとOFFになります。構文はhoverのイベントハンドラ同様に中に2つのfunctionを持ちます。
step04.htmlではクリックする度にcssの設定を変更して、divの背景色を青/赤と切り替えます。
http://www.designdrill.jp/jquery/02/step04.html
 
このtoggleイベントにはhoverイベントの構文とは異なる仕様があります。それは中に入れる
functionは2つより多くても良いという点です。その場合、クリックされる度に先に書いた
functionから順々に実行していきます。以下のstep05.htmlのソースを確認し、クリックする
たびに先のfunctionから順々に実行されることを確認してください。
最後のfunction以外は}の後ろにカンマが必要になるので忘れないようにしましょう。
http://www.designdrill.jp/jquery/02/step05.html
 
 
次回からは演出に関連したメソッドを紹介していきます。
 
 

jQuery 02-02: フェード処理

●fadeInメソッド / fadeOutメソッド

jQueryを利用するとフェードイン/フェードアウトが非常に簡単に実現できます。

sample : フェードイン / フェードアウト
http://www.designdrill.jp/jquery/02/step06.html
※青いdivをクリックするたび、オレンジのdivがフェードアウト/フェードインを繰り返します。

 
それではstep06.htmlのソースを確認してください。前回学んだトグルイベントを利用して
フェードイン / フェードアウトを繰り返すようにしています。今回のポイントは
トグルイベントの2つのfunction内に書かれたフェード処理用のメソッドfadeIn / fadeOutです。
リファレンス:fadeIn
リファレンス:fadeOut
 
fadeInとfadeOutはメソッドで、引数にはフェードにかける時間をミリ秒で指定します。
サンプルでは500としているので、500ミリ秒(0.5秒)でフェードします。また引数として
ミリ秒ではなく”slow”,”normal”,”fast”といったキーワードも利用できます。この場合は文字
としてダブルクオートで囲むことに注意してください。
・slowやfastを利用したフェードのサンプル
 
 
 

●フェード処理の注意点

パソコンにとってグラフィックの描画は非常に負荷が掛かります(そのため大抵のPCでは
グラフィックを専門に処理するGPUを搭載しています)。その中でも透明度の処理は重く、
これを軽減するためにプログラマーは様々な工夫をすることになります。実際jQueryでも
透明となり、見えない要素は表示しないようにしています(たぶんdisplay:none)。
flashの講座でも負荷を減らすためフェードアウト後にvisibleをfalseにしました。
 
そのためフェードアウト後にレイアウトが崩れる場合があります。サンプルstep07.htmlでは
divの順番を入れ替えてボタンのdivを下に移動しただけですが、フェードアウトが完了すると
オレンジ色のdivは消されてしまうためボタンが上に上がってレイアウトが崩れてしまいます。
http://www.designdrill.jp/jquery/02/step07.html
 
これに対処するのは簡単で、あらかじめ消えることを想定してcssやテーブルなどで
レイアウトしておきます。以下のサンプルstep07b.htmlではオレンジ色のdivを固定サイズ
のdivで囲んでいるためstep07.htmlのような問題は生じません。ソースを開いてhtml部分で
オレンジ色のdivが固定サイズのdivに囲まれていることを確認してください。
http://www.designdrill.jp/jquery/02/step07b.html
 
 
 

●指定した透明度にするfadeTo

最後に使いそうで使わない。また可能なら利用を避けるフェードのメソッドを紹介します。
それはfadeToメソッドで、指定した値の透明度にすることができます。
リファレンス:fadeTo ※透明度の指定は0〜1であることに注意してください

以下のstep08.htmlはfadeToのサンプルでtoggleイベントを利用してクリックする度に
透明度を変更(0 → 0.25 → 0.5 → 7.5 → 1)しています。サンプルのようにdivに配置
した画像もきちんとフェードさせることができます。
http://www.designdrill.jp/jquery/02/step08.html
 
前述したとおり透明度を設定したグラフィックの描画は負荷が高いため、可能なら利用を
避けた方がよいかもしれません。fadeOutは透明になったら表示されなくなるため負荷を
低くできるのですが、fadeToでは透明度を維持したまま表示され続けるので負荷が継続して
かかるのです。負荷が大きくなると低スペックのマシンでアニメがカクつくようになります。
 
再度fadeOutが透明になったあとに消していることを確認できるサンプルを用意しました。
step08b.htmlのソースを確認してください。変更しているのはtoggleイベントの最初の
function内の処理で、ここでfadeToの代わりにfadeOutを利用しているだけです。
http://www.designdrill.jp/jquery/02/step08b.html
 
step08.htmlではクリックして見えない(透明度0の)状態でもクリックして透明度を
0.25に変更できましたが、step08b.htmlでは最初クリックして透明になると次はクリック
できません。このことからもfadeOutでは透明にしたあとに消していることが確認できます。
逆に言えば、透明にしても表示され続けるfadeToを利用するのは負荷がかかるので利用を
控えるべきといえます。
 
 
次回はフェード以外の演出を説明します。