Vinculación de eventos en jQuery

Prácticamente cada evento de JavaScript tiene correspondencia con su método jQuery. Por ejemplo, el clic en elementos se puede capturar así: $(selector).click(función).

Consideremos el siguiente código HTML:

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

Para él está escrito el CSS:

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

Hagamos que al hacer clic en cualquier li se muestre un signo de exclamación. Haga clic en los elementos de la lista:

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

Dentro de la función vinculada está disponible this, que hace referencia a ese elemento en el que ocurrió el evento (en nuestro caso, el li en el que se hizo clic). Este this se puede usar al estilo JavaScript, por ejemplo, this.innerHTML o al estilo jQuery - para ello este this debe envolverse en $, así: $(this).

Tomemos el código HTML:

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

A este código se le han aplicado los siguientes estilos CSS:

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

Hagamos que al hacer clic en li se le añada al final un '!'. Para comprobar el funcionamiento, haga clic en los elementos de la lista:

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