2012年08月
「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>
下記は、上記のソースコードを実行した結果。
jQueryを利用したスクリプトでは、
(1) どのHTMLの要素を操作するかを「セレクター」で指定し、
(2) 操作する内容を書きます。
具体的には、$("…")の内側にセレクターを記述し、
その後ろに.(ドット)でjQueryの命令を記述していく。
jQueryは、ほぼすべてこの形式で処理を書く。
$(function({
$("セレクター").jQueryの命令
});
jQueryを理解する第一歩として、「セレクター」を覚える必要がある。
jQueryには様々な種類のセレクターが用意されている。
ブラウザーがまだscript要素までしか読み込んでいない場合、
意図した動きをしない。
そこで、スクリプトを実行するタイミングを制御する「ready」というjQuery関数
ready関数を使用する。
ready関数は、以下のような形式で使用する。
$(document).ready(function(){
ここにjQueryの処理を記述
});
このとき、ready関数の内側(function(){…}内)に書かれている命令は、
HTMLの読み込みが終わった後に実行される。
readyという名前のとおり、「準備ができた段階でスクリプトを実行する」。
これで、head要素内のscript要素にスクリプトを書いた場合でも、body要素内のHTMLをきちんと操作できる。
$(function(){
ここにjQueryの処理を記述
});
jQueryでスクリプトを書くときは、ほとんどの場合、まずready関数を記述し、
その内側に実際の命令を記述する。
jQueryの1つの”ルール”として覚えておく。
