jQuery wordt steeds populairder de laatste jaren en zeker de laatste maanden is een ware revolutie aan de gang en is jQuery zich aan het onderscheiden van de rest. Website van zeer grote bedrijven zoals Dell, Google en Wordpress gebruiken jQuery inmiddels al veelvuldig.

Wat ik ga doen in deze cursus is het aanleren van jQuery aan ontwikkelaars die nog nooit iets met jQuery gedaan hebben. In de eerste les zal ik onder andere het basisprincipe uit gaan leggen aan de hand van een aantal voorbeelden.

Wat is jQuery
jQuery is als het ware een zeer grote javascript functies Bibliotheek. Het includen van jQuery op je website is in feite dan ook niets anders als het includen van een groot aantal handige functies die je kunt gaan gebruiken.

Het principe van jQuery
Het principe van jQuery is dat je op een korte en gemakkelijke manier door je DOM (document object model) kan gaan om vervolgens op een simpele manier allerlei functies op verschillende elementen los te laten. Nou lijkt dit een vrij moeilijke zin om te begrijpen maar lees deze zin op het einde van les 1 maar is terug en dan zul je zien dat deze toch niet zo heel moeilijk is.
Ik ben echt een praktijkman en ondertussen is er naar mijn idee al te veel theorie behandeld dus we gaan gelijk beginnen met de praktijk.

jQuery op je website gebruiken
Om jQuery te gaan gebruiken moet je op de website www.jquery.com de “jQuery library” downloaden. Hierna maak je een html bestand waar je de jQuery library include, ook zetten we hier vast wat voorbeeld code in waar we met jQuery leuke dingen mee kunnen gaan doen. Dit doe je als volgt:

Een van de belangrijkste onderdelen van jQuery zijn de selectors. Selectors zijn (de naam zegt het al) selecteerders. Je kan met de selectors dus elementen in je html gaan selecteren. Een selector ziet er altijd als volgt uit:

Als je dus in de html die je net gemaakt heb alle ul elementen wil selecteren dan kun je dat als volgt doen:

Op deze manier kun je alle html elementen selecteren, echter kun je ook op css class of op id selecteren.

Wil je bijvoorbeeld alle elementen selecteren die de cssclass hoofdmenu hebben dan kun je dat als volgt doen:

Zoals je ziet staat er een punt voor de naam , de punt wil zeggen dat het een css class betreft en is hetzelfde principe als hoe het in css werkt.

Je raad het al met een id gaat het ook op precies dezelfde manier als in css. Een element op id selecteren doe je als volgt:

Dus een class selecteer je altijd met een punt en een id altijd met een #.

Dit zijn de simpelste manieren om elementen te selecteren in je html, maar dit gaat ook nog verder. EN het volgende is een belangrijk principe.

Je kunt namelijk vanuit ieder punt in de website ieder ander willekeurig punt selecteren met jQuery. Hiervoor heb je een aantal mogelijkheden, namelijk de volgende:

• 1. Parent
  Dit is de “ouder” van het element waar je op zit. Als je dus naar de net gemaakte html kijkt dan is de parent van de link “Menu item 1” de die erboven staat.
• 2. Children
  Dit zijn de “kinderen” van het element waar je op zit. Als je dus de
• boven “Menu item 1” pakt dan zijn de link “Menu item 1” en de ul die eronder staat de children.
• 3. Siblings
  Dit zijn de “broertjes en zusjes” van het element waar je op zit. Als je dus weer “Menu item 1” hebt dan is de ul die eronder staat de sibling.

Het is van groot belang dat je dit principe snapt, op het moment dat je dit namelijk niet snapt zul je namelijk de werking van jQuery zeer waarschijnlijk niet gaan snappen.

De selectors in de praktijk.

Ik zal je nu aan de hand van een aantal voorbeelden laten zien hoe je nu die parents, children, siblings, ancestors en descendants kunt gebruiken.
Stel ik selecteer de link met de class ”hoofdmenu”, dit doe ik als volgt:

Maar hoe moet ik het nou doen als ik de

wil selecteren die naast deze link staat, dit kan als volgt:
1. $(“.hoofdmenu”).siblings(“ul”)

Zoals je ziet gebruik ik hiervoor siblings omdat de

die ik wil selecteren een broertje van de link met de class “hoofdmenu” is.

We gaan nog een stapje verder:

Ik wil de

• ’s selecteren die in de
  zitten die ik hierboven geselecteerd heb, dit kan als volgt:
  1. $(“.hoofdmenu”).siblings(“ul”).children(“li”)

  Op deze manier kun je dus oneindig doorgaan mat het selecteren van elementen.

  Dit was Les 1, het kan zijn dat je het te weinig vind maar voor de beginners vind ik dat je dit toch eerst een aantal keer doorgenomen moet hebben om het basis principe van jQuery te begrijpen. Het is natuurlijk heel makkelijk om stukken code te kopieren maar je moet ook wel snappen waar je mee bezig bent.

  In de volgende lessen zal ik verder ingaan op alle mogelijkheden, maar voor nu begin ik met kleine stapjes. Mocht je over dit stuk vragen hebben dan kun je een reactie achterlaten en dan zal ik die zo snel mogelijk proberen te beantwoorden.

  Stem of voeg toe aan: