jQueryを使ってみよう。(基本編セレクタ１)

さて前回jQueryをダウンロードしましたが、今回は実際にjQueryを使う際に必要になる基本セレクタについてを勉強します。

まずセレクタとは何なのかを簡単に説明します。
下記のようなHTMLがあったとします。

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryを使ってみよう。(基本編 セレクタ１)</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
</head>
<body>
<p>Pタグのみの指定です。</p>
<p id="idtxt">Pタグに「id=idtxt」を指定しています。</p>
<p class="classtxt">Pタグに「class=classtxt」を指定しています。</p>
</body>
</html>

このPタグ内のテキストの色をそれぞれ変更する場合、例えばCSSで下記のように指定すると思います。

p {
color: red;
}
p#idtxt {
color: blue;
}
p.classtxt {
color: green;
}

CSSではPタグのみの指定、ID名を割り当てて指定、Class名を割り当てて指定、という風に記述します。

jQueryでもCSSのようにHTMLタグ、ID名、Class名を指定し該当するものに対して処理を実行する、といった記述をします。プログラムで何か処理をする場合、何処に対して何をしろ、という命令を記述します。「何処で何をする」の「何処で」にあたるもの、これをセレクタと言います。（以下セレクタと呼びます。）

それでは上記のCSSをあえてjQueryで記述してみます。

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryを使ってみよう。(基本編 セレクタ１)</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function (){
$("p").css("color","red");
$("p#idtxt").css("color","blue");
$("p.classtxt").css("color","green");
});
</script>
</head>
<body>
<p>Pタグのみの指定です。</p>
<p id="idtxt">Pタグに「id=idtxt」を指定しています。</p>
<p class="classtxt">Pタグに「class=classtxt」を指定しています。</p>
</body>
</html>

サンプル

「$(“p”).〜、$(“p#idtxt”).〜、$(“p.classtxt”).〜」と$(“”)内にHTMLタグ、ID名、Class名を記述し、次にフォントカラーを赤にする、という記述になります。「何処で=$(“p”).」「何をする=css(“color”,”red”)」といった感じです。

またセレクタを複数指定することもできます。「,」カンマで区切るだけです。

$("p#idtxt,p.classtxt").css("font-size","24px");

このようにセレクタの記述方法は、これを知ってないと始まらない！っというとても重要な要素です。CSSを触る方であればすぐにピントくると思うのですが、CSSを触ったことのない方は少し戸惑うかもしれません。上記のサンプル等を少し自分で書き換えてみたり、いろいろ試してなれて下さいね。

次回も引き続きセレクタについて勉強していきます。