Efficiënt scripten met jQuery 3.x
  • Over deze cursus
  • 1 Inleiding
  • 2 Inleiding tot JavaScript
    • Events en Actions
    • Syntax regels
    • JavaScript debugger
    • Variabelen
    • Operatoren
    • Voorwaardelijke instructies
    • Lussen
    • Functies
    • Functies in jQuery
    • Scope (zichtbaarheid) van variabelen
    • Objecten
    • Ingebouwde JavaScriptobjecten
  • 3 jQuery basis
  • 4 Elementen selecteren
    • Basis selectors
    • Hiërarchische selectors
    • Basisfilters
    • Inhoudsfilters
    • Attribuut selectors
    • Childfilters
    • Formulierfilters
    • Zichtbaarheidsfilters
    • Toepassing 1: gemeentelijst filteren (basisversie)
    • Toepassing 2: openingsuren markeren
  • 5 Selectie verfijnen (traversing)
    • Hiërarchische selectors
    • Filter methodes
    • Element looping: each()
    • Selecties in cascade: end()
    • Snelheidstest
    • Toepassing 1: gemeentelijst filteren (uitgebreide versie)
    • Toepassing 2: rating
  • 6 Events
    • Documentevents
    • Gebruikersevents
    • Event bubbling
    • Event methodes en properties
    • Hover-event: methode met een dubbele functie
    • De methode on()
    • Event handlers verwijderen
    • Toepassing 1: reactietest
  • 7 Animaties en effecten
    • Basiseffecten
    • Aangepaste animaties
    • Animatie pauzeren: delay()
    • Animatie beëindigen: finish()
    • Animatie afbreken: stop()
    • Versnellingsparameter
    • Toepassing 1: vloeiend scrollen
    • Toepassing 2: tabbladen
  • 8 DOM manipulatie
    • HTML-attributen
    • Object dimensies
    • Elementen toevoegen
    • Elementen verwijderen
    • Elementen vervangen
    • Elementen klonen
    • Toepassing 1: lightbox
  • 9 Inleiding tot AJAX
    • Historiek
    • Wat is XML?
    • Wat is JSON?
    • Requests filteren met GET en POST
    • Zes soorten AJAX requests
    • Same origin policy
    • Cross-site scripting
  • 10 AJAX zonder server-side scripting
    • Load()
    • $.getScript()
    • $.getJSON()
    • $.get() en $.post()
    • $.ajax()
    • Externe gegevens ophalen via JSONP
  • 11 AJAX met server-side scripting
    • Master/detailrelatie met load()
    • Master/detailrelatie met $.get()
    • Contactformulier verzenden met $.post()
    • Cross-site scripting (XSS)
Powered by GitBook
On this page
  • Eerste child element :first-child
  • Laatste child element :last-child
  • Eerste sibling element binnen dezelfde parent :first-of-type
  • Laatste sibling element binnen dezelfde parent :last-of-type
  • n-de child elementen
  • Het enige child element :only-child()
  • Het enige child element van dat type binnen dezelfde parent :only-of-type()
  1. 4 Elementen selecteren

Childfilters

PreviousAttribuut selectorsNextFormulierfilters

Last updated 7 years ago

Een childfilter selecteert het n-de element binnen het parent element. Zie :

Eerste child element :first-child

$('p b:first-child')   // de eerste b-tag in ELKE paragraaf
$('h3:first-child')    // alle h3-tags die een eerste child zijn van een (willekeurige) parent

Laatste child element :last-child

$('p b:last-child')   // de laatste b-tag in ELKE paragraaf
$('p:last-child')     // alle paragrafen die een laatste child zijn van een (willekeurige) parent

Eerste sibling element binnen dezelfde parent :first-of-type

$('a:first-of-type')         // de eerste a-tag binnen dezelfde parent

Laatste sibling element binnen dezelfde parent :last-of-type

$('a:last-of-type')          //de laatste a-tag binnen dezelfde parent

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 b:nth-child(2)')           // de tweede b-tag in elke paragraaf
$('p b:nth-child(3n)')          // b-tags 3, 6, 9, ... in elke paragraaf
$('p b:nth-child(even)')        // alle even b-tags in elke paragraaf
$('p b:nth-child(2n)')          // alle even b-tags in elke paragraaf
$('p b:nth-child(odd)')         // alle oneven b-tags in elke paragraaf
$('p b:nth-child(2n+1)')        // alle oneven b-tags in elke paragraaf
$('p b:nth-last-child(2)')      // de voorlaatste b-tag in elke paragraaf
$('li:nth-of-type(even)')       // alle even li-tags binnen dezelfde parent
$('a:nth-last-of-type(2)')      // de voorlaatste a-tag binnen dezelfde parent

Het enige child element :only-child()

$('p b:only-child()')   // de b-tag, maar ENKEL indien dit HET ENIGE child element binnen de p-tag is

Het enige child element van dat type binnen dezelfde parent :only-of-type()

$('b:only-of-type()')   // de b-tag, maar ENKEL indien dit DE ENIGE b-tag is binnen dezelfde parent
http://api.jquery.com/category/selectors/child-filter-selectors/