Leanpub: Publish Early, Publish Often

1. 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'): 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.

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.

Een overzicht van de verschillende selectors vindt u hier:
http://api.jquery.com/category/selectors/basic-css-selectors/

1.1 Basis selectors.

Zie: http://api.jquery.com/category/selectors/basic-css-selectors/

1.1.1 Tags, classes en id’s.

Volgende voorbeelden gebruikt u waarschijnlijk dagelijks in CSS:

$('a')               // selecteer alle a-tags
$('a, tr')           // selecteer alle a-tags en alle tr-tags
$('#paragraaf1')     // selecteer de tag met id #paragraaf1 
$('.sublist')        // selecteer alle tags met class .sublist

1.1.2 Universele selector.

Het sterretje is, net zoals in CSS, de universele selector voor alle tags.

1.2 Hiërarchische selectors.

Zie: http://api.jquery.com/category/selectors/hierarchy-selectors/

Hiërarchische selectors kan u best vergelijken met een stamboom. Bekijk in onderstaande code hoe de tags in elkaar genest zijn.

<table class="layoutTabel">
    <thead>
        <tr>
            <th>Opleiding:</th>
            <th>Datum:</th>
            <th>Lokaal:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dreamweaver</td>
            <td>15 december</td>
            <td>PC1</td>
        </tr>
    </tbody>
</table>

De hiërarchische selectors zijn:

Parent en child: Parent en child zijn geneste tags op het eerste niveau.
De thead-tag en de tbody-tag staan rechtstreeks onder de table-tag en gedragen zich in een parent-child relatie.
table is een parent van thead of
thead is een child van table.
Siblings: Siblings (broers of zussen) zijn elementen die op gelijk niveau staan.
De drie td-tags binnen een tr-tag zijn siblings van elkaar.
Ancestor (voorouder): Een ancestor kan de parent zijn, maar ook de parent van de parent, of nog een verdere relatie.
th heeft als parent tr.
th heeft als ancestor tr, maar ook thead, table en body.
Descendant (nakomeling): Een descendant kan een child zijn, maar ook een child van een child of nog een verdere relatie.
table heeft als child thead en tbody.
table heeft als descendant thead, tbody, maar ook tr, th en td.

1.2.1 Descendant selector: $(‘ancestor descendant’).

$('table tr')    // alle tr-tags binnen een tabel
$('table td')    // alle td-tags binnen een tabel
$('table td a')  // enkel de links  in td-tags van een tabel
$('ul *')        // alle tags binnen een ul-tag

1.2.2 Child selector: $(‘parent > child’).

(*) Merk op dat in ons voorbeeld geen enkele td-tag rechtstreeks onder de table-tag staat. Er wordt dus niets geselecteerd!

1.2.3 Sibling selector (alle volgende) : $(‘prev ~ sibling’).

$('thead ~ tbody')   // alle tbody-tags die volgen op een thead-tag
$('li ~ li')         // alle li-tags die volgen op een li-tag
                     // de eerste li-tag van elke lijst wordt 
                     // niet geselecteerd!
$('h3 ~ p')          // alle p-tags die volgen op een h3-tag

1.2.4 Sibling selector (dadelijk aangrenzende): $(‘prev + next’).

$('thead + tbody')   // alle tbody-tags die DADELIJK volgen op een thead-tag.
$('li + li')         // alle li-tags die DADELIJK volgen op een li-tag
                     // de eerste li-tag van een lijst wordt niet geselecteer\
d!
$('h3 + p')          // alle p-tags die DADELIJK volgen op een h3-tag

In het laatste voorbeeld worden paragraaf2 en paragraaf3 niet geselecteerd. Tussen paragraaf 1 en paragraaf 2 staat immers nog een lijst.

1.3 Basisfilters.

Zie : http://api.jquery.com/category/selectors/basic-filter-selectors/

De selectors die we tot hiertoe hebben besproken, selecteren telkens een volledig element.
$('tr') selecteert bijvoorbeeld alle tr-tags in een tabel.

Stel dat we nu enkel de even of oneven rijen in een tabel wensen te selecteren, dan doen we dit aan de hand van filters. Een filter is als het ware een subselectie binnen een hoofdselectie. Alle filters worden met een dubbelpunt als prefix aangeduid. Voor de oneven rijen (rijen met index 1, 3, …) in een tabel wordt dit: $('tr:odd').

Bij sommige filters moet u eveneens een index meegeven. Het eerste element heeft de index 0. Om bijvoorbeeld de derde rij binnen een tabel te selecteren, geeft u als index de waarde 2 mee $('tr:eq(2)').

