jQuery: descripción general

¿Qué es jQuery?

jQuery es una biblioteca JavaScript rápida y concisa creada por John Resig en 2006 con un bonito lema: Write less, do more. jQuery simplifica el recorrido de documentos HTML, el manejo de eventos, la animación y las interacciones Ajax para un desarrollo web rápido. jQuery es un conjunto de herramientas de JavaScript diseñado para simplificar varias tareas escribiendo menos código. Aquí está la lista de características principales importantes compatibles con jQuery:

  • DOM manipulation - jQuery facilitó la selección de elementos DOM, negociarlos y modificar su contenido mediante el uso del motor de selección de código abierto entre navegadores llamado Sizzle.

  • Event handling - jQuery ofrece una forma elegante de capturar una amplia variedad de eventos, como un usuario que hace clic en un enlace, sin necesidad de saturar el código HTML con controladores de eventos.

  • AJAX Support - El jQuery le ayuda mucho a desarrollar un sitio receptivo y rico en funciones utilizando tecnología AJAX.

  • Animations - El jQuery viene con muchos efectos de animación incorporados que puede utilizar en sus sitios web.

  • Lightweight - La jQuery es una biblioteca muy liviana, de aproximadamente 19 KB de tamaño (minificada y comprimida con gzip).

  • Cross Browser Support - jQuery es compatible con varios navegadores y funciona bien en IE 6.0+, FF 2.0+, Safari 3.0+, Chrome y Opera 9.0+

  • Latest Technology - jQuery admite selectores CSS3 y sintaxis XPath básica.

¿Cómo usar jQuery?

Hay dos formas de usar jQuery.

  • Local Installation - Puede descargar la biblioteca jQuery en su máquina local e incluirla en su código HTML.

  • CDN Based Version - Puede incluir la biblioteca jQuery en su código HTML directamente desde Content Delivery Network (CDN).

Instalación local

  • Ve a la https://jquery.com/download/ para descargar la última versión disponible.

  • Ahora pon descargado jquery-2.1.3.min.js archivo en un directorio de su sitio web, por ejemplo, / jquery.

Ejemplo

Ahora puede incluir la biblioteca jquery en su archivo HTML de la siguiente manera:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Esto producirá el siguiente resultado:

Versión basada en CDN

Puede incluir la biblioteca jQuery en su código HTML directamente desde Content Delivery Network (CDN). Google y Microsoft ofrecen entrega de contenido para la última versión.

Estamos utilizando la versión de Google CDN de la biblioteca a lo largo de este tutorial.

Ejemplo

Ahora reescribamos el ejemplo anterior usando la biblioteca jQuery de Google CDN.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Esto producirá el siguiente resultado:

¿Cómo llamar a las funciones de una biblioteca jQuery?

Como casi todo lo que hacemos cuando usamos jQuery lee o manipula el modelo de objetos del documento (DOM), debemos asegurarnos de que comenzamos a agregar eventos, etc., tan pronto como el DOM esté listo.

Si desea que un evento funcione en su página, debe llamarlo dentro de la función $ (document) .ready (). Todo lo que contiene se cargará tan pronto como se cargue el DOM y antes de que se carguen los contenidos de la página.

Para hacer esto, registramos un evento listo para el documento de la siguiente manera:

$(document).ready(function() {
   // do stuff when DOM is ready
});

Para llamar a cualquier función de la biblioteca jQuery, use etiquetas de script HTML como se muestra a continuación:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Esto producirá el siguiente resultado:

¿Cómo utilizar scripts personalizados?

Es mejor escribir nuestro código personalizado en el archivo JavaScript personalizado: custom.js, como sigue -

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

Ahora podemos incluir custom.js archivo en nuestro archivo HTML de la siguiente manera:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Esto producirá el siguiente resultado:

Usando varias bibliotecas

Puede utilizar varias bibliotecas todas juntas sin entrar en conflicto entre sí. Por ejemplo, puede usar las bibliotecas javascript jQuery y MooTool juntas. Puede consultar el método jQuery noConflict para obtener más detalles.

Lo que sigue ?

No se preocupe demasiado si no entendió los ejemplos anteriores. Los comprenderá muy pronto en los capítulos siguientes.

El próximo capítulo trataría de cubrir algunos conceptos básicos que provienen de JavaScript convencional.