Manipolazione DOM con jQuery: metodi per modificare contenuto, attributi e stile, Dispense di Programmazione Orientata agli Oggetti

Scarica Manipolazione DOM con jQuery: metodi per modificare contenuto, attributi e stile e più Dispense in PDF di Programmazione Orientata agli Oggetti solo su Docsity!

JQUERY

Manipolazione DOM

— jQuery rende disponibili dei metodi per settare/

recuperare il contenuto di un elemento HTML.

— Esistono 3 metodi principali

— text(): setta o restituisce il contenuto testuale degli

elementi selezionati

— html(): setta o restituisce il contenuto degli elementi

selezionati (incluso il markup HTML)

— val(): setta o restituisce il valore dei campi di un form

$(“#par1”).text(); → restituisce il contenuto dell'elemento con id par $(“#div2”).html(“

ciao

”) → setta un nuovo contenuto per l'elemento con id div

Manipolazione attributi

— Il metodo che restituisce/setta il valore di un

attributo è attr().

— Se si vuole ottenere il valore di un attributo si

utilizza la seguente sintassi:

— Per settare o modificare il valore di un

attributo si usa la seguente sintassi:

— Per un singolo attributo

$(“selettore”).attr(“nome_attributo”,”valore_attributo”); $(“#url”).attr(“href”,”http://www.di.unito.it”); $(“selettore”).attr(“nome_attributo”); Es. $(“#url”).attr(“href”);

Manipolazione attributi

— Per più attributi

$(“selettore”).attr({ “nome_attributo”:”valore_attributo”, “nome_attributo”:”valore_attributo”, …. }); Es. $(“#url”).attr({ “href”:”http://www.di.unito.it”, “title”:”sito università” });

Aggiungere elementi

— I metodi appena visti possono avere un numero

infinito di elementi come parametri. I nuovi

elementi possono essere generati come testo,

HTML, jQuery e JS.

function appendText() { var txt1="

Text.

"; // HTML var txt2=$("

").text("Text."); // jQuery var txt3=document.createElement("p"); // DOM txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); } function appendText() { var txt1="

Text.

"; // HTML var txt2=$("

").text("Text."); // jQuery var txt3=document.createElement("p"); // DOM txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); }

Rimuovere elementi

— Due metodi per rimuovere degli elementi con

jQuery:

— remove(): rimuove l'elemento selezionato e i suoi figli

— empty(): rimuove i figli dell'elemento selezionato (non

l'elemento stesso)

— E' possibile filtrare gli elementi da rimuovere

Es. $(“#div1”).remove(); $(“#div1”).empty(); Es. $(“#div1”).remove(“.italic”) (rimuovi tutti i paragrafi che hanno come classe italic)

Manipolare classi CSS

— E' possibile aggiungere più classi ad un elemento:

— Metodo css()

— Per ottenere il valore di una proprietà css

— Per assegnare un nuovo valore ad una proprietà css

$(“selettore”).addClass(“nome_classe nome_classe”); $(“selettore”).css(“nome_proprietà”); Es. (“p”).css(“background-color”) → restituisce il colore di bg del primo elemento di tipo p $(“selettore”).css(“nome_proprietà”, “valore”); Es. $("p").css("background-color","yellow");

Manipolare classi CSS

— E' possibile settare più proprietà in uno stesso

statement

$(“selettore”).css({“nome_proprietà”:“valore”, “nome_proprietà”:“valore”}); Es. $("p").css({"background-color":"yellow", “color”:”blue”});

Esercizio

— Inserire in una pagina HTML un paragrafo con

scritto “Esempio di toggle class”.

— Aggiungere un pulsante

— Al clic sul pulsante attivare una funzione di tipo

toggle che aggiunga/elimini una classe “evidenzia” ai

paragrafi che contengono la parola

“toggle” (utilizzare il filtro contains per il selettore)

— La classe evidenzia deve settare le seguenti

caratteristiche:

— Colore di sfondo giallo

— Grandezza carattere: 32px

— bold

Agire sulle dimensioni

— Metodi:

— width()

— heigth()

— innerWidth()

— innerHeight()

— outerWidth()

— outerHeight()

Agire sulle dimensioni

— outerWidth() restituisce la larghezza di un elemento

(padding, border e margin inclusi)

— outerHeight() restituisce l'altezza di un elemento (padding,

border e margin inclusi)

$(“selettore”).outerWidth(); $(“selettore”).outerHeight();

— innerWidth() restituisce la larghezza di un elemento

(padding incluso)

— innerHeight() restituisce l'altezza di un elemento (padding

incluso)

$(“selettore”).innerWidth(); $(“selettore”).innerHeight();

Agire sulle dimensioni

— outerWidth() restituisce la larghezza di un elemento

(padding, border e margin inclusi)

— outerHeight() restituisce l'altezza di un elemento (padding,

border e margin inclusi)

$(“selettore”).outerWidth(); $(“selettore”).outerHeight();

— innerWidth() restituisce la larghezza di un elemento

(padding incluso)

— innerHeight() restituisce l'altezza di un elemento (padding

incluso)

$(“selettore”).innerWidth(); $(“selettore”).innerHeight();

jQuery no conflict

— Molte librerie utilizzano il simbolo $ come funzione

o come variabile.

— Funzione noConflict() esclude l'utilizzo del dollaro

per jQuery “liberandolo” per altre librerie.

Esercizio complessivo su jQuery

— Creare una pagina html con le seguenti

caratteristiche:

— Un form con:

• 2 aree di testo (la prima con id “larghezza” e la seconda

con id “lunghezza”)

• 1 input type color con id “colore”
• 1 pulsante con id “crea”

— 1 div con id “anim” e 1 pulsante

— Lato CSS: settare delle dimensioni di lunghezza e

largezza, 1 colore di sfondo e la position:relative al

div