4 Elementen selecteren

Een jQuery statement bestaat steeds uit twee of meer delen. Het eerste deel is altijd een selector. De volgende delen beschrijven de acties die u op de selector uitvoert.

Een voorbeeld:

$('p.foo').addClass('bar').show('slow');

• $('p.foo'): selecteer alle p-tags met het class-attribuut .foo.

• .addClass('bar'): voeg aan deze selectie de class .bar toe.

• .show('slow'); en maak de selectie zichtbaar.

Een goede selectie maken is bijgevolg cruciaal om een krachtig script uit te voeren.

JavaScript kent een zeer beperkte set aan selectors.

U kan bijvoorbeeld een bepaald id (document.getElementById(id)) of een bepaalde tag opvragen (document.getElementByTagName(tag)), maar wat als u de derde rij in een tabel wilt ophalen of alle links met een externe URL? Dit is onmogelijk met één commando.

Dit hoofdstuk beschrijft de belangrijkste selectiemethodes binnen jQuery. De syntax is eenvoudig. Deze volgt immers de selectiemethodes van CSS3, aangevuld met enkele jQuery-specifieke selectiemethodes.

De voorbeelden die volgen, kan u uittesten op het oefenbestand selectorTest.html.

★ Open selectors/selectorTest.html. ★ De voorbeelden die volgen, kan u uittesten op dit oefenbestand.

Geef in het tekstveld een selectie in (bv: p#paragraaf1). Het script op de pagina gaat op zoek naar de selectie en voegt aan de selectie de class .highLight toe. Deze class tekent een groen kader rond de selector, maakt de achtergrond geel en kleurt de tekst rood.