Définit le style de la bordure supérieure
fonctions événement de jQuery: Les méthodes de gestion des événements de jQuery sont des fonctions de base en jQuery
Les événements sont souvent déclenchés par l'interaction de l'utilisateur avec la page Web, par exemple lorsqu'il clique sur un lien ou un bouton, lorsqu'il saisit du texte dans un champ de saisie ou une zone de texte, lorsqu'il effectue une sélection dans une boîte de sélection, lorsqu'il appuie sur une touche du clavier, lorsqu'il déplace le pointeur de la souris, etc. Dans certains cas, le navigateur lui-même peut déclencher les événements, tels que les événements de chargement et de déchargement de la page.
jQuery améliore les mécanismes de traitement des événements de base en proposant des méthodes pour la plupart des événements natifs du navigateur, notamment ready(), click(), keypress(), focus(), blur(), change(), etc. Par exemple, pour exécuter un code JavaScript lorsque la page est prête, vous pouvez utiliser la méthode jQuery ready()
Les méthodes de gestion des événements de jQuery sont des fonctions de base en jQuery.
Les gestionnaires d'événements sont des méthode qui sont appelés lorsque « quelque chose arrive » en HTML. Le terme "déclenchée (ou « tiré ») par un événement" est souvent utilisé.
Il est courant de mettre le code jQuery des méthodes de gestionnaire d'événement dans la section <head>, mais on peut le placer où l'on veut dans la page:
Exemple : 📝 Copier le code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery les évenement</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("#bouton").click(function(){ $("P#Introduction").css("color","#FF0000"); }); }); </script> </head> <body> <h2>Changer la couleur du fond</h2> <p>Ceci est un paragraphe.</p> <p id="Introduction">Un autre paragraphe.</p> <p id="Introduction">Un autre paragraphe.</p> <button id="bouton">Cliquer ici</button> </body> </html>
Dans l'exemple ci-dessus, une fonction est appelée lorsque l'événement click pour le bouton est déclenchée :
$("Button").Click(Function() {...certains codes...} )
La méthode change la couleur de police de tout les élément <p> avec id= "intro":
$("P#Intro").css("color","#FF0000");
Si votre site contient beaucoup de pages, et que vous souhaitez que vos fonctions jQuery doivent être facile à entretenir, vous pouvez mettre votre code jQuery dans un fichier « .js » distincts.
Dans nos exemples jQuery, les fonctions sont ajoutées directement dans la section <head>, cependant, parfois, il est préférable de les placer dans un fichier séparé, comme suit :
Exemple : 📝 Copier le code
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
jQuery utilise le signe $ comme un raccourci pour jQuery.
Certaines autres bibliothèques utilisent également le signe dollar pour leurs fonctions.
Vous pouvez utiliser un autre signe au lieu du signe $ pour jquery, ainsi vous éviteriez tout conflit
La méthode noConflict() de jQuery spécifie un nom personnalisé (comme jq), au lieu d'utiliser le signe dollar.
Exemple : 📝 Copier le code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery demo sélecteur</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> var jq=jQuery.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("P#Intro").css("color","#FF0000"); }); }); </script> </head> <body> <h2>Changer la couleur du fond</h2> <p>Ceci est un paragraphe.</p> <p id="Intro">Un autre paragraphe.</p> <p id="Intro">Un autre paragraphe.</p> <button>Cliquer ici</button> </body> </html>
Voici quelques exemples de méthodes d'événement en jQuery :
Méthode d'événement | Description |
---|---|
$(document).Ready(Function) |
Lier une fonction à l'événement ready d'un document (lorsque le document est intégralement chargé) |
$(sélecteur).Click(Function) | lier une fonction à l'événement click d'un éléments choisis |
$(sélecteur).DblClick(Function) | lier une fonction à l'événement de double-clic d'un éléments choisis |
$(sélecteur).Focus(Function) | lier une fonction à l'événement focus d'un éléments choisis |
$(sélecteur).MouseOver(Function) | lier une fonction à l'événement mouseover d'un éléments choisis |
Cours precedent: Les selecteurs jQuery |
Sommaire de : JQuery |
Cours suivant: Les effets jQuery |