Exemple de tutoriel sur la liaison d'événements de clic à l'aide de jQuery

Tutoriel d'exemple de liaison d'événement de clic jQuery

Dans le développement Web, les événements de clic sont l'une des méthodes d'interaction les plus couramment utilisées. Grâce à jQuery, nous pouvons facilement lier des événements de clic aux éléments de page pour obtenir divers effets interactifs. Cet article explique comment utiliser jQuery pour lier des événements de clic et fournit des exemples de code spécifiques.

1. Présentez la bibliothèque jQuery

Avant d'utiliser jQuery, vous devez d'abord introduire la bibliothèque jQuery dans le fichier HTML. Vous pouvez créer un lien via CDN ou télécharger le fichier jQuery localement, puis l'introduire dans le fichier HTML.

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

2. Lier les événements de clic

Utiliser jQuery pour lier les événements de clic aux éléments de la page est très simple et peut être réalisé via la méthode click(). Voici un exemple simple :

  
  <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>

Dans le code ci-dessus, lorsque le bouton est cliqué, une boîte d'avertissement apparaît indiquant "Le bouton a été cliqué !". Il s'agit d'un simple exemple de liaison d'événement de clic.

3. Délégation d'événements

jQuery fournit également des méthodes de délégation d'événements, qui peuvent lier des événements de clic à des éléments générés dynamiquement. Cela peut être très utile dans certaines situations. Voici un exemple de délégué d'événement :

  
  <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>

Dans le code ci-dessus, lorsqu'un élément de liste est cliqué, une boîte d'alerte apparaît pour afficher le contenu de l'élément cliqué. Lorsque vous cliquez sur le bouton « Ajouter un nouvel élément », un nouvel élément est ajouté à la liste et le nouvel élément comporte également un événement de clic.

Grâce aux exemples ci-dessus, je pense que tout le monde a déjà une certaine compréhension de la liaison d'événement de clic jQuery. Dans les projets réels, davantage de méthodes de liaison d'événements jQuery peuvent être utilisées en fonction des besoins pour obtenir des effets interactifs plus riches. J'espère que cet article sera utile à tout le monde, merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!