Afficher et masquer les balises jquery

Dans le développement Web, afin de rendre les pages Web plus belles et plus faciles à utiliser, nous utilisons souvent divers effets et fonctionnalités interactives. Parmi eux, l’affichage et le masquage des étiquettes sont une fonctionnalité très courante. jQuery est un outil très courant lors de la mise en œuvre de cette fonctionnalité. Cet article explique comment utiliser jQuery pour afficher et masquer les étiquettes.

1. Afficher et masquer des éléments

Avant d'utiliser jQuery pour afficher et masquer des étiquettes, nous devons d'abord comprendre comment afficher et masquer des éléments de pages Web. jQuery propose deux méthodes pour obtenir cet effet, à savoir show() et hide().

Utilisez la méthode show() pour afficher les éléments. Cette méthode ne nécessite aucun paramètre, il suffit de l'appeler pour afficher l'élément. Par exemple, si nous voulons afficher un élément avec l'identifiant "myElement", nous pouvons utiliser le code suivant :

$("#myElement").show();

De même, utilisez la méthode hide() pour masquer l'élément. Cette méthode ne nécessite également aucun paramètre, son simple appel masquera l'élément. Par exemple, si nous voulons masquer un élément avec l'identifiant "myElement", nous pouvons utiliser le code suivant :

$("#myElement").hide();

Les deux méthodes ci-dessus peuvent agir directement sur les éléments de la page Web, et elles peuvent être appelées multiples fois sur un élément. Il n’y a aucun problème avec les deux méthodes. Par exemple, nous pouvons d'abord afficher un élément puis le masquer :

$("#myElement").show();
$("#myElement").hide();

2. Utilisez la méthode toggle() pour afficher et masquer les étiquettes

En plus des méthodes show() et hide(), jQuery fournit également un La méthode toggle() peut basculer un élément entre l’affichage et le masquage. Cette méthode nécessite un paramètre facultatif pour indiquer la vitesse de commutation. Si ce paramètre n'est pas spécifié, la valeur par défaut est 400 (soit 400 millisecondes).

Ce qui suit est un exemple d'utilisation de la méthode toggle() pour afficher et masquer les étiquettes :

$("#toggleButton").click(function(){
  $("#myElement").toggle();
});

Dans cet exemple, nous avons créé un bouton avec le texte "Toggle" dessus. Lorsque l'utilisateur clique sur ce bouton, nous effectuons la bascule. () est utilisée pour basculer l'élément entre l'affichage et le masquage. Plus précisément, lorsque l'élément est visible, l'utilisation de la méthode toggle() le masquera, et lorsque l'élément est invisible, l'utilisation de la méthode toggle() l'affichera.

3. Utilisez les méthodes slideDown() et slideUp() pour obtenir des effets d'animation d'étiquettes

En plus d'utiliser les méthodes show(), hide() et toggle(), nous pouvons également utiliser les méthodes slideDown() et slideUp( ) méthodes pour implémenter des effets d’animation d’étiquette. Ces deux méthodes peuvent afficher et masquer des éléments de manière coulissante et définir des fonctions de vitesse et de rappel.

Utilisez la méthode slideDown() pour faire glisser l'élément du dessus pour l'afficher :

$("#slideDownButton").click(function(){
  $("#myElement").slideDown();
});

Utilisez la méthode slideUp() pour faire glisser l'élément du dessous pour le masquer :

$("#slideUpButton").click(function(){
  $("#myElement").slideUp();
});

En même temps, on peut aussi combiner ces deux méthodes pour obtenir un effet de commutation :

$("#slideToggleButton").click(function(){
  $("#myElement").slideToggle();
});

4. Utilisez les méthodes fadeIn() et fadeOut() pour obtenir l'effet de fondu entrant et sortant des étiquettes

En plus d'utiliser les méthodes slideDown() et slideUp() , nous pouvons également utiliser les méthodes fadeIn() et fadeOut() pour obtenir l'effet de fondu d'entrée et de sortie des étiquettes. Ces deux méthodes peuvent progressivement afficher et masquer des éléments, et peuvent également définir des fonctions de vitesse et de rappel.

Utilisez la méthode fadeIn() pour faire un fondu entrant et afficher l'élément :

$("#fadeInButton").click(function(){
  $("#myElement").fadeIn();
});

Utilisez la méthode fadeOut() pour faire un fondu sortant et masquer l'élément :

$("#fadeOutButton").click(function(){
  $("#myElement").fadeOut();
});

De même, nous pouvons également combiner ces deux méthodes pour obtenir un effet de commutation. :

$("#fadeToggleButton").click(function(){
  $("#myElement").fadeToggle();
});

Grâce à l'introduction ci-dessus, nous avons appris à utiliser jQuery pour afficher et masquer les étiquettes, et avons également appris à utiliser différents effets et animations pour obtenir divers effets avancés. J'espère que cet article vous aidera !

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!