Your SlideShare is downloading. ×

jQuery - 4 | WebMaster & WebDesigner

231

Published on

Quarta lezione del modulo Jquery per il corso di WebMaster & WebDesigner

Quarta lezione del modulo Jquery per il corso di WebMaster & WebDesigner

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

  • Be the first to like this

No Downloads
Views
Total Views
231
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JQuery [4]Matteo Magni
  • 2. EventijQuery ovviamente cimette a disposizioneuna serie di semplicimetodi per gestire glieventi generati dalbrowser edallutente.I metodi hanno una nomenclaturamolto simile agli eventi che giàconosciamo.
  • 3. Browser Events• .error()<img src=”noimage.ppp” alt="Book" id="book" />$(#book)  .error(function() {    alert(Handler for .error() called.)  })  .attr("src", "missing.png");ci permette di gestire eventuali errori tipola mancanza di una immagine.
  • 4. Browser Events [2]• .resize()$(window).resize(function() {  alert($(window).width());});Gestisce se qualcuno modifica le dimensioni della finestra.• .scroll()<div id="target" style="overflow: scroll; width: 200px; height: 100px;">  Lorem ipsum dolor sit amet, consectetur adipisicing elit,  sed do eiusmod tempor incididunt ut labore et dolore magna</div>$(#target).scroll(function() {alert(attento);});
  • 5. Event Loadingil 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"); });
  • 6. Form Events• .blur()• .change()• .focus()• .select()• .submit()
  • 7. Keyboard Events• .keydown()• .keypress()• .keyup()
  • 8. Mouse Events• .click()• .dblclick()• .focusin()• .focusout()• .hover()• .mousedown()• .mouseenter()• .mouseleave()• .mousemove()• .mouseout()• .mouseover()• .mouseup()
  • 9. bind()Tutti i metodi semplificati per gestire glieventi utilizzano il metodo bind() al quale vapassato il nome dellevento.$(#foo).bind(click, function() {  alert(User clicked on "foo.");});
  • 10. bind() [2]Il vantaggio è che possiamo passare piùeventi$(#foo).bind(click onmouseover, function() {  alert(User clicked or mouseover on "foo.");});
  • 11. unbind()Il metodo unbind permette di rimuovere glieventi precedentemente collegati.//rimuovo gli eventi$(#foo).unbind();//specifico il tipo di evento$(#foo).unbind(click);
  • 12. on() e off()Dalla versione 1.7 i metodi bind e unbind sonostati sostituiti dal metodo on e off.$("#pippo").on("click", function(event){   alert($(this).text());});$("#pippo").off()$("#pippo").off(click,)
  • 13. Traversing
  • 14. TraversingAbbiamo visto i selettori e i filtri ma:Selector context is implemented with the.find() method; therefore, $(li.item-ii).find(li)is equivalent to $(li, li.item-ii).
  • 15. Metodi di traversing• .eq()• .filter()• .first()• .has()• .is()• .last()• .map()• .not()• .slice()• .children()• .closest()• .find()• .next()• .nextAll()• .nextUntil()• .parent()• .parents()• .parentsUntil()• .prev()• .prevAll()• .prevUntil()• .siblings()
  • 16. Manipolare il DOMAl fine diraggiungere i nostriobbiettivi spessoserve intervenire sulDOM, andando adaggiungere,rimuovere omodificare elementi.
  • 17. DOM Insertion, Inside.append()Inserisce ilcontenuto passatocome parametroalla fine deglielementi passaticome insieme<h2>Greetings</h2><div class="container">  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div>$(.inner).append(<p>Test</p>);
  • 18. DOM Insertion, Inside [2].appendTo()Inserisce ognielementoindividuato nellaselezione a tuttigli elementipassati comeparametro.<h2>Greetings</h2><div class="container">  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div>$(<p>Test</p>).appendTo(.inner);
  • 19. DOM Insertion, Inside [3]<h2>Greetings</h2><div class="container">  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div>$(.inner).prepend(<p>Test</p>);$(<p>Test</p>).prependTo(.inner);• .prepend()• .prependTo()
  • 20. DOM Insertion, Around• .wrap()• .wrapAll()• .wrapInner()<div class="container">  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div>$(.inner).wrap(<div class="new" />);$(.inner).wrapAll(<div class="new" />);$(.inner).wrapInner(<div class="new" />);
  • 21. DOM Insertion, Outside• .after()• .before()• .insertAfter()• .insertBefore()<div class="container">  <h2>Greetings</h2>  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div>$(.inner).after(<p>Test</p>);
  • 22. Removal, Replacement• .detach()• .empty()• .remove()• .unwrap()• .replaceAll()• .replaceWith()
  • 23. Copying• .clone()<div class="container">  <div class="hello">Hello</div>  <div class="goodbye">Goodbye</div></div>$(.hello).clone().appendTo(.goodbye);
  • 24. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me

×