【jQuery】セレクタ
最終更新日：
セレクタとは
jQueryでのセレクタとは、ページ内の操作対象の要素を指定する機能です。
$()の中に記述するものがセレクタです。
比較演算子
| セレクタ | 記述例 | 説明 |
|---|---|---|
| * | $("*") | 全要素 |
| 要素（element） | $("p") $("h1,p") |
<p>などの要素を指定 |
| #id | $("#test") | idは基本ユニークなため反映されるのは一つ |
| .クラス名 | $(".test") $(".test1,.test2") |
|
| !== | $("#id名 要素名") | 検索対象は#id名内全ての要素 |
| > | $("#id名 > 要素名") | id名直下のa要素のみ |
| >= | $("要素名A + 要素名B") | 要素名Aの次に現れる要素名Bを指定 |
| < | $("要素名A ~ 要素名B") | 要素名Aの以降に現れる要素名Bの全てを指定 |
| <= | 左の値が右の値以下の場合にTrueを返す |
論理演算子
フィルターを使った指定方法
要素セット全体から，要素名A直下の要素名Bで最初の要素を取り出す
1
$("要素名A > 要素名B:first")
要素セット全体から，要素名A直下の要素名B最後の要素を取り出す
1
$("要素名A > 要素名B:last")
親要素を起点とし，要素名A直下の要素名B最初の要素を取り出す
1
$("要素名A > 要素名B:first-child")
親要素を起点とし，要素名A直下の要素名B最後の要素を取り出す
1
$("要素名A > 要素名B:last-child")
上記の違いは，以下のサンプルを見てください．
それぞれの指定方法で,最初と最後の要素の文字色を変更しています．
リスト1テキスト1
リスト1テキスト2
リスト1テキスト3
リスト2テキスト1
リスト2テキスト2
リスト2テキスト3
このように，取得した要素の中から最初と最後の要素を取り出す場合と，親要素を起点にそれぞれの最初と最後の要素を取り出す場合に分けられます．
要素名A内の要素名Bで偶数番目の要素を取り出す
1
$("要素名A 要素名B:even")
要素名A内の要素名Bで奇数番目の要素を取り出す
1
$("要素名A 要素名B:odd")
要素名A直下の要素名Bでn番目の要素を取り出す
1
$(" 要素名A > 要素名B:eq(n)")
要素名A直下の要素名Bでn番目以前の要素すべて(n番目の要素は含まず)を取り出す
1
$(" 要素名A > 要素名B:lt(n)")
要素名A直下の要素名Bでn番目以降の要素すべて(n番目の要素は含まず)を取り出す
1
$(" 要素名A > 要素名B:gt(n")
textという文字列を含む要素(大文字小文字の区別あり)を取り出す
1
$(" 要素名B:contains('text')")
内容を持つ要素を取り出す
1
$(" 要素名B:parent")
内容を持たない要素を取り出す
1
$(" 要素名B:empty")
hasによって指定された要素名Bを含む要素名A要素を取り出す
1
$(" 要素名A:has(要素名B)")
a個おきに要素を指定する
an+bの場合，「aで割った時にb余る」要素を取り出す
1
$(" 要素名A > 要素名B:nth-child(an+b)")
要素名Bが要素名Aのただひとつの子要素の場合のみを取り出す
1
$(" selectorA > selectorB:only-child")
属性フィルターを使った指定方法
特定の属性を持つ要素を取り出す
1
$("要素[属性]")
特定のある値に等しい属性を持つ要素を取り出す
1
$("要素[属性='値']")
特定のある値に等しくない属性を持つ要素を取り出す
1
$("要素[属性!='値']")
属性値が前方一致する要素を取り出す
1
$("要素[属性^=値]")
属性値が後方一致する要素を取り出す
1
$("要素[属性$=値]")
属性値が部分一致する要素を取り出す
1
$("要素[属性*=値]")
「属性Bが値C」かつ「属性Dをもつ」，「要素A」を取り出す
1
$("要素A[属性B=値C] [属性D]")
見出し要素すべてを取り出す
1
$(":header")
属性Bを持たない要素Aを取り出す
1
$("要素A:not([属性B])")
全てのフォーム要素を取り出す
1
$(":input")
その他の指定方法 対象
:text テキストボックス
:password パスワード入力ボックス
:radio ラジオボタン
:checkbox チェックボックス
:file ファイル選択ボックス
:submit 送信ボタン
:image 画像ボタン
:reset リセットボタン
:button 全てのボタン
:hidden 隠し要素
要素A内のフォーム要素が利用可能な状態である場合取り出す
1
$("要素A:has(:enabled)")
その他の指定方法 対象
:dsabled 利用不可の状態
:checked チェック状態
:selsected 選択状態
:hidden 非表示の状態
:visible 表示状態
:animated アニメーション中の状態
その他よく使う指定方法
jQeryを使用してイベントリスナで色々操作したい時などにthisを使って要素を指定しますが，その場合の指定方法について，よく使うパターンを挙げておきます
その要素そのものを取り出す
1
$(this);
要素の親要素Aを取り出す
1
$(this).parent("要素A");
要素の子要素(子孫)の要素Aを取り出す
1
$("要素A",this);
要素の子要素Aを取り出す
1
$(this).children("要素A");