jQuery入門道場 jQueryの使い方

2章　セレクター

この章で見る主な内容です。

基本的なセレクター

jQueryでは、CSSでお馴染みのセレクターを使って、要素を選択（取得）します。ここでは、以下の基本的なCSSセレクターを見て行きましょう。

要素（タグ）セレクター

要素（タグ）名を元に対象要素を選択します。要素名は、括弧（<>）は付けずに、そのまま書きます。
例えば、

$("h2").css("color", "red");

こうすることで、全てのH2要素の文字色を赤色に設定します。

クラスセレクター

特定のクラス名を元に対象要素を選択します。クラス名は、ドットの後に続けて書きます。
例えば、

<ul>
  <li class="man">太郎</li>
  <li class="man">次郎</li>
  <li class="woman">花子</li>
</ul>

とHTMLがある時に、

$(".man").css("color", "red");

このようにすると、次の結果になります。

IDセレクター

特定のIDを元に対象要素を選択します。IDは、#の後に続けて書きます。IDは、1ページにつき1つのみ存在すべきものです。
例えば、

<ul>
  <li id="taro">太郎</li>
  <li>次郎</li>
  <li>花子</li>
</ul>

とHTMLがある時に、

$("#taro").css("color", "red");

このようにすると、次の結果になります。

グループセレクター

複数のセレクターを半角カンマで繋げて、同時に指定することができます。 例えば、H1～H3までの要素全てを選択する場合は、

$("h1, h2, h3").css("color", "red");

こうなります。半角カンマの前後の空白はあっても無くても大丈夫です。上記は、要素セレクターのみで組み合わせましたが、下記のように他のセレクター同士でも可能です。

$("h1, .man, #taro").css("color", "red");

ユニバーサルセレクター

全ての要素を選択するためのセレクターとしてユニバーサルセレクターがあります。アスタリスクで表現します。（分かりやすく言えば、ワイルドカードですね）

$("*").css("color", "red");
$("#important *").css("color", "red");

2行目のように子孫セレクター（後ほど見ます）と組み合わせることもできます。この場合は、IDがimportantの要素の中にあるタグ全てに対して、文字色を赤に設定します。

属性セレクター

要素の属性を元に選択するセレクターです。通常は、要素名に続けて書くことが多いですが、クラス名でも大丈夫です。
サンプルを見てみましょう。

<a href="" target="_blank">ピンクです</a>
<a href="" target="_self">青です</a>
<a href="" target="_parent">赤です</a>
<a href="" target="_top" class="fruit">緑です</a>
$("a[target='_blank']").css("color", "pink");
$("a[target='_self']").css("color", "blue");
$("a[target=_parent]").css("color", "red");
$(".fruit[target=_top]").css("color", "green");

実行結果
ピンクです 青です 赤です 緑です

4行目にあるように、クラスセレクターから始めてもOKです。
それでは、1つ1つ属性セレクターを見てみましょう。

[属性名]

ある特定の属性名を含む要素を絞り込みます。

$("img[title]")

この場合、title属性を持つimg要素全てを選択します。

[属性名 = 値]

値と完全一致した属性を持つ要素を絞り込みます。

$("a[target='_blank']")

target属性が_blankのリンクを全て選択します。" と ' のクォーテーションの順番は、正しく入れ子になっていれば変わってもOKです。
また、値が1語の単語の時は、値を括るクォーテーションを取ってもOKです。（[target=_blank]）

[属性名 != 値]

値と完全一致することのない属性を絞り込みます。

$("a[target!='_blank']")

target属性が_blankでないリンクを全て選択します。この記述は、後に出てくる :not([attr="value"]) と等価です。

なお、元々target属性が指定されてないリンクは、デフォルトで_blankではありませんので、それらも選択対象になります。 また、このセレクターは、CSSの仕様には無く、jQueryが独自に拡張しているものです。

[属性名 *= 値]

値と部分一致した属性を持つ要素を絞り込みます。

<input name="cat">
<input name="cat-5">
<input name="catman">
<input name="dog cat horse">
$("input[name*='cat']")

このセレクターの場合、上記のinput全てにヒットするのでご注意下さい。
（もし単語ベースでの一致にする場合は、この次のセレクターを使います）

[属性名 ~= 値]

上記の *= と少し似ていますが、こちらは、スペースで区切られた単語ベースでの一致判定となります。

<input name="cat">
<input name="cat-5">
<input name="catman">
<input name="dog cat horse">
$("input[name~='cat']")

この場合は、1行目と4行目のinputにヒットします。

[属性名 ^= 値]

値と前方一致した属性を持つ要素を絞り込みます。

$("a[href^='http://']")
$("a[href^='http://'], a[href^='https://']")

上記の2つ共、外部リンクのみを選択します。（但し、内部リンクが全て相対パスで記述していると想定）
HTTPSのサイトもあることも考えると、2番目の書き方がよりいいでしょう。

[属性名 $= 値]

値と後方一致した属性を持つ要素を絞り込みます。

$("a[href$='.pdf']")

PDFへのリンクを張ってあるリンクをこれで選択できます。

[属性名 = 値][属性名 = 値]

上記で出てきた属性セレクターを組み合わせて、全ての条件に一致するものだけを選択できます。

$("a[href^='http://'][target='_blank']")

URLが、http://から始まるリンクで、かつ、target属性が_blankになっているリンクを選択します。条件は、幾つでも組み合わせられます。