jQueryで利用出来る、各種セレクタ
自分用まとめ
セレクタ | 補足 |
---|---|
* | すべての要素 |
xxx | 要素による指定 pなど |
#xxx | idの指定 id="test" |
.xxx | classの指定 class="test" |
フィルタ | 補足 |
---|---|
:first | 先頭の要素 li:first |
:last | 最後の要素 li:last |
:not(xxx) | かっこ内で指定したセレクタを除外 .list:not(li:last) |
:even | 偶数の要素 (0から数える) li:even |
:odd | 奇数から数える(0から数える) li:odd |
:eq(n) | n番目の要素 |
:gt(n) | n番目以降の要素 |
:lt(n) | n番目以前の要素 |
:header | h1,h2などのヘッダー要素 |
:animated | アニメーション中の要素 |
:contains(xxx) | 要素ないのコンテンツにかっこ内の文字列を含む要素 p:contains(テスト) |
:empty | 要素ないが空の要素 |
:has(xxx) | カッコ内で指定したセレクタを含む親要素 :has(.second) |
:parent | 子要素を持っている要素 |
:hidden | 非表示になっている要素と、type属性がhiddenのinput要素 |
:visible | 表示状態になっている要素 |
:nth-child(n) | n番目の子要素 |
:first-child | 最初の子要素 li:first-child |
:last-child | 最後の子要素 |
:only-child | 1つだけ子要素を持つ場合に、その子要素 |
フォーム要素 | 補足 |
---|---|
:input | テキストフィールド、テキストエリア、ドロップダウン、ボタン |
:password | type属性がpasswordのフォーム |
:text | type属性がtextのフォーム |
:radio | type属性がradioのフォーム |
:checkbox | type属性がcheckboxのフォーム |
:submit | type属性がsubmitのフォーム |
:image | type属性がimageのフォーム |
:reset | type属性がresetのフォーム |
:button | type属性がbuttonのフォーム |
:file | type属性がfileのフォーム |
:hidden | type属性がhiddenのフォーム |
:enabled | disabled属性が付加されていない、有効なフォーム |
:disabled | disabled属性が付加されている、無効なフォーム |
:checked | チェックが入っているチェックボックス、ラジオボタン |
:selected | 選択状態になる要素 |
属性による指定 | 補足 |
---|---|
[xxx] | xxx属性を持っている要素 [href] |
[xxx=xyz] | xxx属性がxyzという値の要素 [href=#top] |
[xxx!=xyz] | xxx属性がxyzではない要素 [href!=#top] |
xxx^=xyz | xxx属性がxyzから始まる要素 [href^=to] |
xxx$=xyz | xxx属性がxyzで終わる要素 [href$=part] |
xxx*=xyz | xxx属性がxyzを含む要素 [src*=png] |
その他 | 補足 |
---|---|
$('aaa bbb') | aaaの要素ないの、すべてのbbb $('#content p') |
$('aaa > bbb') | aaaの要素内の直下のbbb $('ul > li') |
$('aaa + bbb') | aaaの要素の次のbbb $('#content div') |
$('aaa ~ bbb') | aaaの要素以降に出てくるbbb $('#content ~ p') |
evenは4文字=偶数なので偶数を示し、oddは3文字=奇数なので奇数を示す。としたら覚えやすいです。