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

jQueryセレクタは属性値で指定することもできます。
(属性値とはHTMLタグの性質を表す値のことです。例えば「<img width=”300″ …>」のwidth(属性)に指定された300が属性値です。)
属性値を指定する場合は「$(“[width]“).…」と[ ]で囲みます。

早速試してみましょう。(たくさんあるのでざっくりと紹介していきます。)

まずは属性のみで指定してみます。属性「href」が指定されているものに対し処理を行います。

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryを使ってみよう。(基本編 セレクタ2) - サンプル1</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function (){
	//属性「href」が指定されているものすべて
	$("[href]").css({"color":"#ffffff","background":"#CC0000"});
});
</script>
</head>
<body>
<a href="http://www.detelu.com">DETELUホームページ</a><br>
<a href="/blog/">DETELU BLOG</a><br>
<a href="http://www.yahoo.co.jp">Yahoo!</a><br>
<a href="http://www.google.co.jp">Google</a>
</body>
</html>

サンプル1

「href」が指定されているAタグ、リンクがすべて「白文字で赤の背景」になっています。

次に属性「href」に「/blog/」と指定されているものに対し処理を行います。

… 省略 …
	//属性「href」に「/blog/」と指定されているものに処理
	$("[href=/blog/]").css({"color":"#ffffff","background":"#CC0000"}});
… 省略 …

サンプル2

「DETELU BLOG」のリンクだけが「白文字で赤の背景」になっています。
「[href = /blog/]」と指定することで「href」に「/blog/」のもの、という意味になります。

今度は逆に属性「href」に「/blog/」と指定されているもの以外に対し処理を行います。

… 省略 …
	//属性「href」に「/blog/」と指定されているもの以外に処理
	$("[href!=/blog/]").css({"color":"#ffffff","background":"#CC0000"}});
… 省略 …

サンプル3

=の前に ! をいれると否定を意味します。
なので「href!=/blog/]」は「href」が「/blog/」でないもの、という意味になります。

サンプル3では「DETELU BLOG」のリンク以外が「白文字」になっています。全面背景が赤になっているのは、属性「href」に「/blog/」と指定されているもの以外に対し処理を行うため、すべてのHTML要素(bodyなど)にも処理が行われているからです。

次は2ついっしょにいきます。
「href」の属性値が「/」で始まるもの、「co.jp」で終わるもの、に対し処理を行います。

… 省略 …
	//「href」の属性値が「/」で始まるもの、「co.jp」で終わるもの、に対し処理
	$("[href^=/]").css({"color":"#ffffff","background":"#CC0000"});
	$("[href$=co.jp]").css({"color":"#ffffff","background":"#0000CC"});
… 省略 …

サンプル4

=の前に ^ をいれると〜で始まる、=の前に $ をいれると〜で終わる、を意味します。
サンプル4では「DETELU BLOG」が赤、「Yahoo!」と「Google」のリンクが青の背景になります。

最後に「href」に「detelu」を含むものに対し処理をする方法です。

… 省略 …
	//属性「href」に「detelu」を含むものに対し処理
	$("[href*=detelu]").css({"color":"#ffffff","background":"#CC0000"});
… 省略 …

サンプル5

=の前に * をいれると〜を含む、という意味になります。
サンプル5では「DETELUホームページ」のリンクだけが「白文字で赤の背景」になっています。

今回は以上ですがこのような様々な指定を組み合わせることで、細かくいろいろな処理を行うことができるようになります。
また前回と今回ご紹介した以外にも様々な指定方法があります。

下記の「All About」のJavaScriptページに、サンプルと一緒に紹介されているわかりやすいページがあるので興味がある方はマニュアルページとして活用してみて下さい。

jQueryのセレクタ 基本 – [JavaScript]All About

API/1.2/Selectors – jQuery JavaScript Library(本家ドキュメント)

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

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

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

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryを使ってみよう。(基本編 セレクタ1)</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を使ってみよう。(基本編 セレクタ1)</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を使ってみよう。(1)</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を利用するための準備は完了です。次回からは実際にどのように記述していくか説明していきます。