• この連載の RSS

処理対象別インデックス

【Ajax】 イベント ／ 簡略表記メソッド ／ 基本

【Core】 ライブラリバージョン

【CSS】 スタイルプロパティの取得／設定

【アニメーション】 スライド ／ フェード ／ 基本

【イベント】 イベントオブジェクト ／ イベントリスナー ／ フォーカス ／ 基本

【エフェクト】 一時停止

【コア】 jQuery3への移行 ／ jQueryMigrationプラグイン ／ jQueryオブジェクト ／ ライブラリインポート ／ ライブラリの共存 ／ ライブラリフォールバック ／ 基本 ／ 控えめなJavaScript ／ 最新版へのマイグレーション

【セレクター】 jQuery拡張 ／ 階層 ／ 基本フィルター ／ 子要素フィルター ／ 属性

【トラバーシング】 オブジェクトの操作 ／ ツリー上の範囲選択 ／ ツリー上の要素選択 ／ フィルタリング ／ 検索 ／ 子要素ありで選択 ／ 指定インデックスで選択 ／ 指定範囲で選択 ／ 配列の操作 ／ 否定条件で選択 ／ 要素が含まれるか判定 ／ 要素セットの順次処理

【プラグイン】 jQueryMigrate ／ 基本

【ユーティリティ】 JavaScriptのevery／someメソッドの代替 ／ JavaScriptのfilterメソッドの代替 ／ JavaScriptのindexOfメソッドの代替 ／ JavaScriptのmapメソッドの代替 ／ jQuery名前衝突の回避 ／ thisキーワード ／ 変数のデータ型の判定

【属性】 HTMLの取得／設定 ／ スクロール位置 ／ スタイルクラスの適用／除外 ／ フォーム要素 ／ 要素の高さ／幅の取得／設定 ／ 要素の表示位置 ／ 要素プロパティの取得／設定 ／ 要素属性の取得／設定

【要素】 HTMLの取得／設定 ／ スタイルクラスの適用／除外 ／ スタイルプロパティの取得／設定 ／ テキストの取得／設定 ／ 親要素の削除 ／ 要素のコピー ／ 要素のラップ ／ 要素の移動 ／ 要素の高さ／幅の取得／設定 ／ 要素の削除 ／ 要素の挿入 ／ 要素の置き換え ／ 要素プロパティの取得／設定 ／ 要素属性の取得／設定

Ajax

イベント

•  - 非同期通信の開始／終了／成功／失敗のタイミングで処理を実行するには？（ajaxXxxxx）

簡略表記メソッド

•  - 非同期通信で取得したコンテンツをページに反映させるには？（load）
•  - HTTP GET／POSTで非同期通信を実施するには？（$.get／$.post）
•  - JSON形式のWeb APIにアクセスするには？（$.getJSON）

基本

•  - HTTP GET／POSTで非同期通信を実施するには？（$.get／$.post）
•  - JSON形式のWeb APIにアクセスするには？（$.getJSON）
•  - 非同期通信の開始／終了／成功／失敗のタイミングで処理を実行するには？（ajaxXxxxx）
•  - 一般的なAjax通信を実装するには？（$.ajax）
•  - 非同期通信のキャッシュを無効化するには？（$.ajax［cache］）
•  - Ajax通信の前に処理を実行するには？（$.ajax［beforeSend］）
•  - Ajax通信で得られたコンテンツを加工するには？（$.ajax［dataFilter］）
•  - Ajax通信で成功／失敗コールバックに任意の値を渡すには？（$.ajax［context］）
•  - 特定のAjax通信でのみグローバルイベントを無効化するには？（$.ajax［global］）

　

Core

ライブラリバージョン

•  - 現在利用しているjQueryのバージョンを確認するには？

　

CSS

スタイルプロパティの取得／設定

•  - 要素のスタイルプロパティを変更するには？（css）

　

アニメーション

スライド

•  - あらかじめ用意されたアニメーションを実行するには？（show／hide／fadeIn／fadeOut／slideUp／slideDown）
•  - 実行都度、逆のアニメーションを実行するには？（toggle／fadeToggle／slideToggle）
•  - アニメーションの細かな挙動を制御するには？（animate／show／hide／fadeIn／fadeOut／slideUp／slideDown）

フェード

•  - あらかじめ用意されたアニメーションを実行するには？（show／hide／fadeIn／fadeOut／slideUp／slideDown）
•  - 実行都度、逆のアニメーションを実行するには？（toggle／fadeToggle／slideToggle）
•  - アニメーションの細かな挙動を制御するには？（animate／show／hide／fadeIn／fadeOut／slideUp／slideDown）

