Diferencia entre Find y Filter en jQuery

15 07 2009

jquery_thumbEs muy común confundirse entre estos dos métodos al comenzar con jQuery, pero ambos realizan tareas muy distintas.

Mientras .filter quita, de los elementos contenidos en el objeto $, los que no cumplan con el selector que se le indica, .find busca en los descendientes de los objetos seleccionados.

$("div.nav").find("a") Encuentra los links dentro de cualquier div con la clase css nav, en cambio:

$("a").addClass(".link").filter("[href^=http://]").addClass(".externo"); Agrega la clase “link” a todos los <a> y la clase “externo”, solo a los que poseen una valor para el atributo href que comienza con “http://”, Este es otro ejemplo clásico de jQuery. (Los corchetes se utilizan para buscar en atributos del HTML y el ^ indica el que la cadena buscada debe estar al comienzo del valor del atributo.)

En general .filter se utiliza para trabajar con un subconjunto de otro conjunto sobre el ya realicé una acción, permitiéndonos encadenar varias sentencias en una como en el ejemplo.

En cambio .find es un método muy poderoso que me sirve para navegar dentro del DOM por relaciones “descendiente de” entre elementos. Buscará en los elementos descendientes de los contenidos en $, sin tener en cuenta estos últimos.

Por ejemplo, dado:

<div id="padre">
   <div id="hijo1">
      <div id="nieto1"></div>
   </div>
   <div id="hijo2"></div>
</div>

$("#padre").find("div") Encuentra “hijo1”, “hijo2” y “nieto1”, (y no el div “padre” contenido en el objeto $.)

Este tipo de métodos denominados “transversales”, son los que nos ampliarán el campo de acción cuando excedamos las posibilidades de los selectores.

¡Hasta pronto!

Anuncios




Checkear todos los CheckBox con jQuery

17 06 2009

Uno de los artículos más consultados de este blog explica como configurar una tabla para que al clickear en un Checkbox en la cabecera de una columna, todos los checks de la misma tomen el mismo estado “checked/unchecked”.

Sin embargo, ese código requiere de algunas condiciones:

  • La tabla debe poseer un ID.
  • Cada checkbox debe ser el primer elemento de la celda.
  • Hay que escribir una llamada al evento onclick del checkbox en la cabecera, pasando como parámetro el ID de la tabla, ya sea escribiéndolo o navegando por el DOM para obtenerlo.

Y tiene un grave problema, no funciona en navegadores no-IE.

Cuando empecé a investigar jQuery, quise emular como práctica este código y me encontré con que jQuery nos lleva a plantear una solución mucho mas completa, que no solo resuelve todos los problemas anteriores, si no que nos lleva a escribir en el body la cantidad de javascript: ¡cero!.

Vamos al grano:

Primer paso: Agregar el include del archivo js donde está el código. (aparte del de jQuery por supuesto)

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/miScript.js" type="text/javascript"></script>

Segundo y último paso: En miScript.js el siguiente código:

$(function() {
    $("table th :checkbox").click(function() {
        $(this).closest("table")
            .find("td:nth-child(" + ($(this).closest("th").prevAll().size() + 1) + ") :checkbox")
            .attr("checked", $(this).attr("checked"));
    });
});

Aparte de esto, solo nos queda asegurarnos de que los checkbox de la cabecera estén en un TH y no en un TD.

Ahora ya no nos importa si usamos un GridView, una tabla estática, ni si posee tags THEAD y TBODY o solo TRs, ni si el checkbox es un control de servidor o simple HTML. Todos los checkboxs que tengamos en la cabecera (TH) de una tabla provocarán al cambiar su estado que cambien todos los de la misma columna.

No se a Uds. pero a mi me parece fantástico que solamente incluyendo un tag para jQuery y otro para un .js con el script (que seguramente ya estoy incorporando a nuestras páginas para utilizar otras funciones), tenga el problema resuelto en todas las páginas sin hacer más que olvidarme del tema.

Respecto al código, voy a usarlo como parte de la continuación de mi artículo anterior de introducción a jQuery para los que quieran entenderlo.

Nota: Debido al uso de la (excelente) función closest el código requiere jQuery 1.3+.

Saludos: Alejandro





Introducción a jQuery

8 05 2009

He estado usando un poco jQuery y, por si después de lo que ya había visto hacía falta algo más, me terminé de convencer de que jQuery es una tremenda ayuda para quienes programamos mucho o poco en JavaScript. Este es el primero de una serie de artículos introductorios los que voy a tratar de mechar con otros con ejemplos reales. Ahí vamos:

¿Que es jQuery?

Una biblioteca javascript (un .js de 19k en su versión de producción) que tiene las siguientes características:

  • Todo lo que hagamos con jQuery es “Browser-Agnostic”, o sea ¡funciona igual en todos los navegadores!
  • Adhiere al concepto de Unobstrusive javascript, o sea, “No metas javascript en tu HTML”, esto abarca los eventos en los tags y absolutamente todo lo que tenga que ver con javascript en el body, así como la mayoría de los <script> en el head, si no todos. Esto entre otras cosas facilita mucho la separación de tareas entre programador-diseñador.
  • Es OpenSource y al mismo tiempo posee cierto soporte de Microsoft, lo que incluye una versión con Intelisense y la inclusión por defecto en el nuevo  ASP.NET MCV.
  • Una comunidad importantísima, una enorme documentación y cantidad de tutoriales. Unas cuantas de estas cosas están en español.
  • Es extensible y posee una cantidad enorme de Plugins desarrollados, donde “enorme” quiere decir que en el sitio oficial hay más de mil.
  • Posee poderosos métodos para trabajar con Ajax.
  • Muchos efectos gráficos incluidos para manipular los objetos de nuestra página.

