HOME > - JavaScript >
- jQueryのセレクターの種類と使い方【初心者にもわかりやす...
jQueryのセレクターとは？
jQueryのセレクターとは、操作したいHTML要素の特定に使うものです。
基本的な考え方はCSSのセレクターと変わりません。
jQueryの場合は、セレクタ―で指定した要素に対して、メソッドを使ってスタイルを変更したり、値を取得したり、テキストを書き換えるなど様々な操作を行うことができます。
CSSのセレクターについてはこちら
CSSのセレクターとは？
CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。セレクタ―を使ってスタイルを指定することで、同じスタイルを使いまわしたり一部分にだけ違うスタイルを適用させることが可能になります...【もっと読む】
基本の記述の仕方
jQueryのセレクターは、「$("セレクター名")」というように記述します。CSSと同じく、HTMLタグやクラス名、IDなどがセレクターとして使うことができます。
例えばメソッドを使う場合や変数にする場合はそれぞれ以下のように記述します。
jQuery
//メソッドで操作する場合
$("div").css({
"background":"#f9f9f9",
});
//変数にする場合
var target = $("span");
jQueryのセレクターの種類と使い方
jQueryのセレクターには、HTMLのタグをはじめとして、クラス名やID、属性を使用することができます。要素の親子関係を利用してセレクターとして指定することも可能です。
また、jQueryを使うとHTMLを操作してクラスやIDの変更や削除、追加を行うことが可能ですが、その操作によって後から変更したクラスやIDもセレクターとして使用することができます。
タグを使う
「div」や「p」などのHTMLタグをセレクターとして使用します。
タグをセレクターに使用すると、同じタグの要素全てを一括で操作することができます。
HTML
<div>ダミーテキスト1</div> <div>ダミーテキスト2</div> <div>ダミーテキスト3</div> <div>ダミーテキスト4</div> <div>ダミーテキスト5</div>
jQuery
$("div").css({
"background":"#d40000",
});
プレビュー
クラスを使う
HTMLで要素に付与したクラス名をセレクターとして使用します。
クラスをセレクターに使用すると、同じクラス名を持つ要素をまとめて操作することができます。
CSSと同様に、クラス名の前に「.」（ドット）を付けて記述します。
HTML
<div>ダミーテキスト1</div> <div class="target">ダミーテキスト2</div> <div>ダミーテキスト3</div> <div class="target">ダミーテキスト4</div> <div>ダミーテキスト5</div>
jQuery
$(".target").css({
"background":"#d40000",
});
プレビュー
IDを使う
HTMLで要素に付与したIDをセレクターとして使用します。
IDをセレクターに使用すると、そのIDを持つ要素のみを操作することができます。
CSSと同様に、クラス名の前に「#」（シャープ）を付けて記述します。
HTML
<div>ダミーテキスト1</div> <div id="target_2" class="target">ダミーテキスト2</div> <div>ダミーテキスト3</div> <div class="target">ダミーテキスト4</div> <div>ダミーテキスト5</div>
jQuery
$("#target_2").css({
"background":"#d40000",
});
プレビュー
属性を使う
属性とは、aタグの「href="###"」の部分やinputタグの「type="text"」などの部分のことを指します。
セレクター全体を「"」で囲んでいる場合は属性の値は「'」で囲みます。（反対にセレクター全体を「'」で囲んでいるのであれば、属性の値は「""」で囲むようにしてください。）
前述したクラスやIDも属性のひとつなので、「div[class='target']」という書き方でも指定することができます。
属性セレクターは、前方一致や後方一致といった指定の方法が使えるということが特徴です。
前方一致を使う
ある属性の最初が特定の文字列と一致する要素を指定したい場合は、属性と文字列を「^=」で結びます。
次の例ではIDが「shi」で始まる要素を指定しているので、「shinjuku-ku」「shibuya-ku」のみが操作対象になります。
HTML
<div id="sample_zokusei1" class="sample_zokusei">
<div id="shinjuku-ku">新宿区</div>
<div id="shibuya-ku">渋谷区</div>
<div id="toshima-ku">豊島区</div>
<div id="yokomaha-shi">横浜市</div>
<div id="saitama-shi">さいたま市</div>
</div>
jQuery
$("#sample_zokusei1 div[id^='shi']").css({
"color":"#d40000",
});
プレビュー
後方一致を使う
ある属性の末尾が特定の文字列と一致する要素を指定したい場合は、属性と文字列を「$=」で結びます。
次の例ではIDが「shi」で終わる要素を指定しているので、「yokohama-shi」「saitama-shi」のみが操作対象になります。
HTML
<div id="sample_zokusei2" class="sample_zokusei">
<div id="shinjuku-ku">新宿区</div>
<div id="shibuya-ku">渋谷区</div>
<div id="toshima-ku">豊島区</div>
<div id="yokomaha-shi">横浜市</div>
<div id="saitama-shi">さいたま市</div>
</div>
jQuery
$("#sample_zokusei2 div[id$='shi']").css({
"color":"#d40000",
});
プレビュー
部分一致を使う
ある属性が特定の文字列を含んでいる要素を指定したい場合は、属性と文字列を「*=」で結びます。
次の例では、どの要素のIDにも「shi」という文字列が含まれているので、全てが対象になります。
HTML
<div id="sample_zokusei3" class="sample_zokusei">
<div id="shinjuku-ku">新宿区</div>
<div id="shibuya-ku">渋谷区</div>
<div id="toshima-ku">豊島区</div>
<div id="yokomaha-shi">横浜市</div>
<div id="saitama-shi">さいたま市</div>
</div>
jQuery
$("#sample_zokusei3 div[id*='shi']").css({
"color":"#d40000",
});
プレビュー
不一致を使う
ある属性に特定の値を持たない要素のみを指定したい場合は、属性と値を「!=」で結びます。
下の例では、IDが「toshima-ku」以外の要素が操作対象になります。
HTML
<div id="sample_zokusei4" class="sample_zokusei">
<div id="shinjuku-ku">新宿区</div>
<div id="shibuya-ku">渋谷区</div>
<div id="toshima-ku">豊島区</div>
<div id="yokomaha-shi">横浜市</div>
<div id="saitama-shi">さいたま市</div>
</div>
jQuery
$("#sample_zokusei4 div[id!='toshima-ku']").css({
"color":"#d40000",
});
プレビュー
要素の親子関係を使う
要素の親子関係をセレクターに使用するには、親要素のセレクターの後ろに半角スペースを空けて子要素のセレクターを記述します。
下の例では、sample_parent1の子要素のdivのみ操作しています。
HTML
<div id="sample_parent1" class="sample_parent">
<div class="sample_child">ダミーテキスト1</div>
<div class="sample_child">ダミーテキスト2</div>
</div>
<div class="sample_child">ダミーテキスト3</div>
<div class="sample_child">ダミーテキスト4</div>
<div class="sample_child">ダミーテキスト5</div>
jQuery
$("#sample_parent1 div").css({
"color":"#d40000",
});
プレビュー
直下の子要素のみを指定する
親子関係にある要素同士を「>」を使って結ぶと、親要素の直下にある子要素のみ指定することができます。
下の例では、ダミーテキスト1とダミーテキスト2は直下の子要素ではないため操作の対象になりません。
HTML
<div id="sample_parent2" class="sample_parent">
<div>
<div class="sample_child">ダミーテキスト1</div>
<div class="sample_child">ダミーテキスト2</div>
</div>
<div class="sample_child">ダミーテキスト3</div>
<div class="sample_child">ダミーテキスト4</div>
<div class="sample_child">ダミーテキスト5</div>
</div>
jQuery
$("#sample_parent2 > .sample_child").css({
"color":"#d40000",
});
プレビュー
直後の要素を指定する
「+」（プラス）を使うと直後に隣接した要素だけを指定することができます。
下の例では、「#sample_child2」の直後のdivであるダミーテキスト3のみを操作しています。
HTML
<div id="sample_parent3" class="sample_parent">
<div class="sample_child">ダミーテキスト1</div>
<div id="sample_child2" class="sample_child">ダミーテキスト2</div>
<div class="sample_child">ダミーテキスト3</div>
<div class="sample_child">ダミーテキスト4</div>
<div class="sample_child">ダミーテキスト5</div>
</div>
jQuery
$("#sample_child2 + div").css({
"color":"#d40000",
});
プレビュー
以降の要素を指定する
「~」を使うと以降に続く要素を指定することができます。
「+」との違いは隣接していないものも対象になるという点です。
下の例では、「#sample_child1」以降にある「.sample_child」クラスを持つ要素を指定しています。ダミーテキスト3にはクラスが無いので操作されませんが、それ以降でも該当するものは対象になっています。
HTML
<div id="sample_parent4" class="sample_parent">
<div id="sample_child1" class="sample_child">ダミーテキスト1</div>
<div class="sample_child">ダミーテキスト2</div>
<div>ダミーテキスト3</div>
<div class="sample_child">ダミーテキスト4</div>
<div class="sample_child">ダミーテキスト5</div>
</div>
jQuery
$("#sample_child1 ~ .sample_child").css({
"color":"#d40000",
});
プレビュー
複数の要素をセレクターにする
異なる複数の要素をまとめてセレクターとして指定したい場合は、「,」（カンマ）で区切って記述します。
HTML
<div id="target_A">ダミーテキストA</div> <div id="target_B">ダミーテキストB</div> <div id="target_C">ダミーテキストC</div> <div id="target_D">ダミーテキストD</div> <div id="target_E">ダミーテキストE</div>
jQuery
$("#target_A,#target_B").css({
"background":"#d40000",
});
プレビュー
入力状態をセレクターにする
フォームなどでユーザーの入力状態に応じて操作したい場合などに使用します。
セレクターの後ろに「:」（ダブルコロン）を付けて状態を指定します。
チェックされた状態
チェックボックスがチェックされた状態の要素を指定するときは、「:checked」を使います。
下の例では、チェックボックスに隣接するspanの色が変わるようにしています。
HTML
<div id="selector_checked" class="selector_pre">
<div id="checked_count">チェックの数は「<span>0</span>個」です。</div>
<input type="checkbox"><span>東京</span>
<input type="checkbox"><span>埼玉</span>
<input type="checkbox"><span>神奈川</span>
</div>
jQuery
$("input[type='checkbox']").on("change",function(){
var checkedCount = $("input[type='checkbox']:checked").length;
$("#checked_count span").text(checkedCount);
});
プレビュー
this
「this」はCSSにはないセレクターの指定の方法になります。
ユーザーのアクションに応じて操作する要素を特定することができます。
下の例では、thisをセレクターにすることでクリックした要素だけ操作しています。
HTML
<div class="sample_button">ボタン1</div> <div class="sample_button">ボタン2</div> <div class="sample_button">ボタン3</div>
jQuery
$(function(){
$(".sample_button").on("click",function(){
$(".sample_button").removeClass("active");//一旦全てのactiveを除去
$(this).addClass("active");//クリックされた要素にだけactiveを付与
});
});//end function
プレビュー
どれかをクリックしてください。jQueryでは疑似要素はセレクターに使用できない
疑似要素はCSSだけで作り出してスタイルを設定できる要素で、主にアイコンを表示するなど装飾目的で使用されます。「before」と「after」が代表的な疑似要素です。
疑似要素はサイトのデザインを作るうえで欠かせませんが、jQueryでは他のセレクターと同様に指定しても、直接操作することができません。
下の例では、ボタンクリックで疑似要素の表示非表示を切替ようとしていますがjQueryで疑似要素は操作できないので、何も起きません。
HTML
<div id="sample_giji1" class="sample_giji">クリックしてください</div>
CSS
.sample_giji::before{
content:"疑似要素";
display: inline-block;
background:#d40000;
color:#fff;
border-radius: 5px;
padding: 5px;
}
jQuery
$("#sample_giji1").on("click",function(){
$("#sample_giji1:before").css({
"display":"none",
});
});
プレビュー
jQueryで疑似要素を操作する方法
サイトのデザインを作る上で疑似要素は多用しますので、jQueryで操作したい状況も訪れます。
解決策として、元となる要素にクラスを追加したり削除することで疑似要素のスタイルを変更するという方法があります。
今回は「toggleClass」メソッドを使用して、「sample」クラスに対して新たに「hide」というクラスを付与します。
CSS側では、最初に作った「sample」の疑似要素の他に「hide」の疑似要素のスタイルとして「display:none」を指定しておきます。
toggleClassメソッドはクリックするたびにクラスの付け外しが行われるので、クラスが追加されたときは非表示、クラスが外されたときは元通り表示されるという挙動を実現できます。
HTML
<div id="sample_giji2" class="sample_giji">クリックしてください</div>
CSS
.sample_giji::before{
content:"疑似要素";
display: inline-block;
background:#d40000;
color:#fff;
border-radius: 5px;
padding: 5px;
}
/*疑似要素を操作*/
#sample_giji2.hidden:before{
display: none;
}
jQuery
$("#sample_giji2").on("click",function(){
$("#sample_giji2").toggleClass("hidden");
});
プレビュー
疑似要素を操作できる例疑似クラスhoverを操作する場合
疑似クラスのhoverもjQueryでは操作できませんが、同様の方法を使えばスタイルの変更を行うことができます。
なお、マウスホバーに関してはjQueryのmouseoverメソッドなどを使ってCSSを操作することが可能です。
まとめ
jQueryはユーザーのアクションに応じて処理を行うことがほとんどです。処理が分岐されたときに操作したい要素を特定するためには、適したセレクターの記述方法を使い分ける必要があります。
