Wat is jQuery en hoe kun je het gebruiken?

Inleiding

Als je bekend bent met de programmeerwereld, weet je hoe belangrijk programmeertalen zijn. Enkele van de meest cruciale en veelgebruikte talen zijn HTML, CSS, en JavaScript. Waar HTML and CSS je helpen bij het ontwerpen en structureren van je website, stelt JavaScript je in staat om deze interactief te maken. Er zijn een aantal JavaScript-bibliotheken die je kunt gebruiken om unieke functies aan je webproject toe te voegen. Een daarvan is de jQuery-bibliotheek.

jQuery is op zichzelf geen programmeertaal. Het is een hulpmiddel dat je kunt gebruiken om webontwikkeling in JavaScript te vergemakkelijken. Dit helpt om taken eenvoudiger en overzichtelijker te maken. Het is beroemd om het concept 'Write Less, Do More.' Naast het vergemakkelijken van webontwikkeling, biedt jQuery je ook het extra voordeel van cross-browser compatibiliteit. Dit betekent dat de code correct kan worden weergegeven, ongeacht welke browser voor de uitvoer wordt gebruikt.

Om beter te visualiseren hoe jQuery dingen beknopter maakt, nemen we een voorbeeld. Stel dat we het programma "Hello, World!" schrijven. Hier is hoe het er respectievelijk in JavaScript en jQuery uit zou zien:

Beide regels code leveren hetzelfde resultaat op. Zoals je echter kunt zien, maakt jQuery het schrijven beknopter en to the point.

In deze tutorial leer je alles over de basisprincipes van jQuery. Je kunt de tool zelf downloaden van deze website. We gaan te werk alsof je een complete beginner bent zonder kennis van jQuery. Deze tutorial leert je hoe je jQuery installeert en behandelt enkele van de fundamentele concepten die ermee samenhangen. We zullen enkele van de veelvoorkomende selectors, events en effecten in jQuery verkennen. Vervolgens leer je hoe je ontwikkelingsconcepten zoals API, DOM en CDN kunt testen aan de hand van handige voorbeelden. Lees verder om vertrouwd te raken met de wereld van jQuery.

Voordat we beginnen

Er zijn bepaalde dingen die in je voordeel werken als je ze vooraf weet. Het helpt bijvoorbeeld enorm als je een basisbegrip hebt van hoe HTML en CSS werken. Dat behandelen we niet in deze tutorial. We gaan ervan uit dat je in ieder geval weet hoe je een eenvoudige website opzet. Je moet ook een basisbegrip hebben van hoe programmeren in het algemeen werkt. Dat betekent niet dat je een expert in JavaScript moet zijn om verder te gaan. Enige bekendheid met zaken als logica, variabelen en datatypes in programmeren is voldoende.

Hoe je jQuery installeert op je systeem

Laten we allereerst eens kijken hoe je jQuery op je systeem kunt instellen. jQuery is beschikbaar als een JavaScript-bestand, aangezien het een JavaScript-bibliotheek is. Je moet dit bestand koppelen in de HTML-code van onze website. Er zijn twee manieren om dit te doen. Zoals ik al eerder zei, is een manier om het te downloaden van hier. Naast de officiële website kun je jQuery ook vinden in Google Hosted Libraries precies hier.

Een andere manier is om het Content Delivery Network of CDN te gebruiken om naar het bestand te linken. Een CDN bestaat uit een set servers die helpt om webcontent lokaal te leveren. Het hosten van een jQuery-bestand via CDN zorgt ervoor dat de inhoud veel sneller bij de gebruiker aankomt. Daarom zullen we vanaf dit punt in deze tutorial het Content Delivery Network gebruiken.

In ons eerste voorbeeld maken we een webproject. Dit kleine project bevat style.css in de css/ directory. script.js bevindt zich in de js/ directory. Tot slot is er een index.html aanwezig in de root van het webproject:

