jquery - 1 | webmaster & webdesigner

Click here to load reader

Post on 28-Nov-2014

362 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

Prima lezione del modulo jQuery per il corso di 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. Versioni http://jquery.com/a)PRODUCTION (32KB, Minified and Gzipped)b)DEVELOPMENT (252KB, Uncompressed Code) Differenze?
  • 7. 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.
  • 8. 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
  • 9. Integrare jQueryPer integrare jQuery nei nostri progetti bastaincludere il file js come javascript esterno. A quel punto tutte le funzionalit di jQuery cisaranno disponibili.
  • 10. Content Delivery NetworkE possibile utilizzare jQuery anche da CDN. CDN:Content Delivery Network Rete per la consegna di contenuti, cio sistema distribuito di grande estensione che attraverso un alto numero di server, il quale consente di fornire contenuti agli utenti con maggior affidabilit.
  • 11. CDN Vantaggi Far risparmiare banda al proprio server Lutente avendola gi utilizzata protrebbe quindi averla gi in cache nel browser
  • 12. 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
  • 13. ReleaseDa CDN possiamo vedere che jQuery arrivato alla versione 1.8.2 e che quando lechiamiamo la libreria in quel mododobbiamo ricordaci quale vogliamo.
  • 14. Come usiamo jQuery? Il framework jQuery definisce una variabile jQuery la quale contiene un oggetto che ha tutti i metodi e le propriet implementate dalla libreria.
  • 15. Alias $jQuery.isNumeric(10);Ma abbiamo anche a disposizione un alias come$ che rappresenta la variabile jQuery.$.isNumeric(10);
  • 16. 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");});
  • 17. 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");});
  • 18. SelettoriAttraverso jQuerypossiamo selezionaretutti gli elementipresenti nel DOM,attraverso una sintassipi semplice che conJavascript, e poiandare a manipolarli anostro piacimento.
  • 19. Per elemento - tag http://api.jquery.com/element-selector/
    DIV1
    DIV2
    SPAN
  • 20. .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.
  • 21. Per ID http://api.jquery.com/id-selector/
    DIV1
    DIV2
    SPAN
  • 22. Per className http://api.jquery.com/class-selector/
    DIV1
    DIV2
    SPAN
  • 23. Per Attributo [name]Has Attribute Selector [name]Selects elements that have the specified attribute, with any value.
    noid
    withid
    hasanid
    nope
  • 24. 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
  • 25. Per attributo [name*="value"]Attribute Contains Selector [name*="value"]Selects elements that have the specified attribute with avalue containing the a given substring.
  • 26. Per attributo [name~="value"]Attribute Contains Word Selector [name~="value"]Selects elements that have the specified attribute with avalue containing a given word, delimited by spaces.
  • 27. 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.
  • 28. 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?
  • 29. Per attributo [name!="value"]Attribute Not Equal Selector [name!="value"]Select elements that either dont have the specified attribute, or do have the specifiedattribute but not with a certain value.nameisnewsletternonamenameisaccept

30. 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. 31. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: [email protected]