jQuery逆引きリファレンス
jQueryの基本機能や実用Tipsを目的別リファレンスの形式でまとめる(バージョン1.7以降に対応)
-
現在の要素の親に当たる要素を削除するunwrapメソッドの基本的な使い方を説明します。これ以外の要素削除系メソッドとの違いも簡単にまとめます。
-
要素セットに、指定された条件に合致する要素が含まれるかを判定するには?(is)
isメソッドを使って、指定した条件に合致する要素が、現在の要素セットに1つ以上含まれているかどうかを判定する方法を説明します。また、jQuery 1.7前後で発生した挙動の変化についても言及します。
-
【改訂記事】現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明します。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介します。
-
要素セットから特定の子要素を持つ要素だけを取得するには?(has)
jQueryオブジェクトで保持している要素セットから、特定の子要素を持つ要素のみを取得できるhasメソッドの基本的な使い方を説明します。
-
jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明します。
-
現在の要素セットからm~n番目の要素を取得するには?(slice)
jQueryオブジェクトで保持している要素セットから、指定したm~n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明します。
-
要素セットから指定の条件に合致したものを取り除くには?(not)
jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明します。
-
jQueryオブジェクトで保持している要素セットを、1つずつ順番に処理し、その処理結果をjQueryオブジェクトとして取得できるmapメソッドの基本的な使い方を説明します。
-
prevUntil/nextUntil/parentsUntilメソッドを使って、現在の要素から、兄/弟/親の関係にある要素までの全要素を取得する方法を説明します。
-
jQueryオブジェクトで保持している現在の要素セットから、カレント要素を基点としてツリー構造における親子、もしくは兄弟関係にある要素を取得する方法を説明します。
-
findメソッドを使って、jQueryオブジェクトで保持している現在の要素セットの配下から、指定された条件の要素を検索する方法を説明します。
-
filterメソッドを使って、jQueryオブジェクトで保持している現在の要素セットを、指定された条件で絞り込む方法を説明します。
-
異なるバージョンのjQueryを共存させるには?(jQuery.noConflict)
jQueryが持つオブジェクト名との衝突を回避するためのjQuery.noConflictメソッドを応用して、jQueryで複数のバージョンをロードする方法を説明します。
-
jQueryを他のライブラリと共存させるには?(jQuery.noConflict)
他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介します。また、別名を定義する方法を2パターン、説明します。
-
特定のAjax通信でのみグローバルイベントを無効化するには?($.ajax[global])
Ajax通信の開始/終了/成功/失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明します。
-
イベントリスナーをそのままに、要素を削除するには?(detach)
イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明します。削除/再生成ではなく、非表示/表示の利用推奨についても解説します。
-
実行中のアニメーションを途中で一時停止するdelayメソッドの基本的な使い方を説明します。delayメソッド特有の問題点も取り上げます。
-
Ajax通信で成功/失敗コールバックに任意の値を渡すには?($.ajax[context])
主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明します。
-
Ajax通信で得られたコンテンツを加工するには?($.ajax[dataFilter])
$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工/編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明します。
-
Ajax通信の前に処理を実行するには?($.ajax[beforeSend])
Ajax通信を送信する前に任意の処理を実行できるようになる「$.ajaxメソッドのbeforeSendパラメーター」の基本的な使い方を説明します。
-
非同期通信のキャッシュを無効化するには?($.ajax[cache])
Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明します。
-
非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介します。また、簡単なサンプルで使い方を説明します。
-
thisキーワードの参照先を固定するには?($.proxy)
文脈により変化するthisキーワードの参照先を、$.proxyメソッドにより固定する方法を説明します。
-
既存の要素をjQueryオブジェクトとして複製する方法を説明します。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加できます。
-
既存の要素を削除するには? ― remove/emptyメソッド
指定された要素を削除するremoveメソッドと、指定された要素の中身を削除するemptyメソッドについて解説します。
-
現在の要素セットを特定の要素でラップするには? ― wrap/wrapAll/wrapInnerメソッド
現在の要素セットを新要素でラップする(=新要素の子要素にする)方法を解説します。メソッドを使い分けることで、要素セットに対して個々に要素全体を/全ての要素をまとめて/個々に中身(=子要素)のみをラップできます。
-
既存の要素を別の要素で置き換えるには? ― replaceWith/replaceAllメソッド
既存の要素を選択し、それをHTML文字列により生成した新規要素もしくはjQueryオブジェクトで置き換える方法を解説します。
-
Build Insider(既存の要素を別の場所に移動するには? ― insertBefore/insertAfter/prependTo/appendToメソッド)
既存の要素を、指定した要素の直前/直後/子要素先頭/子要素末尾の位置に移動する方法を説明します。
-
ページに新たな要素を挿入するには? ― insertBefore/insertAfter/prependTo/appendTo/before/after/prepend/appendメソッド
HTML文字列で要素を作成してから、指定した場所にそれを挿入する方法を解説します。
-
jQuery1.x/2.xで作成したアプリをjQuery 3に対応させるには?
2016年6月、jQuery 3.0が正式リリースされました。従来バージョンのjQueryを使った既存のページを、最新バージョン3に移行する方法を「jQuery Migration」を使って解説します。
-
valメソッドを使ってフォーム要素の値を設定する方法を説明します。また、利用上の注意点や、値をクリアする方法、応用例として全てのチェックボックスを選択/解除する方法も紹介します。
-
ラジオボタン/チェックボックス/選択ボックスの選択テキストを取得するには?(val)
valメソッドを使って選択テキストを取得する方法を、ラジオボタン/チェックボックス/選択ボックス/リストボックスなどフォーム要素ごとに説明します。
-
valメソッドを使って、フォーム要素の値を取得する方法を説明します。また、ラジオボタン/チェックボックス/リストボックス(複数選択)の場合の注意点も紹介します。
-
親要素に対する相対的な表示位置を取得するには?(position)
positionメソッドを使って、要素の「親要素からの相対位置」を取得する基本的な方法を説明します。
-
offsetメソッドを使って、要素の「ドキュメント上の相対位置」を取得/設定する基本的な方法を説明します。
-
ページのスクロール位置を設定/取得するには?(scrollTop/scrollLeft)
scrollTop/scrollLeftメソッドを使ってページスクロールの垂直位置/水平位置を設定もしくは取得するための基本的な方法を説明します。
-
URLフラグメントに一致するid値を持つ要素を取得するには? ― :targetフィルター
:targetフィルターを使って、URLフラグメントに一致するid属性値の要素を取得する方法を説明します。
-
指定された言語に対応する要素を取得するには? ― :langフィルター
:langフィルターを使って、コンテンツの言語を指定するlang属性の値に応じて要素を取得する方法を説明します。
-
子要素の型/順番によって取得すべき要素を絞り込むには? ― 子要素フィルター
今回は、以下のように取得する要素を絞り込む方法を解説します。 同じ要素の中で先頭/末尾の子要素を取得 同列の子要素に同種の要素が1つしかないものを取得 フィルターにより同じ要素の中でn番目の要素を取得
-
子要素の位置関係によって取得すべき要素を絞り込むには? ― 子要素フィルター
:first-child/:last-childフィルターにより先頭/末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child/:nth-last-childフィルターにより先頭/末尾からn個おきに子要素を取得する方法を解説します。
-
子要素/テキストによって取得すべき要素を絞り込むには? ― コンテンツフィルター
:parent/:empty/:contains()/:has()フィルターの基本的な使い方を解説します。子要素やテキストを持つ要素/空の要素/特定のテキストを含む要素/指定されたセレクターに合致する子要素を持つ要素を取得できます。
-
登場順序によって取得すべき要素を絞り込むには? ― 基本フィルター
jQueryの$()関数でフィルター構文を使い、先頭/末尾の要素や、偶数/奇数番目の要素、n番目/n番目より前や後の要素を取り出す方法を説明します。
-
親子/兄弟関係にある要素を取り出すには? ― 階層セレクター
jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素/子孫要素/直後の要素/以降の要素などを絞り込んで取り出す方法を説明します。
-
jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説します。条件指定には、属性名のみや、属性値の完全一致/部分一致/複数一致などが指定できます。
-
id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター
jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説します。
-
非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)
jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明します。
-
JSON形式のWeb APIにアクセスするには?($.jsonp)
クロスドメイン制約を回避するためのJSONPをjQueryで利用しましょう。$.getJSONメソッドの基本的な使い方を解説します。
-
HTTP GET/POSTで非同期通信を実施するには?($.get/$.post)
$.get/$.postメソッドを使って取得したデータを加工して表示コンテンツを組み立てる方法を解説します。
-
自作のjQueryプラグインに引数を設定するには?($.extend)
プラグイン作成の基本を理解したら、パラメーターを受け取れるようにしましょう。その実装方法を解説します。
-
何度も利用する似たコードは、ライブラリではなくプラグインにまとめます。そこで、今回は、プラグイン作成の基本を解説します。
-
特定の要素に関連付くデータを取得/設定するには?(data)
現在の要素に対して任意のデータを設定/取得するためのdataメソッドの基本と、利用上の注意点を解説します。
-
JavaScriptとHTMLを明確に分離するには?(data)
jQueryのdataメソッドを使って独自データ属性の値を取得することにより、「控えめなJavaScript」を実現する方法を説明します。
-
要素にフォーカスが当たった/外れた時の処理を実装するには?(focus、blur、focusin、focusout)
focus/blurもしくはfocusin/focusoutを使って、テキストボックスにフォーカスを当てた時/外した時に処理を実施する方法を説明します。またそれらの挙動の違いを解説します。
-
アニメーションの細かな挙動を制御するには?(animate/show/hide/fadeIn/fadeOut/slideUp/slideDown)
各種アニメーションメソッドで、アニメーションを直列/並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明します。
-
animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明します。
-
実行都度、逆のアニメーションを実行するには?(toggle/fadeToggle/slideToggle)
jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明します。
-
あらかじめ用意されたアニメーションを実行するには?(show/hide/fadeIn/fadeOut/slideUp/slideDown)
jQueryが提供する基本的なアニメーション機能を活用して、要素を表示/非表示、フェードイン/アウト、スライドアップ/ダウンさせる方法を説明します。
-
非同期通信で取得したコンテンツをページに反映させるには?(load)
loadメソッドを使って、外部のWebページを非同期に取得して、それをコンテンツ内の要素に反映させる方法を説明します。
-
イベント処理を中断するには?(preventDefault/stopPropagation/stopImmediatePropagation)
イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明します。また、それぞれの使い分け方法も解説します。
-
イベントが発生した時のマウス情報を取得するには?(イベントオブジェクト)
クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明します。
-
一度だけ実行されるイベントリスナーを設置するには?(one)
登録されたイベントリスナーを最初の一度だけ実行するoneメソッドの基本的な使い方を解説します。
-
違いが分かりにくい「mouseover/mouseout」と「mouseenter/mouseleave」イベントの使い分け方法を解説します。また、これらに関連する「hover」イベントメソッドについても説明します。
-
イベントリスナーを呼び出す際にパラメーターを引き渡すには?(data)
イベントメソッドやonメソッドの呼び出し時に、任意のパラメーターを引き渡す方法を解説します。
-
文書ツリー上に存在しない要素に対してイベントリスナーを追加するには?(on)
onメソッドを利用して、動的に新規追加された要素にイベントリスナーを設置する方法を解説します。またjQuery 1.6以前のbind/live/delegateメソッドをonメソッドに置き換える方法も説明します。
-
イベントメソッドで提供されないイベントを処理するには?(on)
onメソッドを利用して、jQueryが標準で対応していないJavaScriptイベントにアクセスする方法を説明します。
-
イベントの発生に応じて呼び出されるイベントリスナーをjQueryで実装するための基本的な方法を解説します。
-
$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説します。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しましょう。
-
$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説します。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しましょう。
-
$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説します。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しましょう。
-
$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説します。またJavaScriptのevery/someメソッドを、jQueryの$.eachで代替する方法も説明します。
-
変数の型情報を判定するには?($.isXxxxx/$.type)
$.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説します。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説します。
-
要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth
任意の要素に対して幅/高さを設定/取得する方法を解説します。また、height/width、innerHeight/innerWidth、outerHeight/outerWidthメソッドの使い分け方法も説明します。
-
任意の要素に対してJavaScriptのプロパティを設定/取得する方法を解説します。また、要素の属性を設定/取得できるattrメソッドと機能を比較します。
-
要素の属性を操作するには?(attr/removeAttr)
任意の要素の、任意の属性に対して値を設定/取得する方法を解説します。また、複数の属性をまとめて設定する方法も説明します。
-
要素にスタイルクラスを適用/除外するには?(addClass/removeClass/toggleClass/hasClass)
要素にclass属性の値を設定/削除する方法を解説します。また、その設定状態を切り替えたり、確認したりする方法も説明します。
-
背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説します。相対値の指定や複数まとめての指定、現在の値の取得なども説明します。
-
要素配下のテキストを取得/設定するには?(text/html)
textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説します。また、それぞれの使い分けについても説明します。
-
以前のバージョンで開発したアプリを最新のjQueryで動作させるには?
基本的に旧バージョンのjQueryで作成したページは最新版でも動作しますが、jQuery 1.9以前から最新化する場合には動作しない場合があります。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明します。
-
現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明します。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介します。
-
jQueryの特徴を簡単に紹介します。jQueryライブラリをCDNから、もしくはローカルにダウンロードしてから利用する方法を説明します。