jQueryを記述するにあたって、特定のHTMLやCSSに対し命令を実行するにはそれぞれのセレクターを指定します。
<ul>
<li id="first">テキスト</li>
<li class="second">テキスト</li>
<li id="third">テキスト</li>
<li class="fouth">テキスト</li>
<li id="fifth">テキスト</li>
</ul>
$(function(){
$("li").css("color","red");
});
-
- このように、jQueryの"$(function()){ 〜”以下の文にて
まず"$(〜)"内に指定の要素セレクターやidセレクターを指定し、更に
どのように可変制御するかをセレクタの後に.(ドット)をつけて命令文を書き込む。
つまり、「li」タグを全て選択し、それらのCSSを操作、colorをredで文字色を赤に変更という解釈になる。
- 応用して、2行目のliだけを変更したい、あるいはli内の指定のid、或いはclassなど限定して変更したい場合はこのようになる。
- 指定のセレクタから何番目かを指定する。nth-child疑似クラス
$(function(){
$("li:nth-child(2)").css("color","red");
$("li:nth-child(3)").css("color","green");
});
-
- 複数ある「li」から2,3番目の文字色をそれぞれ変色。
- idが"first"を指定、classが"fouth"を指定、のidセレクター＆classセレクター
$(function(){
$("#first").css("color","red");
$(".fouth").css("color","green");
});
