Mis à jour le 14/03/2018
  • 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Vos premiers pas avec jQuery !

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous voici maintenant dans la vraie phase d'apprentissage de jQuery. C'est ici que l'on va commencer à taper nos premiers codes sources en jQuery.

Inclure jQuery dans vos pages

Pour commencer à travailler avec jQuery sur votre site web, il va falloir tout naturellement l'inclure dans vos pages. Voyons ici comment l'on va procéder.

Deux méthodes pour inclure jQuery dans vos pages web

Vous devez savoir qu'il existe deux méthodes pour inclure jQuery dans vos pages. Les deux marchent et sont tout à fait valables, mais l'une est plutôt déconseillée alors que l'autre est au contraire vraiment très conseillée.

Inclure jQuery depuis votre serveur (méthode déconseillée)

La première de ces deux méthodes, celle qui n'est pas conseillée, consiste à inclure jQuery dans vos pages web depuis votre propre serveur. Pour cela, c'est très simple.

Dans un premier temps, nous allons devoir nous rendre sur le site officiel de jQuery : jQuery.com.

Pour récupérer jQuery, vous devez tout simplement cliquer sur l'option "Download" dans le menu du haut. Vous arriverez alors sur une page vous présentant les différentes release de jQuery. A l'heure où nous écrivons ces lignes, la version actuelle est la 1.7.2, et c'est celle que nous utiliserons au sein de ce cours.

Quoiqu'il en soit, la version la plus à jour est placée un peu en avant par rapport aux autres ; pratique pour l'identifier et la récupérer plus rapidement.

Euh... il y a deux release pour la même version non ? Une version "Minified" et une version "Uncompressed"... qu'est-ce que je dois choisir ?

Ah oui ! Nous allions y venir ! :D

En fait, c'est très simple. jQuery vous est toujours fourni en deux exemplaires. Je vous rassure le contenu du fichier est exactement le même. Il n'y a pas 2 jQuery, il y en a bien qu'un seul.

  • jQuery Minified

  • jQuery Minified est le framework jQuery "compressé". En effet, vous avez pu vous rendre compte : jQuery est un fichier qui est vraiment immense, et dans ce fichier immense vous pouvez voir qu'il y a beaucoup d'espaces et beaucoup de retours à la ligne : pour garder un peu de lisibilité pour les codeurs. Le problème, c'est qu'en faisant ça, le fichier prend vraiment plus de place. La version Minified répond à ce problème : tous les espaces et retours à la ligne sont retirés. Cela a pour effet de rendre le code complètement illisible, mais en revanche, jQuery sera téléchargé plus vite par vous et vos visiteurs !

  • jQuery Uncompressed

  • jQuery Uncompressed est "l'autre jQuery". Celui qui a conservé les espaces et les retour à la ligne pour garder de la lisibilité, mais qui est plus long à charger.

Bref, pour en revenir à notre inclusion dans nos pages, téléchargeons la version compressée de jQuery. Faites donc un Clic Droit -> Enregistrer sous, et placez jQuery dans un dossier facile d'accès pour pouvoir l'inclure plus facilement dans votre page web.

La suite est très simple et très basique. Ouvrons un document HTML.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test jQuery</title>
   </head>
   <body>
   <p>On va bosser avec jQuery, c'est super !</p>

   <script src="chemin/vers/jquery.js"></script>
   </body>
</html>

Et voilà ! Si le chemin d'accès vers le fichier est correct, jQuery a bien été relié à votre page web... seulement, cette méthode n'est franchement pas recommandé, car elle va faire bosser votre serveur un peu plus, et surtout inutilement.

On va voir tout de suite la deuxième méthode, celle qui est vraiment beaucoup plus recommandée par tous les développeurs jQuery !

Inclure jQuery depuis un serveur distant (Google !)

Et oui ! La méthode la plus recommandée pour inclure jQuery dans votre page web est encore d'inclure le fichier directement depuis un serveur distant.

Seulement voilà, il faut trouver quelqu'un de suffisamment fou pour pouvoir héberger un fichier aussi utilisé que jQuery et le mettre à disposition de tous les développeurs de la planète qui veulent l'utiliser... et il y a bien une entreprise qui fait ça, c'est Google !

Google n'est pas seulement un moteur de recherche et une suite de sites web, c'est aussi une entreprise qui a montré depuis toujours un intérêt farouche pour l'open-source. C'est ainsi que Google met à disposition de tous le framework jQuery hébergé directement sur ses serveurs. Google vous fournit un lien absolu à indiquer dans vos pages, et c'est tout bon, jQuery est inclus !

