jQuery verkrijgen van inhoud en eigenschappen

jQuery heeft krachtige methoden om HTML-elementen en eigenschappen te manipuleren.

jQuery DOM-operaties

Een van de belangrijkste onderdelen van jQuery is de mogelijkheid om het DOM te manipuleren.

jQuery biedt een reeks methoden die gerelateerd zijn aan het DOM, waardoor het gemakkelijk wordt om elementen en eigenschappen te bereiken en te manipuleren.

Tip:DOM = Document Object Model (Document Object Model)

DOM definieert de standaarden voor het bereiken van HTML- en XML-documenten:

De W3C Document Object Model is een platformonafhankelijke en taalonafhankelijke interface die programma's en scripts toestaat om dynamisch de inhoud, structuur en stijl van documenten te verkrijgen en te updaten.

Inhoud verkrijgen - text(), html() en val()

Drie eenvoudige en nuttige jQuery-methoden voor DOM-operaties:

  • text() - Stel in of retourneer de tekstinhoud van de geselecteerde elementen
  • html() - Stel in of retourneer de inhoud van de geselecteerde elementen (inclusief HTML-markeringen)
  • val() - Stel in of retourneer de waarde van een formulierveld

Hieronder wordt gedemonstreerd hoe u de inhoud kunt verkrijgen met de jQuery text() en html() methoden:

Voorbeeld

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

Probeer het zelf

Hieronder wordt gedemonstreerd hoe u de waarde van een invoerveld kunt verkrijgen met de jQuery val() methode:

Voorbeeld

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

Probeer het zelf

Eigenschap verkrijgen - attr()

De jQuery attr() methode wordt gebruikt om eigenschapswaarden te verkrijgen.

Hieronder wordt gedemonstreerd hoe u de waarde van het href-eigenschap van een link kunt verkrijgen:

Voorbeeld

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

Probeer het zelf

Het volgende hoofdstuk zal uitleggen hoe u inhoud en eigenschappenwaarden kunt instellen (veranderen).

jQuery HTML referentiemanual

Voor een volledige lijst van jQuery HTML methoden, raadpleeg het volgende referentiemanual: