JQuery - DOM och element: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
| (20 mellanliggande sidversioner av samma användare visas inte) | |||
| Rad 1: | Rad 1: | ||
En av huvuduppgifterna för [[jQuery]] är att tillhandahålla metoder med vilka vi enkelt kan manipulera | En av huvuduppgifterna för [[jQuery]] är att tillhandahålla metoder med vilka vi enkelt kan manipulera element. Därför finns många funktioner för att söka ut element ifrån [[DOM ]], för att förflytta sig mellan element i [[DOM]]-trädet och liknande. Det finns även många metoder för att läsa, skriva och förändra innehållet i element. | ||
== Att söka 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 | Vi ska börja med att titta på hur man kan söka fram och välja ut specifika element ifrån [[DOM]] med hjälp av 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 <code>$(''selektor'')</code> kan man enkelt välja ut ett eller flera element ifrån [[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 == | == Grundläggande sökningar i DOM == | ||
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: | 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. | 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. | ||
<codepen pen="GoNWro" tab="js" height=" | <codepen pen="GoNWro" tab="js,result" height="250"> | ||
</codepen> | </codepen> | ||
Om du sätter en <code>.</code> före en sträng i din selektor, kommer [[jQuery]] att leta efter de HTML-element som har den klass du angett. | === Söka på klassnamn === | ||
<codepen pen="vLyxxE" tab="js" height=" | Om du sätter en "<code>.</code>" före en sträng i din selektor, kommer [[jQuery]] att leta efter de HTML-element som har den klass du angett. | ||
<codepen pen="vLyxxE" tab="js,result" height="250"> | |||
</codepen> | </codepen> | ||
Om du sätter ett <code>#</code> före en sträng i din selektor, kommer [[jQuery]] att lefta efter det HTML-element som har den ID som du angivit. | === Söka på ID-namn === | ||
<codepen pen="gPLmmr" tab="js" height=" | Om du sätter ett "<code>#</code>" före en sträng i din selektor, kommer [[jQuery]] att lefta efter det HTML-element som har den ID som du angivit. | ||
<codepen pen="gPLmmr" tab="js,result" height="250"> | |||
</codepen> | </codepen> | ||
| Rad 25: | Rad 25: | ||
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]]"). | 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. | 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 <code>,</code> för att separera de olika selektorerna. | ||
<codepen pen="MKbpmG" tab="js" height=" | <codepen pen="MKbpmG" tab="js,result" height="250"> | ||
</codepen> | </codepen> | ||
Om vi vill komma åt det första elementet av typen <code>p</code> kan vi göra så här: | Om vi vill komma åt det första elementet av typen "<code>p</code>" kan vi göra så här: | ||
<codepen pen="bEBqrW" tab="js" height=" | <codepen pen="bEBqrW" tab="js,result" height="250"> | ||
</codepen> | </codepen> | ||
Som du ser fungerar även mer "avancerade" selektorer utmärkt med [[jQuery]]. | Som du ser fungerar även mer "avancerade" selektorer alldeles utmärkt med [[jQuery]]. | ||
== Nästa aktivitet == | == Nästa aktivitet == | ||
[[ | [[jQuery - innehåll i element]] | ||
[[Category: jQuery|J4]] | |||
[[Category: JavaScript|J4]] | |||
Nuvarande version från 10 februari 2019 kl. 11.30
En av huvuduppgifterna för jQuery är att tillhandahålla metoder med vilka vi enkelt kan manipulera element. Därför finns många funktioner för att söka ut element ifrån DOM , för att förflytta sig mellan element i DOM-trädet och liknande. Det finns även många metoder för att läsa, skriva och förändra innehållet i element.
Att söka i DOM
Vi ska börja med att titta på hur man kan söka fram och välja ut specifika element ifrån DOM med hjälp av 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 ifrån 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
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.
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.
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.
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.
Om vi vill komma åt det första elementet av typen "p" kan vi göra så här:
Som du ser fungerar även mer "avancerade" selektorer alldeles utmärkt med jQuery.