jquery - 1 | webmaster & webdesigner

of 32 /32
JQuery [1] Matteo Magni

Author: matteo-magni

Post on 13-Dec-2014

307 views

Category:

Technology


1 download

Embed Size (px)

DESCRIPTION

Prima lezione del modulo jQuery del corso per WebMaster & WebDesigner

TRANSCRIPT

  • 1. JQuery [1] Matteo Magni

2. jQuery: The Write Less, Do More, JavaScript Library 3. jQuery 4. Cos?jQuery una libreria di funzioni (framework)javascript, cross-browser per le applicazioniweb, che si propone come obiettivo quello disemplificare la programmazione lato clientdelle pagine HTML. (wikipedia) 5. Cos:Cosa fa: Framework Document Cross browser traversing Event handling Animating Ajax interactions 6. Quindi? 7. Versionihttp://jquery.com/a)PRODUCTION (32KB, Minified and Gzipped)b)DEVELOPMENT (252KB, Uncompressed Code)Differenze? 8. ProductionPesa solo 32 kb perch minificata.http://en.wikipedia.org/wiki/Minification_(programming)processo di rimozione di tutti i caratteri non necessaridal codice sorgente, senza cambiarne la suafunzionalit. 9. Development252 kb perch scritta in maniera leggibile alprogrammatore.Adatta per la fase di sviluppo, meno per laproduzione per via della banda che occupa.Le funzionalit di tutte e due sono le stesse 10. Integrare jQueryPer integrare jQuery nei nostri progetti bastaincludere il file js come javascript esterno.A quel punto tutte le funzionalit di jQuery cisaranno disponibili. 11. Content Delivery NetworkE possibile utilizzare jQuery anche da CDN. CDN:Content Delivery NetworkRete per la consegna di contenuti, ciosistema distribuito di grande estensioneche attraverso un alto numero di server, ilquale consente di fornire contenuti agliutenti con maggior affidabilit. 12. CDN Vantaggi Far risparmiare banda al proprio server Lutente avendola gi utilizzata protrebbe quindi averla gi in cache nel browser 13. Googlehttps://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.jsMicrosofthttp://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.jsjQueryhttp://code.jquery.com/jquery-1.8.2.min.js 14. ReleaseDa CDN possiamo vedere che jQuery arrivato alla versione 1.8.2 e che quando lechiamiamo la libreria in quel mododobbiamo ricordaci quale vogliamo. 15. Come usiamo jQuery?Il framework jQuerydefinisce unavariabile jQuery laquale contiene unoggetto che ha tutti imetodi e le proprietimplementate dallalibreria. 16. Alias $jQuery.isNumeric(10);Ma abbiamo anche a disposizione un alias come$ che rappresenta la variabile jQuery.$.isNumeric(10); 17. Aspettare il DOMFino ad ora dovevamo fare una cosa del genere per far partire lo script dopoil caricamento del documento.window.onload=function(){alert("welcome");}Con jQuery possiamo usare una sintassi di questo tipo$(document).ready(function(){alert("welcome");}); 18. Ready vs Loadil codice viene eseguito quando il DOM pronto ma prima che le immaginied altri elementi grafici siano caricati$(document).ready(function(){alert("welcome");});Qui aspetto che tutti gli elementi siano caricati$(window).load(function(){alert("welcome");}); 19. SelettoriAttraverso jQuerypossiamo selezionaretutti gli elementipresenti nel DOM,attraverso una sintassipi semplice che conJavascript, e poiandare a manipolarli anostro piacimento. 20. Per elemento - taghttp://api.jquery.com/element-selector/

DIV1
DIV2

SPAN 21. .each()Il metodo each() Molto importante, lapensato per eseguire parola chiave this facicli. riferimento ogni voltaQuando viene ad un elementochiamato scandisce gli diverso del cicloelementi DOM chefanno partedelloggetto jQuery. 22. Per IDhttp://api.jquery.com/id-selector/

DIV1
DIV2

SPAN 23. Per className http://api.jquery.com/class-selector/

DIV1
DIV2

SPAN 24. Per Attributo [name]Has Attribute Selector [name]Selects elements that have the specified attribute, with any value.

noid
withid
hasanid
nope

25. Per attributo [name|="value"]Attribute Contains Prefix Selector [name|="value"]Selects elements that have the specified attribute with a value either equal to a givenstring or starting with that string followed by a hyphen (-).SometextSomeothertextwillnotbeoutlined 26. Per attributo [name*="value"]Attribute Contains Selector [name*="value"]Selects elements that have the specified attribute with avalue containing the a given substring. 27. Per attributo [name~="value"]Attribute Contains Word Selector [name~="value"]Selects elements that have the specified attribute with a valuecontaining a given word, delimited by spaces. 28. Per Attributo [name$="value"]Attribute Ends With Selector [name$="value"]Selects elements that have the specified attribute with avalue ending exactly with a given string. The comparison iscase sensitive. 29. Per Attributo [name="value"]Attribute Equals Selector [name="value"]Selects elements that have the specified attribute with a value exactly equal to acertain value.name?value?value? 30. Per attributo [name!="value"]Attribute Not Equal Selector [name!="value"]Select elements that either dont have the specified attribute, or do have thespecified attribute but not with a certain value.nameisnewsletternonamenameisaccept 31. Per Attributo [name^="value"]Attribute Starts With Selector [name^="value"]Selects elements that have the specified attribute with avalue beginning exactly with a given string. 32. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cyphermail:[email protected]