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

Melhorando Performance de JPA com Spring Web Flow

No TDC2009 realizado pela Globalcode em São Paulo foi apresentado um Lightning Talk sobre um problema específico de performance em aplicações Web com JPA e uma possível solução usando o Spring Web Flow . Num período de 15 minutos, os slides a seguir foram apresentados e seguidos de alguns vídeos de demonstração de uma aplicação Web em execução. Melhorando performance do JPA com Spring Web Flow View more presentations from Dr. Spock . Nesta apresentação foi dito que temos encontrado problemas de performance em aplicações Web que utilizam as tecnologias JSF + JPA + Ajax quando precisamos gerenciar um contexto de persistência (EntityManager). Estes problemas se manifestam quando aplicamos uma resposta errada para a pergunta: Como gerenciar o contexto de persistência numa aplicação Web? Se as aplicações não usam Ajax e limitam-se ao modelo orientado a requisições, a solução mais comum é o uso do design pattern chamado "Open Session In View Filter". Através deste design

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

Dica rápida: Apagando registros duplicados no MySQL

Ola pessoal, Sei que vocês estão acostumados a ver posts meus sobre tecnologia móvel ou algo relacionado, mas hoje vou falar sobre um pequeno "truque" que usei esse final de semana com o MySQL. Eu estava desenvolvendo o lado servidor de uma nova aplicação mobile (ahh, então "tem a ver" com mobile hehe), e quando fui fazer alguns testes percebi que tinha quase 7 mil registros duplicados (!!!) na minha base de dados! Bom, o meu primeiro reflexo como programador foi pensar em fazer um "programinha" Java para buscar e deletar todos esses registros duplicados. Mas ai, resolvi tirar as teias de aranha dos neurônios e usar os vários anos de experiência que passei com SQL e criar uma query que fizesse esse trabalho todo de uma vez!! E a query ficou assim: delete from TABLE_NAME USING  TABLE_NAME, TABLE_NAME  AS  auxtable WHERE   ( NOT  TABLE_NAME.id  =  auxtable.id ) AND   ( TABLE_NAME.name  =  auxtable.name ) Explicação direta: TABLE_NAME

Muitas vagas, otimismo e sensação de reaquecimento da economia

2010 começou cedo, contrariando a expectativa que muitos Brasileiros tem de "O ano começa mesmo depois do carnaval".  Embora o inicio do ano tenha sido "repleto" de catástrofes naturais e muita chuva aqui no Brasil, no campo profissional o otimismo está evidente, as pessoas estão cheias de energia e boas perspectivas em relação as oportunidades de JavaEE 6 e muitas outras tecnologias. Mas, parece que não são somente as pessoas que estão otimistas, os anúncios de vagas voltaram a crescer, empresas anunciando boas vagas, ou grandes quantidades de vagas, refletindo o que podemos chamar de "Otimismo corporativo" . Veja algumas empresas que anunciaram vagas: IBM SpringSource   Yahoo!  Elumini   Cyberlynxx   Google Kaizen SPC Brasil Se em 2009, um ano de crise fizemos tudo isto , imagine em 2010. E você está preparado ?  Está otimista ? []s Yara http://twitter.com/yarasenger http://twitter.com/globalcode

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

JavaLi no Lançamento mundial do JDK7 em São Paulo

O Lançamento mundial do JDK7 foi realizado no dia 7/7 em três cidades simultaneamente: São Paulo (SouJava), Londres (London User Group) e São Francisco (Oracle) com transmissão ao vivo via satélite! Evidentemente as cidades não foram escolhidas por acaso, e podemos enxergar a escolha da cidade de São Paulo como um sinal de reconhecimento à comunidade Java Brasileira, ao SouJava e à Globalcode. Com certeza houveram várias pessoas fundamentais para isto, como o Bruno Souza e o Mauricio Leal responsáveis pela organização e realização do Mês de Java! Veja a entrevista com o JavaLi no TDC2011: Veja também as fotos do Lançamento do JDK7 na cobertura realizada aqui no Globalcoders. É isso aí pessoal, próxima parada ? Trilha Java TDC2011 Goiânia! E você, já se inscreveu? Participe, colabore, divulgue esta iniciativa. []s Yara Senger http://twitter.com/yarasenger