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

Você já pensou em ser palestrante em algum evento ?

Você já deve ter participado de algum evento e pensado como deve ser legal ser palestrante... E para falar a verdade, é muito bom mesmo. Eu adoro, o Vinicius adora e conheço muitas pessoas que curtem cada minuto da participação no evento como palestrante. Com certeza é uma responsabilidade a mais. Você sente medo, adrenalina, tem que se preparar. Literalmente coloca a cara a tapa para qualquer pessoa te avaliar em todos os sentidos. Qual o seu tom de voz?  Seus slides são legais? Você manja mesmo ?  Seu português está ok?  E as palavras em inglês ?  Teve algum deslize técnico? E MUITO mais.  Mas é claro que a exposição tem dois lados... e os resultados podem ser ótimos. Normalmente conhecemos mais pessoas como palestrantes e podem surgir boas oportunidades de negócio. É sempre positivo ter uma nova referência positiva quando as pessoas buscam nosso nome no Google, podemos fazer a diferença para quem está assistindo a palestra e muito mais.  No The Developer's

TDC INNOVATION lança University Pass

Modalidade de ingresso tem como objetivo ajudar na capacitação dos universitários Uma pesquisa realizada em 2020 pela Associação Brasileira das Empresas de Tecnologia da Informação e Comunicação (Brasscom) diz que até o ano de 2024 o Brasil precisará de cerca de 420 mil profissionais na área de Tecnologia da Informação. Porém, por ano, a mesma pesquisa diz que o país forma apenas 46 mil profissionais capacitados no nicho. Pensando nisso, para ajudar na formação e capacitação desses jovens profissionais, o TDC INNOVATION, segunda edição do ano do The Developer's Conference, lança o University Pass, modalidade de ingresso que possibilita aceso digital gratuito a todas as palestras do evento, ou com 50% de desconto para quem preferir ir pessoalmente. Com o tema central “Desafios para a criação do futuro Digital”, o TDC INNOVATION ocorrerá entre 1 e 3 de junho, de forma híbrida: presencialmente no Centro de Convenções CentroSul, em Florianópolis, e com transmissão simultaneamente pela

Inscrever sua equipe em eventos de TI vale a pena? Entenda aqui

Os eventos de TI são importantes para o aprendizado contínuo, especialmente em uma área tão dinâmica, como a de tecnologia. A necessidade de estar sempre por dentro das tendências pode esbarrar em algumas objeções, como investir em especializações pouco práticas ou opções pulverizadas de mercado. Por isso, participar de conferências e assistir palestras de especialistas é uma excelente oportunidade para sua equipe se desenvolver. O melhor de participar de eventos de TI é expandir os conhecimentos e habilidades independentemente da experiência específica, seja um desenvolvedor web ou full stack, por exemplo, as conferências de tecnologia podem ajudar o profissional a se aperfeiçoar. Isso ocorre devido ao contato com outros especialistas e colegas da mesma área. Além disso, é possível descobrir novas soluções e fazer networking . Neste artigo, você conhecerá as vantagens da sua equipe participar em eventos de TI. Aproveite a leitura! Vantagens de participar de eventos de TI Se o seu ob

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

Segurança da informação no alvo: o que esperar do futuro?

A segurança da informação não se trata apenas de proteger os dados contra acesso não autorizado. Na prática, refere-se aos recursos que impedem: uso; registro; inspeção; divulgação; interrupção; modificação; destruição de dados. O uso de dados pode abranger desde um perfil nas redes sociais a detalhes financeiros, biometrias ou novos projetos. Por isso, a preocupação com a proteção dos dados é crescente, tanto para empresas quanto clientes. Para muitas pessoas, a coleta de dados é considerada invasão de privacidade, criando desconfiança do titular dos dados, pois o uso dos dados pode ser facilmente corrompido, utilizado para fins não declarados. Apesar de o uso dos dados terem impulsionado os avanços tecnológicos na última década, as organizações lidam com o desafio de distinguir dados de informações pessoais de modo a proteger a privacidade e as preferências dos clientes. Neste artigo, abordaremos o impacto da segurança da informação e o que esperar do futuro. Confira casos conhecido

TDC ONLINE: SUA PLATAFORMA DE PALESTRAS GRAVADAS DO TDC DISPONÍVEL

Além do conteúdo ao vivo transmitido online nas edições do TDC, agora você pode ter acesso à centenas de palestras gravadas, através da nossa nova plataforma de vídeos - o TDC Online, que reúne todas as Trilhas premium, Stadium e Salas dos Patrocinadores das edições anteriores de 2022, TDC Innovation e TDC Connections.  Para acessar, basta clicar na edição em que você participou ( TDC Innovation ou TDC Connections ); Fazer o mesmo login (com e-mail e senha) cadastrados na hora de adquirir ou resgatar o seu ingresso no TDC; E clicar na Trilha de sua opção, e de acordo com a modalidade do seu ingresso. Logo em seguida, você será direcionado para a seguinte página com a lista de todas as palestras por Trilha: Pronto! Agora você tem acesso à centenas de palestras gravadas da sua área de interesse, para assistir como e quando quiser! Caso tenha esquecido a senha, clique na opção "Esqueci a senha" , insira o e-mail que você realizou para o cadastro no evento, e aparecerá a op