JQuery - DOM och element: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| Rad 1: | Rad 1: | ||
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]]. | 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]]. | ||
Vi ska börja med att titta på hur man kan 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 <code>$(''selektor'')</code> 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 enkelt komma åt just de sektioner av [[DOM]] som du är ute efter. | == 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 <code>$(''selektor'')</code> 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 enkelt komma åt just de sektioner av [[DOM]] som du är ute efter. | |||
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: | ||
* 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. | ||
* Om du sätter en | * 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. | ||
* Om du sätter ett | * 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. | ||
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]]"). Det finns en uppsjö av selektorer, men alla är inte användbara och vi täcker därför inte alla som finns. | 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]]"). Det finns en uppsjö av selektorer, men alla är inte användbara och vi täcker därför inte alla som finns. | ||
Versionen från 29 december 2015 kl. 13.31
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 enkelt komma åt just de sektioner av DOM som du är ute efter.
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:
- 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 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. - 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.
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"). Det finns en uppsjö av selektorer, men alla är inte användbara och vi täcker därför inte alla som finns.