【jquery】セレクターの基本的な使い方まとめ
2022.03.27
忘れがちな、jqueryのセレクターの使い方をまとめておきます。
目次
1. タグセレクター
HTMLのタグを指定する方法。
タグ名を渡してあげればよい。その際、<>は不要。
$( "h1" ).css( "color", "red" );2. クラスセレクター
class名を指定する方法。
クラス名の先頭に「.」を付ける。
$( ".class_name" ).css( "color", "red" );3. IDセレクター
ID名を指定する方法。
ID名の先頭に「#」を付ける。
$( "#id_name" ).css( "color", "red" );4. グループセレクター
複数のセレクターを「,」を使って同時に指定できる。
$( "h1, .class_name, #id_name" ).css( "color", "red" );5. ユニバーサルセレクター
全ての要素を選択することのできるセレクター。
$( "*" ).css( "color", "red" );6. 属性セレクター
要素の属性や属性値を指定するセレクター。
なお、要素の指定は、「タグ名」または「クラス名」を使用する。
$( "img[title]" );
$( ".class_name[title]" );正規表現に似た指定方法もある。
6-1. 属性名のみ
属性名のみを指定する。
例は、imgタグのうち「title」属性があるものが選択される。
$( "img[title]" );6-2. 属性名 = 値
属性名とその値を指定する。
例は、imgタグのうち「title」属性に「test」が設定されている要素が選択される。
$( "img[title='test']" );6-3. 属性名 != 値
指定した属性値と一致しない要素が選択される。
$( "img[title!='test']" );6-4. 属性名 *= 値
指定した値と属性値が部分一致した要素を選択。
$( "img[title*='test']" );
正規表現の、「/test/」（「/.*test.*/」）と同等。
以下すべてが選択される
<img src="hoge.png" title="test">
<img src="hoge.png" title="atest">
<img src="hoge.png" title="testb">
<img src="hoge.png" title="1test2">
<img src="hoge.png" title="1 test 2">6-5. 属性名 ~= 値
指定した値と単語ベースで属性値が一致した要素を選択。
$( "img[title~='test']" );以下、「1,5」が選択される
<img src="hoge.png" title="test">
<img src="hoge.png" title="atest">
<img src="hoge.png" title="testb">
<img src="hoge.png" title="1test2">
<img src="hoge.png" title="1 test 2">6-6. 属性名 ^= 値
指定した値と属性値が前方一致した要素を選択。
$( "img[title^='test']" );
正規表現の、「/^test/」と同等。
以下、「1,3」が選択される
<img src="hoge.png" title="test">
<img src="hoge.png" title="atest">
<img src="hoge.png" title="testb">
<img src="hoge.png" title="1test2">
<img src="hoge.png" title="1 test 2">6-7. 属性名 $= 値
指定した値と属性値が後方一致した要素を選択。
正規表現の、「/test$/」と同等。
$( "img[title$='test']" );以下、「1,2」が選択される
<img src="hoge.png" title="test">
<img src="hoge.png" title="atest">
<img src="hoge.png" title="testb">
<img src="hoge.png" title="1test2">
<img src="hoge.png" title="1 test 2">6-8. 複数の属性条件
複数の属性条件を指定できる。
$( "img[title^='test'][title$='test']" );