jQuery セレクタ

jQueryでは、HTML要素を「選択」するために「セレクタ」を使用します。セレクタは、基本的にはCSSのセレクタと同様です。

$("p") // すべての<p>要素を選択
$(".myClass") // "myClass"クラスを持つすべての要素を選択
$("#myId") // "myId" IDを持つ要素を選択

jQueryのセレクタとは？

jQueryのセレクタは、DOM（Document Object Model）内の要素を特定し選択するための表記方法です。セレクタを用いて要素を選択した後、その要素に対してさまざまな操作（メソッド）を行うことができます。

jQueryを使う際に最もよく見るのは$で始まる形式です。

$は、実際には関数jQuery()の短縮形で、その引数にはセレクタ文字列やHTML文字列、関数などを指定できます。

たとえば、以下の2つのコードは同じ動作をします。

$('p').hide(); // $を使用
jQuery('p').hide(); // jQueryを使用

両方とも、すべての<p>要素を非表示にします。

ただし、$は他のライブラリでもよく使われる記号であり、他のライブラリとの衝突を避けるためにjQueryのnoConflictモードを使用する場合は$の代わりにjQueryを使うこともあります。

以下に、jQueryでよく使用される基本的なセレクタをいくつか紹介します。

$('p') // すべての<p>要素を選択
$('#myID') // id="myID"の要素を選択
$('.myClass') // class="myClass"のすべての要素を選択

jQueryでは、より高度なセレクタも使用することができます。これにより、複雑な要素の選択も可能になります。

$('div p') // <div>要素の下にあるすべての<p>要素を選択
$('div > p') // <div>要素の直下にあるすべての<p>要素を選択

これらがjQueryのセレクタの基本です。適切なセレクタを使いこなせるようになると、より効率的でパワフルなコードを書くことができます。