oujood.com

Les événements jQuery

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()

chercher |

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   
Par gerywa 25 juillet 2014 - mis à jour le 24 Fevrier 2022



Voir aussi nos tutoriel :

fprintf, fprintf

écrit une chaîne format e dans un flux

jQuery manipulation css

jQuery manipulation css

fonction lcfirst, lcfirst

Met le premier caractère en minuscule