jQueryセレクター：知っておきたいワイルドカードの使い方

2024-04-02

ワイルドカードの種類

jQueryセレクターで使用できるワイルドカードは次の2種類です。

"*" (アスタリスク): すべての要素にマッチします。
"?" (疑問符): 1文字にマッチします。

ワイルドカードの例

"*" の例

以下の例では、すべての <div> 要素を選択します。

<div>要素1</div>
<div>要素2</div>
<div>要素3</div>

// すべての `<div>` 要素を選択
$("div");

"?" の例

以下の例では、class 属性が "box" で、先頭1文字が "a" の要素を選択します。

<div class="box a1">要素1</div>
<div class="box a2">要素2</div>
<div class="box b1">要素3</div>

// `class` 属性が "box" で、先頭1文字が "a" の要素を選択
$(".box a?");

その他のワイルドカード

上記以外にも、いくつかのワイルドカードを使用できます。

"[]" (角括弧): 文字範囲を指定できます。

詳細は、jQueryの公式ドキュメントを参照してください。

注意点

ワイルドカードを使用する際は、意図しない要素を選択してしまう可能性があります。セレクターが正しく動作することを確認するためには、テストを行うことが重要です。

Sizzleは、jQueryセレクターエンジンに使用されているオープンソースのライブラリです。Sizzleは、CSS3セレクターを解析して、対応する要素を効率的に選択します。

Sizzleの詳細については、Sizzleの公式ドキュメントを参照してください。

jQueryセレクターにおけるワイルドカードは、さまざまな要素を選択するための便利なツールです。ワイルドカードの種類と使い方を理解することで、より柔軟なセレクターを作成することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <div class="box a1">要素1</div>
  <div class="box a2">要素2</div>
  <div class="box b1">要素3</div>
  <div class="box c1">要素4</div>
  <div id="test">要素5</div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // すべての `<div>` 要素を選択
    $("div").css("color", "red");

    // `class` 属性が "box" で、先頭1文字が "a" の要素を選択
    $(".box a?").css("background-color", "yellow");

    // `id` 属性が "test" の要素を選択
    $("#test").css("font-size", "20px");

    // `class` 属性が "box" で、2番目の文字が "a" の要素を選択
    $(".box .a").css("border", "1px solid blue");
  </script>
</body>
</html>

上記コードを実行すると、以下のようになります。

すべての <div> 要素が赤色になります。
id 属性が "test" の要素のフォントサイズが20pxになります。

上記以外にも、さまざまなワイルドカードの使い方があります。詳細は、jQueryの公式ドキュメントを参照してください。

jQueryセレクターで要素を選択する他の方法

IDセレクター

# 記号とID属性値を組み合わせて、特定のIDを持つ要素を選択します。

<div id="unique-id">要素</div>

// IDが "unique-id" の要素を選択
$("#unique-id");

クラスセレクター

<div class="box">要素</div>

// クラスが "box" の要素を選択
$(".box");

子孫セレクター

> 記号を使用して、親要素の子孫要素を選択します。

<div>
  <p>要素</p>
</div>

// `div` 要素の子孫である `p` 要素を選択
$("div > p");

隣接兄弟セレクター

<div>
  <p>要素1</p>
  <p>要素2</p>
</div>

// `p` 要素の直接隣接する `p` 要素を選択
$("p + p");

汎用兄弟セレクター

<div>
  <p>要素1</p>
  <span>要素2</span>
  <p>要素3</p>
</div>

// `p` 要素のすべての兄弟要素を選択
$("p ~ p");

属性セレクター

<div class="box" data-type="test">要素</div>

// `data-type` 属性を持つ要素を選択
$("[data-type]");

フィルターセレクター

: 記号を使用して、要素をフィルタリングできます。

<div class="box">要素1</div>
<div class="box hidden">要素2</div>

// 非表示の `div` 要素を選択
$(".box:hidden");

これらの方法は、単独でまたは組み合わせて使用することができます。詳細は、jQueryの公式ドキュメントを参照してください。

jquery jquery-selectors sizzle