También presenta tres conceptos que definen la sintaxis de jQuery y gran parte de su funcionalidad:

  1. Utiliza en su sintaxis el concepto de encadenamiento de sentencias, (A.K.A. fluent interfaces o “chaining”), que nos permite realizar una gran cantidad de acciones en una sola sentencia y nos evita declarar infinidad de variables.
  2. Posee un conjunto de selectores muy poderoso con los cuales podemos recorrer el DOM a gusto y piaccere.
  3. Posee una sintaxis para trabajar con eventos que permite no tener que introducir llamadas a los mismos en los tags y en increíblemente flexible.

Estas características son las que veremos a lo largo de estos introducctorios, pero primero empecemos de cero:

Incorporando jQuery a nuestras páginas

En el sitio oficial: www.jquery.com podemos bajar la biblioteca en sus versiones de desarrollo, producción (minified) y visual studio, está última es una versión comentada que permite el intelisense. El sitio también es referencia en cuando a información se refiere.

Una vez incluido el archivos .js en nuestro proyecto, arrastramos el mismo al tag head de nuestra página, lo que genera lo siguiente:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

para la versión minified 1.3.2, la actual al momento de escribir esto. (No hay que olvidar cambiar la versión de desarrollo por la de producción cuando ya no la necesitamos y no es mala práctica renombrar el archivo a jQuery a secas para facilitar el cambio de versiones.)

El objeto jQuery ($):

Casi toda la funcionalidad de jQuery está contenida en un objeto llamado también jQuery. Este objeto tiene un alias que es el símbolo $, o sea que en cada lugar donde escribimos $ podemos cambiar por jQuery y viceversa. Como el símbolo $ es el estandar vamos a verlo así escrito en este artículo. Veamos la estructura de una típica sentencia jQuery:

$("selector").acción(parámetros);

$(“selector”) captura, a partir del selector indicado, el conjunto del DOM identificado sobre el cual aplicamos la acción, pero el valor de retorno no es directamente un array de objetos, sino que es el propio objeto $ conteniendo los objetos en su interior.

Cuando ejecutamos un método sobre el objeto $ que contiene los elementos que seleccionamos, este aplica dicha acción a cada uno de los objetos recuperados. Un ejemplo concreto:

$("#mensaje").fadeOut(3000);

Llama para el elemento con id=”mensaje” a la función fadeOut, que aumenta su transparencia hasta hacerlo desaparecer al cabo de los tres segundos indicados como parámetro.

La función .ready

Ya tenemos un pequeño ejemplo de código jQuery, pero ¿donde lo ponemos?

Si leímos bien, una de las características de jQuery es que nos permite no introducir llamadas a funciones javascript en los tags HTML, más tarde vamos a ver como atachar eventos a los objetos del DOM, pero hay un método para ejecutar código en la carga de la página y que veremos hasta en la sopa, la función ready.

Normalmente cuando queremos ejecutar una rutina js en la carga de la página, utilizamos el evento onload del body, pero esto tiene la desventaja de hacernos esperar hasta que se carga toda la página, imágenes inclusive. jQuery nos presenta un camino alternativo que es la función ready, está se ejecuta ni bien el navegador levanto el DOM en memoria, ¿y que hace? bueno, lo que nosotros querramos, ya que toma como único parámetro un callback, o sea, una función javascript, veamos la sintaxis:

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

Como vemos ready es una función del objeto $, el cual en este caso ha sido creado a partir del document. Como parámetro de ready, estamos enviando una función cuyo código será el que se ejecute correctamente. De esta manera si quisieramos cumplir con la inutil misión de que el código del ejemplo anterior se ejecute en primera instancia al cargar la página, tendríamos que escribir lo siguiente:

<script type="text/javascript">
$(document).ready(function() {
   $("#mensaje").fadeOut(3000);
});
</script>

Donde hemos reemplazado únicamente los “…” por nuestra función.

En mucha de la documentación más vieja se ve esta sintaxis, pero jQuery presenta una abreviación que es la que vamos a usar:

<script type="text/javascript">
    $(function() {
    	$("#mensaje").fadeOut(3000);
    });
</script>

Hasta aquí hemos visto solo la manera de hacer de forma interesante algo muy inútil, y es que en la gran mayoría de documentos introductorios a jQuery verán que se presenta la librería haciendo uso de fadeIn, fadeOut y varias funciones gráficas que son muy impactantes a la vez que sencillas de utilizar. He estado hace unas semanas en una charla de jQuery donde toda la atención la despertaba este tipo de funcionalidad y en el mismo sitio oficial se presenta la librería con un lindo efecto.

Todo eso está genial, pero si Uds, como yo, nacieron sin la parte del cerebro que se utiliza para el diseño, antes de creer que jQuery es un compendio de efectos o de hacks para algunas funcionalidades, sigan leyendo y encontrarán un tesoro de la mano de la manipulación del DOM, los selectores, el encadenamiento de sentencias, la facilidad para trabajar con AJAX, el manejo de eventos y el crossbrowsing real, por sobre otros instrumentos no tan útiles a la hora de programar comportamientos y manejo de datos en la UI.

Saludos.