「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章

図1-1HTML文書内の要素の階層構造の例
リスト1-8擬似クラス(セレクタ)による要素の指定例(2)

第2章

リスト2-9attrメソッドによる属性の設定と削除
リスト2-15propメソッドによるプロパティの設定と削除

第3章

リスト3-3HTML形式の文字列から要素を生成する関数とその実行例
リスト3-24子要素を数える
リスト3-26ユーザーから入力されたデータをそのまま表示(01)

第4章

リスト4-1要素の表示
リスト4-3メソッドの実行順
リスト4-6animateの設定とアニメーションの動作
リスト4-9'transform'プロパティの設定と値の取得
リスト4-10animateメソッドとキュー
リスト4-16queueとdequeueによるアニメーションの実行(6)
リスト4-20[1.7] 名前付きキューに登録されたアニメーションの停止

第5章

リスト5-3Accordionウィジェットの基本的な要素の構成
リスト5-6Buttonウィジェットの基本的な要素の構成
リスト5-7Datepickerウィジェットの基本的な要素の構成
リスト5-12Tabsウィジェットの基本的な要素の構成
リスト5-13AccordionとButtonに表示するアイコンの変更
リスト5-14Accordion、Datepicker、Dialog、Sliderのアニメーション
リスト5-22ドラッグする要素の指定
リスト5-28ドラッグできる要素や範囲を限定
リスト5-33縦横比を保ったままサイズ変更
リスト5-37要素をドラッグで選択
リスト5-40別の要素への受け渡し
リスト5-42class属性によるアニメーション
リスト5-43positionメソッドによる要素の配置

第6章

リスト6-1jQueryオブジェクトを$とは別の変数で代替
リスト6-2異なるバージョンのjQueryを共存
リスト6-6配列と同じ操作を行うメソッド
リスト6-12配列の要素からHTMLを生成
リスト6-13$.eachにオブジェクトのプロパティを設定
リスト6-19thisの設定とfalseの処理も行うeach関数
リスト6-23オリジナルのeach, mapをObject,Arrayのメソッドに拡張
リスト6-31プラグインのメソッドを定義

第7章

リスト7-1ボタンがクリックされたらメッセージを表示
リスト7-4クリックとボタンのイベント処理
リスト7-5マウスカーソルと要素の重なり
リスト7-6hoverとtoggleによるイベントハンドラの登録
リスト7-7メソッドによるイベントの発火
リスト7-8フォーカスが当たる要素とイベント処理
リスト7-9change/select/submitのイベント処理
リスト7-10イベントの発火順とキーコード
リスト7-11特殊キーの押下を判定
リスト7-12スクロールと要素の位置
リスト7-13スクロール可能な要素
リスト7-14readyと$.holdReady
リスト7-16bindによるイベント処理の登録
リスト7-17登録・削除に用いる名前空間
リスト7-18live/dieとdelegate/undelegate
リスト7-21[1.7] on/ofによるメソッドの統一
リスト7-22[1.7] offだけで指定できる'**'セレクタ
リスト7-24triggerと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-41thenはdoneとfailを同時に実行
リスト7-43pipeで中間の処理を実行
リスト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-18tmplItemオブジェクトが保存される要素とデータの参照
リスト8-19tmplItemオブジェクトによるデータの更新
リスト8-20tmplItemオブジェクトによるHTML要素の更新
リスト8-23$itemの拡張(オプション設定)
リスト8-24{{tmpl}}でオプションを引き継ぐ
リスト8-25{{wrap}}と$item.htmlによるタブウィジェット

第9章

リスト9-1JSONPのテスト
リスト9-4loadメソッドによるコンテンツへのアクセス
リスト9-6$.getメソッドによるコンテンツへのアクセス(Promise)
リスト9-8$.getメソッドによるコンテンツへのアクセス(コールバック関数)
リスト9-9$.getJSONと$.getScript
リスト9-10$.getと$.postの違い(1) - サーバ側の対応
リスト9-11$.getと$.postの違い(2) - XML形式のデータを送信
リスト9-13serializeArray, serializeメソッドによるパラメータの生成
リスト9-14$.ajaxによるGETとPOST
リスト9-18CSVファイルを元に<table>を生成
リスト9-19Webサーバから受信したCSVデータを元に<table>を生成
リスト9-20dataTypeとconvertersとの関係
リスト9-22JSONPによるRSSの読み込み
リスト9-23$.ajaxSetupによるオプションの設定
リスト9-25カスタムイベント処理の引数
リスト9-26ヘッダの設定と取得
リスト9-27jqXHRへの処理の登録とイベント処理との関係
リスト9-28XDomainRequestオブジェクトによるクロスドメイン通信(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-9noglobalsとnotrycatch
test_twittersearch.html[Test] つぶやき検索のテスト(Powered by Twitter Search API)
twittersearch.html[Demo] つぶやき検索(Powered by Twitter Search API)