jqueryセレクターの取得方法まとめです。

事前準備

以下のhtmlを使用して説明します

HTMLファイル

  <body>
    <div class="block sec1">
      <h1>見出し（h1タグ）</h1>
      <p>中身１（pタグ）</p>
      <p>中身２（pタグ）</p>
      <p>中身３（pタグ）</p>
    </div>
    <div class="block sec2">
      <p>中身4(pタグ)</p>
      <p>中身5(pタグ)</p>
      <p>中身6(pタグ)</p>
      <div>補足(divタグ)</div>
    </div>
    <div class="block sec3">
      <p>中身7（pタグ）</p>
      <p>中身8（pタグ）</p>
      <p>中身9（pタグ）</p>
    </div>
  </body>

実行結果

※１部CSSで色付けしています

番号を指定して取得する

０が数える基準となります。0＝１番目、１＝２番目・・・・

eq(equal)　等しい

$("p:eq(2)");
p要素の３番目を取得
「中身３」

gt(greater than)　より大きい

$("p:gt(2)");
p要素の３番目より大きい要素を全て取得
「中身３」から「中身９」

lt(less than)　より小さい

$("p:lt(2)");
p要素の３番目より小さい要素を全て取得
「中身１」「中身２」

even　偶数

$("p:even");
p要素の偶数番号を取得
「中身１」「中身3」「中身5」「中身7」「中身9」

odd　奇数

$("p:odd");
p要素の奇数番号を取得
「中身2」「中身4」「中身6」「中身8」

先頭を取得する(first)

first

$("p:first");　
p要素の最初の１つを取得
「中身１」

first-child

$("p:first-child");
親が同一で最初のp要素を厳密に全て取得
「中身４」と「中身７」

「中身１」は<div class="block sec1">の最初（０番目）が
divタグ(pタグではない)のため取得されない

first-of-type

$("p:first-of-type");
親が同一の最初のp要素を全て取得
「中身１」「中身４」「中身７」

最後を取得する(last)

last

$("p:last");
p要素の最後の１つを取得
「中身９」

last-child

$("p:last-child");
親が同一で最後のp要素を厳密に全て取得
「中身３」と「中身９」

「中身6」は<div class="block sec2">の最後が
divタグ(pタグではない)のため取得されない

last-of-type

$("p:last-of-type");
親が同一で最後のp要素を全て取得
「中身3」「中身6」「中身9」

n番目を取得する(nth)

nthはCSS由来のため１番目は(1)になります

nth-child()

$("p:nth-child(2)");
親が同一で２番目のp要素を厳密に全て取得
「中身１」「中身５」「中身８」

中身１が取れる理由は<div class="block sec1">では
最初のh1タグが１番目とカウントされるため

()内では偶数奇数判定や数式も使用可能です
even 偶数番目
odd 奇数番目
3n+1　３の倍数＋１

nth-of-type()

$("p:nth-of-type(2)");
親が同一で２番目のp要素を全て取得
「中身２」「中身5」「中身8」

nth-last-child()

$("p:nth-last-child(2)");
親が同一で最後から２番目のp要素を厳密に全て取得
「中身2」「中身6」「中身８」

中身６が取れる理由は<div class="block sec2">では
最後にdivタグ（補足）があるため１番目としてカウントされている

nth-of-type()

$("p:nth-of-type(2)");
親が同一で２番目のp要素を全て取得
「中身2」「中身5」「中身8」

後を取得する(+/~)

+

$(".sec1 + div");
クラス.sec1の直後のdivを取得
<div class="block sec2">全体

~

$(".sec1 ~ div");
クラス.sec1以降のdivを全て取得

<div class="block sec2">全体
<div class="block sec3">全体

子孫や子の取得

半角スペース開け

$("body div")
body内全てのdiv要素を取得する(子孫)

<div class="block sec1">全体
<div class="block sec2">全体
<div>補足(divタグ)
<div class="block sec3">全体

>

$("body > div")
body内直下全てのdiv要素を取得する（子）
<div class="block sec1">全体
<div class="block sec2">全体
<div class="block sec3">全体