Webサイト制作者必見！jQueryでクラスと入力タイプを駆使したスマートな要素選択術

2024-06-28

jQueryでクラスと入力タイプを使って要素を選択する方法

クラスセレクタ

特定のクラスを持つ要素を選択するには、ピリオド(".")とクラス名の組み合わせを使用します。

$('.myClass');

このコードは、myClass というクラスを持つすべての要素を選択します。

入力タイプセレクタ

入力要素のタイプに基づいて要素を選択するには、:input セレクタと type 属性を使用します。

$('input[type="text"]');

このコードは、type 属性が "text" のすべての入力要素を選択します。

複合セレクタ

クラスセレクタと入力タイプセレクタを組み合わせて、より具体的な要素を選択することができます。

$('.myClass input[type="text"]');

例

以下の例は、myForm というフォーム内のすべてのチェックボックスを選択し、選択されたチェックボックスの値をコンソールに表示する方法を示しています。

$(document).ready(function(){
  $('.myForm input[type="checkbox"]').change(function(){
    var values = $(this).val();
    console.log(values);
  });
});

このコードは、まず document.ready 関数を使用して、DOMが完全にロードされたらコードを実行します。次に、$('.myForm input[type="checkbox"]') セレクタを使用して、myForm フォーム内のすべてのチェックボックスを選択します。最後に、change イベントハンドラを使用して、チェックボックスが変更されたときに values 変数にチェックボックスの値を格納し、コンソールに表示します。

この例は、クラスと入力タイプセレクタを組み合わせて、特定のフォーム要素を簡単に選択および操作する方法を示しています。

jQueryでクラスと入力タイプを使って要素を選択する：サンプルコード

HTML

<!DOCTYPE html>
<html>
<head>
<title>jQuery セレクタの例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form class="myForm">
    <label for="name">名前:</label>
    <input type="text" id="name" class="myInput">
    <br>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" class="myInput">
    <br>
    <input type="checkbox" id="checkbox1" class="myCheckbox">
    <label for="checkbox1">チェックボックス 1</label>
    <br>
    <input type="checkbox" id="checkbox2" class="otherCheckbox">
    <label for="checkbox2">チェックボックス 2</label>
    <br>
    <button type="submit">送信</button>
  </form>
  <script>
    $(document).ready(function(){
      // クラス "myInput" を持つすべての入力要素を選択
      $('.myInput').css('background-color', '#f0f0f0');

      // 入力タイプが "email" の要素を選択
      $('input[type="email"]').focus(function(){
        $(this).css('border', '2px solid blue');
      }).blur(function(){
        $(this).css('border', '1px solid #ccc');
      });

      // クラス "myCheckbox" を持つチェックボックスが変更されたらイベントハンドラを実行
      $('.myCheckbox').change(function(){
        if ($(this).is(':checked')) {
          $(this).siblings('label').css('font-weight', 'bold');
        } else {
          $(this).siblings('label').css('font-weight', 'normal');
        }
      });
    });
  </script>
</body>
</html>

説明

このコードは以下の処理を実行します。

すべての myInput クラスを持つ入力要素の背景色を薄灰色にする: $('.myInput').css('background-color', '#f0f0f0');
type 属性が "email" の要素にフォーカスされたときに青色のボーダーを表示し、フォーカスが外れたときにグレーのボーダーに戻す:
- focus イベントハンドラ: フォーカスされたときに要素の境界線を青色に設定します。
myCheckbox クラスを持つチェックボックスが変更されたときに、対応するラベルのフォントウェイトを変更する: