jQuery

jQueryセレクター

分類 名称 書式 対象
  要素セレクター $("要素名") 特定の要素
IDセレクター $("#ID名") 特定のid属性を持つ要素
クラスセレクター $(".クラス名") 特定のclass属性を持つ要素
子孫セレクター $("要素1 要素2") 特定の要素の内側にある要素
ユニバーサルセレクター $("*") 全ての要素
グループセレクター $("セレクター1,セレクター2,...") 複数のセレクター
CSS2 子セレクター $("親要素名 > 子要素名") 特定の要素の直下の子要素
隣接セレクター $("要素1 + 要素2") 特定の要素の次の要素
first-child擬似セレクター $("要素:first-child") 同一要素内の最初の要素
CSS3 間接セレクター $("要素1 ~ 要素2") 特定の要素の後に出現する要素
否定擬似クラス $("要素1:not(要素2)") 特定の要素のうち要素2の条件を除く要素
empty擬似クラス $("要素:empty") 子要素やテキストを含まない要素
nth-child擬似クラス $("要素:nth-child(番号)") 特定の要素のうち指定した番号の要素
last-child擬似クラス $("要素:last-child") 同一要素内の最後の要素
only-child擬似クラス $("要素:only-child") 特定の要素が1つだけ含まれる要素
CSSの属性 [attribute] $("[属性名]") 特定の属性を持つ要素
[attribute='value'] $("[属性名='値']") 特定の属性が指定した値を持つ要素
[attribute!='value'] $("[属性名!='値']") 特定の属性が指定した値を持たない要素
[attribute^='value'] $("[属性名^='値']") 特定の属性が指定した値で始まっている要素
[attribute$='value'] $("[属性名$='値']") 特定の属性が指定した値で終わっている要素
[attribute*='value'] $("[属性名*='値']") 特定の属性が指定した値を含んでいる要素
[attributeFilter1]
[attributeFilter2]
$("[属性セレクター1][属性セレクター2]") 複数の属性セレクターに該当する要素
jQueryフィルター firstフィルター $("要素:first") 指定した要素の最初の要素
lastフィルター $("要素:last") 指定した要素の最後の要素
evenフィルター $("要素:even") 指定した要素の偶数番目の要素
oddフィルター $("要素:odd") 指定した要素の奇数番目の要素
eqフィルター $("要素:eq(番号)") 指定した番号の要素
(番号は0から数える)
gtフィルター $("要素:gt(番号)") 指定した番号より後の要素
(番号は0から数える)
ltフィルター $("要素:lt(番号)") 指定した番号より前の要素
(番号は0から数える)
headerフィルター $("要素:header") h1~h6までのheading要素
containsフィルター $("要素:contains(文字列)") 特定の文字列が含まれている要素
hasフィルター $("要素1:has(要素2)") 特定の要素が含まれている要素
parentフィルター $("要素:parent") 子要素やテキストを含む要素

HTML/CSS操作命令

分類 メソッド 概要
テキスト text(...) テキストを変更する
text() テキストを取得する
HTMLの変更/取得 html(...) HTMLを変更する
html() HTMLを取得する
HTMLの挿入 prepend(...) 要素内の先頭にHTMLを挿入する
append(...) 要素内の最後にHTMLを挿入する
before(...) 要素の前にHTMLを挿入する
after(...) 要素の後にHTMLを挿入する
HTMLの移動 prependTo(...) 他の要素内の先頭に要素を移動する
appendTo(...) 他の要素内の最後に要素を移動する
insertBefore(...) 他の要素の前に要素を移動する
insertAfter(...) 他の要素の後に要素を移動する
他の要素で包む wrap(...) 要素を他の要素で包む
wrapAll(...) 要素をまとめて他の要素で包む
wrapInner(...) 子要素/テキストを他の要素で包む
要素の置き換え replaceWith(...) 要素を他の要素に置き換える
要素の削除 remove() 要素を削除する
属性値の変更/取得 attr(..., ...) 指定した属性の値を変更する
attr(...) 指定した属性の値を取得する
removeAttr(...) 指定した属性を削除する
class属性の追加と削除 addClass(...) class属性を追加する
removeClass(...) class属性を削除する
CSSの制御 css(..., ...) 指定したCSSプロパティの値を設定する
css(...) 指定したCSSプロパティの値を取得する

イベント

メソッド 概要
click() クリック時に処理を実行
dblclick() ダブルクリック時に処理を実行
mousedown() マウスのボタンが押された時に処理を実行
mouseup() マウスのボタンが離された時に処理を実行
toggle() クリックされるたびに異なる処理を実行
mouseover() マウスオーバー時に処理を実行
mouseout() マウスアウト時に処理を実行
mousemove() マウス移動時に処理を実行
one() イベント発生時に一度だけ処理を実行
unbind() 設定されているイベント処理を取り消す
live() 将来追加される要素にイベント処理を設定する

フォームフィルター

  フォームフィルター CSSセレクター
input要素
textarea要素
select要素
button要素
:input input
textarea
select
button
1行テキスト入力フォーム :text input[type='text']
パスワード入力フォーム部品 :password input[type='password']
ラジオボタン :radio input[type='radio']
チェックボックス :checkbox input[type='checkbox']
送信ボタン :submit input[type='submit']
intput[type='image']
イメージボタン :image input[type='image']
リセットボタン :reset input[type='reset']
ボタン :button button
ファイル選択フォーム :file input[type='file']
チェックが入っている要素 :checked  
選択されている要素 :selected  

アニメーション関連のメソッド

メソッド 概要
show(...) 要素を徐々に表示する
hide(...) 要素を徐々に非表示にする
toggle(...) 要素をの表示・非表示を徐々に切り換える
slideDown(...) 要素をスライドアニメーションで表示する
slideUp(...) 要素をスライドアニメーションで非表示にする
slideToggle(...) 要素の表示・非表示をスライドアニメーションで切り換える
fadeIn(...) 要素をフェードインで表示する
fadeOut(...) 要素フェードアウトで非表示にする
fadeTo(...) 要素の透明度を指定した値に徐々に変更する
animate(...) 任意のCSSプロパティの値を徐々に変更する