Manipolazione del DOM in jQuery

Il DOM (Document Object Model) è un insieme gerarchicamente ordinato di elementi parent e child. Con jQuery possiamo attraversare il dom attraverso i metodi:

• html : riconosce l'html oltre che alla stringa di testo
• text : cambia solo la stringa di testo
• val : cambia il valore all'interno
• attr : Attributo da trasformare

Sintassi sulla Manipolazione del DOM in jQuery

.html() // Imposta o restituisce il contenuto degli elementi selezionati.
.text() // Imposta o restituisce il contenuto testuale degli elementi selezionati.
.val() // Imposta o restituisce l'attributo del valore degli elementi selezionati.
.attr() // Imposta o restituisce attributi/valori degli elementi selezionati.

Esempio sulle Manipolazione del DOM in jQuery

Codice della Lezione : Manipolazione del DOM in jQuery

$(document).ready(function(){
    //html,text,val,attr
    // html : riconosce l'html oltre che alla stringa di testo
    $('#button1').click(function(){
        $('form > h2:first').html('
 Belo st\'accadue
');
    });
    // text : cambia solo la stringa di testo
    $('#button2').click(function(){
        $('fieldset > legend:eq(1)').text('this is the BIO');
    });
    // val : cambia il valore all'interno
    $('#button3').click(function(){
        $('#name').val('Serena');
        $('#email').val('Sammontana@live.it');
        $('#password').val('passavuord');
        $('#bio').val('Ordentlich getunchten in flusterton en grashalden. Jeder es indem ob euren. Litze buben so nahen es du wills mager se. Sieben pfeife ja da langst hellen. Angenommen bescheiden besonderes in am em verschwand aufzulosen da. Fu an es unwissend zu liebhaben argerlich schleiche ausdenken. Geh nah kraftlos gegenden launisch verwohnt nur schweren prachtig. Familie stimmts die gefreut sto steilen preisen gesicht.')
    });
    // attr : Attributo da trasformare
    $('#button4').click(function(){
        $('fieldset > a').attr('href','https://know.donatopirolo.dev/').text('Questo è un altro sito').css('background-color','yellow');
    });    
});