jQueryのセレクターまとめ
jQueryを使ってHTMLの要素を指定する際に使用できるセレクター一覧表
| 名称 | 書式 | 指定対象 |
|---|---|---|
| CSSでよく利用されるセレクター | ||
| 要素セレクター | $("要素名") | 特定の要素 |
| 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][...2] | $("[属性セレクター1][...2]") | 複数の属性セレクターに該当する要素 |
| jQueryの独自フィルター | ||
| firstフィルター | $("要素:first") | 指定した要素の最初の要素 |
| lastフィルター | $("要素:last") | 指定した要素の最後の要素 |
| evenフィルター | $("要素:even") | 指定した要素の偶数番目の要素 |
| oddフィルター | $("要素:odd") | 指定した要素の奇数番目の要素 |
| eqフィルター | $("要素:eq(番号)") | 指定した番号の要素 |
| gtフィルター | $("要素:gt(番号)") | 指定した番号より後の要素 |
| ltフィルター | $("要素:lt(番号)") | 指定した番号より前の要素 |
| headerフィルター | $("要素:header") | h1～h6までのheading要素 |
| containsフィルター | $("要素:contains(‘文字列’)") | 特定の文字列が含まれている要素 |
| hasフィルター | $("要素1:has(要素2)") | 特定の要素が含まれている要素 |
| parentフィルター | $("要素:parent") | 子要素やテキストを含む要素 |
| animatedフィルター | $("要素:animated") | アニメーションしている要素 |
| フォームフィルター | ||
| :inputフィルター | $("要素:input") | input要素/textarea要素/select要素/button要素 |
| :textフィルター | $("要素:text") | 1行テキストフォーム（input type="text"） |
| :passwordフィルター | $("要素:password") | パスワードフォーム（input type="password"） |
| :radioフィルター | $("要素:radio") | ラジオボタン（input type="radio"） |
| :checkboxフィルター | $("要素:checkbox") | チェックボックス（input type="checkbox"） |
| :submitフィルター | $("要素:submit") | 送信ボタン（input type="submit/image"） |
| :imageフィルター | $("要素:image") | イメージボタン（input type="image"） |
| :resetフィルター | $("要素:reset") | リセットボタン（input type="reset"） |
| :buttonフィルター | $("要素:button") | ボタン（button要素） |
| :fileフィルター | $("要素:file") | ファイル選択フォーム（input type="file"） |
| :checkedフィルター | $("要素:checked") | チェックされているチェックボックス/ラジオボタン |
| :selectedフィルター | $("要素:selected") | セレクトボックスで選択されている要素 |
0 Comments»
コメントはまだありません。
このコメント欄の RSS フィード TrackBack URI
コメントをどうぞ »
初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。