jQueryサンプル集

jquery.sample.js

/*
jQueryは今やWeb制作に欠かせないツール・ライブラリとなりました。
そのため、利用頻度も高くなり、HTMLコーダーもJSの記述もできなければなりません。

でも、JavaScriptってなんだか難しそう？と感じる方も多いはず。

そこでjQueryのサンプルをコメントと共に学んでみませんか？

というのがこのコードの目的です。

jQueryを習得してさらなるWeb制作のステップアップを！
*/

/*
その前に、jQueryでよくあることをまとめました。
実際のサンプルを読む前に以下のルールをマスターしましょう。

1. 「jQuery」と「$」は同じもの
　同じものというと少し語弊が有りますが、「$」は簡単に言うとショートカットです。
　HTMLを記述している時に長ったらしいID属性やクラス属性を記述するのは嫌ですよね？
　そんなめんどくさがりな人のために（というわけでも無い）、
　jQueryが予め準備しているショートカットが「$」です。
　「$("#container")」と「jQuery("#container")」は同じものです。
　もう少しわかりやすく言うと、「体は子供！頭脳は大人！」と同じで、
　見た目が異なれど小さくなる以前に中身は同じだよ！ということです。
  なので、サンプルコードに「$」が出てきても迷わず「体はこｄ（ｒｙ」を思い出してください。

2. 処理を行う場合には一定のルールがある
　一定のルールと言っても難しいものでは無く、みなさんがよく見たことのあるもので、以下の記述を利用します。
　$(function(){
　  // ここに処理を記述する
　});
  良くブログなどで紹介される時に見かけるこの記述は、
  「HTMLドキュメントの表示が完了後実行してください」
  という命令になります。
  この記述を省いて処理を書いてしまうと、予期せぬ動きに悩まされることもしばしば...

3. jQueryはCSSセレクタを利用する
　「jQueryはCSSセレクタを覚えればへの河童！」とよく言われますが、半分正解で半分間違いです。
　CSSセレクタを利用して、何か動きや装飾を施したい要素を抽出（選択）し、JSコードを書いて動かしていきます。
　コードと言っても、簡単なアニメーションなどはjQueryが予め準備してくれています。
  CSSセレクタをマスターしている人はjQueryの使い方を、そうでない方はCSSの書き方をマスターしましょう！

4. それ、jQuery Plugin Registryにあるかもよ？
  jQueryのプラグインは世の中に沢山有ります。
  もしかしたら「作りたい！」と思っているものはすでに誰かが作っているかもしれません。
  （Laquu.JSなんかがそうですね！）
  まずは、jQuery Plugin Registry（http://plugins.jquery.com/）を探してみましょう！
  アニメーションだけでも200を超えるプラグインが登録されているのできっと探しているものが見つかるはず！
*/


/*
1. フェードイン・フェードアウト

フェードイン・フェードアウトはよくある見せ方を工夫するためのものです。
これは、jQueryが予め準備してくれている機能の1つです。
サンプルでは、#containerに存在するimgタグ全てにフェードイン・フェードアウトを施しています。
*/
// フェードイン処理
$("#container img").fadeIn(); 

// フェードアウト処理
$("#container img").fadeOut(); 

// フェードインの速度を遅く表現
$("#container img").fadeIn("slow"); 

// フェードアウトの速度を遅く表現
$("#container img").fadeOut("slow"); 

// フェードインの速度を早く表現
$("#container img").fadeIn("fast"); 

// フェードアウトの速度を早く表現
$("#container img").fadeOut("fast"); 

// フェードインの速度を早く表現
$("#container img").fadeIn("fast", function(){
  // フェードイン処理が完了した後、アラートで「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」とダイアログを表示します。
  alert("(ﾟ∀ﾟ)ﾗｳﾞｨ!!");
}); 

// フェードアウトの速度を早く表現
$("#container img").fadeOut("fast" function(){
  // フェードイン処理が完了した後、アラートで「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」とダイアログを表示します。
  alert("(ﾟ∀ﾟ)ﾗｳﾞｨ!!");
}); 

/*
さて、ここで出てきたキーワード「function」について少し説明します。
functionは関数という意味ですが、そもそも関数って何かと言いますと、
「機能を集約したまとまり」を表します。

例えば今回の場合、「alert("(ﾟ∀ﾟ)ﾗｳﾞｨ!!");」は同じことを繰り返して表示しています。
alertで表示している文字が同じでなので、一つのまとまりにすることができます。
今回の場合は
function showRavi() {
  alert("(ﾟ∀ﾟ)ﾗｳﾞｨ!!");
}
とまとめることができます。
「showRavi」の部分は好きな名前をつけることができます。
例えば、「eureka」だったり「anemone」だったりと、本当に好きな名前をつけることができます。
また、大文字小文字が混ざっても構いません。

それでは、関数でまとめた後の書き方はどうなるのか見てみましょう。
*/
// (ﾟ∀ﾟ)ﾗｳﾞｨ!!の表示を行う関数を作りました。
// その名も「showRavi（(ﾟ∀ﾟ)ﾗｳﾞｨ!!を表示）」
// わかりやすいですね！
function showRavi() {
  alert("(ﾟ∀ﾟ)ﾗｳﾞｨ!!");
}
// showRaviの後ろに「()」を付けないことに注意してください。
$("#container img").fadeIn("fast", showRavi); 
$("#container img").fadeOut("fast", showRavi); 

