この記事ではjQuery を使って「様々なセレクタの指定方法」について学習していきます。セレクタの指定法は種類が多いですが、CSSでセレクタを指定する考え方と似ているので流れを覚えれば簡単です。
セレクタ指定の幅が広がると、jQueryとCSSを組み合わせてさまざまな実装ができるようになるので、がんばって学習していきましょう！
- jQueryを用いたセレクタの指定方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
jQueryを利用する準備
jQueryを使う準備としてbodyタグの直前にjQueryのCDN、そしてmain.jsをscriptタグで読み込みます。
<body>
<div class="class">
<p>クラスセレクタでpタグを指定します。</p>
<div>クラスセレクタでdivタグを指定します。</div>
</div>
<div id="id">
<p>idセレクタでpタグを指定します。</p>
<div>idセレクタでdivタグを指定します。</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>出力結果
クラスセレクタでpタグを指定します。
上記HTMLをCSSを使わずにjQueryでセレクタを指定して色を変更してみます。main.jsに以下の記述をします。
$('div').css('color', 'blue');出力結果
クラスセレクタでpタグを指定します。
divタグをjQueryで指定してCSSメソッドを用いて文字色を変更することができました。
「.css()」の部分はjQueryが持つCSSを制御するメソッドになります。
このように、
$('指定したいセレクタ').メソッド();を基本的な構文としてjQueryを記述します。
jQueryを用いたセレクタ指定方法9選
ここからはセレクタの指定方法について1つずつ解説していきます。
classセレクタを指定する方法
classセレクタは任意のclassを指定することができます。
今回は"class"というclass名を持った要素の文字色を変更します。
例えば以下のHTMLがあります。"class"というclass名をもったセレクタのグループと"id"というid属性の値を持ったグループのうち、classグループにだけ文字色を変更するスタイルを適用してみます。
$('.class').css({
'color': 'red'
});出力結果
クラスセレクタでpタグを指定します。
idセレクタでpタグを指定します。
クラス名"class"を指定して文字色を変更できました。クラス名に"class"が付与されていない要素にはスタイルは適用されません。
idセレクタを指定する方法
idセレクタは任意のidを指定することができます。
idセレクタを指定する場合は以下の記述になります。
$('#id').css({
'color': 'green'
});出力結果
クラスセレクタでpタグを指定します。
idセレクタでpタグを指定します。
$('')の中の指定方法は、CSSでidセレクタを指定する場合と同じ記述になります。
上記と同じ結果になるコードをCSSで記述すると以下になります。
#id {
color: green;
}CSSの指定方法をイメージするとjQueryでのセレクタ指定方法が理解しやすくなります。
グループセレクタを指定する方法
グループセレクタは複数の要素を指定することができます。複数のセレクタを「, (カンマ)」で区切りで指定します。
グループセレクタを指定する場合は以下の記述になります。
$('#id, p').css({
'color': 'green'
});出力結果
クラスセレクタでpタグを指定します。
idセレクタでpタグを指定します。
id属性が"id"の要素とpタグにスタイルが適用されました。
グループセレクタと記述方法は似ていますが、id属性が"id"の要素に含まれる全てのpタグに適用する場合は以下のように半角スペース区切りで記述します。
$('#id p').css({
'color': 'green'
});出力結果
クラスセレクタでpタグを指定します。
クラスセレクタでdivタグを指定します。
idセレクタでpタグを指定します。
子セレクタを指定する方法
子セレクタは任意の要素の子要素を指定することができます。
main.jsの記述は以下になります。
$(".class > p").css("color", 'red');出力結果
クラスセレクタでpタグを指定します。
クラスセレクタでdivタグを指定します。
idセレクタでpタグを指定します。
class名が"class"の子要素の中でもpタグだけを指定することができます。
ユニバーサルセレクタを指定する方法
ユニバーサルセレクタは全ての要素を指定することができます。
ユニバーサルセレクタとは全ての要素の意味で「＊（アスタリスク）」を記述します。
例えばmain.jsに以下のように記述すると、全ての要素にスタイルが適用されます。
$("*").css("color", 'red');出力結果
クラスセレクタでpタグを指定します。
クラスセレクタでdivタグを指定します。
idセレクタでpタグを指定します。
idセレクタでdivタグを指定します。
例えば「特定のクラスの直下の要素全て」に適用するなら以下のように記述できます。
$(".class > *").css("color", 'red');出力結果
クラスセレクタでpタグを指定します。
クラスセレクタでdivタグを指定します。
idセレクタでpタグを指定します。
idセレクタでdivタグを指定します。
なお「>」は「子セレクタ」の指定になります。
隣接セレクタを指定する方法
隣接セレクタは隣接する後ろの要素のみを指定することができます。
隣接セレクタでは「+」を用いて以下のように記述します。
<p class="p1">pタグ-1</p>
<p class="p2">pタグ-2</p>
<p class="p3">pタグ-3</p>$(".p2 + p").css("color","red");出力結果
pタグ-1
pタグ-2
pタグ-3
class名"p2"の要素と隣接し、"p2"の後ろに記述されている"p3"のみを指定することができます。
間接セレクタを指定する方法
間接セレクタは特定の要素以降にある任意の要素を指定することができます。
間接セレクタでは「~（チルダ）」を用いて以下のように記述します。
<p class="p1">pタグ-1</p>
<p class="p2">pタグ-2</p>
<p class="p3">pタグ-3</p>
<p class="p4">pタグ-4</p>
<div>divタグ</div>$(".p2 ~ p").css("color", 'red');出力結果
pタグ-1
pタグ-2
pタグ-3
pタグ-4
divタグ
class名"p2"の要素以降のpタグを指定することができます。
属性セレクタを指定する方法
属性セレクタは任意の属性が付与された要素を指定することができます。
「属性」とはaタグにつける「href」などが属性に当たります。「class」や「id」も属性に当たります。それらの属性がついているセレクタを属性セレクタといいます。
属性セレクタを指定するには以下のように記述します。
<a href="">属性セレクタでaタグを指定します。</a>
<a>href属性がついていないaタグです</a>$("a[href]").css("color", 'red');出力結果
aタグのhref属性がついているものに対してスタイルを適用することができました。href属性が付いていないaタグにはスタイルが適用されませんでした。
属性の値を指定する方法
属性の値を指定する方法は以下になります。
<div class="class">
<p class="text">クラスセレクタでpタグを指定します。</p>
<div class="text">クラスセレクタでdivタグを指定します。</div>
</div>
<div id="id">
<p class="text2">クラスセレクタでpタグを指定します。</p>
<div>クラスセレクタでdivタグを指定します。</div>
</div>$("p[class='text']").css("color", 'red');出力結果
クラスセレクタでpタグを指定します。
クラスセレクタでpタグを指定します。
pタグのclass属性値に「test」付いてる要素のみスタイルが適用されました。同じクラス名を使用しているのにspanタグやdivタグにスタイルが適用されなかったのは、jQueryで指定しているのが「class属性にtextを持っているpタグ」にだけ指定しているためです。
属性値を持たない要素を指定する：「!=」
属性セレクタを指定する際「=」の代わりに「!=」を記述すると属性値を持たない要素指定することができます。
<div class="class">
<p>クラスセレクタでpタグを指定します。</p>
</div>
<div id="test">
<p>idセレクタでpタグを指定します。</p>
</div>$("div[class!='class']").css('color', "red");出力結果
クラスセレクタでpタグを指定します。
idセレクタでpタグを指定します。
属性値が部分一致する要素を指定する：「*=」
属性セレクタを指定する際「=」の代わりに「*=」を記述すると属性値が部分一致する要素指定することができます。
<div class="class">
<p>クラスセレクタでpタグを指定します。</p>
<div>クラスセレクタでdivタグを指定します。</div>
</div>
<div class="class-test">
<p>クラスセレクタでpタグを指定します。</p>
<div>クラスセレクタでdivタグを指定します。</div>
</div>
<div class="test">
<p>クラスセレクタでpタグを指定します。</p>
<div>クラスセレクタでdivタグを指定します。</div>
</div>$("div[class*='test']").css('color', "red");出力結果
クラスセレクタでpタグを指定します。
クラスセレクタでpタグを指定します。
クラスセレクタでpタグを指定します。
部分一致の指定になるので、「test」がついたdivタグだけスタイルが適用されました。
属性値が後方一致する要素を指定をする：「$=」
属性セレクタを指定する際「=」の代わりに「$=」を記述すると属性値が後方一致する要素指定することができます。
<div class="testtest-class">
<p>クラスセレクタでpタグを指定します。</p>
<div>クラスセレクタでdivタグを指定します。</div>
</div>
<div class="test-class">
<p>クラスセレクタでpタグを指定します。</p>
<div>クラスセレクタでdivタグを指定します。</div>
</div>
<div class="class-test">
<p>クラスセレクタでpタグを指定します。</p>
<div>クラスセレクタでdivタグを指定します。</div>
</div>$("div[class$='class']").css('color', "red");出力結果
クラスセレクタでpタグを指定します。
クラスセレクタでpタグを指定します。
クラスセレクタでpタグを指定します。
- testtest-class :「class」が後ろに付いているので、属性セレクタの適用範囲
- test-class：「class」が後ろに付いているので、属性セレクタの適用範囲
- class-test：「class」が前に付いているので、属性セレクタの適用範囲外
まとめ
セレクタの指定方法が理解できれば、ハンバーガーメニューのようなJavaScriptやjQueryを使って様々な動きを制御できるようになります。 もちろんメソッドの使い方を理解することも重要ですが、どの要素・セレクタに対してメソッドを指定するのかも大事です。
CSSでスタイルを適用するときのセレクタ指定方法をイメージすれば、jQueryで指定する方法もイメージしやすくなります。もし迷ったらCSSだったらどうやって適用するのか考えてみましょう！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
