Introductie in JQuery PDF Afdrukken

Hieronder een introductie in Javascript. Het is min of meer een uittreksel vertaling van dit.
Maar om het in mijn kop te krijgen schrijf ik meestal een uittreksel ervan. Mocht je er wat aan hebben: Good 4 U.

Onderstaande voorbeelden zijn gemaakt met een HTML pagina die alleen een link bevat.
De code staat in de head en er is een link naar de jquery bibliotheek.

Met javascript kan je het onderstaande gebruiken om code te starten als de  browser aan het laden is.

01.   window.onload = function(){ alert("welcome"); }

Alleen kan het voorkomen dat de code al gestart word, omdat deze zich meestal in het begin van het document bevind,
maar nog niet alle elementen (vooral graphics) geladen zijn. Dan is het slimmer om het Jquery document ready event te gebruiken:

01.   $(document).ready(function(){
02.           alert ("Hallo allemaal");
03.   });


De rest van de code zet je dan binnen de bovenstaande functie zodat deze gestart word op het moment dat de pagina geladen is.

Door in  eventhandler de functie preventDefault(); toe te voegen kan je voorkomen dat de browser de actie doet, die het normaal doet.Dan zal het er zo uit gaan zien:

01.   $(document).ready(function(){
02.           $("a").click(function(event){
03.                  alert("Bedankt voor het bezoek !");
04.                         event.preventDefault();
05.            }
06.            );
07.            }
08.            );
09.   

Bovenstaande code voegt een functie toe aan een link. Als men er op klikt dan krijgt men een venster te zien met een dankwoord.

We kunnen ook CSS styles toevoegen en verwijderen met JQuery:

Eerst moeten we wat Styling hebben om toe te kunnen voegen:

01.   <style type="text/css">
02.       a.test { font-weight: bold; }
03.    </style>

 Dan kunnen we in een functie de volgende regel gebruiken om het eerst toe te voegen en dan te verwijderen:

Toevoegen:

01.   $("a").addClass("test");

 

Verwijderen:

01.   $("a").removeClass("test");

 

Door onderstaande te plaatsen binnen het readyevent zal de link langzaam verdwijnen als je er op klikt:

01.   $("a").click(function(event){
02.               event.preventDefault();
03.               $(this).hide("slow");
04.             });

 

Kettingreacties
Jquery is gemaakt om  effects e.d. aan elkaar te knopen. Omdat elke methode het Jquery object retourneert kan je deze opvangen en er nog iets mee doen. Dit heet het chainability patroon. Een object georienteerde programmeer techniek. Een voorbeeld:

Binnen het klik event van de link:

01.   $("a").addClass("test").show().html("foo");

addClass, show, en html zijn methoden die allemaal het JQuery object retourneren en er vervolgens wat mee doen.

 

Hier kan je verder mee gaan door elementen uit de Jquery selectie te halen, aan te passen en weer terug te zetten:

01.   $(document).ready(function(){
02.   
03.              $("a")
04.                  .filter(".clickme")
05.                    .click(function(){
06.                      alert("You are now leaving the site.");
07.                })
08.                  .end()
09.                          .filter(".hideme")
10.                        .click(function(){
11.                      $(this).hide();
12.                      return false;
13.                })
14.                  .end();
15.                });

 Hier heb je dan een aantal links voor nodig die de volgende namen hebben:
- "clickme"
- "hideme"

 Methoden die je kan gebruiken en ongedaan kan maken:

  • add()
  • children()
  • eq()
  • filter()
  • find()
  • gt()
  • lt()
  • next()
  • not()
  • parent()
  • parents()
  • siblings()
 Callbacks en functies.

 Een callback is een functie die meegegeven word aan een andere functie als een parameter en pas gestart word als zijn "ouder" (parent) functie klaar is. Het speciale aan een callback is, is dat functies verschijnen nadat de ouder klaar is, en de callback dus te zien is. 

Hier kan je  gauw de mist ingaan met de syntax, dus even opletten:

Een callback zonder argumenten:

01.   $.get('mijnhtmlpagina.html', myCallBack);

De tweede parameter is een functie naam die dus niet tussen aanhalingstekens staat en zonder () haakjes.
Functies in JS zijn 'eerste klas burgers' die dus als variabele rondgegooit kunnen worden en op een later moment gestart kunnen worden. 

 

Een callback met argumenten: 

FOUT!:

01.   $.get('myhtmlpage.html', myCallBack(param1, param2));

Het probleem met bovenstaande voorbeeld is dat het gestart word voordat het als parameter word doorgegeven.
In onderstaande voorbeeld een anonieme functie (gewoon een blok code) word aangemaakt en word geregestreerd als de callback functie. 
Deze anonieme functie doet maar één ding mycallback aanroepen met de parameters.

GOED!:

01.   $.get('myhtmlpage.html', function(){
02.                myCallBack(param1, param2);
03.   });

param1 en param2 worden zo geevalueerd als een callback als $.get klaar is met het ophalen van de pagina.