jQuery

jQuery es una biblioteca javascript. Su slogan es “Escribí menos, hacé más”. La idea es escribir JavaScript de una manera intuitiva.

Ahí me sonó la alarma: ¿escribir JavaScript de una manera intuitiva? ¡Ni loco! Bastante me tomó aprender a garabatear js para andar cambiando a esta altura del partido. Pero seguí, porque me llamaba la atención. Además porque tenía que usarlo con SPIP.

¿En qué consiste entonces esa manera intuitiva?

jQuery nos propone acceder a los elementos mediante consultas al DOM y devolviéndonos un objeto adaptador.

¿Por qué usar esta forma?

La manera de seleccionar los objetos es muy flexible. Se basa en tres formatos, 2 de los cuales son estándar: CSS, XPath y uno propietario (y bastante intuitivo). Se pueden ver acá

A su vez los objetos adaptadores son muy flexibles. Nos permiten manejar los atributos, los eventos, los adyacentes y padres en el DOM, algunos efectos visuales y ajax. Todo esto está muy bien documentado en docs.jquery.com.

¿Cómo empiezo?

Primero hay que bajar la biblioteca. La incluimos en nuestra página mediante:

<script type="text/javascript" src="jquery.js" mce_src="jquery.js">
<script>//mi c&oacute;digo fuente</script>

Una de las primeras cosas que debemos hacer es ejecutar código cuando la estructura del documento está cargada. Esto lo hacíamos con window.onload = function() { … }. Pero había que esperar a que carguen las imágenes. jQuery soluciona esto mediante método $().ready().

$(document).ready(function() { ... })

¿Qué es $()?

Es la consulta propiamente dicha y nos retorna el objeto adaptador. Se le puede pasar un cadena con la consulta, un elemento del DOM o incluso una cadena html que nos genera elementos html en el aire.

Otra propiedad interesante es que los métodos del objeto adapta retornan el mismo objeto (salvo aquellos donde lo que se retorna es un valor, como se verás más abajo). Esto permite encadenar varias acciones sobre los objetos reduciendo las líneas de código.

Para cerrar vamos a mostrar un pequeño ejemplo. Tenemos una lista de títulos y textos descriptivos. Esto podrían ser feeds de un blog. Queremos listar los títulos y ver solo la descripción cuando alguno en particular nos interese.

<ul>
	<li><span>titulo 1</span>
    
Este es el texto de   la descripci&Atilde;&sup3;n colapsable n&Atilde;&ordm;mero 1
    <a href="#" mce_href="#">mostrar</a></li>
	<li><span>titulo 2</span>
   
Este es el texto de   la descripci&Atilde;&sup3;n colapsable n&Atilde;&ordm;mero 2
    <a href="#" mce_href="#">mostrar</a></li>
	<li><span>titulo 3</span>
   
Este es el texto de   la descripci&Atilde;&sup3;n colapsable n&Atilde;&ordm;mero 3
    <a href="#" mce_href="#">mostrar</a></li>
</ul>

El script quedaría de la siguiente forma:

<script>$(document).ready(function(){ //Las etiquetas a que sean contenidas por una etiqueta li $("li > a").click(function() {  //si tienen por rótulo "ocultar"  if ($(this).html()=="ocultar")  {   //ocultan el elemento previo   $(this).html("mostrar").prev().hide("slow");   }  else  {   //sino muestran el elemento previo   $(this).html("ocultar").prev().show("slow");  } 

  return false; }); 

}); 

</script>

De esta manera tenemos descripciones colapsables con pocas líneas. La mitad del espacio son comentarios y llaves para hacer legible el código.

¿Bastante intuitivo, no?

Quería hacer una mención respecto a $(). En otro post dije que las funciones en JavaScript son objetos de tipo Function. Este es un caso. Se puede ver bien en el código como se usa esta función objeto y como final jQuery se puede usar con otras bibliotecas y frameworks JavaScript.

Esto se hace invocando al método $noConflict() del objeto jQuery. De esta manera $() queda libre (por ejemplo para prototype) y con invocar jQuery en vez de $() tenemos la misma funcionalidad.

Con eso ya hay para divertirse. ¡Hasta la próxima!

Etiquetas: , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: