jQuery - 4 | WebMaster & WebDesigner

  • 198 views
Uploaded on

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

Quarta lezione del modulo Jquery per il corso di 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
198
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
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