jQuery: wat het is en hoe je het kunt gebruiken
jQuery is een JavaScript-bibliotheek, die is geschreven in JavaScript zelf. Dat maakt het gebruik heel makkelijk, want alle browsers ondersteunen JavaScript.Oorspronkelijk is jQuery opgezet om op een eenvoudige manier animatie en interactiviteit aan je website toevoegen. De huidige ontwikkelingen gaan meer in de richting van database-gebruik en het manipuleren van data. Er kan nog veel meer mee, maar dat is te veel om binnen het bestek van deze website te beschrijven.
Het motto van jQuery is: "Write less, do more", ofwel: Schrijf minder, doe meer.
Dit motto komt tot uiting in de compacte JavaScript opdrachten. Met een paar statements maak je bijvoorbeeld een roll-over
effect voor een figuur.
Beweeg de muis over het jQuery-logo. Op een aanraakscherm tik je het logo aan.
jQuery wordt uitgevoerd op de PC van de bezoeker, dus cliënt-side.
Het grote voordeel van jQuery is dat het vrijwel browser-onafhankelijk is. Toch zijn er soms ontwikkelingen in jQuery
die je voor onaangename verassingen stelt. Een voorbeeld uit de oude doos:
De function ieTextShadow maakt zelf tekst-schaduwen aan in oudere versies van Internet Explorer, die dat niet kunnen
met CSS. Versies van jQuery later dan 1.8.3 kunnen dat niet meer omdat de code om na te gaan welke IE-versie wordt gebruikt
is verwijderd…
Je hoeft dus zelf maar nauwelijks rekening te houden met allerlei browser-specifieke afwijkingen die het programmeren in JavaScript
zo lastig kunnen maken.
De bibliotheek is heel minimaal opgezet. Zo ontbreken mogelijkheden om je document op te maken voor het scherm. Daarvoor heb je een speciale plugin nodig, jQueryUI.
Als je al ervaring hebt met programmeren in JavaScript, is jQuery niet moeilijk om te leren. Het zal veel moeite kosten om er goed in te worden, vanwege de vele mogelijkheden die het biedt.
- In de praktijk werkt het als volgt:
- Ga naar jquery.com
en download de laatste versie. Op het moment dat dit geschreven wordt (22 april 2020) is dat versie 3.5.0.
Ongezipt is die ca. 90 KB groot.
- Zet de volgende regels code in de <HEAD> van je HTML-document:
- Eventuele <STYLE>-blocks en/of stylesheets die horen bij je applicatie.
- <script src="jquery-3.5.0.min.js"></script>
- Eventuele <STYLE>-blocks en/of stylesheets die horen bij je applicatie.
- Zet de volgende regels code in de <BODY> van je HTML-document, bij voorkeur helemaal achteraan, dus net voor de
</body>-tag. Maar in de <HEAD> kan het ook, mits je het na de link aan JQuery zet:
- <script>
$(document).ready(function(){
// Alle activiteit coderen wij hier
.
.
});
</script>
- <script>
- De acties die je door de jQuery-bibliotheek laat uitvoeren codeer je in de sectie $(document).ready. Dat heeft
het voordeel dat de animatie al kan beginnen zodra het HTML-document is geladen en door de browser klaar is gemaakt om op
het scherm te tonen. Het downloaden van 'grote' elementen, zoals afbeeldingen en video's, hoeft daarvoor nog niet klaar te
zijn.
Dit is dus wat anders dan het attribuut onload="..." van de <BODY>-tag. Bij onload wordt gewacht totdat het hele document is geladen, inclusief de plaatjes en andere zaken.
Zie ook het item Over $(document).ready()
- Op de plaats(en) in de <BODY> waar de animatie moet verschijnen zet je de code in <DIV>-tags.
In het voorbeeld heeft die zowel een class als een id. De class wordt gebruikt om de relatie te leggen
tussen het pagina-elementen en de jQuery-functions. Het id wordt gebruikt voor de opmaak. Die refereert aan het style-block.
- Beide plaatjes van de animatie zitten in één figuur. In de 'rust-stand' wordt het bovenste plaatje getoond,
door het plaatje met top:0 in de <div>-tag te plaatsen. Als de muis er over gaat wordt een tijdelijke
<div>-tag gemaakt, waarin het plaatje met bottom:0 wordt geplaatst. De twee tags (lees: plaatjes) vloeien
in elkaar over. Als de muis wordt weggehaald vloeien de plaatjes terug waarna de tijdelijke <div>-tag wordt verwijderd.
- Een en ander wordt verduidelijkt in de code van het voorbeeld. Die kun je downloaden om zelf mee aan de slag te gaan.
Overigens maakt het voorbeeld gebruik van een oude jQuery-versie: 1.4.2.
- In de praktijk is het het handigste om de jQuery-code te betrekken van een CDN. Alle jQuery-versies die daar ooit geplaatst zijn blijven daar beschikbaar, ook nadat de ondersteuning voor die versies is gestopt.
Documentatie
Het voert te ver om de hele jQuery-bibliotheek hier te bespreken. Anderen hebben dat al gedaan. Natuurlijk staat er ook een
beschrijving op jQuery.com.
Ontwikkelingen
jQuery wordt zeer regelmatig bijgewerkt en uitgebreid. Op het moment dat dit geschreven wordt (22 april 2020) is er één
'flow': versie 3.x.x. De vorige twee versies, 1.x.x en versie 2.x.x, worden niet meer bijgehouden.
Er is een belangrijk verschil tussen versies 1 en 2: In versie 2 worden de versies 6, 7 en 8 van Internet Explorer niet meer
ondersteund. Verder zijn ze gelijk.
Versie 3 richt zich meer op dataverwerking uit formulieren en interactie met databases. Een platform voor het amimeren van
graphics en tekst wordt steeds minder nodig doordat CSS steeds beter wordt en steeds meer kan.
Plug-ins
De goede manier om alles uit jQuery te halen was door een of meerdere plug-ins te gebruiken. Deze aanpak wordt door jQuery
niet meer onderhouden. De belangrijkste, jQueryUI voor het opmaken van een webdocument, is er nog wel. Het is bereikbaar via
de homepage van jQuery.com.
Meer informatie over jQuery
Boeken over jQuery zijn er volop, zowel voor beginners als voor ver gevorderden. Ze zijn verkrijgbaar in het Nederlands, maar
het meeste is in het Engels.
Ook op internet is er volop informatie over jQuery te vinden, maar ook dat is meestal in het Engels.
Downloaden:
Druk op de knop:
File: voorb295.zip, 30 882 bytes.
Opmerking:
jQuery wordt veel toegepast als JavaScript-platform in de AJAX-technologie. Zie ook het item AJAX:
wat het is en hoe je het kunt gebruiken.
