jQuery - jQuery

jQuery

Auteur(s) original(aux)	Jean Résig
Développeur(s)	L'équipe jQuery
Première version	26 août 2006 ; il y a 15 ans ( 2006-08-26 )
Version stable	3.6.0 / (2 mars 2021 ; il y a 7 mois ) ( 2021-03-02 )
Dépôt
Écrit en	JavaScript
Plate-forme	Voir § Prise en charge du navigateur
Taille	27-274 Ko
Taper	bibliothèque JavaScript
Licence	MIT
Site Internet	jquery .com

jQuery est une bibliothèque JavaScript conçue pour simplifier la traversée et la manipulation de l'arbre DOM HTML , ainsi que la gestion des événements , l' animation CSS et Ajax . Il s'agit d'un logiciel libre et gratuit utilisant la licence permissive MIT . En mai 2019, jQuery était utilisé par 73% des 10 millions de sites Web les plus populaires. L' analyse Web indique qu'il s'agit de loin de la bibliothèque JavaScript la plus largement déployée, ayant au moins 3 à 4 fois plus d'utilisation que toute autre bibliothèque JavaScript.

La syntaxe de jQuery est conçue pour faciliter la navigation dans un document, sélectionner des éléments DOM , créer des animations , gérer des événements et développer des applications Ajax . jQuery fournit également aux développeurs la possibilité de créer des plug-ins au-dessus de la bibliothèque JavaScript. Cela permet aux développeurs de créer des abstractions pour une interaction et une animation de bas niveau, des effets avancés et des widgets thématiques de haut niveau. L'approche modulaire de la bibliothèque jQuery permet la création de pages Web dynamiques puissantes et d'applications Web.

L'ensemble des fonctionnalités de base de jQuery - sélections d'éléments DOM, parcours et manipulation - activés par son moteur de sélection (nommé "Sizzle" à partir de la v1.3), a créé un nouveau "style de programmation", fusionnant les algorithmes et les 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 . Plus tard, ce style a été amélioré avec une fusion algorithme-données plus profonde dans un héritier de jQuery, le framework D3.js.

Microsoft et Nokia regroupent jQuery sur leurs plateformes. Microsoft l'inclut avec Visual Studio pour une utilisation dans les frameworks ASP.NET AJAX et ASP.NET MVC de Microsoft tandis que Nokia l'a intégré dans la plate-forme de développement de widgets Web Run-Time.

Aperçu

jQuery, à la base, est une bibliothèque de manipulation de modèle d'objet de document (DOM). Le DOM est une représentation arborescente de tous les éléments d'une page Web. jQuery simplifie la syntaxe pour rechercher, sélectionner et manipuler ces éléments DOM. Par exemple, jQuery peut être utilisé pour trouver un élément dans le document avec une certaine propriété (par exemple tous les éléments avec une balise h1 ), changer un ou plusieurs de ses attributs (par exemple, couleur, visibilité), ou le faire répondre à un événement ( ex. un clic de souris).

jQuery fournit également un paradigme pour la 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énement et la définition de la fonction de rappel d'événement se font en une seule étape à un seul endroit dans le code. jQuery vise également à incorporer d'autres fonctionnalités JavaScript très utilisées (par exemple, des fondus entrants et sortants lors du masquage d'éléments, des animations en manipulant des 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énement HTML pour appeler des fonctions JavaScript. Ainsi, il encourage les développeurs à séparer complètement le code JavaScript du balisage HTML.
• Brièveté et clarté : jQuery favorise la brièveté 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.

Histoire

jQuery a été initialement créé en janvier 2006 à BarCamp NYC par John Resig , influencé par la bibliothèque cssQuery précédente de Dean Edwards . Il est actuellement maintenu par une équipe de développeurs dirigée par Timmy Willison (avec le moteur de sélection jQuery, Sizzle, dirigé par Richard Gibson).

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

Popularité

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

Caractéristiques

jQuery inclut les fonctionnalités suivantes :

• Sélections d'éléments DOM à l'aide du moteur de sélection open source multi-navigateurs Sizzle , un spin-off du projet jQuery
• Manipulation du 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é via des plug-ins
• Utilitaires, tels que la détection de caractéristiques
• Méthodes de compatibilité nativement disponibles dans les navigateurs modernes, mais nécessitant des solutions de secours pour les navigateurs plus anciens, tels que jQuery.inArray()et jQuery.each().
• Prise en charge de plusieurs navigateurs

Prise en charge du navigateur

jQuery 3.0 et 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 versions ultérieures . Sur mobile, il prend en charge iOS 7 et versions ultérieures, et Android 4.0 et versions ultérieures.

Distribution

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. Il peut être inclus 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 locale d'une copie de la bibliothèque (à 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>

Interface

Les fonctions

jQuery fournit deux types de fonctions , des fonctions utilitaires statiques et des méthodes d'objet jQuery . Chacun a 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.

Méthodes jQuery

La jQueryfonction est une fabrique pour 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élection 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 de la classe test. Cet ensemble de nœuds peut être manipulé en appelant des méthodes sur l'objet jQuery renvoyé.

Utilitaires statiques

Ce sont des fonctions utilitaires et n'agissent pas directement sur un objet jQuery. Ils sont accessibles en tant que méthodes statiques sur l'identifiant jQuery ou $. Par exemple, $.ajax()est une méthode statique.

Mode sans conflit

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 demande le $symbole comme identifiant. En mode sans conflit, les développeurs peuvent l'utiliser jQueryen remplacement $sans perdre de fonctionnalité.

Point de départ typique

En règle générale, jQuery est utilisé en mettant le code d'initialisation et les fonctions de gestion des événements dans . Ceci est déclenché par jQuery lorsque le navigateur a fini de construire le DOM pour la page Web actuelle. $(handler)

$(function () {
        // This anonymous function is called when the page has completed loading.
        // Here, one can place code to create jQuery objects, handle events, etc.
});

ou

$(fn); // The function named fn, defined elsewhere, is called when the page has loaded.

Historiquement, cela $(document).ready(callback)a été 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 la $(handler)signature beaucoup plus courte à la place.

Chaînage

Les méthodes d'objet jQuery retournent 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 trouve tous les div éléments avec l'attribut class test, puis enregistre un gestionnaire d'événement sur chaque élément pour l'événement "click", puis ajoute l'attribut class fooà chaque élément.

Certaines méthodes d'objet jQuery récupèrent des valeurs spécifiques (au lieu de modifier l'état). Un exemple de ceci 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.

