8/12/2019 JQuery JQuery JQuery JQuery JQuery
1/37
University of LAquilaComputer Science Department
Giuse e Della Penna
Universit degli Studi di LAquila
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 DOMdocument.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 htmlframmento.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