O que é jQuery e como usá-lo?

Imagine que você está desenvolvendo um site e precisa adicionar um formulário de feedback, além de um botão de compra. Primeiro, você escreve cerca de 200 linhas de código em JavaScript. Em seguida, você deve verificar os campos e certificar-se de que os dados sejam enviados, os lembretes cheguem, etc. No final, você leva algumas horas para programar e testar tudo. Se você não quer gastar tanto tempo fazendo trabalhos rotineiros e precisa agilizar o processo, te apresentamos o jQuery.

O que é jQuery?

jQuery é uma biblioteca JavaScript rápida e fácil, que inclui atividades típicas de programação escritas em um único comando. Parece um conjunto de peças prontas com as quais você pode montar uma aplicação ou um site.

Veja o exemplo do código escrito em jQuery:

#JavaScript
document.getElementById("demo").innerHTML = "Aprenda com a EBAC";
#jQuery
$("#demo").html("Aprenda com a EBAC");

Entre suas funções estão as seguintes:

• Cria um vínculo rápido entre JavaScript e elementos HTML.
• Funciona com seletores CSS; folhas de estilo em cascata, que permitem criar páginas da web atraentes.
• Implementa funções do AJAX; o serviço de troca de dados da página com o servidor que permite criar animações e efeitos visuais.

Vantagens e desvantagens

Vale a pena usar jQuery por vários motivos:

• Código compreensível. jQuery conta com uma sintaxe clara. O código no jQuery é curto e fácil de entender. É de grande importância se você trabalha com o código de outros desenvolvedores.
• Cross-browser. O código escrito em jQuery funciona em qualquer navegador.
• Seleção de plugins. Formulários de inscrição, pop-ups e captura de número de telefone estão disponíveis e prontos para uso com alguns comandos. Entre os plugins mais populares você pode encontrar:
  • Effect, cria efeitos de animação nos elementos da página web.
  • Taggings, é usado em SEO para classificar artigos de um blog e facilitar a busca.
  • Autocomplete, permite oferecer sugestões ao usuário durante o preenchimento das informações.
  • Blueimp Gallery, mostra imagens ou vídeos em formato carrossel ou lightbox. Permite que você possa manipulá-los com um mouse ou teclado em um computador ou com um dedo em um telefone ou tablet.
  • GridScrolling, permite que você navegue no site usando teclas.
  • Animsition, ajuda a gerar a mudança animada de páginas.
  • Slider, ajusta a escala em uma página web.

Se você está prestes a usar o jQuery, leve em conta os seguintes fatores que podem afetar seu resultado:

• Controle limitado. Se você quer ter o máximo controle do seu site, seria melhor usar JavaScript sem jQuery. Nesse caso, você terá confiança em como sua página se comportará e não dependerá do código alheio.
• Redundância de dados. Conectar uma biblioteca inteira para um único efeito não é a melhor ideia. Às vezes, é mais fácil dedicar cinco minutos extras e fazer a mesma coisa em JavaScript do que arrastar quilobytes adicionais de código.
• Baixo desempenho e carregamento lento. Páginas escritas com jQuery podem levar mais tempo para carregar e o código pode ser mais lento do que ao usar funções de linguagem JavaScript.

Como se usa jQuery?

Entre as habilidades principais que você vai precisar para usar jQuery estão:

• Conhecimentos básicos em HTML e CSS para poder configurar um site e entender como funcionam os seletores CSS.
• Habilidades básicas de programação. Você pode trabalhar com jQuery sem conhecer muito JavaScript, mas precisa entender conceitos como variáveis e tipos de dados.

Para começar a usar o jQuery, você pode baixar a biblioteca em duas versões: a versão completa e a versão compactada. A versão completa ocupa cerca de 60 KB, suporta AJAX e alguns efeitos adicionais. Esses efeitos não são necessários para todos os sites e, muitas vezes, é suficiente para instalar a versão compactada, que ocupa apenas 20 KB. É a opção ideal para o servidor de produção, pois minimiza o tempo de carregamento de uma aplicação.

Ao baixar o arquivo de instalação, você precisa editar sua página HTML e colocar o seguinte código:

<script type="text/javascript" src="/jQuery-2.1.4.js"></script>

Você deve escolher a função ready, pois ela é executada automaticamente depois que os elementos do DOM (Document Object Model ou a estrutura do documento HTML) estejam carregados. Ficará da seguinte forma:

$(document).ready(function() {
// aqui vai o código
});

Você pode criar a função acima diretamente na página usando as tags <script> ou defini-la em um arquivo js separado. Agora você pode começar a usar as funcionalidades do jQuery.

Para verificar se sua página e o jQuery estão funcionando corretamente:

• Crie um botão na seção Body:

<button id=”MeuBotão” type="button">Dale Clic</button>

• Defina a ação a ser executada com a função ready:

$(document).ready(function() {
$('#MeuBotão').on('click', function (e) {
alert("Funciona!");
});

Funções de jQuery

A biblioteca jQuery conta com uma extensa seleção de funções, com as quais você pode criar animações em seu site. Entre as mais utilizadas estão:

Função hide()

Serve para ocultar um elemento HTML. Você pode escolher uma velocidade pré-determinada para ocultar elementos ou definir a sua em milissegundos:

$('#theDiv').hide('slow');
$('#theDiv').hide('fast');
$('#theDiv').hide(2000);

Função show()

Permite mostrar um elemento oculto. Como no caso do hide(), você pode escolher a velocidade indicada ao JQuery e o quão rápido o elemento deve exibir:

$('#theImg').show('slow');
$('#theImg').show('fast');
$('#theImg').show(2000);

Função toggle()

Altera a visibilidade de um elemento HTML. Em outras palavras, o elemento oculto será exibido e vice-versa. Você também pode definir a velocidade:

$('#theDiv').toggle('slow');
$('#theDiv').toggle('fast');
$('#theDiv').toggle(2000);

Função fadeIn()

Com a função fadeIn(), um elemento HTML oculto aparece gradualmente. Assim como nas funções show() e hide(), você pode determinar a velocidade como parâmetro da função.

$('#theDiv').fadeIn('slow');
$('#theDiv').fadeIn('fast');
$('#theDiv').fadeIn(2000);

Função fadeOut()

A função fadeOut() faz esmaecer um elemento HTML visível. A velocidade também é definida como um parâmetro da função:

$('#theDiv').fadeOut('slow');
$('#theDiv').fadeOut('fast');
$('#theDiv').fadeOut(2000);

Função fadeToggle()

Funciona da mesma forma que toggle() com a única diferença de que adiciona o efeito gradual.

$('#theDiv').fadeToggle('slow');
$('#theDiv').fadeToggle('fast');
$('#theDiv').fadeToggle(2000);

Função animate()

Você pode animar elementos CSS em sua página com a função animate(). Embora nem todos os atributos possam ser animados, a função só se aplica a atributos CSS numéricos. Você pode animar parâmetros como largura, altura, tamanho, opacidade e outros.

O valor que um atributo CSS tinha antes muda gradualmente para o que especifica a função animate():

$('#theDiv').animate({"height" : 300}, 'slow');
$('#theDiv').animate({"width"  : 200}, 'slow');

Ao colocar mais valores no parâmetro do objeto, você pode animar mais de uma propriedade por vez. Vejamos um exemplo que modifica a largura e a altura ao mesmo tempo:

$('#theDiv').animate({"height" : 250, width:250 }, 'slow');

Camel Case

Note que algumas das propriedades CSS são escritas em maiúsculas e minúsculas. Isso ocorre porque as propriedades do objeto JavaScript não podem incluir hífens. Para colocá-los entre hífens, você deve usar uma combinação de letras maiúsculas e minúsculas:

$('#theDiv').css({ borderWidth : 1 });

Você também pode indicar o nome da propriedade entre aspas:

$('#theDiv').css({ "border-width" : 1 });

Função stop()

Você pode parar uma animação usando a função stop():

$('#elDiv').stop();

Esta função vai servir se você estiver prestes a iniciar uma nova animação e não quiser que as duas animações sejam executadas ao mesmo tempo.

Aprenda jQuery!

jQuery é usado para criar animações e efeitos visuais em páginas e aplicações web. É muito útil no Front-End, para desenvolver a parte visível, e no Full Stack, para criar sites do zero. Também é popular entre os desenvolvedores com pouca experiência em programação. Eles podem usar jQuery para adicionar uma funcionalidade avançada aos seus projetos.

Em nosso curso online Full Stack Designer você aprenderá a dominar as ferramentas jQuery, JavaScript e React para simplificar a navegação, tornar seus projetos funcionais e interativos. Você vai trabalhar com HTML, CSS e frameworks para criar interfaces mais inteligentes. Durante o curso, você colocará em prática o que aprendeu, desenvolvendo um projeto profissional que vai enriquecer seu portfólio.

Se você quer ficar por dentro de mais conteúdos sobre a área de Programação & Data, não perca os nossos webinars! Eles acontecem semanalmente, abertos ao público e gratuitos. Aproveite!