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プロパティの値を徐々に変更する |