2) Alem disso tem uma grande capacidade de manipular elementos de uma página com pouco código.
Exemplos:
Deixar um elemento invisível:

  $("#id_do_meu_elemento").hide();

Manipular o css de um elemento:

  $("#id_do_meu_elemento").css("background-color","Blue");

Manipular o conteúdo de um elemento:

  $(p).append("inserindo esse conteúdo em todos os parágrafos");

A lista e exemplos que poderia exibir aqui é enorme, mas esse não é o foco no momento

3) Possibilita uma grande reutilização de código através de plugins.
Exemplo: podemos criar um código para validar campos numéricos, uma função chamada “validaNumeros()”.
Agora vamos supor que você possua um formulário com 8 campos do tipo numérico, ao invés de você replicar esse código no evento “onkeypress” de cada input do seu formulário, você pode transformar esse função em um plugin e no carregar da página, você simplesmente escreve o seguinte código:

  $(".campo_numerico").validaNumeros();
 //.campo_numerico seria a classe css atribuída aos inputs.

4)Atualmente existem uma quantidade enorme de plugins, disponíveis na internet que nos facilita em N tipos de tarefas e que economizam nosso tempo de escrever linhas e linhas de código javascript, muita das vezes para simplesmente fazer uma validação de formulário .

5) jQuery tem um ótimo suporte a Ajax.
Exemplos:
Carregar o conteudo de uma url em um determinado div.

  $("#id_do_meu_div").load("pagina_que_eu_quero_carregar.html");

Pegar um determinando valor via ajax e atribuir esse valor para um campo:

  $.get("retornavalor.php",function(valor) {
    $("#id_do_meu_imput").val(valor);
  });

Também temos suporte a JSON

  $.getJSON("retornavalor.php",function(objeto) {
    $("#id_do_meu_imput").val(objeto.valor);
  });

Nesse post, eu listei cinco motivos, mas tenho certeza que quando você começar a utilizar jQuery, nos seus projetos, você vai encontrar muito mais!

Pretendo escrever mais artigos, detalhando determinadas funcionalidades do jQuery , mas atualmente já existe bastante conteúdo disponivel sobre o assunto, no próprio site oficial temos uma documentação bem legal com bastante exemplos: http://docs.jquery.com.

Até a próxima!

Iuri Menescal

• Brazilian-rails
• Jquery
• Ruby-json

Modo de preparo:

Coloque uma porção generosa de utilitários que facilitam o dia a dia de nos Brasileiros em seu caldeirão Rails:

> gem --install brazilian-rails

“O gem brazilian-rails possui vários ingredientes para temperar a sua aplicação, mas no momento vamos nos concentrar na busca por cep. Você pode saber mais sobre o brazilian-rails no site da improve It.”

Em seguida acrescente uma medida de ruby-json:

> gem –install ruby-json

“O ruby-json é um utilitário para serializar as suas classes ruby para os padrões Json.”

Só para lembrar vamos utilizar Jquery também, mas isso já é um ingrediente padrão em qualquer receita Web sua, certo?
Não?? Como assim? Você ainda não utiliza JQuery? putz.. tsc.. tsc..
Se você ainda não usa, chegou a hora. http://jquery.com/ Instale na pasta /public/javascript na estrutura de diretórios do seu projeto Rails.

(Pretendo colocar alguns tutoriais de Jquery aqui no blog em breve ou nem tão breve assim rs.. “O blog é meu e eu post a hora que eu quiser hahahaa!”)

Bom, agora que temos todos os ingredientes necessários em seus devidos lugares, deixe eles cozinhando em quanto preparamos o nosso prato.

No controller, vamos criar um método para fazer a busca do cep e retornar o resultado para o cliente utilizando Json.
Você já tem o seu formulário pronto né? (model, view, controller)

Não??
**##%%!!
Você só quer moleza em? :p

Quer tudo na mão! ok ok vou fazer do zero, mas vê se presta atenção nessa porra e não vai só copiar e colar o código, pois é tão fácil que até comigo explicando você vai entender hehehe!

Vamos criar um controller:

 > script/generate controller enderecos

