> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> Javascript

> jQuery : écrivez moins pour faire plus !

> Bases de jQuery

> Découvrir jQuery

> Lecture du tutoriel

Découvrir jQuery

Par tit_toinou

Mise à jour : 28/10/2010

Difficulté : Facile Facile

Durée d'étude : 1 heure

9 054 visites depuis 7 jours, dont 2 018 sur ce chapitre classé 28/786

Ici, nous allons partir de zéro : nous allons voir l'utilité de jQuery, et comment l'intégrer à sa page web.
Enfin, nous étudierons sa principale fonction, ce qui nous permettra de faire des petites révisions sur les sélecteurs CSS

.

Vous apprendrez par la même occasion vos premières méthodes jQuery. Les méthodes sont le pilier de fonctionnement de cette bibliothèque JS.

Retour en haut

Sommaire du chapitre :

Présentation
Installation
Fonction principale
Sélecteurs
Q.C.M.

Retour en haut

Présentation

Diversité des implémentations du JavaScript

Si vous faites un peu de JavaScript, alors vous savez que c'est parfois difficile et très long d'obtenir ce que l'on veut, et cela peut paraître répétitif.

Les guerres font rage entre les navigateurs (Firefox, Internet Explorer, Opera, Safari, Chrome etc.) qui se partagent les internautes : de ce fait, il faudra adapter votre code à chacun de ces navigateurs qui fournissent des fonctions différentes pour répondre au même usage.

Par exemple, ce code permet de récupérer le nombre en pixels de défilement vertical de la page web (la barre de défilement à droite) :
Code : JavaScript

function avoirDefilementVertical(){
  if(typeof( window.pageYOffset ) == 'number'){
    // Netscape
    return window.pageYOffset; 
  } else if( document.body && (document.body.scrollTop) || navigator.appName=="Microsoft Internet Explorer") {
    // DOM
    return document.body.scrollTop;  
  } else if( document.documentElement && (document.documentElement.scrollTop) ) {
     // Internet Explorer 6
    return document.documentElement.scrollTop;
  }
}

Bibliothèques JavaScript

C'est ici qu'interviennent les bibliothèques JavaScript. Une bibliothèque JS est composée de un ou plusieurs fichiers .js (est donc écrite dans le langage JavaScript

), et rassemble une multitude de fonctions qui permettent de synthétiser certaines tâches répétitives.

La plupart des bibliothèques JS simplifient la manipulation du DOM, et abordent principalement le JavaScript en tant que langage de programmation de pages web.
Elles se différencient les unes des autres par leurs syntaxe, leurs fonctionnalités, leurs communautés, etc...

Une bibliothèque JS a besoin que le JavaScript fonctionne pour fonctionner.
Si le navigateur ne supporte pas le JS ou si il n'est pas activé, la bibliothèque ne pourra pas marcher.

jQuery

Nous allons donc apprendre dans ce tutoriel à utiliser la bibliothèque JavaScript nommée jQuery.

jQuery, une bibliothèque JS gratuite, dont la syntaxe est très courte, dont les noms des fonctions sont intuitifs (en anglais bien sûr

), simplifiant l'AJAX, permettant de faire des animations, ayant une communauté très active, et contenant à peu près tout ce dont vous rêvez grâce à ses plugins.

Et voici la version jQuery du bout de code :
Code : JavaScript

1
2
3

function avoirDefilementVertical(){
  return $(document).scrollTop();
}

Simple, non :magicien:

jQuery n'est pas la seule bibliothèque JS disponible, vous pouvez aussi vous intéresser à d'autres comme Mootools, Scriptaculous, Prototype, Yahoo UI, Mochikit, ExtJS, Dojo, et j'en passe...

Retour en haut

Installation

Téléchargement

jQuery est tout simplement un fichier JavaScript. Il vous suffit donc de le télécharger sur le site officiel.

Là, deux choix s'offrent à vous dans l'encadré à droite :

« Production » : version compressée du fichier original (incompréhensible mais légère), si vous ne voulez pas regarder le code source et pour la version publique de votre site.
« Development » : code source lisible, vous pouvez réduire le poids de jQuery en enlevant ce qui ne vous sert pas, puis en compressant à l'aide de JavaScript Compressor par exemple.

