各種セレクタ
第1回ではjQueryを使ったclassを自動で追加するサンプルを見てもらいました。HTMLのどの部分に適応するのかを指定するためのセレクタも紹介しましたが，第1回で紹介したのは，そのごくわずか一部だけです。
第2回では，第1回で紹介しきれなかったセレクタや，それらを使った実践サンプルを紹介いたします。
基本（Basics）
| セレクタ | 例 | 選択箇所・補足 |
|---|---|---|
| タグ | $('p') | タグを選択 |
| #id | $('#id') | id名を持つ箇所を選択 |
| .class | $('.class') | class名を持つ箇所を選択 |
| .class.class | $('.class1.class2') | （複数の）class名を持つ箇所を選択［※1］ |
| *（全ての要素） | $('*') | 全ての要素を選択 |
| セレクタ,セレクタ,… | $('#id1,#id2') | 同時に複数のセレクタを選択［※2］ |
［※1］例の場合：class="class1 class2"
［※2］例の場合，id="id1"とid="id2"の2箇所
CSS指定の時などの時にも使うセレクタと同じなので，コーダーの方などには馴染み深く，また，初めて使ってみるときになど試してみやすいセレクタだと思います。
最初は複雑に考えずに，適応させたい部分にid名などをつけて利用してみてください。
階層（Hierarchy）
| セレクタ | 例 | 選択箇所・補足 |
|---|---|---|
| ancestor descendant | $('#wrap p') | 階層を選択［※3］ |
| parent > child | $('#content > *') | 親子関係で選択［※4］ |
| prev + next | $('#content + *') | 前後関係で選択［※4］ |
| prev ~ siblings | $('#content ~ p') | 兄弟関係で選択［※5］ |
［※3］ancestor（先祖）とdescendant（子孫）の関係での選択です。
［※4］直下の要素のみの選択です。
［※5］prev以降の要素と同階層の要素を選択します。
タグ名やclass名などは，HTML全体のなかから該当する部分全てが選択されます。CSSと同じ指定で，選択範囲を絞る場合は「#wrap p」（id="wrap"のタグに囲まれた中にあるpタグ）のように半角スペースを入れて指定します。このセレクタは，子孫要素が先祖要素の直下だけでなく，該当する全ての要素を選択することになります。
基本フィルタ（Basic Filters）
| セレクタ | 例 | 選択箇所・補足 |
|---|---|---|
| :first | $('li:first') | 要素の最初だけを選択 |
| :last | $('li:last') | 要素の最後だけを選択 |
| :not（セレクタ） | $('p a:not(p span a)') | 指定した要素を除外した要素を選択 |
| :even | $('li:even') | 偶数番目の要素を選択［※6］ |
| :odd | $('li:odd') | 奇数番目の要素を選択[*6] |
| :eq(index) | $('li:eq(2)') | 指定したindexの要素を選択［※6］ |
| :gt(index) | $('li:gt(3)') | 指定したindexの要素より後ろの要素を選択［※6］ |
| :lt(index) | $('li:lt(4)') | 指定したindexの要素より前の要素を選択［※6］ |
| :header | $(':header') | h1やh2などの見出し要素を選択 |
| :animated | $(':animated') | アニメーション中の要素を選択 |
［※6］最初の要素は0番目
ここで注意したいのは，要素の数え方。最初は0番目となります。:oddや:evenもその0番目から考えての偶数奇数で選択されます。
ここでのフィルタはHTML全体の中から該当の一つを選択します。ブロックごとでの最初や最後などの該当部分はなくて，ページ全体で考えての位置になります。
コンテントフィルタ（Content Filters）
| セレクタ | 例 | 選択箇所・補足 |
|---|---|---|
| :contains（テキスト） | $('div:contains("テキスト")') | 指定したテキストを含む要素を選択 |
| :empty | $('td:empty') | 空の要素を選択 |
| :has（セレクタ） | $('p:has(span)') | 指定したセレクタを子要素に持つ要素を選択 |
| :parent | $('td:parent') | 子要素もしくはテキストを持つ要素を選択 |
表示・非表示フィルタ（Visibility Filters）
| セレクタ | 例 | 選択箇所・補足 |
|---|---|---|
| :hidden | $('div:hidden') | 非表示中の要素を選択［※7］ |
| :visible | $('input:visible') | 表示中の要素を選択 |
［※7］display:none;の要素と，type="hidden"の要素
属性フィルタ（Attribute Filters）
| セレクタ | 例 | 選択箇所・補足 |
|---|---|---|
| [属性] | $('[id]') | 指定した属性を持つ要素を選択 |
| [属性=値] | $('input[name="inputname"]') | 指定した属性が特定の値を持つ要素を選択 |
| [属性!=値] | $('input[name!="inputname"]') | 指定した属性が特定の値を持たない要素を選択 |
| [属性^=値] | $('a[href^="http://"]') | 指定した属性の最初の文字が一致した要素を選択 |
| [属性$=値] | $('a[href$=".jpg"]') | 指定した属性の最後の文字が一致した要素を選択 |
| [属性*=値] | $('input[name*="man"]') | 指定した属性の一部の文字が一致した要素を選択 |
| [属性1][属性2][属性N] | $('input[id][name$="man"]') | 複数の指定した属性全てを持つ要素を選択 |
子要素フィルタ（Child Filters）
| セレクタ | 例 | 選択箇所・補足 |
|---|---|---|
| :nth-child(index/even/odd/equation) | $('ul li:nth-child(2)') | 各親要素に対して指定した子要素を選択［※8］ |
| :first-child | $('ul li:first-child') | 各親要素に対して最初の子要素を選択［※8］ |
| :last-child | $('ul li:last-child') | 各親要素に対して最後の子要素を選択［※8］ |
| :only-child | $('div button:only-child') | 各親要素で子要素が一つの場合，その子要素を選択 |
［※8］最初の要素は1番目
このセレクタは，基本セレクタの時と違い，最初が1番目となります。:nth-child(odd)や:nth-child(even)も偶数番目と奇数番目を選択するのですが，最初が1となるため，:oddや:evenなども選択される位置が逆になるということは覚えて起きましょう。
また，各ブロックごとでの該当部分の選択となるのも，基本セレクタとの違いです。各リストごとに最初と最後や指定の位置などを選択する場合は，こちらのセレクタを利用するようにしましょう。
フォーム（Forms）
| セレクタ | 例 | 選択箇所・補足 |
|---|---|---|
| :input | $(':input') | input，textarea，select，button要素を選択 |
| :text | $('input:text') | type属性がtextの要素を選択 |
| :password | $('input:password') | type属性がpasswordの要素を選択 |
| :radio | $('input:radio') | type属性がradioの要素を選択 |
| :checkbox | $('input:checkbox') | type属性がcheckboxの要素を選択 |
| :submit | $('input:submit') | type属性がsubmitの要素とbutton要素を選択 |
| :image | $('input:image') | type属性がimageの要素を選択 |
| :reset | $('input:reset') | type属性がresetの要素を選択 |
| :button | $('input:button') | type属性がbuttonの要素とbutton要素を選択 |
| :file | $('input:file') | type属性がfileの要素を選択 |
フォームフィルタ（Form Filters）
| セレクタ | 例 | 選択箇所・補足 |
|---|---|---|
| :enabled | $('input:enabled') | フォームの利用可能箇所を選択［※9］ |
| :enabled | $('input:disabled') | フォームの利用不可箇所を選択［※9］ |
| :checked | $('input:checked') | チェック状態の要素を選択 |
| :selected | $('select option:selected') | 選択状態の要素を選択 |
［※9］disabled="disabled"がフォームの利用不可箇所
