Web

Programmazione Jquery

Tutto ci˛ che possiamo fare con jQuery gira intorno all'oggetto/funzione $();
Esempio: var elementi = $("#mioId");

Programmazione Jquery

Creare nuovi elementi

Possibile creare un nuovo elemento nel DOM semplicemente passandone il tag:
Esempio:
blocco.addClass("nuovaClasse");
blocco.appendTo("#mioId"); //inserisci dentro un altro elemento

Lanciare funzioni quando il DOM viene caricato

Una caratteristica particolare di jquery Ŕ la possibilitÓ di passare come argomento una funzione.
Nell'esempio le istruzioni passate verranno lanciate quando l'albero degli elementi HTML Ŕ stato caricato:
$(function () {
alert("Il DOM Ŕ stato caricato!");
});

Selettori di base

Per prima cosa potete utilizzare selettori semplici (tutte le combinazioni di tag, classi e id): $("a"); .....tutti i link nel documento
$("#blocco"); .....seleziona un singolo elemento con id "blocco"
$("div.nuovaClasse"); ....solo i div con la classe "nuovaClasse"

Selettori gerarchici

PossibilitÓ di utilizzare i selettori gerarchici per ricercare gli elementi all'interno di altri elementi specifici: $("#mioId a"); ..... tutti i link all'interni
$("ul > li"); ..... tutti gli elementi direttamente figli dell'elemento ul

Manipolare l'aspetto e la posizione degli elementi con jQuery

.width() imposta l'altezza
var valore = 100;
$('#banner').width(valore);
.height() imposta la larghezza
$('#banner').width(valore);
.innerHeight() consente di ricavare/impostare l'altezza di un elemento comprensiva di eventuale padding;
innerWidth() consente di ricavare/impostare l'altezza di un elemento comprensiva di eventuale padding;
outerHeight() consente di ricavare/impostare l'altezza di un elemento comprensiva di eventuale padding, bordo e margin;
outerWidth() consente di ricavare/impostare l'altezza di un elemento comprensiva di eventuale padding, bordo e margin;
.offset() consente di conoscere/settare la posizone di un elemento in relazione all'intero documento;
var valore = $('#avviso').offset();
valore.top
valore.left
Impostare le nuove coordinate:
$('#avviso').offset({ top: 100, left: 100 });
.position() consente di conoscere/settare la posizone di un elemento in relazione al suo contenitore.