「jQuery」のリファレンス【よく使う一覧】

jQueryで出来ることを確認したいけど本家ページは英語だし一覧で見ずらい…
日本語でリファレンス一覧を解説してほしい。

 

 

そうお困りではありませんか?

 

筆者自身が「日本語で分かりやすく一覧化されてる情報があったらいいなー」と思ったので、

よく使う「jQueryのリファレンス一覧」をまとめました。

備忘録として参考にしてもらえたらと思います。

 

以下カテゴリ別に解説、探したいカテゴリにジャンプ推奨です。

・セレクタ
・参照
・イベント
・操作
・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 h1~h6要素
:lang() 指定の言語の要素
:not() 指定のセレクタに当てはまらない要素
:animated 実行中のアニメーションがある要素
:root ドキュメントルートの要素(デフォルトはhtml要素)
:target URLのターゲットをidに持つ要素

 

Child Filter

子要素に関するセレクタです。

リファレンス 説明
:first-child 要素から見た最初の子要素
:nth-child(n) 要素から見たn番目の子要素
:last-child 要素から見た最後の子要素
:first-of-type 要素から見た同種類の要素の内、最初の子要素
:nth-of-type(n) 要素から見た同種類の要素の内、n番目の子要素
:last-of-type 要素から見た同種類の要素の内、最後の子要素
:nth-last-child(n) 要素から見た後ろからn番目の子要素
:nth-last-of-type(n) 要素から見た同種類の要素の内、後ろから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のリファレンス一覧」でした。

参考になれば幸いです。

スポンサーリンク

JavaScriptの最新記事8件

NO IMAGE

晴耕雨読

『晴れた日には畑を耕し雨の日には本を読む』そんな生活を目指すブログです