「jQuery本格入門」 サンプルプログラム集
「jQuery本格入門」(以下、本書) をお読みいただきありがとうございます。このファイルは本書に掲載したサンプルプログラムの一部を収録したものです。本書をお読みいただく際の参考になれば幸いです。
サンプルプログラムはchapter00_prelude～chapter10の各フォルダ(ディレクトリ)に章別に収めてあります。jQueryやQUnitなどのライブラリはlibディレクトリ以下に収めてあります。これらも必要に応じて参考にしてください。
なお、第9章のサンプルプログラムは、PHPによるサーバアプリケーションを含んでいますので、chapter09フォルダ(ディレクトリ)以下すべてをPHPプログラムを実行できるWebサーバ環境にコピーすると実行できるようになります。
[+] 正誤表
お詫びして訂正いたします。
リスト9-22 36行目～ (ファイル中のサンプルは修正済)
誤
// Google Feed APIのパラメータ
var params = {v: '1.0', num: 5, q: feed};
// gihyo.jp全体のフィード
var feed = 'http://gihyo.jp/feed/rss2';
正
// gihyo.jp全体のフィード
var feed = 'http://gihyo.jp/feed/rss2';
// Google Feed APIのパラメータ
var params = {v: '1.0', num: 5, q: feed};
リスト9-27 74行目～ (ファイル中のサンプルは修正済)
誤
$('#error').ajaxError(eventHandler);
$('#complete').ajaxComplete(eventHandler);
));
正
));
$('#error').ajaxError(eventHandler);
$('#complete').ajaxComplete(eventHandler);
(筆者より)
第1章
第2章
第3章
第4章
| リスト4-1 | 要素の表示 |
| リスト4-3 | メソッドの実行順 |
| リスト4-6 | animateの設定とアニメーションの動作 |
| リスト4-9 | 'transform'プロパティの設定と値の取得 |
| リスト4-10 | animateメソッドとキュー |
| リスト4-16 | queueとdequeueによるアニメーションの実行(6) |
| リスト4-20 | [1.7] 名前付きキューに登録されたアニメーションの停止 |
第5章
| リスト5-3 | Accordionウィジェットの基本的な要素の構成 |
| リスト5-6 | Buttonウィジェットの基本的な要素の構成 |
| リスト5-7 | Datepickerウィジェットの基本的な要素の構成 |
| リスト5-12 | Tabsウィジェットの基本的な要素の構成 |
| リスト5-13 | AccordionとButtonに表示するアイコンの変更 |
| リスト5-14 | Accordion、Datepicker、Dialog、Sliderのアニメーション |
| リスト5-22 | ドラッグする要素の指定 |
| リスト5-28 | ドラッグできる要素や範囲を限定 |
| リスト5-33 | 縦横比を保ったままサイズ変更 |
| リスト5-37 | 要素をドラッグで選択 |
| リスト5-40 | 別の要素への受け渡し |
| リスト5-42 | class属性によるアニメーション |
| リスト5-43 | positionメソッドによる要素の配置 |
第6章
| リスト6-1 | jQueryオブジェクトを$とは別の変数で代替 |
| リスト6-2 | 異なるバージョンのjQueryを共存 |
| リスト6-6 | 配列と同じ操作を行うメソッド |
| リスト6-12 | 配列の要素からHTMLを生成 |
| リスト6-13 | $.eachにオブジェクトのプロパティを設定 |
| リスト6-19 | thisの設定とfalseの処理も行うeach関数 |
| リスト6-23 | オリジナルのeach, mapをObject,Arrayのメソッドに拡張 |
| リスト6-31 | プラグインのメソッドを定義 |
第7章
| リスト7-1 | ボタンがクリックされたらメッセージを表示 |
| リスト7-4 | クリックとボタンのイベント処理 |
| リスト7-5 | マウスカーソルと要素の重なり |
| リスト7-6 | hoverとtoggleによるイベントハンドラの登録 |
| リスト7-7 | メソッドによるイベントの発火 |
| リスト7-8 | フォーカスが当たる要素とイベント処理 |
| リスト7-9 | change/select/submitのイベント処理 |
| リスト7-10 | イベントの発火順とキーコード |
| リスト7-11 | 特殊キーの押下を判定 |
| リスト7-12 | スクロールと要素の位置 |
| リスト7-13 | スクロール可能な要素 |
| リスト7-14 | readyと$.holdReady |
| リスト7-16 | bindによるイベント処理の登録 |
| リスト7-17 | 登録・削除に用いる名前空間 |
| リスト7-18 | live/dieとdelegate/undelegate |
| リスト7-21 | [1.7] on/ofによるメソッドの統一 |
| リスト7-22 | [1.7] offだけで指定できる'**'セレクタ |
| リスト7-24 | triggerとtriggerHandlerの違い |
| リスト7-26 | 名前空間とカスタムイベントへの対応 |
| リスト7-27 | マウスカーソルの位置を表すプロパティ |
| リスト7-28 | イベントの発火と関連する要素 |
| リスト7-29 | イベント処理の中止 |
| リスト7-30 | イベントオブジェクトによるデータの受け渡し |
| リスト7-31 | [1.7] delegateTargetプロパティが指す要素 |
| リスト7-36 | 複数の処理を登録する |
| リスト7-37 | 処理中のthisの値を設定する |
| リスト7-38 | [1.7] 状態を遷移させないメソッド |
| リスト7-39 | オブジェクトの状態を確認する |
| リスト7-40 | [1.7] 状態を確認するstateメソッド |
| リスト7-41 | thenはdoneとfailを同時に実行 |
| リスト7-43 | pipeで中間の処理を実行 |
| リスト7-45 | [1.7] pipe/thenの第3引数 |
| リスト7-48 | カウンタウィジェット |
| リスト7-49 | バーがすべて表示されたら完了を通知 |
| リスト7-51 | 複数のアニメーションの終了を待って次の処理を実行 |
| リスト7-54 | [1.7] $.whenにおけるprogress, pipe, doneの実行順 |
| リスト7-57 | 複数のアニメーションの終了を待って次の処理を実行 |
| リスト7-58 | [1.7] 関数の登録と実行(1) |
| リスト7-59 | [1.7] 関数の登録と実行(2) |
| リスト7-61 | [1.7] 関数の登録と削除 |
| リスト7-62 | [1.7] Callbacksオブジェクトのフラグ |
| リスト7-63 | [1.7] Callbacksオブジェクトの設定とその確認 |
第8章
| リスト8-6 | ${～}による関数の実行 |
| リスト8-8 | $dataで配列の要素を参照 |
| リスト8-13 | {{each}}による要素の生成 |
| リスト8-14 | {{tmpl}}によるテンプレートの合成 |
| リスト8-18 | tmplItemオブジェクトが保存される要素とデータの参照 |
| リスト8-19 | tmplItemオブジェクトによるデータの更新 |
| リスト8-20 | tmplItemオブジェクトによるHTML要素の更新 |
| リスト8-23 | $itemの拡張(オプション設定) |
| リスト8-24 | {{tmpl}}でオプションを引き継ぐ |
| リスト8-25 | {{wrap}}と$item.htmlによるタブウィジェット |
第9章
| リスト9-1 | JSONPのテスト |
| リスト9-4 | loadメソッドによるコンテンツへのアクセス |
| リスト9-6 | $.getメソッドによるコンテンツへのアクセス(Promise) |
| リスト9-8 | $.getメソッドによるコンテンツへのアクセス(コールバック関数) |
| リスト9-9 | $.getJSONと$.getScript |
| リスト9-10 | $.getと$.postの違い(1) - サーバ側の対応 |
| リスト9-11 | $.getと$.postの違い(2) - XML形式のデータを送信 |
| リスト9-13 | serializeArray, serializeメソッドによるパラメータの生成 |
| リスト9-14 | $.ajaxによるGETとPOST |
| リスト9-18 | CSVファイルを元に<table>を生成 |
| リスト9-19 | Webサーバから受信したCSVデータを元に<table>を生成 |
| リスト9-20 | dataTypeとconvertersとの関係 |
| リスト9-22 | JSONPによるRSSの読み込み |
| リスト9-23 | $.ajaxSetupによるオプションの設定 |
| リスト9-25 | カスタムイベント処理の引数 |
| リスト9-26 | ヘッダの設定と取得 |
| リスト9-27 | jqXHRへの処理の登録とイベント処理との関係 |
| リスト9-28 | XDomainRequestオブジェクトによるクロスドメイン通信(IE限定) |
| リスト9-30 | $.ajaxPrefilterとdataType, convertersとの関係 |
第10章
| リスト10-2 | 合否の判定(1) - 真偽(Boolean)、等値(==)、同値(===) |
| リスト10-3 | 合否の判定(2) - オブジェクトと配列 |
| リスト10-4 | 合否の判定(3) - 日付(Date)、正規表現(RegExp)、DOMオブジェクト |
| リスト10-5 | 合否の判定(4) - エラー |
| リスト10-6 | モジュールの設定(Ajax同期通信テスト) |
| リスト10-7 | モジュールの設定(Ajax非同期通信テスト) |
| リスト10-8 | イベントハンドラの引数と実行順 |
| リスト10-9 | noglobalsとnotrycatch |
| test_twittersearch.html | [Test] つぶやき検索のテスト(Powered by Twitter Search API) |
| twittersearch.html | [Demo] つぶやき検索(Powered by Twitter Search API) |