jQuery セレクタとは？
jQueryを使う上で、欠かせないのが「セレクタ」です。 この記事では、jQueryのセレクタについて、具体例を交えながら解説していきます。
セレクタの基本
jQueryでのセレクタとは、「そのページ内の、操作対象のHTMLの要素を特定するもの」です。 例えば、ページ内の全ての
要素を選択したい場合や、特定のIDを持つ要素だけを選択したい場合など、様々な場面で使用されます。
セレクタは、CSSのセレクタとほぼ同じ書き方ができます。 jQueryは、このセレクタを使って、HTML要素を探し出し、操作を加えることができるのです。
セレクタの種類と使い方
jQueryでは、様々な方法で要素を指定することができます。 ここでは、代表的なセレクタをいくつか紹介します。
| セレクタ | 説明 | 例 |
|---|---|---|
| 要素セレクタ | HTMLの要素名を指定する | $("p") (全ての<p>要素を選択) |
| IDセレクタ | id属性の値を指定する | $("#header") (id="header"の要素を選択) |
| クラスセレクタ | class属性の値を指定する | $(".active") (class="active"の要素を選択) |
| 属性セレクタ | 属性の値を指定する | $("a[href='#']") (href属性の値が"#"の<a>要素を選択) |
使用例
<p>段落1</p>
<p class="highlight">段落2</p>
<div id="target">ターゲット</div>
// 全ての<p>要素の背景色を黄色にする
$("p").css("background-color", "yellow");
// class="highlight"の<p>要素の文字色を赤にする
$(".highlight").css("color", "red");
// id="target"の要素に'強調されました！'というテキストを追加する
$("#target").append("<p>強調されました！</p>");
複数の条件を組み合わせる
複数のセレクタを組み合わせることで、より複雑な条件で要素を指定することができます。 組み合わせる際には、スペース区切りで記述します。
例
<ul>
<li class="item">リスト1</li>
<li>リスト2</li>
</ul>
// <ul>要素内の、class="item"の<li>要素を選択
$("ul li.item").css("font-weight", "bold");
特定の条件を除外する
特定の条件に当てはまる要素を除外したい場合は、":not()"を使います。
例
<a href="#">リンク1</a>
<a href="https://www.google.com/">リンク2</a>
// href属性の値が"#"ではない<a>要素を選択
$("a:not([href='#'])").css("text-decoration", "underline");
まとめ
jQueryのセレクタは、HTML要素を指定するための強力なツールです。 様々なセレクタを組み合わせることで、柔軟に要素を指定し、操作することができます。 ぜひ、この記事を参考に、jQueryのセレクタを使いこなせるようになりましょう。
参考文献
関連QA
Q1: jQueryのセレクタは、JavaScriptのDOM操作と比べて何が便利ですか？
A1: jQueryのセレクタは、CSSライクな直感的な記述で要素を指定できるため、JavaScriptのDOM操作よりも簡潔に記述できます。 また、jQueryが内部でブラウザ間の差異を吸収してくれるため、クロスブラウザ対応が容易になるというメリットもあります。
Q2: セレクタで指定した要素が複数ある場合はどうなりますか？
A2: セレクタで指定した要素が複数ある場合、jQueryはそれら全てに対して処理を行います。 例えば、複数の要素の色を変更する場合、全て同じ色に変更されます。
Q3: 複雑な条件で要素を指定したい場合はどうすれば良いですか？
A3: 複数のセレクタを組み合わせたり、":not()"を使って特定の条件を除外することで、複雑な条件でも要素を指定できます。 また、jQueryの豊富なAPIを活用することで、より高度な操作も可能です。
その他の参考記事:jquery removeattr style