Voor dit project maken we een HTML-skelet. Vervolgens slaan we dit op als index.html:

Dit is waar we het jQuery-bestand zullen koppelen. Zoals ik al eerder zei, zullen we het via CDN koppelen. Je voert de jQuery-link in voor de </body> tag. Daarna kun je je aangepaste JavaScript-bestand toevoegen, dat in ons voorbeeld script.js was. Vergeet niet om het JavaScript-bestand altijd onder de jQuery-bibliotheek te plaatsen, zoals dit:

Wat zou je doen als je in plaats daarvan een lokale kopie van de jQuery-bibliotheek had gedownload? In dat geval moet je het jQuery-bestand opslaan in de js/ map. Vervolgens kun je het koppelen als js/jquery.min.js.

jQuery: De basisprincipes

Voordat we in de details duiken, nemen we een aantal basisprincipes van jQuery door. De belangrijkste taak van jQuery is om de DOM te gebruiken om HTML-elementen in de browser te verbinden. DOM staat voor Document Object Model. Het is de methode die JavaScript in staat stelt om te communiceren met HTML in een browser. Je kunt de DOM visualiseren door met de rechtermuisknop op je webpagina te klikken en Inspecteren te selecteren. De HTML die in de Ontwikkelaarstools verschijnt, is de DOM.

Een node is een individueel HTML-element in de DOM. JavaScript kan al deze objecten of elementen aanpassen. Je kunt de rangschikking van deze objecten zien als een boomstructuur. <html> bevindt zich bij de wortel, terwijl de elementen zich verder vertakken.

Als je met de rechtermuisknop klikt en Paginabron weergeven selecteert, zie je de onbewerkte HTML van de website. Onthoud dat dit niet hetzelfde is als de DOM. Waar de DOM kan worden gewijzigd, is de HTML-bron volledig statisch. Wijzigingen die je in JavaScript aanbrengt, hebben geen invloed op dit HTML-bestand. De hele <html> node is verpakt in een buitenste laag die het document-object wordt genoemd.

Vervolgens zullen we zien hoe je je webpagina en de functies ervan kunt manipuleren met behulp van jQuery. Voordat je dat doet, moet je er echter voor zorgen dat de pagina klaar is.

Typ het volgende nadat je het script.js-bestand hebt gemaakt in de js/ map:

Nu zal alle code die je schrijft binnen deze code worden verpakt. jQuery zal detecteren of de code klaar is. De code binnen deze functie wordt pas uitgevoerd wanneer de DOM gereed is.

We zullen terugkomen op het 'Hello, World!'-script waar we het aan het begin van de handleiding over hadden. Stel dat we dit script willen starten. Om jQuery te gebruiken om deze tekst in de browser af te drukken, moeten we de ID demo toepassen op een lege alinea op blokniveau, zoals dit:

Om jQuery aan te roepen, moeten we het $ symbool gebruiken. Je kunt CSS-syntaxis en -methoden toepassen om toegang te krijgen tot de DOM met jQuery. Een eenvoudig voorbeeld is als volgt:

Dit is het formaat dat je met jQuery zult gebruiken. We weten al dat het #-symbool een ID vertegenwoordigt in CSS. Daarom kun je toegang krijgen tot de demo-ID met behulp van de #demo.html() selector. Met deze methode kun je de HTML in een element wijzigen.

De volgende code laat zien hoe we het “Hello, World”-programma in de jQuery van het script.js-bestandready() wrapper:

Je moet deze regel code toevoegen aan het script.js-bestand. Sla dit bestand op. Daarna kun je het index.html-bestand openen in de browser. Je zou de uitvoer Hello, World! moeten kunnen zien. Dit is ook een goed moment om de DOM te controleren om het beter te begrijpen. Klik met de rechtermuisknop op de tekst “Hello, World!”. Selecteer Element inspecteren. De DOM zal tonen <p id="demo">Hello, World!</p>. Klikken op Paginabron weergeven daarentegen zal je alleen de ruwe html tonen. In dit geval zou dat zijn: <p id="demo"></p>.

