Comment utiliser jquery en HTML-Questions et réponses frontales-php.cn

Comment utiliser jquery en HTML

PHPz

Libérer： 2023-04-26 10:49:38

original

3177 Les gens l'ont consulté

Comment utiliser jQuery en HTML

jQuery est une bibliothèque JavaScript populaire qui simplifie la tâche des développeurs car elle fournit une API facile à utiliser qui vous aide à écrire rapidement du code JavaScript efficace. Cet article explique comment utiliser jQuery avec HTML.

Introduire jQuery dans HTML

Vous devez introduire la bibliothèque jQuery dans HTML avant de pouvoir l'utiliser ailleurs. En règle générale, vous ajoutez le code suivant dans l'en-tête de votre HTML :

<head>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

Copier après la connexion

Le code ci-dessus suppose que vous utilisez un CDN jQuery public, si vous utilisez un fichier jQuery local, remplacez le chemin par votre chemin de fichier local.

Utilisation de jQuery

Après avoir référencé jQuery, vous pouvez utiliser les méthodes et fonctions qu'il contient. Voici quelques-unes des méthodes jQuery les plus couramment utilisées :

Sélecteurs d'éléments

jQuery utilise les mêmes sélecteurs d'éléments que CSS, vous pouvez donc facilement sélectionner des éléments dans votre document HTML. Par exemple, pour sélectionner tous les éléments p, utilisez le code suivant :

$("p")

Copier après la connexion

Pour sélectionner l'élément avec l'identifiant myDiv, utilisez le code suivant :

$("#myDiv")

Copier après la connexion

Pour sélectionner tous les éléments avec la classe myClass, utilisez le code suivant :

$(".myClass")

Copier après la connexion

Event Gestion de

jQuery vous permet de lier facilement des écouteurs d'événements sur des éléments HTML. Par exemple, pour exécuter du code en cliquant sur un bouton, utilisez le code suivant :

$("button").click(function() {
  // 这里是代码逻辑
});

Copier après la connexion

Ce code trouvera tous les boutons de la page et exécutera la logique de code spécifiée en cliquant sur un bouton.

Manipulation DOM

jQuery fournit de nombreuses fonctions pratiques de manipulation DOM. Par exemple, pour ajouter un élément à la page, utilisez le code suivant :

$("body").append("<p>Hello World!</p>");

Copier après la connexion

Ce code ajoutera un nouvel élément p à la page et y ajoutera le texte "Hello World!".

Les autres opérations DOM couramment utilisées incluent :

Supprimer des éléments : $("p").remove();$("p").remove();
隐藏元素：$("p").hide();
更改元素内容：$("p").text("new text");

$("p").hide( );

Modifier le contenu de l'élément : `$("p").text("new text");`

Ajax

jQuery fournit un moyen de simplifier les appels Ajax. Pour exécuter une requête Ajax à l'aide de jQuery, utilisez le code suivant :

$.ajax({
  url: "myurl",
  success: function(result) {
    // 这里是返回数据的逻辑
  }
});

Copier après la connexion

Ce code enverra une requête Ajax à l'URL spécifiée et exécutera la logique de code spécifiée en cas de succès.

Conclusion🎜🎜Dans cet article, nous avons expliqué comment utiliser les méthodes jQuery courantes en HTML. Si vous débutez avec jQuery, ces méthodes devraient suffire pour vous permettre de commencer à écrire du code simple. Nous vous recommandons également de consulter la documentation de l'API jQuery pour en savoir plus sur les méthodes et fonctionnalités disponibles. 🎜

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!