jQuery

Un article de Wikipédia, l'encyclopédie libre.
(Redirigé depuis Jquery)
Sauter à la navigation Sauter à la recherche
jQuery
Description de l'image Jquery-logo.png.

Informations
Développé par John Resig
Première version Voir et modifier les données sur Wikidata
Dernière version 3.3.1 ()[1],[2]Voir et modifier les données sur Wikidata
Dépôt github.com/jquery/jqueryVoir et modifier les données sur Wikidata
Écrit en JavaScript
Système d'exploitation MultiplateformeVoir et modifier les données sur Wikidata
Environnement Web
Langues Anglais
Type bibliothèque JavaScript
Licence Licence MIT
Site web jquery.com

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 de deux façons:

Télécharger le fichier source[modifier | modifier le code]

A partir du site officiel jquery.com. Dans ce cas, on peut intégrer le fichier en utilisant le code suivant :

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

Utiliser un CDN[modifier | modifier le code]

Parmi les CDNs proposés, on peut utiliser ceux de Google CDN ou de Microsoft CDN. Dans ce cas on peut utiliser les codes suivants:

Google CDN:

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

Microsoft CDN:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.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]