Code Recipe 逆引きサンプルコード jQuery
jQueryやHTML、jQuery UIを中心に、実務で使える設計・実装の要点を短く解説します。
-
jQuery Validation でユーザーからの入力値を検証する
jQuery にはプラグインと呼ばれる追加ライブラリが用意されており、jQuery の基本機能を自在に拡張できます。本稿では、jQuery Validation を例に、プラグインの基本的な用法を解説します。
-
jQuery UI を使ってオートコンプリート機能を実装する
jQuery UI とは jQuery 拡張の一種で、アコーディオン パネルやタブ、プログレス バーのような UI 関係の機能を提供しています。本稿では、この jQuery UI を利用して、以下のようなオートコンプリート機能付きのテキスト ボックスを実装してみます。
-
Internet Explorer によるコンテンツ キャッシュを無効にする
Internet Explorer では同一の要求をキャッシュで処理しようとするため、複数回ページの更新を行おうとした場合に最新の情報を表示できません。本稿では、このような問題を回避するための 2 つの方法を紹介します。
-
サーバーと非同期通信を行い、その結果を現在のページに反映させる例を、いくつかのパターンで紹介します。
-
特定の要素に対してアニメーション効果を適用したり、独自のアニメーションを自作したりするサンプル コードの例です。
-
$.proxy メソッドを使用して this キーワードのコンテキストを切り替える
$.proxy メソッドを使用して this キーワードのコンテキストを切り替えるサンプル コードの例です。
-
サーバーから取得した XML データによってページを更新する
サーバーと非同期通信を行い、取得した XML データを現在のページにリスト表示するサンプル コードの例です。
-
サーバーから取得した JSON データによってページを更新する
サーバーと非同期通信を行い、取得した JSON データと郵便番号検索 Web サービスによって、郵便番号から住所を求めるサンプル コードの例です。
-
jQuery と他のライブラリとの共存を可能?にするため、jQuery.noConflict メソッドを利用して名前の競合を避けるサンプル コードの例です。
-
特定の要素セットに対してイベント リスナーを紐付けるには、event(fnc) メソッドを利用します。event の部分には、以下の表にあるイベント名などを指定できます。
-
$.extend、$.fn.extend メソッドを使用して jQuery オブジェクトの機能を拡張する
$.extend、$.fn.extend メソッドを使用して jQuery オブジェクトに対してメソッドを追加するサンプル コードの例です。
-
prev、prevAll、next、nextAll、parent などのメソッドを使用して現在の要素から相対的な位置関係の要素を取得する
prev、prevAll、next、nextAll、parent などのメソッドを利用することで、現在の要素を基点にして、その前、次など相対的な関係にある要素を取り出すことができます。
-
wrap、warpAll、wrapInner メソッドを使用して現在の要素を他の要素でラッピングする
wrap、warpAll、wrapInner メソッドを使用して現在の要素を他の要素でラッピングしたり、unwrap メソッドでラッピングを解除したりするサンプル コードの例です。
-
filter、not、eq、slice などのメソッドを使用して要素セットを条件式やインデックス位置でフィルターする
filter、not、eq、slice などのメソッドを使用して要素セットを条件式やインデックス位置でフィルターするサンプル コードの例です。
-
before、after メソッドなどを使用して特定の要素にコンテンツの追加/更新/削除を行う
jQuery では、要素の追加/置換/削除を行うためのさまざまなメソッドが用意されています。具体例とともに説明します。
-
text メソッドと html メソッドを使って要素配下のテキストを取得/設定する
要素配下のテキストを取得/設定するためのメソッドとして、jQuery には text、html という 2 つのメソッドが用意されています。これらのメソッドは一見似ていますが、いくつかの違いがあります。
-
attr、removeAttr メソッドを使用して、要素に対する属性値の取得や設定/解除を行う
要素に対して属性を取得/設定するには、attr メソッドを利用します。複数の属性をまとめて設定する場合、「属性名: 値」のハッシュ形式で指定することもできます。
-
addClass メソッドを使用して特定の要素にスタイルの適用や解除を動的に行う
要素に対してスタイルを適用するには addClass メソッドを、解除するには removeClass メソッドを、そして、スタイルが適用されているかを確認するには hasClass メソッドを、それぞれ利用します。
-
セレクター式を使用してドキュメントから操作対象となる要素を取り出す
jQuery の最大の特長は、$() 関数とセレクター式を利用することで操作対象となる要素を直感的に取り出せる点にあります。
-
Visual Studio で jQuery のコード スニペットを使ってコーディングを簡単に行う
jQuery コード スニペットの導入と利用方法について解説します。コード スニペット機能を利用することで、jQuery を利用したコード入力の負担を劇的に軽減できます。