Initiation à JQuery, une librairie JavaScript
- Le Lun 18 mai 2009
- Dans Développement web
La librairie JavaScript JQuery est une librairie légère (à partir de 19 Kio), compatible avec tous les navigateurs et qui supporte le CSS3. Son utilisation est bien sûr entièrement gratuite.
Mais à quoi ça sert ?
Ce n'est pas par hasard si le slogan de JQuery est : "Write less, do more" (que l'on peut littéralement traduire par : "Ecrivez moins, faîtes-en plus"). JQuery permet donc de faire du JavaScript plus facilement et plus rapidement. Cette librairie est également utile pour réaliser de légers effets graphiques ou bien encore des animations (certains sites faits avec JQuery ressemblent beaucoup à des sites en flash).
Comment ça fonctionne ?
La première chose à faire est de télécharger la dernière version (à l'heure actuelle 1.3.2) de JQuery (disponible ici). Il faut ensuite lier JQuery à votre page HTML comme n'importe quel fichier externe JavaScript :
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
Ensuite, pour faire un premier effet (agrandir un bloc par exemple), il faut insérer ce script dans votre page (ou dans un fichier externe, selon votre préférence) :
$(document).ready(function() { $('a#agrandir').click(function() {
$("#bloc1").animate( { width:"90%" }, 1000 ) });});
Quelques explications :
- la première ligne permet de demander au navigateur d'exécuter le code JavaScript lorsque la page est chargée (équivalent à l'attribut onload).
- la deuxième ligne permet de détecter si le lien ayant pour id agrandir (a#agrandir) a été cliqué (équivalent à l'attribut onclick)
- la troisième ligne permet d'animer le bloc ayant pour id bloc1 jusqu'à ce qu'il ait une largeur de 90% (l'animation durera 1000 millisecondes, soit une seconde).
Une documentation en français de JQuery existe, elle est disponible ici.