Wat zijn selectors?

Nu gaan we verder met enkele van de cruciale functies in jQuery. Een daarvan zijn selectors. jQuery-selectors vertellen het programma met welke elementen je wilt werken of welke je wilt ‘selecteren’. Ze lijken erg op de selectors die je in CSS gebruikt. Hier is het basisformaat voor toegang tot een selector in jQuery:

Je kunt strings met enkele of dubbele aanhalingstekens gebruiken, hoewel de jQuery-stijlgids de voorkeur geeft aan de laatste. Als je wilt, kun je de volledige lijst met jQuery-selectors bekijken op deze officiële pagina. Ter informatie zijn hier enkele van de meest gebruikte selectors:

• $("*")

Dit is de Wildcard-selector. Hiermee selecteer je elk element op je pagina.

• $(this)

Dit is de Current-selector. Hiermee selecteer je het element waarop je momenteel een functie uitvoert.

• $("p")

Dit is de Tag-selector. Hiermee selecteer je elk exemplaar van de <p>-tag.

• $(".example")

Dit is de Class-selector. Hiermee selecteer je elk afzonderlijk element waarop de klasse example is toegepast.

• $("#example")

Dit is de Id-selector. Hiermee selecteer je slechts één enkel exemplaar van de example-id.

• $("[type='text']")

Dit is de Attribute-selector. Hiermee selecteer je elk gegeven element waarbij text is toegepast op het type-attribuut.

• $("p:first-of-type")

Dit is de Pseudo Element-selector. Hiermee selecteer je de eerste <p>.

Wat zijn events?

Sommige functies van de webpagina worden geladen zodra de pagina wordt geladen. Denk aan het “Hello, World”-voorbeeld. In dit geval zouden we de code rechtstreeks aan de bron-HTML kunnen toevoegen. Maar wat gebeurt er als het laden van een functie gebruikersinteractie vereist? Dat is waar jQuery nuttig wordt.

Stel dat we willen dat er wat tekst verschijnt nadat de gebruiker op een knop klikt. Om deze functie toe te voegen, moet je een <button>-element toevoegen aan het index.html-bestand. Deze knop luistert naar het click-‘event’:

Elke keer dat de gebruiker interactie heeft met de browser, wordt dit als een event beschouwd. De interactie kan plaatsvinden via de muisaanwijzer of het toetsenbord. In het bovenstaande voorbeeld is het klikken op een knop ons event. Daarom wordt het een click-event genoemd.

Vervolgens moeten we een functie aanroepen die de “Hello, World”-code bevat. Om dat te doen, gebruiken we de click()-methode:

