Drupal en jQuery. Les 2. Selectors, effecten.

In deze les behandelen we jQuery-selectors en jQuery-effecten.

Selectors

Onder de selectors zullen we meestal gebruikmaken van klassen en id’s. Selectors in jQuery lijken sterk op CSS-selectors. Dus als je al weet hoe je selectors in CSS schrijft, kun je ook selectors in jQuery schrijven. Zo selecteren we een klasse:

$('.class')

En zo selecteren we een id:

$('#id')

Effecten

In jQuery is er een groot aantal effecten beschikbaar: hide() / show() (verbergen of tonen, bijvoorbeeld vanuit de rechteronderhoek), slideUp() / slideDown() (de richting van het schuiven kan worden gekozen), fadeOut() / fadeIn() (geleidelijke verandering van de transparantie).

$('.class').hide(1000);

$('.class').fadeOut(1000);

$('.class').slideUp(1000);

In de les gebruikten we ook de functie setTimeout. Dit is een JavaScript-functie die de uitvoering van code uitstelt:

setTimeout(function(){

  // code hier

}, 1000);

Het eerste argument van setTimeout is een functie waarin we de code plaatsen die moet worden uitgevoerd. Het tweede argument geeft de tijd aan (in milliseconden) waarmee de uitvoering wordt uitgesteld.