Iniciando no mundo da Biblioteca Jquery

Nesse artigo veremos um pouco sobre o Jquery, uma ótima biblioteca Javascript que facilita muito a vida dos desenvolvedores e webdesigners. Além de possuir código livre para que você possa desenvolver para projetos pessoais e comerciais, o Jquery utiliza em sua sintaxe de seletores CSS, é Cross-Browser (funciona em todos os navegadores), e possui arquitetura que permite sua extensão com a instalação de plug-ins e a inserção de novas funcionalidades a biblioteca já existente.

Reforçando os benefícios do desenvolvimento com Jquery, temos uma citação de seu criador, o americano John Resig.

“O foco principal da biblioteca Jquery é a simplicidade. Porque submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?”

Citação retirada do Livro Jquery - A Biblioteca do Programador Javascript 2ª Edição, escrito por Maurício Samy Silva, mais conhecido na Internet como Maujor.

Instalando o Jquery

A biblioteca Jquery pode ser instalada de 2 maneiras: você pode baixar o arquivo da biblioteca no próprio site dela www.jquery.com, onde você também encontrará a documentação da biblioteca com exemplos, ou você também pode utilizar um link disponibilizado pelo Google para incluir a biblioteca em seu código. Abaixo segue exemplo de instalação de ambos os métodos.

                    	<script type="text/javascript" src="includes/js/jquery.js"></script>
                    
                    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
                    

Iniciando com a Linguagem

Para iniciarmos é necessário decorar a seguinte função $(). Isso mesmo, decorar! Ela é a função construtora da linguagem, e será utilizada em todo script desenvolvido com Jquery.

Existem diversas outras bibliotecas Jquery, e em algumas é utilizada o mesmo $() como função construtora, o que pode gerar alguns problemas de conflito entre os scripts dessas bibliotecas. Minha opinião, tentar evitar ao máximo o uso de duas bibliotecas diferentes no mesmo projeto, e quando não houver outro jeito, podemos escrever a Função construtora com sua maneira alternativa, Jquery(), alterando o $ por Jquery, assim evitamos possíveis conflitos.

A Síntaxe Jquery

Simplicidade é o grande objetivo do Jquery, veja os códigos abaixo:

                    	$('a');
                        $('span');
                    

Com eles selecionamos todos os elementos <a>, <span> do documento sem a necessidade de criamos um loop para armazenar os elementos em um array, caso utilizassemos o javascript convencional. Agora só precisamos aplicar os efeitos ou eventos desejados.

                    	$('a').addClass('teste');
                    

Veja que adicionamos a classe “teste” em todos os elementos <a> com apenas 1 linha de código, algo que não é possível utilizando o javascript convencional.

Jquery na Prática

Com a prática vamos aprendendo os pontos onde costumamos errar e passar nervoso procurando por erros pequenos, porém que atrapalham a execução de toda a aplicação, segue algumas dica:

- O código Jquery é chamado dentro da tag <head> no topo da página, e trabalha nos elementos que estão dentro do <body>, então o que ocorre muitas vezes é esquecermos de utilizar os eventos ready() ou load() para aguardar o carregamento do documento, assim o Jquery procura por um elemento que ainda não existe, logo ele não funciona.

                    	$(document).ready(function(){
                        	//Seus Script
                        });
                    

No exemplo, mostrei o uso do evento ready() aplicado do “document”, esse script aguarda o carregamento total do documento, entenda por isso as tags html, o carregamento de imagens e demais coisas carregadas pelo código não entram nessa função, para isso utilize o script abaixo:

                    	$(window).load(function(){
                        	//Seus Script
                        });
                    

Assim seu script só será executado após toda a pagina ser carregada por completo.

- Como o Jquery utiliza CSS em seus seletores, erros comuns quando se utiliza CSS ocorrem com freqüência também, portanto fique atento aos nomes utilizados em classes e ID´s, e não esqueça de utilizar “.” e “#” para fazer referência a classes e ID´s respectivamente.

Espero que tenham gostado! Um abraço e até a próxima.

voltar