Quarta lezione del modulo jQuery del corso per WebMaster & WebDesigner

1. JQuery [4]
Matteo Magni

2. Eventi
jQuery ovviamente ci
mette a disposizione
una serie di semplici
metodi per gestire gli
eventi generati dal
browser e I metodi hanno una nomenclatura
molto simile agli eventi che già
dall'utente. 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 Loading
il codice viene eseguito quando il DOM è pronto ma prima che le immagini
ed 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 gli
eventi utilizzano il metodo bind() al quale va
passato il nome dell'evento.
$('#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 gli
eventi 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 stati
sostituiti dal metodo on e off.
$("#pippo").on("click", function(event){
alert($(this).text());
});
$("#pippo").off()
$("#pippo").off('click',)

13. Traversing

14. Traversing
Abbiamo 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 parametro
alla fine degli $('.inner').append('<p>Test</p>');
elementi passati
come 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 tutti
gli elementi $('<p>Test</p>').appendTo('.inner');
passati come
parametro.

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