基本

•  - あらかじめ用意されたアニメーションを実行するには？（show／hide／fadeIn／fadeOut／slideUp／slideDown）
•  - 実行都度、逆のアニメーションを実行するには？（toggle／fadeToggle／slideToggle）
•  - 自作のアニメーションを実行するには？（animate）
•  - アニメーションの細かな挙動を制御するには？（animate／show／hide／fadeIn／fadeOut／slideUp／slideDown）

　

イベント

イベントオブジェクト

•  - イベントが発生した時のマウス情報を取得するには？（イベントオブジェクト）
•  - イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation）

イベントリスナー

•  - イベントに応じて処理を実行するには？（イベントメソッド）
•  - イベントメソッドで提供されないイベントを処理するには？（on）
•  - 文書ツリー上に存在しない要素に対してイベントリスナーを追加するには？（on）
•  - イベントリスナーを呼び出す際にパラメーターを引き渡すには？（data）
•  - マウスポインターが要素に出入りした時の処理を実装するには？（mouseover、mouseout、mouseenter、mouseleave、hover）
•  - 一度だけ実行されるイベントリスナーを設置するには？（one）

フォーカス

•  - 要素にフォーカスが当たった／外れた時の処理を実装するには？（focus、blur、focusin、focusout）

基本

•  - 要素にフォーカスが当たった／外れた時の処理を実装するには？（focus、blur、focusin、focusout）

　

エフェクト

一時停止

•  - アニメーションを一時停止するには？（delay）

　

コア

jQuery3への移行

•  - jQuery1.x／2.xで作成したアプリをjQuery 3に対応させるには？

jQueryMigrationプラグイン

•  - jQuery1.x／2.xで作成したアプリをjQuery 3に対応させるには？

jQueryオブジェクト

•  - id値／タグ名／クラス名で特定の要素を取り出すには？ ― 基本セレクター
•  - 属性値で目的の要素を絞り込むには？ ― 属性フィルター
•  - 親子／兄弟関係にある要素を取り出すには？ ― 階層セレクター
•  - 登場順序によって取得すべき要素を絞り込むには？ ― 基本フィルター
•  - 子要素／テキストによって取得すべき要素を絞り込むには？ ― コンテンツフィルター
•  - 子要素の位置関係によって取得すべき要素を絞り込むには？ ― 子要素フィルター
•  - 子要素の型／順番によって取得すべき要素を絞り込むには？ ― 子要素フィルター
•  - 指定された言語に対応する要素を取得するには？ ― :langフィルター
•  - URLフラグメントに一致するid値を持つ要素を取得するには？ ― :targetフィルター

ライブラリインポート

•  - jQueryを利用するには？

ライブラリの共存

•  - 異なるバージョンのjQueryを共存させるには？（jQuery.noConflict）

ライブラリフォールバック

•  - jQueryを利用するには？

基本

•  - JavaScriptとHTMLを明確に分離するには？（data）
•  - 特定の要素に関連付くデータを取得／設定するには？（data）

控えめなJavaScript

•  - JavaScriptとHTMLを明確に分離するには？（data）

最新版へのマイグレーション

•  - 以前のバージョンで開発したアプリを最新のjQueryで動作させるには？

　

セレクター

jQuery拡張

•  - id値／タグ名／クラス名で特定の要素を取り出すには？ ― 基本セレクター

階層

•  - 親子／兄弟関係にある要素を取り出すには？ ― 階層セレクター

基本フィルター

•  - 登場順序によって取得すべき要素を絞り込むには？ ― 基本フィルター
•  - 子要素／テキストによって取得すべき要素を絞り込むには？ ― コンテンツフィルター
•  - 指定された言語に対応する要素を取得するには？ ― :langフィルター
•  - URLフラグメントに一致するid値を持つ要素を取得するには？ ― :targetフィルター

子要素フィルター

•  - 子要素の位置関係によって取得すべき要素を絞り込むには？ ― 子要素フィルター
•  - 子要素の型／順番によって取得すべき要素を絞り込むには？ ― 子要素フィルター

属性

•  - 属性値で目的の要素を絞り込むには？ ― 属性フィルター

　

トラバーシング

オブジェクトの操作

•  - 配列の内容を順番に処理するには？（$.each）

ツリー上の範囲選択

•  - 現在の要素から指定された祖先／兄弟要素までを取得するには？（prevUntil／nextUntil／parentsUntil）

ツリー上の要素選択

