Maison > Article > interface Web > Comment configurer jquery pour masquer le div lorsque la souris clique dessus
Comment configurer jquery pour masquer le div lorsque la souris clique dessus
- WBOYoriginal
- 2022-03-22 15:31:151987parcourir
Comment configurer le div pour qu'il soit masqué par jquery lorsque vous cliquez sur la souris : 1. Liez l'événement click à l'élément div et définissez la fonction de traitement d'événement 2. Dans la fonction de traitement d'événement, utilisez la méthode hide() pour définir ; le div à masquer, et la syntaxe est " div element object.hide()".
L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.2.1, ordinateur Dell G3.
Comment configurer jquery pour masquer le div lorsque la souris clique dessus
La méthode hide() masque l'élément sélectionné.
La syntaxe est :
$(selector).hide(speed,easing,callback)
speed Facultatif. Spécifie la rapidité avec laquelle l'effet est masqué.
Valeurs possibles :
ms "lent" "rapide"
easing Facultatif. Spécifie la vitesse de l'élément à différents points de l'animation. La valeur par défaut est "swing".
Valeurs possibles :
"swing" - se déplace lentement au début/à la fin, se déplace rapidement au milieu "linear" - se déplace à une vitesse constante Astuce : D'autres fonctions d'assouplissement sont disponibles dans l'extension.
rappel Facultatif. La fonction à exécuter après l'exécution de la méthode hide().
Lorsqu'un élément est cliqué, l'événement click se produit. La méthode
click() déclenche un événement de clic ou spécifie une fonction à exécuter lorsqu'un événement de clic se produit.
La syntaxe est :
Déclencher l'événement click de l'élément sélectionné :
$(selector).click()
Ajouter une fonction à l'événement click :
$(selector).click(function)
L'exemple est le suivant :
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(){
$("div").hide();
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;border:1px solid red;"></div>
</body>
</html>Résultat de sortie :
Recommandé associé tutoriels vidéo : 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!