初心者向け：jQueryセレクタ、一覧と良く使うセレクタ
初心者向けに、jQueryのセレクタ、一覧とセレクタ使い方のコツを記載していきます。
jQueryセレクタの使い方（指定方法）とひと言でいってみても、実は沢山のセレクタ指定方法がございます。こちらでは、「どうやって要素を指定すればいいの？」や「セレクタの複数指定ってどうやるの？」などの疑問が解決できることと思います。
沢山あるセレクタの指定方法は、すべて覚える必要はないことと思いますが、CSSのセレクタと使い方は、ほぼ同じになりますので、基本の良く使うセレクタを覚えておくと便利です。
という事で、それでは今回はッ、
- ・jQueryセレクタの基本の書き方
- ・jQueryセレクタ一覧
- ・CSSでもよく使うお馴染みセレクタ記載方法
上記について記載していこうと思います…。
jQueryセレクタの基本の書き方
以前もご紹介したように、jQueryではセレクタで要素を指定して、メソッドを使って何かをする、というのが基本的な流れになります。そして、このもっとも基本的な一行が、jQueryの基本構文になります。
上記、基本構文の前半部分、セレクタの部分について記載していきます。
まずは約束ごとで、これからサンプルで色々なセレクタを使って要素を指定していきますが、セレクタは、$(“セレクタ”)というように、$（ドルマーク）ではじまる「()」の中に記述します。基本的に「”」ダブルクォーテーションや「’」シングルクォーテーションで囲んで記述します。
この約束事を守って、サンプルを使いながら、セレクタを解説していきます。とはいうものの、このセレクタはCSSで馴染みがあるものばかりです。難しく考えずに、CSSのセレクタと同じようなものだと考えましょう。
jQueryセレクタ一覧
下記にセレクタ一覧を記載いたします。
| 基本セレクタ | ||
|---|---|---|
| 要素セレクタ | $(“p”) | 指定した要素を選択 |
| IDセレクタ | $(“#id”) | 指定したidを選択 |
| クラスセレクタ | $(“.class”) | 指定したクラスを選択 |
| ユニバーサルセレクタ | $(“*”) | すべての要素を選択 |
| グループセレクタ | $(セレクタ1, セレクタ2″) | 指定した複数のセレクタを選択 |
| 子孫セレクタ | $(“ul li”) | 先祖要素（ul）の内側の指定された子孫要素（li）を選択 |
| 子セレクタ | $(“li >em”) | 親要素（li）の直下の指定された子要素（em）を選択 |
| 隣接セレクタ | $(“h2 + h3”) | 指定した要素（h2）の次にある指定した要素（h3）を選択 |
| 間接セレクタ | (“li ~ li”) | 基準要素以降にある要素を指定するためのセレクタ |
| 疑似クラスセレクタ | ||
| first-child | $(“要素:first-child”) | 指定した要素がはじめの子要素の場合、その要素を選択 |
| first-of-type | $(“要素:first-of-type”) | 指定した要素のはじめの子要素を選択 |
| last-child | $(“要素:last-child”) | 指定した要素が最後の子要素の場合、その要素を選択 |
| last-of-type | $(“要素:last-of-type”) | 指定した要素の最後の子要素を選択 |
| nth-child | $(“要素:nth-child(n)”) | 指定した要素のn番目を選択 |
| nth-last-child | $(“要素:nth-last-child(n)”) | 指定した要素の最後から数えてn番目を選択 |
| nth-of-type | $(“要素:nth-of-type(n)”) | 指定した要素のn番目を選択 |
| nth-last-of-type | $(“要素:nth-last-of-type(n)”) | 指定した要素の最後から数えてn番目を選択 |
| only-child | $(“要素:only-child”) | 指定した要素がひとつしかない子要素の場合、その要素を選択 |
| only-of-type | $(“要素:only-of-type”) | 指定した要素がひとつしかない子要素のタイプの場合、その要素を選択 |
| 属性セレクタ | ||
| [attribute] | $(“[属性名]”) | 指定した属性名（attribute）の要素を選択 |
| [attribute=’value’] | $(“[属性名=’値’]”) | 指定した属性名（attribute）と値（value）の文字列が全く同じ場合に要素を選択 |
| [attribute!=’value’] | $(“[属性名!=’値’]”) | 指定した属性名（attribute）と値（value）の文字列が異なる場合に要素を選択 |
| [attribute*=’value’] | $(“[属性名*=’値’]”) | 指定した属性名（attribute）が値（value）の文字列を含んでいる要素を選択 |
| [attribute|=’value’] | $(“[属性名|=’値’]”) | 指定した属性名（attribute）が値（value）の文字列と同じ場合、もしくは値の文字列からはじまり後ろにハイフン（-）が続いてる場合に要素を選択 |
| [attribute$=’value’] | $(“[属性名$=’値’]”) | 指定した属性名（attribute）が値（value）の文字列と同じ場合、もしくは値の文字列と属性名の最後の部分が同じ場合に場合に要素を選択 |
| [attribute~=’value’] | $(“[属性名~=’値’]”) | 指定した属性名（attribute）が値（value）の文字列と同じ場合、もしくは値の文字列を半角スペースで区切られて含む場合に要素を選択 |
| [attribute^=’value’] | $(“[属性名^=’値’]”) | 指定した属性名（attribute）が値（value）の文字列からはじまる場合に要素を選択 |
| フォームセレクタ | ||
| :button | $(“要素:button”) | button要素を選択 |
| :checkbox | $(“要素:checkbox”) | type属性がcheckboxのinput要素を選択 |
| :checked | $(“要素:checked”) | チェックボックスやラジオボタンのチェックが入っている要素を選択 |
| :disabled | $(“要素:disabled”) | disabledな要素を選択 |
| :enabled | $(“要素:enabled”) | enabledな要素を選択 |
| :file | $(“要素:file”) | type属性がfileのinput要素を選択 |
| :image | $(“要素:image”) | type属性がimageのinput要素を選択 |
| :input | $(“要素:input”) | input、textarea、select、button要素を選択 |
| :password | $(“要素:password”) | type属性がpasswordのinput要素を選択 |
| :radio | $(“要素:radio”) | type属性がradioのinput要素を選択 |
| :reset | $(“要素:reset”) | type属性がresetのinput要素を選択 |
| :selected | $(“要素:selected”) | 選択されたセレクトボックスを選択 |
| :submit | $(“要素:submit”) | type属性がsubmitのbutton要素・input要素 |
| :text | $(“要素:text”) | type属性がtextのinput要素を選択 |
予想以上に多いことが見て取ることができると思います。すべて覚える必要はない事とおもいますが、使うことができると便利なセレクタもあるので、理解しておく必要はあることと思います。
CSSでもよく使うお馴染みセレクタ記載方法
それでは、よく使うセレクタだけサンプルと解説を記載してみます。
要素セレクタ
要素をそのまま指定する方法です。$(“p”)と記述すれば、HTML上のすべてのp要素が対象になります。$(“li”)と記述すれば、全てのli要素が対象となります。
IDセレクタ
id属性で指定するセレクタです。CSSでの記述と同じように、#（ハッシュ）の後にid名で指定します。
$(“#jquery”)と指定すれば、HTML上の「jquery」というidが付いた要素を指定することができます。
クラスセレクタ
クラスで指定するセレクタです。$(“.jquery”)というように、クラス名の前に「.」ピリオドをつけるのもCSSの記述と同じです。
子孫セレクタ
特定の要素の子孫にあたる要素を指定できるのが子孫セレクタになります。多少分かりにくいと思いますので下記にサンプルを記載します。この場合、p要素の中にあるem要素、つまりp要素の子孫にあたるem要素だけに絞って指定できます。
$(function() {
$(“p em”).css(“color”,”red”);
});
</script>
</head>
<body>
・・省略・・
<p>
初心者の方は、<em>jQuery</em>を勉強する前にHTML+CSSを学習することが不可欠です。
</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li><em>jQuery</em></li>
</ul>
・・省略・・
初心者の方は、jQueryを勉強する前にHTML+CSSを学習することが不可欠です。
- HTML
- CSS
- jQuery
HTML内には、ふたつのem要素がありますが、p要素内のem要素だけが赤くなります。
ユニバーサルセレクタ
*（アスタリスク）で指定するユニバーサルセレクタは、特定の要素ではなく、すべての要素を指定することができます。$(“li *”)と記述すると、要素をとわずli要素内のすべての子要素を指定することになります。
$(function() {
$(“li *”).css(“color”,”red”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li><span>HTML</span></li>
<li>CSS</li>
<li><em>jQuery</em></li>
</ul>
・・省略・・
- HTML
- CSS
- jQuery
li要素の中には、em要素やspan要素が記述されていますが、ユニバーサルセレクタを使えば、すべての要素を一度に指定することができます。
グループセレクタ
複数の要素を一度にまとめて指定できるのが、グループセレクタです。「,」カンマで区切って記述します。
$(function() {
$(“.first,.third”).css(“color”,”red”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li class=”first”>HTML</li>
<li class=”second”>CSS</li>
<li class=”third”>jQuery</li>
</ul>
・・省略・・
- HTML
- CSS
- jQuery
複数のセレクタに同じ処理を加えたい場合に、便利な指定方法になります。
チャイルドセレクタ
チャイルドセレクタは、名前の通り「子」にあたる要素だけを指定することができるセレクタです。子孫セレクタと混同しそうですが、あくまでも「子」にあたる要素だけで、孫以降は含まないという大きな違いがあります。
$(function() {
$(“li > em”).css(“color”,”red”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li><em>HTML</em></li>
<li><div><em>CSS</em></div></li>
<li><em>jQuery</em></li>
</ul>
・・省略・・
- HTML
- CSS
- jQuery
li要素の中には、3つのem要素が記述されていますが、li要素の子要素にあたるem要素だけを指定することができます。
隣接セレクタ
隣接セレクタは、指定した2つの要素が隣り合っているときだけ、指定した2つ目の要素（弟要素）を指定するセレクタです。要素同士を「+」プラスでつなぎます。
$(function() {
$(“ul + li”).css(“color”,”red”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li><em>HTML</em></li>
<li><em>CSS</em></li>
<li><em>jQuery</em></li>
</ul>
・・省略・・
- HTML
- CSS
- jQuery
間接セレクタ
間接セレクタは、同じ親要素を持つ要素（兄弟要素）で、指定した要素よりも後に登場する弟要素を指定できるセレクタです。要素を「~」チルダでつなぎます。少し分かりにくいことと思いますので、下記サンプルで確認してみてください。
$(function() {
$(“#second ~ li”).css(“color”,”red”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li id=”first”>HTML</li>
<li id=”second”>CSS</li>
<li id=”third”>jQuery</li>
</ul>
・・省略・・
- HTML
- CSS
- jQuery
サンプルでは、li要素はすべて同じul要素を親に持っています。つまりli要素同士は、すべて兄弟関係になっています。その中の指定した要素以降を指定できるのが間接セレクタです。サンプルでは、li要素を使ったので、隣同士になっていますが、隣接セレクタと違い、間に他の要素が入っている場合でも有効になります。
疑似クラスセレクタ
:first-child疑似クラスは、一番最初に登場する要素だけを指定できるセレクタです。逆に一番最後を指定できる:last-child疑似クラスといったものもあります。
$(function() {
$(“li:first-child”).css(“color”,”red”);
});
</script>
</head>
<body>
・・省略・・
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
・・省略・・
- HTML
- CSS
- jQuery
上記サンプルコードに今度は、:not疑似クラスを付けてみます。:not疑似クラスは、指定した条件以外を指定できるセレクタです。この:not疑似クラスセレクタはとても便利なセレクタで、jQueryのコードでは度々登場します。記述方法は:not()のカッコの中に条件を記述します。
$(function() {
$(“li:not(:first-child)”).css(“color”,”red”);
});
</script>
</head>
<body>
・・省略・・
- HTML
- CSS
- jQuery
という事で今回は、jQueryセレクタ一覧と良く使うセレクタをサンプルコードと共に記載いたしました。
CSSを記述するときは、古いIEのブラウザでは使えないセレクタも多数ありましたが、jQueryでは、クロスブラウザで構築されているため、CSS3などのセレクタも利用することができます。
今回上記で解説したセレクタの使い方以外も、セレクタ一覧同様まだまだございますが、とりあえず今回解説した使い方ができれば、実際の制作現場でも、何ら問題ないことと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
