Introducción a Jquery

Este tutorial de jQuery ha sido creado por programadores expertos que utilizan Javascript y jQuery en sus proyectos. Esta orientado a los principiantes de jQuery para ayudarles a entender desde lo básico hasta lo más avanzado de este Framework. Después de completar este tutorial, tendrás bastante nivel en el framework jQuery.

¿Qué es jQuery?

jQuery es una librería de Javascript ligera, rápida y concisa. Esta biblioteca fue creada por John Resig en 2006 y fue diseñada para simplificar el recorrido y la manipulación del árbol DOM de HTML, así como el manejo de eventos, la animación CSS y Ajax.

jQuery se puede utilizar para encontrar un elemento HTML particular en el documento HTML con un determinado ID, clase o atributo y más tarde podemos utilizar jQuery para cambiar uno o más de los atributos del mismo elemento como el color, la visibilidad, etc. jQuery también se puede utilizar para hacer una página web interactiva respondiendo a un evento como un clic del ratón.

jQuery es un software libre y de código abierto que está bajo la permisiva licencia MIT. En abril de 2021, jQuery es utilizado por el 77,8% de los 10 millones de sitios web más populares.

jQuery ha sido desarrollado con los siguientes principios:

• Separación de JavaScript y HTML, que anima a los desarrolladores a separar completamente el código JavaScript del marcado HTML.
• La brevedad y la claridad promueven características como las funciones encadenables y los nombres abreviados de las funciones.
• Eliminación de las incompatibilidades entre navegadores, por lo que los desarrolladores no tienen que preocuparse por la compatibilidad de los navegadores mientras escriben código con la biblioteca jQuery.
• Extensibilidad, lo que significa que nuevos eventos, elementos y métodos pueden ser fácilmente añadidos en la biblioteca jQuery y luego reutilizados como un plugin.

Soporte para navegadores

A partir de abril de 2022, jQuery 3.0 es compatible con las «versiones actuales» de Firefox, Chrome, Safari y Edge, así como con Internet Explorer 9 y las versiones más recientes. En los móviles, es compatible con iOS 7 y versiones más recientes, y con Android 4.0 y versiones más recientes.

Trabajos con jQuery y Javascript

Tanto jQuery como Javascripts son muy demandados y todas las principales aplicaciones web están haciendo uso de jQuery de una u otra manera. Hemos explorado muchos sitios web de empleo importantes antes de escribir este tutorial y hemos encontramos que hay numerosas vacantes en todo el mundo en empresas multinacionales.

El salario medio anual de un desarrollador de Javascript y jQuery es de unos 32.000-42.000 euros. Aunque puede variar dependiendo de la ubicación.

Por lo tanto, podrías ser empleado potencial de cualquier gran empresa. Hemos desarrollado un gran material de aprendizaje para jQuery que te ayudará a prepararte para las entrevistas técnicas y los exámenes basados en jQuery. Así que, empieza a aprender jQuery usando nuestro sencillo tutorial en cualquier momento y lugar, a tu ritmo.

Antes de empezar

Antes de continuar con este tutorial, deberías tener conocimientos básicos de HTML, CSS, JavaScript, Document Object Model (DOM) y cualquier editor de texto. Como vamos a desarrollar una aplicación basada en la web utilizando jQuery, será bueno que tengas conocimientos sobre cómo funcionan Internet y las aplicaciones basadas en la web.

Características de jQuery

jQuery simplifica varias tareas de un programador escribiendo menos código. Aquí está la lista de las características importantes.

• Manipulación del DOM – jQuery facilita la selección de elementos del DOM, negociándolos y modificando su contenido mediante el uso de un motor de selección de código abierto para todos los navegadores llamado Sizzle.
• Gestión de eventos – jQuery ofrece una forma elegante de capturar una amplia variedad de eventos, como por ejemplo que un usuario haga clic en un enlace, sin necesidad de abarrotar el propio código HTML con manejadores de eventos.
• Soporte de AJAX – jQuery ayuda mucho a desarrollar un sitio responsive y rico en características usando la tecnología AJAX.
• Animaciones – jQuery viene con un montón de efectos de animación incorporados que puede utilizar en sus sitios web.
• Ligero – El jQuery es una librería muy ligera, alrededor de 19KB de tamaño (minificado y gzipped).
• Soporte para varios navegadores – jQuery tiene soporte para varios navegadores, y funciona bien en IE 6.0+, FF 2.0+, Safari 3.0+, Chrome y Opera 9.0+.
• Última tecnología – jQuery soporta selectores CSS3 y sintaxis XPath básica.

