Les bases de JQuery
JQuery est un framework permettant d'accéder très facilement à l'ensemble des éléments du DOM d'une page web afin de modifier le contenu ou les attributs des balises HTML. JQuery permet d'accéder aux éléments du DOM bien plus rapidement que JavaScript, en écrivant beaucoup moins de code gâce à ses sélecteurs.
JQuery se présente sous la forme d'un seul fichier JavaScript. Il existe en 2 versions : standard ou minimale. La version minimale correspond à la version standard dans laquelle tous les commentaires ont été supprimés et le code optimisé pour que le fichier occupe une taille minimale.
La version minimale de JQuery 1.7.2 (version utilisée sur Gecif.net depuis Juillet 2012) occupe 93 ko :
télécharger JQuery 1.7.2 minimal (1 seul fichier JavaScript)
Pour qu'une page web puisse utiliser JQuery il suffit d'ajouter la ligne suivant dans l'en-tête du fichier HTML (dans la balise <head>) après avois enregistré le fichier jquery.js sur le serveur web hébergeant la page :
<script type="text/javascript" src="http://www.gecif.net/scripts/jquery.js"></script>
Il est ensuite possible d'accéder directement à tous les éléments du DOM en utilisant simplement les sélecteurs de JQuery dans un script JavaScript.
Le tableau suivant possède l'identifiant unique tab1. Le préfixe # dans les sélecteurs de JQuery permet de sélectionner un élément du DOM par son identifiant unique.
On désire modifier la couleur de fond du tableau en cliquant sur un lien.
La ligne de code JavaScript $("#tab1").attr("bgcolor","#CCB397"); permet de modifier directement l'attribut bgcolor du tableau unique dont l'identifiant est tab1. Mais comment l'appeler à partir d'un lien ?
Voici 3 solutions :
Solution 1 : on appelle directement le code $("#tab1").attr("bgcolor","#CCB397") dans un lien
Pour cela il faut utiliser l'attribut onclick de la balise du lien <a>. La balise <a> s'érit alors :
<a href="#" onclick="javascript:$('#tab1').attr('bgcolor','#66FF99')">Lien direct</a>
Lien direct vers javascript:$('#tab1').attr('bgcolor','#66FF99')
Inconvénient de la Solution 1 : le navigateur retourne en haut de la page après le clic sur le lien.
Soltuion 2 : on crée une fonction JavaScript modifier_tableau() puis on l'appelle par le lien
Voici le code source de la fonction modifier_tableau() écrite dans l'en-tête de la page entre <script language="javascript"> et </script> :
function modifier_tableau() {
$("#tab1").attr("bgcolor","#CCB397");
}
Cette fois pour appeler la fonction modifier_tableau() on utilise l'attribut classique href de la balise <a> :
<a href="javascript:modifier_tableau()">Appeler la fonction JavaScript</a>
Appeler la fonction JavaScript "modifier_tableau"
Solution 3 : on crée une fonction JavaScript modifier_couleur(couleur) à qui on passe en paramètre la nouvelle couleur
Voici le code source de la fonction modifier_couleur(couleur) écrite dans l'en-tête de la page et dans la même balise <script language="javascript"> que la fonction modifier_tableau() :
function modifier_couleur(couleur) {
$("#tab1").attr("bgcolor",couleur);
}
On l'appelle en passant en paramètre la couleur en tant que chaîne de caractère :
<a href="javascript:modifier_couleur('#FF99FF')">Appeler la fonction modifier_couleur</a>
Appeler la fonction modifier_couleur en passant la couleur en paramètre
Dans la pratique le code JQuery occupant plusieurs lignes la création d'une fonction JavaScript est la solution la plus adaptée. De plus elle peut être appelée depuis différents liens et le passage de paramètre est très simple en raison de l'absence de typage fort de JavaScript.
Réalisé par Jean-Christophe MICHEL
Juillet 2015