1.3.1 Subselecties binnen een reeks.

$('table tr:even')   // alle even tr-tags binnen een tabel
$('table tr:odd')    // alle oneven tr-tags binnen een tabel
$('img:first')       // de eerste afbeelding op de pagina
$('img:last')        // de laatste afbeelding op de pagina

$('img:eq(2)')       // de DERDE (niet tweede) afbeelding op de pagina
$('img:lt(2)')       // alle afbeeldingen voor de derde afbeelding
$('img:gt(2)')       // alle afbeeldingen na de derde afbeelding

1.3.2 Inverse subselecties binnen een reeks met :not().

1.3.3 Overige subselecties.

(De drie laatste selectors kan u niet op het oefenbestand testen.)

$('*:header')        // alle hx-tags (h1 t/m h6)
$(':header')         // alle hx-tags (h1 t/m h6)
$('*:focus')         // het element dat op dit moment geselecteerd is
$(':focus')          // het element dat op dit moment geselecteerd is
$('div:animated')    // alle div-tags die op dit moment bewegen

1.4 Inhoudsfilters.

Zie : http://api.jquery.com/category/selectors/content-filter-selector/

Deze filters testen op de inhoud (tekst of html) binnen een bepaald element.

1.4.1 Het element bevat een bepaalde tekst :contains().

$('td:contains("PC")')           // alle cellen die de tekenreeks PC bevatten
$('td:contains(PC)')
$('td:not(:contains("PC"))')     // alle cellen die de tekenreeks PC 
                                 // niet bevatten
$('td:not(:contains(PC))')

De tekst is hoofdlettergevoelig, maar de aanhalingstekens zijn niet verplicht.
contains("PC") is NIET hetzelfde als contains("pc").
contains("PC") is WEL hetzelfde als contains(PC).

1.4.2 Het element bevat een bepaald element :has().

1.4.3 Lege (:empty) of niet lege (:parent) elementen.

$('td:empty')                    // alle lege cellen binnen een tabel
$('td:not(:empty)')              // alle cellen die niet leeg zijn
$('td:parent')                   // alle cellen die minstens een child hebben

1.5 Attribuut selectors.

Vanuit CSS kan u elementen selecteren op basis van hun attribuut. Ook deze eigenschap werd door jQuery overgenomen. Bekijk de broncode van het oefenbestand. Neem bijvoorbeeld een afbeelding. Alle afbeeldingen hebben natuurlijk een src-attribuut en een alt-attribuut. Sommige afbeeldingen hebben ook het title-attribuut.

Zie : http://api.jquery.com/category/selectors/attribute-selectors/

1.5.1 Attribuut bestaat `[name]`.

$('img[src]')            // alle afbeeldingen met het src-attribuut
$('img[title]')          // alle afbeeldingen met het title-attribuut
$('a[target]')           // alle links met het target-attribuut
$('a:not([target])')     // alle links zonder target-attribuut

We kunnen een selectie nog verder verfijnen door de waarde of inhoud van het attribuut te controleren.

1.5.2 Attribuut is gelijk aan `[name="value"]`.

1.5.3 Attribuut is niet gelijk aan `[name!="value"]`.

1.5.4 Attribuut begint met `[name^="value"]`.

1.5.5 Attribuut eindigt op `[name$="value"]`.

1.5.6 Attribuut bevat `[name*="value"]`.

1.5.7 Attribuut bevat meerdere filters `[filter1][filter2]`.

1.6 Childfilters.

Een childfilter selecteert het n-de element binnen het parent element.
Zie : http://api.jquery.com/category/selectors/child-filter-selectors/

1.6.1 Eerste child element :first-child.

$('p strong:first-child')    // de eerste strong-tag in ELKE paragraaf
$('p strong:first')          // de eerste strong-tag in de EERSTE paragraaf 
                             // die een strong-tag heeft

1.6.2 Laatste child element :last-child.

$('p strong:last-child')    // de laatste strong-tag in ELKE paragraaf
$('p strong:last')          // de laatste strong-tag in de LAATSTE paragraaf 
                             // die een strong-tag heeft

1.6.3 Eerste sibling element binnen dezefde parent :first-of-type.

1.6.4 Laatste sibling element binnen dezefde parent :last-of-type.

1.6.5 Het n-de child elementen.

De index start hier vanaf 1 en niet vanaf 0!
De letter n staat voor een geheel getal (0, 1, 2, 3, …).

