Comment masquer des éléments lors d'un clic dans jquery-Questions et réponses frontales-php.cn

Comment masquer des éléments lors d'un clic dans jquery

青灯夜游

Libérer： 2022-12-15 09:55:02

original

3699 Les gens l'ont consulté

Étapes de mise en œuvre : 1. Utilisez la fonction click() pour lier l'événement click à l'élément bouton et définir la fonction de traitement de l'événement. La syntaxe est "$("button").click(function() {//Après le. l'événement click se produit, exécutez Code});"; 2. Dans la fonction de traitement d'événement, utilisez la fonction hide() pour masquer l'élément spécifié, la syntaxe est "$(selector).hide(speed,callback)".

Comment masquer des éléments lors d'un clic dans jquery

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

Dans jquery, vous pouvez utiliser les méthodes click() et hide() pour masquer des éléments en cliquant dessus.

Étapes de mise en œuvre :

Étape 1 : Utilisez la fonction click() pour lier l'événement click à l'élément bouton et définir la fonction de traitement d'événement

$("button").click(function() {
	//点击事件发生后，执行的代码
});

Copier après la connexion

Dans la fonction de traitement d'événement, le code écrit est après le clic Code d'effet implémenté

Étape 2 : Dans la fonction de gestionnaire d'événements, utilisez la fonction hide() pour masquer l'élément spécifié

$(selector).hide(speed,callback)

Copier après la connexion

Exemple de code :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").hide();
					$("span").hide();
				});
			});
		</script>
		<style>
			div{
				border: 1px solid red;
				background-color: palegoldenrod;
			}
			p,span{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div>需要隐藏的div元素</div>
		<span>需要隐藏的span元素</span>
		<p>p元素</p>
		<button>点击按钮隐藏元素</button>
	</body>
</html>

Copier après la connexion

Comment masquer des éléments lors dun clic dans jquery

Instructions :

click() La méthode est utilisée pour lier l'événement click et définir la fonction de gestionnaire d'événement

Lorsque l'on clique sur l'élément, 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.

Syntaxe : la méthode

//触发被选元素的 click 事件：
$(selector).click()

//添加函数到 click 事件：
$(selector).click(function)

Copier après la connexion

hide() est utilisée pour masquer l'élément spécifié

Syntaxe

$(selector).hide(speed,easing,callback)

Copier après la connexion

Paramètres	Description
vitesse	Facultatif. Spécifie la rapidité avec laquelle l'effet est masqué. Valeurs possibles : ms "lent" "rapide"
assouplissement	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 "linéaire" - se déplace à une vitesse constante Astuce : Plus de fonctions d'accélération sont disponibles dans l'extension.
callbac	facultatif. La fonction à exécuter après l'exécution de la méthode hide().

Paramètres

Description

vitesse

Facultatif. Spécifie la rapidité avec laquelle l'effet est masqué.

Valeurs possibles :

ms
"lent"
"rapide"

assouplissement

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
"linéaire" - se déplace à une vitesse constante

Astuce : Plus de fonctions d'accélération sont disponibles dans l'extension.

callbac

facultatif. La fonction à exécuter après l'exécution de la méthode hide().

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

Astuce : Pour afficher les éléments masqués, consultez la méthode show().

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment masquer des éléments lors d'un clic dans jquery