affichage et masquage de la page de surveillance jquery

Dans le développement Web, nous rencontrons souvent des situations où nous devons contrôler dynamiquement l'affichage et le masquage des éléments. Par exemple, une fois que l'utilisateur s'est connecté avec succès, affichez un message de bienvenue ; ou lors du défilement de la page, lorsqu'un élément défile vers le centre de l'écran, activez l'effet d'animation de l'élément. En réponse à ces besoins, jQuery fournit des API pour afficher et masquer la page de surveillance.

1. Méthode $(window).scroll()

La méthode $(window).scroll() représente la fonction de traitement d'événement déclenchée lorsque la fenêtre défile. En écoutant l'événement scroll de la fenêtre, vous pouvez afficher ou masquer dynamiquement un élément.

Ce qui suit est un exemple de code. Lorsque la roue défile jusqu'à une position à 500 pixels du haut de la page, un élément de la page sera affiché :

$(window).scroll(function(){
  if($(window).scrollTop() >= 500){
    $("#element").show();
  }
});

Explication du code :

• $(window).scroll() : écoute de l'événement de défilement de la fenêtre ;
• $(window).scrollTop() : Obtenez la distance de défilement actuelle de la fenêtre ;
• if($(window).scrollTop() >= 500) : Si la distance de défilement de la fenêtre wheel atteint ou dépasse 500px, Ensuite, exécutez le code suivant :
• $("#element").show() : Affichez l'élément avec l'identifiant "element".

2. Méthode $(window).resize()

La méthode $(window).resize() représente la fonction de traitement d'événement déclenchée lorsque la taille de la fenêtre change. En écoutant les événements de changement de taille de fenêtre, vous pouvez ajuster dynamiquement la taille et la position des éléments sur la page.

Ce qui suit est un exemple de code. Lorsque la largeur de la fenêtre est inférieure ou égale à 768px, un élément de la page sera masqué :

$(window).resize(function(){
  if($(window).width() <= 768){
    $("#element").hide();
  }
});

Explication du code :

• $(window).resize() : Écoutez l'événement de changement de taille de la fenêtre ;
• $(window).width() : Obtenez la largeur de la fenêtre
• if($(window).width() <= 768) : Si la largeur de la fenêtre est inférieure ou égale à 768px, exécutez le code suivant ;
• $("#element").hide() : Masquez l'élément avec l'identifiant "element".

3. Méthode $(document).ready() et méthode $(window).load()

La méthode $(document).ready() représente la fonction de traitement d'événement déclenchée lorsque la page DOM est chargée. La méthode $(window).load() représente la fonction de traitement d'événements qui est déclenchée lorsque tous les éléments de la page (y compris les images et autres ressources) sont chargés. Dans ces deux méthodes, vous pouvez également implémenter des opérations d’affichage ou de masquage dynamiques sur les éléments de la page.

Ce qui suit est un exemple de code. Lorsque tous les éléments de la page sont chargés, un élément de la page sera affiché :

$(window).load(function(){
  $("#element").show();
});

Explication du code :

• $(window).load() : Surveillez tous les éléments du page (y compris les images et autres ressources) Événement de fin de chargement ;
• $("#element").show() : affiche l'élément avec l'identifiant "element".

4. Autres méthodes

En plus des méthodes présentées ci-dessus, jQuery fournit également d'autres méthodes pour afficher ou masquer dynamiquement des éléments, telles que :

• $(element).fadeIn() / $(element ). fadeOut() : réalise l'effet de fondu entrant/sortant de l'élément ;
• $(element).slideDown() / $(element).slideUp() : réalise l'effet pull-down/pull-up de l'élément ; $(element ).toggle() : Pour basculer entre l'affichage et le masquage des éléments.
• Résumé : 

Ce qui précède présente plusieurs façons d'afficher et de masquer les éléments de contrôle dynamique. Ils peuvent obtenir un contrôle dynamique des éléments de la page à travers différents scénarios. Dans le développement réel, les méthodes appropriées doivent être sélectionnées en fonction des besoins spécifiques pour obtenir de meilleurs résultats.

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!