2 Introdução ao jQuery

Neste capítulo veremos as principais funcionalidades do jQuery, como, por exemplo, o uso de seletores, funções para alterar aparência dos elementos HTML, como trabalhar com eventos e manipular o conteúdo das tags.

2.1 Começando com jQuery

O primeiro passo é fazer download da biblioteca do jQuery no site

http://jquery.com/. Para este livro usarei a versão uncompressed do jQuery. Esta versão é geralmente utilizada para a fase de desenvolvimento de sites, pois permite lermos o código do jQuery caso haja necessidade. A versão compressed é uma versão compactada, com remoção dos espaços em branco. Deve ser utilizada quando o site é publicado, pois seu tamanho é menor, o que torna o download da página mais rápido.

Com o arquivo baixado (jquery-1.x.x.js ou jquery-2.x.x.js) vamos renomeá-lo para jquery.js para manter a simplicidade dos exemplos. Para incorporar o jQuery em sua página HTML precisamos fazer o import da biblioteca jquery.js com o seguinte comando:

<script src="jquery.js"></script>

É importante salientar que o arquivo jquery.js deve estar na mesma pasta onde está o seu arquivo HTML. Caso contrário, o comando acima precisará ser adaptado para conter o caminho do arquivo. Sugiro que siga este passo a passo até conseguir confirmação de que o jQuery está sendo executado corretamente.

Outra alternativa ao download da biblioteca é usar um servidor CDN (content discovery network). Com o CDN podemos carregar a biblioteca do jQuery diretamente da internet a partir dos servidores que hospedam o script, sem a necessidade de baixar o arquivo .js para a pasta do seu projeto ou site. Observe o código a seguir:

<script

src="http://code.jquery.com/jquery-2.0.3.min.js">

</script>

Nesse caso, a biblioteca do jQuery será baixada do site code.jquery.com. A biblioteca é apenas um arquivo .js. A vantagem do uso do CDN é que os servidores estão distribuídos por várias regiões do mundo, o que torna mais eficiente o seu download por usuários de diferentes países. Recomenda-se usar CDN quando o site já estiver pronto para ser publicado na internet.

Usando o jQuery

O jQuery possui apenas uma função de entrada que você precisará chamá-la toda vez que necessitar algum recurso da API. O nome dessa função é jQuery. Porém, numa página web é comum chamarmos esta função dezenas ou centenas de vezes. Pensando nisso foi criado um álias para esta função, através do símbolo $, a fim de economizar código. Observe o código abaixo. As duas linhas são equivalentes, a única diferença é que a primeira usa a função jQuery e a segunda usa o seu álias.

<script>

alert('versão do jQuery: ' + jQuery().jquery);

alert('versão do jQuery: ' + $().jquery);

</script>

A partir de agora sempre que usarmos o símbolo $() estamos na verdade chamando a principal função da API que é a função jQuery().

Para garantir que todo o código HTML e CSS tenha sido baixado é uma boa prática usarmos a função ready do jQuery para garantir que nosso código poderá contar com todos os elementos HTML carregados na árvore DOM. Esse é um recurso essencial ao inicializar o jQuery, pois quando usamos o jQuery é quase certo que acessaremos o HTML ou CSS a partir do jQuery e, portanto, se o arquivo ainda não foi carregado totalmente, poderíamos ter um erro no jQuery. Então o que fazemos é forçar o jQuery a aguardar o download completo do arquivo HTML e CSS antes de realizar algum processamento. Esse comportamento é garantido pela função ready. Assim, depois de carregada a página, podemos chamar o método alert() para imprimir uma mensagem: