jQuery

jQuery est une bibliothèque JavaScript conçue pour simplifier la navigation et la manipulation de l'arborescence DOM HTML , ainsi que la gestion des événements , les animations CSS et Ajax . Il s'agit d'un logiciel libre et open source utilisant la licence permissive MIT . En août 2022 , jQuery est utilisé par 77 % des 10 millions de sites Web les plus populaires. Web indique qu'il s'agit de la bibliothèque JavaScript la plus largement déployée, avec une utilisation au moins trois à quatre fois supérieure à celle de toute autre bibliothèque JavaScript.

La syntaxe de jQuery est conçue pour faciliter la navigation dans un document, la sélection d'éléments DOM , la création d'animations , la gestion d'événements et le développement d'applications Ajax . jQuery offre également aux développeurs des fonctionnalités leur permettant de créer des plug-ins sur la bibliothèque JavaScript. Cela permet aux développeurs de créer des abstractions pour les interactions et animations de bas niveau, des effets avancés et des widgets de haut niveau pouvant être créés avec des thèmes. L'approche modulaire de la bibliothèque jQuery permet la création de pages Web dynamiques et d'applications Web puissantes .

L'ensemble des fonctionnalités de base de jQuery (sélections, parcours et manipulation d'éléments DOM) activées par son moteur de sélection (nommé « Sizzle » à partir de la version 1.3), a créé un nouveau « style de programmation », fusionnant algorithmes et structures de données DOM. Ce style a influencé l'architecture d'autres frameworks JavaScript comme YUI v3 et Dojo , stimulant plus tard la création de l' API Selectors standard .

Microsoft et Nokia intègrent jQuery sur leurs plateformes. Microsoft l'inclut dans Visual Studio ASP.NET AJAX et ASP.NET MVC de Microsoft tandis que Nokia l'a intégré dans la plateforme de développement de widgets Web Run-Time.

jQuery est à la base une bibliothèque de manipulation de Document Object Model (DOM). Le DOM est une représentation arborescente de tous les éléments d'une page Web. jQuery simplifie la syntaxe de recherche, de sélection et de manipulation de ces éléments DOM. Par exemple, jQuery peut être utilisé pour rechercher un élément dans le document avec une certaine propriété (par exemple tous les éléments avec la h1balise), modifier un ou plusieurs de ses attributs (par exemple color, visibility) ou le faire réagir à un événement (par exemple un clic de souris).

jQuery fournit également un paradigme de gestion des événements qui va au-delà de la sélection et de la manipulation d'éléments DOM de base. L'affectation d'événements et la définition de la fonction de rappel d'événements se font en une seule étape dans un seul emplacement du code. jQuery vise également à intégrer d'autres fonctionnalités JavaScript très utilisées (par exemple, les fondus entrants et sortants lors du masquage d'éléments, les animations en manipulant les propriétés CSS ).

Les principes de développement avec jQuery sont :

• Séparation de JavaScript et HTML : la bibliothèque jQuery fournit une syntaxe simple pour ajouter des gestionnaires d'événements au DOM à l'aide de JavaScript, plutôt que d'ajouter des attributs d'événements HTML pour appeler des fonctions JavaScript. Ainsi, elle encourage les développeurs à séparer complètement le code JavaScript du balisage HTML.
• Concision et clarté : jQuery favorise la concision et la clarté avec des fonctionnalités telles que les fonctions « chaînables » et les noms de fonctions abrégés.
• Élimination des incompatibilités entre navigateurs : les moteurs JavaScript des différents navigateurs diffèrent légèrement, de sorte que le code JavaScript qui fonctionne pour un navigateur peut ne pas fonctionner pour un autre. Comme d'autres boîtes à outils JavaScript, jQuery gère toutes ces incohérences entre navigateurs et fournit une interface cohérente qui fonctionne sur différents navigateurs.
• Extensibilité : de nouveaux événements, éléments et méthodes peuvent être facilement ajoutés puis réutilisés en tant que plugin.

jQuery a été créé à l'origine en janvier 2006 au BarCamp NYC par John Resig , influencé par la bibliothèque cssQuery antérieure de Dean Edwards. Il est actuellement maintenu par une équipe de développeurs dirigée par Timmy Willison (le moteur de sélection jQuery, Sizzle, étant dirigé par Richard Gibson).

jQuery était à l'origine sous licence CC BY-SA 2.5 , et sous licence MIT en 2006. À la fin de 2006, il était sous licence GPL et MIT. Comme cela a entraîné une certaine confusion, la GPL a été abandonnée en 2012 et n'est désormais sous licence que sous licence MIT.

• En 2015, jQuery était utilisé sur 62,7 % du million de sites Web les plus visités (selon BuiltWith) et sur 17 % de tous les sites Web Internet.
• En 2017, jQuery était utilisé sur 69,2 % du million de sites Web les plus visités (selon Libscore).
• En 2018, jQuery était utilisé sur 78 % du million de sites Web les plus visités.
• En 2019, jQuery était utilisé sur 80 % du million de sites Web les plus visités (selon BuiltWith), et 74,1 % du million de sites Web les plus visités (selon W3Techs).
• En 2021, jQuery était utilisé sur 77,8 % des 10 millions de sites Web les plus visités (selon W3Techs) .

