jQuery

Un article de Wikipédia, l'encyclopédie libre.
(Redirigé depuis Jquery)
Sauter à la navigation Sauter à la recherche

jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web[3]. La première version est lancée en janvier 2006 par John Resig.

La bibliothèque contient notamment les fonctionnalités suivantes :

  • parcours et modification du DOM (y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath) ;
  • événements ;
  • effets visuels et animations ;
  • manipulations des feuilles de style en cascade (ajout/suppression des classes, d'attributs…) ;
  • Ajax ;
  • plugins ;
  • Utilitaires (version du navigateur web…).

Depuis sa création en 2006 et notamment à cause de la complexification croissante des interfaces Web, jQuery a connu un large succès auprès des développeurs Web et son apprentissage est aujourd'hui un des fondamentaux de la formation aux technologies du Web. Il est à l'heure actuelle la librairie front-end la plus utilisée au monde (plus de la moitié des sites Internet en ligne intègrent jQuery).

Usage[modifier | modifier le code]

jQuery se présente comme un unique fichier JavaScript de 247 ko (92,2 ko dans sa version minifiée par la suppression des commentaires, des caractères d'espacement et des retours à la ligne, et de 32 ko avec une compression gzip) contenant toutes les fonctions de base[4]. Il peut être inclus dans toute page web en utilisant le code suivant :

<script src="/chemin/vers/jQuery.js"></script>

La bibliothèque jQuery peut être appelée de deux manières différentes :

  • via la fonction jQuery, ou $. Cette fonction est chaînable (elle retourne l'objet appelant). Par exemple :
    $("div.test").add("p.quote").addClass("blue").slideDown("slow");
    
  • via l'objet $. Par exemple :
    $.each([1,2,3], function() {
    	document.write(this + 1);
    });
    

Voici un exemple d'Ajax avec jQuery :

$(document).ready(function() {                    // Lorsque le document est chargé
    $(".load_page_on_click").click(function() {   // Lorsque l’on clique sur un élément d'attribut class "load_page_on_click"
        var email = $("input[name=email]").val(); // Variable contenant la valeur d'un élément input d'attribut name "email"
        $.ajax({                         // Exécution d’une requête Ajax avec la configuration donnée par l'objet suivant :
            async: "true",               // - requête asynchrone
            type: "GET",                 // - type HTTP GET
            url: "mapage.php",           // - URL de la page à charger
            data: "email=" + encodeURIComponent(email) + "&action=get_email", // - données à envoyer
            error: function(errorData) { // - fonction de rappel en cas d’erreur
                $("#error").html(errorData);
            },
            success: function(data) {    // - fonction de rappel pour le traitement des données reçues en cas de succès
                $("#container").html(data); $("#error").append("Contenu chargé");
            }
        }); // Fermeture de l'appel à la fonction $.ajax
    });     // Fermeture de la fonction de rappel du $(".load_page_on_click").click
});         // Fermeture de la fonction de rappel du $(document).ready

On peut aussi remplacer la première ligne du script $(document).ready(function() { par $(function() {.

Modules d'extension[modifier | modifier le code]

Parce que jQuery est un constructeur de code source libre, d'autres personnes utilisent sa syntaxe pour créer de nouveaux modules d'extension[5] afin d'ajouter d'autres fonctionnalités aux bibliothèques.

Notes et références[modifier | modifier le code]

Annexes[modifier | modifier le code]

Sur les autres projets Wikimedia :

Article connexe[modifier | modifier le code]

Liens externes[modifier | modifier le code]