{"id":45649,"date":"2022-09-09T09:59:35","date_gmt":"2022-09-09T07:59:35","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=45649&#038;post_type=knowledgebase&#038;preview_id=45649"},"modified":"2025-10-01T21:46:48","modified_gmt":"2025-10-01T19:46:48","slug":"jquery","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/jquery\/","title":{"rendered":"Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web"},"content":{"rendered":"<p>Het is bijna onmogelijk om de impact te overschatten die <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/#jquery\" rel=\"noopener\">jQuery<\/a> had op webontwikkeling nadat deze open-source JavaScript library meer dan 15 jaar geleden werd uitgebracht. Het is in feite een gereedschapskist die een nieuwe steno cre\u00eberde voor anders ingewikkelde <a href=\"https:\/\/kinsta.com\/nl\/blog\/beste-programmeertaal-om-te-leren\/#javascript\" rel=\"noopener\">JavaScript programmering<\/a>, jQuery blijft het motto van zijn developers waarmaken: &#8220;Minder schrijven, meer doen&#8221;<\/p>\n<p>Ook vandaag de dag nog is jQuery populair bij professionele developers, terwijl mensen met weinig of geen programmeerervaring de library kunnen gebruiken om geavanceerde functionaliteit aan hun websites toe te voegen. Dit is wat er achter een van de grootste succesverhalen <a href=\"https:\/\/kinsta.com\/web-development\/\" rel=\"noopener\">van webontwikkeling<\/a> schuilgaat.<\/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>Hoe populair is jQuery?<\/h2>\n<p>Uit StackOverflow&#8217;s enqu\u00eate van 2022 over <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#most-popular-technologies-webframe-prof\" target=\"_blank\" rel=\"noopener noreferrer\">webtechnologie\u00ebn die door professionele developers worden gebruikt<\/a>, bleek dat iets meer dan 29% van de meer dan 45.000 respondenten met jQuery werkte. Onder de <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/#the-most-popular-javascript-libraries\" rel=\"noopener\">JavaScript bibliotheken<\/a> stond jQuery op de tweede plaats, na <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\" rel=\"noopener\">React.js<\/a>, de bibliotheek die in 2011 voor het eerst door Facebook (nu Meta) werd ontwikkeld en die nu door meer dan 44% van die developers wordt omarmd.<\/p>\n<figure id=\"attachment_131764\" aria-describedby=\"caption-attachment-131764\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/stackoverflow-2022-web-technologies-survey.png\" alt=\"Populaire webframeworks en technologie\u00ebn in 2022.\" width=\"1024\" height=\"490\"><figcaption id=\"caption-attachment-131764\" class=\"wp-caption-text\">Populaire webframeworks en technologie\u00ebn in 2022. (Afbeelding bron: <a href=\"https:\/\/survey.stackoverflow.co\/2022\/\" target=\"_blank\" rel=\"noopener noreferrer\">StackOverflow<\/a>)<\/figcaption><\/figure>\n<p>Maar de huidige projecten van webdevelopers vertellen niet het hele verhaal. Op basis van BuiltWith&#8217;s <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery\" target=\"_blank\" rel=\"noopener noreferrer\">trends in internettechnologie<\/a> kan je stellen dat jQuery in 2022 op meer dan 80 miljoen websites te vinden. Dat is een enorme voorsprong op de bijna 11 miljoen websites waarop React draait.<\/p>\n\n<p>De jQuery library wordt al meer dan een decennium gebundeld met de core van WordPress, waardoor deze meteen gebruikt kan worden door honderden <a href=\"https:\/\/kinsta.com\/nl\/blog\/snelste-wordpress-thema\/\" rel=\"noopener\">thema&#8217;s<\/a> die op haar functionaliteit vertrouwen om dynamische websites te maken. <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-versus-drupal\/\" rel=\"noopener\">Drupal<\/a> is een ander populair <a href=\"https:\/\/kinsta.com\/blog\/content-management-system\/\" rel=\"noopener\">contentbeheersysteem<\/a> dat jQuery tot zijn corecomponenten kan rekenen. Welke technologie\u00ebn ook de huidige favorieten van developers zijn, jQuery blijft dus de <em>meest gebruikte<\/em> JavaScript library op het web.<\/p>\n<h2>Een korte geschiedenis van jQuery<\/h2>\n<p>De <a href=\"https:\/\/kinsta.com\/nl\/marktaandeel-desktopbrowsers\/\" rel=\"noopener\">&#8220;Battle of the Browsers&#8221;<\/a> woedt al sinds het begin van het web, en developers zijn hierbij altijd het slachtoffer geweest. Toen webdeveloper John Resig in 2006 jQuery vrijgaf, was Microsofts Internet Explorer browser de <a href=\"https:\/\/www.visualcapitalist.com\/internet-browser-market-share\/\" target=\"_blank\" rel=\"noopener noreferrer\">onbetwiste marktleider<\/a> &#8211; een ommekeer ten opzichte van Netscape&#8217;s voordeel minder dan tien jaar eerder.<\/p>\n<p>In die tijd had Mozilla&#8217;s nieuwe Firefox een marktaandeel van 10% (tegenover Microsoft&#8217;s 84%) en was Apple&#8217;s Safari net op het toneel verschenen. Google Chrome, de huidige marktleider, bestond nog niet. JavaScript programmeurs zoals Resig hadden regelmatig moeite om code te schrijven die in alle browsers zou werken.<\/p>\n<p>Zijn nieuwe jQuery library werd gebouwd om de verschillen in de manier waarop JavaScript door die browsers werd ge\u00efmplementeerd aan te pakken en developers te helpen minder code te schrijven bij het volbrengen van dergelijke taken:<\/p>\n<ul>\n<li>Manipuleren van de <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML elementen<\/a> in een webpagina<\/li>\n<li>Dynamisch wijzigen van CSS<\/li>\n<li>Reageren op gebeurtenissen zoals muisklikken en toetsaanslagen<\/li>\n<li>Afhandelen van Ajax verzoeken om de inhoud van een pagina bij te werken zonder opnieuw te laden<\/li>\n<\/ul>\n<p>Na Resig&#8217;s vrijgave van de bibliotheek bouwden andere developers applicaties bovenop jQuery, en deelden hun werk vaak als plugins om nieuwe functionaliteit voor iedereen beschikbaar te maken.<\/p>\n<h3>Wat is jQuery UI?<\/h3>\n<p><a href=\"https:\/\/jqueryui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery UI<\/a> is een <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery-UI\" target=\"_blank\" rel=\"noopener noreferrer\">populaire verzameling plugins<\/a> die ontworpen zijn om gebruikersinterfaces te verbeteren. Het wordt gezien als een &#8220;offici\u00eble&#8221; compagnon van de corebibliotheek van jQuery en voegt een heleboel speciale effecten toe en widgets als datumkiezers, voortgangsbalken, schuifbalken, spinners, en panelen met tabbladen of inklapbare panelen.<\/p>\n<h2>Wat is het verschil tussen jQuery en JavaScript?<\/h2>\n<p><strong>Het is belangrijk te weten dat jQuery JavaScript <em>is<\/em><\/strong>. Als je jQuery gebruikt, werk je met instanties van JavaScript objecten die jQuery&#8217;s naamgevingsconventies voor methoden (functies) en properties weerspiegelen. Laten we eens kijken naar <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-javascript\/#vanilla-javascript\" rel=\"noopener\">vanilla JavaScript<\/a> en jQuery, die dezelfde taak aanpakken.<\/p>\n<p>Hier is een stukje HTML ergens op een webpagina:<\/p>\n<pre><code class=\"language-html\">&lt;p id=\"target\"&gt;Old text&lt;\/p&gt;<\/code><\/pre>\n<p>Vanilla JavaScript code die het <code>&lt;p&gt;<\/code> element met de <code>id<\/code> &#8220;target&#8221; kan vinden &#8211; en dan de tekst tussen de tags kan vervangen &#8211; zou er als volgt uit kunnen zien:<\/p>\n<pre><code class=\"language-js\">const content = document.getElementById( \"target\" );\ncontent.textContent = \"New text\";<\/code><\/pre>\n<p>JavaScript&#8217;s <code>getElementById()<\/code> methode geeft een object terug dat de HTML en de tekstinhoud bevat van de alinea met het &#8220;target&#8221; <code>id<\/code>. Het object wordt toegewezen aan de constant reference <code>content<\/code>, waarna de property <code>textContent<\/code> veranderd wordt in &#8220;New text&#8221;.<\/p>\n<p>Met JavaScript kun je methoden &#8220;chainen&#8221;, waardoor het mogelijk is het bovenstaande met een enkele declaration te bereiken:<\/p>\n<pre><code class=\"language-js\"> document.getElementById( \"target\" ).textContent = \"New text\"; <\/code><\/pre>\n<p>Het is dan ook niet verwonderlijk dat je ook in\u00a0 jQuery acties kunt chainen. Om met jQuery &#8220;Old text&#8221; in &#8220;New text&#8221; te veranderen, zou je het volgende kunnen doen:<\/p>\n<pre><code class=\"language-js\">$( \"#target\" ).text( \"New text\" );<\/code><\/pre>\n<p>Het dollarteken (<code>$<\/code>) is een korte alias voor <code>jQuery<\/code>, en <code>( \"#target\" )<\/code> is een voorbeeld van een jQuery selector. In dit geval zoekt de selector een HTML element met de <code>id<\/code> van onze doel-alinea. De jQuery <code>text()<\/code> methode wordt gechaind om van &#8220;Nieuwe tekst&#8221; de inhoud van de alinea te maken.<\/p>\n<h2>Zo gebruik je jQuery op je website<\/h2>\n<p>Voeg jQuery toe aan je website door de code van de library te linken vanaf de pagina&#8217;s van de site. De jQuery library kan op je webserver staan of op een publiek toegankelijk <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-cdn\/\" rel=\"noopener\">content delivery network (CDN)<\/a>. De offici\u00eble jQuery website kan je aansluiten op de <a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">nieuwste versies van de library.<\/a><\/p>\n<p>De jQuery bibliotheek is beschikbaar in <a href=\"https:\/\/kinsta.com\/nl\/blog\/minificeer-javascript\/\">geminificeerd (gecomprimeerd) JavaScript<\/a> voor snel laden in productie of ongecomprimeerd voor leesbaarheid en debugging.<\/p>\n<figure id=\"attachment_131765\" aria-describedby=\"caption-attachment-131765\" style=\"width: 1017px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-official-download.jpg\" alt=\"De offici\u00eble jQuery website.\" width=\"1017\" height=\"498\"><figcaption id=\"caption-attachment-131765\" class=\"wp-caption-text\">De offici\u00eble jQuery website.<\/figcaption><\/figure>\n<p>Je zult ook minstens een kleine hoeveelheid JavaScript moeten schrijven om jQuery aan te roepen en taken aan te pakken die specifiek zijn voor je webapplicatie. In de HTML van de pagina&#8217;s van je website kun je de jQuery library en het bestand met je code als volgt koppelen:<\/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>In dit voorbeeld staan versie 3.6.0 van jQuery en je site-specifieke code in een bestand met de naam <strong>my_script.js<\/strong> in de<code>\/js\/<\/code> directory op de website. De jQuery bibliotheek wordt meestal opgenomen in de <code>&lt;head&gt;<\/code> sectie van een webpagina. Het is gebruikelijk dat developers enkele links naar JavaScript bestanden, waaronder code die op de jQuery library vertrouwt, onderaan een pagina plaatsen, meestal vlak voor het sluiten van de <code>&lt;body&gt;<\/code> tag. Je zult altijd willen dat plaatsgebonden code die jQuery aanroept, verschijnt <strong>na<\/strong> de link naar de library.<\/p>\n<h3>Linken naar jQuery op een CDN<\/h3>\n<p>De jQuery library zal vaak sneller downloaden als ze geleverd wordt door een <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-cdn\/\">robuuste CDN<\/a>. jQuery is zo alomtegenwoordig op het web dat de kans groot is dat een bezoeker van je site de library al in de cache van meerdere CDNs in zijn browser heeft staan. We kunnen de HTML snippet hierboven aanpassen om als volgt gebruik te maken van Cloudflare&#8217;s JavaScript content delivery netwerk:<\/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>JQuery calls in je applicatie<\/h3>\n<p>Bij het schrijven van je jQuery applicatie is een best practice om te bevestigen dat de webpagina klaar is met laden voordat je code begint te lopen. Je kunt dit testen door de <code>ready()<\/code> methode te gebruiken, die je code vrijgeeft als het document geladen is, zoals dit:<\/p>\n<pre><code class=\"language-js\">$(document).ready(function() {\n  \/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<p>Dit begin van jQuery applicatie komt zo vaak voor dat de ontwikkelaars van de library een nog kortere syntaxis hebben bedacht:<\/p>\n<pre><code class=\"language-js\">$(function() { \n  \/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<h3>Elementen in het DOM selecteren met jQuery<\/h3>\n<p>De basis van de meeste jQuery applicatie is de mogelijkheid om de structuur van een webpagina te doorkruisen als een object (het <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-javascript\/#the-javascript-dom\" rel=\"noopener\">document object model, of DOM<\/a>) en verschillende elementen binnen de HTML te kiezen. Het selecteren van een element (of een groep elementen) is de stap voordat je iets met dat element <em>doet <\/em>, zoals het uiterlijk veranderen of de nabije content bijwerken. jQuery selectors richten zich op verschillende manieren op DOM properties. De meest voorkomende zijn:<\/p>\n<ul>\n<li>Op HTML element (tag) naam<\/li>\n<li>Door CSS properties (waaronder ID&#8217;s en klassenamen)<\/li>\n<li>Door de relatieve positie van een element binnen de DOM<\/li>\n<li>Door de waarde van de inhoud in formuliervelden<\/li>\n<li>Door de huidige toestand van een element<\/li>\n<\/ul>\n<p>Hier zijn enkele voorbeelden:<\/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>Je kunt jQuery selectors combineren voor meer specifieke targeting. Voorbeelden:<\/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>Het DOM manipuleren met jQuery<\/h3>\n<p>Nu je weet hoe je verschillende elementen binnen een webpagina kunt selecteren, kun je ze wijzigen met jQuery methoden. Zoals eerder gezegd, kun je deze acties vaak chainen om met weinig codering veel gedaan te krijgen. Enkele voorbeelden:<\/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>Gebeurtenissen met jQuery afhandelen<\/h3>\n<p>Het soort DOM manipulatie dat hierboven beschreven is, zou door webbezoekers onopgemerkt blijven als het allemaal gebeurde zodra een pagina geladen was. Daarom kan je jQuery applicatie gebeurtenissen als muisklikken, muisbeweging, toetsaanslagen, en meer detecteren en erop reageren om een responsieve ervaring te cre\u00ebren.<\/p>\n<h4>Muisklikken detecteren met jQuery<\/h4>\n<p>Reageren op de klik van een muis (of een tik op een aanraakscherm) is een veel voorkomende taak voor web-applicaties. We hebben wat jQuery en HTML gecombineerd in een voorbeeld dat ook gebruik maakt van jQuery&#8217;s ingebouwde <code>event<\/code> object, dat nuttige informatie over onze &#8220;klikgebeurtenis&#8221; zal bevatten:<\/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>Het resultaat:<\/p>\n<figure id=\"attachment_131769\" aria-describedby=\"caption-attachment-131769\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-detecting-mouse-clicks.png\" alt=\"Detecteren van muisklikken.\" width=\"1024\" height=\"426\"><figcaption id=\"caption-attachment-131769\" class=\"wp-caption-text\">Detecteren van muisklikken.<\/figcaption><\/figure>\n<h4><strong>Muisbeweging detecteren met jQuery<\/strong><\/h4>\n<p>Weten wat de huidige plaats van de muisaanwijzer over een webpagina is, is nuttig in veel responsieve webapplicaties. Hier is een voorbeeld van hoe jQuery kan helpen:<\/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>Het voorbeeld hierboven laat ook zien hoe jQuery&#8217;s <code>css()<\/code> methode gebruikt kan worden om meerdere CSS properties tegelijk in te stellen. Hier zie je het resultaat:<\/p>\n<figure id=\"attachment_131768\" aria-describedby=\"caption-attachment-131768\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-detecting-mouse-movement.png\" width=\"1024\" height=\"461\"><figcaption id=\"caption-attachment-131768\" class=\"wp-caption-text\">Detecteren van &#8220;mouse-over&#8221; gebeurtenissen.<\/figcaption><\/figure>\n<h3>Ajax verzoeken afhandelen met jQuery<\/h3>\n<p>Een groot deel van jQuery&#8217;s populariteit is zijn vermogen om de Ajax verzoeken te vereenvoudigen die webapplicaties kunnen gebruiken om gegevens met servers uit te wisselen zonder pagina&#8217;s opnieuw te laden. De library bevat veel hulpmiddelen om Ajax verzoeken om gegevens in platte tekst, HTML, XML, en JSON formaten te beheren. De jQuery aanpak is om steno opties aan te bieden voor de meest voorkomende taken. Een van de eenvoudigste in de Ajax gereedschapskist is de <code>load()<\/code> methode:<\/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>Hiere gebeurt veel met slechts drie regels <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> en twee HTML elementen. Het resultaat zou er ongeveer zo uitzien:<\/p>\n<figure id=\"attachment_131771\" aria-describedby=\"caption-attachment-131771\" style=\"width: 984px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-ajax-handling-with-load-method.png\" alt=\"jQuery load() methode voegt inhoud toe zonder een pagina te verversen.\" width=\"984\" height=\"375\"><figcaption id=\"caption-attachment-131771\" class=\"wp-caption-text\">jQuery load() methode voegt inhoud toe zonder een pagina te verversen.<\/figcaption><\/figure>\n<h3>Hoe jQuery UI te gebruiken<\/h3>\n<p>Voeg jQuery UI plugins toe aan je projecten, en je hebt toegang tot vele speciale effecten en widgets die op de corebibliotheek van jQuery zijn gebouwd. Hier is een voorbeeld waarbij jQuery UI gebruikt wordt om een pop-up kalender als datumkiezer toe te voegen binnen een webformulier.<\/p>\n<p>Voeg eerst de jQuery UI bibliotheek en de ondersteunende CSS toe aan je webpagina&#8217;s. In dit voorbeeld linken we naar de libraries op Cloudflare&#8217;s JavaScript CDN, samen met de corebibliotheek van jQuery:<\/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>Voeg vervolgens een formulier <code>input<\/code> veld toe binnen je HTML en koppel, via JavaScript, jQuery UI&#8217;s <code>datepicker()<\/code> methode aan met een selector:<\/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>Klikken in het <code>input<\/code> formulierveld start nu de datumkiezer:<\/p>\n<figure id=\"attachment_131771\" aria-describedby=\"caption-attachment-131771\" style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-ui-library-datepicker.png\" alt=\"De jQuery UI datumkiezer.\" width=\"900\" height=\"317\"><figcaption id=\"caption-attachment-131771\" class=\"wp-caption-text\">De jQuery UI datumkiezer.<\/figcaption><\/figure>\n<h2>Zo gebruik je jQuery in WordPress<\/h2>\n<p>De jQuery library zit in WordPress gebundeld en is een belangrijk onderdeel van veel <a href=\"https:\/\/kinsta.com\/nl\/blog\/snelste-wordpress-thema\/\">WordPress thema&#8217;s<\/a>. Zelfs als je huidige thema nog geen jQuery gebruikt, kun je gebruik maken van de registratie van JavaScript dependencies binnen WordPress om al je jQuery code aan de praat te krijgen.<\/p>\n<p>Je doet dit door het <strong>functions.php<\/strong> bestand dat deel uitmaakt van je thema te bewerken. Een thema-update kan dat bestand overschrijven, dus het is een goede gewoonte om je veranderingen veilig te bewaren door eerst <a href=\"https:\/\/kinsta.com\/nl\/blog\/child-thema-wordpress\/\" rel=\"noopener\">een childthema te maken<\/a> en het <strong>functions.php<\/strong> bestand daar te bewerken. Maak op zijn minst <a href=\"https:\/\/kinsta.com\/nl\/docs\/wordpress-hosting\/wordpress-backups\/#wordpress-backup#create-wordpress-backup\" rel=\"noopener\">een handmatige WordPress backup<\/a> voor je verder gaat.<\/p>\n<h3>Registreer je jQuery JavaScript in functions.php<\/h3>\n<p>Je kunt een <a href=\"https:\/\/kinsta.com\/nl\/blog\/ftp-vs-sftp\/\" rel=\"noopener\">FTP of SFTP<\/a> cli\u00ebnt gebruiken om het <strong>functions.php<\/strong> bestand over te brengen tussen je desktop en de webserver om het te bewerken. <a href=\"https:\/\/kinsta.com\/nl\/blog\/gebruikersrollen-wordpress\/\">WordPress beheerders<\/a> kunnen <strong>functions.php<\/strong> ook binnen het CMS wijzigen:<\/p>\n<p>Kies in het dashboard <b>Appearance <\/b>&gt; <strong>Theme File Editor.<\/strong><\/p>\n<figure id=\"attachment_131772\" aria-describedby=\"caption-attachment-131772\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/launching-theme-file-editor.jpg\" alt=\"Starten van de Theme File Editor.\" width=\"1024\" height=\"605\"><figcaption id=\"caption-attachment-131772\" class=\"wp-caption-text\">Starten van de Theme File Editor.<\/figcaption><\/figure>\n<p>Klik op <strong>Theme Functions <\/strong>in het linker menu.<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/theme-file-editor-view.jpg\" alt=\"Binnenin de Thema Bestandseditor.\" width=\"1024\" height=\"473\"><figcaption class=\"wp-caption-text\">Binnenin de Thema Bestandseditor.<\/figcaption><\/figure>\n<p>De inhoud van je <strong>functions.php<\/strong> bestand hangt af van het momenteel actieve thema. Hierboven staan functies van het <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-one-thema\/\" rel=\"noopener\">Twenty-One thema<\/a>. Je kunt je eigen jQuery script aan de configuratie van je site toevoegen met de WordPress functie <code>wp_enqueue_script()<\/code>. Hier is de template voor die functie:<\/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>En hier zie je wat dat allemaal betekent:<\/p>\n<ul>\n<li><strong>$handle<\/strong>: De gebruikersvriendelijke naam die aan dit script gekoppeld is. (De jQuery corelibrary is in WordPress al geregistreerd met de handle <strong>jquery<\/strong>.)<\/li>\n<li><strong>$src<\/strong>: Het pad en de bestandsnaam of URL die naar de JavaScript sourcecode verwijst.<\/li>\n<li><strong>$deps: <\/strong>De handles van eventuele andere JavaScript resources die dit script nodig heeft om goed te kunnen werken.<\/li>\n<li><strong>$ver<\/strong>: Het eventuele versienummer dat je aan je JavaScript sourcecode hebt toegekend.<\/li>\n<li><strong>$in_footer<\/strong>: Indien ingesteld op <strong>true<\/strong>, wordt het script onderaan de pagina toegevoegd. Anders worden scripts in het <code>&lt;head&gt;<\/code> blok geplaatst.<\/li>\n<\/ul>\n<p>Nadat een script in een wachtrij is gezet, wordt het aan een pagina toegevoegd met de functie <code>add_action()<\/code>. Zie dit alles in actie door een blok als dit onderaan je <strong>functions.php<\/strong> bestand toe te voegen:<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>Hierboven krijgt het nieuwe jQuery script de handle <strong>my_script<\/strong>, en de WordPress utlity functie <code>get_template_directory_uri()<\/code> helpt een <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-een-url\/\">URL<\/a> te bouwen voor het JavaScript bestand binnen de mappen van het thema.<\/p>\n<p>Een array van andere handles vertelt WordPress dat <strong>my_script<\/strong> afhankelijk is van jQuery core, jQuery-UI core, en de jQuery-UI datepicker plugin. Tenslotte hebben we het script versienummer 1.0 toegekend en gevraagd het onderaan de pagina te plaatsen.<\/p>\n<h3>Zo laad je jQuery van een CDN in WordPress<\/h3>\n<p>We weten dat jQuery vanuit verschillende content delivery netwerken kan worden geleverd. We weten ook dat, out of the box, WordPress jQuery en veel jQuery plugins wil laden uit het bestandssysteem van de lokale webserver.<\/p>\n<p>Je kunt dat gedrag veranderen door de met de bestaande <strong>jquery<\/strong> handle geregistreerde configuratie-informatie te elimineren en te herschrijven. Om dat te doen voeg je een blok code toe in <strong>functions.php<\/strong> dat begint met de functie <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>De <strong>jquery<\/strong> handle is toegewezen aan de jQuery library op het Cloudflare CDN en het blijft een dependency voor het lokale <strong>my_script<\/strong>. Je kunt dezelfde aanpak gebruiken om andere jQuery componenten &#8211; zoals jQuery-UI &#8211; vanuit een CDN te gebruiken.<\/p>\n<p>Voor meer over jQuery en WordPress hebben we een gids voor het oplossen van configuratieproblemen die kunnen resulteren in fouten als &#8220;<a href=\"https:\/\/kinsta.com\/nl\/blog\/jquery-is-not-defined\/\" rel=\"noopener\">jQuery Is Not Defined<\/a>&#8221;<\/p>\n\n<h2>Samenvatting<\/h2>\n<p>Al meer dan 15 jaar helpt de open-source jQuery library ontwikkelaars om rijke, dynamische webapplicaties te bouwen met zo weinig mogelijk codering. Vandaag de dag wordt jQuery op meer websites gebruikt dan welke andere JavaScript library ook.<\/p>\n<p>Het wordt daarnaast gebundeld met enkele populaire content management systemen, waaronder WordPress. Bovendien helpt een robuust ecosysteem van jQuery plugins, gemaakt door andere JavaScript programmeurs, ontwikkelaars met verschillende niveaus van ervaring om geavanceerde functionaliteit aan hun websites toe te voegen.<\/p>\n<p>En als je jQuery aangedreven websites en applicaties wilt bouwen, kijk dan eens naar <a href=\"https:\/\/kinsta.com\/nl\/prijzen\/\" rel=\"noopener\">Kinsta&#8217;s managed WordPress hostingpakketten<\/a> en de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Applicatie en Database Hosting oplossingen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Het is bijna onmogelijk om de impact te overschatten die jQuery had op webontwikkeling nadat deze open-source JavaScript library meer dan 15 jaar geleden werd uitgebracht. &#8230;<\/p>\n","protected":false},"author":259,"featured_media":45650,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[431,485,722],"topic":[847],"class_list":["post-45649","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-jquery","tag-languages","topic-javascript-frameworks"],"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>Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web<\/title>\n<meta name=\"description\" content=\"De open-source jQuery JavaScript library helpt developers om dynamische webapplicaties te bouwen met zo min mogelijk codering. Lees meer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/jquery\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web\" \/>\n<meta property=\"og:description\" content=\"De open-source jQuery JavaScript library helpt developers om dynamische webapplicaties te bouwen met zo min mogelijk codering. Lees meer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-09T07:59:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:46:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-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=\"De open-source jQuery JavaScript library helpt developers om dynamische webapplicaties te bouwen met zo min mogelijk codering. Lees meer.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web\",\"datePublished\":\"2022-09-09T07:59:35+00:00\",\"dateModified\":\"2025-10-01T19:46:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/\"},\"wordCount\":2512,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png\",\"keywords\":[\"JavaScript\",\"jQuery\",\"languages\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/\",\"name\":\"Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png\",\"datePublished\":\"2022-09-09T07:59:35+00:00\",\"dateModified\":\"2025-10-01T19:46:48+00:00\",\"description\":\"De open-source jQuery JavaScript library helpt developers om dynamische webapplicaties te bouwen met zo min mogelijk codering. Lees meer.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript frameworks\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/javascript-frameworks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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:\/\/kinsta.com\/nl\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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:\/\/kinsta.com\/nl\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web","description":"De open-source jQuery JavaScript library helpt developers om dynamische webapplicaties te bouwen met zo min mogelijk codering. Lees meer.","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:\/\/kinsta.com\/nl\/blog\/jquery\/","og_locale":"nl_NL","og_type":"article","og_title":"Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web","og_description":"De open-source jQuery JavaScript library helpt developers om dynamische webapplicaties te bouwen met zo min mogelijk codering. Lees meer.","og_url":"https:\/\/kinsta.com\/nl\/blog\/jquery\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2022-09-09T07:59:35+00:00","article_modified_time":"2025-10-01T19:46:48+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"De open-source jQuery JavaScript library helpt developers om dynamische webapplicaties te bouwen met zo min mogelijk codering. Lees meer.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Steve Bonisteel","Geschatte leestijd":"16 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/jquery\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/jquery\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web","datePublished":"2022-09-09T07:59:35+00:00","dateModified":"2025-10-01T19:46:48+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/jquery\/"},"wordCount":2512,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png","keywords":["JavaScript","jQuery","languages"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/jquery\/","url":"https:\/\/kinsta.com\/nl\/blog\/jquery\/","name":"Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/jquery\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png","datePublished":"2022-09-09T07:59:35+00:00","dateModified":"2025-10-01T19:46:48+00:00","description":"De open-source jQuery JavaScript library helpt developers om dynamische webapplicaties te bouwen met zo min mogelijk codering. Lees meer.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/jquery\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/jquery\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/jquery\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/09\/what-is-jquery.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"JavaScript frameworks","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/javascript-frameworks\/"},{"@type":"ListItem","position":3,"name":"Wat is jQuery? Een blik op de meest gebruikte JavaScript library van het web"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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:\/\/kinsta.com\/nl\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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:\/\/kinsta.com\/nl\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/45649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=45649"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/45649\/revisions"}],"predecessor-version":[{"id":46625,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/45649\/revisions\/46625"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/translations\/dk"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45649\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/45650"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=45649"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=45649"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=45649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}