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