Download - jQuery - 4 | WebMaster & WebDesigner
JQuery [4]Matteo Magni
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.
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.
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');});
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");
});
Form Events
• .blur()
• .change()
• .focus()
• .select()
• .submit()
Keyboard Events
• .keydown()
• .keypress()
• .keyup()
Mouse Events
• .click()
• .dblclick()
• .focusin()
• .focusout()
• .hover()
• .mousedown()
• .mouseenter()
• .mouseleave()
• .mousemove()
• .mouseout()
• .mouseover()
• .mouseup()
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."');
});
bind() [2]
Il vantaggio è che possiamo passare più eventi
$('#foo').bind('click onmouseover', function() {
alert('User clicked or mouseover on "foo."');
});
unbind()
Il metodo unbind permette di rimuovere gli eventi precedentemente collegati.
//rimuovo gli eventi
$('#foo').unbind();
//specifico il tipo di evento
$('#foo').unbind('click');
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',)
Traversing
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').
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()
Manipolare il DOM
Al fine di raggiungere i nostri obbiettivi spesso serve intervenire sul DOM, andando ad aggiungere, rimuovere o modificare elementi.
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>');
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');
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()
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" />');
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>');
Removal, Replacement
• .detach()
• .empty()
• .remove()
• .unwrap()
• .replaceAll()
• .replaceWith()
Copying
• .clone()<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$('.hello').clone().appendTo('.goodbye');
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
