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

Slides:



Advertisements
Presentazioni simili
Guida Pratica Prof. Carla Fanchin
Advertisements

CSS CASCADING STYLE SHEET Alberto Ferrari. Cascading Style Sheet I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per.
A. Ferrari Alberto Ferrari. Un form html è una sezione di documento che contiene Testo normale e markup Elementi speciali chiamati controlli (checkbox,
JavaScript 6. Oggetti e JavaScript. Linguaggio ad oggetti JavaScript è un linguaggio orientato agli oggetti In JavaScript sono presenti oggetti predefiniti.
CSS CASCADING STYLE SHEET Alberto Ferrari.
JavaScript 8. Altri oggetti JavaScript. history Contiene lelenco delle pagine visitate Sintassi: window.history frame.history history Proprietà length.
A. FERRARI Alberto Ferrari. L'HyperText Markup Language (HTML) (traduzione letterale: linguaggio di marcatura per ipertesti) è un linguaggio usato per.
JavaScript 2. JavaScript nelle pagine web. HTML e XHTML Gli script JavaScript sono utilizzabili sia in pagine HTML che XHTML XHTML impone che il codice.
G. Mecca – – Università della Basilicata Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Dettagli e Approfondimenti versione.
G. Mecca – – Università della Basilicata Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Concetti Fondamentali versione.
CSS: Cascading Style Sheets Specifiche del formato del documento tramite un linguaggio Come modelli.dot di Word o file di stile.sty per latex Separazione.
HTML e CSS Concetti base Comunicazione Multimediale.
JAVASCRIPT DIFFERENZA TRA JAVASCRIPT E JAVA TAG LO SCRIPT OGGETTI LE CLASSI FUNZIONE GESTORE DI EVENTI ELEMENTI DEL LINGUAGGI è un vero e proprio linguaggio.
Cascading Style Sheet CSS2 – CSS/P
Sistemi tecnologici e informazione online
In… Form… iamoci (validazione delle form). Bruni e Giorgetti2 Operazioni comuni Ormai siete esperti nella gestione degli eventi Rivediamo velocemente.
Esempi sui CSS.
Fogli stile a cascata Danilo Deana.
Introduzione a AJAX - Asynchronous Javascript And Xml
Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012.
Linguaggi per il Web Linguaggi di markup: CSS. Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme.
Dott. Chiara Braghin Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore) HTML e i fogli di stile Dott.
Informatica Generale: laboratorio di informatica
Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi.
Javascript 6 Funzioni. Una funzione sarà eseguita in risposta ad un evento o ad una chiamata diretta. Le funzioni possono essere inserite comodamente.
CSS : Cascading Style Sheet
IL BOX MODEL Ogni box è caratterizzato da 1.Larghezza dello spazio per i contenuti ( width ) 2.Altezza dello spazio per i contenuti ( height ) 3.Spazio.
Javascript: fondamenti, concetti, modello a oggetti
FORMATTARE LE LISTE DI LINK  MENU
Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Cascading Style Sheet (Fogli di Stile in Cascata)
HTML Lezione 7 Il modello dei contenitori. Gestire lo spazio tra gli elementi Lo spazio tra gli elementi della pagina o allinterno del contenuto di un.
CSS CASCADING STYLE SHEETS : CASCADING STYLE SHEETS : Fogli di stile a cascata Definisce il modo in cui verranno visualizzati gli elementi di una pagina.
BIOINFO3 - Lezione 111 CGI-BIN CGI-BIN sono chiamati i programmi la cui esecuzione può essere richiesta attraverso il WEB. Il server web (httpd) della.
HTML HyperText Markup Language Linguaggio per marcare un’Ipertesto
HTML I Form in HTML5.
DOM – Document Object Model
ASP.NET. …un po’ di ASP ASP (Active Server Pages) è una tecnologia Microsoft che consente di scrivere codice eseguibile (script) lato server, inserendo.
Intro CSS e tag DIV. INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita.
Javascript Javascript
Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.
Premessa Con i FORMS (moduli) l'utente può interagire con il sito spedendo un proprio commento, avanzando richieste senza necessità di scrivere via ,
Form o moduli HTML Esistono degli oggetti standard che permettono una certa interattività con l'utente. Un utilizzo completo e significativo di tali elementi.
Lezione 8.
Relatore Prof. Marco Porta Correlatore Prof. Luca Lombardi
Pseudoclassi e Pseudoelementi si definiscono con :pseudoclasse possono riferirsi a classi, tag o singoli elementi ci sono pseudoclassi dinamiche, pseudoclassi.
Corso Web CSV – Andiamo on-line 1 Andiamo on-line Corso di formazione Elementi base per la costruzione di un sito web.
Sintassi e regole dei CSS
JQuery Utilizzo, animazioni, plugin e parallax scrolling
TAG e CSS Ricalcare la grgilia di impaginazione. UNA STRUTTURA PER I CONTENUTI Oltre a caratterizzare i contenuti (titoli, paragrafi, liste, collegamenti),
JavaScript Generalità Cos'è JavaScript?
La struttura del documento
Note sull’esame L’esame è composto da due parti:
1 Liste e Combo Liste e combo (lista chiusa) hanno una struttura simile: utilizzano gli stessi due tag: e Il primo tag contiene il secondo. deve essere.
1 Drag & Drop Ci sono varie soluzioni per simulare l'azione di spostamento e trascinamento di un oggetto. Le diverse soluzioni presuppongo: 1)sapere dove.
Introduzione a Javascript
HTML 4.01 Apogeo. I tag di base Capitolo 1 I tag SintassiEsempi:
HTML e CSS C. Gena, C. Picardi, J. Sproston HTML e CSS.
CSS Cascading Style Sheet
DOM, CSS-P e DHTML Roberto Bruni e Daniela Giorgetti.
JavaScript Linguaggio definito da Netscape JScript: la versione MicroSoft (basata su ECMAScript) Serve ad arricchire una pagina HTML con codice da eseguirsi.
Tecnologia per la comunicazione
Il Fogli di Stile - CSS.
Javascript. HTML per definire il contenuto delle pagine web CSS per specificare il layout delle pagine web JavaScript per definire il comportamento delle.
INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita da due aspetti.
Linguaggi per il Web Linguaggi di markup: CSS. Fogli di stile Cascading Style Sheets Fogli di stile sovrapposti DEFINIZIONE Il CSS è l’insieme delle regole.
Per le condizioni di utilizzo di questo documento si rimanda alla pagina di copertina Giovanni Giorgi Milano, 22 Giugno 2010 Divisione Financial Institutions.
CSS. I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi.
LEZIONE 04 Riepilogo CSS. SELETTORI I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera.
Transcript della presentazione:

jQuery

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

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'))

altre funzioni di $(..) Creare nuovi elementi nuovo = $(" Ciao ") 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)

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