jQuery class セレクタ

jQuery class セレクタ：要素のクラス名でスタイリングと操作を簡単に行う方法

本記事では、jQuery の class セレクタを使って、HTML 要素のスタイリングや操作を効率的に行う方法を解説します。特定のクラスを持つ要素を簡単に選択し、jQuery の豊富な機能を活用することで、Web 開発をよりスムーズに進めることができます。

jQuery class セレクタの基本

  • 構文

    .クラス名

    • `.` (ドット)に続けてクラス名を記述することで、指定したクラスを持つ要素を選択します。

  • 例

    • $(".highlight") は、class="highlight" を持つすべての要素を選択します。

  • 複数クラスの指定

    • .クラス名1.クラス名2 で、複数のクラスを持つ要素を選択できます。

class セレクタを使ったスタイリング

  • CSS プロパティの変更

    • $(".highlight").css("color", "red"); で、class="highlight" の要素の色を赤に変更します。

  • クラスの追加と削除

    • addClass() と removeClass() を使用して、要素に動的にクラスを追加・削除できます。 
      // クラスの追加
$(".box").addClass("active");

// クラスの削除
$(".box").removeClass("active");

class セレクタを使った要素操作

  • イベントハンドラの追加

    • $(".button").click(function() { ... }); で、class="button" の要素にクリックイベントを設定できます。 
      $(".button").click(function() {
  alert("ボタンがクリックされました！");
});

  • コンテンツの操作

    • text(), html(), val() を使って、要素のテキスト、HTML コンテンツ、フォームの値を取得・設定できます。 
      // テキストの取得と設定
let text = $(".title").text();
$(".title").text("新しいタイトル");

// HTML コンテンツの取得と設定
let html = $(".content").html();
$(".content").html("
      新しいコンテンツ
      ");

// フォームの値の取得と設定
let value = $("#input-field").val();
$("#input-field").val("新しい値");

実用的な例

  • 特定のクラスを持つ要素の表示/非表示

    • $(".hidden").hide(); で、class="hidden" の要素を非表示にします。 
      // 非表示にする
$(".hidden").hide();

// 表示する
$(".hidden").show();

  • フォームのバリデーション

    • 特定のクラスを持つ入力フィールドの値をチェックします。 
      $("#my-form").submit(function(event) {
  let isValid = true;

  $(".required").each(function() {
    if ($(this).val() === "") {
      isValid = false;
      $(this).addClass("error");
    } else {
      $(this).removeClass("error");
    }
  });

  if (!isValid) {
    event.preventDefault();
    alert("入力内容を確認してください。");
  }
});

  • 動的なコンテンツの読み込み

    • AJAX を使用して、特定のクラスを持つ要素にコンテンツを動的に読み込みます。 
      $.ajax({
  url: "content.html",
  success: function(data) {
    $(".content-container").html(data);
  }
});

まとめ

jQuery の class セレクタは、Web 開発において非常に強力なツールです。クラス名を使って要素を選択し、スタイリングや操作を簡単に行うことができます。本記事で紹介した内容を参考に、jQuery を活用して、より魅力的でインタラクティブな Web サイトを作成しましょう。

関連情報

よくある質問

質問 回答
class セレクタと id セレクタの違いは何ですか？ class セレクタは複数の要素に適用できるのに対し、id セレクタはページ内で一意の要素にのみ適用できます。
複数のクラスを持つ要素を選択するにはどうすればよいですか？ 複数のクラス名をドットでつないで指定します。例えば、.class1.class2 は、class1 と class2 の両方を持つ要素を選択します。
jQuery を使わずにクラス名で要素を選択するにはどうすればよいですか？ JavaScript の document.getElementsByClassName() メソッドを使用できます。

その他の参考記事:jquery class 変更