Dans ce tutoriel, on utilise la version 1.4.4 de jQuery.
J'essaie de mettre à jour le tutoriel à chaque nouvelle version de jQuery. Si vous apercevez une incohérence, n'hésitez pas à me le faire savoir

Intégration à la page web

On va supposer que votre fichier jQuery s'appelle jquery.js et qu'il est dans le même répertoire que le fichier qui l'utilise.
jQuery s'intègre comme tout autre fichier JavaScript :

Code : HTML

1	<script type="text/javascript" src="jquery.js"></script>

Voici donc le squelette de base de votre page :

L'encodage est en iso-8859-1, si vous êtes sur Linux ou Mac, mettez utf-8.

Code : HTML

<!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>
     <!-- le contenu -->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      // c'est ici que l'on va tester jQuery
    </script>
  </body>
</html>

Hello World

Pour vous montrer la simplicité de jQuery, voici le classique « Hello World » :

Code : HTML - Essayez ce code !

<!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>Hello World avec jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
      Salut tout le monde !
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
       $('body').html('Hello World');
    </script>
  </body>
</html>

Si « Hello World » s'affiche, tout va bien. Si « Salut tout le monde ! » s'affiche, JavaScript est peut être désactivé, jquery.js n'est pas dans le même dossier que le code HTML, ou vous avez fait une erreur en recopiant.
En plaçant la balise <script> juste avant </body>, cela permet au contenu plus important, par exemples les fichiers .css, de se charger avant le JavaScript.

Vous serez en moyen de comprendre ce premier exemple avec la lecture du troisième sous-chapitre

Essayer l'exemple

Comme précisé en introduction du tutoriel, vous pouvez essayer certains exemples en cliquant sur leur titre ("Essayer ce code !").
Notez tout de même que les exemples diffèrent parfois, par exemple avec une balise <div id="contenu"> qui joue le rôle du conteneur principal de l'exemple.
Vous pouvez ensuite modifier le code grâce aux deux sites proposés : JSBin et jsFiddle

Préférez les serveurs Google aux vôtres

Le script jQuery

Google héberge lui aussi les fichiers jQuery : http://ajax.googleapis.com/ajax/libs/j [...] jquery.min.js pour la version de Production (compressée).

On peut donc facilement intégrer jQuery à sa page en mettant dans le <head> :
Code : HTML

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

Cette solution apporte plusieurs avantages :

Le script de jQuery est centralisé : un internaute visite plein de sites qui sont susceptibles d'intégrer jQuery. Si tous ces sites hébergent leurs propres scripts, l'internaute en question va devoir re-télécharger jQuery plein de fois. Alors qu'avec cette solution, le cache du navigateur peut être optimisé et ainsi éviter de re-télécharger le même script tout le temps.
La bande passante de votre site est allégée, le travail étant transmis aux serveurs de Google.

Toutes les bibliothèques JavaScript

Une autre solution, un peu plus lourde, est d'intégrer les bibliothèques JavaScript et AJAX de Google via http://www.google.com/jsapi :

Code : HTML

1	<script type="text/javascript" src="http://www.google.com/jsapi"></script>

On peut alors intégrer les bibliothèques JavaScript suivantes : jQuery, jQuery UI, Prototype, script.aculo.us, MooTools, Dojo, SWFObject, Yahoo! User Interface, Ext Core.
Il suffit de faire :

Code : JavaScript

// Charge la dernière version de jQuery dans 1.xx.
google.load('jquery','1');
// Charge la dernière version de jQuery dans 1.4x.
google.load('jquery','1.4');
// Charge la version 1.4.1.
google.load('jquery','1.4.1');

Ces trois lignes chargent la version 1.4.1 de jQuery.

Cette solution apporte aussi son lot d'avantages :

Le script est toujours à la dernière version en utilisant la première ligne de code.
Une flexibilité (négligeable, me direz-vous) puisque l'on peut intégrer toutes les bibliothèques qu'on veut sans se soucier de l'URL du script (plus de liens morts !).

