Installer, configurer et tester jQuery

En premier lieu, commencez par télécharger l'archive de jQuery de son site officiel (jquery.com). Cliquez sur Download qui vous amènera sur le service code.google qui héberge la source de jQuery. Cette librairie est régulièrement mise à jour, donc, la version peut changer, mais les codes et les exemples sont valables pour n'importe quelle version. Ainsi, on va prendre l'exemple de jQuery 1.4 et vous pouvez aussi télécharger la version minimale (symbolisé par le mot " min " à la fin du fichier). La seule différence avec la version minimale est qu'elle est compressée (on a supprimé les espaces et les commentaires pour accélérer son chargement).

Installer et configurer jQuery


Maintenant qu'on a téléchargé jQuery, on va le configurer pour nos premiers exemples. Créez un répertoire de test tel que testjQuery (c'est une bonne idée de le faire à l'intérieur du répertoire de votre site). Ensuite, on va créer deux dossiers qui seront " images " et " js ". Décompactez l'archive de jQuery et copiez le fichier jquery-1.4.js dans le dossier js. Et voilà, nous avons configuré le jQuery et maintenant on peut l'appeler d'une page web. Créez une page web de test et insérez une image avec la balise img :

Le logo de mon site
Ceci est juste un code partiel d'une page web, car vous devrez ajouter les balises HTML, HEAD, TITLE, etc. En général, on va mettre la balise SCRIPT dans la section HEAD. Et on voit que cette balise fait appel à notre librairie jQuery située dans le dossier "js". C'est la même chose que d'appeler un fichier externe de JavaScript. Une chose à garder à l'esprit est qu'on doit utiliser précisément le nom du fichier source du jQuery.

Ensuite, le code qui suit va afficher une image nommée LogoSouriant au format JPEG avec un texte alternatif et une dimension de 200 x 100 pixels. Ce qui nous intéresse dans ce code pour tester le jQuery est le texte alternatif qui s'affichera lorsqu'on survole l'image avec la souris. Les logiciels pour malvoyants utilisent aussi ce texte pour décrire l'image. On a un contenu dans notre page web et on a configuré le jQuery et on termine donc par un petit exemple du potentiel du jQuery.

Débuter avec le jQuery



On va tester un petit exemple de jQuery. Cherchez la ligne SCRIPT où nous avions appelé la librarie jQuery et ajoutez le code suivant :


Il faut vous rappeler de ce bout de code, car c'est la base pour utiliser jQuery. On a d'abord la balise Script et juste en dessous, on a le signe du dollar ($). De ce fait, $(document).ready implique qu'on appelle une fonction jQuery qui dit au navigateur d'effectuer une tâche lorsqu'une partie de la page ait été chargée. Donc, le code va s'exécuter lorsque toute la page sera chargée pour éviter un plantage et un conflit. Le signe du dollar est un raccourci pour "jquery". La ligne qui suit est un commentaire et en dessous, mettez ce code :

alert(jQuery(?img?).attr(?alt?));

Pour le moment, enregistrez juste les changements et testez la page. Cette dernière va afficher notre image, mais aussi une boîte de dialogue qui affiche le texte alternatif de cette image. Ainsi, le jQuery peut interagir avec une balise, un ID, mais aussi avec des attributs. Dans cet exemple, nous demandons à jQuery d'analyser toutes les balises IMG et d'afficher leur attribut ALT. On se souvient qu'on peut remplacer le mot " jquery " par le signe du dollar, donc, vous pouvez aussi utiliser cette forme de code :

alert($(?img?).attr(?alt?));

Cela marchera sans aucun problème ! Sachez aussi que vous pouvez utiliser des guillemets doubles ou simples pour identifier les attributs et les balises. Mais une bonne pratique du codage est d'utiliser des guillemets simples, car on utilise déjà la forme double pour les balises HTML. Cet exemple nous montre qu'on peut modifier n'importe quel élément de la page et c'est pourquoi le jQuery est si populaire parmi les développeurs.