jQuery - Ottieni contenuto e attributi


jQuery contiene potenti metodi per modificare e manipolare elementi e attributi HTML.


jQuery DOM manipolazione

Una parte molto importante di jQuery è la possibilità di manipolare il DOM.

jQuery viene fornito con una serie di metodi relativi al DOM che semplificano l'accesso e la manipolazione di elementi e attributi.

DOM = Document Object Model

Il DOM definisce uno standard per l'accesso ai documenti HTML e XML:

"Il W3C Document Object Model (DOM) è una piattaforma e un'interfaccia indipendente dal linguaggio che consente a programmi e script di accedere e aggiornare dinamicamente il contenuto, la struttura e stile di un documento."


Ottieni contenuto - text(), html() e val()

Tre metodi jQuery semplici ma utili per la manipolazione del DOM sono:

  • text()- Imposta o restituisce il contenuto del testo degli elementi selezionati
  • html()- Imposta o restituisce il contenuto degli elementi selezionati (incluso il markup HTML)
  • val()- Imposta o restituisce il valore dei campi del modulo

L'esempio seguente mostra come ottenere contenuto con jQuery text()e html()metodi:

Esempio

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

L'esempio seguente mostra come ottenere il valore di un campo di input con il val()metodo jQuery:

Esempio

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


Ottieni attributi - attr()

Il metodo jQuery attr()viene utilizzato per ottenere i valori degli attributi.

L'esempio seguente mostra come ottenere il valore dell'attributo href in un collegamento:

Esempio

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

Il capitolo successivo spiega come impostare (modificare) il contenuto ei valori degli attributi.


Esercizi jQuery

Mettiti alla prova con gli esercizi

Esercizio:

Usa un metodo jQuery per restituire il contenuto testuale di un elemento <div>.

$("div").();


Riferimento HTML jQuery

Per una panoramica completa di tutti i metodi HTML jQuery, vai al nostro Riferimento HTML/CSS jQuery .