Installation de jQuery
Installation de jQuery
-
Objectifs
- Etre capable d’installer et de travailler avec jQuery.
-
Présentation
- jQuery est une bibliothèque JavaScript qui n’est pas installée de base dans votre navigateur. Il faut l’ajouter par le biais d’un fichier ayant pour extension .js.
- jQuery est distribué sous la forme d’un fichier Javascript que vous pouvez télécharger sur le site officiel : http://jquery.com/.
- jQuery est créée par John Resig en 2006.
- jQuery simplifie la navigation dans les documents HTML, la gestion des événements, l’animation et les interactions Ajax pour un développement Web rapide.
- jQuery est une boîte à outils JavaScript conçue pour simplifier diverses tâches en rédigeant moins de code.
-
Quelle version choisir ?
- Il en existe 2 versions :
-
Développement
- A utiliser pour les tests et les sites en cours de développement (non compressée et le code est lisible)
- Comme son nom l’indique, on utilise généralement cette version quand on fait du développement.
- L’avantage est que vous pouvez facilement lire et peut-être comprendre le code source, car il est correctement indenté et commenté.
- L’inconvénient, c’est le corollaire de la phrase du dessus, le fichier est assez lourd (il pèse plus de 200 Ko, ce qui commence à faire beaucoup pour du js, et qui risque de ralentir votre site).
- Ne pas utiliser cette version sur un site à fort trafic
-
Production
- à utiliser pour les sites Web qui sont en production car elle est minimisée et compressée
- La version production est minifiée (les caractères inutiles comme les retours à la ligne, les commentaires ou les tabulations ont été supprimées), et les noms de certaines variables et fonctions ont été modifiés (a, b, que des trucs explicites).
-
Inclure jQuery dans vos pages
- Il existe deux méthodes pour inclure jQuery dans vos pages.
-
Télécharger la bibliothèque JQuery depuis le site jquery.com
- La librairie JQuery est un fichier JavaScript qu’il suffit d’inclure dans le <head> de votre page web avec la balise HTML <script> :
-
Inclure JQuery depuis un site externe
- Le plus simple consiste à faire référence au fichier
jquery.jssur un CDN (pour Content Delivery Network). - Constitués d’ordinateurs reliés en réseau via Internet, ces éléments d’infrastructure coopèrent pour mettre à disposition aussi vite que possible la bibliothèque jQuery.
- Vous pouvez utiliser les CDN jQuery, Google ou Microsoft.
- L’utilisation d’un CDN est intéressante en production, c’est-à-dire lorsque votre code jQuery a été testé et est hébergé sur un serveur Web.
- En faisant référence à un fichier externe à votre site, vous n’entamez pas sa bande passante.
- D’autre part, étant donné que les CDN ont une grande bande passante, ils sont très réactifs.
- Le fichier jquery.min.js issu d’un CDN est bien souvent déjà présent dans la mémoire cache du navigateur.
- Ces trois raisons font que votre page se chargera plus rapidement.
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>| CDN | Version non minimisée | Version minimisée |
|---|---|---|
| jQuery | http://code.jquery.com/jquery.js | http://code.jquery.com/jquery.min.js |
| http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js | http://ajax.googleapis.com/ajax/libs/j[…] jquery.min.js | |
| Microsoft | http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js | http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js |
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>