jquery - 4 | webmaster & webdesigner

Click here to load reader

Post on 28-Nov-2014

418 views

Category:

Technology

3 download

Embed Size (px)

DESCRIPTION

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

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 giconosciamo.
  • 3. Browser Events .error()$(#book).error(function(){alert(Handlerfor.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()
    Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagna
    $(#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(Userclickedon"foo.");});
  • 10. bind() [2]Il vantaggio che possiamo passare pieventi$(#foo).bind(clickonmouseover,function(){alert(Userclickedormouseoveron"foo.");});
  • 11. unbind()Il metodo unbind permette di rimuovere glieventi precedentemente collegati.//rimuovoglieventi$(#foo).unbind();//specificoiltipodievento$(#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 insiemeGreetings
    Hello
    Goodbye
    $(.inner).append(

    Test

    );
  • 18. DOM Insertion, Inside [2].appendTo()Inserisce ognielementoindividuato nellaselezione a tuttigli elementipassati comeparametro.Greetings
    Hello
    Goodbye
    $(

    Test

    ).appendTo(.inner);
  • 19. DOM Insertion, Inside [3]Greetings
    Hello
    Goodbye
    $(.inner).prepend(

    Test

    );$(

    Test

    ).prependTo(.inner); .prepend() .prependTo()
  • 20. DOM Insertion, Around .wrap() .wrapAll() .wrapInner()
    Hello
    Goodbye
    $(.inner).wrap();$(.inner).wrapAll();$(.inner).wrapInner();
  • 21. DOM Insertion, Outside .after() .before() .insertAfter() .insertBefore()
    Greetings
    Hello
    Goodbye
    $(.inner).after(

    Test

    );
  • 22. Removal, Replacement .detach() .empty() .remove() .unwrap() .replaceAll() .replaceWith()
  • 23. Copying .clone()
    Hello
    Goodbye
    $(.hello).clone().appendTo(.goodbye);
  • 24. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me