jQuery / Cargar y usar jQuery en HTML

Cargue jQuery mediante script antes de ejecutar el código dependiente. Puede elegir CDN o archivo local descargado. Disponibilidad de biblioteca y preparación de elementos HTML son requisitos distintos.

Elegir archivo y orden

jQuery es una biblioteca JavaScript. Use script y src, seleccione elementos y llame métodos. No requiere etiqueta especial, npm ni compilación para estos ejercicios.

Se fija el script normal 4.0.0 de las descargas oficiales. min significa comprimido, no funciones diferentes. Slim omite Ajax y effects; elija según necesidades posteriores. Mostrar y ocultar inmediatamente aquí no usa efectos temporizados ni Ajax.

Cargue una vez la instancia deseada. Añadir otra copia a un sitio puede separar plugins y datos. Pruebe primero el archivo independiente y después sus dependencias.

Ejemplo CDN completo en un archivo

CDN, Content Delivery Network, sirve archivos externamente. Guarde UTF-8 cdn-demo.html y abra con Internet. No necesita servidor ni paquetes. Elija versión y script normal en la lista oficial de CDN. Ejecutado en Edge para Windows por separado con 3.7.1 y 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>

Salida correcta. Waiting for scripts. viene del HTML inicial; solo el código ejecutado lo cambia a ready=true.

ready=true
message visible=true
clicks=0

1. Toggle message oculta el párrafo: message visible=false, clicks=1.
2. Otra activación lo muestra con clicks=2. aria-expanded acompaña. Foco y Enter también funcionan.
3. Reset restaura texto y cero sin recargar.

El script normal posterior ejecuta código dependiente. El callback de DOM listo jQuery(function ($) { ... }) espera al Document Object Model manipulable. $ local es jQuery. No espera el archivo jQuery: llamarlo antes de cargar la biblioteca falla.

Archivos locales con defer ordenado

Descargue la misma versión oficial para evitar CDN. index.html y app.js van juntos, jquery-4.0.0.min.js en vendor. Compruebe extensiones reales sin .js.txt accidental.

1. Guarde biblioteca como vendor/jquery-4.0.0.min.js, sin sobrescribirla con app.js.
2. Guarde el HTML completo siguiente en index.html. ./vendor/ es relativo al 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>

Guarde este JavaScript completo al lado como app.js, sin etiquetas 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 da el mismo resultado, comprobado con el archivo local real 4.0.0 en Edge para Windows. Tras preparar, no necesita CDN externo.

ready=true
message visible=true
clicks=0

Scripts externos normales defer se ejecutan después del análisis HTML en orden documental: biblioteca y app. async sigue descargas terminadas y no garantiza dependencia. defer en código inline no sustituye el archivo externo mostrado.

Verificar y diagnosticar

En herramientas, typeof window.jQuery debe ser function y jQuery.fn.jquery la versión. Si undefined, arregle carga antes de leer versión. Network muestra URL, respuesta y contenido: HTML de error con nombre .js no es biblioteca.

Ante «jQuery is not defined», revise ruta, bloqueo y orden. Bloquear CDN deja Waiting for scripts. y el párrafo visible. Localmente revise mayúsculas, carpetas y extensión. Mezcla HTTPS/HTTP y políticas de script también aparecen en Network/Console.

Ante «$ is not a function», compruebe otros propietarios. Una carga correcta no arregla id incorrecto o eventos duplicados. Separe disponibilidad, selección y ejecución.

Antes de desplegar, revise cambios de versión y plugins conservando la conexión anterior. En CMS o framework que ya gestiona jQuery, revise registro y dependencias antes de añadir CDN.