jQuery: o que ele resolvia, e o que o JS já faz

Esta é a única página do mapa que começa por uma pergunta de data. O jQuery nasceu em 2006 para tapar buracos do navegador daquela época, e boa parte desses buracos o JavaScript já tapou sozinho. Sobrou um pedaço que ainda economiza linha, e é esse pedaço que a página mede.

O que jQuery resolve

Antes dele, a mesma tarefa exigia dois códigos diferentes na mesma tela. Registrar um clique tinha um caminho no Firefox e outro no Internet Explorer, e pegar todos os elementos de uma classe pedia um laço escrito na mão, porque document.querySelectorAll só apareceu de forma parcial no Internet Explorer 8 e completa a partir do 9. Quem escrevia front end gastava metade do tempo contornando navegador em vez de resolver o problema de quem usava a página.

O jQuery apagou essa camada. Uma API só, igual em todos os navegadores da época, com o mesmo seletor que você já escrevia no CSS. E um detalhe que sobreviveu a tudo: o método aplicado a uma seleção age em todos os elementos dela, sem laço nenhum. É a economia que ainda faz gente escolher jQuery hoje.

Os conceitos que você precisa antes da primeira linha

• O cifrão é apelido. $ aponta para o mesmo objeto que jQuery. As duas formas fazem a mesma coisa, e jQuery.noConflict() devolve o $ para outra biblioteca que queira o nome. Ver o cifrão numa página não significa que aquilo é sintaxe de JavaScript, significa que uma biblioteca ocupou aquele nome.
• Seleção. $(".tarefa") devolve um objeto jQuery com todos os elementos que casaram, mesmo que sejam zero. Um objeto jQuery vazio nunca dá erro ao receber um método, ele apenas não faz nada. Quem vem do JavaScript puro estranha, porque lá um elemento inexistente estoura na hora.
• Iteração implícita. A documentação oficial diz a regra em uma frase: setters afetam todos os elementos da seleção, getters devolvem o valor apenas do primeiro. Escrever .addClass() muda os três itens de uma vez, e ler .text() devolve só o texto do primeiro.
• Encadeamento. Todo método que devolve um objeto jQuery aceita o método seguinte grudado nele. $(".tarefa").addClass("feita").fadeIn() percorre a mesma seleção duas vezes sem você repetir o seletor. A própria documentação recomenda dosar, porque cadeia longa fica difícil de depurar.
• Documento pronto. Código que procura elemento precisa esperar o HTML existir. A forma recomendada desde a versão 3.0 é passar a função direto para o cifrão, $(function () { ... }). O formato antigo $(document).ready(fn) continua funcionando e está marcado como depreciado na documentação.

A biblioteca por dentro: seleção, encadeamento e eventos

O jQuery inteiro gira em torno de uma função: $(). Você passa um seletor igual ao do CSS, recebe de volta um objeto jQuery com os elementos encontrados, e chama métodos nele. Como quase todo método devolve o próprio objeto, as chamadas se encadeiam: selecione uma vez, aplique três efeitos na mesma linha.

• Seleção: $(".card"), $("#menu"), $("ul li:first"). A sintaxe é a do CSS que você já sabe.
• Manipulação: .text(), .addClass(), .attr(), .append() mudam conteúdo, classe, atributo e estrutura sem você tocar na API verbosa do DOM.
• Evento e efeito: .on("click", fn) registra o ouvinte, e .fadeOut() e .slideToggle() animam. E o detalhe da história: $.ajax popularizou buscar dado sem recarregar a página antes de o navegador ter fetch.

// seleção, encadeamento e evento em oito linhas
$(function () {                          // espera o DOM ficar pronto
  $("#aviso")
    .addClass("destaque")                // encadeamento:
    .text("Bem-vindo de volta!")         // mesmo objeto,
    .fadeIn(400);                        // três ações

  $(".fechar").on("click", function () {
    $(this).closest(".card").fadeOut();  // this = quem foi clicado
  });
});

Vale ler junto com a seção anterior: o que o jQuery resolvia com essa elegância o JavaScript moderno absorveu em querySelector, classList e fetch. Você aprende jQuery hoje pra manter o muito código que existe escrito nele, e essa é uma habilidade real de mercado.

Nada para instalar e nenhum terminal. Um arquivo no disco, o navegador e uma conexão de internet para o navegador baixar a biblioteca do CDN oficial.

1. Crie uma pasta chamada hello-jquery e, dentro dela, um arquivo chamado index.html.

