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. Het is in feite een gereedschapskist die een nieuwe steno creëerde voor anders ingewikkelde JavaScript programmering, jQuery blijft het motto van zijn developers waarmaken: “Minder schrijven, meer doen”
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 van webontwikkeling schuilgaat.
Hoe populair is jQuery?
Uit StackOverflow’s enquête van 2022 over webtechnologieën die door professionele developers worden gebruikt, bleek dat iets meer dan 29% van de meer dan 45.000 respondenten met jQuery werkte. Onder de JavaScript bibliotheken stond jQuery op de tweede plaats, na React.js, 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.
Maar de huidige projecten van webdevelopers vertellen niet het hele verhaal. Op basis van BuiltWith’s trends in internettechnologie 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.
De jQuery library wordt al meer dan een decennium gebundeld met de core van WordPress, waardoor deze meteen gebruikt kan worden door honderden thema’s die op haar functionaliteit vertrouwen om dynamische websites te maken. Drupal is een ander populair contentbeheersysteem dat jQuery tot zijn corecomponenten kan rekenen. Welke technologieën ook de huidige favorieten van developers zijn, jQuery blijft dus de meest gebruikte JavaScript library op het web.
Een korte geschiedenis van jQuery
De “Battle of the Browsers” 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 onbetwiste marktleider – een ommekeer ten opzichte van Netscape’s voordeel minder dan tien jaar eerder.
In die tijd had Mozilla’s nieuwe Firefox een marktaandeel van 10% (tegenover Microsoft’s 84%) en was Apple’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.
Zijn nieuwe jQuery library werd gebouwd om de verschillen in de manier waarop JavaScript door die browsers werd geïmplementeerd aan te pakken en developers te helpen minder code te schrijven bij het volbrengen van dergelijke taken:
- Manipuleren van de HTML elementen in een webpagina
- Dynamisch wijzigen van CSS
- Reageren op gebeurtenissen zoals muisklikken en toetsaanslagen
- Afhandelen van Ajax verzoeken om de inhoud van een pagina bij te werken zonder opnieuw te laden
Na Resig’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.
Wat is jQuery UI?
jQuery UI is een populaire verzameling plugins die ontworpen zijn om gebruikersinterfaces te verbeteren. Het wordt gezien als een “officiële” 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.
Wat is het verschil tussen jQuery en JavaScript?
Het is belangrijk te weten dat jQuery JavaScript is. Als je jQuery gebruikt, werk je met instanties van JavaScript objecten die jQuery’s naamgevingsconventies voor methoden (functies) en properties weerspiegelen. Laten we eens kijken naar vanilla JavaScript en jQuery, die dezelfde taak aanpakken.
Hier is een stukje HTML ergens op een webpagina:
<p id="target">Old text</p>Vanilla JavaScript code die het <p> element met de id “target” kan vinden – en dan de tekst tussen de tags kan vervangen – zou er als volgt uit kunnen zien:
const content = document.getElementById( "target" );
content.textContent = "New text";JavaScript’s getElementById() methode geeft een object terug dat de HTML en de tekstinhoud bevat van de alinea met het “target” id. Het object wordt toegewezen aan de constant reference content, waarna de property textContent veranderd wordt in “New text”.
Met JavaScript kun je methoden “chainen”, waardoor het mogelijk is het bovenstaande met een enkele declaration te bereiken:
document.getElementById( "target" ).textContent = "New text"; Het is dan ook niet verwonderlijk dat je ook in jQuery acties kunt chainen. Om met jQuery “Old text” in “New text” te veranderen, zou je het volgende kunnen doen:
$( "#target" ).text( "New text" );Het dollarteken ($) is een korte alias voor jQuery, en ( "#target" ) is een voorbeeld van een jQuery selector. In dit geval zoekt de selector een HTML element met de id van onze doel-alinea. De jQuery text() methode wordt gechaind om van “Nieuwe tekst” de inhoud van de alinea te maken.
Zo gebruik je jQuery op je website
Voeg jQuery toe aan je website door de code van de library te linken vanaf de pagina’s van de site. De jQuery library kan op je webserver staan of op een publiek toegankelijk content delivery network (CDN). De officiële jQuery website kan je aansluiten op de nieuwste versies van de library.
De jQuery bibliotheek is beschikbaar in geminificeerd (gecomprimeerd) JavaScript voor snel laden in productie of ongecomprimeerd voor leesbaarheid en debugging.
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’s van je website kun je de jQuery library en het bestand met je code als volgt koppelen:
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>In dit voorbeeld staan versie 3.6.0 van jQuery en je site-specifieke code in een bestand met de naam my_script.js in de/js/ directory op de website. De jQuery bibliotheek wordt meestal opgenomen in de <head> 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 <body> tag. Je zult altijd willen dat plaatsgebonden code die jQuery aanroept, verschijnt na de link naar de library.
Linken naar jQuery op een CDN
De jQuery library zal vaak sneller downloaden als ze geleverd wordt door een robuuste CDN. 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’s JavaScript content delivery netwerk:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>JQuery calls in je applicatie
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 ready() methode te gebruiken, die je code vrijgeeft als het document geladen is, zoals dit:
$(document).ready(function() {
// Your jQuery application will go here
});Dit begin van jQuery applicatie komt zo vaak voor dat de ontwikkelaars van de library een nog kortere syntaxis hebben bedacht:
$(function() {
// Your jQuery application will go here
});Elementen in het DOM selecteren met jQuery
De basis van de meeste jQuery applicatie is de mogelijkheid om de structuur van een webpagina te doorkruisen als een object (het document object model, of DOM) 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 doet , zoals het uiterlijk veranderen of de nabije content bijwerken. jQuery selectors richten zich op verschillende manieren op DOM properties. De meest voorkomende zijn:
- Op HTML element (tag) naam
- Door CSS properties (waaronder ID’s en klassenamen)
- Door de relatieve positie van een element binnen de DOM
- Door de waarde van de inhoud in formuliervelden
- Door de huidige toestand van een element
Hier zijn enkele voorbeelden:
// Select all HTML paragraph tags in a document
$( "p" );
// Select the element with the ID "myID"
$( "#myID" );
// Select all elements with the CSS class name "myClass"
$( ".myClass" );
// Select all input, textarea, select, and button elements in a form
$( ":input" );
// Select the children of some other element
// (In this case, the entries in an unordered list)
$( "ul > li" );
// Select all anchors with the rel attribute “nofollow”
$( "a[rel='nofollow']" );
// Select all checkboxes in a “checked” state
$( "input:checked" )Je kunt jQuery selectors combineren voor meer specifieke targeting. Voorbeelden:
// HTML paragraph tags with the CSS class “myClass”
$( "p.myClass" );
// HTML paragraphs with the text “Kinsta” anywhere within them
$( "p:contains('Kinsta')" );
// HTML div tags that have at least one paragraph tag as a descendent
$( "div:has(p)" );
// The first entry in any unordered list with the CSS class “myList”
$( "ul.myList li:first" ); Het DOM manipuleren met jQuery
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:
// Select the element with the ID “alert” and add a red background
$( "#alert" ).css( "background-color", "red" );
// Select the element with the ID “alert” and add the class “urgent” to its markup
$( "#alert" ).addClass( "urgent" );
// Find any paragraph with the class “myName” and make its content “Kinsta”
$( "p.myName" ).text( "Kinsta" );
// Like the statement above, but with support for HTML markup
$( "p.myName" ).html( "<strong>Kinsta</strong>" );
// Add the attribute/value rel=”nofollow” to every anchor
$( "a" ).attr( "rel", "nofollow" );
// Hide the element with the ID “myDiv” (but keep it in the DOM)
$( "#myDiv" ).hide();
// Make the element hidden above visible again
$( "#myDiv" ).show();
// Remove from the DOM everything INSIDE the element with the ID “myDiv”
$( "#myDiv" ).empty();
// Remove from the DOM the entire element with the ID “myDiv”
$( "#myDiv" ).remove();Gebeurtenissen met jQuery afhandelen
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ëren.
Muisklikken detecteren met jQuery
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’s ingebouwde event object, dat nuttige informatie over onze “klikgebeurtenis” zal bevatten:
<script>
// Invoke jQuery
$(document).ready(function () {
// Assign “click” method to all button elements
// Our function passes the built-in object with event details
$( "button" ).click(function ( event ) {
// Make sure all button backgrounds are white
$( "button" ).css( "background-color", "white" );
// Change our H2 text to report the ID of the clicked button
$( "#buttonReport" ).text("You clicked " + event.target.id);
// Set the background color of the clicked button to red
$( "#" + event.target.id ).css("background-color", "red");
});
});
</script>
<h2 id="buttonReport">Click a button!</h2>
<button id="Button1">Button 1</button>
<button id="Button2">Button 2</button>
<button id="Button3">Button 3</button> Het resultaat:
Muisbeweging detecteren met jQuery
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:
<script>
$(document).ready(function () {
// Detect when the mouse is over a div with the mouseover() method
$( "div" ).mouseover(function ( event ) {
// Make the div under the mouse grey and taller
$( "#" + event.target.id ).css({
"background-color" : "lightgrey",
"height" : "8em"
});
});
// Detect when the mouse moves away with the mouseout() method
$( "div" ).mouseout(function ( event ) {
// Return the size and color of the div to its original state
$( "#" + event.target.id ).css({
"background-color" : "white",
"height" : "4em"
});
});
});
</script>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>Het voorbeeld hierboven laat ook zien hoe jQuery’s css() methode gebruikt kan worden om meerdere CSS properties tegelijk in te stellen. Hier zie je het resultaat:
Ajax verzoeken afhandelen met jQuery
Een groot deel van jQuery’s populariteit is zijn vermogen om de Ajax verzoeken te vereenvoudigen die webapplicaties kunnen gebruiken om gegevens met servers uit te wisselen zonder pagina’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 load() methode:
<div id="myContent">Replace Me</div>
<button>Load Content</button>
<script>
// Request the file content.php from the server after a button is clicked.
// Place the results in the HTML element with the ID “myContent”
$( "button" ).click( function (){
$( "#myContent" ).load( "content.php" );
});
</script>Hiere gebeurt veel met slechts drie regels JavaScript en twee HTML elementen. Het resultaat zou er ongeveer zo uitzien:
Hoe jQuery UI te gebruiken
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.
Voeg eerst de jQuery UI bibliotheek en de ondersteunende CSS toe aan je webpagina’s. In dit voorbeeld linken we naar de libraries op Cloudflare’s JavaScript CDN, samen met de corebibliotheek van jQuery:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />Voeg vervolgens een formulier input veld toe binnen je HTML en koppel, via JavaScript, jQuery UI’s datepicker() methode aan met een selector:
<label for="myDate">Date:</label>
<input type="text" id="myDate" name="myDate">
<script>
$( function() {
$( "#myDate" ).datepicker();
} );
</script> Klikken in het input formulierveld start nu de datumkiezer:
Zo gebruik je jQuery in WordPress
De jQuery library zit in WordPress gebundeld en is een belangrijk onderdeel van veel WordPress thema’s. 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.
Je doet dit door het functions.php 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 een childthema te maken en het functions.php bestand daar te bewerken. Maak op zijn minst een handmatige WordPress backup voor je verder gaat.
Registreer je jQuery JavaScript in functions.php
Je kunt een FTP of SFTP cliënt gebruiken om het functions.php bestand over te brengen tussen je desktop en de webserver om het te bewerken. WordPress beheerders kunnen functions.php ook binnen het CMS wijzigen:
Kies in het dashboard Appearance > Theme File Editor.
Klik op Theme Functions in het linker menu.
De inhoud van je functions.php bestand hangt af van het momenteel actieve thema. Hierboven staan functies van het Twenty-One thema. Je kunt je eigen jQuery script aan de configuratie van je site toevoegen met de WordPress functie wp_enqueue_script(). Hier is de template voor die functie:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );En hier zie je wat dat allemaal betekent:
- $handle: De gebruikersvriendelijke naam die aan dit script gekoppeld is. (De jQuery corelibrary is in WordPress al geregistreerd met de handle jquery.)
- $src: Het pad en de bestandsnaam of URL die naar de JavaScript sourcecode verwijst.
- $deps: De handles van eventuele andere JavaScript resources die dit script nodig heeft om goed te kunnen werken.
- $ver: Het eventuele versienummer dat je aan je JavaScript sourcecode hebt toegekend.
- $in_footer: Indien ingesteld op true, wordt het script onderaan de pagina toegevoegd. Anders worden scripts in het
<head>blok geplaatst.
Nadat een script in een wachtrij is gezet, wordt het aan een pagina toegevoegd met de functie add_action(). Zie dit alles in actie door een blok als dit onderaan je functions.php bestand toe te voegen:
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Hierboven krijgt het nieuwe jQuery script de handle my_script, en de WordPress utlity functie get_template_directory_uri() helpt een URL te bouwen voor het JavaScript bestand binnen de mappen van het thema.
Een array van andere handles vertelt WordPress dat my_script 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.
Zo laad je jQuery van een CDN in WordPress
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.
Je kunt dat gedrag veranderen door de met de bestaande jquery handle geregistreerde configuratie-informatie te elimineren en te herschrijven. Om dat te doen voeg je een blok code toe in functions.php dat begint met de functie wp_deregister_script():
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_deregister_script('jquery');
wp_register_script(
'jquery',
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
null,
'3.6.0',
False
);
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );De jquery handle is toegewezen aan de jQuery library op het Cloudflare CDN en het blijft een dependency voor het lokale my_script. Je kunt dezelfde aanpak gebruiken om andere jQuery componenten – zoals jQuery-UI – vanuit een CDN te gebruiken.
Voor meer over jQuery en WordPress hebben we een gids voor het oplossen van configuratieproblemen die kunnen resulteren in fouten als “jQuery Is Not Defined”
Samenvatting
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.
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.
En als je jQuery aangedreven websites en applicaties wilt bouwen, kijk dan eens naar Kinsta’s managed WordPress hostingpakketten en de Applicatie en Database Hosting oplossingen.
