Wat is jQuery en waarom is het nuttig voor webontwikkeling?

Wat is jQuery en waarom is het nuttig voor webontwikkeling?

jQuery is een populaire open-source JavaScript-bibliotheek die helpt bij het makkelijker schrijven van JavaScript code. De volgende taken kunnen met jQuery sneller geschreven kunnen worden dan met alleen JavaScript:

• DOM-manipulatie
• Event handling
• Animaties
• AJAX-verzoeken

DOM-manipulatie

Met behulp van jQuery kunnen ontwikkelaars makkelijker HTML-elementen targetten om bijvoorbeeld te wijzigen, verwijderen of toe te voegen. Hieronder bevindt zich een voorbeeld voor het verbergen van een HTML-element op basis van het id. Je ziet dat het schrijven volgens deze methode de code stukken korter maakt.

In JavaScript:

  document.getElementById("element-id").style.display = "none";

In jQuery:

  $("#element-id").hide();

Event-handling

jQuery zorgt er ook voor dat events makkelijker toegevoegd kunnen worden. Daarnaast zijn jQuery event-handlers ook beter compatible in meerdere browsers dan de JavaScript events.

In JavaScript:

  // Zoek het HTML-element met een specifiek id ("myButton")
  const myButton = document.getElementById("myButton");

  // Voeg een klikgebeurtenis toe aan het gevonden element
  myButton.addEventListener("click", function() {
      alert("Klik gebeurde!");
  });

In jQuery:

$("#myButton").click(function() {
    alert("Klik gebeurde!");
});

Animaties

Met behulp van jQuery kunnen er makelijk animaties toegevoegd worden aan een website zonder hiervoor CSS of plain JavaScript te gebruiken. In onderstaande voorbeeld zie je hoe jQuery effects kan toevoegen op een HTML-element. De rest van de jQuery effecten kun je vinden op de jQuery effecten documentatie.

jQuery-animatie voorbeeld:

  $("#myElement").animate({ opacity: 0.5, left: "50px" }, 1000);

AJAX-verzoeken

Tot slot maakt jQuery het ook makkelijker om HTTP-requests te doen via de code. Zo kan er asynchroon data ingeladen worden zonder dat de pagina opnieuw geladen hoeft te worden.

// Voorbeeld van het maken van een AJAX-verzoek met jQuery
$.ajax({
    url: "server.php",
    method: "GET",
    success: function(data) {
        // Verwerk de ontvangen gegevens hier
    }
});

De toekomst van jQuery

Vandaag de dag maken developers meer gebruik van front-end frameworks zoals React, NextJS en Vue. Deze frameworks beschikken over hun eigen DOM-manipulatie methodes en jQuery is hier dus eigenlijk niet meer nodig. Je zou denken dat jQuery hierdoor nauwelijks meer gebruikt zal worden. Maar niets is minder waar, volgens de StackOverflow Enquete maakt 23% van de ontwikkelaars nog gebruik van jQuery. Dus ondanks dat jQuery niet meer de dominante speler is binnen JavaScript wordt het framework nog steeds veel gebruikt door developers.