Vinculando eventos em jQuery

Praticamente todo evento JavaScript tem um método jQuery correspondente. Por exemplo, um clique em elementos pode ser detectado assim: $(seletor).click(função).

Vamos considerar o seguinte código HTML:

html<ul>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
</ul>

Para ele, está definido o CSS:

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

Vamos fazer com que ao clicar em qualquer li seja exibido um ponto de exclamação. Clique nos itens da lista:

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

Dentro da função vinculada, está disponível this, referindo-se ao elemento no qual o evento ocorreu (no nosso caso, o li que foi clicado). Este this pode ser usado no estilo JavaScript, por exemplo, this.innerHTML ou no estilo jQuery - para isso, este this deve ser envolvido em $, assim: $(this).

Vamos pegar o código HTML:

html<ul>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
</ul>

Para este código, estão definidos os seguintes estilos CSS:

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

Vamos fazer com que ao clicar em um li seja adicionado um '!' ao seu final. Para verificar o funcionamento, clique nos itens da lista:

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