Introduction à jQuery

Qu’est-ce que jQuery ?
  • C'est un  framework Javascript, Open Source, populaire et bien documenté.
  • Il est réguliérement mis à jour.
  • Normalise les différences entre les navigateurs web.
Pourquoi choisir jQuery ?
  • Il permet de réduire considérablement l’écriture pour obtenir des résultats dynamiques efficaces que ce soit pour l’animation d’éléments de la page ou pour le chargement de données à la volée (AJAX).
  • Basée sur des sélecteurs CSS
  • Il est extensible et propose de nombreux plugins disponibles (http://plugins.jquery.com/)
Exemples d'utilisation :
  • Gérer les interactions avec l'utilisateur.
  • Traiter les formulaires avant d'envoyer les informations au serveur (validation)
  • Créer des animations et effets.
  • Manipuler les éléments du DOM (i.e. les éléments de la page HTML).
  • Utiliser AJAX plus simplement.
  • Créer des RIA (rich Internet Applications).

Comment l'utiliser ?

Pour commencer à coder en jQuery, il suffit d’ajouter le fichier .js dans le header de la page.

<script src="jqueryLib.js" type="text/javascript"></script>
ou
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Exemple :

<html>
 <head> 
  <script src="path/to/jquery.js" type="text/javascript"></script> 



  <script type="text/javascript"> 
   $(document).ready(function() { 
    alert(“Hello”);
   }); 
  </script> 
 </head> 
<body> 
... 
</body> 
</html>
Explications :
$(doument).ready() : Démarre la fonction anonyme lorsque les éléments de la page sont prêts.
Modifier et manipuler le DOM

 Avec jQuery, il est très facile de manipuler des éléments de votre page. Pour cela, il suffit de bien indiquer sur quel(s) élément(s) intervenir.
  • Sélectionner par ID -> $(“#monId”)
  • Sélectionner par type -> $(“div”)
  • Sélectionner par CSS -> $(“.maClass + div,  p > span”)

Liste des sélecteurs



 Exemples :
  • $("a").addClass("maclasse »);   Pour ajouter la classe .maclasse a tous les liens 
  • $("li:first").hide();      Pour mettre en display:none le premier li de toutes les listes. 
  • $("li:last")  Pareil mais pour la dernière ligne
  • $("li:even")  Pareil mais pour les lignes impaires
  • $("li:odd")  Pareil mais pour les lignes paires
  • $("li:nth-child(x)")  Pour définir la ligne numéro x 
  •  $("img[title=titre]").css("opacity", ".5");   Met les images dont le title est titre en opacité de 50%.
var message = 'Hello!';
$('#monBoutton').bind('click', function() {
  alert(message);
});

...

<INPUT type="button" id="monBoutton" value="Press me !">

Les fonctions principales

  •  .hide() : Cette fonction met un display:none un élément. On peut lui ajouter un temps (1000 correspond à une seconde).
  •  .animate() : Cette fonction permet de créer une animation 
  • .stop() : Cette fonction arrête les animations des éléments sélectionnés.
  • .css() : Cette fonction permet d’ajouter des styles css à un élément. Ex : .css("color", "red") ou .css({"color":"red", "background":"blue"})
  • .addClass() removeClass() : Ces fonctions permettent d’ajouter ou de supprimer une classe css.
  • .attr() .removeAttr() : Ces fonctions permettent entre autre d’ajouter des attributs id, rel, title, alt…
  • .remove() : Cette fonction supprime des éléments du DOM mais les garde en mémoire dans l’objet jQuery.
  • .html() : Cette fonction permet de modifier par exemple le contenu d’un élément. 
  • .appendTo() .append() : Ces fonctions permettent de modifier le contenu d’un élément. Ex: $(A).appendTo(B) = $(B).append(A) 
  • .toggle() : Cette fonction permet de switcher deux fonctions à chaque clic de la sélection.
  • .toggleClass() : Cette fonction permet d’ajouter ou de supprimer une classe.
  • .hover() : Cette fonction permet d’exécuter des actions au passage de la souris et lors de son retrait. 
  • .parent() .children() .sliblings() : Ces fonctions récupèrent tous les parents, enfants ou frères de l’élément sélectionné.
  •  .fadeOut() .fadeIn() : Cette fonction met ou enlève un display:none un élément. On peut lui ajouter un temps (1000 correspond à une seconde).
  • .slideUp() slideDown() .slideToggle() : Ces fonctions permettent de cacher (up) ou d’afficher (down) les éléments sélectionnés. La fonction slideToggle permet de switcher de l’un vers l’autre.
  • .click() . .dblclick() : Ces fonctions associent une action au déclenchement des autres fonctions avec un click ou un double click. Ex: $("p").click( function() {…} );
  • .size() .length : Ces fonctions retournent le nombre d’éléments trouvés.

Publié par
Libellés :