jQuery
複数のセレクターを” ,(カンマ) “区切りで並べて指定できるのが「グループセレクター」。
それぞれのセレクターに対する命令をまとめて記述できる。
class属性が「first」の1番目のli要素と、「third」が設定された3番目のli要素が#9cfの色になる。
<script type="text/javascript">
$(function(){
$("#one, #three").css("color","#9cf");
});
</script>
<ul> <li id="one">テキスト1テキスト1テキスト1</li> <li id="two">テキスト2テキスト2テキスト2</li> <li id="three">テキスト3テキスト3テキスト3</li> <li id="four">テキスト4テキスト4テキスト4</li> </ul>
下記は、上記ソースコードの結果。
すべての要素を選択できるのがユニバーサルセレクター。
ユニバーサルセレクターは“* (アスタリスク)”で記述する。
<script type="text/javascript">
$(function(){
$("li *").css("color","#9cf")
});
</script>
<ul> <li><strong>テキスト1</strong>テキスト1テキスト1</li> <li><em>テキスト2</em>テキスト2テキスト2</li> <li><span>テキスト3</span>テキスト3テキスト3</li> <li>テキスト4テキスト4テキスト4</li> </ul>
li要素に含まれているすべての要素、つまり１番目のstrong要素と2番目のem要素、
3番目のspan要素が「#9cf」の色になる。
以下は上記ソースコードの結果
「classセレクター」は、特定のclass属性を持つ要素に大して命令を実行する。
class属性の値に“.(ドット)”を付けたものをセレクターとして利用する。
<script type="text/javascript">
$(function(){
$(".second").css("color","#9cf");
});
</script>
<ul>
<li class="first">テキスト1、テキスト1、テキスト1</li>
<li class="second">テキスト2、テキスト2、テキスト2</li>
<li class="third">テキスト3、テキスト3、テキスト3</li>
<li class="fourth">テキスト4、テキスト4、テキスト4</li>
</ul>
下記は、上記ソースコードの結果。
「IDセレクター」は、特定のid属性を持つ要素を対象にする。
id属性の値に#(ハッシュ)をつけたものをセレクターとして利用します。
<script type="text/javascript">
$(function(){
$("#first").css("color", "#9cf");
});
</script>
<ul> <li id="first">テストテキスト1。テストテキスト1。テストテキスト1。</li> <li id="second">テストテキスト2。テストテキスト2。テストテキスト2。</li> <li id="third">テストテキスト3。テストテキスト3。テストテキスト3。</li> </ul>
下記は、上記のソースコードの結果。
jQueryでは、要素セレクター、idセレクター、classセレクターから、
子孫セレクター、ユニバーサルセレクター、グループセレクターまで様々なセレクターが利用できる。
特定のHTML要素に対して命令を実行するときは、「要素セレクター」を利用する。
下記のスクリプト、css(“color”,”#9cf”)は、
「CSSのcolorプロパティの値をカラーコード：#9cfに変更する」をいうjQueryの命令。
<script type="text/javascript">
$(function(){
$("li.post1").css("color","#9cf");
$("ol").css("background-color", "#666");
});
</script>
<h3>５つに分類したセレクターLIST</h3> <ol> <li>CSSでよく利用されるセレクター</li> <li>CSS2のセレクター</li> <li>CSS3のセレクター</li> <li>CSSの属性セレクター</li> <li>jQueryの独自セレクター</li> </ol>
下記は、上記のソースコードを実行した結果。
