jQuery / Carregar e usar jQuery no HTML

Carregue jQuery por script antes do código dependente. Pode escolher CDN ou arquivo local baixado. Disponibilidade da biblioteca e preparação dos elementos HTML são requisitos distintos.

Escolher arquivo e ordem

jQuery é uma biblioteca JavaScript. Use script e src, selecione elementos e chame métodos. Não precisa de tag especial, npm ou compilação nestes exercícios.

Fixa-se o script normal 4.0.0 dos downloads oficiais. min significa comprimido, não funções diferentes. Slim omite Ajax e effects; escolha conforme uso posterior. Mostrar e ocultar imediatamente aqui não usa efeitos temporizados nem Ajax.

Carregue a instância desejada uma vez. Outra cópia pode separar plugins e dados no site. Confira o exemplo independente antes das dependências existentes.

Exemplo CDN completo em um arquivo

CDN, Content Delivery Network, distribui arquivos externamente. Salve UTF-8 cdn-demo.html e abra com Internet. Não precisa de servidor nem pacotes. Escolha versão e script normal na lista oficial de CDN. Executado no Edge para Windows separadamente com 3.7.1 e 4.0.0.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Load jQuery and use it</title>
  <style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; }</style>
</head>
<body>
  <button type="button" id="toggle" aria-controls="message" aria-expanded="true">Toggle message</button>
  <button type="button" id="reset">Reset</button>
  <p id="message">This message is controlled by jQuery.</p>
  <pre id="status" aria-live="polite">Waiting for scripts.</pre>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
jQuery(function ($) {
  let clicks = 0;
  function report() {
    const visible = $("#message").is(":visible");
    $("#toggle").attr("aria-expanded", String(visible));
    $("#status").text(`ready=true\nmessage visible=${visible}\nclicks=${clicks}`);
  }
  $("#toggle").on("click", function () { clicks++; $("#message").toggle(); report(); });
  $("#reset").on("click", function () { clicks = 0; $("#message").show(); report(); });
  report();
});
  </script>
</body>
</html>

Saída correta. Waiting for scripts. vem do HTML inicial; somente código executado muda para ready=true.

ready=true
message visible=true
clicks=0

1. Toggle message oculta o parágrafo: message visible=false, clicks=1.
2. Outra ativação mostra com clicks=2. aria-expanded acompanha. Foco e Enter também funcionam.
3. Reset restaura texto e zero sem recarregar.

O script normal posterior executa o dependente. O callback de DOM pronto jQuery(function ($) { ... }) espera o Document Object Model manipulável. $ local é jQuery. Não espera o arquivo jQuery: chamar antes da biblioteca falha.

Arquivos locais com defer ordenado

Baixe a mesma versão oficial para evitar CDN. index.html e app.js ficam juntos, jquery-4.0.0.min.js em vendor. Confira extensões reais sem .js.txt acidental.

1. Salve biblioteca como vendor/jquery-4.0.0.min.js, sem sobrescrever com app.js.
2. Salve o HTML completo a seguir em index.html. ./vendor/ é relativo ao HTML.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local jQuery with ordered deferred scripts</title>
  <script defer src="./vendor/jquery-4.0.0.min.js"></script>
  <script defer src="./app.js"></script>
  <style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; }</style>
</head>
<body>
  <button type="button" id="toggle" aria-controls="message" aria-expanded="true">Toggle message</button>
  <button type="button" id="reset">Reset</button>
  <p id="message">This message is controlled by jQuery.</p>
  <pre id="status" aria-live="polite">Waiting for scripts.</pre>
</body>
</html>

Salve este JavaScript completo ao lado como app.js, sem tags script.

jQuery(function ($) {
  let clicks = 0;
  function report() {
    const visible = $("#message").is(":visible");
    $("#toggle").attr("aria-expanded", String(visible));
    $("#status").text(`ready=true\nmessage visible=${visible}\nclicks=${clicks}`);
  }
  $("#toggle").on("click", function () { clicks++; $("#message").toggle(); report(); });
  $("#reset").on("click", function () { clicks = 0; $("#message").show(); report(); });
  report();
});

index.html dá o mesmo resultado, conferido com arquivo local real 4.0.0 no Edge para Windows. Após preparar, não precisa de CDN externo.

ready=true
message visible=true
clicks=0

Scripts externos normais defer executam após análise HTML em ordem documental: biblioteca e app. async segue downloads concluídos e não garante dependência. defer em código inline não substitui o arquivo externo mostrado.

Verificar e diagnosticar

Nas ferramentas, typeof window.jQuery deve ser function e jQuery.fn.jquery a versão. Se undefined, corrija carregamento antes de ler versão. Network mostra URL, resposta e conteúdo: HTML de erro com nome .js não é biblioteca.

Em «jQuery is not defined», confira caminho, bloqueio e ordem. Bloquear CDN deixa Waiting for scripts. e o parágrafo visível. Localmente confira maiúsculas, pastas e extensão. Mistura HTTPS/HTTP e políticas de script aparecem em Network/Console.

Em «$ is not a function», confira outros proprietários. Carregamento correto não resolve id errado ou eventos duplicados. Separe disponibilidade, seleção e execução.

Antes de publicar, confira mudanças de versão e plugins preservando a conexão anterior. Em CMS ou framework que já gerencia jQuery, examine registro e dependências antes de adicionar CDN.