jQuery inclut les fonctionnalités suivantes :

• Sélections d'éléments DOM à l'aide du moteur de sélection open source multi-navigateur Sizzle , un spin-off du projet jQuery
• Manipulation DOM basée sur des sélecteurs CSS qui utilisent les noms et les attributs des éléments, tels que l'identifiant et la classe, comme critères pour sélectionner les nœuds dans le DOM
• Événements
• Effets et animations
• Ajax
• Objets Deferred et Promise pour contrôler le traitement asynchrone
• Analyse JSON
• Extensibilité grâce aux plug-ins
• Utilitaires, tels que la détection de fonctionnalités
• Méthodes de compatibilité disponibles nativement dans les navigateurs modernes, mais nécessitant des solutions de secours pour les anciens navigateurs, tels que jQuery.inArray()et jQuery.each().
• Prise en charge multi -navigateur

jQuery 3.0 et les versions ultérieures prennent en charge les « versions actuelles-1 » (c'est-à-dire la version stable actuelle du navigateur et la version qui l'a précédée) de Firefox (et ESR), Chrome , Safari et Edge ainsi qu'Internet Explorer 9 et les versions ultérieures. Sur mobile, il prend en charge iOS 7 et les versions ultérieures, ainsi qu'Android 4.0 et les versions ultérieures.

La bibliothèque jQuery est généralement distribuée sous la forme d'un seul fichier JavaScript qui définit toutes ses interfaces, y compris les fonctions DOM, Events et Ajax. Elle peut être incluse dans une page Web en créant un lien vers une copie locale ou en créant un lien vers l'une des nombreuses copies disponibles sur les serveurs publics. jQuery dispose d'un réseau de diffusion de contenu (CDN) hébergé par MaxCDN . Google dans le service Google Hosted Libraries et Microsoft hébergent également la bibliothèque.

Exemple de liaison d'une copie de la bibliothèque localement (à partir du même serveur qui héberge la page Web) :

< script 
src = "jquery-3.5.1.min.js" ></ script >

Exemple de liaison d'une copie de la bibliothèque à partir du CDN public de jQuery :

< script 
src = "https://code.jquery.com/jquery-3.5.1.min.js" 
integrity = "sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
crossorigin = "anonymous" ></ script >

jQuery propose deux types de fonctions , les fonctions utilitaires statiques et les méthodes d'objet jQuery . Chacune d'entre elles possède son propre style d'utilisation.

Les deux sont accessibles via l'identifiant principal de jQuery : jQuery. Cet identifiant a un alias nommé $. Toutes les fonctions sont accessibles via l'un de ces deux noms.

La jQueryfonction est une fabrique permettant de créer un objet jQuery qui représente un ou plusieurs nœuds DOM. Les objets jQuery ont des méthodes pour manipuler ces nœuds. Ces méthodes (parfois appelées commandes) sont chaînables car chaque méthode renvoie également un objet jQuery.

L'accès et la manipulation de plusieurs nœuds DOM dans jQuery commencent généralement par l'appel de la $fonction avec une chaîne de sélecteur CSS. Cela renvoie un objet jQuery référençant tous les éléments correspondants dans la page HTML$("div.test") . , par exemple, renvoie un objet jQuery avec tous les divéléments qui ont la classe test. Cet ensemble de nœuds peut être manipulé en appelant des méthodes sur l'objet jQuery renvoyé.

Il s'agit de fonctions utilitaires qui n'agissent pas directement sur un objet jQuery. Elles sont accessibles en tant que méthodes statiques sur l'identifiant jQuery ou $. Par exemple, $.ajax()est une méthode statique.

jQuery fournit une $.noConflict()fonction qui renonce au contrôle du $nom. Ceci est utile si jQuery est utilisé sur une page Web liant également une autre bibliothèque qui exige le $symbole comme identifiant. En mode sans conflit, les développeurs peuvent l'utiliser jQuerycomme remplacement $sans perdre de fonctionnalité.

En général, jQuery est utilisé en plaçant le code d'initialisation et les fonctions de gestion des événements dans . Ceci est déclenché par jQuery lorsque le navigateur a terminé de construire le DOM pour la page Web actuelle. $(handler)

