Apenas para deixar claro de uma vez por todas.

E tentar diminuir a quantidade de scripts parecidos com isso aqui:

<script type="text/javascript"> type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.paragrafo span').hide();
  $('.botao').click(function(){
    $('.botao').val('carregando..');
    window.setTimeout(function(){
      $('.botao').fadeOut();

      $('.paragrafo span').show();
    }, 1000 );
  });
});
</script>

<p class="paragrafo">
  <input type="button" name="botao" value="Click Me" class="botao" />
  <span>Lero Lero</span>
</p>

Bem simples:

No evento onclick do elemento com a class=”botao”, disparo uma function, que vai trocar o atributo .value dos elementos com a class botão, pela string: ‘carregando’, e depois de 1 segundo(por causa do atrazo do setTimeout(), esses elementos sumirão da tela, com um efeito de fadeOut();

Encontrei ótimos textos sobre o this:

http://www.fredericoemidio.com/post/entendendo-javascript-this.aspx

Porém, o meu intuito é escrever algo mais básico, bem mais nível iniciante mesmo.

Já que um texto escrito neste nível: http://imasters.com.br/artigo/20785/javascript/compreendendo-a-palavra-chave-this-do-javascript não elucida muita coisa, se vc já não tiver um nível considerável de conhecimento.

Bom, voltando.

O script apresentado resolve a questão. Faz oque foi escrito para fazer, mas, e se tivéssemos mais botões?

<p class="paragrafo">
  <input type="button" name="botao" value="Click Me" class="botao" />
  <span>Lero Lero</span>
</p>
<p class="paragrafo">
  <input type="button" name="botao" value="Click Me" class="botao" />
  <span>Lero Lero</span>
</p>
<p class="paragrafo">
  <input type="button" name="botao" value="Click Me" class="botao" />
  <span>Lero Lero</span>
</p>

Então, a ação em 1 deles, dispararia o efeito em todos os outros.

Não é oque queremos. E precisamos entender o motivo disso acontecer.

No caso, o seletor jQuery: $(‘.botao’), nos retorna um array de objetos que possuem a class=”botao”.

E como estamos trabalhando diretamente e sempre com esse array, cada trecho do script, está sendo aplicado a todos os elementos do conjunto, e não apenas ao clicado, como queríamos.

Lhes apresento(ou não), o objeto this. Olhe para essa palavra chave como um ‘apontador’, um ‘ponteiro’, que representa o objeto atual, ou seja, o elemento com o qual estamos trabalhando nesse exato momento.

$( this ).val('carregando..');

Maravilha! Agora, o nosso carregando.. só será exibido no botão em que clicarmos.

Continuando..

var $this = $( this );
    $this.val('carregando..');
    window.setTimeout(function(){
      $this.fadeOut();

Okay, agora só some o botão que clicamos.. porém e o span ?

continua aparecendo todos os 3, mesmo que só cliquemos em 1 botão.

Nesse caso, vamos usar o nosso ponteiro this, para apartir dele, buscarmos o nosso texto:

$this.next('span').show();

E então, uma outra forma, navegando pelo nosso DOM:

$this.parent('p').find('span').show();

Isso é oque todo programador javascript precisa saber de início sobre o this.