Introdução a jQuery

Introdução a jQuery - parte 1

Hoje vou falar sobre uma biblioteca que caiu no gosto dos desenvolvedores e é usada por grandes empresas como Microsoft, Dell, Google, Mozilla e Wordpress, entre outros. O que encanta é a facilidade e simplicidade de uso, além da economia de código e sua rapidez na execução.

O que é jQuery
Biblioteca JavaScript open source que simplifica as interações entre um documento HTML, ou mais precisamente a DOM (documento object model) e o JavaScript. Em outras palavras, simplifica a manipulação do documento HTML, o tratamento de eventos do browser, animações da DOM, interações Ajax e desenvolvimento de JavaScript para vários navegadores ao mesmo tempo.

Mas deixa eu contar primeiro a estória do jQuery...
Começou em 2005 com John Resig. Ele queria escrever uma aplicação web que funcionasse na maioria dos navegadores sem ter que ficar testando em todos eles e depois corrigindo os bugs. Em pouco tempo, várias pessoas também estavam usando esta biblioteca, o que levou John a ir melhorando sua estrutura e deixando-a extensível, o que facilita a criação de plugins. Hoje a quantidade e variedade de plugins é enorme e graças à comunidade o jQuery cresceu e é o que vemos hoje.

Porque escolher o jQuery?

É open source, é gratuito, e o projeto é licenciado pelo MIT e GPL.
É pequeno e compactado.
É popular, tem uma comunidade de usuários grande e várias pessoas contribuem para seu desenvolvimento.
Ele cuida das diferenças entre os browsers de modo que nós não precisamos nos preocupar com isso.
Está sendo testado e otimizado para desenvolvimento nos mais diversos browsers e em várias versões.
Tem um grande repositório de plugins que vem crescendo a cada versão
Tem uma API muito bem documentada incluindo exemplos
O suporte da comunidade é muito bom, com várias listas, canais de IRC, tutoriais, artigos, livros, etc.
É adotado por grandes empresas (como já citei anteriormente) o que traz mais segurança, estabilidade e longevidade.
Sua elegância, metodologias e filosofia de mudança do modo de escrever JavaScript está se tornando um padrão.

Isto é só para citar alguns motivos, listaria muitos outros mas acho que estes são os mais importantes.

Como funciona
A filosofia do jQuery é "write less, do more", ou seja, escreva menos e faça mais. O que pode ser quebrado em 3 conceitos:

Encontrar alguns elementos, através de seletores CSS, e fazer alguma coisa com eles usando métodos jQuery.
Encadear múltiplos métodos jQuery num conjunto de elementos.
Usar wrappers jQuery e iterações implícitas.

Exemplo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo de uso de jQuery</title>
...
<body >

<div id="container">

<!-- primeiro quadro -->
<div id="quadro1" class="quadro">
  <div>
    <img src="http://www.globalcode.com.br/img/imagens/kit_programme/programme.jpg" alt="Program-ME" /> <br/>
    Program-ME
  </div><br />     ...
</div>

<!-- segundo quadro -->
<div id="quadro2" class="quadro">
  <div>
    <img src="http://www.globalcode.com.br/img/imagens/kit_programme/tomada.jpg" alt="Placa Tomad@" /> <br/>
    Placa Tomad@
  </div><br />     ...
</div>

<!-- terceiro quadro -->
<div id="quadro3" class="quadro">
  <div>
    <img src="http://www.globalcode.com.br/img/imagens/kit_programme/placa_virgem.jpg" alt="Program-ME - placa virgem" /> <br />
    Program-ME - placa virgem
  </div> <br />    ...
</div>

</div>

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function(){
  var count = 2;
  window.setInterval(function(){
    $('div.quadro').hide();
    $('#quadro'+count).show();
    count++;
    if(count > 3) count = 1;
  },10000);
});
</script>

</body>
</html>

Neste exemplo quis mostrar como fazer um slide show sem usar nenhum plugin, somente código jQuery mesmo.

Esta página tem 3 quadros que devem ser mostrados alternadamente a cada 10 segundos, então coloquei 3 divs cada um com um id específico (quadro1, quadro2, quadro3) e com uma mesma classe CSS (quadro).

Para que o meu código jQuery seja executado somente depois que o navegador tenha convertido o código HTML na árvore DOM mas antes que a página tenha sido carregada, usamos a sintaxe $(funcion() {});, que é a forma reduzida de $(document).ready(funcion(){});

Para temporizar, usei o método setInterval(), que chama uma função (desde a linha 47 até a 50) repetidamente em intervalos de milissegundos e que para somente quando a janela do navegador é fechada.

Baseado no seletor CSS posso buscar todos os 3 divs de uma vez e esconder todos da visão do usuário com o método hide() (linha 47). Aqui um looping está implícito, pois o método hide() é executado para cada um dos divs encontrados.

Uso uma variável que será incrementada a cada vez que um quadro é mostrado (linhas 49 e 50), e com ela consigo buscar o elemento div da vez e deixá-lo visível com o método show() (linha 48).

Veja o exemplo em ação na seguinte URL:
http://www.globalcode.com.br/exemplo.html

Fonte:
jQuery Cookbook, by jQuery Community Experts
jQuery in Action, by Bear Bibeault and Yehuda Katz
www.jquery.com
docs.jquery.com

Bom, esta foi uma explicação bem rápida sem muito aprofundamento, no próximo post vou falar dos conceitos da filosofia do jQuery ilustrando com pequenos exemplos.

Até lá,

Ana Abrantes
Twitter: @anabrant
http://blog.globalcode.com.br/search/label/ANA ABRANTES