Maison  >  Article  >  interface Web  >  jquery définit le bouton caché

jquery définit le bouton caché

PHPz
PHPzoriginal
2023-05-28 10:42:081498parcourir

JQuery est une bibliothèque JavaScript rapide et concise qui simplifie la programmation pour une variété de tâches, y compris la définition de boutons masqués. Cet article explique comment utiliser JQuery pour définir un bouton masqué.

  1. Tout d'abord, créez un élément bouton dans la page HTML. Le bouton peut être un élément de type d'entrée "bouton" ou un élément de balise "a".

dc6dce4a544fdca2df29d5ac0ea9906b
6c36071106aa6557b8844cd3a0c1d421
16b28748ea4df4d9c2150843fecfba68

  1. Ajouter un écouteur d'événement en Javascript au bouton effectue le fonction requise lorsque vous cliquez dessus. Utilisez le sélecteur JQuery pour sélectionner le bouton correspondant.

$('#myButton').click(function() {
// votre code ici
});

  1. Dans le gestionnaire d'événements, utilisez le sélecteur JQuery et la méthode .toggle() pour exécuter sur le bouton Masquer/afficher les opérations. La méthode Toggle() bascule la visibilité du bouton en fonction de son état actuel. Si le bouton est masqué, cette méthode affichera le bouton. Cette méthode masque le bouton s'il est déjà affiché.

$('#myButton').click(function() {
$('#myButton').toggle();
});

  1. Si vous avez besoin d'animer le bouton, vous pouvez utiliser .toggle () paramètres de la méthode. Vous pouvez utiliser « lent » ou « rapide » pour spécifier la durée de l'animation, ou vous pouvez utiliser une valeur numérique pour spécifier la durée en millisecondes.

$('#myButton').click(function() {
$('#myButton').toggle('fast');
});

  1. Si vous devez exécuter un autre code lorsque le bouton est masqué, vous pouvez utiliser la fonction de rappel de JQuery. Passez la fonction de rappel comme deuxième paramètre de la méthode .toggle().

$('#myButton').click(function() {
$('#myButton').toggle('fast', function() {

alert('按钮现在已经被隐藏了。');

});
});

  1. sauf En plus de la méthode .toggle(), JQuery fournit également les méthodes .show() et .hide() pour afficher et masquer les éléments respectivement.

$('#myButton').click(function() {
$('#myButton').hide('fast', function() {

alert('按钮现在已经被隐藏了。');

});
});

  1. Enfin , si vous devez utiliser des classes CSS lors du masquage/affichage, vous pouvez utiliser les méthodes .addClass() et .removeClass(). Ces méthodes ajouteront ou supprimeront les classes CSS spécifiées à l'élément.

$('#myButton').click(function() {
$('#myButton').addClass('hidden');
});

La configuration des boutons cachés devient facile en utilisant JQuery, et peut être facilement intégré à d’autres codes JavaScript.

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