jQueryで出来ることを確認したいけど本家ページは英語だし一覧で見ずらい…
日本語でリファレンス一覧を解説してほしい。
日本語でリファレンス一覧を解説してほしい。
そうお困りではありませんか？
筆者自身が「日本語で分かりやすく一覧化されてる情報があったらいいなー」と思ったので、
よく使う「jQueryのリファレンス一覧」をまとめました。
備忘録として参考にしてもらえたらと思います。
以下カテゴリ別に解説、探したいカテゴリにジャンプ推奨です。
・セレクタ
・参照
・イベント
・操作
・CSS
・効果
・その他
・ユーティリティ
・参照
・イベント
・操作
・CSS
・効果
・その他
・ユーティリティ
スポンサーリンク
セレクタ
Basic
基本となるセレクタです。
| リファレンス | 説明 |
| * | 全ての要素 |
| element | 指定された要素 |
| #id | #idをidに持つ要素 |
| .class | .classをクラスに持つ要素 |
| selector1,selector2,selector3 | カンマ区切りで指定した要素 |
Basic Filter
指定した条件でフィルタリングするセレクタです。
| リファレンス | 説明 |
| :first | 最初の要素 |
| :last | 最後の要素 |
| :eq(n) | インデックスがnの要素 |
| :odd | インデックスが奇数の要素 |
| :even | インデックスが偶数の要素 |
| :gt(n) | インデックスがnより大きい要素 |
| :lt(n) | インデックスがnより小さい要素 |
| :header | ｈ1～ｈ6要素 |
| :lang() | 指定の言語の要素 |
| :not() | 指定のセレクタに当てはまらない要素 |
| :animated | 実行中のアニメーションがある要素 |
| :root | ドキュメントルートの要素（デフォルトはhtml要素） |
| :target | URLのターゲットをidに持つ要素 |
Child Filter
子要素に関するセレクタです。
| リファレンス | 説明 |
| :first-child | 要素から見た最初の子要素 |
| :nth-child(n) | 要素から見たｎ番目の子要素 |
| :last-child | 要素から見た最後の子要素 |
| :first-of-type | 要素から見た同種類の要素の内、最初の子要素 |
| :nth-of-type(n) | 要素から見た同種類の要素の内、ｎ番目の子要素 |
| :last-of-type | 要素から見た同種類の要素の内、最後の子要素 |
| :nth-last-child(n) | 要素から見た後ろからｎ番目の子要素 |
| :nth-last-of-type(n) | 要素から見た同種類の要素の内、後ろからｎ番目の子要素 |
| :only-child | 要素から見た唯一である子要素 |
| :only-of-type | 要素から見た同種類の要素の内、唯一である子要素 |
Hierarchy
要素の階層関係（親子関係）に関するセレクタです。
| リファレンス | 説明 |
| parent > child | parentの子要素であるchild |
| ancestor descendant | ancestorの子孫要素であるdescendant |
| prev + next | prevの一つ後ろの兄弟要素であるnext |
| prev ~siblings | prevの後ろの兄弟要素であるsiblings |
Visibility Filter
表示や非表示に関するセレクタです。
| リファレンス | 説明 |
| :hidden | 非表示の要素 |
| :visible | 表示されている要素 |
Attribute
属性に関するセレクタです。
| リファレンス | 説明 |
| 要素[name] | name属性の値を持っている要素 |
| 要素[name = “value”] | name属性の値がvalueである要素 |
| 要素[name ~= “value”] | name属性の値を複数持ち、そのうちの一つがvalueである要素 |
| 要素[name ^= “value”] | name属性の値がvalueで始まる要素 |
| 要素[name |= “value”] | name属性の値がvalueである、もしくはvalue-から始まる要素 |
| 要素[name *= “value”] | name属性の値にvalueを含んでいる要素 |
| 要素[name $= “value”] | name属性の値がvalueで終わる要素 |
| 要素[name != “value”] | name属性の値がvalueではない要素 |
| 要素[name = “value”][name2=”value2″] | 属性に関する複数の条件のうち、すべてに当てはまる要素 |
Content Filter
要素の内容に関するセレクタです。
| リファレンス | 説明 |
| :enpty | 空の要素 |
| :parent | 子要素もしくはテキストを持っている要素 |
| :has(selector) | selectorを子孫要素で持っている要素 |
| :contains(text) | テキスト内容にtextを含んでいる |
Form
フォームに関するセレクタです。
| リファレンス | 説明 |
| :text | type属性がtextであるinput要素（一行入力フィールド） |
| :radio | type属性がradioであるinput要素（ラジオボタン） |
| :checkbox | type属性がcheckboxであるinput要素（チェックボックス） |
| :password | type属性がpasswordであるinput要素（パスワード入力） |
| :file | type属性がfileであるinput要素（ファイル選択） |
| :image | type属性がimageであるinput要素（画像ボタン） |
| :submit | type属性がsubmitであるinput要素（送信ボタン） |
| :reset | type属性がresetであるinput要素（リセットボタン） |
| :input | input要素、textarea要素、select要素、button要素 |
| :checked | チェックされている要素（ラジオボタンまたはチェックボックス） |
| :disabled | 無効になっている要素 |
| :enabled | 有効になっている要素 |
| :focus | フォーカスされている要素 |
| :selected | option要素の内、選択されているもの |
| :button | button要素 |
参照
選択したセレクタを基準に、他の要素を参照します。
TreeTraversal
要素のツリー構造（親子関係）による参照です。
| リファレンス | 説明 |
| children() | 選択した要素の子要素 |
| parent() | 選択した要素の親要素 |
| parents() | 選択した要素の祖先要素 |
| find(selector) | 選択した要素の子孫要素の内、selectorに至るまでの要素 |
| parentsUntil(selector) | 選択した要素の先祖要素の内、selectorに至るまでの要素 |
| closest(selector) | 選択した要素の先祖要素の内、selectorに一致し、かつ一番近い要素 |
| offsetParent() | 選択した要素の先祖要素の内、positionプロパティ(static)以外が設定されており、かつ一番近い要素 |
| siblings() | 選択した要素の兄弟要素 |
| next() | 選択した要素の一つ後ろの兄弟要素 |
| nextAll() | 選択した要素の後ろからすべての兄弟要素 |
| nextUntil(selector) | 選択した要素一つ後ろからselectorに至るまでの兄弟要素 |
| prev() | 選択した要素一つ前の兄弟要素 |
| prevAll() | 選択した要素の前のすべての兄弟要素 |
| prevUntil(selector) | 選択した要素の一つ前からselectorに至るまでの兄弟要素 |
| each() | 選択した要素に対してそれぞれ処理を行う |
Filtering
フィルタリングによる参照です。
| リファレンス | 説明 |
| first() | 選択した要素の内、最初の要素 |
| last() | 選択した要素の内、最後の要素 |
| eq() | 選択した要素の内、指定したインデックスの要素 |
| silce() | 選択した要素の内、インデックスが指定した範囲を満たす要素 |
| filter(selector) | 選択した要素の内、selectorが一致する要素 |
| not(selector) | 選択した要素の内、selectorに一致しない要素 |
| has(selector) | 選択した要素の内、selectorに一致する子孫要素を持つ要素 |
| is(selector) | 選択した要素の内、selectorに一致する要素があるか調べる |
| map(selector) | 選択した要素に対してcalbackを実行して、戻り値を返す |
Miscellaneous Traversing
その他の参照です。
| リファレンス | 説明 |
| add(selector) | 選択した要素内に、selectorを追加する |
| addBack() | 任意の処理を行う前と後、両方の要素 |
| contents() | 選択した要素内の、テキスト内容を含めた子要素 |
| end() | 任意の処理を行う前の要素 |
イベント
要素のクリック等、各種イベントに関する設定を行うことができます。
Document Loading
読み込みに関する設定を行います。
| リファレンス | 説明 |
| ready() | 読み込み完了時に処理を設定する |
Browser Event
ブラウザイベントに関する設定を行います。
| リファレンス | 説明 |
| resize() | ブラウザがリサイズされた時の処理を設定する |
| scroll() | ブラウザがスクロールされた時の処理を設定する |
Muse Events
マウスイベントに関する設定を行います。
| リファレンス | 説明 |
| click() | 要素がクリックされた時に処理を行う |
| dblclick() | 要素がダブルクリックされた時に処理を行う |
| hover() | 要素がマウスオーバーされた時に処理を行う |
| mouseover() | 要素の上にマウスが乗った時に処理を設定する |
| mouseenter() | 要素の上にマウスが乗った時に処理を設定する（子要素を領域内に含む） |
| mouseout() | 要素の上からマウスが出た時の処理を設定する |
| mouseleave() | 要素の上からマウスが出た時の処理を設定する（子要素を領域内に含む） |
| mousedown() | 要素にマウスが押下された時の処理を設定する |
| mousemove() | 要素の上からマウスが動かされた時の処理を設定する |
| mouseup() | 要素の上にマウスが離れた時の処理を行う |
Form Events
フォームイベントに関する設定を行います。
| リファレンス | 説明 |
| change() | フォーム要素の内容が変更された時の処理を設定する |
| focus() | フォーム要素がフォーカスされた時の処理を設定する |
| focusin() | フォーム要素がフォーカスされた時の処理を設定する（子要素も対象） |
| blur() | フォーム要素からフォーカスが外れた時の処理を設定する |
| focusout() | フォーム要素からフォーカスが外れた時の処理を設定する（子要素も対象） |
| select() | フォームよその値が選択された時の処理を設定する |
| submit() | フォームが送信された時の処理を設定する |
Keyboard Events
キー入力に関する設定を行います。
| リファレンス | 説明 |
| keydown() | キーが押下された時の処理を設定する |
| keypress() | キー入力時の処理を設定する |
| keyup() | キーが離れた時の処理を設定する |
Event Handler Attachiment
イベントハンドラに関する設定を行います。
| リファレンス | 説明 |
| bind() | イベントにイベントハンドラを登録する |
| unbind() | 選択した要素からイベントハンドラを削除する |
| on() | イベントハンドラを登録する |
| off() | イベントハンドラを削除する |
| one() | 1度だけ実行するイベントハンドラを登録する |
| delegate(selector) | 選択した要素内のselectorにイベントハンドラを設定する |
| undelegate(selector) | 選択した要素内のselectorからイベントハンドラを削除する |
| trigger() | 選択した要素へ疑似的にイベントハンドラを実行させる |
| triggerHandler() | 選択した要素へ疑似的にイベントハンドラを実行させる(ブラウザの本来の動作は無効にする) |
操作
要素に対して、各種操作を行うことができます。
| リファレンス | 説明 |
| after(content) | 要素の後ろにcontentを挿入する |
| before(content) | 要素の前にcontentを挿入する |
| append(content) | 要素内の一番後ろにcontentを挿入する |
| prepend(content) | 要素内の一番前にcontentを挿入する |
| insertAfter(target) | 要素をtargetの後ろに挿入する |
| insertBefore() | 要素をtargetの前に挿入する |
| appendTo(target) | 要素をtarget内の一番後ろに挿入する |
| prependTo() | 要素をtarget内の一番前に挿入する |
| wrap(wrappingElement) | 要素をwrappingElementで囲む |
| wrapAll(wrappingElement) | 要素をまとめてwrappingElementで囲む |
| wraplnner(wrappingElement) | 要素の中身をwrappingElementで囲む |
| unwrap() | 要素の親要素を削除する |
| remove() | 要素を削除する |
| empty() | 要素の子孫要素を削除する |
| detach() | 要素を削除する（再度挿が入可能） |
| clone() | 要素を複製する |
| html() | 要素内の内容を設定もしくは取得する |
| text() | 要素内のテキスト内容を設定もしくは取得する |
| val() | 要素のvalue属性を設定もしくは取得する |
| attr() | 要素の属性を設定もしくは取得する |
| removeAttr() | 要素から指定した属性を削除する |
| prop() | 要素のプロパティを設定もしくは取得する |
| removeProp() | 要素からプロパティを削除する |
| repkaceAll(target) | targetを要素で書き変える |
| replaceWith(newContent) | 言葉をnewContentで書き変える |
CSS
CSSの設定もしくは取得を行うことができます。
| リファレンス | 説明 |
| addClass() | 要素にクラスを追加 |
| removeClass() | 要素からクラスを削除 |
| toggleClass() | 要素へクラスを付け替えする |
| hasClass(className) | 要素がclassNameクラスを持っているか調べる |
| css() | 要素のCSSを設定もしくは取得する |
| width() | 要素の幅を設定もしくは取得する |
| height() | 要素の高さを設定もしくは取得する |
| innerWidth() | 要素の幅(paddingを含む)を取得する |
| innerHeight() | 要素の高さ(paddingを含む)を取得する |
| outerWidth() | 要素の幅(padding、border、オプションでmarginを含む)を取得する |
| outerHeight() | 要素の高さ(padding、border、オプションでmarginを含む)を取得する |
| offset() | 要素の位置を設定もしくは取得する |
| position() | 要素の親要素から相対位置を取得する |
| scrollLeft() | 要素のスクロール一(横)を設定もしくは取得する |
| scrollTop() | 要素のスクロール一(縦)を設定もしくは取得する |
効果
各種効果を設定することができます。
Basics
表示、非表示に関する基本的な効果です。
| リファレンス | 説明 |
| hide() | 要素を非表示にする |
| show() | 要素を表示する |
| toggle() | 要素の表示、非表示を切り替える |
Fading
フェードイン、フェードアウトに関する効果です。
| リファレンス | 説明 |
| fafein() | 要素をフェードインする |
| fafeOut() | 要素をフェードアウトする |
| fafeTo() | 要素の透明度を指定した値まで徐々に変化させる |
| fadeToggle() | 要素の表示をフェードイン、フェードアウトで切り替える |
Sliding
スライド表示に関する効果です。
| リファレンス | 説明 |
| slideDown() | 要素をスライドダウンで表示する |
| slideToggle() | 要素の表示をスライドダウン、スライドアップで切り替える |
| slideUp() | 要素をスライドアップで非表示にする |
Custom
各種アニメーションを設定することができます。
| リファレンス | 説明 |
| animate() | 要素をアニメーションする |
| delay() | 要素のキューの待機時間を設定する |
| queue() | 要素のキューを参照および操作する |
| dequeue() | 要素の次のキューを実行する |
| clearQueue() | 要素の実行待ちのキューを削除する |
| stop() | 要素の実行中のアニメーションを停止する |
| finish() | 要素のすべてのアニメーションを終了する |
その他
DOM Element Methods
要素に関する各種操作です。
| リファレンス | 説明 |
| get() | 指定したインデックスの要素を取得する |
| index() | 要素のインデックスを取得する |
| toArray() | 要素を配列に変換する |
Date
要素に持たせるデータに関する設定です。
| リファレンス | 説明 |
| data() | 要素のデータを設定もしくは取得する |
| jQuery.hasData() | 要素がデータを持っているか調べる |
| remove.Data() | 要素のデータを削除する |
ユーティリティ
任意の要素を調べたり、配列やオブジェクトを扱うことができます。
| リファレンス | 説明 |
| jQuery.contains(container,contained) | containerがcontainedを含んでいるか調べる |
| jQuery.isArray() | 配列かどうか調べる |
| jQuery.isEmptyObject() | 空のオブジェクトかどうか調べる |
| jQuery.isFunction() | 関数かどうか調べる |
| jQuery.isNumeric() | 数値かどうか調べる |
| jQuery.isPlanObject() | プレーンオブジェクトかどうか調べる |
| jQuery.isWindow() | ウインドウかどうか調べる |
| jQuery.isXMLDoc() | XMLかどうか調べる |
| jQuery.each() | 配列やオブジェクトを扱う |
| jQuery.grep() | 配列から条件を満たす要素を抜き出す |
| jQuery.inArray() | 配列内で条件を満たす要素のインデックスを返す |
| jQuery.unique() | 配列から重複した要素を削除する |
| jQuery.makeArray() | オブジェクトを配列に変換する |
| jQuery.map() | 関数を使用して配列やオブジェクトに変換する |
| jQuery.merge() | 配列を連結する |
| jQuery.extend() | オブジェクトを連結する |
| jQuery.data() | データを設定および取得する |
| jQuery.removeData() | データを削除する |
| jQuery.queue() | キューを参照もしくは操作する |
| jQuery.dequeue() | 次のキューを実行する |
| jQuery.globalEval(code) | codeをJavaScriputとして実行する |
| jQuery.noop() | 空の関数 |
| jQuery.now() | 現在時刻を調べる |
| jQuery.parseHTML(data) | dataをHTMLとして扱う |
| jQuery.parseJSON(json) | jsonをJSONとして扱う |
| jQuery.parseXML(data) | dataをXMLとして扱う |
| jQuery.proxy() | 自分以外の要素を参照する関数を作成する |
| jQuery.trim(str) | strの最初と最後のホワイトスペースを削除する |
| jQuery.type(obj) | objの型を調べる |
以上、よく使う「jQueryのリファレンス一覧」でした。
参考になれば幸いです。
