jqueryは子要素をクリックしてスタイルを追加します

jQuery を使用して子要素をクリックし、スタイルを追加する方法

jQuery は、コードの単純さと読みやすさを向上させる方法で JavaScript コードを作成できる、人気のある JavaScript ライブラリです。 jQuery には、ページ上の要素を簡単に操作できる一連の便利な DOM 操作関数があります。この記事では、jQuery を使用して子要素をクリックし、スタイルを追加する方法を説明します。

ステップ 1: jQuery を導入する

jQuery ライブラリを HTML ファイルに追加します。公式 Web サイトからダウンロードするか、HTML ファイルで jQuery の CDN に直接接続できます。ここでは CDN を例に挙げます。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

ステップ 2: HTML と CSS コードを記述する

クリックされる複数のサブ要素を含む HTML ページを準備します。同時に、クリック後のスタイルの変化を区別するためにCSSでスタイルを設定します。例:

<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.child {
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
}

.clicked {
  background-color: yellow;
}

ここでは、クリックされると背景色が変わる 3 つの子要素を設定します。

ステップ 3: jQuery コードを記述する

子要素がクリックされたときに何が起こるかを処理するコードを記述する必要があります。まず、すべての子要素を選択する必要があります。 jQuery の子要素セレクターを使用すると、親要素の下にあるすべての子要素を簡単に選択できます。

var children = $('#parent > .child');

次に、各子要素にクリック イベント リスナーを追加する必要があります。これは、jQuery の each() 関数を使用して行うことができます。この関数は、各要素に適用されるコールバック関数を受け入れます。このコールバック関数では、クリック イベント リスナーを追加して、子要素のスタイルを増やします。

children.each(function() {
  $(this).on('click', function() {
    $(this).addClass('clicked');
  });
});

ここでは、jQuery の on() 関数を使用してクリック イベント リスナーを追加します。この関数は 2 つのパラメータを受け入れます。 1 つ目はイベント タイプで、「クリック」を使用しました。 2 番目のパラメータはコールバック関数で、クリックが応答したときに実行されます。このコールバック関数では、子要素に対して addClass() 関数を呼び出して、「クリックされた」クラスを子要素に追加します。子要素の背景色を変更する「クリックされた」クラスを定義します。

完全な jQuery コードは次のとおりです。

$(document).ready(function() {

  var children = $('#parent > .child');

  children.each(function() {
    $(this).on('click', function() {
      $(this).addClass('clicked');
    });
  });

});

最後に、すべてのコードを $(document).ready() 関数に配置し、DOM が完全にロードされた後に実行します。

結論

この記事では、jQuery を使用して子要素をクリックし、スタイルを追加する方法を学習しました。すべての子要素を選択し、各子要素にクリック イベント リスナーを追加する必要があります。コールバック関数では、addClass() 関数を使用して子要素にクラスを追加できるため、子要素にさまざまなスタイルを追加できます。子要素の他の属性を追加したい場合は、クリック イベント リスナーで学習して練習することもできます。

以上がjqueryは子要素をクリックしてスタイルを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。