3.4. jQuery

jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que simplifica la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. jQuery es la biblioteca de JavaScript más utilizada.

jQuery es software libre y de código abierto, permitiendo su uso en proyectos libres y privados. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

Sin más para aprender y usar jQuery es necesario entender al menos dos conceptos básicos Selectores y JavaScript

Para cargar jQuery, o cualquier otra librería de JavaScript en nuestra página, podemos hacerlo o bien desde nuestro servidor o utilizando una CDN.

En el primer caso, tenemos que descargar el archivo jQuery desde el sitio web oficial, guardarlo dentro de nuestro proyecto. Por ejemplo hemos guardado el archivo dentro de una carpeta llamada js, la ruta sería la siguiente:

<script src='js/jquery-1.10.1.min.js'></script>

Si utilizamos una CDN, que es la opción recomendada para mejorar la velocidad de carga de la página, tenemos que indicar el enlace del servidor donde se encuentra el archivo jQuery.

Si usamos la CDN del sitio oficial de jQuery incluimos el siguiente script:

<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>

Y si usamos la CDN de Google:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

Otra práctica recomendada para mejorar la velocidad de carga de la página, es colocar las etiquetas <script> al final de la página justo antes de la etiqueta de cierre </body>, siempre que sea posible. De esta manera, primero carga el contenido de la página y a continuación el código JavaScript, con lo cual se consigue visualizar la página antes.

Como trabaja jQuery

No es posible interactuar de forma segura con el contenido de una página hasta que el documento no se encuentre preparado para su manipulación. jQuery permite detectar dicho estado a través de la declaración $(document).ready() de forma tal que el bloque se ejecutará sólo una vez que la página este disponible.

$(document).ready(function() {
  alert('¡El documento está preparado!');
});

Forma abreviada

$(function() {
  alert('¡El documento está preparado!');
});

El concepto más básico de jQuery es el de “seleccionar algunos elementos y realizar acciones con ellos”. La biblioteca soporta gran parte de los selectores CSS3 y varios más no estandarizados. En http://api.jquery.com/category/selectors/ se puede encontrar una completa referencia sobre los selectores de la biblioteca.

A continuación se muestran algunas técnicas comunes para la selección de elementos:

Selector animated

Descripción: Selecciona todos los elementos que están en el progreso de una animación en el momento en que el selector se ejecuta.

See the Pen MywrMZ by JOSE (@albatros) on CodePen.

Descripción: Galeria con efecto acordeón

See the Pen MywQpM by JOSE (@albatros) on CodePen.


Efectos de acordeón: jQuery slideDown(), slideUp() y slideToggle()

Estas funciones son muy usadas para hacer slideshows, sliders o el conocido efecto acordeón. Se pueden combinar con otras funciones de jQuery como los efectos fading (fadeIn, fadeTo, fadeToggle, fadeOut), con show() y hide() o con jQuery animate() para realizar animaciones CSS con elelementos del DOM.

Muestran u ocultan elementos de la web utilizando un efecto de deslizamiento.

slideDown muestra un elemento usando un efecto de deslizamiento, su sintaxis es:

$(elemento).slideDown(speed,easing,callback)

Donde:

slideUp()

Oculta un elemento usando un efecto de deslizamiento, su sintaxis es:

$(elemento).slideUp(speed,easing,callback)

slideToggle()

Muestra y/o oculta un elemento usando un efecto de deslizamiento, su sintaxis es la siguiente:

$(elemento).slideToggle(speed,easing,callback)

Donde:

<head>
  <meta charset="utf-8">
  <title>Efecto Acordeón</title>
  <script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>   
  <script src='0404Acordeon.js'></script>
  <link href='0404Acordeon.css'>
