こんにちは、ライターのマサトです。今回は、jQueryの操作で最も重要となるセレクタ全般について、さまざまな活用法を学習していきましょう！
この記事では、
- セレクタとは？
- タグの操作
- 子要素の操作
- 属性を活用したセレクタ指定について
- セレクタにand, or, notを使ってみよう
- セレクタを正規表現で扱う手法
- 属性フィルタによるセレクタ指定について
というように、基本的な内容から応用的な使い方に関しても解説していきます。この記事で、jQueryのセレクタをしっかり学習して自分のスキルアップを目指しましょう！
セレクタとは？
それでは、まず最初にjQueryを扱う上で重要なセレクタについての基本的な知識から勉強しましょう。セレクタを簡単に説明すると、jQueryから操作したい「HTML要素の場所」を指定する処理ということになります。
基本的にjQueryの書き方は、「どのHTML要素で」「どんな事をするのか」という記述方法になるため、まず最初に「どのHTML要素で（セレクタ）」ということを決める必要があるわけです。
jQueryは非常に多彩なセレクタ指定方法が存在するので、本記事ではそれらを整理して分かりやすく解説するのでぜひ参考にしてみてください！
HTMLタグの指定方法
最もシンプルなセレクタ指定方法として、HTMLタグを直接指定する書き方から学習を進めていきましょう！
HTMLはご存知の通り「divタグ」「pタグ」「h1タグ」…など、さまざまなタグで構成されているわけですが、このタグを直接セレクタに指定して対象の要素を操作してみましょう。次のサンプル例を見てください！
<body>
<p>おはよう。</p>
<p>こんにちは。</p>
<p>こんばんは。</p>
<script>
var pTag = $('p');
console.log( pTag[0] );
</script>
</body>
実行結果
<p>おはよう。</p>
この例では、3つの「pタグ」が配置されたHTMLで、jQueryからセレクタを「$(‘p’)」と指定することで「pタグ」をすべて指定するという意味になります。
そのため、変数「pTag」には3つのp要素が格納されており、「pTag[0]」と記述することで0番目の要素である一番最初のp要素が実行結果に出力されるわけです。
ちなみに、セレクタで対象要素を指定すれば、あとは「どんな事をするのか？」を記述するだけでjQueryは簡単に扱えます。
<body>
<p>おはよう。</p>
<p>こんにちは。</p>
<p>こんばんは。</p>
<script>
var pTag = $('p').text();
console.log( pTag );
</script>
</body>
実行結果
おはよう。こんにちは。こんばんは.。
この例では、セレクタのあとに続けて「text()」を記述していますが、これによりp要素に記述されている文字列を出力することができます。
つまり、「$(‘p’).text()」という記述だけで、HTML内のp要素をすべて取得して記述されているテキスト文字を出力することが出来るわけですね。
子要素の指定方法
次に、子要素のセレクタ指定方法について学習していきましょう！
先ほどはHTMLタグを直接指定する方法を学習しましたが大抵の場合、HTMLは階層構造になっているので特定の子要素だけを対象にしたいというケースもあります。そんな時は、CSSと同じ考え方で特定の子要素だけをセレクタ指定することができます。
まずは、サンプル例として次のコードを見てください！
<body>
<div>
<p>おはよう。</p>
</div>
<p>こんにちは。</p>
<script>
var pTag = $('p').text();
console.log( pTag );
</script>
</body>
実行結果
おはよう。こんにちは。
この例では、「div」の階層下にあるpタグと、その外にあるpタグが配置されているのが分かります。そして、先ほどと同じく「$(‘p’)」というセレクタ指定にすると、実行結果には2つのpタグのテキストが同時に出力されているのが分かります。
「$(‘p’)」というセレクタ指定は、HTML内にあるすべてのpタグを指定するという意味でしたね。そこで、今度は「divタグ」の階層下にあるpタグだけを指定してみましょう！
<body>
<div>
<p>おはよう。</p>
</div>
<p>こんにちは。</p>
<script>
var pTag = $('div > p').text();
console.log( pTag );
</script>
</body>
実行結果
おはよう。
この例のように、「$(‘div > p’)」と記述することでdivタグの階層下にあるpタグだけを指定することが出来るわけです。
もちろん、「>」ではなく半角スペースで「$(‘div p’)」と記述すれば、divタグの階層下にあるpタグをすべて指定することも可能です！
「属性」を活用したセレクタ指定について
さて、ここまでの学習でHTMLタグによるセレクタ指定を学んできましたが、実は一般的に利用頻度が高い指定方法はHTMLの属性を使うことです。
HTMLタグ内には「id」「name」「class」…など、さまざまな属性を設定できるわけですが、この属性値をセレクタに活用することで自在に対象を指定できます。それぞれの指定方法について、詳しく見ていきましょう！
id属性の指定方法
まずは、id属性を使ったセレクタの指定方法を勉強しましょう！
考え方としてはCSSでスタイルを設定する感覚と一緒なのですが、id属性の場合は「#」に続けて属性値を記述すればセレクタ指定が可能になります。次のサンプル例を見てください！
<body>
<p id="text1">おはよう</p>
<p id="text2">こんにちは</p>
<script>
var text = $('#text1').text();
console.log( text );
</script>
</body>
実行結果
おはよう
この例では、pタグのid属性値として「text1」「text2」が記述されており、「$(‘#text1’)」とセレクタ指定することで1つ目のp要素が指定できます。
続けてtext()メソッドを実行することで、pタグ内に記述されたテキストを出力しているのが分かりますね。idの属性値はHTML内に重複させてはいけないという決まりがあるので、任意のHTML要素をダイレクトに指定できるわけです。
他にもid属性を活用して属性値の変更・追加・削除なども可能であり、次の記事に分かりやすく解説しているのでぜひチェックしてみてください！
クラス属性の指定方法
次に、クラス属性を活用したセレクタの指定方法を学習していきましょう！
セレクタの書き方は、先ほどの「id属性」と同じくCSSでスタイルを指定するように「.（カンマ）」に続けて属性値を記述すれば実現します。次のサンプル例を見てください！
<body>
<ul>
<li class="text">項目１</li>
<li class="text">項目２</li>
<li class="text">項目３</li>
</ul>
<script>
var text = $('.text').text();
console.log( text );
</script>
</body>
実行結果
項目１項目２項目３
この例では、li要素に記述されているclass属性値「text」を使って、「$(‘.text’)」と記述することで対象の要素をすべて指定しています。そして、「text()」メソッドを使って中身のテキスト文字を出力しているわけですね。
class属性はid属性と違って、HTML内に複数同じ値を存在させても良いのでこの方法でセレクタを作ると対象要素がすべて取得されるので注意しましょう！
また、class属性を使って値の取得・変更・追加・削除といった操作や、class属性の存在判定まで詳しく解説した次の記事も参考になるのでぜひチェックしてみてください！
name属性の指定方法
今度は、name属性を活用したセレクタ指定を勉強しましょう！name属性は一般的にフォーム部品などのHTMLタグに記述されることが多いので、フォームをjQueryで操作する時などによく使われる手法となります。セレクタの書き方としては、
【HTML要素 [ 属性 = 属性値 ]】
という記述になるので覚えておきましょう！例えば、input要素のname属性を活用したセレクタ指定は次のようになります！
<body>
<input type="text" name="user-name" value="太郎">
<script>
var name = $('input[name="user-name"]').val();
console.log( name );
</script>
</body>
実行結果
太郎
この例では、input要素のname属性値として「user-name」と記述しており、これを先ほどの書き方に合わせると
input[name=”user-name”]
になりますね。このように記述することで、どのようなname属性もセレクタとして活用することが可能で、「val()」メソッドを使えばvalue属性値を出力することもできます。
以下の記事では、name属性の取得・変更やcheckboxなどの他のフォーム部品を使ったサンプル例など、さまざまな活用技をまとめているのでぜひ参考にしてみてください！
セレクタにand, or, notを使ってみよう
これまで、セレクタ指定に単発のHTMLタグや属性を使ってきましたが、複数の要素・属性を利用することでさらに細かい指定も可能になります。
そこで、一般的に利用される手法として「and / or / not」の3種類があるのですが、それぞれの基本的な使い方を詳しく見ていきましょう！
「and」によるセレクタ指定
まず最初に「and」を使ったセレクタ指定を学習しましょう！「and」は、複数のタグや属性を同時に指定することで特定の対象要素を決める方法で、任意のクラス属性を対象にしたい場合などによく使われます。
記述方法は、【セレクタ セレクタ セレクタ】のようにタグ・属性を連続して記述することで実現します。次のサンプル例を見てください！
<body>
<ul>
<li class="text1 sample">おはよう。</li>
<li class="text2">こんにちは。</li>
<li class="text1 text2 sample">こんばんは。</li>
</ul>
<script>
var text = $('.text1.text2.sample').text();
console.log( text );
</script>
</body>
実行結果
こんばんは。
この例では、複数のクラス属性値が付与されたli要素で、andでセレクタ指定することで3つ目のli要素だけを対象にしています。
andでセレクタ指定した「$(‘.text1.text2.sample’)」は、class属性に「text1」「text2」「sample」の3つの属性値が付与されている要素だけを指定するという意味になります。
「or」によるセレクタ指定
次に、「or」を使ったセレクタ指定を見てみましょう！「or」は、指定した複数のタグ・属性のいずれかが付与されていれば、対象要素として指定できる方法になります。
記述方法は、【セレクタ, セレクタ, セレクタ】のように「,（カンマ）」でタグ・属性を区切ります。次のサンプル例を見てください！
<body>
<ul>
<li class="text1">おはよう。</li>
<li class="text2">こんにちは。</li>
<li class="sample">こんばんは。</li>
</ul>
<script>
var text = $('.text1,.sample').text();
console.log( text );
</script>
</body>
実行結果
おはよう。こんばんは。
この例では、orを使って「$(‘.text1,.sample’)」と記述することで、class属性値に「text1」か「sample」のいずれかが付与されている要素を指定します。
そのため、「text1」「sample」が付与されている1番目と3番目のli要素が対象となり、実行結果にはそれぞれのテキスト文字が出力されているのが分かりますね。
「not」によるセレクタ指定
今度は、「not」を使ったセレクタ指定を見ていきましょう！「not」は、指定した属性以外の要素を対象とする方法で、任意の属性値を除外して指定したい場合に有効です。記述方法は、
【HTML要素:not( セレクタ )】
のように対象となるHTML要素とセレクタの間に「:not()」を付与する書き方になります。次のサンプル例を見てください！
<body>
<ul>
<li class="text1">おはよう。</li>
<li class="text2">こんにちは。</li>
<li class="sample">こんばんは。</li>
</ul>
<script>
var text = $('li:not(.text1)').text();
console.log( text );
</script>
</body>
実行結果
こんにちは。こんばんは。
この例では「$(‘li:not(.text1)’)」と記述することで、li要素のclass属性値に「text1」が付与されている要素以外を対象にする意味となります。
つまり、1番目のli要素は除外されるので、2番目3番目のli要素だけが対象となり実行結果にはそれぞれのテキスト文字が出力されているわけです。
これを応用すれば、例えばチェックボックスなどで「$(‘input:not(:checked)’)」のように記述すれば、チェックされていない要素だけを指定することも可能です！
セレクタを正規表現で扱う手法
ここからは、正規表現を使ったセレクタ指定を学んでいきましょう！厳密に言うと、jQueryのセレクタ指定は正規表現に対応していないのですが、他の便利なメソッドと組み合わせることで簡単に実現することが可能です。
そこで、今回はfilterメソッドを使って正規表現でセレクタ指定をしてみましょう。まずは、次のサンプルを見てください。
<body>
<ul>
<li class="user-a">太郎</li>
<li class="user-123">花子</li>
<li class="user-45">三郎</li>
</ul>
<script>
var user = $('li').filter(function(index, element) {
return element.className.match(/user-d+/);
})
console.log( user );
</script>
</body>
実行結果
[li.user-123, li.user-45......]
この例では、「user-」から始まるclass属性が付与されたli要素をセレクタ指定しているのですが、そこへfilterメソッドを使って正規表現を組み込んでいます。
filterのコールバック関数の第2引数にはHTML要素が格納されているので、これを活用して「match」メソッドによる正規表現を利用しているわけです。
「/user-d+/」という正規表現により、「user-」の次に数値が入るclass属性値だけを抽出しているので2番目3番目のli要素のテキストが出力されます。
このようにfilterメソッドを活用した正規表現の指定方法以外にも、「each」メソッドを使ったサンプル例などを次の記事でご紹介しているのでぜひ参考にしてみてください！
属性フィルタによるセレクタ指定について
最後に、属性フィルタを活用したセレクタ指定についても解説しておきます！
属性フィルタは、文字通り要素に付与されている「属性」を活用した手法で、「前方・後方一致」や「部分一致」など便利なフィルタリングをかけられます。
これにより、正規表現ほど難しくないものの似たような抽出機能を手軽に扱えるので、覚えておいて損はないメソッドと言えるでしょう。例えば、次のサンプル例は属性フィルタによる「部分一致」の例です！
<body>
<ul>
<li class="text-one">テキスト１</li>
<li class="sample-test">サンプルテスト</li>
<li class="sample">サンプル</li>
</ul>
<script>
var list = $('li[class*="te"]').text();
console.log( list );
</script>
</body>
実行結果
テキスト１サンプルテスト
この例では、属性フィルタを使うために「li[class*=”te”]」と記述しており、li要素のclass属性値に「te」が含まれている要素をすべて対象にします。ポイントは「*=」を使っている点で、これにより「部分一致」を実行することが可能となります。
他にも、「^=」を使った「前方一致」や「$=」を使った「後方一致」などがあり、次の記事でその活用方法をコード例と一緒に解説しているのでぜひ参考にしてみてください！
まとめ
今回は、jQueryにおけるセレクタ操作の全般を学習しました。jQueryで何らかのプログラミングを行う場合には、必ずと言っても良いくらいにセレクタ指定から始まるので、今回の記事は最も重要なポイントになります。
本記事を参考に繰り返し自分でもセレクタ指定を実践し、積極的にプログラミングに取り入れて自分なりのコードが書けるように頑張りましょう！
