Pular para o conteúdo principal

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:
  1. Encontrar alguns elementos, através de seletores CSS, e fazer alguma coisa com eles usando métodos jQuery.
  2. Encadear múltiplos métodos jQuery num conjunto de elementos.
  3. 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

Comentários

realmente, a simplicidade é fantástica
Fred Maia disse…
Post feito como o jQuery é, simples e poderoso. Parabéns.

Postagens mais visitadas deste blog

JavaMail: Enviando mensagem HTML com anexos

Introdução Depois do post "JavaMail: Enviando e-mail com Java" , que apresentava como enviar um e-mail com Java, resolvi complementar a assunto apresentando como enviar uma mensagem formatada, em HTML , e também como realizar o envio de anexos. Bibliotecas Além da biblioteca JavaMail, veja mais no post anterior , é necessário incluir o JavaBeans Activation Framework (JAF), apenas se a versão utilizada for anterior ao JSE 6.0 , que já tem o JAF incluso. O JAF está disponível em http://www.oracle.com/technetwork/java/javase/downloads/index-135046.html , e neste download encontramos, alguns exemplos na pasta demo , documentação, incluindo javadocs, na pasta docs e a biblioteca activation.jar , que deve ser acrescentada no classpath da aplicação para versões anteriores ao JSE 6.0. Exemplo Primeiramente devemos realizar a configuração da javax.mail.Session e da javax.mail.internet.MimeMessage , estes passos podem ser vistos no post anterior . Agora vamos montar um

O que é Lógica de programação?

Este é o segundo de uma série de posts voltados aos leitores do blog que estão dando início à carreira de desenvolvimento de software. O assunto de hoje é a lógica de programação. Para ler antes: Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados A lógica de programação é um pré-requisito para quem quer se tornar um desenvolvedor de software, independente da linguagem de programação que se pretende utilizar. Mas o que é de fato a Lógica de Programação e como saber se eu tenho esse pré-requisito? A lógica de programação nada mais é do que a organização coerente das instruções do programa para que seu objetivo seja alcançado. Para criar essa organização, instruções simples do programa, como mudar o valor de uma variável ou desenhar uma imagem na tela do computador, são interconectadas a estruturas lógicas que guiam o fluxo da execução do programa. Isso é muito próximo ao que usamos em nosso cotidiano para realizar atividad

Devo fazer um curso ou ler um livro?

Acredito que todos os instrutores ou professores, independentemente da área, escola ou centro de treinamento, já devam ter recebido essa pergunta alguma vez na vida: devo fazer um curso ou ler um livro? Para responder a essa pergunta, precisamos avaliar os prós e contras de cada opção. Trabalho com treinamento há algum tempo e, hoje, recebi essa pergunta de um aluno. Não adianta responder a ou b sem argumentar, demonstrando as opções conforme a situação do aluno. O conteúdo, a forma de transmissão e a capacidade de assimilação do indivíduo são chaves para haver benefício maior de aprendizado. Tanto em um bom curso quanto em um bom livro, o conteúdo é a premissa básica . Por conteúdo entendemos: se está organizado; se respeita pré-requisitos; se promove o aprendizado guiado e incremental; se aborda de forma satisfatória os principais pontos; se tem bom balanço entre teoria, exemplos e prática (favorecendo exemplos e prática); se tem como premissa a acessibilidade possível (e cabível) pa

Lançamento do JDK 7 no TDC2011 em São Paulo

O The Developer's Conference foi realmente um grande momento para toda comunidade de desenvolvedores, um encontro de comunidades de TI onde foi possível interagir com pessoas incríveis das comunidades .NET, PHP, Python, Cloud, Games e tantas outras. Com mais de 200 palestrantes e 25 coordenadores é difícil até citar nomes sem ser injusta. Neste post gostaria de falar um pouco sobre um acontecimento muito especial para a comunidade Java, o Lançamento mundial do JDK 7! A história toda começou há muito tempo atrás, num relacionamento construído ao longo de vários anos de atuação dos membros do SouJava, participando do JavaOne, das JSRs e muito networking. Mas, durante o último JustJava conversamos com Roger Brinkley e Bruno Souza, e tivemos a felicidade de ter o TDC2011 exatamente no dia planejado para o Lançamento Mundial do JDK7. O grande mérito foi do SouJava e do amigo Bruno Souza (JavaMan). Com a participação formal no Executive Committeé do JCP estamos ficando cada vez ma

Literais da Linguagem Java

Na última semana, tive uma conversa com um profissional Java iniciante que me apresentou dúvidas sobre o uso de valores hexadecimal na linguagem, inicialmente entendi que ele precisava da representação textual de um valor hexadecimal, então apresentei um método da classe wrapper Integer, conforme segue: int valor = 15; System.out.println(Integer.toHexString(valor)); //Imprime f Só então após mostrar este exemplo, ficou claro que ele precisava exatamente do contrário, ou seja, qual a forma mais fácil de converter um número hexadecimal para um número decimal para atribuição a uma variável primitiva inteira. Esclareci que para isso não havia necessidade de conversão, bastaria usar uma literal hexadecimal presente na linguagem Java da seguinte forma: int valor = 0xf; // ou 0XF System.out.println(valor); //Imprime 15 Este episódio me motivou a escrever este post sobre os literais da Linguagem Java, então vamos lá. De acordo com a especificação da linguagem (The Java™ Language Specification

Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados

Nesse post, diferente dos últimos que foram mais enfáticos nas experiências com tecnologias, vou focar um pouco mais nos profissionais que estão começando, ou pretendem ingressar na área de desenvolvimento de software, falando sobre conceitos fundamentais relacionados a programação em geral . Mercado de trabalho para programação Conforme já sabemos, o mercado de desenvolvimento de software, especialmente no Brasil, continua em franca expansão, sendo que cada vez mais as empresas buscam desenvolver seus próprios sistemas usando as mais diferentes e novas tecnologias. Algumas matérias interessantes: As seis profissões mais valorizadas em 2010 no IDG Now! Muitas vagas e sensação de reaquecimento da economia Por isso, a área de desenvolvimento de software tem despertado interesse em muitos profissionais de outras áreas que desejam mudar de profissão, já que as oportunidades de trabalho tendem a ser maiores. Esse é um perfil presente em muitos dos clientes da Globalcode que acabou m