2. Eventi
jQuery ovviamente ci
mette a disposizione
una serie di semplici
metodi per gestire gli
eventi generati dal
browser e
dall'utente.
I metodi hanno una nomenclatura
molto simile agli eventi che già
conosciamo.
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");
});
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',)
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').
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()
Inserisce il
contenuto passato
come parametro
alla fine degli
elementi passati
come 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 ogni
elemento
individuato nella
selezione a tutti
gli elementi
passati come
parametro.
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div
class="inner">Goodbye</div>
</div>
$('<p>Test</p>').appendTo('.inner');