•  - 親子／兄弟関係にある要素を行き来するには？（parents／parent／prev／prevAll／next／nextAll／siblings／children）

フィルタリング

•  - 要素セットを指定の条件で絞り込むには？（filter）

検索

•  - 特定の要素を基点に別の要素を検索するには？（find）

子要素ありで選択

•  - 要素セットから特定の子要素を持つ要素だけを取得するには？（has）

指定インデックスで選択

•  - 要素セットからn番目の要素を取得するには？（eq）

指定範囲で選択

•  - 現在の要素セットからm～n番目の要素を取得するには？（slice）

配列の操作

•  - 配列の内容を順番に処理するには？（$.each）

否定条件で選択

•  - 要素セットから指定の条件に合致したものを取り除くには？（not）

要素が含まれるか判定

•  - 要素セットに、指定された条件に合致する要素が含まれるかを判定するには？（is）

要素セットの順次処理

•  - 要素セットの内容を順に処理するには？（map）

　

プラグイン

jQueryMigrate

•  - 以前のバージョンで開発したアプリを最新のjQueryで動作させるには？

基本

•  - jQueryプラグインを自作するには？（$.fn）
•  - 自作のjQueryプラグインに引数を設定するには？（$.extend）

　

ユーティリティ

JavaScriptのevery／someメソッドの代替

•  - 配列の内容を順番に処理するには？（$.each）

JavaScriptのfilterメソッドの代替

•  - 配列から特定の条件で要素を取り出すには？（$.grep）

JavaScriptのindexOfメソッドの代替

•  - 配列の内容を検索するには？（$.inArray）

JavaScriptのmapメソッドの代替

•  - 配列の内容を順番に加工するには？（$.map）

jQuery名前衝突の回避

•  - jQueryを他のライブラリと共存させるには？（jQuery.noConflict）

thisキーワード

•  - thisキーワードの参照先を固定するには？（$.proxy）

変数のデータ型の判定

•  - 変数の型情報を判定するには？（$.isXxxxx／$.type）

　

属性

HTMLの取得／設定

•  - 要素配下のテキストを取得／設定するには？（text／html）

スクロール位置

•  - ページのスクロール位置を設定／取得するには？（scrollTop／scrollLeft）

スタイルクラスの適用／除外

•  - 要素にスタイルクラスを適用／除外するには？（addClass／removeClass／toggleClass／hasClass）

フォーム要素

•  - フォーム要素からの入力値を取得するには？（val）
•  - ラジオボタン／チェックボックス／選択ボックスの選択テキストを取得するには？（val）
•  - フォーム要素に対して値を設定するには？（val）

要素の高さ／幅の取得／設定

•  - 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）

要素の表示位置

•  - 要素の表示位置を取得／設定するには？（offset）
•  - 親要素に対する相対的な表示位置を取得するには？（position）

要素プロパティの取得／設定

•  - 要素のプロパティを取得／設定するには？（prop）

要素属性の取得／設定

•  - 要素の属性を操作するには？（attr／removeAttr）

　

要素

HTMLの取得／設定

•  - 要素配下のテキストを取得／設定するには？（text／html）

スタイルクラスの適用／除外

•  - 要素にスタイルクラスを適用／除外するには？（addClass／removeClass／toggleClass／hasClass）

スタイルプロパティの取得／設定

•  - 要素のスタイルプロパティを変更するには？（css）

テキストの取得／設定

•  - 要素配下のテキストを取得／設定するには？（text／html）

親要素の削除

•  - 親要素を削除するには？（unwrap）

要素のコピー

•  - 既存の要素をコピーするには？ ― cloneメソッド

要素のラップ

•  - 現在の要素セットを特定の要素でラップするには？ ― wrap／wrapAll／wrapInnerメソッド

要素の移動

•  - 既存の要素を別の場所に移動するには？ ― insertBefore／insertAfter／prependTo／appendToメソッド

要素の高さ／幅の取得／設定

•  - 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）

要素の削除

•  - 既存の要素を削除するには？ ― remove／emptyメソッド
•  - イベントリスナーをそのままに、要素を削除するには？（detach）

要素の挿入

•  - ページに新たな要素を挿入するには？ ― insertBefore／insertAfter／prependTo／appendTo／before／after／prepend／appendメソッド

要素の置き換え

•  - 既存の要素を別の要素で置き換えるには？ ― replaceWith／replaceAllメソッド

要素プロパティの取得／設定

•  - 要素のプロパティを取得／設定するには？（prop）

要素属性の取得／設定

•  - 要素の属性を操作するには？（attr／removeAttr）