Desmistificando o jQuery (Parte 2)

Quem leu a primeira parte com certeza não pensa mais que jQuery é um bicho de sete cabeças, mas talvez pense que ainda tem umas três.  :o)

E é isso que espero resolver neste segundo post sobre jQuery, atacando agora as funções que estão disponíveis a partir da obtenção de elementos.

Conforme foi apresentado no primeiro post, há diversas formas de se obter os elementos de uma página HTML. Após esta primeira etapa, o jQuery oferece uma vasta diversidade de funções para praticamente qualquer necessidade, por isso vou focar mais nas que para mim foram mais úteis.

Funções com jQuery

O primeiro ponto mais importante sobre as chamadas de funções jQuery é onde colocá-las.

Considerando que o código jQuery muito provavelmente trabalhará com elementos da sua página HTML, é essencial que os comandos sejam chamados após a renderização completa da página, do contrário o comando de busca de um determinado elemento pode retornar um erro undefined indicando que não encontrou o elemento na tela.

O jQuery oferece uma função dentro da qual é altamente recomendado que você insira os seus comandos para evitar este problema:

 
$(document).ready(function(){
      // Aqui você insere seu código sem medo
}
 

A estrutura acima pode ser simplificada com o mesmo efeito conforme abaixo:

 
$(function(){
      // Aqui você insere seu código sem medo
}

Então, vamos a alguns exemplos de como utilizar as funções oferecidas pelo jQuery:

 
$("#div_principal").width(400).height(300);
 

A linha acima efetua três operações: 1) Busca o elemento cujo ID é "div_principal", 2) Define seu width em 400, e 3) sobre o elemento com o width já alterado efetua a alteração do height para 300. Tudo em uma única linha.

Podemos ainda adicionar um texto e um efeito:

 
$("#div_principal").width(400).height(300).text('Texto do meu div').fadeIn(1000);
 

Ainda em uma única linha! Estes dois exemplos mostraram como o jQuery oferece a possibilidade de fazer uma canal de chamadas (chaining) sendo que a função chamada no elemento retorna o próprio elemento já alterado, de forma que uma outra função pode ser chamada na sequência e assim por diante.

Outra "mágica" do jQuery é que uma função pode ser chamada sobre vários elementos da mesma forma, sem necessidade de um laço de execução para chamá-la em cada elemento:

 
$("div").width(400);
 

A linha acima obtém todos os elementos div da tela e altera o width de cada um para 400.

Editando a estrutura do HTML

Para alterar e adicionar HTML a um determinado item, é possível utilizar as seguintes formas:

Substituindo o conteúdo do div:

$("div").html('Parágrafo criado dinamicamente');  
 

Acrescentando ao final do conteúdo do div:

 
$("div").append('Parágrafo criado dinamicamente');
 

Acrescentando ao início do conteúdo do div:

 
$("div").prepend('Parágrafo criado dinamicamente');
  

Para adicionar HTML antes ou depois de determinado(s) item(ns):

Adicionando span indicando erro após todos os elementos input que possuem a classe campo-obrigatorio:

 
$("input.campo-obrigatorio").after('Campo obrigatório!');
 

Da mesma forma existe a função before() para adicionar algo antes de determinado item.


Para remover ou substituir itens na tela existem as função remove() e replaceWith():

Removendo o elemento do tipo div que possui a classe mensagem:

 
$("div.mensagem").remove();
 

Substituindo o elemento de ID label_criar por um novo parágrafo:

 
$("#label_criar").replaceWith('Atualizar');
 

Editando CSS

Para editar as classes CSS dos elementos usa-se as seguintes funções:


Buscando todos os elementos do tipo input e adicionando a classe erro:

 
$("input").addClass('erro');
 

Buscando todos os elementos do tipo input que possuem a classe erro e removendo esta classe:

 
$("input.erro").removeClass('erro'); 
 

Para editar propriedades CSS:


Buscando todos os elementos do tipo input que possuem a classe erro e definindo a cor da borda como vermelho:

 
$("input.erro").css('border-color','#FF0000');
 

Omitindo o segundo parâmetro, o comando vira um getter, em vez de um setter:

 
var corBorda = $("input.erro").css('border-color');
 

Editando atributos

Muito similar à função css() existe a função attr() que é mais versátil e permite você alterar (ou guardar em variável) qualquer atributo nos elementos que desejar:


Buscando o elemento cujo id é nome e alterando o atributo name para 'nome':

 
$("#nome").attr('name','nome');
 

Buscando o elemento cujo id é nome, recuperando o valor do atributo name e armazenando na variável nomeCampo:

 
var nomeCampo = $("#nome").attr('name');
 

Também é possível remover um atributo de determinado elemento:

Buscando todos os elementos do tipo a e removendo o atributo href:

 
$("a").removeAttr('href');
 

Adicionando grupo de alterações 

Se você quiser adicionar um grupo de alterações a determinados elementos ou talvez um algoritmo mais complexo, a forma simples apresentada até aqui pode não servir. Nestes casos, você provavelmente desejará construir a própria função com todo o comportamento desejado.

 
$("p").each(function(){
      ...
      var texto = $(this).text();
      ...
      ...
});
 

Esse código acima apresenta alguns conceitos bem interessantes. A função each() recebe uma função anônima dentro da qual você escreve o código que deseja executar em cima de cada elemento retornado pela busca $("p"). E dentro da sua função anônima, o comando $(this) do jQuery fornece uma referência para o elemento da pesquisa que está sendo iterado no momento.

Adicionando eventos a sua página 

Essa talvez seja a parte mais interessante, quando a sua página ganha realmente um dinamismo especial através de algumas funções que o jQuery oferece:

 
$(".botao").click(function(){
      alert('O botão foi clicado!!');
});
 

Da mesma forma o jQuery oferece outras funções:


Evento para duplo clique:

 
$(".botao").dblclick(function(){...});
 

Evento para clique quando o botão do mouse foi pressionado:

 
$(".botao").mouseDown(function(){...});
 

Evento para clique quando o botão do mouse foi liberado:

 
$(".botao").mouseUp(function(){...}); 
 

Evento para quando o cursor do mouse passou sobre o elemento:

 
$("div").mouseOver(function(){...});
 

Evento para quando o cursor do mouse sai de sobre o elemento:

 
$("div").mouseOut(function(){...}); 
 

Evento para quando o cursor do mouse se moveu dentro do espaço do elemento:

 
$("div").mouseMove(function(){...});
 

Bom, acredito que as funções mais comuns de se utilizar foram apresentadas. Também, conforme escrevia, percebi que o post foi ficando extenso e aí já fica mais parecido com livro do que post, e foge à finalidade.

Como mencionei no início do primeiro post, minha expectativa é de que, neste ponto, jQuery não seja mais um bicho-de-sete-cabeças para ninguém!

A maioria dos exemplos apresentados aqui foi baseada na abordagem deste livro. Mas para um conteúdo ainda mais detalhado e igualmente muito bem escrito recomendo este outro.

Também está disponível a API oficial que detalha todas as funções oferecidas pelo jQuery.

Se, ao final, você achou que algum detalhe igualmente essencial seria pertinente a este post, deixe seu comentário e considerarei! 

Até a próxima!