よく使われる jQueryセレクタ

jQueryを学ぶには、そのセレクタを学ぶ必要があります。このセクションでは、よく使われるjQueryセレクタについて学びます。 jQueryセレクタは、名前、ID、クラス、タイプ、属性、属性値に基づいてHTML要素を「見つける」または選択するために使用されます。

ほとんどの場合、jQueryのセレクタ関数$()から始めることになります。

1. jQuery IDセレクタ

IDセレクタは、最も一般的に使用されるjQueryセレクタで、ページから特定の1つの要素だけを選択するために使用されます。参照を取得したい要素のidを#記号から順に指定します。

<div id=”example”>
   <p>this is simple example of jquery id selector </p>
</div>

<script>
   $(document).ready(function(){
      $(“#example”).css(“border”,2px solid red”);
   });
</script>

2. jQuery Classセレクタ

Iクラスセレクタは、jQueryのセレクタの中で最も一般的なもので、HTMLページから要素のグループを選択するために使用されます。クラスはjQueryのスタイル指定に使われますが、スタイル指定がない場合でも、関連する要素をグループ化するのに使うことができます。

<div class=”example”>
   <p>this is simple example of jquery class selector </p>
</div>

<script>
   $(document).ready(function(){
      $(“.example”).css(“border”,2px solid red”);
   });
</script>

3. jQuery element セレクタ

jQueryの要素セレクタは、HTMLページから指定されたすべての要素を選択します。例えば、$(“span”)はすべての段落を選択し、$(“div”)はすべてのdivを選択します。タグセレクタの内部では getElementsByTagName()関数を呼び出して、DOMから適切な要素を返します。

<div id="example" class=”example” >
   <p>this is simple example of jquery element selector </p>
</div>

<script>
   $(document).ready(function(){
      $(“div”).css(“border”,2px solid red”);
   });
</script>

4. jQuery 子セレク

子セレクタは、子孫セレクタと似ていますが、直接の子要素のみを返します。例えば、$(“div > span”) は、div要素の直接の子であるspanをすべて返します。

<div id="example" class=”example”>
   <p>this is simple example of jquery element selector </p>
</div>

<script>
   $(document).ready(function(){
      $(“div > p ”).css(“border”,2px solid red”);
   });
</script>

5. jQuery マルチプルチセレクタ

マルチプルセレクタは、$(selector1, selector2, selector3)のように複数のセレクタを組み合わせて検索するために使用され、指定したすべてのセレクタを組み合わせた結果を選択します。個々のセレクタは、カンマで区切られることを忘れないでください。

<div id="example" class=”example”>
   <p>this is simple example of jquery multiple selector </p>
   <span>this is simple example of jquery multiple selector</span>
</div>


<script>
   $(document).ready(function(){
      $(“div, p, span ”).css(“border”,2px solid red”);
   });
</script>

6. jQuery ユニバーサルセレクタ

ユニバーサルセレクタは、すべての要素を選択するために使用します。例えば、$(*)はHTMLページからすべての要素を選択します。これは、HTMLページのすべての要素にスタイルを適用したい場合に便利です。

<div id="example”>
   <p>this is simple example of universal selector  </p>
</div>

<script>
   $(document).ready(function()
      $(“*”).css(“border”,2px solid red”);
   });
</script>

クラスセレクタとIDセレクタの使い分けが一般的ですが、様々なタイプのセレクタを知ることで、より効果的にjQueryを使用することができます。jQueryの性能を最大限に発揮させるためには、最も特殊なセレクタを使用することを常に念頭に置いてください。