</head>
<body>
  <input type="button" id="up01" value="Ocultar con slideUp()">
  <input type="button" id="down01" value="Mostrar con slideDown()">
  <input type="button" id="up02" value="Ocultar con slideUp(4000">
  <input type="button" id="down02" value="Mostrar con slideDown(4000)">
  <input type="button" id="up03" value="Ocultar con slideUp() con 'slow'">
  <input type="button" id="down03" value="Mostrar con slideDown() con 'fast'">
  <input type="button" id="up04" value="Ocultar con slideUp() con 'slow' y callback">
  <input type="button" id="down04" 
         value="Mostrar con slideDown() con 'fast' y callback">
  <input type="button" id="toggle01" value="Mostrar / ocultar con slideToggle()">
  <input type="button" id="toggle02" value="Mostrar / ocultar con slideToggle(4000)">
  <input type="button" id="toggle03" 
          value="Mostrar / ocultar con slideToggle() con 'slow' con callback">
  <div id='rectangulo'><p>En la inteligencia no hay medida.. sólo el hecho de ser inteligente es suficiente... pues cuando queremos serlo es cuando empezamos a recorrer el camino que nos lleva a ella.</p>
  <p>Un hombre inteligente es aquel que sabe ser tan inteligente como para contratar gente más inteligente que él.</p></div>
</body>
$(document).ready(function() {
  $('#down01').click(function(event) {
  	$('#rectangulo').slideDown();
  });
  $('#down02').click(function(event) {
  	$('#rectangulo').slideDown(4000);
  });
  $('#down03').click(function(event) {
  	$('#rectangulo').slideDown('fast');
  });
  $('#down04').click(function(event) {
  	$('#rectangulo').slideDown('fast', function() {
    alert ('Efecto slideDown con velocidad fast terminado!');
  	});
  });

  $('#up01').click(function(event) {
  	$('#rectangulo').slideUp();
  });
  $('#up02').click(function(event) {
  	$('#rectangulo').slideUp(4000);
  });
  $('#up03').click(function(event) {
  	$('#rectangulo').slideUp('slow');
  });
  $('#up04').click(function(event) {
  	$('#rectangulo').slideUp('slow', function() {
    alert ('Efecto slideUp con velocidad slow terminado!');
  	});
  });

  $('#toggle01').click(function(event) {
  	$('#rectangulo').slideToggle();
  });
  $('#toggle02').click(function(event) {
  	$('#rectangulo').slideToggle(4000);
  });
  $('#toggle03').click(function(event) {
  	$('#rectangulo').slideToggle('slow', function() {
    alert ('Efecto slideToggle con velocidad slow terminado!');
  	});
  });
});

DatePicker

Es un componente estándar para proporcionar un calendario y facilitar el manejo de fechas. Es un componente útil y muy configurable

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Bootstrap Validator</title>
  <link href='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.min.css'
        rel='stylesheet'>
</head>
<body>


<div class="container">
     <div class='row'>
        <label class='col-xs-2 control-label'>Fecha</label>
        <div class="col-xs-3 date"> 
          <div id='Fechas' class='input-group input-append date'>
            <input class='form-control' name='fecha' type='text' >
            <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
        </div>
</div>

 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/locales/bootstrap-datepicker.es.min.js'></script>
 <script>
     $('#Fechas') .datepicker({
      autoclose: true,
      clearBtn: true,
      format: 'yyyy/mm/dd',
	  language: 'es',
      todayHighlight: true,
      toggleActive: true
   }); 
 </script>
</body>
</html>

El clima

En la red encontraremos una gran cantidad de widgets y gadgets que realizan actividades específicas que regulamente se usan para ser empotradas dentro de otras aplicaciones. Ejemplo de estos pequeños programas es el pronostico del clima presentado por meteoRed.mx el cual es altamente configurable


<div id="cont_b15cf075cead3c30732af5ac3e7d0a1a">
<span id="h_b15cf075cead3c30732af5ac3e7d0a1a">Clima
<a id="a_b15cf075cead3c30732af5ac3e7d0a1a"
href="http://www.meteored.mx/clima_Veracruz-America+Norte-Mexico-Veracruz-MMVR-1-22291.html"
target="_blank" rel="nofollow"
style="color:#00ABEB;font-family:Roboto;font-size: 13px; text-decoration: none;">
Veracruz</a></span>
<script async src="http://www.meteored.mx/wid_loader/b15cf075cead3c30732af5ac3e7d0a1a"></script>
</div>