Les événements jQuery

jQuery événements

jQuery cours tutorial

fonctions événement 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 paage:

Exemple :

Sélectionner le code

<!DOCTYPE html>
 <html lang="en">
 <head>
      <meta charset="utf-8">
   <title>jQuery les évenement</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(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 :

Sélectionner le code

  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" 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.

Sélectionner le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo sélecteur</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  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:
cours precedent  Les selecteurs jQuery
    Sommaire de :
JQuery
 Cours suivant:
Les effets jQuery    cours suivant
Par gerywa 25 juillet 2014