Reprenons le même code source que tout à l'heure, et adaptons-le pour ce deuxième cas de figure.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test jQuery</title>
   </head>
   <body>
   <p>On va bosser avec jQuery, c'est super !</p>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   </body>
</html>

jQuery est prêt à l'emploi !

Le lien vers jQuery Minified chez Google est
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Et le lien vers jQuery Uncompressed chez Google est
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js

jQuery n'est d'ailleurs pas le seul framework libre que Google héberge et propose à tout le monde. Si vous voulez voir l'intégralité des outils proposés par Google, vous pouvez vous rendre sur cette page. Les liens absolus à indiquer sont également référencés sur cette page du site Google dédié aux développeurs.

Et pourquoi cette méthode est-elle la plus recommandée des deux ?

La réponse à cette question est très simple : c'est juste pour moins faire travailler notre serveur. En plus de cela, inclure jQuery depuis un serveur Google permet une mise en cache immédiate, pour toujours accélérer les temps de chargement de votre site. C'est donc plus une question de performance qu'autre chose.

Ainsi, pensez bien qu'à chaque fois que vous travaillerez en jQuery, il vous faudra inclure le framework depuis un serveur Google !

La fonction de base : jQuery()

jQuery est donc inclus à notre page web... c'est bien beau, mais l'idéal serait quand même d'arriver à utiliser ce qu'il a à nous proposer non ? Voyons comment faire dès maintenant pour exploiter toute la puissance du framework. ^^

Une fonction générique : jQuery() ou $()

L'ensemble du framework jQuery repose sur une seule fonction. C'est la fonction la plus importante du framework, vous devrez toujours l'utiliser dès qu'il s'agira de développer en jQuery. Cette fonction, c'est tout bêtement la fonction jQuery() !

Elle va servir tout simplement à dire : "Hop là ! A partir de maintenant, c'est du jQuery qu'il va y avoir". Sans cette fonction, le code jQuery peut ne pas être interprété correctement. C'est peut-être là une faiblesse qui n'en est pas une pour le framework : tout le code qu'on l'on va devoir écrire, on va devoir le faire au sein de cette fonction. :-°

Reprenons notre code de tout à l'heure et voyons comment appeler la fonction jQuery().

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test jQuery</title>
   </head>
   <body>
   <p>On va bosser avec jQuery, c'est super !</p>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- jQuery est inclus ! -->
   <script>
       jQuery(document).ready(function(){
           // Du code en jQuery va pouvoir être tapé ici !
       });
   </script>
   </body>
</html>

Oulah, il y a déjà pas mal d'infos dans ce code que nous allons devoir vous expliquer. :waw:

Laissons un peu tomber le HTML pour le moment et focalisons-nous sur le JavaScript. Essayez simplement d'imaginer que nous nous trouvons dans une page HTML complète.

jQuery(document).ready(function(){
   // Du code en jQuery va pouvoir être tapé ici !
});

Alors, comme nous vous le disions, on a déjà pas mal de nouveautés dans ce code : la ligne 1 en contient le plus.

jQuery(document)

jQuery prend un argument. Ici, elle cible le "document", qui représente tout simplement votre document HTML sur lequel vous travaillez : votre page web.

jQuery(document).ready(function(){
    // notre code ici
});

La suite de ce code est vraiment très simple. Vous voyez que le prochain élément qui arrive, est l'événement ready. Cet événement se traduit simplement par "est prêt". Une fois que cet événement est vérifié, on lance une fonction anonyme dans laquelle on va placer notre jQuery. :)

Ainsi, cette ligne peut être traduite par : "quand le document HTML est prêt (sous-entendu, est chargé), lance une fonction qui contient le code jQuery."

Cette petite structure de rien du tout signifie vraiment beaucoup de choses : on attend simplement que la page HTML soit chargée avant de commencer à parler de jQuery. C'est LA structure que vous devrez utiliser dans 99% des cas pour coder en jQuery dans votre page. Retenez-la par cœur, parce que cela vous fera vraiment gagner du temps.

Et comment on peut vérifier que tout cela est fonctionnel ?

Vous pouvez simplement ajouter un console.log à la place des commentaires dans le code ci-dessus pour voir si vous recevez bien quelque chose dans votre console Firebug à l'exécution de ce code. Vous pouvez également utiliser la méthode hard en utilisant carrément un alert(). ;)

