Webpoint

Este é o primeiro posto sobre o Jquery. Para quem nunca ouviu falar, este post será um ótimo ponto de partida para quem quer começar. Se já conhece, é uma demonstração de como fazer um efeito útil usando poucas linhas de script graças as capacidades desta framework.

Primeiro de tudo, por que Jquery?

Jquery é estável, eficaz e uma extensível framework. Com ela, você não precisa mais colocar eventos no HTML e pode separar de vez scripts da marcação. Se você fizer um menu com várias animações e efeitos do Jquery, a marcação do menu continuará sendo de ul e li simples. Se a framework for tirada em uma linha na inclusão do script externo na declaração no head do documento, a página não cairá em vários erros de script, mas sim irá permanecer sem suas funcionalidades.

Neste exemplo irei apresentar uma ferramenta muito útil. Quando o usuário está em tabelas, é conveniente ele se localizar e não ter que colocar o dedo na tela para tal fim, por isto é ideal que tabelas extensas tem um comportamento hover (quando o mouse passa em cima de um elemento), esta linha se destacar das demais, deixando o usuário localizar os dados desta linha.

Com o Javascript ela não é difícil de se fazer também. Por isto, para fins de comparação vou apresentar o mesmo efeito adquirido com três tecnologias, o Jquery, o Javascript e o CSS.

A última versão do Jquery desde a publicação deste post:

Jquery Última versão 1.1.3.1

Utilizando o Jquery

Com o Jquery, primeiro de tudo é preciso incluir a framework no cabeçalho do documento, utilizando a seguinte linha:

Assim, todas as funcionalidades da Framework ficará disponível. Abaixo vai o código para o efeito, e explicação de cada item virá depois:

 $(document).ready(function(){
 $('table#tabela_exemplo tbody tr').hover(function(){
    $(this).toggleClass('linha_hover');
 }, function(){$(this).toggleClass('linha_hover');
  });
});

Para quem não conhece o jquery, este código é estranho. O importante é notar que ele pode vir entre as tags no cabeçalho ou em um script externo.

Na linha 1, temos a declaração inicial do Jquery, ela diz: “execute o que vier dentro depois que o documento estiver pronto e carregado”.

O símbolo “$” significa a função do Jquery que quando seguido de parentêsis cria uma instância de um objeto que você selecionou, ou seja, o código “$(document)” cria um objeto do documento (seguindo o DOM do Javascript) e com ele uma vez criado, pode ser atribuídos métodos do Jquery, assim como métodos e extensões personalizadas. Assim, a linha 1 como um todo diz para: Crie uma instância do documento e dê a ele o método ready, que executa tudo o que estiver dentro depois que o documento estiver todo carregado.

Logo abaixo ele cria uma instância das seleções da linhas da tabela. Ou seja, você pode selecionar qualquer coisa no documento pelo Jquery, se você fizer “$(p)“, você estará selecionando todos os parágrafos. Se você fizer “$(‘.nome_da_classe’)“, você estará selecionando tudo que possuir a classe nome_da_classe, assim ele aceita toda a hierarquia do CSS para seleção do elemento.

Então quando eu fiz na linha 2 eu selecionei as linhas da tabela com a id tabela_exemplo e dei a ela um método chamado hover, que específica duas funcões como parâmetro, uma delas será quando o mouse passar em cima, e a outra quando o mouse sair do elemento.

Dentro delas, eu selecionei a linha da tabela fazendo referência ao próprio objeto através do this e lancei outro método que é o toggleClass, que aceita como parâmetro o nome da classe. Assim ele adiciona a classe se ela não estiver presente, e retira a classe se estiver presente. Ou seja, ela alterna a classe, sendo o método mais prático para este efeito. Poderíamos utilizar para executar dentro da primeira função o addClass e na segunda o removeClass, mas o toggleClass já detecta se a classe está presente ou não, adicionando e retirando quando necessário.

Assim, no CSS, basta colocar:

.linha_hover {
  background-color: #FFFFCC;
}

E assim ela irá mudar o fundo da linha quando o usuário passar o mouse, e irá tirá-la voltando ao estado anterior quando tirar e assim sucessivamente.

O melhor do Jquery é que ele é bastante extensível. Assim, você pode criar um método que basta selecionar a tabela para automaticamente já adicionar este comportamento. Ou ainda procurar por plugins que façam ainda mais, ordene a tabela, aplique cores alternadas e outras coisas. Isto vou deixar para outros posts.

A documentação do Jquery é bastante completa e todas essas funcionalidades e métodos podem ser encontradas. O site é em Inglês, mas também já está disponível uma documentação em Português.

Solução por Java Script

Há várias maneiras de se atingir este efeito com o Javascript. Algumas adicionam eventos na tabela, “sujando” o código, outras usam getElementById ou getElementByName , que muitas vezes funcionam diferentes para cada Browser. A vantagem do Jquery que ele internamente cuida das diferenças de Browsers e deixa para você somente o trabalho de selecionar os objetos do documento por seleção como é feita no CSS. Todas as soluções no Javascript, cria funções que são percorridas por laços e códigos maiores e mais confusos. O Jquery é limpo, simples e rápido até para soluções menores. Com mais três linhas de código você coloca as tabelas ordenadas e com cores alternadas, e ainda conter os efeitos de hover sem nenhum erro de script em tal browser.

Solução por CSS

A solução por CSS seria a mais bela se não fosse por um maldito detalhe: Funciona em todos os browsers, menos o IE 6! Abaixo o a linha de CSS que faz estes efeito:

#tabela_exemplo tr:hover {
  background-color: #FFFFCC;
}

Muito simples não? O IE 6 não aceita devido ao fato da pseudo classe hover ser só aceita em links. Em outros browsers, assim como no IE 7, ele é aceito para qualquer elemento, como divs, inputs e até linhas de tabelas, representadas pela tag tr.

Observações sobre o Opera 9

No Opera9 acontece um bug esquisito. Com o código abaixo o script passa a funcionar em todos os browsers:

$(document).ready(function() {
  $('table#tabela_exemplo tr').hover(function(){
    $(this).css("background-color","yellow");
  }, function(){
    $(this).css("background-color","white");
  });
});

O metódo CSS aceita dois parâmetros que são os pares “propriedade”,”valor“, E assim você pode inserir nos objetos selecionados propriedades CSS desejadas. Agora ele funciona na maioria dos Browsers.

Resultado

Assim, podemos constatar que o Jquery oferece uma solução que poderia ser feita através de CSS, mas falta suporte ao Browser que ainda é o mais utilizado, portanto, ainda é necessário um script, mesmo que seja simples, para funcionar em todos os browsers mais recentes.