jQuery - 4 | WebMaster & WebDesigner

448 views

Published on

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
448
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
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 edallutente.I metodi hanno una nomenclaturamolto simile agli eventi che già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 tipola 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()• .dblclick()• .focusin()• .focusout()• .hover()• .mousedown()• .mouseenter()• .mouseleave()• .mousemove()• .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 sonostati sostituiti 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• .eq()• .filter()• .first()• .has()• .is()• .last()• .map()• .not()• .slice()• .children()• .closest()• .find()• .next()• .nextAll()• .nextUntil()• .parent()• .parents()• .parentsUntil()• .prev()• .prevAll()• .prevUntil()• .siblings()
  16. 16. Manipolare il DOMAl fine diraggiungere i nostriobbiettivi spessoserve intervenire sulDOM, andando adaggiungere,rimuovere omodificare elementi.
  17. 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. 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. 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. 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. 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. 22. Removal, Replacement• .detach()• .empty()• .remove()• .unwrap()• .replaceAll()• .replaceWith()
  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://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me

×