{"id":61191,"date":"2022-09-09T08:59:33","date_gmt":"2022-09-09T07:59:33","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=61191&#038;post_type=knowledgebase&#038;preview_id=61191"},"modified":"2025-10-01T20:45:07","modified_gmt":"2025-10-01T19:45:07","slug":"qu-est-jquery","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/","title":{"rendered":"Qu&rsquo;est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web"},"content":{"rendered":"<p>Il serait difficile d&rsquo;exag\u00e9rer l&rsquo;impact de <a href=\"https:\/\/kinqsta.com\/fr\/blog\/bibliotheques-javascript\/#jquery\" rel=\"noopener\">jQuery<\/a> sur le d\u00e9veloppement web apr\u00e8s la publication de la biblioth\u00e8que JavaScript open source il y a plus de 15 ans. Une bo\u00eete \u00e0 outils qui a cr\u00e9\u00e9 un nouveau raccourci pour la <a href=\"https:\/\/kinqsta.com\/fr\/blog\/meilleur-langage-programmation-apprendre\/#javascript\" rel=\"noopener\">programmation JavaScript<\/a> autrement complexe, jQuery continue de respecter la devise de ses d\u00e9veloppeurs : \u00ab \u00c9crire moins, faire plus \u00bb<\/p>\n<p>Aujourd&rsquo;hui encore, jQuery est populaire parmi les d\u00e9veloppeurs professionnels, tandis que d&rsquo;autres personnes ayant peu ou pas d&rsquo;exp\u00e9rience en programmation peuvent utiliser la biblioth\u00e8que pour ajouter des fonctionnalit\u00e9s avanc\u00e9es \u00e0 leurs sites web. Voici ce qui se cache derri\u00e8re l&rsquo;une des plus grandes r\u00e9ussites du <a href=\"https:\/\/kinqsta.com\/web-development\/\" rel=\"noopener\">d\u00e9veloppement web<\/a>.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Quelle est la popularit\u00e9 de jQuery ?<\/h2>\n<p>L&rsquo;enqu\u00eate 2022 de StackOverflow sur les <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#most-popular-technologies-webframe-prof\" target=\"_blank\" rel=\"noopener noreferrer\">technologies web utilis\u00e9es par les d\u00e9veloppeurs professionnels<\/a> a r\u00e9v\u00e9l\u00e9 qu&rsquo;un peu plus de 29 % des plus de 45.000 r\u00e9pondants travaillaient avec jQuery. Parmi les <a href=\"https:\/\/kinqsta.com\/fr\/blog\/bibliotheques-javascript\/#the-most-popular-javascript-libraries\" rel=\"noopener\">biblioth\u00e8ques JavaScript<\/a>, jQuery se classait juste derri\u00e8re <a href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-react-js\/\" rel=\"noopener\">React.js<\/a>, la biblioth\u00e8que d\u00e9velopp\u00e9e pour la premi\u00e8re fois chez Facebook (aujourd&rsquo;hui Meta) en 2011 et qui est d\u00e9sormais adopt\u00e9e par plus de 44 % de ces d\u00e9veloppeurs.<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/stackoverflow-2022-web-technologies-survey.png\" alt=\"Frameworks et technologies web populaires en 2022.\" width=\"1024\" height=\"490\"><figcaption class=\"wp-caption-text\">Frameworks et technologies web populaires en 2022. (Image source : <a href=\"https:\/\/survey.stackoverflow.co\/2022\/\" target=\"_blank\" rel=\"noopener noreferrer\">StackOverflow<\/a>)<\/figcaption><\/figure>\n<p>Mais les projets actuels des d\u00e9veloppeurs web ne racontent pas toute l&rsquo;histoire. D&rsquo;apr\u00e8s les <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery\" target=\"_blank\" rel=\"noopener noreferrer\">tendances technologiques Internet<\/a> de BuiltWith, jQuery sera pr\u00e9sent sur plus de 80 millions de sites web en 2022. C&rsquo;est une \u00e9norme avance sur les pr\u00e8s de 11 millions de sites web utilisant React.<\/p>\n\n<p>La biblioth\u00e8que jQuery est fournie avec le noyau de WordPress depuis plus de dix ans, ce qui la rend disponible d\u00e8s le d\u00e9part pour des centaines de <a href=\"https:\/\/kinqsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\" rel=\"noopener\">th\u00e8mes<\/a> qui s&rsquo;appuient sur ses fonctionnalit\u00e9s pour cr\u00e9er des sites web dynamiques. <a href=\"https:\/\/kinqsta.com\/fr\/blog\/wordpress-vs-drupal\/\" rel=\"noopener\">Drupal<\/a> est un autre <a href=\"https:\/\/kinqsta.com\/fr\/blog\/systeme-gestion-contenu\/\" rel=\"noopener\">syst\u00e8me de gestion de contenu<\/a> populaire qui a inclus jQuery parmi ses composants de base. Quelles que soient les technologies actuellement privil\u00e9gi\u00e9es par les d\u00e9veloppeurs, jQuery reste la biblioth\u00e8que JavaScript la <em>plus utilis\u00e9e<\/em> sur le web.<\/p>\n<h2>Une br\u00e8ve histoire de jQuery<\/h2>\n<p>La <a href=\"https:\/\/kinqsta.com\/fr\/parts-de-marche-des-navigateurs\/\" rel=\"noopener\">bataille des navigateurs<\/a> fait rage depuis les d\u00e9buts du web, et les d\u00e9veloppeurs en ont toujours \u00e9t\u00e9 les victimes. En 2006, lorsque le d\u00e9veloppeur web John Resig a d\u00e9voil\u00e9 jQuery, le navigateur Internet Explorer de Microsoft \u00e9tait le <a href=\"https:\/\/www.visualcapitalist.com\/internet-browser-market-share\/\" target=\"_blank\" rel=\"noopener noreferrer\">leader incontest\u00e9 du march\u00e9<\/a> &#8211; un renversement de l&rsquo;avantage de Netscape moins d&rsquo;une d\u00e9cennie plus t\u00f4t.<\/p>\n<p>\u00c0 l&rsquo;\u00e9poque, le nouveau Firefox de Mozilla d\u00e9tenait une part de march\u00e9 de 10 % (contre 84 % pour Microsoft) et Safari d&rsquo;Apple venait d&rsquo;appara\u00eetre sur la sc\u00e8ne. Chrome de Google, le leader actuel du march\u00e9, n&rsquo;existait pas. Les programmeurs JavaScript comme Resig se battaient r\u00e9guli\u00e8rement pour \u00e9crire du code qui fonctionnerait dans tous les navigateurs.<\/p>\n<p>Sa nouvelle biblioth\u00e8que jQuery a \u00e9t\u00e9 con\u00e7ue pour tenir compte des diff\u00e9rences dans la fa\u00e7on dont JavaScript \u00e9tait impl\u00e9ment\u00e9 par ces navigateurs et aider les d\u00e9veloppeurs \u00e0 \u00e9crire moins de code tout en accomplissant des t\u00e2ches comme celles-ci :<\/p>\n<ul>\n<li>Manipuler les <a href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">\u00e9l\u00e9ments HTML<\/a> d&rsquo;une page web<\/li>\n<li>Modifier dynamiquement les CSS<\/li>\n<li>R\u00e9agir aux \u00e9v\u00e9nements tels que les clics de souris et les pressions de touches<\/li>\n<li>Traiter les requ\u00eates Ajax pour mettre \u00e0 jour le contenu d&rsquo;une page sans la recharger<\/li>\n<\/ul>\n<p>Suite \u00e0 la publication de la biblioth\u00e8que par Resig, d&rsquo;autres d\u00e9veloppeurs ont cr\u00e9\u00e9 des applications sur jQuery, partageant souvent leur travail sous forme d&rsquo;extensions afin de mettre les nouvelles fonctionnalit\u00e9s \u00e0 la disposition de tous.<\/p>\n<h3>Qu&rsquo;est-ce que jQuery UI ?<\/h3>\n<p><a href=\"https:\/\/jqueryui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery UI<\/a> est une <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery-UI\" target=\"_blank\" rel=\"noopener noreferrer\">collection populaire d&rsquo;extensions<\/a> con\u00e7ues pour am\u00e9liorer les interfaces utilisateur. Elle est consid\u00e9r\u00e9e comme un compagnon \u00ab officiel \u00bb de la biblioth\u00e8que de base jQuery et ajoute une foule d&rsquo;effets sp\u00e9ciaux et de widgets tels que des s\u00e9lecteurs de date, des barres de progression, des diaporamas, des tourniquets et des panneaux \u00e0 onglets ou pliables.<\/p>\n<h2>Quelle est la diff\u00e9rence entre jQuery et JavaScript ?<\/h2>\n<p>Il est <strong>important de savoir que jQuery <em>est du<\/em> JavaScript<\/strong>. Lorsque vous utilisez jQuery, vous travaillez avec des instances d&rsquo;objets JavaScript qui refl\u00e8tent les conventions de d\u00e9nomination des m\u00e9thodes (fonctions) et des propri\u00e9t\u00e9s de jQuery. Jetons un coup d&rsquo;\u0153il \u00e0 la <a href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-javascript\/#vanilla-javascript\" rel=\"noopener\">vanilla JavaScript<\/a> et jQuery, s&rsquo;attaquant \u00e0 la m\u00eame t\u00e2che.<\/p>\n<p>Voici un extrait de HTML quelque part sur une page web :<\/p>\n<pre><code class=\"language-html\">&lt;p id=\"target\"&gt;Old text&lt;\/p&gt;<\/code><\/pre>\n<p>Un code vanilla JavaScript capable de trouver l&rsquo;\u00e9l\u00e9ment <code>&lt;p&gt;<\/code> avec la \u00ab target \u00bb <code>id<\/code> &#8211; puis de remplacer le texte entre les balises &#8211; pourrait ressembler \u00e0 ceci :<\/p>\n<pre><code class=\"language-js\">const content = document.getElementById( \"target\" );\ncontent.textContent = \"New text\";<\/code><\/pre>\n<p>La m\u00e9thode <code>getElementById()<\/code> de JavaScript renvoie un objet qui comprend le HTML et le contenu textuel du paragraphe avec la \u00ab target \u00bb <code>id<\/code>. L&rsquo;objet est affect\u00e9 \u00e0 la r\u00e9f\u00e9rence constante <code>content<\/code>, puis sa propri\u00e9t\u00e9 <code>textContent<\/code> est modifi\u00e9e en \u00ab New text \u00bb.<\/p>\n<p>JavaScript vous permet de cha\u00eener des m\u00e9thodes, ce qui permet de r\u00e9aliser ce qui pr\u00e9c\u00e8de avec une seule d\u00e9claration :<\/p>\n<pre><code class=\"language-js\"> document.getElementById( \"target\" ).textContent = \"New text\"; <\/code><\/pre>\n<p>Il n&rsquo;est donc pas surprenant que vous puissiez \u00e9galement encha\u00eener des actions jQuery. Pour remplacer \u00ab Old text \u00bb par \u00ab Nex text \u00bb \u00e0 l&rsquo;aide de jQuery, vous pouvez proc\u00e9der comme suit :<\/p>\n<pre><code class=\"language-js\">$( \"#target\" ).text( \"New text\" );<\/code><\/pre>\n<p>Le signe dollar (<code>$<\/code>) est un alias court pour <code>jQuery<\/code>, et <code>( \"#target\" )<\/code> est un exemple de s\u00e9lecteur jQuery. Dans ce cas, le s\u00e9lecteur recherche un \u00e9l\u00e9ment HTML avec le <code>id<\/code> de notre paragraphe cible. La m\u00e9thode jQuery <code>text()<\/code> est encha\u00een\u00e9e pour faire de \u00ab New text \u00bb le contenu du paragraphe.<\/p>\n<h2>Comment utiliser jQuery sur votre site web<\/h2>\n<p>Ajoutez jQuery \u00e0 votre site web en liant le code de la biblioth\u00e8que \u00e0 partir des pages du site. La biblioth\u00e8que jQuery peut se trouver sur votre serveur web ou sur un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/cdn-wordpress\/\">r\u00e9seau de diffusion de contenu (Content Delivery Network ou CDN)<\/a> accessible au public. Le site officiel de jQuery peut vous mettre en relation avec les <a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">derni\u00e8res versions de la biblioth\u00e8que<\/a>.<\/p>\n<p>La biblioth\u00e8que jQuery est disponible en <a href=\"https:\/\/kinqsta.com\/fr\/blog\/minifier-javascript\/\">JavaScript minifi\u00e9 (compress\u00e9)<\/a> pour un chargement rapide en production ou non compress\u00e9 pour la lisibilit\u00e9 et le d\u00e9bogage.<\/p>\n<figure style=\"width: 1017px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/jquery-official-download.jpg\" alt=\"Le site web officiel de jQuery.\" width=\"1017\" height=\"498\"><figcaption class=\"wp-caption-text\">Le site web officiel de jQuery.<\/figcaption><\/figure>\n<p>Vous \u00e9crirez \u00e9galement au moins un peu de JavaScript pour invoquer jQuery et effectuer des t\u00e2ches sp\u00e9cifiques \u00e0 votre application web. Dans le HTML des pages de votre site web, vous pouvez lier la biblioth\u00e8que jQuery et le fichier contenant votre code comme ceci :<\/p>\n<pre><code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"\/js\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"\/js\/my_script.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Dans cet exemple, la version 3.6.0 de jQuery et votre code sp\u00e9cifique au site dans un fichier appel\u00e9 <strong>my_script.js<\/strong> sont situ\u00e9s dans le r\u00e9pertoire<code>\/js\/<\/code> du site web. La biblioth\u00e8que jQuery est g\u00e9n\u00e9ralement incluse dans la section <code>&lt;head&gt;<\/code> d&rsquo;une page web. Il est courant que les d\u00e9veloppeurs placent certains liens vers des fichiers JavaScript, y compris le code qui repose sur la biblioth\u00e8que jQuery, vers le bas d&rsquo;une page, g\u00e9n\u00e9ralement juste avant la fermeture de la balise <code>&lt;body&gt;<\/code>. Vous voudrez toujours que tout code sp\u00e9cifique au site qui invoque jQuery apparaisse <strong>apr\u00e8s<\/strong> le lien vers la biblioth\u00e8que elle-m\u00eame.<\/p>\n<h3>Lien vers jQuery sur un CDN<\/h3>\n<p>La biblioth\u00e8que jQuery se t\u00e9l\u00e9charge souvent plus rapidement lorsqu&rsquo;elle est fournie par un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/cdn-wordpress\/\">CDN robuste<\/a>. jQuery est tellement omnipr\u00e9sent sur le web qu&rsquo;il y a de fortes chances qu&rsquo;un visiteur de votre site ait d\u00e9j\u00e0 mis la biblioth\u00e8que en cache dans son navigateur pour plusieurs CDN. Nous pouvons modifier l&rsquo;extrait HTML ci-dessus pour utiliser le r\u00e9seau de diffusion de contenu JavaScript de Cloudflare comme ceci :<\/p>\n<pre><code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"\/js\/my_script.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<h3>Appel de jQuery dans votre application<\/h3>\n<p>Lorsque vous \u00e9crivez votre application jQuery, une bonne pratique consiste \u00e0 confirmer que la page web a fini de se charger avant que votre code ne commence \u00e0 s&rsquo;ex\u00e9cuter. Vous pouvez tester cela en utilisant la m\u00e9thode <code>ready()<\/code>, qui laisse votre code s&rsquo;ex\u00e9cuter lorsque le document est charg\u00e9, comme ceci :<\/p>\n<pre><code class=\"language-js\">$(document).ready(function() {\n  \/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<p>Ce d\u00e9but pour une application jQuery est si courant que les d\u00e9veloppeurs de la biblioth\u00e8que ont con\u00e7u une syntaxe encore plus br\u00e8ve :<\/p>\n<pre><code class=\"language-js\">$(function() { \n  \/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<h3>S\u00e9lection d&rsquo;\u00e9l\u00e9ments dans le DOM avec jQuery<\/h3>\n<p>La base de la plupart des applications jQuery est la capacit\u00e9 de traverser la structure d&rsquo;une page web en tant qu&rsquo;objet (le <a href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-javascript\/#the-javascript-dom\" rel=\"noopener\">mod\u00e8le d&rsquo;objet de document, ou DOM<\/a>) et de cibler divers \u00e9l\u00e9ments dans le HTML. La s\u00e9lection d&rsquo;un \u00e9l\u00e9ment (ou d&rsquo;un groupe d&rsquo;\u00e9l\u00e9ments) est l&rsquo;\u00e9tape avant de <em>faire <\/em>quelque chose avec cet \u00e9l\u00e9ment, comme changer son apparence ou mettre \u00e0 jour le contenu \u00e0 proximit\u00e9. Les s\u00e9lecteurs jQuery ciblent les propri\u00e9t\u00e9s DOM de diff\u00e9rentes mani\u00e8res. Les plus courants incluent :<\/p>\n<ul>\n<li>Par nom d&rsquo;\u00e9l\u00e9ment HTML (balise)<\/li>\n<li>Par les propri\u00e9t\u00e9s CSS (y compris les ID et les noms de classe)<\/li>\n<li>Par la position relative d&rsquo;un \u00e9l\u00e9ment dans le DOM<\/li>\n<li>Par la valeur du contenu des champs de formulaire<\/li>\n<li>Par l&rsquo;\u00e9tat actuel d&rsquo;un \u00e9l\u00e9ment<\/li>\n<\/ul>\n<p>Voici quelques exemples :<\/p>\n<pre><code class=\"language-js\">\/\/ Select all HTML paragraph tags in a document\n$( \"p\" );\n\n\/\/ Select the element with the ID \"myID\"\n$( \"#myID\" );\n\n\/\/ Select all elements with the CSS class name \"myClass\"\n$( \".myClass\" );\n\n\/\/ Select all input, textarea, select, and button elements in a form\n$( \":input\" );\n\n\/\/ Select the children of some other element\n\/\/ (In this case, the entries in an unordered list)\n$( \"ul &gt; li\" ); \n\n\/\/ Select all anchors with the rel attribute \u201cnofollow\u201d\n$( \"a[rel='nofollow']\" ); \n\n\/\/ Select all checkboxes in a \u201cchecked\u201d state\n$( \"input:checked\" )<\/code><\/pre>\n<p>Vous pouvez combiner les s\u00e9lecteurs jQuery pour un ciblage plus sp\u00e9cifique. Exemples :<\/p>\n<pre><code class=\"language-js\">\/\/ HTML paragraph tags with the CSS class \u201cmyClass\u201d\n$( \"p.myClass\" ); \n\n\/\/ HTML paragraphs with the text \u201cKinsta\u201d anywhere within them\n$( \"p:contains('Kinsta')\" ); \n\n\/\/ HTML div tags that have at least one paragraph tag as a descendent\n$( \"div:has(p)\" ); \n\n\/\/ The first entry in any unordered list with the CSS class \u201cmyList\u201d \n$( \"ul.myList li:first\" ); <\/code><\/pre>\n<h3>Manipulation du DOM avec jQuery<\/h3>\n<p>Maintenant que vous savez comment s\u00e9lectionner divers \u00e9l\u00e9ments dans une page web, vous pouvez les modifier \u00e0 l&rsquo;aide des m\u00e9thodes jQuery. Comme mentionn\u00e9 pr\u00e9c\u00e9demment, vous pouvez souvent encha\u00eener ces actions pour obtenir beaucoup de r\u00e9sultats avec peu de code. Quelques exemples :<\/p>\n<pre><code class=\"language-js\">\/\/ Select the element with the ID \u201calert\u201d and add a red background\n$( \"#alert\" ).css( \"background-color\", \"red\" ); \n\n\/\/ Select the element with the ID \u201calert\u201d and add the class \u201curgent\u201d to its markup\n$( \"#alert\" ).addClass( \"urgent\" ); \n\n\/\/ Find any paragraph with the class \u201cmyName\u201d and make its content \u201cKinsta\u201d\n$( \"p.myName\" ).text( \"Kinsta\" );\n\n\/\/ Like the statement above, but with support for HTML markup\n$( \"p.myName\" ).html( \"&lt;strong&gt;Kinsta&lt;\/strong&gt;\" ); \n\n\/\/ Add the attribute\/value rel=\u201dnofollow\u201d to every anchor\n$( \"a\" ).attr( \"rel\", \"nofollow\" );\n\n\/\/ Hide the element with the ID \u201cmyDiv\u201d (but keep it in the DOM)\n$( \"#myDiv\" ).hide(); \n\n\/\/ Make the element hidden above visible again\n$( \"#myDiv\" ).show();\n\n\/\/ Remove from the DOM everything INSIDE the element with the ID \u201cmyDiv\u201d\n$( \"#myDiv\" ).empty(); \n\n\/\/ Remove from the DOM the entire element with the ID \u201cmyDiv\u201d\n$( \"#myDiv\" ).remove();<\/code><\/pre>\n<h3>G\u00e9rer les \u00e9v\u00e9nements avec jQuery<\/h3>\n<p>Le type de manipulation du DOM d\u00e9crit ci-dessus passerait inaper\u00e7u aux yeux des visiteurs du web si tout se passait d\u00e8s le chargement d&rsquo;une page. C&rsquo;est pourquoi votre application jQuery peut d\u00e9tecter et r\u00e9pondre \u00e0 des \u00e9v\u00e9nements tels que les clics de souris, les mouvements de la souris, les frappes au clavier, et plus encore, afin de cr\u00e9er une exp\u00e9rience v\u00e9ritablement r\u00e9active.<\/p>\n<h4>D\u00e9tection des clics de souris avec jQuery<\/h4>\n<p>R\u00e9pondre au clic de la souris (ou au toucher d&rsquo;un \u00e9cran tactile) est une t\u00e2che courante pour les applications web. Nous avons combin\u00e9 un peu de jQuery et de HTML dans un exemple qui tire \u00e9galement parti de l&rsquo;objet int\u00e9gr\u00e9 <code>event<\/code> de jQuery, qui contiendra des informations utiles sur notre \u00ab \u00e9v\u00e9nement de clic \u00bb :<\/p>\n<pre><code class=\"language-html\">&lt;script&gt;\n\/\/ Invoke jQuery\n$(document).ready(function () {\n    \/\/ Assign \u201cclick\u201d method to all button elements\n    \/\/ Our function passes the built-in object with event details\n    $( \"button\" ).click(function ( event ) { \n        \/\/ Make sure all button backgrounds are white\n        $( \"button\" ).css( \"background-color\", \"white\" );\n        \/\/ Change our H2 text to report the ID of the clicked button\n        $( \"#buttonReport\" ).text(\"You clicked \" + event.target.id); \n        \/\/ Set the background color of the clicked button to red \n        $( \"#\" + event.target.id ).css(\"background-color\", \"red\");\n    });\n}); \n&lt;\/script&gt;\n\n&lt;h2 id=\"buttonReport\"&gt;Click a button!&lt;\/h2&gt;\n&lt;button id=\"Button1\"&gt;Button 1&lt;\/button&gt;\n&lt;button id=\"Button2\"&gt;Button 2&lt;\/button&gt;\n&lt;button id=\"Button3\"&gt;Button 3&lt;\/button&gt; <\/code><\/pre>\n<p>Le r\u00e9sultat :<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/jquery-detecting-mouse-clicks.png\" alt=\"D\u00e9tection des clics de souris.\" width=\"1024\" height=\"426\"><figcaption class=\"wp-caption-text\">D\u00e9tection des clics de souris.<\/figcaption><\/figure>\n<h4><strong>D\u00e9tection du mouvement de la souris avec jQuery<\/strong><\/h4>\n<p>Conna\u00eetre l&#8217;emplacement actuel du pointeur de la souris sur une page web est utile dans de nombreuses applications web r\u00e9actives. Voici un exemple de l&rsquo;aide que peut apporter jQuery :<\/p>\n<pre><code class=\"language-html\">&lt;script&gt;\n$(document).ready(function () { \n    \/\/ Detect when the mouse is over a div with the mouseover() method  \n    $( \"div\" ).mouseover(function ( event ) { \n        \/\/ Make the div under the mouse grey and taller\n        $( \"#\" + event.target.id ).css({ \n           \"background-color\" : \"lightgrey\",\n           \"height\" : \"8em\"\n        });\n    }); \n    \/\/ Detect when the mouse moves away with the mouseout() method \n    $( \"div\" ).mouseout(function ( event ) { \n        \/\/ Return the size and color of the div to its original state\n        $( \"#\" + event.target.id ).css({\n           \"background-color\" : \"white\",\n            \"height\" : \"4em\"\n        });\n    });\n}); \n&lt;\/script&gt;\n\n&lt;div id=\"div1\"&gt;Div 1&lt;\/div&gt;\n&lt;div id=\"div2\"&gt;Div 2&lt;\/div&gt;\n&lt;div id=\"div3\"&gt;Div 3&lt;\/div&gt;<\/code><\/pre>\n<p>L&rsquo;exemple ci-dessus montre \u00e9galement comment la m\u00e9thode <code>css()<\/code> de jQuery peut \u00eatre utilis\u00e9e pour d\u00e9finir plusieurs propri\u00e9t\u00e9s CSS \u00e0 la fois. Voici le r\u00e9sultat :<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/jquery-detecting-mouse-movement.png\" alt=\"D\u00e9tection des clics de souris.\" width=\"1024\" height=\"461\"><figcaption class=\"wp-caption-text\">D\u00e9tection des clics de souris.<\/figcaption><\/figure>\n<h3>Gestion des requ\u00eates Ajax avec jQuery<\/h3>\n<p>Une grande partie de la popularit\u00e9 de jQuery r\u00e9side dans sa capacit\u00e9 \u00e0 simplifier les requ\u00eates Ajax que les applications web peuvent utiliser pour \u00e9changer des donn\u00e9es avec les serveurs sans recharger les pages. La biblioth\u00e8que dispose de nombreux outils pour g\u00e9rer les demandes Ajax de donn\u00e9es aux formats texte brut, HTML, XML et JSON. L&rsquo;approche de jQuery consiste \u00e0 proposer des options raccourcies pour les t\u00e2ches les plus courantes. L&rsquo;une des plus simples de la bo\u00eete \u00e0 outils Ajax est la m\u00e9thode <code>load()<\/code>:<\/p>\n<pre><code class=\"language-html\">&lt;div id=\"myContent\"&gt;Replace Me&lt;\/div&gt;\n&lt;button&gt;Load Content&lt;\/button&gt;\n\n&lt;script&gt; \n\/\/ Request the file content.php from the server after a button is clicked.\n\/\/ Place the results in the HTML element with the ID \u201cmyContent\u201d \n$( \"button\" ).click( function (){ \n    $( \"#myContent\" ).load( \"content.php\" );\n}); \n&lt;\/script&gt;<\/code><\/pre>\n<p>Il s&rsquo;y passe beaucoup de choses avec seulement trois lignes de <a href=\"https:\/\/kinqsta.com\/javascript\/\">JavaScript<\/a> et deux \u00e9l\u00e9ments HTML. Le r\u00e9sultat ressemblerait \u00e0 quelque chose comme ceci :<\/p>\n<figure style=\"width: 984px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/jquery-ajax-handling-with-load-method.png\" alt=\"La m\u00e9thode jQuery load() ajoute du contenu sans rafra\u00eechissement de la page.\" width=\"984\" height=\"375\"><figcaption class=\"wp-caption-text\">La m\u00e9thode jQuery load() ajoute du contenu sans rafra\u00eechissement de la page.<\/figcaption><\/figure>\n<h3>Comment utiliser jQuery UI<\/h3>\n<p>Ajoutez les extensions jQuery UI \u00e0 vos projets, et vous aurez acc\u00e8s \u00e0 de nombreux effets sp\u00e9ciaux et widgets construits sur la biblioth\u00e8que jQuery de base. Voici un exemple d&rsquo;utilisation de jQuery UI pour ajouter un calendrier en popup comme s\u00e9lecteur de date dans un formulaire web.<\/p>\n<p>Tout d&rsquo;abord, ajoutez la biblioth\u00e8que jQuery UI et ses CSS de soutien \u00e0 vos pages web. Dans cet exemple, nous \u00e9tablissons un lien vers les biblioth\u00e8ques sur le CDN JavaScript de Cloudflare avec la biblioth\u00e8que jQuery principale :<\/p>\n<pre><code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"&gt;&lt;\/script&gt; \n&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.13.2\/jquery-ui.min.js\"&gt;&lt;\/script&gt\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.13.2\/themes\/base\/jquery-ui.min.css\" \/&gt;<\/code><\/pre>\n<p>Ensuite, ajoutez un champ de formulaire <code>input<\/code> dans votre HTML et, via JavaScript, attachez la m\u00e9thode <code>datepicker()<\/code> de jQuery UI \u00e0 l&rsquo;aide d&rsquo;un s\u00e9lecteur :<\/p>\n<pre><code class=\"language-html\">&lt;label for=\"myDate\"&gt;Date:&lt;\/label&gt;\n&lt;input type=\"text\" id=\"myDate\" name=\"myDate\"&gt;\n\n&lt;script&gt;\n$( function() { \n    $( \"#myDate\" ).datepicker();\n} );\n&lt;\/script&gt; <\/code><\/pre>\n<p>Un clic dans le champ de formulaire <code>input<\/code> lancera maintenant le s\u00e9lecteur de date :<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/jquery-ui-library-datepicker.png\" alt=\"Le s\u00e9lecteur de date de jQuery UI.\" width=\"900\" height=\"317\"><figcaption class=\"wp-caption-text\">Le s\u00e9lecteur de date de jQuery UI.<\/figcaption><\/figure>\n<h2>Comment utiliser jQuery dans WordPress<\/h2>\n<p>La biblioth\u00e8que jQuery est fournie avec WordPress et constitue un \u00e9l\u00e9ment cl\u00e9 de nombreux <a href=\"https:\/\/kinqsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">th\u00e8mes WordPress<\/a>. M\u00eame si votre th\u00e8me actuel n&rsquo;utilise pas encore jQuery, vous pouvez profiter de l&rsquo;enregistrement des d\u00e9pendances JavaScript dans WordPress pour mettre en place votre code jQuery.<\/p>\n<p>Pour cela, vous devez modifier le fichier <strong>functions.php<\/strong> qui fait partie de votre th\u00e8me. Une mise \u00e0 jour du th\u00e8me peut \u00e9craser ce fichier, c&rsquo;est pourquoi il est recommand\u00e9 de prot\u00e9ger vos modifications en <a href=\"https:\/\/kinqsta.com\/fr\/blog\/theme-enfant-wordpress\/\">cr\u00e9ant d&rsquo;abord un th\u00e8me enfant<\/a> et en modifiant le fichier <strong>functions.php<\/strong>. Au minimum, <a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/sauvegardes-wordpress\/#wordpress-backup#create-wordpress-backup\" rel=\"noopener\">cr\u00e9ez une sauvegarde manuelle de WordPress<\/a> avant de poursuivre.<\/p>\n<h3>Enregistrement de votre JavaScript jQuery dans functions.php<\/h3>\n<p>Vous pouvez utiliser un client <a href=\"https:\/\/kinqsta.com\/fr\/blog\/ftp-vs-sftp\/\" rel=\"noopener\">FTP ou SFTP<\/a> pour transf\u00e9rer le fichier <strong>functions.php<\/strong> entre votre bureau et le serveur web afin de le modifier. Les <a href=\"https:\/\/kinqsta.com\/fr\/blog\/roles-utilisateurs-wordpress\/\">administrateurs de WordPress<\/a> peuvent \u00e9galement modifier <strong>functions.php<\/strong> au sein du CMS :<\/p>\n<p>Depuis le tableau de bord, s\u00e9lectionnez <strong>Apparence<\/strong> &gt; <strong>\u00c9diteur de fichiers de th\u00e8me.<\/strong><\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/launching-theme-file-editor.jpg\" alt=\"Lancement de l'\u00e9diteur de fichiers de th\u00e8me.\" width=\"1024\" height=\"605\"><figcaption class=\"wp-caption-text\">Lancement de l&rsquo;\u00e9diteur de fichiers de th\u00e8me.<\/figcaption><\/figure>\n<p>Cliquez sur <strong>Fonctions du th\u00e8me<\/strong> dans le menu de gauche.<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/theme-file-editor-view.jpg\" alt=\"\u00c0 l'int\u00e9rieur de l'\u00e9diteur de fichiers de th\u00e8me.\" width=\"1024\" height=\"473\"><figcaption class=\"wp-caption-text\">\u00c0 l&rsquo;int\u00e9rieur de l&rsquo;\u00e9diteur de fichiers de th\u00e8me.<\/figcaption><\/figure>\n<p>Le contenu de votre fichier <strong>functions.php<\/strong> d\u00e9pendra du th\u00e8me actuellement actif. Ci-dessus se trouvent les fonctions du <a href=\"https:\/\/kinqsta.com\/fr\/blog\/theme-twenty-twenty-one\/\" rel=\"noopener\">th\u00e8me Twenty Twenty-One<\/a>. Vous pouvez ajouter votre propre script jQuery \u00e0 la configuration de votre site en utilisant la fonction utilitaire de WordPress <code>wp_enqueue_script()<\/code>. Voici le mod\u00e8le pour cette fonction :<\/p>\n<pre><code class=\"language-php\">wp_enqueue_script( <strong>$handle<\/strong>, <strong>$src<\/strong>, <strong>$deps<\/strong>, <strong>$ver<\/strong>, <strong>$in_footer<\/strong> );<\/code><\/pre>\n<p>Et voici ce que tout cela signifie :<\/p>\n<ul>\n<li><strong>$handle<\/strong> : Le nom convivial li\u00e9 \u00e0 ce script. (La biblioth\u00e8que centrale jQuery est d\u00e9j\u00e0 enregistr\u00e9e dans WordPress avec le handle <strong>jquery<\/strong>.)<\/li>\n<li><strong>$src <\/strong>: Le chemin et le nom de fichier ou l&rsquo;URL pointant vers le code source JavaScript.<\/li>\n<li><strong>$deps <\/strong>: Les handles de toute autre source JavaScript dont ce script a besoin pour fonctionner correctement.<\/li>\n<li><strong>$ver <\/strong>: Tout num\u00e9ro de version que vous avez attribu\u00e9 \u00e0 votre code source JavaScript.<\/li>\n<li><strong>$in_footer <\/strong>: S&rsquo;il a la valeur <strong>true<\/strong>, le script sera ajout\u00e9 pr\u00e8s du bas de la page. Sinon, les scripts seront plac\u00e9s dans le bloc <code>&lt;head&gt;<\/code>.<\/li>\n<\/ul>\n<p>Une fois qu&rsquo;un script est mis en file d&rsquo;attente, il est ajout\u00e9 \u00e0 une page avec la fonction <code>add_action()<\/code>. Voyez tout cela en action en ajoutant un bloc comme celui-ci au bas de votre fichier <strong>functions.php<\/strong>:<code class=\"language-php\"><\/code><\/p>\n<pre><code class=\"language-php\">\/\/ 'my_custom_scripts' is a function name of your choice\nfunction my_custom_scripts() {\n    wp_enqueue_script( \n       'my_script'\n       get_template_directory_uri() . '\/assets\/js\/my_script.js',\n       array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),\n       '1.0',\n       true ); \n} \nadd_action( 'wp_enqueue_scripts', 'my_custom_scripts' );<\/code><\/pre>\n<p>Ci-dessus, le nouveau script jQuery re\u00e7oit le handle <strong>my_script<\/strong>, et la fonction utilitaire de WordPress <code>get_template_directory_uri()<\/code> aide \u00e0 construire une <a href=\"https:\/\/kinqsta.com\/fr\/blog\/description-url\/\">URL<\/a> pour le fichier JavaScript dans les r\u00e9pertoires du th\u00e8me.<\/p>\n<p>Un tableau d&rsquo;autres handles indique \u00e0 WordPress que <strong>my_script<\/strong> d\u00e9pend de jQuery core, jQuery-UI core et du plugin jQuery-UI datepicker Enfin, nous avons attribu\u00e9 au script le num\u00e9ro de version 1.0 et demand\u00e9 qu&rsquo;il soit plac\u00e9 pr\u00e8s du bas de la page.<\/p>\n<h3>Comment charger jQuery depuis un CDN dans WordPress<\/h3>\n<p>Nous savons que jQuery peut \u00eatre servi \u00e0 partir de plusieurs r\u00e9seaux de diffusion de contenu. Nous savons \u00e9galement que, d\u00e8s le d\u00e9part, WordPress veut charger jQuery et de nombreuses extensions jQuery \u00e0 partir du syst\u00e8me de fichiers du serveur web local.<\/p>\n<p>Vous pouvez modifier ce comportement en \u00e9liminant les informations de configuration enregistr\u00e9es avec le handle <strong>jquery<\/strong> existant et en les r\u00e9\u00e9crivant. Pour ce faire, ajoutez un bloc de code dans <strong>functions.php<\/strong> en commen\u00e7ant par la fonction <code>wp_deregister_script()<\/code>:<\/p>\n<pre><code class=\"language-php\">\/\/ 'my_custom_scripts' is a function name of your choice\nfunction my_custom_scripts() {\n    wp_deregister_script('jquery');\n    wp_register_script(\n        'jquery', \n        'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js',\n         null,\n        '3.6.0',\n         False\n    ); \n    wp_enqueue_script( \n        'my_script'\n        get_template_directory_uri() . '\/assets\/js\/my_script.js',\n        array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),\n        '1.0',\n        true\n    ); \n } \nadd_action( 'wp_enqueue_scripts', 'my_custom_scripts' );<\/code><\/pre>\n<p>Le handle <strong>jquery<\/strong> a \u00e9t\u00e9 attribu\u00e9 \u00e0 la biblioth\u00e8que jQuery sur le CDN Cloudflare et il reste une d\u00e9pendance pour le <strong>my_script<\/strong> local. Vous pouvez utiliser la m\u00eame approche pour tirer d&rsquo;autres composants jQuery &#8211; comme jQuery-UI &#8211; d&rsquo;un CDN.<\/p>\n<p>Pour en savoir plus sur jQuery et WordPress, nous avons un guide de d\u00e9pannage des probl\u00e8mes de configuration qui peuvent entra\u00eener des erreurs telles que \u00ab <a href=\"https:\/\/kinqsta.com\/fr\/blog\/jquery-pas-defini\/\" rel=\"noopener\">jQuery Is Not Defined<\/a> \u00bb.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Depuis plus de 15 ans, la biblioth\u00e8que open source jQuery aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web riches et dynamiques en codant le moins possible. Aujourd&rsquo;hui, jQuery est utilis\u00e9 sur plus de sites web que toute autre biblioth\u00e8que JavaScript.<\/p>\n<p>Elle est \u00e9galement int\u00e9gr\u00e9e \u00e0 certains syst\u00e8mes de gestion de contenu populaires, dont WordPress. De plus, un solide \u00e9cosyst\u00e8me d&rsquo;extensions jQuery cr\u00e9\u00e9es par d&rsquo;autres programmeurs JavaScript aide les d\u00e9veloppeurs de diff\u00e9rents niveaux d&rsquo;exp\u00e9rience \u00e0 ajouter des fonctionnalit\u00e9s avanc\u00e9es \u00e0 leurs sites web.<\/p>\n<p>Et si vous souhaitez cr\u00e9er des sites web et des applications fonctionnant avec jQuery, jetez un coup d&rsquo;\u0153il aux <a href=\"https:\/\/kinqsta.com\/fr\/tarifs\/\" rel=\"noopener\">plans d&rsquo;h\u00e9bergement WordPress infog\u00e9r\u00e9s de Kinsta<\/a> et aux <a href=\"https:\/\/sevalla.com\/application-hosting\/\">solutions d&rsquo;h\u00e9bergement d&rsquo;applications et de bases de donn\u00e9es<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il serait difficile d&rsquo;exag\u00e9rer l&rsquo;impact de jQuery sur le d\u00e9veloppement web apr\u00e8s la publication de la biblioth\u00e8que JavaScript open source il y a plus de 15 &#8230;<\/p>\n","protected":false},"author":259,"featured_media":61219,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[535,539,767],"topic":[979],"class_list":["post-61191","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-jquery","tag-languages","topic-frameworks-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Qu&#039;est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web<\/title>\n<meta name=\"description\" content=\"La biblioth\u00e8que JavaScript open source jQuery aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web dynamiques avec le moins de code possible. En savoir plus.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Qu&#039;est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web\" \/>\n<meta property=\"og:description\" content=\"La biblioth\u00e8que JavaScript open source jQuery aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web dynamiques avec le moins de code possible. En savoir plus.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-09T07:59:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:45:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Steve Bonisteel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"La biblioth\u00e8que JavaScript open source jQuery aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web dynamiques avec le moins de code possible. En savoir plus.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Qu&rsquo;est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web\",\"datePublished\":\"2022-09-09T07:59:33+00:00\",\"dateModified\":\"2025-10-01T19:45:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/\"},\"wordCount\":3022,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png\",\"keywords\":[\"JavaScript\",\"jQuery\",\"languages\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/\",\"name\":\"Qu'est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png\",\"datePublished\":\"2022-09-09T07:59:33+00:00\",\"dateModified\":\"2025-10-01T19:45:07+00:00\",\"description\":\"La biblioth\u00e8que JavaScript open source jQuery aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web dynamiques avec le moins de code possible. En savoir plus.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png\",\"width\":1460,\"height\":730,\"caption\":\"Qu'est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinqsta.com\/fr\/sujets\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Qu&rsquo;est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"caption\":\"Steve Bonisteel\"},\"description\":\"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Qu'est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web","description":"La biblioth\u00e8que JavaScript open source jQuery aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web dynamiques avec le moins de code possible. En savoir plus.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/","og_locale":"fr_FR","og_type":"article","og_title":"Qu'est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web","og_description":"La biblioth\u00e8que JavaScript open source jQuery aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web dynamiques avec le moins de code possible. En savoir plus.","og_url":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2022-09-09T07:59:33+00:00","article_modified_time":"2025-10-01T19:45:07+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"La biblioth\u00e8que JavaScript open source jQuery aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web dynamiques avec le moins de code possible. En savoir plus.","twitter_image":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Steve Bonisteel","Dur\u00e9e de lecture estim\u00e9e":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Qu&rsquo;est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web","datePublished":"2022-09-09T07:59:33+00:00","dateModified":"2025-10-01T19:45:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/"},"wordCount":3022,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png","keywords":["JavaScript","jQuery","languages"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/","url":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/","name":"Qu'est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png","datePublished":"2022-09-09T07:59:33+00:00","dateModified":"2025-10-01T19:45:07+00:00","description":"La biblioth\u00e8que JavaScript open source jQuery aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web dynamiques avec le moins de code possible. En savoir plus.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#primaryimage","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/09\/qu-est-jquery.png","width":1460,"height":730,"caption":"Qu'est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/fr\/blog\/qu-est-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinqsta.com\/fr\/sujets\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"Qu&rsquo;est-ce que jQuery ? Un regard sur la biblioth\u00e8que JavaScript la plus utilis\u00e9e du web"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/fr\/#website","url":"https:\/\/kinqsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","caption":"Steve Bonisteel"},"description":"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.","url":"https:\/\/kinqsta.com\/fr\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/61191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/comments?post=61191"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/61191\/revisions"}],"predecessor-version":[{"id":61222,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/61191\/revisions\/61222"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/61191\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media\/61219"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media?parent=61191"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/tags?post=61191"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/topic?post=61191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}