Zoals je kunt zien, is de ID van ons <button>-element genaamd trigger. We kunnen dit selecteren met $(“#trigger"). Het doel van het toevoegen van de click()-methode is om het programma te laten luisteren naar het click-event. Vervolgens plaatsen we de functie met de tekstcode binnen de methode:

Onze code zal er aan het einde ongeveer zo uitzien:

Nu kun je het script.js-bestand opslaan. Vernieuw het index.html in de browser om de wijzigingen toe te passen. Nadat u op de knop klikt, verschijnt de testuitvoer “Hello, World!”.

Er zijn ook andere typen jQuery-gebeurtenissen dan click. U kunt een volledige lijst van deze event-methoden bekijken op dit officiële document. Hier zijn enkele van de meest gebruikte die u af en toe kunt tegenkomen:

• click()

De click-gebeurtenis voert de code uit bij een enkele muisklik.

• hover()

De hover-gebeurtenis voert de code uit wanneer de muisaanwijzer over een element zweeft. U kunt ook opgeven of de code wordt geactiveerd door het binnengaan of verlaten van de muis met mouseenter() and mouseleave() respectievelijk.

• submit()

Het verzenden van een formulier activeert de code.

• scroll()

Naar beneden scrollen op het scherm is de gebeurtenis die de code uitvoert.

• keydown()

Het indrukken van de omlaag-toets op het toetsenbord zal de code uitvoeren.

What are Effects?

jQuery effects werken samen met jQuery-gebeurtenissen. Het belangrijkste doel van effecten is, zoals de term al doet vermoeden, om animaties aan de pagina toe te voegen. Hiermee kunt u de elementen manipuleren om verschillende soorten effecten toe te passen. Deze effecten kunnen worden geactiveerd door bepaalde gebeurtenissen.

Om dit beter te begrijpen, bekijken we een voorbeeld. Stel dat we een popup-overlay willen openen en sluiten. Eén manier om dit te doen is door twee verschillende ID's te gebruiken. De ene opent de overlay en de andere sluit deze. De andere manier is om hiervoor een klasse te gebruiken. Het voordeel van het gebruiken van een klasse is dat dezelfde functie de overlay kan openen en sluiten.

Open uw index.html file. Then, delete the <button> and <p> tags uit de body. Voeg nu de volgende regels code toe aan de HTML:

Laten we vervolgens naar ons style.css-bestand kijken. Ons doel hier is om minimale CSS te gebruiken om de overlay te verbergen. Daarvoor gebruiken we display: none en centreren we het als volgt:

Vervolgens gebruiken we de toggle()-methode. Met deze methode kunnen we de display-eigenschap schakelen tussen none en block. Hierdoor wordt de overlay verborgen en getoond telkens wanneer we klikken. Voeg deze code toe aan het script.js-bestand:

Vernieuw ten slotte index.html om de wijzigingen toe te passen. Nu kunt u de zichtbaarheid van de modal in- en uitschakelen. Het enige wat u hoeft te doen is op de knoppen te klikken. Er zijn andere jQuery-effecten die u hiermee kunt combineren. U kunt bijvoorbeeld een eenvoudige toggle() wijzigen in slideToggle() of fadeToggle().

Hieronder volgen enkele van de veelgebruikte effectmethoden in jQuery:

• toggle()

Met deze methode kunt u de zichtbaarheid van het element wijzigen. De bijbehorende eenrichtingseffecten zijn show() and hide().

• fadeToggle()

Met deze methode kunt u de zichtbaarheid en ondoorzichtigheid van het element wisselen via een animatie. De eenrichtingseffecten in dit geval zijn fadeIn() and fadeOut().

• slideToggle()

Met deze methode kunt u schuifeffecten gebruiken om de zichtbaarheid van het element in of uit te schakelen. De eenrichtingseffecten in dit geval zijn slideUp() and slideDown().

• animate()

Met deze effectmethode kunt u aangepaste animatie-effecten uitvoeren. Het maakt gebruik van de CSS-eigenschap van het opgegeven element.

Conclusion

Hopelijk was deze handleiding nuttig om een grondige introductie tot jQuery te geven. Het is een ongelooflijk handig hulpmiddel dat enorm helpt bij het vergemakkelijken van webontwikkeling en het schrijven van code. Dit geldt vooral als je relatief nieuw bent in de programmeerwereld.

We hebben de verschillende elementen verkend die de basis vormen van jQuery. We hebben ook geleerd hoe je deze elementen kunt selecteren en aanpassen, en hoe je gebeurtenissen en effecten goed kunt gebruiken. Beheersing van tools zoals jQuery kan je helpen websites te maken vol interactieve functies die zorgen voor een boeiende gebruikerservaring.

Bekijk enkele bronnen van onze blog die je zullen helpen bij het werken met JavaScript:

• Een gids voor het toevoegen van JavaScript aan HTML
• Werken met JavaScript: hoe klassen werken 
• Werken met JavaScript: hoe prototypen en overervingen werken

Veel computerplezier!