デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

Ajax:xml等との連携

jQueryではphpなどのサーバーサイドで実行されるプログラムと連携することができます。しかし私にはサーバーサイドの知識がないため、この項目のメソッドでサーバーサイドに関連した説明やサンプルは省いています。いつの日かサーバーサイドの技術を習得したらページを更新したいと思います。

jqXHRオブジェクトについて
Ajaxに関連するメソッドのほとんどが、返値としてjqXHRオブジェクトを返します。
これはv1.5でdeferredオブジェクトが追加されたことに伴い導入されたオブジェクトでpromiseオブジェクトを内包しています。その結果、deferredオブジェクトのメソッドを利用することができます(但し状態を変化させるメソッドは利用できません)。
さらにjqXHRオブジェクトはXMLHttpRequestの機能も持っておりリンク先に記されたプロパティやメソッドを利用することができます。

簡易メソッド

シンプルな記述で簡単に外部データの読込が行えるメソッドです。詳細を設定したい場合は低レベル・インターフェスのメソッドを利用して下さい。loadメソッド以外はjqXHRオブジェクトを返すのでdeferredオブジェクトのメソッドが利用できます。

.load( )

サーバーからhtmlコンテンツを取得してセレクタで指定した要素に表示します。簡易メソッドの中では唯一jqXHRオブジェクトを返しません(jQueryオブジェクトを返します)。
→詳細

jQuery.get( )

サーバーからデータを取得します。
→詳細

jQuery.getJSON( )

サーバーからjsonデータを取得します。
→詳細

jQuery.getScript( )

サーバーからjavaScriptデータを取得して実行します。
→詳細

jQuery.post( )

サーバーからpost形式でデータを取得します。
→詳細

グローバルイベントハンドラ

指定するセレクタにかかわらずページ内で発生する全てのajax通信に対応します(そのためグローバルと付くのでしょう)。これらのイベントハンドラはjQuery.ajaxSetupメソッドのglobalプロパティがtrueの時にしか利用できません(デフォルトはtrueです)。
すべてのメソッドで返値はjQueryオブジェクトです。jqXHRオブジェクトは返さないためpromiseオブジェクトのメソッドは利用できません。

.ajaxComplete( )

ajax通信が成功/失敗にかかわらず完了した時の処理を設定します。
→詳細

.ajaxSuccess( )

ajax通信が成功した時の処理を設定します。
→詳細

.ajaxError( )

ajax通信が失敗した時の処理を設定します。
→詳細

.ajaxSend( )

ajax通信のリクエストを送る前に実行する処理を設定します。
→詳細

.ajaxStart( )

まだajax通信が行われていない時に、初めてajax通信を開始する時の処理を設定します。
→詳細

.ajaxStop( )

すべてのajax通信が終わった時に実行する処理を設定します。
→詳細

低レベル・インターフェイス

サーバーとの通信の根幹を担っているメソッドです。

jQuery.ajax( )

サーバーからデータを取得します。非常に詳細な設定が可能で、簡易メソッドはすべて、このメソッドが基になっています。
→詳細

jQuery.ajaxSetup( )

通信に関連する設定のデフォルト値を変更します。そのため、設定は以降の通信全てに反映されます。
→詳細

jQuery.ajaxPrefilter( )

通信前に設定を変更します。特定の条件によって設定を切り替えることも可能です。
→詳細

お助け機能

サーバーとの情報のやり取りを助けるメソッドです。特定の情報をサーバーに送りやすいように変換します。

jQuery.param( )

配列やオブジェクトをURLクエリ文字列やAjaxリクエストで使用するのに適した文字列に変換します。
→詳細

.serialize( )

指定したフォーム要素の情報をURLエンコードします。
→詳細

.serializeArray( )

指定したフォーム要素の情報を配列に変換します。
→詳細