jQuery – Principes de base

LEÇON

 

Qu'est-ce que jQuery ?

 

jQuery est une bibliothèque de fonctionnalité JavaScript. C'est à dire, un ensemble de fonctions JavaScript qu'on peut déployer sur un site et exploiter.

On installe des bibliothèques pour étendre les capacités d'un langage de programmation, sans devoir écrire cette fonctionnalité soi-même.

Question : Que peut-on faire avec jQuery qu'on ne peut pas faire avec JavaScript ? Réponse : Rien. Car jQuery, étant une bibliothèque de fonctions JavaScript, est écrit en JavaScript. Donc forcement tout ce qu'on peut faire avec jQuery, on aurait pu le coder en JavaScript. C'est juste que ça prendrait plus longtemps !

 

Que fait-on avec jQuery ?

 

jQuery facilite :

  • la manipulation de la page HTML (manipulation de balises et/ou styles)
  • l'interaction avec l'utilisateur (détection/réaction événements utilisateur)
  • les animations dans la page
  • les mise à jour depuis le serveur d'une partie de la page, sans rechargement de la page entière (AJAX)

 

Télécharger jQuery

 

jQuery est gratuit à télécharger et utiliser.

Remarque : jQuery existe en plusieurs versions majeures : jQuery 1.x, jQuery 2.x et jQuery 3.x (pour "x" on comprend "n'importe quelle version mineure").

Par souci de compatibilité avec un maximum de navigateurs, pour un projet grand public il est conseillé (mars 2015) de prendre jQuery 1.x (typiquement on prend la dernière version stable disponible).

 

Téléchargement :

 

Créer une page web qui exploite jQuery

 

Exemple 1 :

 

ma_page_1.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title>JavaScript</title>

        <script type="text/javascript" language="JavaScript"
                src="jquery-1.12.4.js"></script>

        <script type="text/javascript" language="JavaScript">

           $(document).ready(function() {
             $("p").click(function() {
               $(this).hide();
             });
           });

        </script>

    </head>

    <body style="width:960px; margin:0 auto; background-color:#eeeeee; font-size:36px;">

        <div style="background-color:white; text-align:center; margin:80px 0px; padding:80px 0px;">

            <p>Cliquez pour me faire disparaître</p>

        </div>

    </body>

</html>

 

 

Exemple 2 (équivalent)  :

 

mon_javascript_2.js

$(document).ready(function() {
   $("p").click(function() {
       $(this).hide();
   });
});

ma_page_2.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title>JavaScript</title>

        <script type="text/javascript" language="JavaScript"
                src="jquery-1.12.4.js"></script>

        <script type="text/javascript" language="JavaScript"
                src="mon_javascript_2.js"></script>

    </head>

    <body style="width:960px; margin:0 auto; background-color:#eeeeee; font-size:36px;">

        <div style="background-color:white; text-align:center; margin:80px 0px; padding:80px 0px;">

            <p>Cliquez pour me faire disparaître</p>

        </div>

    </body>

</html>

 

Mini-exercice N° 1

  • prendre comme point de départ pour cet exercice l'exemple ci-dessus
    • remarque : on peut prendre le code de l'exemple 1 ou le code de l'exemple 2
    • le choix n'est pas important car les 2 exemples sont fonctionnellement équivalents
  • étendre l'exemple pour afficher 3 paragraphes cliquables
  • quand on clique sur un paragraphe, seul ce paragraphe disparaît

 

C'est quoi ce symbole "$" sur chaque ligne ?

 

C'est le nom de la fonction qui est le point d'entrée pour toute fonctionnalité jQuery.

Une fonction JavaScript peut être nommé comme on veut (dans la limite des règles JavaScript) : par exemple jouer() ou clic() comme dans nos exemples et exercices JavaScript.

Dans jQuery il y a une seule fonction qui est le point de départ pour tout le reste et elle s'appelle $().

Remarque :  en réalité la fonction est nommée jQuery() et $() est un pseudonyme (nom alternatif pour une fonction).

Donc, équivalent encore :

Exemple 3 :

 

ma_page_3.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title>JavaScript</title>

        <script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>

        <script type="text/javascript" language="JavaScript">

           jQuery(document).ready(function() {
             jQuery("p").click(function() {
               jQuery(this).hide();
             });
           });

        </script>

    </head>

    <body style="width:960px; margin:0 auto; background-color:#eeeeee; font-size:36px;">

        <div style="background-color:white; text-align:center; margin:80px 0px; padding:80px 0px;">

            <p>Cliquez pour me faire disparaître</p>

        </div>

    </body>

</html>

 

Un autre exemple

 

Cette fois-ci, au lieu de manipuler les éléments de type "balise p", on va manipuler les éléments selon leur classe...

Exemple 4 :

 

ma_page_4.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title>JavaScript</title>

        <script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>

        <script type="text/javascript" language="JavaScript">

           $(document).ready(function() {
             $(".noir").click(function() {
               $(".noir").hide();
             });
             $(".rouge").click(function() {
               $(".rouge").hide();
             });
             $(".bleu").click(function() {
               $(".bleu").hide();
             });
           });

        </script>

        <style>
        body { width:960px; margin:0 auto; background-color:#eeeeee; font-size:36px; }
        .section { background-color:white; text-align:center; margin:80px 0px; padding:80px 0px; }
        .noir { color:black; }
        .rouge { color:red; }
        .bleu { color:blue; }
        </style>

    </head>

    <body>

        <div class="section">

            <p class="noir">Paragraphe 1 en noir</p>

            <p class="rouge">Paragraphe 1 en rouge</p>

            <p class="bleu">Paragraphe 1 en bleu</p>

            <p class="noir">Paragraphe 2 en noir</p>

            <p class="rouge">Paragraphe 2 en rouge</p>

            <p class="bleu">Paragraphe 2 en bleu</p>

            <h4 class="noir">Je suis un titre h4 en noir</h4>

            <h4 class="rouge">Je suis un titre h4 en rouge</h4>

            <h4 class="bleu">Je suis un titre h4 en bleu</h4>

        </div>

    </body>

</html>

 

 

Mini-exercice N° 2

  • prendre comme point de départ pour cet exercice le code pour exemple 4 ci-dessus
  • faire en sorte que
    • cliquer sur quelque chose de noir fait disparaître les choses rouges
    • cliquer sur quelque chose de rouge fait disparaître les choses bleues
    • cliquer sur quelque chose de bleu fait disparaître les choses noires