Configuración de jQuery

Hay dos maneras de utilizar jQuery.

1. Instalación local – Puedes descargar la biblioteca jQuery en tu ordenador e incluirla en tu código HTML.
2. Instalación mediante CDN – Puedes incluir la biblioteca jQuery en el código HTML directamente desde la Red de Entrega de Contenido (CDN).

Instalación local de jQuery

Puedes descargar la última versión de jQuery en su web e incluir la librería descargada en su código. Te sugerimos que descargues la versión comprimida de la librería para un mejor rendimiento.

1. Ve a https://jquery.com/download/ para descargar la última versión disponible.
2. Ahora pon el archivo jquery-3.6.1.min.js descargado en un directorio del sitio web que estas creando, por ejemplo /jquery/jquery-3.6.1.js.
3. Finalmente, incluye este archivo en tu HTML como se muestra a continuación.

* {{tudominio.com}} debes sustituirlo por el tuyo, ya sea el local o el de tu web.

Ejemplo

<!doctype html>
<html>
<head>
<title>Ejemplo de integración de jQuery</title>
<script src="https://{{tudominio.com}}/jquery/jquery-3.6.1.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hola mundo!");
   });
</script>
</head>
<body>
   <!-- Tu código HTML va aquí -->
</body>
</html>

Instalación basada en CDN

Puedes incluir la biblioteca jQuery en tu código HTML directamente desde un CDN. Hay varios CDN que proporcionan un enlace directo a la última versión de jQuery que puedes incluir en tu aplicación.

Ejemplo

Ahora vamos a reescribir el ejemplo anterior utilizando la biblioteca jQuery de la CDN de Google.

<!doctype html>
<html>
<head>
<title>Ejemplo de integración de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hola mundo CDN!");
   });
</script>
</head>
<body>
   <!-- Tu código HTML va aquí -->
</body>
</html>
<html>

¿Cómo usar las funciones de jQuery?

Como casi todo lo que hacemos al usar jQuery, necesitamos asegurarnos de que empezamos a añadir eventos, etc., tan pronto como el DOM esté cargado y listo.

Si quieres que un evento funcione en tu página, debes llamarlo dentro de la función $(document).ready(). Todo lo que está dentro de ella se cargará cuando el DOM esté cargado y antes de que se cargue el contenido de la página.

Para ello, registramos un evento de la siguiente manera:

$(document).ready(function() {
   // se ejecuta el código aquí dentro cuando el DOM está cargado
});

Para llamar a cualquier función de jQuery, utiliza las etiquetas script de HTML como se muestra a continuación.

<!doctype html>
<html>
<head>
<title>Ejemplo de integración de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function() {
          alert("Hola mundo!");
      });
   });
</script>
</head>
<body>
   <div>Click aquí para ver el mensaje</div>
</body>
</html>

¿Cómo utilizar los scripts personalizados?

Es mejor escribir tu código personalizado en un archivo JavaScript, por ejemplo: custom.js

$(document).ready(function() {
   $("div").click(function() {
      alert("Hola mi gente!");
   });
});

Guarda este archivo en el directorio /jquery (por ejemplo) y luego podremos incluir el archivo custom.js en el HTML.

<!doctype html>
<html>
<head>
<title>Ejemplo de integración de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="./jquery/custom.js"></script>
</head>
<body>
   <div>Click aquí para ver el mensaje</div>
</body>
</html>

Uso de varias librerías

Puedes utilizar varias librerías juntas sin que entren en conflicto unas con otras. Por ejemplo, puedes usar jQuery y MooTool juntas. Puede consultar el método jQuery noConflict para más detalles.