comparte el articulo 

Trabajando con elementos en jQuery: Selectores personalizados

Actualizado el 18/03/2011 < > 0 Comentarios

Resumen: Estudiamos la manera de utilizar los selectores personalizados que han sido añadidos a jQuery para dar una mayor funcionalidad

Como pudimos observar con los ejemplos del artículo anterior, los selectores CSS nos ofrecen gran potencia y flexibilidad al momento de querer obtener elementos que se encuentran en nuestro documento DOM. Mediante la coincidencia con la sentencia que proporcionamos podemos obtener casi cualquier elemento que queramos, por lo que se convierten en nuestra principal herramienta para afrontar su captura, pero se puede presentar casos y existir ocasiones en que vamos a querer o necesitamos seleccionar elementos basándonos en una característica que no fue anticipada por una especificación CSS.

Selectores personalizados

A esta clase de selectores se les llama personalizados y serán utilizados en base a la medida de especificación que queramos darle a nuestros selectores. Supongamos que queremos obtener todas las casillas de un formulario (checkboxes) que han sido seleccionadas por el usuario, no tenemos ninguna sentencia CSS que nos ayude a recuperar eso por ello debemos de pensar una forma en que dichos elementos se diferencien del resto, la respuesta la encontramos en el atributo “checked”.

Ya que queremos hacer coincidir los elementos en base a un atributo, basta con corroborar el estado inicial de nuestra etiqueta HTML para determinar que elementos cumplen con esto. Para ello jQuery nos ofrece un selector personalizado que lleva por nombre “:checked”, dicho filtro nos devuelve todos los elementos que se encuentran en estado “marcado” o “activado”.

El selector “:checked” funcionará igual que un selector basado en atributos CSS (como [name=formulario]), nos devolverá elementos que fueron filtrados mediante un criterio. Hay que mencionar que estos selectores personalizados también pueden ser combinados, por lo que podemos filtrar en base a varios criterios, por ejemplo podemos considerar utilizar :radio:checked o :checkbox:checked para obtener un conjunto de elementos más específico, obteniendo de nuestro DOM únicamente aquellos que cuenten con dichos atributos y sean del tipo indicado.

Lista de selectores personalizados

Estos selectores dan grandes ventajas a los desarrolladores para poder rastrear e identificar elementos. En la siguiente lista mostramos los selectores personalizados que soporta jQuery, y una pequeña descripción de su función.

  • :animated – Selecciona los elementos animados que están bajo dicho control.
  • :button – Selecciona cualquier tipo de botón (input[type=submit], input[type=reset], input[type=button], o button).
  • :checkbox – Selecciona únicamente las casillas de verificación (input[type=checkbox]).
  • :checked – Selecciona las casillas o radios que se encuentran seleccionadas.
  • :contains(texto) – Selecciona elementos que contengan la palabra “texto”.
  • :disabled – Selecciona únicamente elementos que se encuentran desactivados en la interfaz.
  • :enabled – Selecciona únicamente elementos que se encuentran activos en la interfaz.
  • :file – Selecciona todos los elementos de tipo archivo (input[type=file]).
  • :header – Selecciona elementos que son cabeceras como el caso de h1, h2, h3, etc.
  • :hidden – Selecciona elementos que se encuentran escondidos.
  • :image – Selecciona campos de imagen en el formulario (input[type=image]).
  • :input – Selecciona elementos relacionados a los campos de un formulario (input, select, textarea, button).
  • :not(filtro) – Niega el filto especificado.
  • :parent – Selecciona solo elementos que tengan hijos.
  • :password – Selecciona elementos de password (input[type=password]).
  • :radio – Selecciona campos radio (input[type=radio]).
  • :reset – Selecciona únicamente botones de tipo reset (input[type=reset] or button[type=reset]).
  • :selected – Selecciona todos los elementos que se encuentran seleccionados.
  • :submit – Selecciona únicamente botones de tipo submit (button[type=submit] or input[type=submit]).
  • :text – Selecciona elementos de texto (input[type=text]).
  • :visible – Selecciona únicamente elementos que son visibles.

La gran mayoría de los selectores personalizados están basados en campos de formularios, lo que nos permite especificar elementos por su tipo o estado, podemos combinar los filtros y obtener elementos muy específicos. Si deseamos obtener, por ejemplo, un elemento que se encuentre “marcado” dentro de una casilla activa en el formulario podemos usar un selector combinado como el siguiente “:checkbox:checked:enabled” que nos regrese el resultado esperado.

Estos filtros son un complemento sumamente útil para el conjunto de selectores que tenemos a nuestra disposición, hay que aclarar que también podemos usar filtros negativos mediante el selector “:not”, lo que nos permitirá obtener el resultado inverso a lo que indicamos con el selector.

Por ejemplo, si deseamos obtener todos los elementos que no son “checkboxes”, usaríamos dicho filtro de la siguiente manera “input:not(:checkbox))”.

Para este caso, es importante que reconozcamos cuales son los selectores filtros y cuales son los selectores de búsqueda, ya que ciertos criterios no se pueden aplicar a alguno de los dos tipos. Los selectores de filtro son aquellos que hacen alguna distinción y atenúan el conjunto de elementos a un cierto número de coincidencias, es decir reducen en base al patrón, por su parte los selectores de búsqueda encuentran a otros elementos que ya tienen alguna relación con los que se encuentran seleccionados, tal es el caso de los selectores por hijos o por descendencia.

Es entonces, que podemos aplicar el filtro de negatividad “:not” a los selectores por filtro, pero no lo podemos aplicar a los selectores de búsqueda. Es entonces que entra en juego la sintaxis de nuestro selector, ya que si escribimos un selector de la siguiente manera “p:not(:hidden)”, será perfectamente válido pues estamos seleccionando todos los elementos de párrafo que no tienen el atributo “hidden”, pero si los escribimos la sentencia de esta otra manera “:not(p:hidden)” el selector no devolverá nada pues contiene como parámetro un selector de descendencia.

Para simplificar las cosas, los selectores de filtro se pueden identificar fácilmente porque todos empiezan con un carácter de dos puntos (:) o un carácter de corchete ([). Cualquier otro selector no se puede utilizar dentro del filtro negativo “:not()”.

Conclusión

Como hemos visto, jQuery nos da un gran conjunto de herramientas con las que podemos seleccionar los elementos existentes en una página para su manipulación a través de los métodos de jQuery, los cuales examinaremos en artículos posteriores. Pero antes de estudiar la manipulación de elementos mediante métodos, vamos a ver cómo utilizar la función jQuery() para crear nuevos elementos HTML.

Publicado el 18/03/2011, última actualización 18/03/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: Diseño Web :: LaWebera.es

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras