jQuery セレクタ
![](https://codinghaku.com/wp-content/uploads/2023/06/jq.jpg.webp)
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でよく使用される基本的なセレクタをいくつか紹介します。
- エレメントセレクタ:
"p"
,"div"
など、HTMLのタグ名を指定します。 - IDセレクタ:
"#id"
の形式で、HTMLのid属性を指定します。 - クラスセレクタ:
".class"
の形式で、HTMLのclass属性を指定します。
$('p') // すべての<p>要素を選択
$('#myID') // id="myID"の要素を選択
$('.myClass') // class="myClass"のすべての要素を選択
高度なセレクタ
jQueryでは、より高度なセレクタも使用することができます。これにより、複雑な要素の選択も可能になります。
- 子孫セレクタ:
"parent descendant"
の形式で、特定の親要素の下にある特定の子孫要素を選択します。 - 子セレクタ:
"parent > child"
の形式で、特定の親要素の直下にある特定の子要素を選択します。
$('div p') // <div>要素の下にあるすべての<p>要素を選択
$('div > p') // <div>要素の直下にあるすべての<p>要素を選択
これらがjQueryのセレクタの基本です。適切なセレクタを使いこなせるようになると、より効率的でパワフルなコードを書くことができます。
コメント