Guida all'uso di jQuery in JavaScript

INSERIRE ELEMENTI

1) CREAZIONE: $(“#div”).html( “<p> Nuovo <strong> paragrafo </strong> </p>” ) //ovviamente cancella il contenuto

precedente

Elementi Annidati  .append( ) seleziono un elemento e ce ne inserisco un altro



$( “#menu” ).append (“<li> lista </li>”)

.appendTo( ) seleziono un elemento e lo inserisco in un altro



$(“<li> lista </li>”).appendTo(“#menu”)

.prepend( ) / .prependTo( ) creo elemento e lo inserisco prima di un altro



Elementi sullo stesso piano  .after( ) inserire un elemento DOPO uno già esistente

 $( “#menu” ).after (“<ul id=”lista2”> <li> lista </li> </ul>”)

.insertAfter( ) inserire un elemento DOPO uno già esistente



$(“<ul id=”lista2”> <li> lista </li> </ul>”).insertAfter(“#menu”)

.before( ) inserire un elemento PRIMA uno già esistente



$( “#menu” ).before (“<ul id=”lista2”> <li> lista </li> </ul>”)

.insertBefore( ) inserire un elemento DOPO uno già esistente



$(“<ul id=”lista2”> <li> lista </li> </ul>”).insertBefore(“#menu”)

Avvolgere elementi  .wrap( ) crea un elemento INTORNO ad un altro

 $( “p” ).wrap (“<div> </div>”) -ogni paragrafo sarà avvolto da un Div

.wrapAll( ) avvolge tutta la collezione con un unico nuovo elemento



$(“ * ”).wrapAll (“<div> </div>”)

.wrapInner( ) crea il nuovo elemento all’INTERNO dell’elemento dato



dall’inizio . alla fine

estendendolo $(“ p ”).wrapInner (“<span> </span>”) -- <p> <span> Testo </span> </p>

2) SOSTITUZIONE: .replaceWith( ) sostituire un elemento con un altro



$( “#menu” ).replaceWith (“<div> Nuovo </div>”)

$( “#menu” ).replaceWith ( $(“#contenuto”) )

.replaceAll( ) sostituire un elemento con un altro

 $( “<div> Nuovo </div>” ).replaceAll (“#menu”)

$( “#contenuto” ).replaceAll ( $(“#menu”) )

.clone( ) clona un elemento, ma poi occorre posizionarlo

 $( “#contenuto” ).clone().appendTo ( $(“#menu”) )

3) RIMOZIONE: .empty( ) svuota un elemento dal suo contenuto

 $( “#messaggio” ).empty ()

.remove( ) elimina del tutto un elemento

 $( “#contenitore” ).remove ()

$( “#contenuto” ).remove ( “#riga1” )

USARE IL CSS

1) MODIFICA:

elemento.css ({ “background-color” : “blue”, “font-family” : “Arial” });

2) SELEZIONE:

$(“a”).css (“background-color”);

x POSIZIONE e DIMENSIONE esistono metodi specifici

//dimensioni

.width( ) / height( )

.innerWidth( ) / innerHeight( ) dimensioni interne: comprende PADDING ma non BORDO

.outerWidth( ) / outerHeight( ) dimensioni esterne: comprende PADDING, BORDO ma MARGIN solo se parametro = true

//posizione

.offset( ) oggetto e sue distanze sx-top dal documento

.position( ) come offset() ma fa riferimento al suo primo contenitore

.scrollTop( ) / scrollLeft( ) trova/imposta lo scroll

EFFETTI GRAFICI

Vengono automaticamente gestiti con una QUEUE che ha 2 metodi per l’interazione: - queue()

-dequeue()

passandogli il nome della coda si ottiene l’array di funzioni che la compone

.queue() --- (fx di default),

passandogli una funzione, essa verrà eseguita come ultima della coda

--- ---riavvia la coda

.dequeue()

Es. //la passo ad un array

var Ncoda = [ function() {$(“this”).show();}, function() {$(“this”).hide();} ];

//inserisco l’array nella coda di sistema dell’oggetto voluto

$(“div”).queue (“fx”, Ncoda);

//posso svuotare la coda associando un array vuoto

$(“div”).queue (“fx”, []);

FUNZIONI DI BASE DURATA ( ) + FUNZIONE

parametri: millisec. o “slow”/”normal”/”fast” da eseguire

dopo - .show() / .hide() / .toggle()

- .slideDown() si apre dall’ALTO verso il BASSO

- .slideUp() si chiude dal BASSO verso l’ALTO

- .slideToggle () alterna le 2 funzioni

//opacità

- .fadeIn() riappare rioccupando spazio

- .fadeOut() sparisce e non occupa spazio

- .fadeTo () si schiarisce (tra DURATA e FUNZIONE ci va il gr.di Opacità 0-1)

FUNZIONI PERSONALIZZATE .animate()

1°Parametro { //settaggi CSS } con valori Finali o Delta dell’oggetto, Le parole CSS col trattino, vanno scritte

col camelCase 2°Parametro Velocità millisecondi o “slow”/”normal”/”fast”,

3°Parametro Easing *andamento* “Linear” o “Swing”,

4°Parametro callback function () { } es.

$(“#box”).animate ({

“borderWidth”:”4px”,

“width”:”+=200”},

“slow”, . . . .

“linear”, function(){ alert(“Animazione

conclusa!”); }); DISABILITARE

- jQuery.fx.off (true)  disabilitare Globalmente

- $( “div” ).stop () stoppa animazione

- $( “div” ).stop(true) stoppa animazione + cancella coda

GESTORE EVENTI .bind()

$( “a” ).bind (‘click’, function(e){

alert( $(this).attr(“href”) );} ) //this è l’elemento associato

//sapere elemento su cui si applica la funzione TARGET



{

$( “a” ).bind (‘click’, function(e) alert( T.targetName );}

var T = e.target; )

//sapere evento verificatosi TYPE



{

$( “a” ).bind (‘click’, function(e) if (e.type == ‘click’) {alert(‘click’);}

else {alert(‘Altro evento’);} } )

- .preventDefault()

IL MODULO PER BLOCCARE LE FUNZIONI PREDEFINITE:

{ e.preventDefault() ;}

$( “:submit” ).bind (‘click’, function(e) )

- event.data

L’ ARGOMENTO OPZIONALE DI .bind(): //questo va collocato tra l’EVENTO e la FUNZIONE e può essere usato come valore nella

funzione

$( “:text” ).bind (‘focus blur’, {“background-color”:”red”},function(e) { if (event.type == “focus”) {$(this).css(event.data)}

Elseif (event.type == “blur”) {$(this).css({“background-color”:”blue”})} ;} )

RIMUOVERE ASSOCIAZIONE .unbind()

$( “:text” ).unbind () //rimuove tutti gli eventi

$( “:text” ).unbind (“blur focus”) //rimuove solo gli eventi blur e focus

$( “:text” ).unbind (“blur”, blurF1) //rimuove solo quell’handler dell’evento blur

FORZARE UN EVENTO .trigger()/.triggerHandler()

//agisce solo sul primo membro della collezione

//Aprire una galleria di immagini da un link diverso

$( “#linkGalleria” ).bind (‘click’, function(e) { $(“a.galleria”).triggerHandler(‘click’);} ); //forza l’evento connesso al click sul link

oppure

$( “#linkGalleria” ).click() //lancia eventi associati al click sul link

ALTERNATIVE

.hover( ) accetta 2 funzioni: 1°MOUSE SOPRA --- 2°MOUSE LASCIA

.toggle( ) accetta 1 o più funzioni lanciandole in sequenza

.ready( ) $(document).ready() --- lancia la funzione contenuta al caricamento del document (prima di caricare immagini e css)

.click( ) --- come bind ---

.on( ) --- come bind ---

---non può essere usato su filtri---.live( ) --- come bind --- per togliere l’associazione si usa .die()

.one( ) --- come bind --- unica differenza: esegue quella funzione una sola volta

EVENTI AJAX due tipologie

Gli eventi possono essere di :

all’interno di una chiamata UNA funzione

- LOCALI si verificano , solo in



- GLOBALI coinvolgono tutto il DOM, impostati su selezioni



//locali beforeSend prima dell’invio di una chiamata



success la chiamata ha avuto successo



error la chiamata ha generato un errore



complete alla conclusione della chiamata (a prescindere dalla presenza o meno di errori)



//globale

ajaxStart inizializzazione chiamata



ajaxSend prima di inviare la chiamata



ajaxSuccess la chiamata ha avuto successo



ajaxComplete alla conclusione della chiamata (a prescindere dalla presenza o meno di errori)



ajaxError la chiamata ha generato un errore



ajaxStop non ci sono chiamate da effettuare

 //esempi

$(“#stato”).bind ( ‘ajaxComplete’, function() {……} ); oppure $(“#stato”).ajaxComplete ( function() {……} );

$(document).ajaxStart ( function() { $(“messaggio”).text( “caricamento”) })

$(document).ajaxStop ( function() { $(“messaggio”).text( “fine” ) })

RICHIESTE AJAX CON $.ajax( { url, f-success, f-error } )

- url indirizzo a cui inviare la chiamata - f-success da lanciare se ha successo (dati dal Server ,

 funzione

statoChiamata)

- f-error da lanciare se c’è un errore (rif alla ReqHttp , statoChiamata , erroriNotificati)

funzione

Es. $.ajax ( { url: “mioservere.html”,

success: function( data, stato ) { $(“res”).html(data);

$(“state”).text(stato) ;}

error: function( req, stato, err ) { alert(“Errore ”+stato); } } );

//PARAMETRI OPZIONALI tra parentesi i valori di Default

async(true) sincrona o asincrona

chiamata

1) , se sincrona blocca la pag. fino a fine elaborazione

2) cache(true) se “false” forza il browser a ricaricare ogni volta dal Server



3) contentType(“application|x-www-form-urlencoded”) contenuto mandato al Server



4) data oppure stringa da inviare

oggetto { chiave:valore, chiave2:valore2 } “chiave:valore&chiave2:valore2”

dataType tipo di dato restituito dal Server



5) : xml, html, text, script, json, jsonp

6) global(true) “false” non verranno lanciati gli eventi ajax Globali

se

7) ifModified(false) se “true” la richiesta avrà successo solo con dati diversi dalla precedente risposta



8) jsonp 

9) username nome utente

 (ove richiesto dal server)

10) password password

 (ove richiesto dal server)

11) processData(true) se “false” i dati non verranno pre-processati prima dell’invio



12) scriptCharset forza il charset utilizzato per dataType script/jsonp



13) timeou