OUJOOD.COM
jQuery événements
Les méthodes de gestion des événements de jQuery
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 :jQuery les évenement
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");
Fonctions dans un fichier distinct
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 conflits de nom
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>
jQuery événements
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 |