Gestione degli eventi in jQuery

Praticamente ogni evento JavaScript ha un corrispondente metodo in jQuery. Ad esempio, il click sugli elementi può essere rilevato così: $(selettore).click(funzione).

Consideriamo il seguente codice HTML:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Per cui è definito il CSS:

cssli {
  width: 100px;
  cursor: pointer;
}

Facciamo in modo che al click su qualsiasi li venga visualizzato un punto esclamativo. Clicca sugli elementi della lista:

javascript$('li').click(function() {
  alert('!');
});

All'interno della funzione associata è disponibile this, che fa riferimento all'elemento in cui è avvenuto l'evento (nel nostro caso il li su cui è stato cliccato). Questo this può essere usato nello stile JavaScript, ad esempio this.innerHTML o nello stile jQuery - per farlo questo this deve essere avvolto in $, in questo modo: $(this).

Prendiamo il codice HTML:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

A questo codice sono associati i seguenti stili CSS:

cssli {
  width: 100px;
}
li:hover {
  color: red;
  cursor: pointer;
}

Facciamo in modo che al click su li venga aggiunto alla fine un '!'. Per verificare il funzionamento, clicca sugli elementi della lista:

javascript$('li').click(function() {
  $(this).append('!');
});