close

Basissyntaxis van jQuery- Selecteren, manipuleren en effecten

De basissyntaxis van jQuery omvat het gebruik van een selector(selector in CSS-stijl) en methoden om de geselecteerde elementen te manipuleren. Hier zijn enkele eenvoudige syntaxisvoorbeelden van jQuery:

 

Elementen selecteren

  • Elementen selecteren op HTML-tagnaam: $("tagname") Voorbeeld: $("p") selecteert alle <p> elementen op de pagina.

  • Elementen selecteren op CSS-klasse: $(".classname") Voorbeeld: $(".myClass") selecteert alle elementen met de klasse "myClass".

  • Elementen selecteren op ID: $("#idname") Voorbeeld: $("#myElement") selecteert het element met de ID "myElement".

  • Elementen selecteren op attribuut: $("[attribute='value']") Voorbeeld: $("[data-type='button']") selecteert elementen met het attribuut data-type ingesteld op "knop".

  • Selecties combineren: $("tagname.classname"), $("#idname .classname"), ...

 

Geselecteerde elementen manipuleren

  • De inhoud van een element wijzigen: .html(), .text() Voorbeeld: $("#myElement").html("New content") stelt de HTML-inhoud in van het element met ID "myElement".

  • Elementattributen wijzigen: .attr(), .prop() Voorbeeld: $("img").attr("src", "newimage.jpg") wijzigt het src attribuut van alle <img> elementen.

  • CSS-klassen van een element manipuleren: .addClass(), .removeClass(), .toggleClass() Voorbeeld: $("#myElement").addClass("highlight") voegt de klasse "highlight" toe aan het element met ID "myElement".

  • Elementen verbergen/tonen: .hide(), .show(), .toggle() Voorbeeld: $(".myClass").hide() verbergt alle elementen met de klasse "myClass".

  • Gebeurtenissen afhandelen op elementen: .click(), .hover(), .submit(), ... Voorbeeld: $("button").click(function() { ... }) registreert een klikgebeurtenishandler

 

Werken met verzamelingen van elementen

  • Itereren door een verzameling: .each() Voorbeeld: $("li").each(function() { ... }) herhaalt elk <li> element op de pagina.

  • Een verzameling filteren: .filter(), .not() Voorbeeld: $("div").filter(".myClass") filtert de <div> elementen en selecteert die met de klasse "myClass".

  • Elementen invoegen in een collectie: .append(), .prepend(), .after(), .before() Voorbeeld: $("#myElement").append("<p>New paragraph</p>") voegt een nieuw <p> element toe aan het element met ID "myElement".

 

Effecten en animaties

  • FadeIn/fadeOut-effecten uitvoeren: .fadeIn(), .fadeOut() Voorbeeld: $("#myElement").fadeIn(1000) fade-in van het element met ID "myElement" over een duur van 1 seconde.

  • SlideUp/slideDown-effecten uitvoeren: .slideUp(), .slideDown() Voorbeeld: $(".myClass").slideUp(500) schuift alle elementen met de klasse "myClass" omhoog over een duur van 0,5 seconde.

  • Aangepaste animaties uitvoeren: .animate() Voorbeeld: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animeert het element met ID "myElement" door de linkerpositie en dekking te wijzigen.

 

Deze voorbeelden laten zien hoe verschillende aspecten van de basissyntaxis van jQuery kunnen worden gebruikt om elementen te selecteren, hun eigenschappen te manipuleren en effecten of animaties toe te passen. jQuery biedt een uitgebreide set methoden en functionaliteiten om webontwikkelingstaken te vereenvoudigen en te verbeteren.