jQuery のセレクタ

名称書式指定対象

jQueryで利用されるセレクタ

要素セレクタ$("要素名")特定のHTML要素　　　　　　　例: $("div")

IDセレクタ$("#ID名")特定のid属性を持つ要素　　　　例: $("#test")

クラスセレクタ$('.クラス名')特定のclass属性を持つ要素　　　例: $(".test")

子孫セレクタ$("要素名1 要素名2")特定の要素の内側にある要素　　例: $("div p")

ユニバーサルセレクタ$("*")すべての要素

グループセレクタ$(セレクタ1,セレクタ2,…)カンマ区切りで複数セレクタ指定　例: $("#p1,#p2,#p3")

階層関連等のセレクタ

子セレクタ$("親要素名 > 子要素名")特定の要素の直下の子要素　　　例: $("div > p")

thisの子孫セレクタ$("子要素名",this)this要素の子孫要素　　　　　　例: $("span",this)

thisの親セレクタ$(this).parent()this要素の親要素　　　　　　　参考

隣接セレクタ$(要素1 + 要素2)特定の要素の次の要素　　　　　例: $("div + p")

間接セレクタ$(要素1 ~ 要素2)特定の要素の後に出現する要素　　　　　例: $("div ~ p")

thisの隣接セレクタ$(this).next(“子要素名”) などthisのすぐ次の要素など　　　　例: $(this).next(“li”)、$(this).prev(“li”)

first-child擬似クラス$(要素:first-child)同一の親要素内の最初の要素　　例: $("div:first-child")

フィルタによるセレクタ

否定擬似クラス$(要素1:not(要素2))特定の要素内で指定した要素以外の要素

empty擬似クラス$(要素:empty")"子要素やテキストを含まない要素

nth-child擬似クラス$(要素:nth-child(番号))特定の要素内の指定した番号の要素

last-child擬似クラス$(要素:last-child)特定の要素内の最後の要素

only-child擬似クラス$(要素:only-child)指定した要素が1つだけ含まれる特定の要素

CSSの属性セレクタ

[attribute]$([属性名])特定の属性を持つ要素　　　　　　　　　例: $("[class]")

[attribute='value']$([属性名='値'])特定の属性が指定した値を持つ要素　　　例: $("[name='test']")

[attribute!='value']$(要素名[属性名!='値'])特定の属性が指定した値を持たない要素

[attribute^='value']$([属性名^='値'])特定の属性が特定した値で始まっている要素

[attribute$='value']$([属性名$='値'])特定の属性が特定した値で終わっている要素

[attribute*='value']$([属性名*='値'])特定の属性が特定した値を含んでいる要素

[attributeFilter1][attributeFilter2]$([属性セレクタ1][属性セレクタ2]) 複数の属性セレクタに該当する要素

jQueryの独自フィルタ

firstフィルタ$(要素:first)同一の親要素内の最初の要素

lastフィルタ$(要素:last)指定した要素の最後の要素

evenフィルタ$(要素:even)指定した要素の偶数番目の要素

oddフィルタ$(要素:odd)指定した要素の奇数番目の要素

eqフィルタ$(要素:eq(番号))指定した番号の要素

gtフィルタ$(要素:gt(番号))指定した番号より後の要素

ltフィルタ$(要素:lt(番号))指定した番号より前の要素

headerフィルタ$(要素:header)h1～h6までのheader要素

containsフィルタ$(要素:contains(文字列))特定の文字列が含まれている要素

hasフィルタ$(要素1:has(要素2))特定の要素が含まれている要素

parentフィルタ$(要素:parent)子要素やテキストを含む要素

フォームフィルタ

:inputフィルタ$(要素:input)input要素/textarea要素/select要素/button要素

:textフィルタ$(要素:text)1行テキスト入力フォーム（type属性がtextのinput要素）

:passwordフィルタ$(要素:password)パスワード入力フォーム（type属性がpassowordのinput要素）

:radioフィルタ$(要素:radio)ラジオボタン（type属性がradioのinput要素）

:checkboxフィルタ$(要素:checkbox)チェックボックス（type属性がcheckboxのinput要素）

:submitフィルタ$(要素:submit)送信ボタン（type属性がsubmit/imagesのinput要素）

:imageフィルタ$(要素:image)イメージボタン（type属性がimageのinput要素）

:resetフィルタ$(要素:reset)リセットボタン（type属性がresetのinput要素）

:buttonフィルタ$(要素:button)ボタン（button要素）

:fileフィルタ$(要素:file)ファイル選択フォーム（type属性がfileのinput要素）

:checkedフィルタ$(要素:checked)ラジオボタン、チェックボックスでチェックが入っている要素

:selectedフィルタ$(要素:selected)セレクトボックスで選択されている要素

jQueryオブジェクト操作　親、子、隣接要素

each(callback)$(要素).each(callback)合致した全てのエレメントに対して関数を実行。

　　【each(callback)の例】対象全エレメントに対して関数を実行。　参考

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
  <ul class="list">
      <li>list no. 0</li>
      <li>list no. 1</li>
      <li>list no. 2</li>
      <li>list no. 3</li>
      <li>list no. 4</li>
  </ul>
  <ol>
    <li>リスト 1</li>
    <li>リスト 2</li>
    <li>リスト 3</li>
  </ol>
    <button>CLICK</button>
    <span style="background:#ddd; padding:2px 8px;">reset</span>
    <script>
      $(function () {
        $("button").click(function(){
          $(".list li").each( function(index, elem){
            $(elem).text(index+"番目の要素");
          });
          $("ol li:even").css("color","red");
        })
        $("span").click(function(){
          $(".list li").each( function(index, elem){
            $(elem).text("list no. " + index);
          });
          $("ol li:even").css("color","#000");
        }) 
      });
    </script>
</body>
</html>

　　　【デモ表示】

親要素$(this).parent() すぐ上の親要素を指定

先祖要素$(this).parent("要素") 先祖要素を指定。例: $(this).parent(“ul”)

子要素$(this).children("要素") 要素を指定（孫要素以下は指定できない）

子孫要素$(this).find("要素")孫要素以下も指定可能。$("要素",this)も可

隣接要素(後)$(this).nextAll("要素")次続全要素を指定。すぐ次は、$(this).next("要素")、又は $("+要素",this)

隣接要素(前)$(this).prevAll("要素")前にある全要素を指定。すぐ前は、$(this).prev("要素")