jQuery入門 | 要素の選択 | jQueryセレクター

jQueryセレクター

jQueryでは、CSSセレクターだけでなく、いくつかの非標準セレクターも使用できる。 このような非標準セレクターを使用すると、選択した要素を保存したり、その結果をフィルタリングしたりできる。

選択した要素を変数に保存

jQueryでは、選択した要素を変数に保存して使用できる。

次のような要素があるとき、

<ul>
    <li>エスプレッソ</li>
    <li>アメリカーノ</li>
    <li>カフェラテ</li>
</ul>

次の例は、文書内のすべての<li>要素を選択して変数に保存し、その変数を使って要素数を取得している。

var coffees = $("li");
$("#length").text("コーヒーの種類は全部で " + coffees.length + " 種類です。");

コードを実行

このように保存された要素は、変数に保存された時点の要素だけである。 そのため、要素が保存された後に追加または削除された要素は自動的には更新されない。

選択した要素のフィルタリング

jQueryでは、選択した要素の中からさらに細かく選択するためのフィルタリングを行える。

次のような要素があるとき、

<ul>
    <li>エスプレッソ</li>
    <li><b>アメリカーノ</b></li>
    <li>カフェラテ</li>
</ul>

次の例は、文書内のすべての<li>要素のうち、<b>要素を持つ要素だけを選択して文を追加している。

$("li:has(b)").append(" - おすすめメニューです。");

コードを実行

フィルタリングに使用できるセレクターは次のとおりである。

input要素の選択

jQueryでは、入力フォームに関連する特定の要素を簡単に選択できる。

次のような要素があるとき、

<div><input type="checkbox" id="espresso"><label for="espresso">エスプレッソ</label></div>
<div><input type="checkbox" id="americano"><label for="americano">アメリカーノ</label></div>
<div><input type="checkbox" id="caffeLatte"><label for="caffeLatte">カフェラテ</label></div>

次の例は、チェックボックスのうちチェックされた入力フォーム要素の数を取得する。

var checked = $(":checked");
$("#count").text("選択したコーヒーは全部で " + checked.length + " 種類です。");

コードを実行

特定の<input>要素を選択できるセレクターは次のとおりである。