/*
このように、関数をひとまとめにすることで、同じ処理を何度も記述しなくて済みます。
同じ処理と言うのは「alert("(ﾟ∀ﾟ)ﾗｳﾞｨ!!");」のことを指しています。
ことわざでも「仏の顔も三度まで」といいますよね？
同じ処理をプログラムにも何度も行わせる場合はひとまとまりにしたほうが
見た目も、品質も良くなります。

それでは、次のサンプルを見て行きましょう。
*/

/*
2. アニメーション

fadeInもアニメーションしているように見えますが、こっちのアニメーションは
ぐわんぐわん動かせちゃいます。
どのくらい動かせるかというと、CSSで指定出来る
・高さ
・幅
・透明度
・位置
などが主に動かせます。
背景色などの色をアニメーションさせることはできません。
（プラグインを利用することでアニメーションさせることは可能です。）

サンプルでは#containerにある「#animate」ID属性を持っている要素を動かしています。
*/
// アニメーションしながら幅を100pxに広げます。
$("#container #animate").animate({
  width: '100px'
});

// アニメーションしながら高さを100pxに広げます。
$("#container #animate").animate({
  height: '100px'
});

// アニメーションしながら幅と高さを100pxに広げます。
$("#container #animate").animate({
  width: '100px',
  height: '100px'
});

// アニメーションしながら幅と高さを100pxに広げ、
// 位置を移動させます。
$("#container #animate").animate({
  width: '100px',
  height: '100px',
  top: '50px',
  left: '200px'
});

// アニメーション完了後に「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」と表示します。
$("#container #animate").animate({
  width: '100px',
  height: '100px',
  top: '50px',
  left: '200px'
}, {
  complete: function() {
    //「complete」はjQueryで指定されていて、
    // アニメーション完了後の処理を記述します。
    alert("(ﾟ∀ﾟ)ﾗｳﾞｨ!!");
  },
  animate: function() {
    // 「animate」もjQueryで指定されていて、
    // アニメーションする度の処理を記述します。
    alert("(ﾟ∀ﾟ)ﾗｳﾞｨ!!");
  }
});

/*
さて、またキーワード「function」が出てきましたね。
先程も説明したとおり、関数は「機能を集約したまとまり」ですが、
今回、新たに言葉を覚えましょう。
「コールバック関数」です。
「コールバック関数」は、「◯◯が完了したら処理」や「◯◯が実行される度処理」
などのように、行っている処理が完了・処理されるたびに呼び出される関数のことを言います。
「関数」は「機能を集約したまとまり」を意味しているのに、
「コールバック関数」だけ意味が異なるのか？

大丈夫です、異なることはありません。
異なるのは「言い方」だけで、関数自体の何かが変わることはありませんので、
あまり難しく考えないでください♪

何も変わらないということですが、先ほど用意した「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」を表示する関数を
指定するにはどうしたらよいでしょうか？
その例が以下のサンプルになります。
*/
$("#container #animate").animate({
  width: '100px',
  height: '100px',
  top: '50px',
  left: '200px'
}, {
  // 「()」を付けてはいけません！
  complete: showRavi,
  // 同じく「()」を付けてはいけません！
  animate: showRavi
});

/*
このように、fadeInやfadeOutの時と同じように記述することができます。
これでアニメーションも見やすくなりましたね！

それでは次からは駆け足でサンプルを紹介していきます。
*/

/*
3. スライド

スライドは上下のスライドするアニメーションを表現します。
fadeIn・fadeOutと同じように速度を指定することも可能です。
*/
// 要素の高さをスライドアップで変化させます。
$("#contents #slideUp").slideUp("slow");

// 要素の高さをスライドダウンで変化させます。
$("#contents #slideDown").slideUp("slow");

// スライドアップの処理が完了した後に行わせる、コールバック関数の指定もできます。
// スライドアップ完了後に「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」と表示されます。
$("#contents #slideUp").slideUp("slow", showRavi);

// 「開いて閉じて」を交互に行ってくれるものだって有ります。
// 「showRavi」は開閉するたびに呼び出されます。
$("#contents #slider").slideToggle("fast", showRavi);

/*
4. イベント

イベントはブラウザでWebページを見ている人が「マウスで◯◯をしたら××をする」というように、
ある出来事をきっかけにある処理を行う際に利用します。
イベントにはたくさんの種類が有り、スマートフォンも合わせると以下のようになります。
・クリック
・マウスオーバー
・マウスアウト
・スクロール
・チェンジ
・リサイズ
・サブミット
・タッチスタート
・タッチエンド
・タッチムーブ
などなど、他にも有りますが、挙げるときりがありません。
なので今回は、よく使われるイベントのサンプルを紹介します。
*/

// クリックされたら「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」を表示します。
$("#container a").click(showRavi);

// マウスが乗っかった時、外れた時に「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」を表示します。
$("#container a").mouseover(showRavi);
$("#container a").mouseout(showRavi);

// ブラウザがスクロールされるたびに「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」が表示されます。
$(window).scroll(showRavi);

// セレクトボックスが切り替わったら「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」を表示します。
$("#container select").change(showRavi);

// ブラウザをリサイズするたびに「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」が表示されます。
$(window).resize(showRavi);

// フォームのデータを送信する際に「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」と表示されます。
$("form").submit(showRavi);

// スマートフォン端末で、タッチを開始した際（画面に触れた際）に「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」と表示されます。
$("#container a").bind("touchstart", showRavi);

// スマートフォン端末で、タッチしながら移動した際に「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」と表示されます。
$("#container a").bind("touchmove", showRavi);

// スマートフォン端末で、タッチを終了した際（画面から離れた際）に「(ﾟ∀ﾟ)ﾗｳﾞｨ!!」と表示されます。
$("#container a").bind("touchend", showRavi);