JQuery - DOM och element

En av huvuduppgifterna för jQuery är att tillhandahålla metoder med vilka vi enkelt kan manipulera DOM. Därför finns många funktioner för att söka i DOM och för att förflytta sig i DOM-trädet. Det finns även många metoder för att läsa, skriva och förändra innehållet i DOM.

Att söka i DOM

Vi ska börja med att titta på hur man kan söka fram och välja ut specifika DOM-noder/element med jQuery. I ett tidigare exempel visade vi hur man kan kalla på jQuery som en metod och därmed göra en sökning i DOM. Genom att använda anrop i formen av $(selektor) kan man enkelt välja ut ett eller flera element i DOM. Genom att ange en selektor på samma vis som du anger en selektor i CSS kan du alltså enkelt komma åt just de sektioner av DOM som du är ute efter.

Grundläggande sökningar i DOM

I alla efterföljande jQuery-exempel, kommer vi att separera HTML, CSS och JavaScript i varsin Codepen-flik och minimera den kod som skulle behövts för att skapa en komplett sida. Detta främst för att kunna urskilja de olika kodsorterna och för att lättare kunna visa just det som är viktigt för exemplet ifråga.

Precis som i CSS, så finns det ett antal sätt på vilket man kan välja ut information ur DOM. Grunderna är som följer:

Söka på element-namn

Om du inte sätter något specialtecken först i din selektor, kommer jQuery att leta efter HTML-element av den typ som din selektorsträng anger.

See the Pen GoNWro by Patrik Grip-Jansson (@PGJ) on CodePen.

Söka på klassnamn

Om du sätter en "." före en sträng i din selektor, kommer jQuery att leta efter de HTML-element som har den klass du angett.

See the Pen vLyxxE by Patrik Grip-Jansson (@PGJ) on CodePen.

Söka på ID-namn

Om du sätter ett "#" före en sträng i din selektor, kommer jQuery att lefta efter det HTML-element som har den ID som du angivit.

See the Pen gPLmmr by Patrik Grip-Jansson (@PGJ) on CodePen.

Mer komplexa exempel

Självklart kan du, precis som i CSS, kombinera samman flera olika selektorer. Titta på sektionerna om CSS för mer information om olika typer av selektorer som går att använda (t.ex. kan du börja med "Introduktion till id och klasser").

Låt oss söka ut element som tillhör en av två olika klasser. Detta kan vi göra med en selektor som använder , för att separera de olika selektorerna.

See the Pen MKbpmG by Patrik Grip-Jansson (@PGJ) on CodePen.

Om vi vill komma åt det första elementet av typen p kan vi göra så här:

See the Pen bEBqrW by Patrik Grip-Jansson (@PGJ) on CodePen.

Som du ser fungerar även mer "avancerade" selektorer utmärkt med jQuery.

Nästa aktivitet

Att komma åt innehållet i en DOM-nod