jQuery få innehåll och egenskaper

jQuery har kraftfulla metoder för att manipulera HTML-element och egenskaper.

jQuery DOM-operationer

Ett mycket viktigt del av jQuery är förmågan att manipulera DOM.

jQuery erbjuder en rad metoder relaterade till DOM, vilket gör det enkelt att komma åt och manipulera element och egenskaper.

Tips:DOM = Document Object Model (Dokumentobjektmodell)

DOM definierar standarder för att komma åt HTML- och XML-dokument:

”W3C Document Object Model är oberoende av plattform och språk, och möjliggör att program och skript dynamiskt får åtkomst till och uppdaterar dokumentets innehåll, struktur och stil.”

Få innehåll - text(), html() och val()

Tre enkla och praktiska jQuery-metoder för DOM-operationer:

  • text() - Ställ in eller returnera textinnehållet för den valda elementet
  • html() - Ställ in eller returnera innehållet för den valda elementet (inklusive HTML-märken)
  • val() - Ställ in eller returnera värdet för ett formulärfält

Följande exempel visar hur man får innehållet genom att använda jQuery text() och html() metoder:

Exempel

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

Prova själv

Följande exempel visar hur man får värdet för en inmatningsfält med jQuery val() metoden:

Exempel

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

Prova själv

Hämta egenskap - attr()

jQuery attr() metoden används för att få tag på egenskapsvärden.

Följande exempel visar hur man får värdet för href-egenskapen i en länk:

Exempel

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

Prova själv

Nästa kapitel kommer att förklara hur man ställer in (ändrar) innehåll och egenskapsvärden.

jQuery HTML-referenshandbok

För en fullständig lista över jQuery HTML-metoder, besök följande referenshandbok: