
【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>リスト1</li> <li>リスト2</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>
この記事へのコメントはありません。