Your SlideShare is downloading. ×
0
JQuery [1] Matteo Magni
jQuery: The Write Less, Do More, JavaScript                   Library
jQuery
Cosè?jQuery è una libreria di funzioni (framework)javascript, cross-browser per le applicazioniweb, che si propone come ob...
Cosè:            Cosa fa:• Framework       • Document• Cross browser     traversing                  • Event handling     ...
Versioni            http://jquery.com/a)PRODUCTION (32KB, Minified and Gzipped)b)DEVELOPMENT (252KB, Uncompressed Code)   ...
ProductionPesa solo 32 kb perché è minificata.http://en.wikipedia.org/wiki/Minification_(programming)“processo di rimozion...
Development252 kb perché scritta in maniera leggibile alprogrammatore.Adatta per la fase di sviluppo, meno per laproduzion...
Integrare jQueryPer integrare jQuery nei nostri progetti bastaincludere il file js come javascript esterno.    <script src...
Content Delivery NetworkE possibile utilizzare jQuery anche da CDN.• CDN:Content Delivery Network  Rete per la consegna di...
CDN Vantaggi • Far risparmiare banda al   proprio server • Lutente avendola già   utilizzata protrebbe quindi   averla già...
Googlehttps://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.jsMicrosofthttp://ajax.aspnetcdn.com/ajax/jQuery/jquer...
ReleaseDa CDN possiamo vedere che jQuery èarrivato alla versione 1.8.2 e che quando lechiamiamo la libreria in quel mododo...
Come usiamo jQuery?          Il framework jQuery          definisce una          variabile jQuery la          quale contie...
Alias $jQuery.isNumeric(“­10”);Ma abbiamo anche a disposizione un alias come$ che rappresenta la variabile jQuery.$.isNume...
Aspettare il DOMFino ad ora dovevamo fare una cosa del genere per far partire lo script dopoil caricamento del documento.w...
Ready vs Loadil codice viene eseguito quando il DOM è pronto ma prima che le immaginied altri elementi grafici siano caric...
SelettoriAttraverso jQuerypossiamo selezionaretutti gli elementipresenti nel DOM,attraverso una sintassipiù semplice che c...
Per elemento - tag            http://api.jquery.com/element-selector/<div>DIV1</div><div>DIV2</div><span>SPAN</span><scrip...
.each()Il metodo each() è       Molto importante, lapensato per eseguire     parola chiave this facicli.                  ...
Per ID            http://api.jquery.com/id-selector/<div id=”pippo”>DIV1</div><div>DIV2</div><span>SPAN</span><script>divs...
Per className             http://api.jquery.com/class-selector/<div class=”pippo”>DIV1</div><div>DIV2</div><span class=”pi...
Per Attributo [name]Has Attribute Selector [name]Selects elements that have the specified attribute, with any value.<div>n...
Per attributo [name|="value"]Attribute Contains Prefix Selector [name|="value"]Selects elements that have the specified at...
Per attributo [name*="value"]Attribute Contains Selector [name*="value"]Selects elements that have the specified attribute...
Per attributo [name~="value"]Attribute Contains Word Selector [name~="value"]Selects elements that have the specified attr...
Per Attributo [name$="value"]Attribute Ends With Selector [name$="value"]Selects elements that have the specified attribut...
Per Attributo [name="value"]Attribute Equals Selector [name="value"]Selects elements that have the specified attribute wit...
Per attributo [name!="value"]Attribute Not Equal Selector [name!="value"]Select elements that either dont have the specifi...
Per Attributo [name^="value"]Attribute Starts With Selector [name^="value"]Selects elements that have the specified attrib...
Domande?                  Slide:     http://cypher.informazione.me/                  Code:https://github.com/inFormazione/...
Upcoming SlideShare
Loading in...5
×

jQuery - 1 | WebMaster & WebDesigner

229

Published on

