jQuery Selector
jQuery｜jQuery/Method｜jQuery/Sample
jQuery では、getElementsBy・・といったDOM関数を使わずに CSSセレクタと同様の記法で 文書内の要素を選択して操作することができます。以下様々なセレクタの書き方を紹介します。
CONTENTS
基本セレクタ
要素セレクタ（HTML要素名）
$('HTMLタグ名')
HTMLタグである ＜h1＞や＜p＞はそのままセレクタとなります。
IDセレクタ
$('＃ID名')
定義されたIDに適用
前提：ID名はページ内に１つ（重複してはいけない）
クラスセレクタ
$('.CLASS名')
定義されたクラスに適用
前提：CLASS名はページ内に複数
ユニバーサルセレクタ
$('＊')
すべての要素に適用
CSSの先頭で余白を０リセットする場合などに使用
複合セレクタ
$('セレクタ, セレクタ, セレクタ, ・・ ')
複数のセレクタにまとめて同一の定義を行う場合に使用
階層セレクタ
子セレクタ
$('親要素 > 子要素')
特定の親を持つ子要素をセレクト
$('div > span')
---------------------
<div>
<span>子要素</span> ← 選択される
<p><span>孫要素</span></p>
<span>子要素</span> ← 選択される
<span>子要素</span> ← 選択される
</div>
子孫セレクタ
$('親要素 子要素')
特定の親を持つ子・孫・・・の要素をセレクト
$('div span')
---------------------
<div>
<span>子要素</span> ← 選択される
<p><span>孫要素</span></p> ← 選択される
<p><a href="#"><span>ひ孫要素</span></a></p> ← 選択される
<span>子要素</span> ← 選択される
</div>
隣接セレクタ
$('指定要素 + 要素')
指定要素に後続隣接する要素にのみスタイルを適用
$('#B + p')
---------------------
<div>
<p id="A">要素</p>
<p id="B">要素</p>
<p id="C">要素</p> ← 選択される
<p id="D">要素</p>
</div>
兄弟セレクタ
$('指定要素 ~ 要素')
指定要素に後続する要素すべてにスタイルを適用
$('#B ~ p')
---------------------
<div>
<p id="A">要素</p>
<p id="B">要素</p> ← 選択される
<p id="C">要素</p> ← 選択される
<span id="D">要素</span>
<p id="E">要素</p> ← 選択される
</div>
属性セレクタ
属性名 指定
$('セレクタ [ 属性名 ]')
属性を持つ要素にスタイルを適用
$('a[title]')
---------------------
＜a href="#" title="abc"＞abc＜/a＞ ← 選択される
＜a href="#" title="def"＞def＜/a＞ ← 選択される
属性名＝属性値 指定
$('セレクタ [ 属性名 = 属性値 ]')
属性が特定の値を持つ要素にのみスタイルを適用
$('a[title="abc"]')
---------------------
＜a href="#" title="abc"＞abc＜/a＞ ← 選択される
＜a href="#" title="def"＞def＜/a＞
フィルタ
最初の要素、N番目の要素・・など CSSセレクタでは擬似要素・擬似クラスにあたるものをフォルタといいます。
first フィルタ
$('セレクタ : first')
最初に現れる要素を選択します。
eq フィルタ
$('sセレクタ : eq(n)')
n番目の要素を選択します。
first-child 子要素フィルタ
$('セレクタ : first-child')
最初に現れる要素を選択します。
last-child 子要素フィルタ
$('セレクタ : last-child')
最後に現れる要素を選択します。
visible 可視性フィルタ
$('セレクタ : visible')
表示された要素を選択します。
hidden 可視性フィルタ
$('セレクタ : hidden')
表示された要素を選択します。
has( ) フィルタ
$('セレクタ : has( セレクタ ) ')
指定した子要素を持つ要素を選択します。
empty フィルタ
$('セレクタ : empty ')
子要素を持たない要素を選択します。