Em seguida edite o seu controller enderecos_controller.rb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#classe do utilitario para serializar as classes ruby para o padrão json
require 'json/objects'
 
  def localizar_endereco
      retorno = 1
      # Classe do brazilian-rails responsavél pela busca de endereco.
      @endereco = BuscaEndereco.por_cep params[:cep]
      endereco = @endereco.fetch(0)
      numero = @endereco.fetch(1)
      bairro = @endereco.fetch(2)
      estado = @endereco.fetch(3)
      cidade = @endereco.fetch(4)
     rescue
        retorno = 0
     ensure
        # preste atenção nesse bloco e veja como é dificil serializar um objeto JSon no Ruby
        # objeto = {:nome do atributo => valor do atributo}
        data = {:retorno => retorno, :endereco => endereco,
                :bairro => bairro, :cidade => cidade, :estado => estado}
    render :text => data.to_json  #aqui acontece a mágica!
  end

Vamos criar um formulário para testar a nosso busca:
Crie um arquivo /app/views/enderecos/index.html.erb e logo depois da tag “html” insira o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

  <!-- Arquivo do framework jquery -->
  <script src="/javascripts/jquery.js" type="text/javascript"></script>
  Busca de endereço por cep
<!-- Aqui vai o nosso código utilizando Jquery -->
<script type="text/javascript">
$(document).ready(function() {
 
 $("#btncep").click(function(){
    if ($.trim(endereco_cep.value) != "") { 
    <!-- Aqui é uma firula, para o usuário não achar que não esta acontecendo nada-->
      $("#lbcep").html(" Pesquisando cep...")
	<!-- função do JQuery que Recebe o objeto serializado via ajax. -->
        <!-- Ta vendo como o JQuery é foda? -->
      $.getJSON("/enderecos/localizar_endereco", { cep: $("#endereco_cep").val()},function(json){
      <!-- Atribuindo os valores para os componentes da página-->
	if (json.retorno == 1) {
	   $("#endereco_endereco").val(json.endereco);
	   $("#endereco_bairro").val(json.bairro);
	   $("#endereco_cidade").val(json.cidade);
	   $("#endereco_estado").val(json.estado);
	   $("#endereco_numero").focus();
	   } else {
	      alert("Cep não encontrado.");
	   }
	   $("#lbcep").html(" cep:")});
	} 
	else {
		alert("Informe um cep.");
	}
});
});
</script>

Agora vamos colocar o código do formulário no “body” da nossa página:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<body>
<form id="frmBuscaCep" >
  <fieldset>
    <legend>Endereço</legend>
    <table>
      <tr><td>
	<label for="endereco_cep" id="lbcep"> cep:</label><br />
	<input type="text" id="endereco_cep" name="endereco[cep]" size="12" />
	<a id="btncep" href="#"> Pesquisar Cep</a><span id="msgbuscacep"></span>
      </td></tr>
     <tr><td>
	<label for="endereco_endereco"> endereco:</label><br />
	<input type="text" id="endereco_endereco" name="endereco[endereco]" size="50" />
     </td><td>
	<label for="endereco_numero"> numero:</label><br />
	<input type="text" id="endereco_numero" name="endereco[numero]" size="10" />			  
     </td></tr>
   </table>	
   <table>	
     <tr><td>
	<label for="endereco_bairro"> bairro:</label><br />
	<input type="text" id="endereco_bairro" name="endereco[bairro]" size="20" />
     </td><td>
	<label for="endereco_cidade"> cidade:</label><br />
	<input type="text" id="endereco_cidade" name="endereco[cidade]" size="20" />
     </td><td>
	<label for="endereco_estado"> estado:</label><br />
	<input type="text" id="endereco_estado" name="endereco[estado]" size="5" />
     </td></tr>
   </table> 
 </fieldset>
</form>
</body>

Ufa!! terminamos
Agora é só iniciar o seu servidor:

 >> script/server 

e acessar o endereço: http://localhost:3000/enderecos
E ai funcionou?
…
…
..
Não?? como assim? vc acompanhou o tutorial todo?
#!**#$!!!
Eu falei para você não ficar só copiando e colando o código….

HAHHAAA!! brincadeira, ainda falta um pequeno detalhe
edite o arquivo: config/environment.rb

1
2
3
4
5

  if Rails::VERSION::STRING > '2.0.2'
    config.gem 'brazilian-rails'
  else
    require 'brazilian-rails'
  end

Agora sim é só testar!

Abraço!
Iuri