jQuery を使用してクリック イベントをバインドするサンプル チュートリアル

jQuery クリック イベント バインディングのサンプル チュートリアル

Web 開発では、クリック イベントは最も一般的に使用される対話方法の 1 つです。 jQuery を使用すると、クリック イベントをページ要素に簡単にバインドして、さまざまなインタラクティブな効果を実現できます。この記事では、jQuery を使用してクリック イベントをバインドする方法を紹介し、具体的なコード例を示します。

1. jQuery ライブラリの導入

jQuery を使用する前に、まず HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN 経由でリンクするか、jQuery ファイルをローカルにダウンロードして、それを HTML ファイルに導入できます。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

2. クリック イベントのバインド

jQuery を使用してクリック イベントをページ要素にバインドするのは非常に簡単で、click() メソッドによって実現できます。以下は簡単な例です:

  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>



点击我

<script>
$(document).ready(function(){
  $("#btn").click(function(){
    alert("按钮被点击了！");
  });
});
</script>

上記のコードでは、ボタンをクリックすると、「ボタンがクリックされました!」と表示する警告ボックスが表示されます。これは、単純なクリック イベント バインディングの例です。

3. イベント委任

jQuery は、クリック イベントを動的に生成された要素にバインドできるイベント委任メソッドも提供します。これは状況によっては非常に便利です。以下はイベント委任の例です。

  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>




  
第一项
  
第二项

添加新项

<script>
$(document).ready(function(){
  $("#list").on("click", "li", function(){
    alert($(this).text() + "被点击了！");
  });

  $("#add").click(function(){
    $("#list").append("<li>新项</li>");
  });
});
</script>

上記のコードでは、リスト項目をクリックすると、アラート ボックスがポップアップして、クリックされた項目の内容が表示されます。 「新規項目の追加」ボタンをクリックすると、リストに新規項目が追加され、新規項目にもクリックイベントが発生します。

上記の例を通じて、誰もが jQuery クリック イベント バインディングについてすでにある程度理解していると思います。実際のプロジェクトでは、より豊かなインタラクティブ効果を実現するために、ニーズに応じてさらに多くの jQuery イベント バインディング メソッドを使用できます。この記事が皆さんのお役に立てれば幸いです、読んでいただきありがとうございます!

以上がjQuery を使用してクリック イベントをバインドするサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。