Création de nouveaux éléments DOM

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

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

Ajax

Il est possible de faire des requêtes Ajax (avec support multi-navigateurs ) avec $.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('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    'Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});

Cet exemple publie les données name=Johnet location=Bostonvers /process/submit.phpsur le serveur. Lorsque cette demande se termine, la fonction de réussite est appelée pour alerter l'utilisateur. Si la demande échoue, il alertera l'utilisateur de l'échec, de l'état de la demande 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 .

plug-ins jQuery

L'architecture de jQuery permet aux développeurs de créer du code de plug-in pour étendre sa fonction. Il existe des milliers de plug-ins jQuery disponibles sur le Web qui couvrent une gamme de fonctions, telles que les assistants 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 plug-ins du site Web du projet jQuery. Cependant, les plugins de ce sous-domaine ont été accidentellement supprimés en décembre 2011 pour tenter de débarrasser le site du spam. Le nouveau site est un référentiel hébergé sur GitHub , qui obligeait 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.

Afin de créer ces plug-ins, les développeurs peuvent choisir d'écrire leur propre code à partir de zéro ou de s'appuyer sur une structure existante telle que jQuery Boilerplate .

Historique des versions

Cadre de test

QUnit est un framework d'automatisation de test utilisé pour tester le projet jQuery. L'équipe jQuery l'a développé en tant que bibliothèque de tests unitaires interne. L'équipe jQuery l'utilise pour tester son code et ses plugins, mais elle 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.

Alternatives à jQuery

La simplification des tâches telles que la gestion HTML documents traversal, l' animation et l' événement, la Stalwart 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'expert en technologie Web W3Techs. Néanmoins, la bibliothèque jQuery, qui a fait ses débuts en août 2006, est maintenant considérée par certains développeurs comme une technologie plus ancienne dont le temps est révolu. Des alternatives à jQuery sont apparues ces dernières années, telles que la bibliothèque Cash ou même tout simplement le JavaScript vanille moderne, maintenant que les navigateurs Web gèrent tous 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'avant.

—  Paul Krill, InfoMonde (2019)

Comme la compatibilité entre navigateurs n'est plus un problème, la plupart des jQuery peuvent aujourd'hui être remplacés par des normes Web modernes, sans perdre beaucoup de commodité. En partie à cause de cela, GitHub a supprimé jQuery de ses pages en 2018.

Bibliothèques alternatives

• Espèces
• Zepto

Voir également

• Comparaison des frameworks JavaScript
• jQuery Mobile
• Interface utilisateur jQuery

Les références

Lectures complémentaires

• John Resig (conférencier) (13 avril 2007). John Resig : faire progresser JavaScript avec les bibliothèques (vidéo YouTube) . Théâtre YUI . Consulté le 9 janvier 2018 .
• Krill, Paul (31 août 2006). "JavaScript, développeurs .Net aidés dans un projet séparé" . InfoMonde . Consulté le 15 avril 2019 .
• Taft, Darryl K. (30 août 2006). "jQuery facilite JavaScript, développement AJAX" . eWeek . Consulté le 15 avril 2019 .

Liens externes

• Site officiel