Comment afficher les étiquettes cachées à l'aide de jQuery

Avec le développement continu de la technologie Web, l'interactivité des pages Web est devenue de plus en plus importante. Parmi eux, jQuery, en tant que bibliothèque JavaScript populaire, est largement utilisée dans le développement front-end, apportant commodité et efficacité aux développeurs. Cet article explique comment utiliser jQuery pour afficher les étiquettes masquées.

1. Qu'est-ce qu'une balise cachée ? En HTML, vous pouvez utiliser des styles CSS pour contrôler la visibilité des éléments, les masquant ainsi. Les méthodes de masquage courantes sont les suivantes :

display:none : masque complètement l'élément, sans prendre de place ni l'afficher.

1. visibilité : caché : cache l'élément, mais prend toujours de la place, mais ne l'affiche pas.
2. opacity:0 : Définissez la transparence de l'élément sur 0. Le contenu de l'élément n'est pas visible, mais il prend quand même de la place.
3. Quelle que soit la méthode utilisée pour masquer des éléments, si vous devez afficher ces éléments, vous pouvez utiliser jQuery pour y parvenir.

2. Utilisez jQuery pour afficher les étiquettes cachées

Ce qui suit présente trois méthodes d'utilisation de jQuery pour afficher les étiquettes cachées.

Utilisez la méthode show()

1. méthode show() pour afficher les éléments de l'état caché. L'utilisation spécifique est la suivante :

$(selector).show();

Parmi eux, le sélecteur est le sélecteur de l'élément à afficher. Vous pouvez utiliser le nom de la balise, le nom de la classe, l'ID, etc.

L'exemple de code est le suivant :

<div id="content" style="display:none;">
    <p>这是一段隐藏的文字。</p>
</div>
<button id="showBtn">显示内容</button>

$(document).ready(function(){
  $("#showBtn").click(function(){
    $("#content").show();
  });
});

Après avoir cliqué sur le bouton, le contenu masqué sera affiché.

Utilisez la méthode fadeIn()

2. fadeIn() pour afficher les éléments de manière dégradée. L'utilisation spécifique est la suivante :

$(selector).fadeIn(speed,callback);

Parmi eux, selector est le sélecteur de l'élément à afficher, et speed est la vitesse du dégradé, en millisecondes. le rappel est une fonction à exécuter une fois le dégradé terminé, paramètres facultatifs.

L'exemple de code est le suivant :

<div id="content" style="display:none;">
    <p>这是一段隐藏的文字。</p>
</div>
<button id="fadeInBtn">渐变显示</button>

$(document).ready(function(){
  $("#fadeInBtn").click(function(){
    $("#content").fadeIn(1000);
  });
});

Après avoir cliqué sur le bouton, le contenu masqué sera affiché dans un dégradé.

Utilisez la méthode slideDown()

3. slideDown() pour afficher les éléments de manière coulissante. L'utilisation spécifique est la suivante :

$(selector).slideDown(speed,callback);

Parmi eux, le sélecteur est le sélecteur de l'élément à afficher, et la vitesse est la vitesse de glissement en millisecondes. le rappel est une fonction à exécuter une fois le glissement terminé, paramètres facultatifs.

L'exemple de code est le suivant :

<div id="content" style="display:none;">
    <p>这是一段隐藏的文字。</p>
</div>
<button id="slideDownBtn">滑动显示</button>

$(document).ready(function(){
  $("#slideDownBtn").click(function(){
    $("#content").slideDown(1000);
  });
});

Après avoir cliqué sur le bouton, le contenu masqué sera affiché de manière coulissante.

3. Résumé

Cet article présente trois méthodes d'utilisation de jQuery pour afficher les étiquettes cachées : show(), fadeIn(), slideDown(). Ces méthodes peuvent être sélectionnées en fonction de besoins spécifiques, rendant l'interactivité de la page plus riche et plus flexible. Dans le même temps, les développeurs peuvent également implémenter eux-mêmes d’autres effets plus personnalisés basés sur les principes de ces méthodes.

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!