Maison > Article > interface Web > Comment afficher et masquer les boutons de clic dans jQuery
Comment afficher et masquer les boutons de clic dans jQuery
- yuliaoriginal
- 2018-10-29 15:41:3717779parcourir
jQuery peut implémenter de nombreuses fonctions facilement et rapidement, il est donc largement utilisé dans le développement front-end. Amis qui apprennent jQuery, utiliserez-vous jQuery pour obtenir l'effet de cliquer pour afficher puis de cliquer pour masquer (c'est-à-dire, jQuery double-cliquez pour masquer) ? Cet article vous expliquera comment utiliser jQuery pour obtenir l'effet d'affichage et de masquage des clics. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.
Ce qui suit présente deux méthodes permettant à jQuery d'implémenter l'affichage et le masquage des clics. L'une est la méthode toggle() et l'autre est les méthodes hide() et show() dans jquery.
Remarque : assurez-vous d'importer le fichier jQuery, sinon l'effet ne peut pas être obtenu
1 La méthode toggle() dans jquery
toggle. () Vous pouvez y ajouter deux fonctions ou plus, puis passer à l'événement click Lorsque vous cliquez, la première fonction spécifiée est appelée, et lorsque vous cliquez à nouveau, la deuxième fonction est appelée, et ainsi de suite, en appelant. une boucle.
Syntaxe : $(selector).toggle(function)
la fonction fait référence à la fonction qui doit être exécutée lorsque vous cliquez dessus.
Description de l'instance : Lorsque l'option "Afficher et masquer" Le bouton "Toggle" est cliqué pour la première fois. Lorsque vous cliquez dessus, le contenu de la balise P est masqué. Lorsque vous cliquez à nouveau, le contenu de la balise P est affiché. Le code complet est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">显示与隐藏切换</button>
<p>我可以显示也可以隐藏</p>
<p>啦啦啦</p>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").toggle();
});
});
</script>
</html>Comme le montre l'image ci-dessous, la première image est l'effet lorsqu'il n'y a pas de clic. Les deux images sont l'effet lorsqu'on clique pour la première fois, avec le contenu masqué.
2. Les méthodes hide() et show() dans jquery
hide () peut masquer les éléments sélectionnés, similaire à l'attribut display:none en CSS. La méthode show() peut afficher les éléments sélectionnés masqués. L'utilisation de hide() et show() est la même, sauf que l'un est affiché et l'autre est masqué.
Syntaxe : $(selector).hide(speed,easing,callback)
speed représente la vitesse de l'effet d'affichage, qui est une valeur facultative (lent, rapide, millisecondes)
easing Utilisé pour définir la vitesse des éléments à différents points de l'animation. C'est une valeur facultative (swing, linéaire)
le rappel indique la fonction qui doit être exécutée après l'exécution de la méthode show(). valeur facultative
Exemple de description : Lorsque vous cliquez sur le bouton "Masquer", le contenu de la balise P est masqué. Lorsque vous cliquez sur le bouton "Afficher", le contenu de la balise P est affiché. est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p id="p1">点击隐藏按钮，文字消失<br>点击显示按钮，文字重现</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#hide").click(function() {
$("#p1").hide();
});
$("#show").click(function() {
$("#p1").show();
});
});
</script>
</html>L'effet est comme indiqué dans la figure :
Tout le monde ci-dessus a présenté les deux méthodes de jQuery pour réaliser l'affichage des clics et cacher. L'une est la méthode toggle(), sur laquelle on peut cliquer pour afficher et cliquer pour masquer via un bouton. La deuxième méthode est les méthodes hide() et show() dans jquery, qui affichent et masquent le contenu via deux boutons. . La méthode à choisir au travail dépend des besoins professionnels et des habitudes personnelles. Les amis qui n'y ont jamais été exposés auparavant doivent la pratiquer eux-mêmes. J'espère que cet article vous sera utile qui aime apprendre !
【Tutoriels associés recommandés】
1. Tutoriel vidéo jQuery
2 Manuel de référence en chinois jQuery
3. tutoriel bootstrap
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!