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