Résumé des événements et des opérations d'animation DOM dans JQuery

Événements dans JQuery

1. Charger DOM

Une fois la page chargée, le navigateur transmettra JavaScript Ajoutez des événements aux éléments DOM. Dans le code JavaScript standard, la méthode window.onload est généralement utilisée, et dans JQuery, la méthode $(document).ready() est utilisée. La méthode d'écriture simplifiée "$()" dans JQuery. Lors de l'enregistrement d'un événement dans window.onload, il ne peut être enregistré que dans un seul corps window.onload. Mais en utilisant JQuery, vous pouvez vous inscrire dans plusieurs $(document).ready() ou $().

2. Liaison d'événement

Lier l'élément correspondant à l'événement spécifié. Par exemple, hier, nous avons lié l'événement dans window.onload : "$("p").onclick(function(){

alert( $(this).text() );

});"

Vous pouvez le lier comme ceci dans $(document).ready() de JQuery :
"$("p").click(function(){

alert( $(this).text() );

});"

En utilisant bind(), vous pouvez lier comme ceci :
$("p") . bind("click", function(){

alert( $(this).text() );

});

3. Événements synthétiques

hover() : simule le temps de survol du curseur. Lorsque le curseur se déplace sur l'élément, la première fonction spécifiée sera déclenchée, et lorsque le curseur sortira de l'élément, la deuxième fonction spécifiée sera déclenchée. Par exemple, effet de survol :

$("td").hover(
function () {$(this).addClass("hover");},
function () {$(this) .removeClass("hover");}
);

toggle() : utilisé pour simuler des événements de clic de souris continus. La première fois que vous cliquez sur un élément, la première fonction spécifiée est déclenchée. Lorsque vous cliquez à nouveau sur le même élément, la deuxième fonction spécifiée est déclenchée. S'il y a plus de fonctions, elles sont déclenchées en séquence jusqu'à la dernière. Par exemple, définissez la sélection et les effets non sélectionnés d'un élément :

$("td").toggle(

function () {$(this).addClass("selected");},
function () {$(this).removeClass("selected");}
);

Utilisez toggle() sans passer de paramètres, l'effet est pour changer l’état visible des éléments.

4. Bouillonnement des événements

Les événements continueront à monter comme des bulles selon la hiérarchie des DOM, n'atteignant que le sommet.

Solution : renvoyer false dans la fonction

traitement d'événement empêchera l'événement de bouillonner. Vous pouvez également arrêter le comportement par défaut de l'élément.

Toutes les interactions actuelles de l'interface utilisateur ou leurs événements prennent en charge cette fonctionnalité. Renvoyer false dans votre propre fonction de gestion d'événements annulera la transmission de l'événement. Renvoyez les vrais événements et continuez à descendre.

5. Propriétés de l'objet événement

Objet événement : Lorsqu'un événement est déclenché, l'objet événement est créé. L'utilisation d'événements dans votre programme nécessite uniquement l'ajout d'un paramètre à la fonction de gestionnaire. Utilisez certains paramètres dans la fonction de gestionnaire d'événements. Par exemple, pour obtenir la position par rapport à la page lorsqu'un événement survient : event.pageX, event.pageY, event est le paramètre

de la fonction de traitement d'événement .

6.

Supprimer les événements

Supprimer tous les événements de clic sur un bouton : $("btn").unbind("click")

Supprimer tous les événements sur un bouton : $("btn").unbind();

one() : Cette méthode peut lier une fonction de gestionnaire à l'élément. Lorsque la fonction de gestionnaire est déclenchée une fois, l'événement est immédiatement supprimé. Autrement dit, sur chaque objet, la fonction de gestionnaire d'événements ne sera exécutée qu'une seule fois.

Animation DOM dans JQuery

En définissant les méthodes d'affichage et de masquage des objets DOM, des effets d'animation peuvent être produits.

1. Masquer et afficher sans effet d'animation

hide() : Dans un document HTML, appeler la méthode hide() pour un élément modifiera l'affichage du Changez le style en aucun. La fonction de code est la même que css("display", "none");.

show() : modifie le style d'affichage de l'élément à l'état d'affichage précédent.

toggle() : Changer l'état visible de l'élément : si l'élément est visible, passez à caché ; si l'élément est masqué, passez à visible.

2. En définissant le masquage et l'affichage de l'effet de transparence, l'effet d'animation de fondu entrant et sortant est obtenu

fadeIn(), fadeOut() : change uniquement la transparence de l'élément. fadeOut() réduira l'opacité d'un élément pendant une période de temps spécifiée jusqu'à ce que l'élément disparaisse complètement. fadeIn() fait le contraire. Par exemple, faites apparaître lentement le paragraphe pendant 600 millisecondes : $("p").fadeIn("slow");.

fadeTo() : Ajustez l'opacité à la valeur spécifiée (entre 0 et 1) de manière progressive. Et déclenche éventuellement une fonction de rappel une fois l'animation terminée. Par exemple, utilisez 200 millisecondes pour ajuster rapidement la transparence du paragraphe à 0,25. Une fois l'animation terminée, une boîte de message « Animation terminée » s'affiche : "$("p").fadeTo("fast", 0.25, function( ){ alert("Animation terminée."); });".

3. En définissant le masquage et l'affichage de l'effet de hauteur, l'effet d'animation de glissement vers le bas et de pliage est obtenu

slideDown(), slideUp() : uniquement. modifie la hauteur de l'élément. Si l'attribut d'affichage d'un élément est aucun, lorsque la méthode slideDown() est appelée, l'élément sera affiché de haut en bas. La méthode slideUp() est tout le contraire. L'élément est raccourci et masqué de bas en haut. Par exemple, utilisez 600 millisecondes pour faire glisser lentement le paragraphe vers le bas : $("p").slideDown("slow");.

slideToggle() : bascule la visibilité des éléments correspondants via des changements de hauteur. Par exemple, faites glisser rapidement un paragraphe vers le haut ou vers le bas en 200 millisecondes. Une fois l'animation terminée, une boîte de message « Animation terminée » s'affichera : "$("p").slideToggle("fast",function(){ alert( "Animation terminée" ."); });".

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!