$('p strong:nth-child(2)')       // de tweede strong-tag
$('p strong:nth-child(3n)')      // strong-tags 3, 6, 9, ...
$('p strong:nth-child(even)')    // alle even strong-tags
$('p strong:nth-child(2n)')      // alle even strong-tags
$('p strong:nth-child(odd)')     // alle oneven strong-tags
$('p strong:nth-child(2n+1)')    // alle oneven strong-tags
$('p strong:nth-last-child(2)')  // de voorlaatste strong-tag
$('li:nth-of-type(even)')        // alle even li-tag binnen dezelfde parent
$('a:nth-last-of-type(2)')       // de voorlaatste a-tag binnen dezelfde pare\
nt

1.6.6 Het enige child element :only-child().

1.6.7 Het enige child element van dat type binnen dezefde parent :only-of-type().

1.7 Formulierfilters.

Zie : http://api.jquery.com/category/selectors/form-selectors/

Filtert formulierelementen van een bepaald type of met een bepaald attribuut.

1.7.1 De type-selector (button, submit, reset, checkbox, …).

$('input')                   // ALLE input-tags.
$('input[type="button"]')    // alle input-tags met type="button"
$('input[type="submit"]')    // alle input-tags met type="submit"
$('input[type="reset"]')     // alle input-tags met type="reset"

1.7.2 Overige attributen (:checked, :disabled, :enabled en :selected).

$(':checked')    // checkboxen en radiobuttons met een checked-attribuut 
                 // ':checked' werkt NIET op een keuzelijst!
$(':disabled')   // alle elementen met een disabled-attribuut
$(':enabled')    // alle elementen die niet disabled staan
$(':selected')   // het gekozen item uit een keuzelijst
                 // ':selected' werkt NIET op checkboxen en radiobuttons!

Met :checked en :selected selecteert u enkel het element, maar haalt u de gekozen waarde nog niet op. De methodes om deze waardes uit te lezen, komen later aan bod.

1.8 Zichtbaarheidsfilters.

Zie : http://api.jquery.com/category/selectors/visibility-filter-selectors/

1.9 Toepassing 1: gemeentelijst filteren (basisversie).

De pagina bevat een lijst van alle Vlaamse gemeenten.
Het zoekveld bovenaan de pagina filtert de lijst met gemeentenamen.

<body>
...
<input type="text" name="filter" id="filter" ... ">
...
<ul>
    <li><a ... >Aalst</a></li>
    <li><a ... >Aalter</a></li>
    <li><a ... >Aarschot</a></li>
    <li><a ... >Aartselaar</a></li>
</ul>
...
</body>

1 $(function() {
2     $('#filter').keyup(function(){ 
3         var filter = $(this).val();
4         $('li').hide();
5         $('li:contains(' + filter + ')').show();
6     });
7 });

Telkens u in het tekstveld een letter intypt, wordt het event keyup() geactiveerd. De waarde uit het tekstveld komt in de variabele filter terecht.
Indien u bijvoorbeeld ka invult, wordt getest of dit woord binnen een li-tag voorkomt. De selectoren op lijn 4 en 5 bepalen of de li-tag zichtbaar of onzichtbaar wordt.

Merk op dat op lijn 5 de variabele dynamisch in de selector wordt verwerkt. Voor het zoekwoord ka wordt dit: $('li:contains(ka)').show();

1.10 Toepassing 2: openingsuren markeren.

De pagina bevat twee tabellen waarop we de openingsuren van vandaag markeren. Elke weekdag komt overeen met één rij binnen de tbody-tag. Merk op dat we de tabel ook starten met zondag. Dit is een bewuste keuze omdat we het rijnummer dan makkelijk kunnen koppelen aan de weekdag van het Date-object.

<table class="layoutTabel">
    <thead>...</thead>
    <tbody>
        <tr>
            <td><strong>Zondag</strong></td>
            <td>Gesloten</td>
            <td>Gesloten</td>
            <td>Gesloten</td>
        </tr>
        ...
    </tbody>
</table>

1 $(function() {
2     var vandaag = new Date();
3     var dag = vandaag.getDay();
4     $('tbody tr:nth-child(' + (dag + 1) + ')').addClass('nu');
5 });

Op lijn 3 halen we de weekdag op. (zondag = 0, maandag = 1, …). Vervolgens gaan we op lijn 4 dit getal met één verhogen om zo de juiste rij binnen tbody te markeren met de class .nu.

Up next

2. Inleiding tot AJAX.