Cursus jQuery (jQuery tutorial)

jQuery is geen programmeer taal opzich, maar is een uitbreiding of bibliotheek voor Javascript. jQuery heeft als motto "Wirte less, do more", wat inhoudt dat je met minder code veel meer mogelijkheden hebt. jQuery is dan ook, net als fietsen, makkelijk om te leren, maar moeilijk om er écht goed in te worden. Om jQuery te leren is ervaring met Javascript niet vereist, maar het maakt het wel makkelijker sommige dingen te begrijpen.

Geschiedenis

jQuery bestaat sinds 2006, en bedacht en ontworpen door "John Resig". jQuery wordt in meer dan 30% van de 10.000 meest bezochte websites gebruikt voor diverse toepassingen. het jQuery framework is ontworpen om het programmeren van Javascript te vereenvoudigen. Het grote probleem bij Javascript is namelijk dat er behoorlijk wat browser afhankelijke variabelen zijn, waardoor het soms lastig kan zijn om Javascript te schrijven die in alle browsers goed werkt. jQuery rekent hiermee af, door een groot gedeelte van de opties die zij biedt browser onafhankelijk te maken.

jQuery gebruiken

Om jQuery ook daadwerklijk te kunnen gebruiken, moet deze eerst eventueel eerst gedownload worden en in de webpagina waar het gebruikt gaat worden opgenomen worden. Het is niet verplicht om jQuery op de eigen server te hosten, omdat er verschillende alternatieven hiervoor zijn. Zo host Google zelf ook jQuery die je in je eigen website kunt gebruiken. Dit heeft als voordeel voor de eind gebruiker dat wanneer iedereen deze code included, zijn bandbreedte verbruik ietsjes omlaag gaat. Overigens is jQuery 'slechts' 24KB in de verkleinde versie, waardoor deze zelfs bij website's voor de mobiele telefoon gebruikt kan worden.

jQuery kan gedownload worden van, hoe verrassend, jQuery.com. Er zijn 2 verschillende versies berschikbaar: De minified versie en de development versie. De minified versie is slechts 24KB, terwijl de development versie 155KB is. Het grote verschil tussen deze 2 versies is dat in de minified versie alle enters en het overbodige commentaar verwijderd zijn, maar daardoor ook vrij onmogelijk is om te lezen. In deze cursus wordt er enkel gebruik gemaakt van de minified versie, alhoewel de voorbeelden waarschijnlijk ook prima werken met de development versie. Om jQuery te gebruiken, dient deze er als volgt ingeladen te worden:

  1. <script type="text/javascript" scr="js/jquery.js"></script>

Wanneer je de Google code wilt gebruiken include je jQuery op deze manier:

  1. <srcipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Elementen selecteren

De basis van jQuery begint met het selecteren van de elementen waarmee je wilt gaan werken. Zodra je een element hebt geselecteerd kun je hier de krachten van jQuery op loslaten. Het selecteren van jQuery is zeer eenvoudig. Je kunt hierbij CSS selectors gebruiken, maar ook CSS3 selectors kunnen worden gebruikt! Dit zijn enkele voorbeelden hoe je elementen kunt selecteren:

  1. // Selecteer all P elementen
  2. $("p")
  3.  
  4. // Selecteer alle P elementen met de class "test"
  5. $("p.test")
  6.  
  7. // Selecteer P elementen die in een DIV element staan
  8. $("div p")

Nu er één of meerdere elementen geselecteerd zijn kunnen we eindelijk echt aan de gang! Aan een geselecteerd element kunnen meerdere acties gekoppeld worden, maar ik zal er met eentje tegelijk beginnen. In dit voorbeeld geef ik een extra CSS class mee met elk oneven P element op de pagina:

  1. $("P:odd").addClass("oneven");

In dit voorbeeld wordt er gebruik gemaakt van een speciale jQuery selector: :odd. Deze selecteer alle oneven elemnten op de pagina. Niet geheel verassend is hier ook een andere versie van: :even. Deze selecteert alle even elementen. Er zijn verschillende speciale selectors:

  • :first - Alleen het eerste element
  • :last - alleen het eerste element selecteren
  • :eq(5) - Het 6e element selecteren (het tellen begint namelijk bij 0)
  • :visible - Alle zichtbare elementen
  • :hidden - Alle onzichtbare elementen
  • :checkbox - Alle checkbox elementen
  • :checked - Alle checkbox en radio elementen die zijn aangevinkt
  • :contains(text) - Alle elmenten die de tekst "text" bevat
  • :image - Alle plaatjes elementen, dus ook een button met het "SRC" attribuut
Dit is een slechts een kleine opsomming van wat er allemaal mogelijk is. Op de website van jQuery staan ze allemaal opgesomd.

Javascript events

Het vorige voorbeeld wat wij gebruikten gaat helaas niet (altijd) werken. jQuery maakt namelijk veel gebruik van zogenaamde "javascript events". Het komt er hierbij op neer dat er een bepaalde actie aan het element gekoppeld wordt. Voorwaarde hiervoor is wel dat het element al bestaat wanneer de javascript code wordt uitgevoerd. Een oplossing hiervoor zou zijn om alle code onderin de pagina te zetten, maar het is ook mogelijk om javascript te laten wachten totdat alle code is ingeladen. Dat kan op 2 manieren:

  1. // De lange manier:
  2. $(document).ready(function() {
  3.   // Hier komt alle code die uitgevoerd moet worden
  4. });
  5.  
  6. // De korte manier:
  7. $( function() {
  8.   // Hier komt alle code die uitgevoerd moet worden
  9. });

Voorbeelden

Dit was de basis. Van hieruit kun je verder uitbreiden met extra functies en mogelijkheden. Omdat je nu nog niet zo heel veel kunt, heb ik hier een paar voorbeelden gemaakt:

Toggle

  1. $( function() {
  2.   // Kijken of er op een P element geklikt is
  3.   $("P").click( function() {
  4.      // Een div element op de pagina wel of niet laten zien
  5.      $("div").toggle();
  6.   });
  7. });
Voorbeeld

Dit voorbeeld is ook mogelijk met slideToggle. Klik voor een voobeeld hier.

FadeIn

  1. $( function() {
  2.   // Kijken of er op een P element geklikt is
  3.   $("P").click( function() {
  4.      // Een div element op de pagina laten infaden
  5.      $("div").fadeIn();
  6.   });
  7. });
Voorbeeld

Meer jQuery Voorbeelden?

In dit artikel staan 7 werkende voorbeelden met de code erbij: jQuery Voorbeelden.