vendredi 18 mars 2011

appel à la bibliothèque jQuery

Typiquement, l’appel à la bibliothèque se fera de la manière suivante :




 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="fr" lang="fr">




     <head




 <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=iso-8859-15" />




   <title>Exemple</title>




       

 <script type="text/javascript" src="./js/lib/jquery.js"></script>




 <script type="text/javascript" src="./js/exemple.js"></script>




     </head>




     <body>




         &hellip;




     </body>




  </html>
On charge dans un premier temps la bibliothèque, puis notre fichier exemple.js qui contiendra nos scripts.

Compression

jQuery est disponible sous trois formats :
  • Sans compression (93 Ko)
  • Compressée à l’aide de packer (28 Ko)
  • Compressée à l’aide de JSMin puis de gzip (15 Ko)
Il conviendra d’appeler le format le plus léger dans un environnement de production, mais il reste possible de parcourir la bibliothèque dans sa version non compressée.

La fonction jquery()

jQuery repose sur une seule fonction : jQuery() ou $(). Comme toutes les fonctions JavaScript elle accepte des paramètres, et retourne un objet, que nous appellerons par la suite “objet jQuery”.
Concernant les paramètres acceptés, nous pouvons passer :
Une fonction
Dans ce cas, jQuery va exécuter cette fonction lorsque la page sera chargée par le navigateur. Plus précisément, lorsque le DOM sera chargé.
C’est pourquoi on en-capsule souvent l’ensemble du code écrit en jQuery dans :




1$(function(){




2   // ...




3});
On s’assure ainsi que le code sera exécute une fois la page chargée, et on est sûr de pouvoir manipuler le DOM sans erreur. Contrairement à l’évènement window.onload, le chargement complet des images de la page n’est pas nécessaire.
Une chaine de caractères (query)
Les sélecteurs CSS
Une des grandes forces de jQuery est d’intégrer la syntaxe des sélecteurs CSS. Il est alors facile de cibler facilement les nœuds DOM qui nous intéressent.
Par exemple :




1var mon_objet_jQuery = $("#mon_image");




2 var mon_objet_jQuery = $("#menu a");
Ou encore :










1var mon_objet_jQuery = $("#id > .classe, #id td:last-child");
Notez au passage que contrairement au support CSS des navigateurs, la librairie comprends tout à fait les pseudos-classes et les pseudos-éléments.


Les sélecteurs jQuery
Il existe des sélecteurs spécifiques à jQuery qui ne trouvent pas d’équivalences en CSS. Ils sont toutefois très pratiques. Par exemple :




1var mon_objet_jQuery = $('tr:odd td');




2// les `td` dans les `tr` impairs var mon_objet_jQuery = $("p:eq(4)");




3// le quatrième paragraphe var mon_objet_jQuery = $("p:lt(8)");




4// les sept premiers paragraphes
etc.
Publié par à

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)