jQuery | 1：n – DETELU Blog

ブログ > タグ 'jQuery'

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を触ったことのない方は少し戸惑うかもしれません。上記のサンプル等を少し自分で書き換えてみたり、いろいろ試してなれて下さいね。

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

jQueryを使ってみよう。(導入編)

jQueryはJavaScriptライブラリの1つで、使い方を少し勉強するだけでJavascriptでいろいろな効果をホームページに追加することができます。自分も超初心者で難しいことはできませんが、学んだことを少しずつ記事にしていきたいと思いますのでよろしくお願いします

早速ですが、まずはjQueryを手に入れましょう。

jQueryのダウンロードページにアクセスして「Current Release」と記述されている場所からjQueryをダウンロードします。(2008/9/10現在最新版は1.2.6です。)
「Minified」「Packed」「Uncompressed」と3つのリンクがあるので、ここでは「Minified」をダウンロードしておきましょう。「Minified」のリンクをクリックするとダウンロードページに移動するので、リンクをクリックしてダウンロードします。

Downloading jQuery – jQuery JavaScript Library

さてダウンロードできたら、さっそく使ってみましょう！

下記のようなファイルを作成してブラウザーで開いて下さい。（文字コード、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">
//jQueryで
$(document).ready(function (){
$("#msg").text("jQueryよ、こんにちは。");
});
</script>
</head>
<body>
<div id="msg">ここが書き変わります。</div>
</body>
</html>

動作サンプル

普通にHTMLを表示させると「ここが書き変わります。」と表示されるはずですが「jQueryよ、こんにちは。」と表示されているはずです。（もし表示されていない場合は、ブラウザの設定でJavascriptを利用しない設定になってる可能性があるので設定を変更してみてください。）

jQueryを利用するときは下記のように「$(document).ready(function (){~~~});」の間に記述します。省略して「$(function (){~~~});」と書くことも出来ます。たいていの場合利用するので覚えておきましょう。

<script language="JavaScript">
$(document).ready(function (){
//ここに記述
});
$(function (){
//ここに記述
});
</script>

さてこれでjQueryを利用するための準備は完了です。次回からは実際にどのように記述していくか説明していきます。

Page 10 of 10« First...«6 7 8 910