Prima lezione del modulo jQuery per il corso di WebMaster & WebDesigner

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
229
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery - 1 | WebMaster & WebDesigner"

  1. 1. JQuery [1] Matteo Magni
  2. 2. jQuery: The Write Less, Do More, JavaScript Library
  3. 3. jQuery
  4. 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. 5. Cosè: Cosa fa:• Framework • Document• Cross browser traversing • Event handling • Animating • Ajax interactions
  6. 6. Versioni http://jquery.com/a)PRODUCTION (32KB, Minified and Gzipped)b)DEVELOPMENT (252KB, Uncompressed Code) Differenze?
  7. 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. 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. 9. Integrare jQueryPer integrare jQuery nei nostri progetti bastaincludere il file js come javascript esterno. <script src="jquery.js"></script>A quel punto tutte le funzionalità di jQuery cisaranno disponibili.
  10. 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. 11. CDN Vantaggi • Far risparmiare banda al proprio server • Lutente avendola già utilizzata protrebbe quindi averla già in cache nel browser
  12. 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<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  13. 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. 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. 15. Alias $jQuery.isNumeric(“­10”);Ma abbiamo anche a disposizione un alias come$ che rappresenta la variabile jQuery.$.isNumeric(“­10”);
  16. 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. 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. 18. SelettoriAttraverso jQuerypossiamo selezionaretutti gli elementipresenti nel DOM,attraverso una sintassipiù semplice che conJavascript, e poiandare a manipolarli anostro piacimento.
  19. 19. Per elemento - tag http://api.jquery.com/element-selector/<div>DIV1</div><div>DIV2</div><span>SPAN</span><script>divs = $("div");alert(divs);divs.each(function(index) {alert(index + :  + $(this).text());});</script>
  20. 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 “ciclo”elementi DOM chefanno partedelloggetto jQuery.
  21. 21. Per ID http://api.jquery.com/id-selector/<div id=”pippo”>DIV1</div><div>DIV2</div><span>SPAN</span><script>divs = $("#pippo");alert(divs.text());</script>
  22. 22. Per className http://api.jquery.com/class-selector/<div class=”pippo”>DIV1</div><div>DIV2</div><span class=”pippo”>SPAN</span><script>divs = $(".pippo");alert(divs.text());divs.each(function(index) {alert(index + :  + $(this).text());});</script>
  23. 23. Per Attributo [name]Has Attribute Selector [name]Selects elements that have the specified attribute, with any value.<div>no id</div>  <div id="hey">with id</div>  <div id="there">has an id</div>  <div>nope</div><script>    $(div[id]).each(function(index) {       alert(index + :  + $(this).text());    });</script>
  24. 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 (-).<body>  <a href="example.html" hreflang="en">Some text</a>   <a href="example.html" hreflang="en­UK">Some other text</a>  <a href="example.html" hreflang="english">will not be outlined</a><script>$(a[hreflang|="en"]).css(border,3px dotted green);</script>
  25. 25. Per attributo [name*="value"]Attribute Contains Selector [name*="value"]Selects elements that have the specified attribute with avalue containing the a given substring.<input name="man­news" /><input name="milkman" /><input name="letterman2" /><input name="newmilk" /><script>$(input[name*="man"]).val(has man in it!);</script>
  26. 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. <input name="man­news" />  <input name="milk man" />  <input name="letterman2" />  <input name="newmilk" /><script>$(input[name~="man"]).val(mr. man is in it!);</script>
  27. 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.<input name="newsletter" />  <input name="milkman" />  <input name="jobletter" /><script>$(input[name$="letter"]).val(a letter);</script>
  28. 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.      <input type="radio" name="newsletter" value="Hot Fuzz" />      <span>name?</span>      <input type="radio" name="newsletter" value="Cold Fusion" />      <span>value?</span>      <input type="radio" name="newsletter" value="Evil Plans" />      <span>value?</span><script>$(input[value="Hot Fuzz"]).next().text(" Hot Fuzz");</script>
  29. 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.   <input type="radio" name="newsletter" value="Hot Fuzz" />    <span>name is newsletter</span>    <input type="radio" value="Cold Fusion" />    <span>no name</span>    <input type="radio" name="accept" value="Evil Plans" />    <span>name is accept</span>  </div><script>$(input[name!="newsletter"]).next().append(<b>; not newsletter</b>);</script>
  30. 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.  <input name="newsletter" />  <input name="milkman" />  <input name="newsboy" /><script>$(input[name^="news"]).val(news here!);</script>
  31. 31. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×