$ ( function () { // Cette fonction anonyme est appelée lorsque la page a terminé son chargement. // Ici, on peut placer du code pour créer des objets jQuery, gérer des événements, etc. });

ou

$ ( fn ); // La fonction nommée fn, définie ailleurs, est appelée lorsque la page est chargée.

Historiquement, $(document).ready(callback)il s'agit de l'idiome de facto pour exécuter du code une fois que le DOM est prêt. Cependant, depuis jQuery 3.0, les développeurs sont encouragés à utiliser $(handler)à la place la signature beaucoup plus courte.

Les méthodes d'objet jQuery renvoient généralement également un objet jQuery, ce qui permet l'utilisation de chaînes de méthodes :

$ ( 'div.test' ) 
. on ( 'click' , handleTestClick ) . addClass ( 'foo' );

Cette ligne recherche tous div les éléments avec l'attribut de classe test, puis enregistre un gestionnaire d'événements sur chaque élément pour l'événement « clic », puis ajoute l'attribut de classe fooà chaque élément.

Certaines méthodes d'objet jQuery récupèrent des valeurs spécifiques (au lieu de modifier un état). Un exemple de cela est la val()méthode , qui renvoie la valeur actuelle d'un élément de saisie de texte . Dans ces cas, une instruction telle que $('#user-email').val()ne peut pas être utilisée pour le chaînage car la valeur de retour ne fait pas référence à un objet jQuery.

Outre l'accès aux nœuds DOM existants via jQuery, il est également possible de créer de nouveaux nœuds DOM, si la chaîne transmise en tant qu'argument à $()factory ressemble à du HTML. Par exemple, le code ci-dessous recherche un selectélément HTML et crée un nouvel optionélément avec la valeur VAGet l'étiquette Volkswagen, qui est ensuite ajouté au menu de sélection :

$ ( 'select#car-brands' ) 
. append ( $ ( '<option>' ) . prop ( valeur , "VAG" ) . text ( 'Volkswagen' ) );

Il est possible d'effectuer des requêtes Ajax (avec prise en charge multi-navigateurs ) $.ajax()pour charger et manipuler des données distantes.

$ . ajax ({ 
type : 'POST' , url : '/process/submit.php' , data : { name : 'John' , location : 'Boston' , }, }). then ( function ( msg ) { alert ( 'Données enregistrées : ' + msg ); }). catch ( function ( xmlHttpRequest , statusText , errorThrown ) { alert ( 'Votre soumission de formulaire a échoué. ' + 'Requête HTTP XML : ' + JSON . stringify ( xmlHttpRequest ) + ', Texte d'état : ' + statusText + ', Erreur générée : ' + errorThrown ); });

Cet exemple publie les données name=Johnsur location=Bostonle /process/submit.phpserveur. Lorsque cette requête se termine, la fonction de réussite est appelée pour alerter l'utilisateur. Si la requête échoue, elle avertit l'utilisateur de l'échec, du statut de la requête et de l'erreur spécifique.

L'exemple ci-dessus utilise les méthodes .then()et .catch()pour enregistrer les rappels qui s'exécutent lorsque la réponse est terminée. Ces rappels de promesse doivent être utilisés en raison de la nature asynchrone des requêtes Ajax .

L'architecture de jQuery permet aux développeurs de créer du code de plug-in pour étendre ses fonctions. Il existe des milliers de plug-ins jQuery disponibles sur le Web qui couvrent une gamme de fonctions, telles que les aides Ajax, les services Web , les grilles de données, les listes dynamiques, les outils XML et XSLT , le glisser-déposer , les événements, la gestion des cookies et les fenêtres modales .

Une source importante de plug-ins jQuery est le sous-domaine des plugins du site Web du projet jQuery. Les plugins de ce sous-domaine ont cependant été supprimés accidentellement en décembre 2011 dans le but de débarrasser le site du spam. Le nouveau site est un référentiel hébergé sur GitHub , qui oblige les développeurs à soumettre à nouveau leurs plugins et à se conformer aux nouvelles exigences de soumission. jQuery fournit un « centre d'apprentissage » qui peut aider les utilisateurs à comprendre JavaScript et à commencer à développer des plugins jQuery.

QUnit est un framework d'automatisation de tests utilisé pour tester le projet jQuery. L'équipe jQuery l'a développé comme une bibliothèque de tests unitaires interne. L'équipe jQuery l'utilise pour tester son code et ses plugins, mais il peut tester n'importe quel code JavaScript générique, y compris le code JavaScript côté serveur.

Depuis 2011 , l'équipe de test jQuery utilise QUnit avec TestSwarm pour tester chaque version de la base de code jQuery.

En simplifiant des tâches telles que la navigation dans les documents HTML, l’animation et la gestion des événements, la bibliothèque JavaScript jQuery a changé le visage du développement Web. En mai 2019 , jQuery était toujours utilisé dans 74 % des sites Web connus, selon l’enquêteur sur les technologies Web W3Techs. Néanmoins, la bibliothèque jQuery, qui a fait ses débuts en août 2006, est désormais considérée par certains développeurs comme une technologie plus ancienne dont le temps est révolu. Des alternatives à jQuery ont émergé ces dernières années, comme la bibliothèque Cash ou même simplement le JavaScript moderne et classique, maintenant que tous les navigateurs Web gèrent JavaScript de la même manière et que jQuery n’est plus nécessaire pour résoudre les problèmes de compatibilité. Les arguments sur Reddit et les vidéos sur YouTube montrent que jQuery est devenu obsolète, ou du moins n’est plus aussi essentiel qu’il l’était autrefois.

—  Paul Krill, InfoWorld (2019)

La compatibilité entre navigateurs n'étant plus un problème majeur, la plupart des jQuery peuvent désormais être remplacés par des normes Web modernes, sans perte de commodité. C'est en partie pour cette raison que GitHub a supprimé jQuery de ses pages en 2018.