JQuery

De EduTech Wiki
Aller à la navigation Aller à la recherche

jQuery est une bibliothèque Javascript dont le but est de simplifier plusieurs opérations fastidieuses en Javascript "pur". En particulier elle rends la manipulation du DOM et l'ajout de transitions en HTML beaucoup plus simple.

Pourquoi utiliser jQuery ?

Il y a plusieurs raisons en faveur de l'utilisation de jQuery. Tout d'abord il s'agit d'une des librairies les plus répandues et que souvent lorsque l'on cherche un réponse é une question sur les forums, la syntaxe utilisée est celle de jQuery.

Le raison principale pour choisir jQuery est surtout que, comme la plus part des librairies, cela facilite beaucoup de manipulation, surtout en ce qui concerne la manipulation d'élément du DOM. De plus, jQuery étant très générale, son apprentissage dépasse le cadre de certaines fonctionnalités spécifiques (comme peuvent l'être d'autre librairies comme d3 ou raphael).

L'installation

Vous pouvez télécharger la dernière version de jQuery sur le sit de jQuery il vous suffit alors d'ajouter la ligne suivante dans votre code HTMl. En général il est préférable de la mettre tout à la fin du document, juste avant le tag <\body>.

   <script src="jquery.js"></script>

vous pouvez aussi utiliser la version "minifiée" disponible en ligne

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Cependant, il est préférable d'utiliser une version locale quand on fait le développement pour éviter de devoir aller regarder les serveurs de google à chaque rafraîchissement de la page ;)


La syntaxe de base

La syntaxe de base de jQuery et la même que celle de Javascript, vous ne serez donc pas perdu si vous connaissez ce language. en effet, pour utiliser jQuery il faut avoir des bases de Javascript.

D'ailleurs, le fait que jQuery soit une bibliothèque Javascript fait que le code jQuery doit être insérer entre deux balises <script type="text/javascript"> et </script>, ce qui montre bien que les instrucstions javascript et jQuery peuvent être mélangées. (Formellement, jQuery n'est d'ailleurs pas un language, simplement un ensemble de fonctions écrites en Javascript, des raccourcis de notation si vous voulez).

Premiers pas, la sélection d'un élément du DOM

Une des grandes forces de jQuery est de fournir un raccourcis pour sélectionner les éléments du DOM.

Pour sélectionner l^'élément d'id "p1", en Javascript il faut écrire

document.getElementById("p1");

alors qu'avec jQuery, il suffit d'écrire

$("#p1");

C'est non seulement plus rapide mais aussi plus facile à se souvenir (vous remarquerez que la syntaxe "#p1" et la même que pour sélectionner l'élément d'id "p1" en CSS) et surtout plus puissante car la même instruction "$" vous permet de sélectionner non pas uniquement par id mais aussi d'autres types de sélecteurs plus complexes (voir plus bas).