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">全体