close

DOM-manipulatie met jQuery- Technieken en voorbeelden

Met DOM-manipulatie met jQuery kunt u gegevens op een webpagina wijzigen, toevoegen, verwijderen of gebruiken door de DOM-structuur te targeten. jQuery biedt handige methoden en functies om DOM-manipulatietaken uit te voeren.

Hier vindt u uitleg voor elke sectie, samen met specifieke voorbeelden:

 

Elementen selecteren

  • $("p"): Selecteer alle <p> elementen op de pagina.
  • $(".myClass"): Selecteer alle elementen met de klasse myClass.
  • $("#myElement"): Selecteer het element met de ID myElement.
  • $("parentElement").find(".childElement"): Selecteer alle onderliggende elementen met de klasse childElement binnen de parentElement.

Voorbeeld:

$("p").css("color", "red");

 

Veranderende inhoud

  • $("#myElement").html("<b>Hello World</b>"): Stel de HTML- inhoud in voor het element met de ID myElement.
  • $("p").text("New text"): stel de tekstinhoud voor alle <p> elementen in.

Voorbeeld:

$("p").text("New paragraph");

 

Elementen toevoegen en verwijderen

  • $("ul").append("<li>New item</li>"): Voeg een <li> element toe aan het einde van de ongeordende lijst( <ul>).
  • $(".myClass").remove(): Verwijder alle elementen met de klasse myClass van de pagina.

Voorbeeld:

$("ul").append("<li>Item 4</li>");

 

Attributen en klassen wijzigen

  • $("img").attr("src", "new-image.jpg"): Wijzig de src attribuutwaarde voor alle <img> elementen.
  • $("#myElement").addClass("newClass"): Voeg de klasse toe newClass aan het element met de ID myElement.
  • $("#myElement").removeClass("oldClass"): Verwijder de klasse oldClass uit het element met de ID myElement.

Voorbeeld:

$("img").attr("alt", "New Image");

 

Afhandeling van evenementen

$("button").click(function() { }): Registreer een gebeurtenishandlerfunctie wanneer op een <button> element wordt geklikt.

Voorbeeld:

$("button").click(function() {  
  alert("Button clicked!");  
});

 

Effecten en animaties

  • $("#myElement").hide(): Verberg het element met de ID myElement.
  • $("#myElement").show(): Toon het element met de ID myElement.
  • $("#myElement").fadeOut(): Voer een uitfade-effect uit op het element met de ID myElement.
  • $("#myElement").fadeIn(): Voer een fade-in effect uit op het element met de ID myElement.

Voorbeeld:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});