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

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) - サンプル１</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>

サンプル１

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

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

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

サンプル２

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

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

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

サンプル３

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

サンプル３では「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"});
… 省略 …

サンプル４

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

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

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

サンプル５

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

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

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

jQueryのセレクタ基本 – ［JavaScript］All About

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