InfoNu.nl > Pc en Internet > Programmeren > JQuery voor beginners - Wat is het en hoe werkt het?

JQuery voor beginners - Wat is het en hoe werkt het?

JQuery, elke website lijkt het tegenwoordig te gebruiken. Het is de populairste cross-browser JavaScript bibliotheek ter wereld. In dit artikel bespreken wordt de structuur besproken van jQuery en vind je een inleiding over hoe je jQuery zelf kunt gebruiken in je website. Voor dit artikel is een basiskennis JavaScipt en HTML nodig.

Wat is jQuery?

jQuery is een bibliotheek die geschikt is om AJAX gebaseerde web-applicaties te maken. De structuur van jQuery is zo opgezet dat zeer eenvoudig is om web 2.0 applicaties te maken. De structuur van het framework zorgt ervoor dat de programmeur op een zeer gestructureerde en herbruikbare manier code schrijft.
De jQuery bibliotheek vereenvoudigd het proces om de HTML DOM tree te manipuleren. Dit door gebruik te maken van events, animatie en AJAX calls.

Welke functies voorziete jQuery?

  • Functies voor DOM elementen te selecteren
  • Functies om DOM elementen te manipuleren
  • Functies om CSS manipulaties uit te voeren
  • Ondersteuning om events te definieren
  • Voorgedefinieerde effecten en animaties
  • Ajax ondersteuning
  • Uitbreidbaarheid
  • De mogelijkheid om herbruikbare plugin's te maken in jQuery

Hoe gebruik je jQuery op je eigen site?

In onderstaande introductie wordt uitgelegd hoe je een webpagina kan maken met jQuery waarin een paragraaf met tekst verdwijnt wanneer je er op klikt.

Stap 1

De eerste stap is om de jQuery bibliotheek te downloaden. Al deze functionaliteit is beschikbaar in één bestand. Je kan het downloaden op http://jquery.com/ Dit bestand plaats je bij in de directory waarin je werkt.

Stap 2

Maak een basis HTML pagina aan en leg een link naar het jQuery bestand.
De link met de jQuery bibliotheek wordt gelegd in onderstaande Tag.
<script src="jquery.js"></script>
Pagina met link naar jQuery bibliotheek.Pagina met link naar jQuery bibliotheek.

Stap 3

In deze stap wordt de jQuery code toegevoegd aan de pagina.
Deze code wordt in JavaScript geschreven en tussen de <script></script> tag geplaatst in de <header>.
Pagina met jQuery script.Pagina met jQuery script.

De pagina is klaar en werkt. Wanneer je de pagina in je browser opent zal je zien dat de paragraaf met tekst verdwijnt als je er op klikt. Maar hoe werkt dit nu concreet?
Onderstaande code is de jQuery code:
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
Deze code bestaat uit drie delen:
  1. $(document).ready(function(){ ... }); Deze code zorgt ervoor dat het script pas geactiveerd kan worden nadat de volledige pagina geladen is.
  2. $("p").click(function(){ ... }); Deze code zorgt ervoor dat op het DOM element "p" een event handler gemaakt wordt die detecteert wanneer er op geklikt wordt. De code binnen deze handler wordt pas uitgevoerd na de klik.
  3. $(this).hide(); Deze code wordt uitgevoerd wanneer er op de paragraaf geklikt wordt. $(this) is een referentie naar "het DOM element" dat het klik event ontvangen heeft. In dit geval de paragraaf. De functie die voor dit element wordt uitgevoerd is hide(). Waardoor de paragraaf dus verborgen wordt.

Conclusie

jQuery is een krachtige bibliotheek om dynamische webpagina's te maken. Op het eerste zicht lijkt alles zeer ingewikkeld; maar op zich is het net een zeer eenvoudig te leren framework! Er is geen enkele bibliotheek die op korte termijn zoveel gebruikt wordt. Zeker een aanrader om te leren! Er zijn tegenwoordig zelfs vacatures voor ontwikkelaars waar jQuery expliciet als vereiste gesteld wordt.
© 2011 - 2017 Slls1984, het auteursrecht van dit artikel ligt bij de infoteur. Zonder toestemming van de infoteur is vermenigvuldiging verboden.
Gerelateerde artikelen
JQuery oneindige carouselEen carousel maken van afbeeldingen is niet zo moeilijk, maar om ervoor te zorgen dat deze oneindig door blijft gaan is…
Single page CMSOoit al een keer een website willen maken voor iemand anders, waar eigenlijk alleen opmaak in zit? Het is één pagina met…
Blender 3D, Waar te beginnen?Blender 3D, Waar te beginnen?Blender 3D is een fascinerend programma om 3D tekeningen en animaties te maken. Maar hoe te beginnen met Blender 3D? Er…
Gratis HTML script of toch betalenGratis HTML script of toch betalenAls je een website wil maken kun je HTML script kopen, zelf maken of gratis downloaden. Lees hier alles over de voor en…
Gratis website bouwenGratis website bouwenIedereen kan websites bouwen met Kompozer, een zogenaamde webbuilder. Het is een Nederlandstalig open-sourceprogramma da…
Bronnen en referenties
  • http://jquery.com/

Reageer op het artikel "JQuery voor beginners - Wat is het en hoe werkt het?"

Plaats een reactie, vraag of opmerking bij dit artikel. Reacties moeten voldoen aan de huisregels van InfoNu.
Meld mij aan voor de tweewekelijkse InfoNu nieuwsbrief
Reactie

Bart, 24-11-2016 20:37 #1
Bedankt! Heel nuttige tips. Jquery is nog steeds een hot-topic dat door vele bedrijven gevraagd wordt.

Jquery for the win!

Infoteur: Slls1984
Gepubliceerd: 03-11-2011
Rubriek: Pc en Internet
Subrubriek: Programmeren
Bronnen en referenties: 1
Reacties: 1
Schrijf mee!