jQuery - 4 | WebMaster & WebDesigner

577 views

Published on

Quarta lezione del modulo jQuery del corso per 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
577
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery - 4 | WebMaster & WebDesigner

  1. 1. JQuery [4] Matteo Magni
  2. 2. EventijQuery ovviamente cimette a disposizioneuna serie di semplicimetodi per gestire glieventi generati dalbrowser e I metodi hanno una nomenclatura molto simile agli eventi che giàdallutente. conosciamo.
  3. 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 tipo la mancanza di una immagine.
  4. 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. 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. 6. Form Events• .blur()• .change()• .focus()• .select()• .submit()
  7. 7. Keyboard Events• .keydown()• .keypress()• .keyup()
  8. 8. Mouse Events• .click() • .mousedown()• .dblclick() • .mouseenter()• .focusin() • .mouseleave()• .focusout() • .mousemove()• .hover() • .mouseout() • .mouseover() • .mouseup()
  9. 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. 10. bind() [2]Il vantaggio è che possiamo passare piùeventi$(#foo).bind(click onmouseover, function() {  alert(User clicked or mouseover on "foo.");});
  11. 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. 12. on() e off()Dalla versione 1.7 i metodi bind e unbind sono statisostituiti dal metodo on e off.$("#pippo").on("click", function(event){   alert($(this).text());});$("#pippo").off()$("#pippo").off(click,)
  13. 13. Traversing
  14. 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. 15. Metodi di traversing • .children()• .eq() • .closest() .find()• .filter() • • .next()• .first() .nextAll() •• .has() • .nextUntil() • .parent()• .is() • .parents()• .last() • .parentsUntil()• .map() • .prev() • .prevAll()• .not() • .prevUntil()• .slice() • .siblings()
  16. 16. Manipolare il DOM Al fine di raggiungere i nostri obbiettivi spesso serve intervenire sul DOM, andando ad aggiungere, rimuovere o modificare elementi.
  17. 17. DOM Insertion, Inside.append() <h2>Greetings</h2> <div class="container">Inserisce il   <div class="inner">Hello</div>contenuto passato   <div class="inner">Goodbye</div> </div>come parametroalla fine degli $(.inner).append(<p>Test</p>);elementi passaticome insieme
  18. 18. DOM Insertion, Inside [2].appendTo() <h2>Greetings</h2> <div class="container">Inserisce ogni   <div class="inner">Hello</div>elemento   <div  class="inner">Goodbye</div>individuato nella </div>selezione a tuttigli elementi $(<p>Test</p>).appendTo(.inner);passati comeparametro.
  19. 19. DOM Insertion, Inside [3]<h2>Greetings</h2><div class="container">  <div class="inner">Hello</div> • .prepend()  <div class="inner">Goodbye</div></div> • .prependTo()$(.inner).prepend(<p>Test</p>);$(<p>Test</p>).prependTo(.inner);
  20. 20. DOM Insertion, Around• .wrap() <div class="container">   <div class="inner">Hello</div>• .wrapAll()   <div class="inner">Goodbye</div> </div>• .wrapInner() $(.inner).wrap(<div class="new"  />); $(.inner).wrapAll(<div  class="new" />); $(.inner).wrapInner(<div class="new"  />);
  21. 21. DOM Insertion, Outside• .after() <div class="container">   <h2>Greetings</h2>• .before()   <div class="inner">Hello</div>• .insertAfter()   <div  class="inner">Goodbye</div>• .insertBefore() </div> $(.inner).after(<p>Test</p>);
  22. 22. Removal, Replacement• .detach() • .replaceAll()• .empty() • .replaceWith()• .remove()• .unwrap()
  23. 23. Copying• .clone()<div class="container">  <div class="hello">Hello</div>  <div class="goodbye">Goodbye</div></div>$(.hello).clone().appendTo(.goodbye);
  24. 24. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×