はじめに
あけましておめでとうございます！
今年もどうぞよろしくお願いいたします！！
今年は地元福岡でとっても綺麗な初日の出が見られたので、気持ちも引き締まってなんだか色々といけそうな気がします…ふふ。
みなさまは初詣のおみくじはお済でしょうか（´ω｀*）？…わたくしめは中吉でした！
可も不可もなく上を狙えるとのことなので、自分の書初めをしっかりと心に刻みつつ、今まで以上にコツコツと精進してまいりますッ
それでは、本題へいってみましょう！
目次
指定方法
公式サイトのドキュメントを元にカテゴライズしています。
Selectors | jQuery API Documentation
基本
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[sourcecode lang="javascript"] // 全ての要素を選択します。 $("*") // 指定したタグを持つすべての要素を選択します。 $("element") // 指定した id 属性を持つ要素を選択します。 $("#id") // 指定したクラスを持つすべての要素を選択します。 $(".class") // 指定した複数のセレクタの要素を選択します。 $("selectorA, selectorB, selectorC") [/sourcecode] |
階層
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[sourcecode lang="javascript"] // 子孫セレクタ。selectorA を先祖に持つ selectorB を選択します。 $("selectorA selectorB") // 子セレクタ。selectorA 直下にある selectorB を選択します。 $("selectorA > selectorB") // 隣接セレクタ。selectorA に隣接している selectorB を選択します。 $("selectorA + selectorB") // 間接セレクタ。selectorA 以降に兄弟要素として出てくる selectorB を選択します。 $("selectorA ~ selectorB") [/sourcecode] |
フィルタ
基本
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
[sourcecode lang="javascript"] // 文書のルートである要素を選択します。 $("selector:root") // h1, h2, h3 などのヘッダー要素を選択します。 $("selector:header") // 指定した言語(str)のすべての要素を選択します。 $("selector:lang('str')") // 指定したセレクタのリンク先のターゲット要素を選択します。 $("selector:target") // セレクタが実行された時点で、アニメーション状態の要素を選択します。 $("selector:animated") // 指定したセレクタの最初の要素を選択します。 $("selector:first") // 指定したセレクタの最後の要素を選択します。 $("selector:last") // 指定したセレクタの偶数番目の要素を選択します。 $("selector:even") // 指定したセレクタの奇数番目の要素を選択します。 $("selector:odd") // 指定したセレクタのn番目の要素を選択します。 $("selector:eq(n)") // 指定したセレクタのn番目より後の要素を選択します。 $("selector:gt(n)") // 指定したセレクタのn番目より前の要素を選択します。 $("selector:lt(n)") // selectorB に一致しないすべての selectorA を選択します。 $("selectorA:not(selectorB)") [/sourcecode] |
子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
[sourcecode lang="javascript"] // 指定したセレクタの親要素に対して、一致する最初の要素を選択します。 $("selector:first-child") // 指定したセレクタの親要素に対して、他要素も含め最初の要素を選択します。 $("selector:first-of-type") // 指定したセレクタの親要素に対して、一致する最後の要素を選択します。 $("selector:last-child") // 指定したセレクタの親要素に対して、他要素も含め最後の要素を選択します。 $("selector:last-of-type") // 指定したセレクタの親要素に対して、子要素が1つしかない要素を選択します。 $("selector:only-child") // 指定したセレクタの親要素に対して、子要素が1つ含まれる要素を選択します。 $("selector:only-of-type") // 指定したセレクタの親要素に対して、一致するn番目の子要素を選択します。 $("selector:nth-child(n)") // 指定したセレクタの親要素に対して、他要素も含めn番目の子要素を選択します。 $("selector:nth-of-type(n)") // 指定したセレクタの親要素に対して、一致する後から数えてn番目の子要素を選択します。 $("selector:nth-last-child(n)") // 指定したセレクタの親要素に対して、後から数えて他要素も含めn番目の子要素を選択します。 $("selector:nth-last-of-type(n)") [/sourcecode] |
コンテンツ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[sourcecode lang="javascript"] // 指定したテキスト（str）を含むすべての要素を選択します。 $("selector:contains('str')") // selectorB を子孫に持つ selectorA を選択します。 $("selectorA:has(selectorB)") // 子要素を持たない要素を選択します。 $("selector:empty") // selector の親要素を選択します。 $("selector:parent") [/sourcecode] |
可視性
|
1 2 3 4 5 6 7 |
[sourcecode lang="javascript"] // 非表示にしているすべての要素を選択します。 $("selector:hidden") // 表示されているすべての要素を選択します。 $("selector:visible") [/sourcecode] |
フォーム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
[sourcecode lang="javascript"] // type 属性が checkbox である要素を選択します。 $("selector:checkbox") // select 要素で選択されている状態の要素を選択 $("selector:selected") // セレクタが実行された時点で、利用不可能な状態にある要素を選択します。 $("selector:disabled") // セレクタが実行された時点で、利用可能な状態にある要素を選択します。 $("selector:enabled") // セレクタが実行された時点で、フォーカス状態の要素を選択します。 $("selector:focus") // type 属性が button である要素、または button 要素を選択します。 $("selector:button") // セレクタが実行された時点で、チェック状態にある要素を選択します。 $("selector:checked") // type 属性が file である要素を選択します。 $("selector:file") // type 属性が image である要素を選択します。 $("selector:image") // input 要素を選択します。 $("selector:input") // type 属性が password である要素を選択します。 $("selector:password") // type 属性が radio である要素を選択します。 $("selector:radio") // type 属性が reset である要素を選択します。 $("selector:reset") // type 属性が submit である要素を選択します。 $("selector:submit") // type 属性が text である要素を選択します。 $("selector:text") [/sourcecode] |
属性
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
[sourcecode lang="javascript"] // 指定した属性（name）を持つ要素を選択します。 $("selector[name]") // 指定した属性（name）の値（value）が完全一致する要素を選択します。 $("selector[name='value']") // 指定した属性（name）の値（value）と異なる要素を選択します。 $("selector[name!='value']") // 指定した属性（name）の値（value）が前方一致する要素を選択します。 $("selector[name^='value']") // 指定した属性（name）の値（value）が後方一致する要素を選択します。 $("selector[name$='value']") // 指定した属性（name）の値（value）が含まれる要素を選択します。 $("selector[name*='value']") // 指定した属性（name）の値（value）が単語で含まれる要素を選択します。 $("selector[name~='value']") // 属性（name）の値（value）が一致、またはハイフンを付けた派生の値（value）を持つ要素を選択します。 $("selector[name|='value']") // 指定した複数の属性（name）の値（value）に一致する要素を選択します。 $("selector[name='value'][name='value']") [/sourcecode] |
さいごに
いかがでしたでしょうか！
今回調査するにあたり、使ったことのないセレクタの指定方法を再把握できる良い機会となりました（´ω｀*）
なんて便利なんだ… 惚れるぜ jQuery… 案件の要件によりけりですが、積極的に導入していきたいですね！
制作者のみなさまのお役に立てますように…♪
それではこれにて失礼いたします！
参考URL
