21日 9月 2017

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名の要素１つが選択される。
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指定
$("要素１,要素２")
カンマ区切りで複数指定できる
 
<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

要素内の要素を指定する
$("要素１ 要素２")
スペース区切りで要素内の要素を指定できる
 
<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


要素内の要素を指定する②
$("要素１ > 要素２")
要素と要素の間に>を入れることで、要素直下の要素という指定ができる
 
<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


要素の次の要素を指定する
$("要素１ + 要素２")
要素と要素の間に+を入れることで、要素の次の要素という指定ができる
 
<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


要素より後に出現する要素で指定する
$("要素１ ~ 要素２")
要素と要素の間に~(チルダ)を入れることで、要素１より後の要素２という指定ができる
 
<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

親要素を起点とした最初の要素
$("要素１ > 要素２:first-child")
要素１を起点とした要素２の最初の要素
 
<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

親要素を起点とした最後の要素
$("要素１ > 要素２:last-child")
要素１を起点とした要素２の最後の要素
 
<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

要素１の子要素のうち指定番目の要素が要素２であるもの
$("要素１ 要素２:nth-child(指定番)")
要素は1番目からカウントされます。
要素１の子要素のうち指定個おきの要素が要素２であるもの
$("要素１ 要素２: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タグ


要素１の子要素のうち要素２であるものの指定番目
$("要素１ 要素２:nth-of-type(指定番)")
要素は1番目からカウントされます。
要素１の子要素のうち要素２であるものを指定個おき
$("要素１ 要素２: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タグ


要素１の子要素のうち要素２のみであるもの
$("要素１ 要素２: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

要素を含む要素
$("要素１:has(要素２)")
要素２を含む要素１ 
<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>

カテゴリ： yoshizawa, HTML, Javascript, jQuery, 2017/09

エクセレンス株式会社

〒604-8155 京都府京都市中京区占出山町311アニマート錦 2F

Tel: (075) 256-7872

Home: http://1excellence.com