jQuery est une bibliothèque JavaScript gratuite et très pratique, ayant une syntaxe courte et logique, compatible avec tous les navigateurs offerts par le marché. C’est un ensemble cohérent de fonctions permettant d’éviter les tâches répétitives, fastidieuses et parfois trop volumineuses. C’est un véritable raccourci qui fait gagner du temps sans perdre l’efficacité et le dynamisme d’un projet.
Le jQuery est sous licence GPL et MIT, par conséquent complètement réutilisable sur des travaux professionnels. Son poids compressé est de 14 Ko, ce qui est tout à fait raisonnable.
Quelques préalables au jQuery :
En effet, le caractère développé de cette bibliothèque impose à ceux qui veulent s’y aventurer de maîtriser quelques bases en développement informatique et en programmation.
En effet, il est fortement recommandé de connaitre les bases de l’HTML, notamment les différentes balises ainsi que celle du langage CSS, notamment les sélecteurs.
Le préalable à maitriser est l’incontournable JavaScript, ses évènements, le DOM, les objets,… De ce fait, le verbe « connaitre » est un connaitre à oublier car on cherche la maîtrise des subtilités.
Le principe du jQuery : travailler moins pour faire beaucoup plus !
En se mettant au JavaScript, on s’aperçoit très vite que pour arriver au résultat souhaité, ou même à un prototype, il faut passez trop de temps sur des tâches répétitives, parfois inutiles.
L’apparition des bibliothèques JavaScript a complètement changé l’existence des programmeurs. Une bibliothèque est un ensemble de fonctions classées, synthétisées et dynamisées visant à faciliter leur utilisation générant un vrai gain de temps. Cependant, la plupart des bibliothèques JS simplifient la manipulation du DOM tout en le résumant à un simple langage de programmation de pages web.
Le jQuery dépasse la simple différenciation de part la syntaxe ou les fonctionnalités pour arriver à un raccourcissement maximum des codes et l’instauration d’un langage quasi-intuitif.
Un petit exemple : function avoirDefilementVertical(){
return $(document).scrollTop();
}
Installation, intégration et fonction principale :
Le jQuery reste une bibliothèque, un fichier JavaScript, qui s’installe. Apres avoir téléchargé l’une des deux versions qui s’offrent à vous sur le site officiel jquery.com (« uncompressed », pour une exploration complète du code source, ou «compressed », pour une utilisation directe et peu encombrante), il suffit de le mettre dans le même répertoire du programme qui l’utilise et d’ajouter la ligne suivante :
<script type= »text/javascript » src= »nom du fichier jQuery.js »></script>
Votre page devrait alors se présenter sous cette forme, assez traditionnelle :
<!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" > <head> <title>Titre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <!-- Contenu --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // emplacement jQuery </script> </body> </html> |
Démonstration :
<!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" > <head> <title>jQuery marche trés bien!</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> jQuery ne fonctionne pas! <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $('body').html(' jQuery marche trés bien!');
</script> </body> </html>
|
Donc, pour cet exemple, si le message « jQuery marche très bien ! » s’affiche c’est que vous avez réussi, si « jQuery ne fonctionne pas ! » s’affiche, vous avez surement fait une erreur ou alors le jQuery.js n’est pas installé dans le même répertoire.
Fonction principale :
La fonction à la base de toute est jQuery() qui peut être abrégée en $( sélecteur )
|
Sélecteur |
Retour |
| #titreh1
.gras a, h1, h2 * |
la balise ayant pour id « titre »les balises h1
les balises qui ont la classe « gras » les balises a, h1 et h2 toutes les balises |
jQuery : le “must have, must know” du net !
En effet, de plus en plus de développeurs et agences de communication (pepscom.com) demandent la maitrise du jQuery. Cette bibliotheque fait l’unanimité des communautés du web et commence à proliférer sur la toile à grands pas.
