jQuery

jQuery est une bibliothĂšque qui permet de simplifier la programmation JavaScript afin d'interagir plus efficacement avec l'utilisateur et d'animer plus facilement des contenus.

La bibliothÚque jQuery possÚde également quelques extensions trÚs intéressantes :

  • jQuery UI, pour manipuler et enjoliver les interfaces utilisateur
  • jQuery mobile, pour adapter aisĂ©ment des contenus Ă  des tĂ©lĂ©phones ou tablettes

Le code jQuery

Le jQuery Ă©tant du JavaScript, il se situe naturellement entre deux balises <script>.

Code jQueryExplications
<script> 
$(function() {Quand la page Web est prĂȘte, faire ceci :
  $("button").click( function() {Quand on clique sur le bouton faire ceci :
    $("h1").hide("slow");Faire disparaĂźtre lentement toutes les balises <h1> de la page
    $("h2").show("fast");Faire apparaĂźtre rapidement toutes les balises <h2> de la page
    $("img").slideUp();Faire disparaĂźtre vers le haut toutes les balises <img>
  });Fin de la fonction click()
});Fin de la fonction document.ready()
</script> 

Remarque : la premiÚre fonction $(function() n'est pas strictement obligatoire, mais elle permet d'attendre le chargement de toutes les balises avant d'agir dessus. Le risque est d'assigner un comportement à un élément qui n'est pas encore défini.

Comparatif méthode JavaScript traditionnelle et méthode jQuery

Dans le code suivant, nous Ă©crivons le texte Tomates dans la balise HTML portant l'id menu. on voit que le jQuery simplifie le JavaScript :

Comparatif jQuery/JavaScript
jQuery ça simplifie

La fonction jQuery et son raccourci : $

Le signe dollar est l'abréviation de la fonction jQuery(). Ce raccourci évite d'écrire jQuery() à chaque appel de la fonction.

Raccourci jQuery

Les sélecteurs jQuery identiques aux sélecteurs CSS

A l'intérieur de la fonction $(), nous pouvons mettre des sélecteurs identiques aux sélecteurs CSS :

Raccourci jQuery et sélecteur

Les sĂ©lecteurs jQuery sont strictement identiques aux sĂ©lecteurs CSS. Une bonne connaissance du langage CSS vous aidera toujours.

CSSjQuery
h2 {color: green; }$("h2").hide()
.vignette {border-style: solid; }$(".vignette").slideUp()
#menu {color: red; }$("#menu").fadeOut()
  • Les sĂ©lecteurs CSS sĂ©lectionnent des Ă©lĂ©ments pour leur ajouter une mise en forme
  • Les sĂ©lecteurs jQuery sĂ©lectionnent des Ă©lĂ©ments pour leur ajouter une mise en forme ou un comportement

Quelques exemples jQuery

Les quatre boutons

En cliquant sur les boutons, vous allez dĂ©couvrir certaines facettes de jQuery. Ici les animations, la modification des CSS, puis l’apparition et la disparition des balises.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title> 
        <style> 
        #change_moi {position: absolute; top: 100px; left: 200px; font: 24px arial;}
        #bouge_haut, #bouge_bas, #couleur, #disparais {padding: 5px;}
        </style> 
        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head> 
    <body>  
        <button id="bouge_haut">Bouge haut</button>
        <button id="bouge_bas">Bouge bas</button>
        <button id="couleur">Change couleur</button>
        <button id="disparais">Disparais/RĂ©apparais</button>     

        <div id="change_moi">Go ! Go ! Go !</div> 
    <script> 
        $(function() { // Quand la page Web est prĂȘte, faire ceci :
            $("#bouge_haut").click( function() {
                $("#change_moi").animate( {top: 60}, 400); 
            });// fin bouge_haut
            $("#bouge_bas").click( function() {	
                $("#change_moi").animate( {top: 500}, 1500);  
            });// fin bouge_bas
            $("#couleur").click( function() {
                $("#change_moi").css("color", "maroon");	
            });// fin couleur
            $("#disparais").click( function() {
                $("#change_moi").toggle("slow"); 
            });// fin disparais
        });// fin page prĂȘte
    </script> 
    </body> 
</html>

Évùnement click et apparition en fondu

La mĂ©thode slideToggle() permet de faire apparaĂźtre l’élĂ©ment s'il a disparu, et inversement, Ă  la maniĂšre d'un interrupteur. La mĂ©thode fadeIn() fait apparaĂźtre le cadre contenant l’image en 1000 millisecondes, soit 1 seconde.

<!doctype html>
<html>
<head>
    <style>
        button {
            display: block;
            margin-bottom: 20px;
        }
        img {
            display: none;
            border: 2px solid #aaa;
        }
    </style>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <button>Montre</button>
    <img src="https://lesdocs.fr/images/loir.jpg">
    <script>
        $(function() {
            $("button").click(function() {
                $("img").slideToggle("slow");
            });
        });
    </script>
</body>
</html>

MĂ©thode append() et gĂ©nĂ©ration d’un nombre alĂ©atoire

Le code ci-dessous calcule votre remise pour les soldes 😉 en gĂ©nĂ©rant un nombre alĂ©atoire compris entre 5% et 9%.

  • La mĂ©thode append() permet d’insĂ©rer du contenu Ă  la fin d'une balise, en l’occurrence la balise <div> sous le bouton.
  • La fonction JavaScript Math.floor() permet d’arrondir un nombre alĂ©atoire gĂ©nĂ©rĂ© par ce script.
  • La fonction JavaScript Math.random() gĂ©nĂšre un nombre alĂ©atoire compris entre 0 et 1. Par exemple : 0.478996
  • La mĂ©thode remove() Ă©vite l'accumulation des balises <p>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head> 
    <body>
        <h1>Soldes !</h1>
    <button>Cliquez ici pour connaĂźtre votre remise</button>
    <div></div>
    <script>
    $(function() {
        $("button").click( function() {
            $("p").remove();
            var reduc = Math.floor((Math.random() * 5) + 5);
            var reduc_mess = "<p>Votre réduction est de " + reduc + "%</p>";
            $("div").append(reduc_mess);
        });
    });
    </script>
    </body>
</html>

Validation de formulaire avec la méthode submit()

Si vous souhaitez vĂ©rifier une saisie de texte avant l’envoi d’un formulaire, jQuery permettra de lire les contenus des champs, puis de bloquer l'action du formulaire tant que les donnĂ©es ne seront pas conformes. Dans l'exemple ci-dessous, l'attribut action de la balise <form> ne sera pris en compte que si la mĂ©thode submit() renvoie la valeur true. La mĂ©thode text() permet d’écrire du texte dans la balise indiquĂ©e.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        p { margin:0; color: blue; }
        div, p { margin-left: 10px; }
        span { color: red; }
  </style>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <p>Tapez 'correct' pour valider le formulaire</p>
    <form action="javascript:alert('RĂ©ussi !');">
        <div>
            <input type="text">
            <input type="submit">
        </div>
    </form>
    <span></span>
    <script>
        $("form").submit(function() {
            if ($("input:first").val() == "correct") {
                $("span").text("Valide !").show();
                return true;
            }
            $("span").text("Non valide !").show().fadeOut(1000);
            return false;
        });

    </script>
</body>

</html>

Agrandissement d’une boüte

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #boite {
            background: black;
            color: snow;
            width: 100px;
            padding: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <div id="boite">Cliquez sur moi</div>
    <script>
        $("#boite").one("click", function() {
            $(this).css("width", "+=200");
        });
    </script>
</body>

</html>

Lire du contenu HTML

La mĂ©thode html() permet de lire une portion de code HTML Ă  la maniĂšre de innerHTML en JavaScript. Dans l’exemple ci-dessous, c’est le contenu du div conteneur qui est lu.

<!doctype html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div class="conteneur">
            <div class="boite">Demonstration Box</div>
        </div>
        <script>
        alert(
            $('div.conteneur').html()
        );
        </script>
    </body>
</html>

Écrire du contenu HTML

La mĂ©thode html(string) permet d’écrire du code HTML Ă  la maniĂšre de innerHTML.

<!doctype html>
<html>
    <head>
        <style>
        .red { color:red; }
        </style>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <span>Bonjour</span>
        <div></div>
        <div></div>
        <div></div>
        <script>$("div").html("<span class='red'>Bonjour <b>encore</b></span>");</script>
    </body>
</html>

Manipulation des CSS

La mĂ©thode css() permet de manipuler les mises en forme. On pourra donc lire des propriĂ©tĂ©s CSS, ou modifier les styles que l'on souhaite. La propriĂ©tĂ© Ă©quivalente en JavaScript est style.

Lire la couleur de fond d’un div

<!doctype html>
<html>
    <head>
        <style>
        div { width:60px; height:60px; margin:5px; float:left; }
        </style>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <span id="resultat"> </span>
        <div style="background-color:blue;"></div>
        <div style="background-color:rgb(15,99,30);"></div>
        <div style="background-color:#123456;"></div>
        <div style="background-color:#f11;"></div>
        <script>
        $("div").click(function () {
          var color = $(this).css("background-color");
          $("#resultat").html("Ce div a une couleur de fond : <span style='color:" + color + ";'>" + color + "</span>.");
        });
        </script>
    </body>
</html>

Changement de couleur CSS et événement mouseover

<!doctype html>
<html>
    <head>
        <style>
        p { color:blue; width:200px; font-size:14px; }
        </style>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>Passez la souris dessus.</p>
        <p>Et voyez le changement de couleur.</p>
        <script>
        $("p").mouseover(function () {
            $(this).css("color", "red");
        });
        </script>
    </body>
</html>

Liste des propriétés CSS modifiables

Voici la liste complĂšte des propriĂ©tĂ©s CSS que vous pouvez manipuler : www.w3schools.com/jsref/dom_obj_style.asp

Ajout d’une classe CSS

Dans cette exemple, jQuery permet d’ajouter la propriĂ©tĂ© et la valeur class='bleu' dans la derniĂšre balise <p>. On peut alors rĂ©gler une sĂ©rie de mises en forme dans le CSS de la classe.

<!doctype html>
<html>
    <head>
        <style>
        p { margin: 8px; font-size:16px; }
        .bleu { color:blue;background-color:red }
        </style>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>Bonjour</p>
        <p>et</p>
        <p>au revoir.</p>
        <script>
        $("p:last").addClass("bleu");
        </script>
    </body>
</html>

Animations

jQuery nous offre la possibilité d'animer facilement des balises de votre choix avec la méthode animate().

animate( PropriĂ©tĂ©s, DurĂ©e, Assouplissement, Fonction )
  • PropriĂ©tĂ©s : Un ensemble de propriĂ©tĂ©s CSS pour mettre en forme l’animation.
  • DurĂ©e (optionnel) : Des vitesses prĂ©dĂ©finies ("slow" ou "fast") ou le nombre de millisecondes pour lancer l'animation (par exemple 1000).
  • Assouplissement (optionnel) : L'effet d'accĂ©lĂ©ration que vous souhaitez utiliser ("linear" ou "swing").
  • Fonction (optionnel) : Une fonction Ă  exĂ©cuter lorsque l'animation se termine.

La différence entre les méthodes css() et animate() est que animate() va appliquer des changements de valeurs de propriété CSS graduellement, ce qui provoque un effet d'animation. On pourra donc jouer sur la durée de l'animation et les effets d'accélération du mouvement.

Animation d'une boite

<!doctype html>
<html>
    <head>
        <style>
        div {
        background-color:#bca;
        width:100px;
        border:1px solid green;
        }
        </style>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <button id="go">» Go</button>
        <div id="boite">Bonjour !</div>
        <script>
        /* on peut utiliser différentes unitées de mesure dans une animation */
        $("#go").click(function() {
            $("#boite").animate({
                width: "70%",
                opacity: 0.4,
                marginLeft: "0.6in",
                fontSize: "3em",
                borderWidth: "10px"
            }, 1500 );
        });
        </script>
    </body>
</html>

DĂ©placement d'une boite bleue

Dans cette exemple, la boite bleue va se déplacer de plus ou moins 50 pixels selon le bouton cliqué. Les opérateurs += et -= permettent d'ajouter ou de retirer 50 pixels à la position actuelle de la boite.

<!doctype html>
<html>
    <head>
        <style>
        div {
            position: absolute;
            background-color: #abc;
            left: 50px;
            width: 90px;
            height: 90px;
            margin: 5px;
        }
        </style>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <button id="left">«</button>
        <button id="right">»</button>
        <div class="block"></div>
        <script>
        $( "#right" ).click(function() {
            $( ".block" ).animate({ "left": "+=50px" }, "slow" );
        });
        $( "#left" ).click(function(){
            $( ".block" ).animate({ "left": "-=50px" }, "slow" );
        });
        </script>
    </body>
</html>

Tableau des méthodes jQuery

Un petit tableau pour se remémorer les méthodes jQuery décrites sur cette page. En combinant toutes ces capacités, vous pouvez déjà faire beaucoup de choses en jQuery.

MĂ©thodeDescriptionAnimationExemple
.hide(), .show(), .toggle()
ApparaĂźtre, disparaĂźtre, interrupteur
Taille et opacité
$("p").show("slow");
.slideDown(), .slideUp(), .slideToggle()
ApparaĂźtre, disparaĂźtre, interrupteur
Glissement vers le bas ou vers le haut
$("#truc").slideUp("fast");
.fadeIn(), .fadeOut(), .fadeToggle()
Apparaßtre, disparaßtre, interrupteur Opacité$("img").fadeIn(1000);
.css()Changement d'Ă©tat des feuilles de style
$("p.citation").css("fontSize","3em");
.animate()Changement d'état des feuilles de styleDurée et assouplissement
$( "#boite" ).animate({ "width": "100px" }, "slow" );
.html()Lire ou Ă©crire du code HTML
$("div").html("Bonjour tout le monde");
.text()Écrire du texte
$("span").text("Au revoir");
.val()Lire ou Ă©crire la valeur d'un champ de formulaire.
nom = $("#nom").val();
.append()Insérer du code HTML à la fin du sélecteur
$("div").append("<p>Coucou</p>");
.remove()Supprime le sélecteur
$("p").remove();
.addClass()Ajoute une classe
$("p:last").addClass("bleu");

Articles connexes