JQuery www.jquery.com. jQuery versione di sviluppo (jquery-x.y.js) versione "sintetica" (jquery-x.y.min.js)

Presentazione sul tema: "JQuery www.jquery.com. jQuery versione di sviluppo (jquery-x.y.js) versione "sintetica" (jquery-x.y.min.js)"— Transcript della presentazione:

1 jQuery www.jquery.com

2 jQuery versione di sviluppo (jquery-x.y.js) versione "sintetica" (jquery-x.y.min.js)

3 selettore CSS $(….) La funzione $ Primo parametro: selettore CSS #idElemento.classetag Selezione multipla (con la virgola) e selettori gerarchici (spazio, >, +, ~) H1,.titolo, #titoloPrincipale #contenitore > DIV //solo il primo liv. riferimenti diretti: $(window) $(document.getElementById('titolo'))

4 altre funzioni di $(..) Creare nuovi elementi nuovo = $(" Ciao ") nuovo.appendTo(document.body) funzione onLoad-html (!= onload) $(function (){alert('DOM caricato')})

5 ancora su selezioni $(..) sulla base di attributi: $("input[type='text']") //tutte le caselle di testo, anche $(":text") $("a[title^='nota']"); //link con titolo che inizia per "nuova" $("a[title$='…']"); //link con titolo che finisce per,,, pseudoclassi $("div p:first-child") $("div p:only-child") $("div p:nth-child(even|odd|n)")

6 super pseudoclassi… $(…) :hidden :visible :disabled :checked :text :button :password :header //h1 h2.. h6 :has(selettore):not(selettore) :parent:empty :first :odd :even :eq(n) http://codylindley.com/jqueryselectors/

7 metodi.get(n) ed.eq(n) $("div").get() //restituisce una collezione equivalente a document.getElementsByTagName("div") $("div").get(n) //restuisce l'n-esimo tag div (coi metodi standard) $("div").eq(n) //restituisce l'n-esimo tag div come oggetto jquery $("#idElem").get(0) equiv. document.getElementById("idElem")

8 .size() e.length e.index(elm).size() e.length restituisce il numero degli elementi selezionati.index( elm ) riceve come parametro un riferimento ad un elementi e restituisce la posizione (a partire da 0) o -1 se l'elemento non è nella lista

9 .each( funzione ) ??

10 metodo.attr( 4 sintassi ). attr(nome) restituisce il valore dell'attrib. nome.attr(nome, valore) setta l'attributo nome a valore.attr(nome, funzione) setta l'att. al risultato della funz..attr({nome1:valore1,nome2:valore2}) setta l'attributo nome1 a valore1, nome2 a valore2, ecc.. nome e valore sono da intendersi come variabili, nel caso si passi direttamente la stringa utilizzare le virgolette o gli apici semplici.

11 .removeAttr( attributo ) rimuove uno specifico attributo a tutti gli elementi selezionati

12 jquery e le classi.hasClass( classe ) restituisce true o false.addClass( classe ) aggiunge una classe agli elementi selezionati.removeClass( classe ) rimuove una classe agli elementi selezionati.toogleClass( classe ) aggiunge se non c'è /rimuove se c'è

13 jQuery: contenuto.text( testo ).html( testoHtml ) Equivalenti alle proprietà standard innerText, innerHTML.val( ).val( testo ) Equivalenti alla proprietà value degli oggetti dei form. Passando un parametro viene settato quel valore.

14 sottoSelezioni.filter( selettore ).filter( funzione ) nella funzione this rappresenta ogni singolo elemento $("#contenitore a").filter( function () {return $(this).hasClass("external"); });.not( selettore ).eq( n ).slice( a, b)

15 is( selettore ) restituisce true o false

16 altri metodi di traversing.find( selettore ).children( selettore ).parent( ).parents( ).prev( ).next( ).prevAll( ).nextAll( )

17 nuovi elementi $( nodoPadre ).append( nodoFiglio) $( nodoFiglio).appendTo( nodoPadre ) $( contenuto ).prepend( cappello ) $( cappello ).prependTo( contenuto ) $( oggPrima ).after( oggDopo) $( oggDopo ).insertAfter( oggPrima ) $( oggDopo ).before( oggPrima) $( oggPrima ).insertAfter( oggDopo )

