JQueryのセレクタまとめ

jQueryを使って特定の要素を指定する際にセレクタを使いますが,指定方法を間違ったりすると,余計な要素まで取得してしまったり,要素そのものを間違えてしまったりします.
セレクタで要素を指定するパターンをまとめてみました。

セレクタって?

セレクタjQueryを記述する際の$()の中のことを指します.

$("#contents").css(...

のように記述し,操作したい要素を指定するために使用します.

要素の指定方法あれこれ

全ての要素を指定する
$("*")
<ol class="class1" id="id1">
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
        <li>Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
        <li>Sample4</li>
</ol>
<script>
$("*").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

基本:要素名で指定する
$("要素名")
指定した要素のものが全て選択される
<ol class="class1" id="id1">
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
        <li>Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
        <li>Sample4</li>
</ol>
<script>
$("ol").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

IDで指定する
$("#ID名")
指定したID名の要素1つが選択される。
IDはユニークな要素なので複数選択されることはない。
<ol class="class1" id="id1">
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
        <li>Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
        <li>Sample4</li>
</ol>
<script>
$("#id1").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

CLASSで指定する
$(".CLASS名")
指定したCLASS名の要素が全て選択される
<ol class="class1" id="id1">
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
        <li>Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
        <li>Sample4</li>
</ol>
<script>
$(".class1").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

OR指定
$("要素1,要素2")
カンマ区切りで複数指定できる
<ol class="class1" id="id1">
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
        <li>Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li>Sample1</li>
        <li>Sample2</li>
        <li>Sample3</li>
        <li>Sample4</li>
</ol>
<script>
$("#id1,#id2").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

要素内の要素を指定する
$("要素1 要素2")
スペース区切りで要素内の要素を指定できる
<div id="div1" class="classA">
DIV1
        <div id="div2" class="classA">
        DIV2
                <div id="div3" class="classA">
                DIV3
                </div>
        </div>
        <div id="div4" class="classA">
        DIV4
                <div id="div5" class="classA">
                DIV5
                </div>
        </div>
</div>
<script>
$("#div2 .classA").css("color","red");
</script>

DIV1

DIV2

DIV3

DIV4

DIV5


要素内の要素を指定する②
$("要素1 > 要素2")
要素と要素の間に>を入れることで、要素直下の要素という指定ができる
<div id="div1" class="classA">
DIV1
        <div id="div2" class="classA">
        DIV2
                <div id="div3" class="classA">
                DIV3
                </div>
        </div>
        <div id="div4" class="classA">
        DIV4
                <div id="div5" class="classA">
                DIV5
                </div>
        </div>
</div>
<script>
$("#div2 > .classA").css("color","red");
</script>

DIV1

DIV2

DIV3

DIV4

DIV5


要素の次の要素を指定する
$("要素1 + 要素2")
要素と要素の間に+を入れることで、要素の次の要素という指定ができる
<div id="div1" class="classA">
DIV1
        <div id="div2" class="classA">
        DIV2
                <div id="div3" class="classA">
                DIV3
                </div>
        </div>
        <div id="div4" class="classA">
        DIV4
                <div id="div5" class="classA">
                DIV5
                </div>
        </div>
</div>
<script>
$("#div2 + .classA").css("color","red");
</script>

DIV1

DIV2

DIV3

DIV4

DIV5


要素より後に出現する要素で指定する
$("要素1 ~ 要素2")
要素と要素の間に~(チルダ)を入れることで、要素1より後の要素2という指定ができる
<div id="div1" class="classA">
DIV1
        <div id="div2" class="classA">
        DIV2
                <div id="div3" class="classA">
                DIV3
                </div>
        </div>
        <div id="div4" class="classA">
        DIV4
                <div id="div5" class="classA">
                DIV5
                </div>
        </div>
</div>
<script>
$("#div2 ~ .classA").css("color","red");
</script>

DIV1

DIV2

DIV3

DIV4

DIV5


フィルター指定方法あれこれ

要素全体の最初の要素
$("要素:first")
要素全体のうち、最初の要素を指定
<ol class="class1" id="id1">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<script>
$(".class1 > .classA:first").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

要素全体の最後の要素
$("要素:last")
要素全体のうち、最後の要素を指定
<ol class="class1" id="id1">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<script>
$(".class1 > .classA:last").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

親要素を起点とした最初の要素
$("要素1 > 要素2:first-child")
要素1を起点とした要素2の最初の要素
<ol class="class1" id="id1">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<script>
$(".class1 > .classA:first-child").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

親要素を起点とした最後の要素
$("要素1 > 要素2:last-child")
要素1を起点とした要素2の最後の要素
<ol class="class1" id="id1">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<script>
$(".class1 > .classA:last-child").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

偶数番の要素
$("要素:even")
要素は0番目からカウントされます。
<ol class="class1" id="id1">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<script>
$(".classA:even").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

奇数番の要素
$("要素:odd")
要素は0番目からカウントされます。
<ol class="class1" id="id1">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<script>
$(".classA:odd").css("color","red");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

指定番目の要素
$("要素:eq(指定番)")
$("要素:lt(指定番)")
$("要素:gt(指定番)")
要素は0番目からカウントされます。
eqは指定番目
ltは指定番目より前
gtは指定番目より後
<ol class="class1" id="id1">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<ol class="class1" id="id2">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<script>
$(".classA:eq(3)").css("color","red");
$(".classA:lt(2)").css("color","orange");
$(".classA:gt(5)").css("color","blue");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

要素1の子要素のうち指定番目の要素が要素2であるもの
$("要素1 要素2:nth-child(指定番)")
要素は1番目からカウントされます。
要素1の子要素のうち指定個おきの要素が要素2であるもの
$("要素1 要素2:nth-child(an+b)")
a(指定個)で割ってb余る要素という意味
<div>
          <p>1つ目のpタグ</p>
          <p>2つ目のpタグ</p>
          <p>3つ目のpタグ</p>
          <h6>間にh6タグ</h6>
          <p>4つ目のpタグ</p>
          <p>5つ目のpタグ</p>
          <p>6つ目のpタグ</p>
</div>
<script>
$("div p:nth-child(5)").css("color","blue");
$("div p:nth-child(3n+1)").css("color","red");
</script>

 

 

1つ目のpタグ

2つ目のpタグ

3つ目のpタグ
間にh6タグ

4つ目のpタグ

5つ目のpタグ

6つ目のpタグ


要素1の子要素のうち要素2であるものの指定番目
$("要素1 要素2:nth-of-type(指定番)")
要素は1番目からカウントされます。
要素1の子要素のうち要素2であるものを指定個おき
$("要素1 要素2:nth-of-type(an+b)")
要素をa(指定個)で割ってb余る要素という意味
<div>
          <p>1つ目のpタグ</p>
          <p>2つ目のpタグ</p>
          <p>3つ目のpタグ</p>
          <h6>間にh6タグ</h6>
          <p>4つ目のpタグ</p>
          <p>5つ目のpタグ</p>
          <p>6つ目のpタグ</p>
</div>
<script>
$("div p:nth-of-type(5)").css("color","blue");
$("div p:nth-of-type(3n+1)").css("color","red");
</script>

 

 

1つ目のpタグ

2つ目のpタグ

3つ目のpタグ
間にh6タグ

4つ目のpタグ

5つ目のpタグ

6つ目のpタグ


要素1の子要素のうち要素2のみであるもの
$("要素1 要素2:only-child")
<div>
          <p>1つ目のpタグ</p>
          <p>2つ目のpタグ</p>
          <p>3つ目のpタグ</p>
          <h6>間にh6タグ</h6>
          <p>4つ目のpタグ</p>
          <p>5つ目のpタグ</p>
          <p>6つ目のpタグ</p>
</div>
<div>
          <p>1つ目のpタグ</p>
</div>
<script>
$("div p:only-child").css("color","red");
</script>

 

 

1つ目のpタグ

2つ目のpタグ

3つ目のpタグ
間にh6タグ

4つ目のpタグ

5つ目のpタグ

6つ目のpタグ

 

1つ目のpタグ


特定の文字列を含む要素
$("要素:contains('文字列')")
大文字と小文字は区別されます。
<ol class="class1" id="id1">
        <li class="classA">Sample1</li>
        <li class="classA">Sample2</li>
        <li class="classA">Sample3</li>
        <li class="classA">Sample4</li>
</ol>
<script>
$(".classA:contains('3')").css("color","red");
$(".classA:contains('sample1')").css("color","blue");
$(".classA:contains('Sample2')").css("color","blue");
</script>
  1. Sample1
  2. Sample2
  3. Sample3
  4. Sample4

下位要素を持つ要素
$("要素:parent")
下位要素を持たない要素
$("要素:empty")
<table border="1">
<tr><td></td></tr>
<tr><td>A</td></tr>
</table>
<script>
$("td:parent").css("background-color","yellow");
$("td:empty").css("background-color","blue");
</script>
A

要素を含む要素
$("要素1:has(要素2)")
要素2を含む要素1
<div id="div1">
DIV1
        <div id="div2" id="classA">
        DIV2
                <div id="div3" id="classA">
                DIV3
                </div>
        </div>
        <div id="div4" id="classA">
        DIV4
                <div id="div5" id="classA">
                DIV5
                </div>
        </div>
</div>
<script>
$(".classA:has(#div3)").css("color","red");
</script>

DIV1

DIV2

DIV3

DIV4

DIV5


特定の属性を持つ要素
$("要素[属性]")
<input type="text" name="nameA" value="A">
<input type="text" name="nameB" value="B">
<input type="text" name="nameC" value="C">
<input type="text" value="D">
<script>
$("input[name]").css("color","red");
</script>

特定の属性を持たない要素
$("要素:not([属性])")
<input type="text" name="nameA" value="A">
<input type="text" name="nameB" value="B">
<input type="text" name="nameC" value="C">
<input type="text" value="D">
<script>
$("input:not([name])").css("color","red");
</script>

属性の値が一致する要素
$("要素[属性='値']")
<input type="text" name="nameA" value="A">
<input type="text" name="nameB" value="B">
<input type="text" name="nameC" value="C">
<input type="text" value="D">
<script>
$("input[name='nameB']").css("color","red");
</script>

属性の値が一致しない要素
$("要素[属性!='値']")
 
<input type="text" name="nameA" value="A">
<input type="text" name="nameB" value="B">
<input type="text" name="nameC" value="C">
<input type="text" value="D">
<script>
$("input[name!='nameB']").css("color","red");
</script>

属性の値が前方一致する要素
$("要素[属性^='値']")
 
<input type="text" name="nameA" value="A">
<input type="text" name="nameB" value="B">
<input type="text" name="nameC" value="C">
<input type="text" value="D">
<script>
$("input[name^='na']").css("color","red");
</script>

属性の値が後方一致する要素
$("要素[属性$='値']")
 
<input type="text" name="nameA" value="A">
<input type="text" name="nameB" value="B">
<input type="text" name="nameC" value="C">
<input type="text" value="D">
<script>
$("input[name$='B']").css("color","red");
</script>

属性の値が部分一致する要素
$("要素[属性*='値']")
<input type="text" name="nameA" value="A">
<input type="text" name="nameB" value="B">
<input type="text" name="nameC" value="C">
<input type="text" value="D">
<script>
$("input[name*='m']").css("color","red");
</script>

フォームの指定方法あれこれ

見出しの要素全て
$(":header")
 

全てのフォーム要素
$(":input")
 

指定方法 対象
:text

テキストボックス

:password

パスワード入力ボックス

:select

セレクトボックス

:radio

ラジヲボタン

:checkbox

チェックボックス

:file

ファイル選択ボックス

:submit

送信ボタン

:image

画像ボタン

:reset

リセットボタン

:button 全てのボタン
:hidden 隠し要素
フォーム要素の状態を指定する
$("要素:has(状態)")
 

指定方法 対象
:enabled 有効である
:dsabled

無効である

:checked

チェック状態である

:selsected

選択状態である

:hidden

非表示状態である

:visible 表示状態である
:animated

アニメーション状態である

イベントリスナでの指定方法あれこれ

要素そのもの
$(this)
 

子要素を指定
$(this).children("要素");
 

親要素を指定
$(this).parent("要素");
 

カスタムイベントリスナを作ってしまえ

指定の値より大きい値の時にマッチするカスタムイベントリスナ
$("要素:gtval(指定値)")

このようなイベントリスナは存在しませんが、JQueryでは、以下のコードを加えることで、自由に作ることができます。
$.extend($.expr[':'], {
    リスナ: function (e,index,meta)
    {
       return [true/false]
    }
});
<input type="text" name="nameA" value="0">
<input type="text" name="nameB" value="1">
<input type="text" name="nameC" value="2">
<input type="text" value="D">
<script>
$.extend($.expr[':'], {
    gtval: function (e,index,meta)
    {
       var num = meta[3].match(/\d/g).join("");
       if(isNaN($(e).val())) return false;
       if($(e).val() > num) return true;
       return false;
    }
});
$("input:gtval(1)").css("color","red");
</script>