Vous pouvez vous y prendre comme ceci :

/*
 * Avec un console.log
 */

jQuery(document).ready(function(){
  console.log("jQuery est prêt !");
});

/*
 * Avec un alert()
 */

jQuery(document).ready(function(){
 alert("jQuery est prêt !");
});

Essayez ce code !
Si vous avez un retour dans votre console ou dans votre navigateur, c'est tout bon !

Quoiqu'il en soit n'oubliez pas cette structure... d'ailleurs, on peut un peu la simplifier en ne spécifiant pas le ready() :

/*
 * La structure de base simplifiée.
 */

jQuery(function(){

});
$() un alias de jQuery()

Vous savez tous qu'un programmeur, c'est par définition quelqu'un de très fainéant. Alors comme on a trouvé que c'était trop long d'écrire jQuery() pour appeler la fonction, on s'est dit qu'on allait créer un alias pour pouvoir l'appeler plus facilement. Ainsi, il faut savoir que la fonction jQuery peut aussi s'appeller avec $(). Le reste du code reste exactement le même.

Ainsi...

jQuery(function(){
    alert('jQuery est prêt !');
});

... et...

$(function(){
   alert('jQuery est prêt !');
});

... vont donner exactement le même résultat !

Notez par ailleurs que l'alias $() est vraiment le plus utilisé sur le web, tout simplement parce qu'il est plus rapide à écrire. Ainsi, dans la suite de ce cours nous utiliserons toujours l'alias $() pour les codes que nous vous fournirons. Vous feriez mieux de vous aussi prendre l'habitude. Vous verrez, ce n'est pas très compliqué, vous avez juste à vous dire qu'il y a écrit "jQuery" à la place de "$" !

Éviter le conflit

La plupart des bibliothèques JavaScript utilisent elles aussi le $ (dollar), ce qui peut être la source de conflit entre les différentes librairies sur une même page. Pour éviter ce genre de problème, il est possible de passer la variable jQuery à une fonction anonyme pour être sûr que notre alias ne soit pas l'origine de conflits.

(function($){
    // notre code ici
})(jQuery);

Parallèlement, ready() accepte également un alias en paramètre de la fonction anonyme. Il est alors possible de simplifier le code au maximum :

jQuery(document).ready(function($){
    // notre code ici
});

// ce code plus court revient au même :

jQuery(function($){
    // notre code ici
});

Le principe de fonctionnement

Comme nous venons de le voir, le framework met en place une fonction dite principale. Le principe de fonctionnement de jQuery repose en fait entièrement sur celle-ci ! Autant dire que vous allez vous servir beaucoup plus du caractère $ (dollar) dès à présent ! ;)

Ainsi, pour agir avec les éléments d'une page web, on réalisera ce qu'on appelle couramment un « ciblage d'élément », qui représentera une balise, par exemple. On agira ensuite dessus grâce à des méthodes. Pour que vous ayez un aperçu, voici un code fictif tout simple usant du principe de jQuery :

$('monElement').maMethode();

Je cible dans un premier temps mon élément qui jouera le rôle d'objet, grâce à un sélecteur (chose que nous verrons plus en détails dans le prochain chapitre). Je peux ensuite agir dessus grâce à une méthode !

Image utilisateur

Mais c'est quoi une méthode ?

Une méthode en jQuery est une fonction un peu spéciale qui agira directement sur l'objet (ou l'élément ciblé, si vous préférez) indiqué. Le framework en possède beaucoup, mais il est possible de créer les nôtres ! Nous verrons cela dans un chapitre dédié, lorsque vous serez plus à l'aise avec jQuery.
Il est possible de chaîner les méthodes, c'est-à-dire que l'on peut en mettre plusieurs à la suite, pour agir sur l'objet en une seule fois.

$('monElement').premiereMethode().deuxiemeMethode();
/* la première méthode agit d'abord sur l'objet, avant la deuxième.
On a donc un ordre logique : les méthodes s'enclenchent les unes derrière les autres */

Si vous avez assimilé ce fonctionnement de base, vous avez fait le plus dur. ^^
Bien sûr, jQuery est bourré d'outils pour rendre la chose un peu plus vivante.

Vous devez commencer à comprendre comment fonctionne concrètement le framework ! :) C'est une très bonne chose, car nous allons monter le niveau d'un cran, et voir les sélecteurs dans le chapitre suivant.

Exemple de certificat de réussite
Exemple de certificat de réussite