18 Avvolgere gli elementi $( selezione ).wrap( contenitore ) crea un contenitorore per ogni elemento selezionato $(selezione).wrapAll(contenitore) crea un unico contenitore che comprende tutti gli elementi selezionati $(selezione).wrapInner(sottoContenitore)

19 Sostituire elementi $(selezione).replaceWith(nuovoElem) $(nuovoElem).replaceAll(selezione) $(selezione).empty() //svuota l'elemento $(selezione).remove() //elimina "visivamente" l'elemento $(selezione).remove(nodoFiglio) //elimina il nodo figlio

20 .clone $(selezione).clone( false ) clona l'elemento senza ricopiare gli eventi $(selezione).clone( true ) clona l'elemento ricopiando anche gli eventi Gli elementi vanno poi aggiunti.$(selezione).clone().appendTo(contenitore)

21 .css() manipola i fogli di stile accetta sia i nomi css sia quelli javascript si possono impostare $(selezione).css( proprietà, valore ) $(selezione).css( {proprietà: valore,prop2: val2,prop3: val3,…}) si possono leggere i valori $(selezione).css( proprietà )

22 metodi veloci.width().height() se utilizzo numeri si intendsono pixel se no uso le virgolette '3cm' senza parametro leggono, con parametro scrivono e restituiscono la selezione.innerWidth().innerHeight() include il padding solo lettura.outerWidth().outerHeight() include bordi e padding, se passo true anche i margin

23 position(), offset(), scrolling restituiscono un oggetto con.left e.top offset rispetto al BODY position rispetto al contenitore più vicino $(selez).scrollTop() $(selez).scrollLeft() metodi corrispondenti alle proprietà: document.getElementById(id).scrollLeft document.getElementById(id).scrollTop passando un parametro settano la proprietà e restituiscono un oggetto jquery

24 Gestione degli eventi $(selezione).bind(nomeEvento, funzione) nomeEvento: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error; si possono associare più eventi separandoli con uno spazio funzione function (event) { … }

25 .unbind $(selezione).unbind() rimuove tutti le programmazioni (handler) degli eventi $(selezione).unbind( eventi ) rimuove le programmazioni (handler) degli eventi specificati $(selezione).unbind( evento, funzione ) rimuove la funzione specificata (handler) per l'evento

26 .trigger() e triggerHandler() servono per "simulare" l'evento $(selezione).trigger(evento) triggerHandler è più specifico e agisce solo per il primo elemento della selezione.

27 .one( …).hover(…).toogle(..).one( evento, funzione) funziona come.bind con la differenza che viene eseguita una volta sola..hover( funzioneOver, funzioneOut ) serve per gestire il rollOver.toogle( funz1, funz2, funz3,…) riceve varie funzioni, ad ogni click viene associata una nuova funzione, poi riinizia

28 esempio di hover //equivalente di td {border: solid 1px blue;} td:hover {border: solid 1px red;} $("td").css({"border":"solid 1px blue"}) $("td").hover( function (){$(this).css({'border':'solid 1px red'})},function (){$(this).css({'border':'solid 1px blue'})})

29 $(selezione).click( fz ) È una scorciatoia per assegnare un handler all'evento click.

30 Animazioni.show().hide().slideDown(),.slideUp().slideToogle().fadeIn().fadeOut()

31 eventi Ajax.ajaxStart.ajaxSend.ajaxSuccess.ajaxError.ajaxComplete

32 $.ajax $.ajax( { url: …, success: function ( datiRicevuti, stato{..}), error: function (richiesta, stato, errore) {..}), async: true|false, cache: true|false, contentType: …., type: "GET"|"POST", data:.., timeout : millisec, dataType: html|xml|text|script|json|jsonp })

33 Altre funzioni $.trim(stringa) restituisce la stringa senza spazi. $.browser.msie, $.browser.safari, $.browser.opera, $.browser.mozilla $.browser.version, $.support