Quelle fonction jquery utilise-t-il pour afficher et masquer des éléments ?

WBOY
Libérer: 2022-04-15 11:26:05
original
2653 Les gens l'ont consulté

Les fonctions sont : 1. show(), cette méthode peut afficher les éléments cachés, la syntaxe est "element object.show()" ; 2. hide(), cette méthode peut masquer les éléments affichés, la syntaxe est "element" ; object.hide()"; 3. toggle(), cette méthode peut afficher ou masquer des éléments, la syntaxe est "element object.toggle()".

Quelle fonction jquery utilise-t-il pour afficher et masquer des éléments ?

L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.2.1, ordinateur Dell G3.

Quelle fonction jquery utilise-t-il pour afficher et masquer des éléments ?

1. Afficher les éléments : show()

Si les éléments sélectionnés ont été masqués, affichez ces éléments :

Syntaxe

$(selector).show(speed,callback)
Copier après la connexion
  • speed peut sélectionner. Spécifie la rapidité avec laquelle un élément passe de masqué à entièrement visible. La valeur par défaut est "0".

Valeurs possibles :

millisecondes (par exemple 1500)

"lent"

"normal"

"rapide"

Avec la vitesse définie, lorsque l'élément passe de caché à entièrement visible, il changera progressivement sa hauteur, sa largeur, ses marges, son remplissage et sa transparence.

  • rappel facultatif. La fonction à exécuter après l'exécution de la fonction show. Ce paramètre ne peut être défini que si le paramètre de vitesse est défini.

2. Élément caché : hide()

Si l'élément sélectionné a été affiché, masquez l'élément.

Syntaxe

$(selector).hide(speed,callback)
Copier après la connexion
  • vitesse facultative. Spécifie la rapidité avec laquelle un élément passe de visible à masqué. La valeur par défaut est "0".

Valeurs possibles :

millisecondes (comme 1500)

"lent"

"normal"

"rapide"

Avec la vitesse réglée, l'élément passera progressivement du visible au caché Modifier sa hauteur, largeur, marges, remplissage et transparence.

  • rappel facultatif. La fonction à exécuter après l'exécution de la fonction de masquage.

Ce paramètre ne peut être défini que si le paramètre de vitesse est défini.

Les exemples sont les suivants :

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").hide();
  });
  $(".btn2").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
Copier après la connexion

Résultats de sortie :

Quelle fonction jquery utilise-t-il pour afficher et masquer des éléments ?

3. Identifier, afficher ou masquer automatiquement les éléments : toggle()

la méthode toggle() exécute hide() et show() sur l'élément sélectionné. élément basculer entre.

Cette méthode vérifie l'état visible de l'élément sélectionné. Si un élément est masqué, show() est exécuté, si un élément est visible, hide() est exécuté – cela crée un effet bascule.

Remarque : Les éléments masqués ne seront pas entièrement affichés (n'affectent plus la mise en page de la page).

Conseils : Cette méthode peut être utilisée pour basculer entre les fonctions personnalisées.

Grammar

$(selector).toggle(speed,easing,callback)
Copier après la connexion

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换  hide() 和 show()</button>
</body>
</html>
Copier après la connexion

Résultat de sortie :

Quelle fonction jquery utilise-t-il pour afficher et masquer des éléments ?

Tutoriels vidéo associés recommandés : Tutoriel vidéo jQuery

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!