Como acoplar jQuery en un documento web y errores típicos a evitar

Si has llegado a esta entrada seguramente tienes conocimientos o eres un experto en Javascript.

La forma como acoplamos jQuery en un documento html no difiere mucho de como lo haríamos con una hoja de estilos externa de CSS o igualmente como lo haríamos en Javascript.

Si no tienes muy claro como se hacía en JS te recomiendo darle un repaso a esta entrada.

Esta entrada te va a servir para repasar o para poner énfasis en dónde no deberías equivocarte.

Así que si no sabes dónde está el error que estás cometiendo esta entrada puede serte de interés y también esta otra dónde explico como comprobar si jQuery se está cargando correctamente.

Uso de 2 etiquetas script

jQuery es una librería de Javascript llena de funciones que simplifican sustancialmente la forma en la que estamos acostumbrados a trabajar en Javascript puro.

La versión 3.3.1 no comprimida para desarrollo tiene 10364 líneas de código.

Es completamente inviable copiar y pegar el código en un <script> en línea con el documento web.

La forma más práctica es importar el código haciendo uso del atributo src. <script src=»…»></script>

Hay 2 formas de hacerlo.

1. Generando una hoja externa que vamos a guardar en una carpeta dentro del directorio de carpetas de nuestra página web.
   1. Vamos a jQuery.com y abrimos el enlace de la versión de jQuery que nos interese. Si necesitamos compatibilidad para versiones antiguas de Explorer seleccionaremos 1.9 o anterior. Si no la necesitamos cogeremos 2.0 o posterior.
   2. Copiamos el código y lo pegamos.
2. Importando el código desde un CDN (Content Delivery Network). Algunos ejemplos son:
   1. Google CDN
   2. Microsoft CDN
   3. CDNJS CDN
   4. jsDelivr CDN

Si por lo que sea necesitas alguna versión antigua puedes encontrarla en este enlace.

A continuación ya estamos preparados para escribir el código jQuery que nos convenga. En este caso podemos hacerlo:

1. En línea con el código web.
2. Llamándolo desde una hoja externa (típicamente custom.js) del mismo modo que hacíamos anteriormente. Sería algo así como<script src=»js/custom.js»></script>

Preacuciones a considerar

Cuando escribas tu código jquery deberás tener en cuenta una serie de precauciones.

• Si usas <script src=»js/custom.js»></script> recuerda que desde el momento en que haces una llamada a una hoja externa el código que escribas entre las etiquetas html no se leerá.
• Custom.js o el código dentro de <script></script> debe escribirse a continuación de la importación del código jquery. De lo contrario no te funcionará nada.
• ¿En la cabecera o justo antes del cierre de </body>? Personalmente soy partidario de escribir justo antes del cierre de la etiqueta </body>.

¡Hey querido lector!

Que tal, ¿de momento fácil verdad? Ahora estaría bien que probaras de escribir alguna instrucción básica como $(document).ready(function(){window.alert(«saludo»)}) a ver que tal te funciona.

Si no es el caso… pásate por la entrada siguiente de este tutorial dónde te explico si has cargado bien jQuery.

¡Mañana un nuevo contenido!

Miniatura a partir de Kevin Bhagat en Unsplash