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

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

Print Friendly, PDF & Email
Como acoplar jQuery en un documento web y errores típicos a evitar
Valora esta entrada
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>.
llamada de jquery en un documento web
Ejemplo de acoplamiento jQuery mediante CDN.

¡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

Entradas relacionadas:

Desactivar el envío de un formulario con JQuery y preventDefault()
- 312
Ejemplo práctico de como desactivar el envío de un formulario que pide aceptación RGPD (antigua LOPD) mediante jQuery y preventDefault()
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 223
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Como comprobar si una página ha cargado la librería jQuery
- 162
El primer paso para empezar a escribir jQuery es tener la certeza de que la librería efectivamente se está cargando. No serías el primero que lo hace todo bien pero no le funciona nada porqué le falla...
¿Que es jQuery?
- 214
Bienvenidos a un completo tutorial ordenado por dificultad creciente para todos aquellos que queráis aprender jQuery. Previamente es aconsejable un buen dominio de html, css y javascript. Todos estos ...
Como llamar mediante jQuery a los nodos de un documento web
- 168
En esta entrada vemos como llamar nodos del DOM mediante jQuery haciendo la transición desde javascript. Vemos las similitudes y diferencies en Javascript y como podemos hacer la transición de JS a jQ...
Como navegar entre los nodos de un documento web mediante jQuery
- 176
Hay casos en los que es más práctico navegar por el DOM para llegar hasta los nodos con los que queremos interactuar. Comparamos los métodos usados en javascript puro con los que usaríamos en jQuery....
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.