Post on 02-May-2015
jQuery
www.jquery.com
jQuery
• versione di sviluppo (jquery-x.y.js)
• versione "sintetica" (jquery-x.y.min.js)
selettore CSS $(….)
• La funzione $
• Primo parametro: selettore CSS#idElemento .classe tag
• Selezione multipla (con la virgola) e selettori gerarchici (spazio, >, + , ~)H1, .titolo, #titoloPrincipale
#contenitore > DIV //solo il primo liv.
• riferimenti diretti: $(window) $(document.getElementById('titolo'))
altre funzioni di $(..)
• Creare nuovi elementinuovo = $("<p>Ciao</p>")
nuovo.appendTo(document.body)
• funzione onLoad-html (!= onload)$(function (){alert('DOM caricato')})
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)")
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/
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")
.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
.each( funzione )
• ??
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.
.removeAttr( attributo )
• rimuove uno specifico attributo a tutti gli elementi selezionati
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'è
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.
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)
is( selettore )
• restituisce true o false
altri metodi di traversing
• .find( selettore )
• .children( selettore )
• .parent( )
• .parents( )
• .prev( ) .next( )
• .prevAll( ) .nextAll( )
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 )
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)
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
.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)
.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à )
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
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
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) { … }
.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
.trigger() e triggerHandler()
• servono per "simulare" l'evento
• $(selezione).trigger(evento)
• triggerHandler è più specifico e agisce solo per il primo elemento della selezione.
.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
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'})})
$(selezione).click( fz )
• È una scorciatoia per assegnare un handler all'evento click.
Animazioni
• .show() .hide()
• .slideDown(), .slideUp()
• .slideToogle()
• .fadeIn() .fadeOut()
eventi Ajax
• .ajaxStart
• .ajaxSend
• .ajaxSuccess
• .ajaxError
• .ajaxComplete
$.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 })
Altre funzioni
• $.trim(stringa) restituisce la stringa senza spazi.
• $.browser.msie, $.browser.safari, $.browser.opera, $.browser.mozilla
• $.browser.version, $.support