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:

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

Para ele, está definido o CSS:

li {
	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:

$('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:

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

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

li {
	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:

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

Faça com que ao clicar em cada li seja adicionado um '?' no seu início.

Dados parágrafos. Faça com que ao clicar em cada parágrafo seja exibido na tela o seu conteúdo.

Dados parágrafos com números. Ao clicar em um parágrafo, deve aparecer nele o quadrado do número que ele contém.