O que é jQuery e como usá-lo?

Última atualização
17 ago 2023
Tempo de leitura
8 min
O que é jQuery

Automatize a programação de rotina e simplifique tarefas complexas com jQuery.

Profissão: Full Stack Designer

Economize R$320 na compra do seu curso. Use o código copied blog2025 e comece a aprender!

Torne-se um profissional completo capaz de trabalhar com habilidades de UX/UI e Front-end. Você vai aprender desde a criação da interface até a programação de produtos digitais. Aumente as suas chances de empregabilidade numa das áreas mais promissoras do mercado e se destaque como um Full Stack Designer.

14 messes
12x de
R$ 489,58
(parcelas sem juros no cartão de crédito)
Investimento pelo curso completo
R$ 5.875
R$ 9.790
Inscreva-se no curso

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.

Fonte: Unsplash

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.

Fonte: Unsplash

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');

Fonte: Unsplash

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!

Página inicial / Programação & Data
Equipe EBAC

O conteúdo

Profissão: Full Stack Designer

Economize R$320 na compra do seu curso. Use o código copied blog2025 e comece a aprender!

Torne-se um profissional completo capaz de trabalhar com habilidades de UX/UI e Front-end. Você vai aprender desde a criação da interface até a programação de produtos digitais. Aumente as suas chances de empregabilidade numa das áreas mais promissoras do mercado e se destaque como um Full Stack Designer.

14 messes
12x de
R$ 489,58
(parcelas sem juros no cartão de crédito)
Investimento pelo curso completo
R$ 5.875
R$ 9.790
Inscreva-se no curso
Cadastre-se Cadastre-se Cadastre-se Cadastre-se Cadastre-se

Artigos Relacionados

Kotlin vs Java: Qual é a diferença?

Se você está começando no mundo da programação para Android ou quer entender qual linguagem escolher para os seus projetos, provavelmente já se perguntou: Kotlin ou Java? Ambas são usadas no desenvolvimento para a plataforma Android, mas possuem diferenças importantes que afetam a produtividade, segurança e desempenho. Vamos entender estas diferenças para que você possa tomar a melhor decisão.

05 maio 2025
14 min
WordPress: O que é e como funciona — Um guia completo

Se você acha que WordPress é só para blogs amadores, prepare-se para mudar de ideia. Esta plataforma é a base de milhões de sites no mundo – de pequenos negócios a gigantes como Sony e The New Yorker. Neste artigo, você vai entender como o WordPress funciona, o que é possível criar com ele e por que tantas empresas confiam nessa tecnologia. Vamos explorar seus recursos, plugins essenciais e até exemplos de sites famosos que usam esta ferramenta. Se você quer construir um site profissional, rápido e funcional, este guia vai te mostrar como.

05 maio 2025
13 min
Como Aprender a Programar e Conseguir um Emprego como Programador?

Você já pensou em trabalhar em qualquer lugar do mundo, ganhar um bom salário e ter uma carreira com alta demanda? A programação oferece tudo isto e muito mais. Com a tecnologia evoluindo a cada dia, empresas de todos os setores precisam de profissionais que saibam desenvolver softwares, sites e aplicativos. Mas por onde começar? Como aprender a programar e conseguir um emprego? Neste guia, vamos mostrar o que faz um programador, onde ele pode trabalhar e como ingressar nessa área promissora.

05 maio 2025
7 min
O que é Regressão Logística?

Imagine que você precisa prever se um cliente comprará um produto, se um paciente tem risco de desenvolver uma doença ou se um e-mail é spam. Como transformar dados em respostas objetivas? A regressão logística faz exatamente isto. Ela não apenas fornece previsões, mas atribui probabilidades a cada resultado, tornando a tomada de decisão mais precisa. Neste artigo, você vai entender como esse modelo funciona, as suas aplicações práticas em diferentes setores e como analisá-lo corretamente.

05 maio 2025
15 min
Pandas em Python: O que é e como usar a biblioteca

Você já se pegou tentando organizar ou analisar grandes volumes de dados e se sentiu perdido em meio a tabelas e cálculos? Se sim, então o Pandas é a ferramenta que você precisa! Como uma das bibliotecas mais poderosas do Python, o Pandas torna a manipulação de dados simples, rápida e intuitiva. Seja você um iniciante tentando organizar as suas informações ou um especialista buscando otimizar processos, o Pandas oferece soluções eficazes para trabalhar com dados estruturados. Neste artigo, vamos explorar as suas principais funcionalidades, como usá-lo no seu dia a dia e como ele pode transformar a forma como você lida com dados.

05 maio 2025
7 min
O que é o NumPy em Python e onde ele é utilizado?

Se você trabalha com Python e precisa lidar com números, o NumPy é a ferramenta que vai transformar a sua vida. Ele permite fazer cálculos matemáticos de forma muito mais rápida e eficiente do que as listas comuns do Python. Mas o que exatamente torna o NumPy tão poderoso? Neste artigo, vamos explorar as suas principais funcionalidades e mostrar por que essa biblioteca é indispensável para análise de dados, machine learning, computação gráfica e muito mais. Se você quer entender como otimizar seu código e trabalhar com grandes volumes de informação sem dor de cabeça, continue lendo!

05 maio 2025
6 min