jQuery få indhold og egenskaber

jQuery har kraftfulde metoder til at operere med HTML-elementer og egenskaber.

jQuery DOM-operation

En meget vigtig del af jQuery er evnen til at operere med DOM.

jQuery tilbyder en række metoder relateret til DOM, hvilket gør det nemt at få adgang til og operere med elementer og egenskaber.

Tip:DOM = Document Object Model (Dokumentobjektmodel)

DOM definierer standarder for adgang til HTML- og XML-dokumenter:

‘W3C Document Object Model er uafhængig af platform og sprog og muliggør dynamisk adgang til og opdatering af dokumentets indhold, struktur og stil.’

Få indhold - text(), html() og val()

Tre enkle og praktiske jQuery-metoder til DOM-operationer:

  • text() - Indstil eller returner teksten i det valgte element
  • html() - Indstil eller returner indholdet af det valgte element (inklusive HTML-mærker)
  • val() - Indstil eller returner værdien af et formularelement

Følgende eksempel viser, hvordan man får indhold ved hjælp af jQuery text() og html() metoder:

Eksempel

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

Prøv det selv

Følgende eksempel viser, hvordan man får værdien af et inputfelt ved hjælp af jQuery val() metoden:

Eksempel

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

Prøv det selv

Få egenskab - attr()

jQuery attr() metoden bruges til at få egenskabsværdier.

Følgende eksempel viser, hvordan man får værdien af href-egenskaben i et link:

Eksempel

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

Prøv det selv

Næste kapitel vil forklare, hvordan indhold og egenskabsværdier kan indstilles (ændres).

jQuery HTML referencehåndbog

For fuld information om jQuery HTML-metoder, besøg venligst følgende referencehåndbog: