jQuery セレクター

Anika Tabassum Era 2024年2月15日 jQuery jQuery Selector

jQuery での 要素セレクター と #id セレクター の使用
jQuery での class selector の使用
jQuery セレクター

jQuery には、HTML 要素のインスタンスを開始するための 3つの基本タイプのセレクター、要素セレクター、#id セレクター、および .class セレクター があります。

次のセクションでは、これらの基本的なセレクターとその機能をカバーする例を示し、セレクターの他の派生可能性のリストを見ていきます。

jQuery での `要素セレクター` と `#id セレクター` の使用

コードスニペット：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
  $('button').click(function(){
    $('#title').css({'color':'blue'});
});
  });
</script>
</head>
<body>
<p id='title'>Text</p>
<button>Text Change</button>

出力：

エレメントセレクターとIDセレクターの使い方

上記のコードには、p タグのコンテンツの色を変更するためのクリックイベントがあります。 p タグに関連付けられた id='title' と、クリックイベントをトリガーするボタン要素があります。ボタン要素は 要素セレクター でインスタンス化され、p は #id セレクター を介して取得されます。

jQuery での `class selector` の使用

コードスニペット：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    $('.x:even').css({'color':'red'});
});
</script>
</head>
<body>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>

出力：

クラスセレクタの使用

いくつかの p タグの後に類似のクラス x が続くことを考慮し、それらを .class セレクター を介して操作して、内容を理解しやすくしました。

均等に配置された p タグは赤く着色されており、プロパティは .class セレクター を考慮したときにトリガーされました。