jQuery - 4 | WebMaster & WebDesigner

  • 447 views
Uploaded on

Quarta lezione del modulo jQuery del corso per WebMaster & WebDesigner

Quarta lezione del modulo jQuery del corso per WebMaster & WebDesigner

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
447
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
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 e I metodi hanno una nomenclatura molto simile agli eventi che giàdallutente. 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 tipo la 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() • .mousedown()• .dblclick() • .mouseenter()• .focusin() • .mouseleave()• .focusout() • .mousemove()• .hover() • .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 sono statisostituiti 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 • .children()• .eq() • .closest() .find()• .filter() • • .next()• .first() .nextAll() •• .has() • .nextUntil() • .parent()• .is() • .parents()• .last() • .parentsUntil()• .map() • .prev() • .prevAll()• .not() • .prevUntil()• .slice() • .siblings()
  • 16. Manipolare il DOM Al fine di raggiungere i nostri obbiettivi spesso serve intervenire sul DOM, andando ad aggiungere, rimuovere o modificare elementi.
  • 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. 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. 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. 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. 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. Removal, Replacement• .detach() • .replaceAll()• .empty() • .replaceWith()• .remove()• .unwrap()
  • 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://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me