jQuery - 4 | WebMaster & WebDesigner

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.

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() • .mousedown()
• .dblclick() • .mouseenter()
• .focusin() • .mouseleave()
• .focusout() • .mousemove()
• .hover() • .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
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
• .children()
• .eq() • .closest()
.find()
• .filter() •
• .next()
• .first() .nextAll()
•
• .has() • .nextUntil()
• .parent()
• .is()
• .parents()
• .last() • .parentsUntil()
• .map() • .prev()
• .prevAll()
• .not()
• .prevUntil()
• .slice() • .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() <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

DOM Insertion, Inside [2]
.appendTo() <h2>Greetings</h2>
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.

DOM Insertion, Inside [3]
<h2>Greetings</h2>
<div class="inner">Hello</div> • .prepend()
<div class="inner">Goodbye</div>
</div>
• .prependTo()
$('.inner').prepend('<p>Test</p>');
$('<p>Test</p>').prependTo('.inner');

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"
/>');

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>');

Removal, Replacement
• .detach() • .replaceAll()
• .empty() • .replaceWith()
• .remove()
• .unwrap()

Copying
• .clone()
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>

$('.hello').clone().appendTo('.goodbye');

Domande?

Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me

jQuery - 4 | WebMaster & WebDesigner

More Related Content

Similar to jQuery - 4 | WebMaster & WebDesigner (20)

More from Matteo Magni (20)

jQuery - 4 | WebMaster & WebDesigner