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

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

Palestras do TDC Business Disponíveis Online

🚨 Atenção, TDC Lovers! O TDC Business em São Paulo acabou, mas os conteúdos mal começaram!  Não pô de aproveitar a STADIUM ao vivo? Não tem problema, porque trouxemos ela até você. Todas as palestras da STADIUM, palco principal do TDC, já estão no ar e liberadas para qualquer pessoa assistir. Essa Trilha incrível conta com palestras de Trilhas Premium e temas variados de forma GRATUITA para você poder maratonar de casa!  Aproveite para prestigiar seu evento de TI favorito com pipoca direto do seu sofá. 🎥 🍿 Gravação da STADIUM, 22 a 24 de Agosto de 2022, disponível aqui: https://www.globalcode.com.br/videos/tdc-2022-business/  Todas as demais trilhas do TDC Business serão publicadas gradualmente nas próximas semanas, fique atento aos nossos e-mails, você será notificado por lá quando sua Trilha estiver disponível. Acompanhe nossas redes sociais para não perder nada e ficar por dentro de todas as novidades do TDC!

Seja um Palestrante do TDC Connections 2022

A Equipe TDC está muito feliz e orgulhosa em começar mais uma jornada de eventos em 2022 e criar muitas oportunidades! Agora, chegou o momento para você que sempre quis ser palestrante mas não teve oportunidade, e também de quem já é palestrante experiente, e está ansioso para compartilhar aquela nova prática ou caso de sucesso fresquinho, submeter sua palestra para o TDC Connections e co-criar conosco o maior evento de desenvolvedores do Brasil.  Link de inscrição: https://cfp-conn.thedevconf.com.br/?_ga=2.103579840.1386204218.1643036190-1988609034.1631800014 Confira aqui o calendário do TDC 2022. Nesta edição teremos muitas novidades e você poderá palestrar de forma Online ou Presencial! Entenda como vai funcionar o TDC CONNECTIONS: Nesta edição, além de todo o conteúdo dividido em Trilhas transmitidas ao vivo (13 trilhas simultâneas) também teremos dois eventos híbridos em Recife e Belo Horizonte, que terão uma trilha por dia, ao vivo, para um público limitado, seguindo protocolo

Inspire a mudança com a liderança ágil

A liderança ágil é essencial para que uma organização realize mudanças de negócios significativas. Ser líder é uma tarefa desafiadora, especialmente em um cenário de constantes transformações, principalmente na forma de lidar com a relação empresa e pessoal. Pesquisas sobre liderança na era digital revelam que algumas soft skills têm sido substituídas por outras, o profundo conhecimento na área de negócio, ser referência nas tecnologias utilizadas, ter foco total no prazo e nas entregas e conhecer um arsenal de técnicas e ferramentas, têm dado espaço a habilidades, como: empatia; adaptabilidade; senso de equipe; visão e propósito; engajamento constante. A colaboração entre pessoas de todos os níveis hierárquicos são vitais, afinal, as equipes estão trabalhando para o mesmo objetivo: o encantamento e atendimento das necessidades do cliente que proporcionarão um crescimento sustentável da organização. Com propósito claro, estratégia e prioridades definidas, os times desfrutam de uma ma

TDC Digital: o que você precisa saber para transformar sua carreira em 2022

O TDC Digital é o maior evento de TI do mercado e proporciona crescimento profissional a partir de palestras com especialistas e oportunidades de networking com o mundo todo, direto da sua casa. Através da escolha individual de cada participante é possível obter experiências imersivas e transformadoras conforme o tema-chave de cada trilha.  O evento também é o lugar ideal para ajudar no desenvolvimento de carreiras, permitindo que qualquer pessoa com vontade — e um tema interessante — seja palestrante e compartilhe suas experiências e conhecimentos. Para aqueles que querem  participar como ouvinte a plataforma do TDC favorece conferências dinâmicas, e o encontro de diversas comunidades e ecossistemas de TI. E, após a escolha de uma trilha, fica mais fácil acompanhar especialistas para aprender e se inspirar. Em 2021 , o The Developer’s Conference (TDC) foi 100% digital e, em três dias de evento, contou com mais de 300 horas de conteúdos , incluindo: Agile; Testes; Design; Web e Mobile;

9 ESQUENTAS TDC ESPERANDO POR VOCÊ

O TDC nasceu do sonho de profissionais que valorizam o compartilhamento de conhecimento, experiências e oportunidades entre as comunidades de desenvolvedores.  Por isso, o crescimento do TDC nunca poderia ficar longe do crescimento das comunidades! Pensando nessa união, criamos um projeto quente: O ESQUENTA TDC ! Visando divulgar os meetups de comunidades que querem transformar e inspirar carreiras, foi co-criado este projeto lindo e cheio de apoio, onde o TDC abraça meetups de diversas comunidades espalhadas pelo Brasil e elas contribuem com a divulgação da edição regente.  O TDC Innovation vai rolar de 14 a 16 de JUNHO, mas até lá vão acontecer muitos encontros incríveis!  Fique por dentro das comunidades que vão participar, quais temas irão abordar e claro as datas e locais para você participar. 💥Esquentas TDC Innovation 2023: 24/05 - Esquenta TDC: Carreira e Desenvolvimento Presencial em Floripa das 19:00 as 21:30 com inscrição AQUI Comunidade: Google Developers Groups Nova