jQuery文法チートシート

jQueryとは

JavaScriptをより簡単に書けるように設計されたJavaScriptライブラリのこと
jQuery公式サイト

HTML＆CSS操作系

text

テキストの変更と取得

See the Pen jQuery_text by engineerhikaru (@engineerhikaru) on CodePen.

html

HTMLの変更と取得

See the Pen jQuery_html by engineerhikaru (@engineerhikaru) on CodePen.

prepend

要素内の先頭にHTMLを挿入

See the Pen jQuery_prepend by engineerhikaru (@engineerhikaru) on CodePen.

append

要素内の最後にHTMLを挿入

See the Pen jQuery_append by engineerhikaru (@engineerhikaru) on CodePen.

before

要素の前にHTMLを挿入

See the Pen jQuery_before by engineerhikaru (@engineerhikaru) on CodePen.

after

要素の後にHTMLを挿入

See the Pen jQuery_after by engineerhikaru (@engineerhikaru) on CodePen.

prependTo

他の要素内の先頭に要素を移動

See the Pen jQuery_prependTo by engineerhikaru (@engineerhikaru) on CodePen.

appendTo

他の要素内の最後に要素を移動

See the Pen jQuery_appendTo by engineerhikaru (@engineerhikaru) on CodePen.

insertBefore

他の要素の前に要素を移動

See the Pen jQuery_insertBefore by engineerhikaru (@engineerhikaru) on CodePen.

insertAfter

他の要素の後に要素を移動

See the Pen jQuery_insertAfter by engineerhikaru (@engineerhikaru) on CodePen.

wrap

指定した要素を他の要素で入れ子にする

See the Pen jQuery_wrap by engineerhikaru (@engineerhikaru) on CodePen.

wrapAll

指定した要素の要素全体を他の要素で入れ子にする

See the Pen jQuery_wrapAll by engineerhikaru (@engineerhikaru) on CodePen.

wrapInner

指定した要素の子要素・テキストを他の要素で入れ子にする

See the Pen jQuery_wrapInner by engineerhikaru (@engineerhikaru) on CodePen.

unWrap

指定した要素の親要素を除外

See the Pen jQuery_unwrap by engineerhikaru (@engineerhikaru) on CodePen.

replaceWith

指定した要素を他の要素に書き換える

See the Pen jQuery_replaceWith by engineerhikaru (@engineerhikaru) on CodePen.

remove

remove：指定した要素を削除
removeAttr：指定した要素の属性を削除
removeClass：指定した要素のクラスを削除

See the Pen jQuery_remove by engineerhikaru (@engineerhikaru) on CodePen.

attr

指定した属性の値を変更・取得

See the Pen jQuery_attr by engineerhikaru (@engineerhikaru) on CodePen.

addClass

指定した要素にクラスを追加

See the Pen jQuery_addClass by engineerhikaru (@engineerhikaru) on CodePen.

css

指定したCSSプロパティの値を設定・取得

See the Pen jQuery_css by engineerhikaru (@engineerhikaru) on CodePen.

イベント処理系

click

指定した要素のクリック時に処理を実行

See the Pen jQuery_click by engineerhikaru (@engineerhikaru) on CodePen.

dbclick

指定した要素のダブルクリック時に処理を実行

See the Pen jQuery_dblclick by engineerhikaru (@engineerhikaru) on CodePen.

hover

指定した要素のマウスオーバー/アウト時に処理を実行

See the Pen jQuery_hover by engineerhikaru (@engineerhikaru) on CodePen.

mouseover ・ mouseout

mouseover：指定した要素のマウスオーバー時に処理を実行
mouseout：指定した要素のマウスアウト時に処理を実行

See the Pen jQuery_mouseover by engineerhikaru (@engineerhikaru) on CodePen.

mousedown ・ mouseup

mousedown：指定した要素のマウスボタンが押された時に処理を実行
mouseup：指定した要素のマウスボタンが離された時に処理を実行

See the Pen jQuery_mousedown by engineerhikaru (@engineerhikaru) on CodePen.

mousemove

マウスが移動した時に処理を実行

See the Pen jQuery_mousemove by engineerhikaru (@engineerhikaru) on CodePen.

one

イベント発生時に一度だけ処理を実行

See the Pen jQuery_one by engineerhikaru (@engineerhikaru) on CodePen.

on

対象要素を絞ってイベントを登録

See the Pen jQuery_on by engineerhikaru (@engineerhikaru) on CodePen.

off

設定されているイベント処理を取り消し

See the Pen jQuery_off by engineerhikaru (@engineerhikaru) on CodePen.

focus ・ blur

focus：フォームにフォーカスされた時に処理を実行
blur：フォームのフォーカスが外れた時に処理を実行

See the Pen jQuery_focus by engineerhikaru (@engineerhikaru) on CodePen.

change

フォームの入力値が変更された時に処理を実行

See the Pen jQuery_change by engineerhikaru (@engineerhikaru) on CodePen.

submit

フォームの送信ボタンがクリックされた時に処理を実行

See the Pen jQuery_submit by engineerhikaru (@engineerhikaru) on CodePen.

アニメーション系

show ・ hide

show：要素を徐々に表示
hide：要素を徐々に非表示

See the Pen jQuery_show by engineerhikaru (@engineerhikaru) on CodePen.

toggle

要素を徐々に表示・非表示

See the Pen jQuery_toggle by engineerhikaru (@engineerhikaru) on CodePen.

slideDown ・ slideUp

slideDown：要素をスライドアニメーションで表示
slideUp：要素をスライドアニメーションで非表示

See the Pen jQuery_slideDown-slideUp by engineerhikaru (@engineerhikaru) on CodePen.

slideToggle

要素をスライドアニメーションで表示・非表示

See the Pen jQuery_slideToggle by engineerhikaru (@engineerhikaru) on CodePen.

fadeIn ・ fadeOut

fadeIn：要素をフェードインで表示
fadeOut：要素をフェードアウトで非表示

See the Pen jQuery_fadeIn-fadeOut by engineerhikaru (@engineerhikaru) on CodePen.

fadeTo

要素の透明度を指定した値に徐々に変更

See the Pen jQuery_fadeTo by engineerhikaru (@engineerhikaru) on CodePen.

animate

任意のCSSプロパティの値を徐々に変更

See the Pen jQuery_animate by engineerhikaru (@engineerhikaru) on CodePen.