recherche

Maison  >  Article  >  interface Web  >  Comment utiliser jQuery pour modifier le contenu des éléments HTML

Comment utiliser jQuery pour modifier le contenu des éléments HTML

PHPz
PHPzoriginal
2023-04-17 10:30:101345parcourir

JQuery est une bibliothèque JavaScript populaire conçue pour trouver facilement des éléments dans des documents HTML, puis les utiliser. Dans cet article, nous verrons comment utiliser jQuery pour modifier le contenu d'un élément HTML (c'est-à-dire un élément ), et cette modification est obtenue par un clic de l'utilisateur (c'est-à-dire un clic).

Première étape : Préparation

Avant de commencer à écrire du code jQuery, nous devons préparer notre page HTML. Ce qui suit est un exemple de page HTML simple, qui contient un élément < span > et un bouton : 

<!DOCTYPE html>
<html>
  <head>
    <title>jquery demo</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#clickButton").click(function(){
          $("span").text("你点击了按钮！");
        });
      });
    </script>
  </head>
  <body>

    <h1>JQuery事件点击修改span内容</h1>
    <p>点击下面的按钮!</p>

    <button id="clickButton">点击这里</button>

    <p>点这里看看下面<span>会变化</span>！</p>

  </body>
</html>

Dans cet exemple, nous avons introduit la bibliothèque jQuery et défini un élément qui a été associé à l'élément < Cliquez sur l'écouteur d'événement. Cet écouteur d'événement sera déclenché lorsque l'utilisateur clique sur le bouton et modifie le contenu du texte de l'élément < span > en "Vous avez cliqué sur le bouton !" 

Maintenant, expliquons la signification de ce code un par un.

Étape 2 : liaison d'événement jQuery

La fonction $(document).ready() est l'une des fonctions spéciales de jQuery, qui est utilisée pour exécuter notre code lorsque la page est prête. Cela signifie que le code à l'intérieur de la fonction $(document).ready() sera exécuté dès que l'arborescence DOM sera chargée. Par conséquent, nous devons lier une fonction pour notre événement click dans ce bloc.

Nous utilisons $("#clickButton").click() pour lier un événement de clic, qui sera déclenché lorsque l'utilisateur clique sur un bouton portant l'ID "clickButton". Notez que nous pouvons également utiliser des sélecteurs de classe ou des sélecteurs de balises pour faire correspondre les éléments HTML, mais dans ce cas, nous utilisons le sélecteur d'ID.

Dans le gestionnaire d'événements click, nous utilisons la méthode $ ("span").text() pour modifier le contenu du texte de l'élément < span > Nous avons transmis un paramètre de chaîne dans la méthode « Vous avez cliqué sur le bouton ! », afin que nous puissions facilement modifier le contenu du texte de l'élément <

Troisième étape : Résultats du test

Maintenant, nous ouvrons la page contenant le code HTML ci-dessus et cliquons sur le bouton, nous pouvons observer que le contenu du texte dans l'élément < span > Dans cet exemple, nous utilisons du code jQuery très basique, mais cela nous donne un bon point de départ pour comprendre comment utiliser jQuery pour modifier des éléments sur une page HTML. Si nécessaire, vous pouvez étendre cet exemple de code en fonction de vos besoins.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment introduire Vue via CDN et réaliser un transfert de valeur sur différentes pagesArticle suivant：Comment introduire Vue via CDN et réaliser un transfert de valeur sur différentes pages

Articles Liés

Voir plus