Appeler un script externe (en l'occurrence chez Google) n'est pas plus lent qu'appeler un script que vous hébergez.

Ce script a d'autres utilités, comme connaître la position de l'internaute, ou encore traduire un texte (voir la documentation).

Retour en haut

Fonction principale

Toute jQuery repose autour d'une fonction : jQuery() (abrégée $() car le dollar est un caractère autorisé pour les noms de fonctions en JavaScript) qui permettra de sélectionner des éléments dans votre page web.
Le premier argument de cette fonction, l'« expression », qu'on lui passe est une chaîne de caractère, représentant un sélecteur CSS, un peu comme dans vos feuilles de styles, mais en plus fort ! :zorro:

Sélecteurs basiques

Voici quelques exemples pour que vous vous rappeliez ce que sont les sélecteurs CSS :

Expression	Retour
#titre	la balise ayant pour id "titre"
h1	les balises h1
.gras	les balises qui ont la classe "gras"
a,h1,h2	les balises a, h1 et h2
*	toutes les balises

Le sélecteur de l'id ne sélectionne pas plusieurs éléments mais un seul (ou aucun). Les autres sélecteurs peuvent sélectionner 0, 1 ou plusieurs éléments.
Le dernier exemple est à utiliser avec précautions : cela renvoie toutes les balises, même la balise html !

Sélection d'un élément par la fonction principale de jQuery

Une fois que la fonction retourne ton objet jQuery, on en fait quoi ?

Tout (et n'importe quoi :euh:

) en utilisant des méthodes. Les méthodes sont des fonctions associées à des objets. Les méthodes jQuery sont donc des fonctions qui ne s'utilisent que sur des objets jQuery.
Il y a différentes méthodes, et certaines méthodes ont elles-mêmes différents arguments afin de répondre à différents usages. Leurs noms sont intuitifs (en anglais).

Quelques méthodes

À titre d'exemple, pour passer à la pratique, la méthode html() permet d'accéder au contenu des éléments si on l'appelle sans aucun argument, et permet de modifier le contenu des éléments si on l'appelle avec comme premier argument une chaîne de caractères (représentant le contenu).

Pour ce code : <div id="titre">J'aime les frites.</div> :

Code : JavaScript - Essayez ce code !

$('#titre'); // Sélectionne notre balise mais ne fait rien.
alert($('#titre').html()); // Affiche le contenu "J'aime les frites."
$('#titre').html('Je mange une pomme'); // Remplace le contenu ("J'aime les frites.") par "Je mange une pomme".
$('#titre').html($('title').html()); // Remplace le contenu par le titre de la page (contenu dans la balise <title>).

Deux autres méthodes, before() et after() permettent d'ajouter du contenu ou un élément de la page (ça dépend de ce qu'on lui passe en paramètre) respectivement avant et après l'élément en question :

Code : JavaScript - Essayez ce code !

// Ajoute du contenu après chaque balise textarea.
$('textarea').after('<p>Veuillez ne pas poster de commentaires injurieux.</p>');
// Ajoute "Voici le titre :" avant la balise ayant comme id "titre".
$('#titre').before('Voici le titre :');
// Ajoute "! Wahou !" après la balise ayant comme id "titre".
$('#titre').after('! Wahou !');

Chaînage des méthodes

