【jQueryレッスン】意外と忘れがち？！基本的なセレクターについて

jQueryには要素を操作する際に、CSSセレクターと同じように要素を指定して、何かしらの操作を行う事ができます。
CSSセレクターにはないjQuery独自のセレクターもありますので、ここでまとめて学んでいきましょう。

セレクターの基礎

まずセレクターを学ぶ前に、jQueryの仕様を確認します。
まず一般的に使われているセレクターは下記のように記述します。

<script>
jQuery(document).ready(function($){
	// $()の中にセレクターを記述します。
	$("p").css("color","red"); // pタグ内の文字列を赤にする
});
</script>
<p>赤色を表示します</p>

$関数には第2引数を指定する事もできます。

<script>
jQuery(document).ready(function($){
	// $()の中にセレクターを記述します。
	$("p", "div").css("color","red"); // pタグ内の文字列を赤にする
});
</script>
<div>
	<p>赤色を表示します</p>
</div>
<p>コチラは色の変化はありません。</p>

第2引数を指定せずとも、このパターンの場合は$(“div p”)でも指定できます。しかし、ここでは詳しくは説明しませんが第2引数にはxmlやより限定してセレクターを使用する場合などでかなり便利に使えます。

基本的なセレクター

jQueryでは、CSSでも使われるセレクターで要素を指定します。ここでは、基本的なセレクターを学んでいきましょう。

1. IDセレクター

指定されたidを持つ要素を選択します。IDの場合は1つの要素にしか適用されません。

<script>
jQuery(document).ready(function($){
	// #id名で要素を指定します。
	$("#sample1").css("color","red");
});
</script>
<p id="sample1">赤色を表示します</p>

2. クラスセレクター

指定されたクラスを持つ要素を選択します。クラスはページ内に複数存在する場合があります。

<script>
jQuery(document).ready(function($){
	// .class名で要素を指定します。
	$(".sample2").css("color","red");
});
</script>
<p class="sample2">赤色を表示します</p>

3. エレメントセレクター

指定されたタグ名の要素を選択します。

<script>
jQuery(document).ready(function($){
	// タグ名で要素を指定します。
	$("p").css("color","red");
});
</script>
<p>赤色を表示します</p>

4. ＊セレクター

全ての要素を選択します。

<script>
jQuery(document).ready(function($){
	// タグ名で要素を指定します。
	$("*").css("color","red");
});
</script>
<p>赤色を表示します</p>
<ul>
	<li>リスト１</li>
	<li>リスト２</li>
</ul>

5. 複数セレクター

指定された全てのセレクターの結果をあわせたものを返します。
カンマを使えばいくつでもセレクターを指定できます。その際の順番は関係ありませんので、好きなルールで記述できます。

<script>
jQuery(document).ready(function($){
	// タグ名で要素を指定します。
	$("div, p, .sample3").css("color","red");
});
</script>
<p>赤色を表示します</p>
<div>赤色を表示します</div>
<ul>
	<li class="sample3">赤色を表示します</li>
	<li>CSSは適用されません</li>
</ul>