2. Cole isto no arquivo e salve:

   <!DOCTYPE html>
   <html lang="pt-BR">
     <head>
       <meta charset="UTF-8" />
       <title>jQuery na mão</title>
       <style>
         body { font-family: system-ui, sans-serif; padding: 24px; }
         .tarefa { padding: 6px 10px; border: 1px solid #ccc; margin-bottom: 6px; list-style: none; }
         .feita { background: #d9f2e0; text-decoration: line-through; color: #2f6f4a; }
       </style>
     </head>
     <body>
       <h1>Olá, mundo</h1>
       <ul>
         <li class="tarefa">Estudar HTML</li>
         <li class="tarefa">Estudar CSS</li>
         <li class="tarefa">Estudar JavaScript</li>
       </ul>
       <button id="marcar">Marcar tudo com jQuery</button>
       <button id="limpar">Limpar com JavaScript puro</button>
       <p id="placar"></p>
   
       <script
         src="https://code.jquery.com/jquery-4.0.0.min.js"
         integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao="
         crossorigin="anonymous"></script>
       <script>
         $(function () {
           $("#marcar").on("click", function () {
             $(".tarefa").addClass("feita");
             $("#placar").text("jQuery marcou " + $(".feita").length + " itens, versao " + $.fn.jquery);
           });
   
           document.querySelector("#limpar").addEventListener("click", function () {
             document.querySelectorAll(".tarefa").forEach(function (el) {
               el.classList.remove("feita");
             });
             document.querySelector("#placar").textContent =
               "JavaScript puro limpou tudo, sobraram " +
               document.querySelectorAll(".feita").length + " itens marcados";
           });
         });
       </script>
     </body>
   </html>

3. Dê dois cliques em index.html. Ele abre no navegador padrão. O atributo integrity carrega o hash publicado pelo próprio projeto, e o navegador recusa o arquivo se o conteúdo baixado não bater com ele.

4. Clique em Marcar tudo com jQuery. Depois clique em Limpar com JavaScript puro.

// jQuery, 31 caracteres
$(".tarefa").addClass("feita");

// JavaScript puro hoje, 78 caracteres
document.querySelectorAll(".tarefa").forEach(el => el.classList.add("feita"));

Vale medir o preço dessa economia antes de decidir. O arquivo minificado do jQuery 4.0.0 tem 78.748 bytes, que o navegador baixa toda vez que a página abre pela primeira vez. Numa página que faz duas ou três trocas de classe, a conta pesa. Num painel cheio de eventos, animação e requisição, ela some.

O que jQuery não é

O jQuery aparece em lista de vaga do lado de React, Angular e Vue, como se fosse concorrente deles. O site oficial se descreve como JavaScript library, e essa palavra separa as duas coisas. Não existe componente, não existe estado, não existe rota, não existe reatividade. Nada se redesenha sozinho quando um dado muda. Toda alteração de tela é uma linha que você escreveu mandando alterar. Trocar React por jQuery num app com muitas telas devolve para o seu código o trabalho que o framework fazia.

A segunda confusão anda no sentido oposto e diz que o projeto morreu. A versão 4.0.0 saiu em 17 de janeiro de 2026, quase dez anos depois da 3.0, com o código migrado para módulos ES, suporte a Trusted Types e uma limpeza de APIs antigas. jQuery.trim, jQuery.isArray, jQuery.isFunction e jQuery.parseJSON deixaram de existir, porque o JavaScript já tem String.prototype.trim, Array.isArray e JSON.parse. Código antigo copiado de tutorial de 2015 quebra nessa versão.

Fontes

• jQuery, site oficial, onde o projeto se define como "a fast, small, and feature-rich JavaScript library". Conferida em 15/08/2026.
• jQuery Blog, anúncio do jQuery 4.0.0, a data do lançamento, a migração para módulos ES e a lista de APIs removidas. Conferida em 15/08/2026.
• jQuery CDN, releases, de onde saíram a URL e o hash de integridade usados no hello world. Conferida em 15/08/2026.
• jQuery API, .addClass(), que descreve o método como "adds the specified class(es) to each element in the set of matched elements". Conferida em 15/08/2026.
• jQuery Learn Center, Working with Selections, a regra de que setters afetam toda a seleção e getters devolvem só o primeiro, e a ressalva sobre encadeamento longo. Conferida em 15/08/2026.
• jQuery API, .ready(), que marca $(document).ready(handler) como depreciado desde a versão 3.0 e recomenda passar a função direto para o cifrão. Conferida em 15/08/2026.
• Can I use, querySelector, o suporte parcial no Internet Explorer 8 e completo a partir do 9. Conferida em 15/08/2026.
• MDN Web Docs, Document.querySelectorAll(), que devolve uma NodeList estática percorrida com forEach. Conferida em 15/08/2026.

O hello world desta página foi executado em 15/08/2026, com o arquivo servido em http://127.0.0.1 e aberto no Chromium. O jQuery baixado do CDN oficial respondeu $.fn.jquery igual a "4.0.0" e o arquivo minificado tem 78.748 bytes, com hash sha256 igual ao publicado em releases.jquery.com. O clique no primeiro botão deixou os três itens com fundo rgb(217, 242, 224) e text-decoration: line-through, e o placar mostrou "jQuery marcou 3 itens, versao 4.0.0". O clique no segundo botão zerou a contagem e o placar mostrou "JavaScript puro limpou tudo, sobraram 0 itens marcados". No console dessa versão, jQuery.trim, jQuery.isArray, jQuery.isFunction e jQuery.parseJSON responderam undefined, o que confirma as remoções do 4.0.0.

Para continuar

Se as duas linhas comparadas acima ainda parecem a mesma coisa, o caminho é JavaScript primeiro. Quem entende seletor, NodeList e evento lê jQuery em uma tarde, e o contrário quase nunca acontece. Na mesma prateleira está o Bootstrap, que durante anos veio de mãos dadas com o jQuery e hoje roda sem ele. Os dois aparecem no mapa da stack web, junto do resto.

O curso desta trilha está em preparação. A lista paga menos.

Os tutoriais daqui continuam gratuitos. O que está a caminho é um curso pago que transforma esse mapa em formação guiada, na ordem certa e com projeto. Deixe seu e-mail: você recebe os estudos novos gratuitos e, no lançamento, o desconto de quem entrou na lista primeiro.