Para os designers, familiarizar-se com a jQuery é um ato muito sutil. Isso se deve ao fato da mesma basear-se em um comando ( jQuery ou o seu atalho $ ) que referencia elementos e assim atribuir valores ou aplicar ações a eles. O mais interessante é que usamos as mesmas chamadas que usamos para referenciar elementos quando trabalhamos com CSS. Logo:
A jQuery ainda implementa algumas chamadas especiais, baseadas no CSS3.
A lista completa pode ser encontrada no site oficial da jQuery bem documentada e com exemplos para cada caso. Com a seleção na cabeça, podemos aplicar efeitos (hide, show, fadeIn, fadeOut, slideUp, slideDown por exemplo) nos elementos que selecionarmos, colocar atributos para estes elementos como css ou mesmo colocar eventos neles, ou seja, funções que rodam quando você faz alguma coisa com eles, como por exemplo clicar, passar o mouse em cima, dar dois cliques, colocar o cursor na caixa de texto e assim por diante.
Em um exemplo prático, vamos fazer um menu com submenus onde não precisamos nos preocupar em adicionar classes e tudo mais. Primeiro vamos implantar o HTML, assim podemos fazer um belo menu semântico. Se quiser, aplique também um belo CSS, mas não se esqueça: não suma com os submenus neste momento, afinal, se o browser do usuário não possuir javascript ele não poderá mostrá-los. Então deixe os submenus à mostra porque depois vamos escondê-los via javascript.
Note que não há qualquer referência a quem é pai ou filho de sebmenu. Vamos usar as chamadas da própria jQuery para encontrar quem tiver submenu. O resultado deste menu, já com CSS aplicado pode ser visto aqui.
Agora, vamos desaparecer com os submenus de forma dinâmica. Lembre-se que não podemos aplicar a jQuery em qualquer lugar, afinal o html pode ainda não ter sido gerado quando o script rodar, então colocamos o “desaparecimento” dentro da função de carregamento da própria jQuery. Isto fará com que nosso script só seja executado quando todo o HTML for carregado.
Com uma simples linha, sumimos com os submenus com a função hide(), note que usamos os próprios atributos para os quais chamamos esses submenus com CSS. Veja como desaparecemos com os submenus de uma forma simples e fácil.
Agora, a dinâmica! Vamos usar a chamada aos submenus usando como referencia os links que tenham como href o valor de # (tralha, sustenido, lasagna, jogo-da-velha, plus, ou como você quiser chamar). Fica assim:
Assim, filtramos todos os nossos links pegando somente os links dentro de #menu que tenham o href como #.
Neles vamos implantar os comandos de click para mostrar o menu e o submenu, mas primeiro precisamos navegar entre os elementos. Para isso, usamos next ou prev, funções próprias da jQuery que navega entre o elemento que estiver após ou antes (respectivamente) do elemento em questão. Levando em conta que as funções de ação da jQuery (click/hover/toogle/etc) recebem como parâmetro this o elemento que recebeu a ação temos:
Então vamos navegar até o submenu, que é o elemento que está após o link:
Perceba que apesar de recebermos em this o elemento, precisamos usar mais uma vez a jQuery pois se trata do elemento em si e não uma chamada à ele via jQuery.
Agora sim, podemos sumir ou aparecer com os submenus, usando o slideToggle da jQuery vemos como isso é implantado de forma simples e prática. Precisamos aplicar também um return false para cancelar a navegação do link, afinal ele não deixou de ser um link.
Com apenas seis linhas de código (real) concluímos um menu com submenu dinâmico, navegando entre os elementos com a jQuery. Ainda aplicamos uma animação para esse submenu. O resultado pode ser visto aqui.
Um dos motivos pelos quais a jQuery é uma das bibliotecas mais incríveis de se trabalhar porque seu aprendizado é simples e prático. Vale a pena investir um tempo para aprender a usá-la.
