jquery jquery jquery jquery jquery

Upload: vjexter

Post on 03-Jun-2018

303 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    1/37

    University of LAquilaComputer Science Department

    Giuse e Della Penna

    Universit degli Studi di LAquila

    [email protected]

    http://www.di.univaq.it/gdellape

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    2/37

    University of LAquilaComputer Science Department JQueryJQuery

    Cos JQuery? JQuery una libreria Javascript per la programmazione crossbrowser

    avanzata

    ,Scriptacolous, ma presenta caratteristiche notevoli: E molto leggera

    E sviluppata da una comunit attivissima

    E supportata da una serie di plugin in continuo aumento, che realizzanole funzioni pi richieste

    E progettata sulla base di canoni di programmazione molto moderni, eper questo risulta estremamente semplice da capire e utilizzare

    ,

    (http://jquery.com/) e importarla come script in una pagina HTML JQuery, come i suoi plugin, viene distribuita in versione normale, utile

    per il debug, e minimizzata, molto pi compatta e necessaria perrendere leggere le applicazioni finali.

    Luso di un debugger Javascript come Firebug estremamente utile perimparare a usare JQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    3/37

    University of LAquilaComputer Science Department JQueryJQuery

    LOggetto JQuery Linterazione con JQuery avviene attraverso i metodi e le

    propriet esposte dagli oggetti JQuery.

    In particolare, quindi, per applicare un metodo JQuery aun nodo DOM o a un insieme di nodi, necessario creareun oggetto JQuery che li rappresenti, e su questo

    chiamare il metodo voluto. Infatti, ogni oggetto JQuery contiene un array di

    elementi ossibilmente vuoto. E possibile usare loggetto JQuery come un comune array,

    verificandone la lunghezza con la propriet length e accedendo aisingoli elementi con la sintassi [n]. Tuttavia, va sottolineato chegli elementi cos estratti saranno nodi DOM e non nuovi oggetti

    JQuery.

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    4/37

    University of LAquilaComputer Science Department JQueryJQuery

    Costruire un Oggetto JQuery Gli oggetti JQuery vengono creati tramite la speciale

    funzione $()

    Questa funzione molto potente e versatile, infatti puessere chiamata

    Senza parametri ($ o $()): in questo caso, si costruisce unoggetto JQuery che non rappresenta alcun nodo DOM, ma su cui

    possibile chiamare, ad esempio, metodi AJAX Un elemento DOM ($(E)): in questo caso loggetto conterr

    (come un wrapper) lelemento dato

    na s r nga rappresen an e un rammen o va o($(

    Ciao>/p>)): in questo caso, JQuery creer il DOMcorrispondente (senza inserirlo nel documento!) e ne inserir ilnodo radice nelloggetto creato

    Una stringa rappresentante un selettore CSS3/XPath

    ($(a.pippo)): in questo caso, JQuery utilizzer gli elementiestratti dal selettore per costruire loggetto

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    5/37

    University of LAquilaComputer Science Department JQueryJQuery

    Esempivar body = document.body; //lelemento body del documentovar jqBody = $(body); //un oggetto JQuery che rappresenta lelemento body del documento

    == ==.

    var testo = Ciao;var html_fragment = $(

    +testo+

    ); //un oggetto JQuery cherappresenta lelemento div, creato (insieme alla struttura interna) ma non inserito nel DOM

    document.body.appendChild(html_fragment[0]); //appende al documento il frammento html appenacreato NON E IL METODO CONSIGLIATO PER EFFETTUARE QUESTA OPERAZIONE

    var elemento_x = $(#x); //un oggetto JQuery che rappresenta lelemento con id=x nel documento//VALE elemento_x[0] == document.getElementById(x);

    var paragrafi = $(p); //un oggetto JQuery che rappresenta gli elementi con tag p nel documento//VALE paragrafi.length == numero elementi p nel documento!

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    6/37

    University of LAquilaComputer Science Department JQueryJQuery

    Selezione di Elementi Unattivit fondamentale nello scripting DOM, semplificata

    da JQuery, la selezione di elementi.

    JQuery permette di cercare e selezionare elementi dellapagina web in due modi:

    Tramite i selettori CSS3/ XPath usati nel costruttire $()

    Tramite una serie di metodi appositi esposti dagli oggetti JQuery

    Le due modalit di selezione possono essere combinate aiacere er facilitare al massimo la selezione

    La sintassi $(selettore) esegue la selezione sullinterodocumento

    E possibile specificare un particolare elemento come contestodei selettori, passandolo come secondo parametro:

    $(selettore, contesto)

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    7/37

    University of LAquilaComputer Science Department JQueryJQuery

    Selettori JQuery: Base I selettori utilizzabili con JQuery sono tutti quelli di CSS2, quelli

    derivanti dalla specifica (non ancora finale) di CSS3, pi altri creati adhoc. Li riassumiamo qui brevemente.

    Selettori di base * #id elemento .classe

    Gerarchia S1 S2 (discendenti)

    , S1 > S2 (figli) S1 + S2 (seguente) S1 ~ S2 (fratelli)

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    8/37

    University of LAquilaComputer Science Department JQueryJQuery

    Selettori JQuery: Base Attributi

    S1[A] (gli elementi selezionati da S1 che hanno un attributo A)

    il cui valore V) S1[A!=V] (gli elementi selezionati da S1 che hanno un attributo A

    il cui valore non V) S1[A^=V] (gli elementi selezionati da S1 che hanno un attributo A

    il cui valore inizia con V) S1[A$=V] (gli elementi selezionati da S1 che hanno un attributo A

    il cui valore termina con V) S1 A =V li elementi selezionati da S1 che hanno un attributo A

    con valore V o iniziante con V-) S1[A*=V ] (gli elementi selezionati da S1 che hanno un attributo

    A il cui valore ha V come sottostringa) S1[A~=V] (gli elementi selezionati da S1 che hanno un attributo

    A il cui valore contiene V delimitata da spazi)

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    9/37

    University of LAquilaComputer Science Department JQueryJQuery

    Esempi$(a[name]); //oggetto JQuery che rappresenta tutte le ancore nel documento (tag a con attributoname)

    $(div.galleria > img[src$=png]); //oggetto JQuery che rappresenta tutti i tag img (immagini) che sonofigli diretti dei div di classe galleria, se lattributo src termina in png (presumibilmente, quindi, tutte leimmagini di tipo png contenute direttamente in div di classe galleria)

    $(form input[type=checkbox][checked]); //oggetto JQuery che rappresenta tutti i controlli di inputinseriti in una form che hanno tipo checkbox e sono spuntati (hanno attributo checked). Per ilmatching sulle form esistono per selettori pi potenti!

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    10/37

    University of LAquilaComputer Science Department JQueryJQuery

    Selettori JQuery: Filtri I filtri sono pseudo classi CSS (quindi da applicare ad altri selettori,

    oppure a un * implicito) Filtri di base

    S1:animated (gli elementi selezionati da S1 che sono animati) S1:eq(index) (lelemento n-esimo tra quelli selezionati da S1) S1:even (gli elementi con indice pari tra quelli selezionati da S1) S1:odd (gli elementi con indice dispari tra quelli selezionati da

    S1) S1:first (il primo elemento tra quelli selezionati da S1) S1:last (lultimo elemento tra quelli selezionati da S1)

    selezionati da S1) S1:lt(n) (gli elementi con indice minore di n tra quelli selezionati

    da S1) S1:not(S2) (gli elementi selezionati da S1 che non fanno match

    con S2) S1:header (gli elementi selezionati da S1 che sono header)

    U i it f LA il

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    11/37

    University of LAquilaComputer Science Department JQueryJQuery

    Selettori JQuery: Filtri Contenuto

    S1:contains(testo) (gli elementi selezionati da S1 che contengono iltesto indicato)

    S1:empty (gli elementi selezionati da S1 che sono vuoti) S1:has(S2) (gli elementi selezionati da S1 che ne contengono almeno uno

    che soddisfa S2) S1:parent (gli elementi selezionati da S1 che hanno almeno un figlio)

    Figli S1:first-child (gli elementi selezionati da S1 che sono il primo figlio del

    loro padre) S1:last-child (gli elementi selezionati da S1 che sono lultimo figlio del

    loro padre) S1

    :nth-child(n/even/odd)(gli elementi selezionati da S1 che sono il

    figlio n del loro padre, o sono i figli pari/dispari) S1:only-child (gli elementi selezionati da S1 che sono lunico figlio del

    loro padre) Visibilit

    S1:hidden (gli elementi selezionati da S1 che sono invisibili) S1:visible (gli elementi selezionati da S1 che sono visibili)

    University of LAquila JQJQ

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    12/37

    University of LAquilaComputer Science Department JQueryJQuery

    Esempi$(table tr:odd td); //le celle contenute nelle righe dispari di tutte le tabelle

    + *

    documento

    $(h2:gt(1)); //tutte le intestazioni di livello due tranne la prima

    $(input:not([checked])); //i controlli di input senza lattributo checked impostato

    $(p:has(a)); //i paragrafi che contengono almeno un link$(p:not(:has(a))); //i paragrafi che non contengono un link$(p:not(a)); //i paragrafi che sono anche link (impossibile!)

    $(div:contains(Saluti)); //le div che contengono il testo Saluti

    $(p:empty, p:hidden); //iparagrafi vuoti o invisibili

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    13/37

    University of LAquila JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    14/37

    University of L AquilaComputer Science Department JQueryJQuery

    Esempi

    $(.small:text); //gli input di tipo testuale di classe small

    =

    $(input[type=checkbox]:not(:checked)); //gli elementi input di tipo checkbox non spuntati

    $(#form1 :submit); //i bottoni di submit nellelemento (form) con id=form1

    University of LAquila JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    15/37

    y qComputer Science Department JQueryJQuery

    Funzioni di Attraversamento

    Molti dei costrutti CSS-like visti finora hanno una

    del DOM di JQuery

    Queste funzioni, applicate a un oggetto JQuery,

    filtrano/manipolano linsieme di elementi da essorappresentato

    contiene gli elementi cos ottenuti

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    16/37

    University of LAquila JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    17/37

    Computer Science Department JQueryJQuery

    Funzioni di Attraversamento: Filtri

    first()/last() restituisce il primo/lultimo elementonellinsieme

    eq(n) restituisce ln-esimo elemento nellinsieme filter(S)/has(S) restituisce gli elementi

    dellinsieme che fanno match con S/che hannoalmeno un discendente che fa match con S

    is(S) restituisce true se almeno un elemento

    e ns eme a ma c con . on un vero ro not(S) restituisce gli elementi dellinsieme che

    non fanno match con S. S pu essere anche un

    array di oggetti DOM o una nodeList DOM.

    University of LAquilaC t S i D t t JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    18/37

    Computer Science Department JQueryJQuery

    Esempi

    $(h2:eq(14)).nextAll(:header); //tutte le intestazioni che seguono la quattordicesima sezione dilivello 2 del documento

    $(img).parents(div); //tutte le div che contengono (direttamente o indirettamente) in elemento img

    $(p).filter(:contains(w)) //i paragrafi che contengono la stringa w (identico a $(p:contains(w)))

    $(#pippo).children(p).next(); //gli elementi che seguono immediatamente ciascun paragrafo figliodellelemento con id=pippo

    var e = $(#control);If (e.is(:checked)) { /* codice eseguito solo se lelemento con id=control un input spuntato */ }

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    19/37

    Computer Science Department JQue yJQue y

    Manipolazione del DOM

    JQuery affinca ai metodi DOM standard, quali appendChild, dei nuovi metodidi manipolazione del DOM

    append(C) accoda C ai figli degli elementi nellinsieme. C pu essere un

    e emento , una str nga un oggetto uery c e rappresentauno o pi elementi). appendTo(S) accoda gli elementi dellinsieme ai figli di quelli selezionati

    tramite S, che pu essere un elemento DOM, un selettore CSS, unastringa HTML o un oggetto JQuery

    prepend(C)/prependTo(S) funzionano come append e appendTo, mainseriscono allinizio della lista dei figli after(C)/before(C) inseriscono C prima/dopo gli elementi dellinsieme insertAfter(S)/insertBefore(S) inseriscono gli elementi dellinsieme

    empty() elimina il contenuto di tutti gli elementi dellinsieme remove() rimuove tutti gli elementi dellinsieme dal DOM detach() rimuove tutti gli elementi dellinsieme dal DOM, ma non li

    distrugge, in modo che possano essere reinseriti altrove. clone(B) esegue una copia completa degli elementi dellinsieme. Se B

    true, vengono copiati anche i dati e gli event handlers associatiallelemento da JQuery.

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    20/37

    Computer Science Department Q yQ y

    Esempi

    $(div.translation).append(

    Powered by me

    ); //inserisce il paragrafo dato (dopo averlocreato) alla fine delle div con classe translation

    $(#a > li).appendTo(#b); //sposta (nel DOM inserire un elemento gi presente in unaltra locazionecorrisponde a spostarlo) tutti gli item della lista con id=a alla fine della lista con id=b

    var frammento = $(

    pippo

    ); //crea un frammento html

    frammento.appendTo(#a); //appende il frammento allelemento con id=aframmento.clone().prependTo(div.marked:first); //inserisce una copia del frammento allinizio dellaprima div di classe marked

    var exel = $(p:first).detach(); //rimuove ma non cancella il primo paragrafo del documento//exel.appendTo(document.body); //e lo reinserisce alla fine del documento

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    21/37

    Computer Science Department yy

    Modifica di Conenuto e Attributi

    JQuery mette a disposizione molti metodi standard per manipolare ilcontenuto degli elementi in maniera sicura e crossbrowser.

    ,un elemento, i metodi di lettura restituiscono il valore estratto dalprimo elemento dellinsieme, mentre quelli di impostazione agisconosu ciascun elemento dellinsieme stesso

    attr(A) restituisce il valore dellattributo A

    attr(A,V) imposta lattributo A al valore V removeAttr(A) rimuove lattributo A

    html() restituisce il codice html contenuto nellelemento

    m mpos a co ce m come con enu o e e emen o

    text() restituisce il testo contenuto nellelemento (eliminandoleventuale markup)

    text(T) imposta il testo T come contenuto dellelemento

    val() restituisce il valore di un controllo di form

    val(V) imposta a V il valore di un controllo di form

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    22/37

    p p

    Esempi

    $(#risultato).html(

    Nessun riscontro

    ); //inserisce il paragrafo dato allinterno dellelementocon id=risultato

    $(#risultato).text(); restituisce il solo testo contenuto nellelemento. In qesto caso Nessun riscontro

    $(:input).val(); //restituisce il value del primo controllo input, textarea o select nel documento

    $(#pippo).val(pluto); //se lelemento conid=pippo un input testuale o una textarea, ne sostituisceil contenuto con la stringa pluto. Se lelemento una select, ne seleziona lopzione avente comevalore pluto (se esiste). Negli altri casi, non ha alcun effetto.

    $(document.body).attr(lang,it); //importa a it lattributo lang sullelemento body del documento

    $([lang]).removeAttr(lang); //rimuove lattributo lang da tutti gli elementi che lo specificano

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    23/37

    Manipolazione dello Stile

    JQuery dispone di tre metodi per manipolare

    addClass(C) aggiunge la classe C (attributo class html)

    removeClass(C) rimuove la classe C

    hasClass(C) vero se almeno un elemento dellinsiemeha classe C

    E inoltre ossibile mani olare direttamente li

    stili di ogni elemento utilizzando le funzioni css(P) restituisce il valore corrente (calcolato) della

    propriet CSS, specificata secondo lo standard W3C

    css(P,V) imposta la propriet CSS P al valore V

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    24/37

    Manipolazione Stile: Dimensioni e Posizione

    Con i propri metodi JQuery annulla i problemi derivanti daldiverso modo di leggere o impostare le dimensioni e la

    posizione degli elementi. Anche in questo caso, se applicati a degli insiemi, i metodi

    di lettura restituiscono i dati estratti dal solo primo

    elemento. height()/height(V) restituisce o imposta laltezza

    width()/width(V) restituisce o imposta lampiezza

    position()/position({top:Y, left:X}) restituisce o imposta laposizione (oggetto con attributi left e top) relativaalloffsetParent

    offset()/offset({top:Y, left:X}) restituisce o imposta la posizione

    (oggetto con attributi left e top) relativa al documento

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    25/37

    Esempi

    $(.generic-input:text).addClass(text-input).removeClass(generic-input); //rimuove la classegeneric-input ed aggiunge la classe text-input a tutti gli elementi input di classe generic-input

    $(small).css(font-size,8pt); //forza una dimensione carattere di otto punti su tutti gli elementi small(ovviamente sarebbe meglio fare la stessa cosa con una regola di stile!)

    $(#pippo).css(margin-top); //fornisce le informazioni (calcolate) sul margine superiore dellelemento

    con id=pippo. Attenzione: JQuery non supporta molte delle propriet aggregate, come margin.

    $("p.collapsable").height(10); //imposta a 10 pixel laltezza di tutti i paragrafi di classe collapsable

    var pos = $(#moveable).offset();$(#moveable).offset({left: pos.left+10, top: pos.top}); //sposta lelemento con id= moveable di 10pixel in basso

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    26/37

    Gestione degli Eventi: Binding

    JQuery dispone di una gestione degli eventi che permettedi superare molte delle incompatibilit tra i browser.

    Le funzionalit di event handling sono accessibili tramite ilmetodo bind: bind(T,F) aggancia, negli elementi dellinsieme, allevento

    specificato da T levent handlerF.

    T una stringa contenente il nome di un evento Javascript (ad es.click).

    F una funzione che verr chiamata assegnando al suo contesto

    evento come unico argomento. Loggetto evento normalizzato,come vedremo pi avanti

    Unbind(T,F) rimuove F dalla lista degli handlers per levento Tnegli elementi dellinsieme.

    Anche in JQuery esistono dei metodi-scorciatoia pereseguire il binding diretto di eventi, ad esempio click(F).

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    27/37

    Gestione degli Eventi: Eventi Normalizzati

    Loggetto Event passato da JQuery agli handler dichiaraticon il metodo bind un evento normalizzato, che assicura

    a presenza e a seman ca e seguen camp e me oprincipali: type descrive il tipo di evento, ad esempio click

    target lelemento DOM che ha attivato levento

    relatedTarget lelemento definito per questo evento nellaspecifica degli eventi DOM

    currentTarget lelemento del DOM a cui attualmente passatoeven o n ase u n : a o s esso va ore s ne a

    funzione result il valore ritornato dallultimo handler per questo evento

    preventDefault() evita che il browser esegua lazione di defaultper questo evento

    stopPropagation() blocca il bubbling dellevento

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    28/37

    Binding degli Eventi Load e Ready

    Levento loaddel documento essenziale, comesappiamo, per eseguire codice solo quando il documento

    pron o per a man po az one Tuttavia, loadviene generato quando il documento

    renderizzato, mentre quasi sempre possibile avviare gliscript quando il DOM stato creato in momeoria.

    Per questo JQuery, oltre a permettere il binding di handlerallevento load, mette a disposizione un evento ready, e

    a questo evento: $(F) chiama la funzione F quando il DOM in stato ready

    Si possono cos dichiarare, anche a pi riprese (cio conpi istanze della chiamata $(F)), tutti i blocchi di codiceda eseguire quando il DOM pronto per la manipolazione.

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    29/37

    Esempi

    $(p).bind(click,function(e) {$(this).text(e.pageX+, +.pageY); ,

    momento del click

    $(:text).bind(keyup,function(e) {if (e.which == 32) alert(hai premuto lo spazio);

    }); //con questo handler, assegnato a tutti gli input testuali, verr visualizzata una notifica ogni voltache si inserisce uno spazio nel controllo

    $(function() {$(document.body).css(background-color,red);

    }); //cambia in rosso il colore di fondo del body appena il DOM stato caricato in memoria

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    30/37

    Animazione di Base

    JQuery dispone di potenti funzioni per animare gli

    hide(T,C)/show(T,C) nasconde/mostra ciascunelemento dellinsieme. Se T fornito, gli elementivengono animati fino a scomparire/apparire in T

    millisecondi. Se C fornito, una funzione che vienechiamata appena gli elementi sono scomparsi/apparsi

    , , ,

    ma con un effetto sfumato. slideUp(T,C)/slideDown(T,C) agiscono come hide e

    show, ma con un effetto di scorrimento.

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    31/37

    Associazione di Dati

    JQuery permette di associare dati arbitrari, sotto

    elementi DOM. Questi dati non appaiono nelcodice HTML n nella sua rappresentazionevisuale.

    data(K)/data(K,V) restituisce o imposta a V il valoreassociato alla chiave K per tutti gli elementie insieme

    removeData(K) rimuove il valore K da tutti glielementi dellinsieme

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    32/37

    Esempi

    var dis = $(#display);dis.fadeOut(1000,function() {

    < > < >. .

    });//aggiorna in maniera dolce il contenuto dellelemento con id=display://prima fa scomparire in maniera sfumata lelemento,//quindi appena questultimo invisibile, ne modifica il contenuto html

    //e lo rende di nuovo visibile, sempre in modo sfumato

    var x = $(#pippo); //individua lelemento con id=pippox.data(colore,x.css(color)); //memorizza il colore css dellelemento allinterno dei suoi dati

    x.css(color,red); //cambia il colore dellelemento//x.css(color,x.data(colore)); //ripristina il colore dellelemento a quello salvato nellelemento stesso

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    33/37

    JQuery e AJAX

    JQuery rende luso di AJAX estremamente rapido eagevole. La libreria comprende molte funzioni di

    i metodi di alto livello pi utili nelle applicazioni ditutti i giorni $.get(U,D,C,T) esegue una chiamata asincrona alla url

    U, passando opzionalmente come dati GET le coppie

    chiave,valore contenute nelloggetto D. Se lachiamata ha successo, i dati ricevuti vengonodecodificati in base al tipo MIME specificato dal server

    funzione callback C. La funzione callback di successo riceve come parametri I dati ricevuti dal server, opportunamente decodificati Il messaggio testuale di stato restituito dal server Loggetto XMLHTTPRequest usato per la chiamata

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    34/37

    JQuery e AJAX

    $.post(U,D,C,T) agisce come $.get ma esegue unarichiesta POST

    . , , .sottintende il tipo JSON come richiesta. In questomodo la funzione callback ricever un oggettoJavascript decodificato.

    $.getScript(U,C) agisce come $.get masottintende il tipo Script come richiesta. JQueryvaluter il testo ricevuto come uno script

    .

    per caricare script dinamicamente. .load(U,D,C) se applicato a un oggetto JQuery,

    sostituisce con il testo(html) della risposta ilcontenuto degli elementi da esso rappresentati

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    35/37

    Esempi

    $(#latest).load(http://server/latest-news.php); //il modo pi semplice per ricaricare dinamicamente ilcontenuto di una parte di documento (in questo caso lelemento con id=latest)

    $.get(http://server/latest-news.php,{},updateNews,text/html);function upateNews(data) {

    $(#latest).fadeOut(1000,function() {$(#latest).html(data).fadeIn(1000); });} //come nellesempio precedente, ma in caso di successo aggiorna il contenuto dellelemento con un

    effetto sfumato. Se la chiamata fallisce, nessuna funzione viene chiamata. Se necessario gestireanche i casi di fallimento, usare la funzione a basso livello $.ajax()

    //la funzione che segue pu essere utilizzata per caricare dinamicamente degli script solo quandosono necessari, alleggerendo il tempo iniziale di caricamento dei documenti.

    var loaded = {} //globalefunction requireScript(url) {

    if (! (url in loaded) || loaded[url]==false) {$.getScript(url, function() {loaded[url] = true; alert(ora possibile usare le funzioni in +url)});

    }}

    University of LAquilaComputer Science Department JQueryJQuery

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    36/37

    Itarazione su un oggetto JQuery

    Per eseguire operazioni complesse, possibileiterare lapplicazione di una funzione su tutti gli

    e emen e ns eme con enu o n un ogge oJQuery usando il metodo each each(F), dove F una funzione, richiama F una volta

    per ogni elemento dellinsieme, impostandone il

    contesto (this) allelemento corrente e passandoopzionalmente come argomento lindice dellelementonellinsieme.

  • 8/12/2019 JQuery JQuery JQuery JQuery JQuery

    37/37