Il faut savoir qu'on peut chaîner les méthodes, c'est-à-dire que si une méthode agit sur un élément (elle n'est pas censée donner une information sur cet élément mais le modifier), on peut rajouter une autre méthode :

Code : JavaScript - Essayez ce code !

// Ajoute du contenu après chaque balise textarea.
$('textarea')
  .after('<p>Veuillez ne pas poster de commentaires injurieux.</p>')
  .after('<p><strong>Merci beaucoup.</strong></p>');
// Ajoute "Voici le titre :" avant et "! Wahou !" après la balise ayant comme id "titre".
$('#titre')
  .before('Voici le titre :')
  .after('! Wahou !');

Comment cela marche-t-il ?

C'est assez simple : les méthodes qui agissent sur des éléments retournent l'objet jQuery en question, tandis que les méthodes censées donner une information sur ces éléments retournent cette information. Le chaînage s'interrompt donc quand on a affaire au second type de méthode (comme html() sans aucun argument).

Chargement du DOM

Quand on fait un appel à la fonction principale, il se peut parfois qu'elle ne retourne rien. On a beau placer son code en fin de body, les éléments de la page web ne sont pas encore placés.
La solution de ce problème en JavaScript est le fameux :

Code : JavaScript

window.onload =  function(){
  // Fonctions du genre document.getElementById('balise') qui marchent,
  // on peut accéder aux éléments.
};

jQuery offre une syntaxe à peu près similaire : la fonction doit juste être donnée à la fonction principale jQuery() ou $().

Code : JavaScript

$(function(){
  // On peut accéder aux éléments.
  // $('#balise') marche.
});

Le DOM peut alors être manipulé en toute sûreté car vous pouvez être sûrs que tous les éléments existent. Les feuilles de styles sont aussi chargées si elles ont été incluses avant le script.
On peut utiliser cela plusieurs fois, les fonctions seront appelées chronologiquement à partir du moment où le document est prêt.

Désormais, presque tous les bouts de codes jQuery donnés dans ce tutoriel devront être entourés de $(function(){...}); (sauf pour les fonctions qui se déclenchent avec des boutons par exemple).

Conflits entre différentes bibliothèques JavaScript

Le dollar est un caractère souvent utilisé pour les noms de fonctions de bibliothèques JavaScript.
La fonction $.noConflict() ou jQuery.noConflict() (contenues respectivement dans $ et dans jQuery) permet de supprimer l'alias $. Vous devrez utiliser la fonction jQuery() car $() ne sera ainsi plus utilisable.

Cependant, avec des closures, on peut aisément récupérer cette utilisation pratique ; exemple de la documentation jQuery :

Code : JavaScript

jQuery.noConflict();
(function($) { 
  $(function() {
    // Du code qui utilise $() pour jQuery().
  });
})(jQuery);
// Du code utilisant le $() d'autres bibliothèques JS.

Si on passe true à cette fonction, elle supprime aussi jQuery. Dans tous les cas, cette fonction retourne ce jQuery() et vous pouvez ainsi stocker jQuery dans n'importe quelle variable :

Code : JavaScript

1 2	var mon_jQuery_a_moi; mon_jQuery_a_moi = jQuery.noConflict(true);

Retour en haut

Sélecteurs

Ce que vous avez vu avant peut aller 5 minutes, mais c'est très vite limité, donc voici la liste des principaux sélecteurs, ça devrait vous suffire dans la plupart des cas :soleil:

Les sélecteurs CSS sont l'œuvre de Sizzle, créé par l'auteur de jQuery, John Resig.

Sélecteurs CSS "classiques"

Expression	Retour
*	Toutes les balises.
elem	Les balises elem.
#id	Balise ayant l'id "id".
.class	Balises ayant la classe "class".
elem[attr]	Balises elem dont l'attribut "attr" est spécifié.
elem[attr="val"]	Balises elem dont l'attribut "attr" est à la valeur val.
elem bal	Balises bal contenues dans une balise elem.
elem > bal	Balises bal directement descendantes de balises elem.
elem + bal	Balises bal immédiatement précédées d'une balise elem.
elem ~ bal	Balises bal précédées d'une balise elem.

La liste des sélecteurs CSS 3 est très complète (avec explications en français).

Voici les sélecteurs CSS 3 qui ne sont pas supportés par jQuery : :link, :visited, :active, :hover, :focus, :target, ::selection, :first-letter, :first-line, :before, :after, :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-of-type, :last-of-type, :only-of-type, :lang(fr).

Sélecteurs spécifiques à jQuery

Expression	Retour
:hidden	Éléments invisibles, cachés.
:visible	Éléments visibles.
:parent	Éléments qui ont des éléments enfants.
:header	Balises de titres : h1, h2, h3, h4, h5 et h6.
:not(s)	Éléments qui ne sont pas sélectionnés par le sélecteur s.
:has(s)	Éléments qui contiennent des éléments sélectionnés par le sélecteur s.
:contains(t)	Éléments qui contiennent du texte t.
:empty	Éléments dont le contenu est vide.
:eq(n) et :nth(n)	Le n-ième élément, en partant de zéro.
:gt(n) (greater than, signifiant plus grand que)	Éléments dont le numéro (on dit l'« index ») est plus grand que n.
:lt(n) (less than, signifiant plus petit que)	Éléments dont l'index est plus petit que n.
:first	Le premier élément (équivaut à :eq(0)).
:last	Le dernier élément.
:even (pair)	Éléments dont l'index est pair.
:odd (impair)	Éléments dont l'index est impair.

L'index, qui commence à zéro, est le numéro d'un élément parmi les autres éléments contenus dans cet objet jQuery. Le premier élément contenu dans l'objet jQuery est le premier élément trouvé par la fonction principale, son index est 0.

Entraînement

Dans ce bout de code de page web :

Code : HTML

1 : <p id="premier_texte">
2 :   <span class="texte">
        Salut tout le monde
      </span>
3 :   <img src="photo_1.jpg" alt="Premiere Photo !" class="superimage" />
    </p>
4 : <p>
5 :   <img src="photo_2.gif" alt="Seconde Photo !" />
6 :   <span class="texte">
        ma Seconde Photo de Vacances !
      </span>
    </p>
7 : <img src="photo_3.jpg" style="display: none;" class="superimage" />

On a, selon les différents appels à la fonction $() (les numéros désignent les balises) :

Expression	Numéros des éléments sélectionnés
#premier_texte .texte	2.
p > span	2 et 6.
span + img	3.
span > img	Rien, car les balises img ne sont pas contenues dans les balises span.
p	1 et 4.
img[src$=.jpg]	3 et 7 (pas la 5 car l'attribut src se finit par .gif).
*img[src=hoto]**	3, 5 et 7 (car ils contiennent tous hoto (photo_ est en commun) dans leur attribut src).
img:visible	3 et 5.
p ~ img	7.
p:first + img	Rien, car aucune balise img ne suit directement la première balise p.
:hidden	7, car dans son attribut style, display est à none.
img:hidden:not(.superimage)	Rien, car la seule image non-visible a la classe superimage
p:contains('Salut'):has(span)	1, car contient "Salut" (dans le span) et une balise span.
:not(html):not(body):even:not(img)	2, 4 et 6 (les :not(html) et :not(body) évitent de récupérer ces balises, :even sélectionne les numéros pairs et le :not(img) ne change rien).

Variables pratiques

Expression

La variable selector d'un objet jQuery est l'expression utilisée, c'est-à-dire la chaîne de caractères qui représente le sélecteur passé en paramètre à la fonction $().
Son utilisation est donc $('p > span').selector par exemple et qui renvoie "p > span".

Nombre d'éléments

La variable length (longueur) d'un objet jQuery est le nombre d'éléments contenus dans cet objet jQuery, c'est-à-dire le nombre d'éléments trouvés par l'appel à la fonction $().
Son utilisation est donc $('img[src*=hoto]').length par exemple et qui renvoie dans le bout de code plus haut 3.

On peut alors détecter si un élément existe dans la page web :

Code : JavaScript

if($('span').length > 0){
  // Il y a un ou plusieurs span dans le document.
}
  // Ou plus simplement :
if($('span').length){
  // Il y a un ou plusieurs span dans le document.
}

Note : on peut aussi utiliser la méthode size() qui retourne exactement la même chose.

Code : JavaScript

1
2
3

if($('span').size()){
  // Il y a un ou plusieurs span dans le document.
}

Retour en haut

Voici les points importants de ce chapitre à retenir absolument :

Il faut absolument connaître le JavaScript afin de maîtriser jQuery ;
jQuery est une bibliothèque JS : elle n'est pas incluse nativement (par défaut) dans le JavaScript ;
Il faut inclure jQuery soi-même avant de pouvoir l'utiliser ;
un objet jQuery n'est pas une référence à un élément du document, contrairement à ce que retourne document.getElementById('id') par exemple ;
un objet jQuery contient une ou plusieurs référence(s) à un (des) élément(s) du document (tout cela est mieux expliqué au début du troisième chapitre) ;
et enfin, il faut toujours entourer son code par le fameux $(function(){ /* Ici votre code JS */ }); afin que le document soit chargé.

Appris dans ce chapitre : fonction principale, intégrer jQuery à sa page web, chaînage des méthodes, chargement du document, sélecteurs CSS et sélecteurs spécifiques à jQuery, variables selector et length, quelques méthodes : noConflict(), size(), html(), before(), after().