jQuery Selector
jQuery|jQuery/Method|jQuery/Sample
jQuery では、getElementsBy・・といったDOM関数を使わずに CSSセレクタと同様の記法で 文書内の要素を選択して操作することができます。以下様々なセレクタの書き方を紹介します。
CONTENTS
基本セレクタ
要素セレクタ(HTML要素名)
$('HTMLタグ名')
HTMLタグである <h1>や<p>はそのままセレクタとなります。
IDセレクタ
$('#ID名')
定義されたIDに適用
前提:ID名はページ内に1つ(重複してはいけない)
クラスセレクタ
$('.CLASS名')
定義されたクラスに適用
前提:CLASS名はページ内に複数
ユニバーサルセレクタ
$('*')
すべての要素に適用
CSSの先頭で余白を0リセットする場合などに使用
複合セレクタ
$('セレクタ, セレクタ, セレクタ, ・・ ')
複数のセレクタにまとめて同一の定義を行う場合に使用
階層セレクタ
子セレクタ
$('親要素 > 子要素')
特定の親を持つ子要素をセレクト
$('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 ')
子要素を持たない要素を選択します。