2019-07-07
jQueryセレクタまとめ
jQueryで要素に対して操作を行うには、操作や変更を行いたい対象の要素を指定する必要があります。
jQueryでは、スタイルシートと同じ形式で記述したり、独自のフィルタが用意されています。jQueryで要素の操作を行うには、$(...)形式で要素をjQueryオブジェクトを生成します。生成したjQueryオブジェクトに対して変更命令を行います。CSSの知識があれば問題なく使えると思います。
$("セレクタ").命令()
基本セレクタ
基本セレクタの指定はHTMLでもおなじみの、id属性やclass属性を多様します。基本セレクタには次の5つの種類があります。
| 名称 | 記述方法 | 説明 |
|---|---|---|
| ユニバーサルセレクタ | $(“*”) | 全てのHTML要素 |
| IDセレクタ | $(“#id名”) | id属性の値を持つ要素 |
| クラスセレクタ | $(“.クラス名”) | class属性の値を持つ要素 |
| 要素セレクタ | $(“要素”) | 特定の要素 |
| グループセレクタ | $(“セレクタ,セレクタ,…”) | 複数のセレクタ |
階層セレクタ
子孫要素を用いた、階層構造と合わせて要素を指定するセレクタです。
| 名称 | 記述方法 | 説明 |
|---|---|---|
| 子孫セレクタ | $(“要素a 要素b”) | 要素aに含まれる要素b |
| 子セレクタ | $(“要素a > 要素b”) | 要素aの直下の子要素b |
| 隣接セレクタ | $(“要素a + 要素b”) | 要素aの次に記述された要素b |
| 関節セレクタ | $(“要素a ~ 要素b”) | 要素aの後に記述された要素b |
子セレクタ
擬似クラスを用いて子要素を指定するセレクタです。
| 名称 | 記述方法 | 説明 |
|---|---|---|
| first-child 擬似クラス | $(“要素:first-child”) | 要素の中で最初に登場した子要素 |
| last-child 擬似クラス | $(“要素:last-child”) | 要素の中で最後に登場した子要素 |
| nth-child 擬似クラス | $(“要素:nth-child(番号)”) | 要素の中で指定した順番に登場した子要素 |
| only-child 擬似クラス | $(“要素:only-child”) | 要素の中で一つしか存在しない子要素 |
属性セレクタ
特定の属性およびその値を持つ要素を指定するセレクタです。
| 名称 | 記述方法 | 説明 |
|---|---|---|
| [attribute] | $(“[属性名]”) | 特定の属性を持つ要素 |
| [attribute=’value’] | $(“[属性名=’値’]”) | 特定の属性が指定した値を持つ要素 |
| [attribute!=’value’] | $(“要素[属性名!=’値’]”) | 特定の属性が指定した値を持たない要素 |
| [attribute^=’value’] | $(“[属性名^=’値’]”) | 特定の属性が特定の値で始まっている要素 |
| [attribute$=’value’] | $(“[属性名$=’値’]”) | 特定の属性が特定の値で終わっている要素 |
| [attribute*=’value’] | $(“[属性名*=’値’]”) | 特定の属性が特定の値を含んでいる要素 |
| [attribute | =’value’] | $(“[属性名 |
| [attribute~=’value’] | $(“[属性名~=’値’]”) | 特定の属性をスペースで分割し、いづれかが値と同じ要素 |
| [attribute][attribute] | $(“[属性セレクタ][属性セレクタ]”) | 風数の属性セレクタに該当する要素 |
基本フィルタ
基本フィルタは、セレクタで指定した要素に対し、順番や状態に対してさらに条件を付けてフィルタリングすることができます。
| 名称 | 記述方法 | 説明 |
|---|---|---|
| firstフィルタ | $(“要素:first”) | 最初の要素 |
| lastフィルタ | $(“要素:last”) | 最後の要素 |
| evenフィルタ | $(“要素:even”) | 偶数番目の要素 |
| oddフィルタ | $(“要素:odd”) | 奇数番目の要素 |
| eqフィルタ | $(“要素:eq(番号)”) | 指定した番号の要素(番号は0からカウント) |
| gtフィルタ | $(“要素:gt(番号)”) | 指定した番号より後の要素(番号は0からカウント) |
| ltフィルタ | $(“:lt(番号)”) | 指定した番号より前の要素(番号は0からカウント) |
| headerフィルタ | $(“:header”) | h1〜h6要素 |
| アニメーションフィルタ | $(“要素:animated”) | アニメーションがかかっている要素 |
| 否定擬似クラス | $(“要素:not(セレクタ)”) | セレクタで指定された条件以外の要素 |
:first-childと:firstの違いに注意
:firstはセレクタで指定した要素のうち、最初に登場した要素(単一)が対象になるのに対し、:fist-childはセレクタで指定した、各要素における 最初の要素(複数)が対象になります。似ていますが、実行結果が異なりますので注意が必要です。
コンテンツフィルタ
コンテンツフィルタは、セレクタで指定した要素に対し、内容をを条件としてフィルタリングすることができます。
| 名称 | 記述方法 | 説明 |
|---|---|---|
| containsフィルタ | $(“要素:contains(文字列a)”) | 文字列aが含まれている要素 |
| emptyフィルタ | $(“要素:empty”) | 子要素やテキストを含まない要素 |
| hasフィルタ | $(“要素a:has(要素b)”) | 要素bが含まれている要素a |
| parentフィルタ | $(“要素:parent”) | 子要素やテキストを含んでいる要素 |
フォームフィルタ
フォームフィルタは、フォーム関連の部品に関連する項目を指定するフィルタです。
| 名称 | 記述方法 | 説明 |
|---|---|---|
| buttonフィルタ | $(“:button”) | button要素、もしくはtype属性がbuttomであるinput要素 |
| checkboxフィルタ | $(“:checkbox”) | type属性がcheckboxであるinput要素 |
| checkedフィルタ | $(“:checked”) | 選択状態にあるtype属性がcheckboxまたはradioであるinput要素 |
| disabledフィルタ | $(“:disabled”) | disabled属性がdisabledである要素 |
| enabledフィルタ | $(“:enabled”) | disabled属性がdisabledではない要素 |
| fileフィルタ | $(“:file”) | type属性がfileであるinput要素 |
| imageフィルタ | $(“:image”) | type属性がimageであるinput要素 |
| inputフィルタ | $(“:input”) | input要素、textarea要素、select要素、button要素などのフォーム要素 |
| passwordフィルタ | $(“:password”) | type属性がpasswordであるinput要素 |
| radioフィルタ | $(“:radio”) | type属性がradioであるinput要素 |
| resetフィルタ | $(“:reset”) | type属性がresetであるinput要素 |
| selectedフィルタ | $(“:selected”) | セレクトボックスで選択されているoption要素 |
| submitフィルタ | $(“:submit”) | type属性がsubmitまたはimageであるinput要素 |
| textフィルタ | $(“:text”) | type属性がtextであるinput要素 |
可視フィルタ
可視フィルタは、要素が表示されているかを条件とするフィルタです。
| 名称 | 記述方法 | 説明 |
|---|---|---|
| hiddenフィルタ | $(“:hidden”) | スタイルシートでdisplayプロパティにnoneが指定されている、またはtype属性がhiddenであるinput要素 |
| visibleフィルタ | $(“:visible”) | ブラウザ上で表示されている要素 |
hiddenフィルタの補足
要素のwidthとhightが0である場合も、非表示であると判断されhiddenフィルタにかかります。一方、CSSのvisiblityプロパティがhiddenである要素や、opacityプロパティが0である要素は、可視化されてはいませんが、実体が存在するためhiddenフィルタでは指定できないので注意が必要です。
まとめ
セレクタとフィルタの扱いはjQueryを使うにあたって、最も基本的かつ重要な部分となります。効率的な記述ができれば、コードの可読性も上がり、無駄なメモリの消費も避けられます。適切な指定ができるよう、しっかりと押さえましょう。