Lezione #id-jq-2013-0018#
JQuery ci permette di settare i dati del nostro documento HTML, in particolare testo – Metodo text() -, tag HTML – Metodo html() -, valori dei Form. – Metodo val() – .
Metodo: text() -> setta il contenuto in formato testo dell’elemento selezionato
Vediamo il seguente codice:
$("#btn1").click(function(){
$("#test1").text("Testo sostituito");
});
Che analizzato:
$(“#btn1”).click(function(){ -> al click sull’elemento con ID=btn1
$(“#test1”).text(“Testo sostituito”); -> sostituisco il valore testuale dell’elemento con ID=test1
Metodo: html() -> setta il contenuto in formato HTML dell’elemento selezionato
Vediamo il seguente codice:
$("#btn2").click(function(){
$("#test2").html("<b>Testo sostituito</b>");
});
Metodo: val() -> setta il contenuto di un campo di input selezionato
Vediamo il seguente codice:
$("#btn3").click(function(){
$("#test3").val("Valore sostituito");
});
Metodo: attr() -> setta il contenuto di un attributo specifico
Vediamo il seguente codice:
$("#btn4").click(function(){
$("#test4").attr("href","http://blog.lucedigitale.com");
});
Mettiamo insieme il tutto in un unico listato:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Testo sostituito");
});
$("#btn2").click(function(){
$("#test2").html("<b>Testo sostituito</b>");
});
$("#btn3").click(function(){
$("#test3").val("Valore sostituito");
});
});
</script>
</head>
<body>
<p id="test1">Questo è un paragrafo</p>
<p id="test2">Questo è un paragrafo</p>
<p>Campo di Input: <input type="text" id="test3" value="Valore iniziale"></p>
<button id="btn1">Sostituisci il testo con text()</button>
<button id="btn2">Sostituisci HTML con html()</button>
<button id="btn3">Sostituisci il valore con val()</button>
</body>
</html>
