jQueryのセレクタをまとめてみました
こんにちは、まちいろの井上です。
jQuery で何かしたいときに、これってどうやって書くんだったかなと調べたりすることってありませんか？
よく使うものを度忘れしてしまったり、使用頻度が低いものであったり、知っているけどどのように使うんだろう、などあるかと思います。
そこで今回は備忘録もかねて、jQueryの代表的なセレクタについてまとめてみました。
基本セレクタ
- 要素セレクタ $(‘要素名’)
htmlの要素名を設定することで、指定した要素をすべて選択します。
$('div') // 全てのdivタグが対象
- IDセレクタ $(‘#id名’)
#の後にid名を付けると、指定したid属性を持つ要素を選択します。
$('#formId') // id名が「formId」の要素が対象
- クラスセレクタ $(‘.クラス名’)
.の後にクラス名を付けると、指定したクラス名を持つ要素を選択します。
$('.testClass') // クラス名が「testClass」の要素が対象
階層指定
- 子孫セレクタ $(‘要素 子孫要素’)
要素の配下にある全ての子孫要素を選択します。
$('form button') // formタグ配下にある全てのbuttonタグが対象
- 子セレクタ $(‘親要素 > 子要素’)
親要素の直下にある全ての子要素を選択します。
$('.testClass button') // testClassクラス直下にある全てのbuttonタグが対象
- 隣接セレクタ $(‘直前の要素 + 隣接する要素’)
直前の要素の直後にある隣接する要素を選択します。
$('div + input') // divタグの直後にあるinputタグが対象
この場合、divタグの直後にinputタグがない場合は選択されませんので注意してください。
属性フィルタ
- $(‘[属性名]’)
属性名をもつ要素を選択します。
$('input[class]')// class属性を持つすべてのinputタグが対象
- $(‘[属性名 = 値]’)
属性名が値と一致する要素を選択します。
$('input[class=test]') // class属性の値が「test」のinputタグが対象
$(‘[属性名 != 値]’)
属性名が値と異なる要素を選択します。
$('input[class!=test]') // class属性が「test」以外のinputタグが対象
- $(‘[属性名 ^= 値]’)
属性名が値で始まる要素を選択します。
$('input[name^=sample_]') // name属性が「sample_」で始まるinputタグが対象
- $(‘[属性名 $= 値]’)
属性名が値で終わる要素を選択します。
$('input[name$=_test]') // name属性が「_test」で終わるinputタグが対象
- $(‘[属性名 *= 値]’)
属性名が値を含む要素を選択します。
$('input[name*=_t]') // name属性に「_t」が含まれるinputタグが対象
フォームフィルタ
- $(‘:checked’)
チェックボックスや、ラジオボタンで選択されている要素を選択します。
$('[name="radio"]:checked') // name属性が「radio」でチェックが選択されている要素が対象
$(‘:selected’)
select要素で選択されている要素を選択します。
$('select[name="selectTest"] > option:selected') // name属性が「selectTest」のプルダウンで、選択されている要素が対象
可視性フィルタ
- $(‘要素名:visible’)
表示状態の要素を選択します。
$('input:visible') // 表示状態のinputタグが対象
- $(‘要素名:hidden’)
非表示状態の要素を選択します。
$('div:hidden') // 非表示状態のdivタグが対象
子要素フィルタ
- $(‘セレクタ:first-child’)
親要素内にある最初の子要素を選択します。
指定したセレクタが最初の子要素でない場合は選択されません。
$('h2:first-child') // 親要素内にある最初の子要素がh2タグの場合に選択される
- $(‘セレクタ:last-child’)
親要素内にある最後の子要素を選択します。
指定したセレクタが最後の子要素でない場合は選択されません。
$('p:last-child') // 親要素内にある最後の子要素がpタグの場合に選択される
- $(‘セレクタ:only-child’)
親要素内に1つだけ子要素を持つ場合に、指定された要素を選択します。
$('p:only-child') // 親要素内に一つだけ子要素を持ち、その子要素がpタグの場合に選択される
- $(‘セレクタ:nth-child(引数)’)
親要素内にあるセレクタで、引数に指定した要素を選択します。
引数にはodd（奇数番目）、even（偶数番目）、数値n（数値の倍数番目の子要素）を指定することができます。
$('p:nth-child(odd)') // 親要素内で偶数番目の要素がpタグの場合に選択される
$('p:nth-child(3)') // 親要素内で3番目の要素がpタグの場合に選択される
$('p:nth-child(3n)') // 親要素内で3の倍数の要素がpタグの場合に選択される
最後に
今回は代表的なセレクタを紹介しましたが、他にも色々なセレクタがあります。
ここでは紹介できなかった他のセレクタについては、jQuery の API ドキュメントのSelectorsを参照いただければと思います。
