jQuery, c’est quoi ? Activons ensemble le mode Wikipédia 🙂
jQuery est une bibliothèque JavaScript libre qui porte sur l’interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript. La première version date de janvier 2006.
Le framework contient notamment les fonctionnalités suivantes :
- Parcours et modification du DOM (y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath) ;
- Événements ;
- Effets et animations ;
- Manipulations des feuilles de style en cascade (ajout/suppression des classes, d’attributs…) ;
- AJAX ;
- Plugins ;
- Utilitaires (version du navigateur…).
Autrement dit, il est pratiquement indispensable pour les sites Web modernes (Web 2.0)
Il y a deux façons d’utiliser jQuery, je vais donc vous les présenter.
Premièrement, jQuery est distribué sous la forme d’un fichier Javascript que vous pouvez télécharger sur le site officiel : http://jquery.com/.
Il en existe 2 versions :
DEVELOPPEMENT et PRODUCTION
il n’y a aucune différence sur le fond entre ces deux versions : elles sont identiques sur les fonctionnalités, et s’utilisent exactement de la même manière.
L’avantage de la version DEVELOPPEMENT est que vous pouvez facilement lire et et comprendre le code source (pour les expert du JS ^^), car il est correctement indenté et commenté.
L’e gros inconvénient, le fichier est quand même assez lourd ! Il pèse plus de 200 Ko, ce qui fait beaucoup et qui risque de ralentir votre site.
La version production est la plus utilisée, elle est minifiée au maximum (les commentaires, les retours à la ligne ou les tabulations ont été supprimées), et les noms des variables et fonctions ont été modifiés (a, b, Etc. À croire qu’un enfant est passé par la xD).
Bref, Lire le code source, c’est digne du parcours du combattant ^^ mais en contrepartie c’est 7 fois plus léger !! Votre serveur vous remerciera d’utiliser cette version 😛
Pour utiliser jQuery, il vous suffit d’inclure le fichier jquery.js avec la balise <script>
avant </head>
de votre page
<script type="text/javascript" src="js/jquery.js"></script>
Généralement, les gens incluent jQuery et tout le JavaScript dans le haut de la page comme je viens de l’expliquer, mais je fais autrement (Pour changer :-P), je place la balise en fin de page, avant </body>
. D’après certaines personnes, le temps de chargement de la page serait optimisé.
La deuxième façon d’inclure jQuery, et alors là ! Votre serveur va vous adorer. Et d’inclure le fichier directement depuis les serveurs de Google 🙂
Nous appelons ça un CDN (Content Delivery Network), cette méthode est de plus en plus utilisée.
Voici la page du CDN Google API, qui propose une multitude de frameworks javascript, dont jQuery : http://code.google.com/apis/libraries/devguide.html (Personnellement, j’utilise jQuery et jQuery UI)
Excellent tutoriel