¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

jQuery desde Cero: Filtros Avanzados

Publicado el 25 noviembre 2013 por Codehero @codeheroblog

Filtros de atributos

Los filtros de atributos son aquellos que refinan los resultados de un selector según los atributos que tenga el elemento.

Podemos filtrar por atributo de la siguiente manera:

  1. [nombreDeAtributo]: Este incluye elementos que tengan el atributo especificado;

  2. [nombreDeAtributo=valor]: incluye los elementos que tengan el atributo solicitado y el valor asignado al mismo;

  3. [nombreDeAtributo!=valor]: incluye los elementos que tengan el atributo solicitado y un el valor asignado al mismo que sea distinto al especificado;

  4. [nombreDeAtributo^=valor]: incluye los elementos que tengan el atributo solicitado y un el valor asignado al mismo empiece con el especificado;

  5. [nombreDeAtributo$=valor]: incluye los elementos que tengan el atributo solicitado y un el valor asignado al mismo empiece con el especificado;

  6. [nombreDeAtributo*=valor]: incluye los elementos que tengan el atributo solicitado y contenga el valor especificado;

  7. [nombreDeAtributo][nombreDeAtributoN]: incluye los elementos que tengan los atributos solicitados.

Veamos algunos ejemplos dado el siguiente html:

Realizaremos las siguientes consultas:

<script type="text/javascript"> $("document").ready(function() { // seleccionar todos los párrafos que tengan el atributo class $('p[class]'); // seleccionar todos los párrafos que tengan el atributo id con el valor paragraph1 $('p[id=paragraph1]'); // seleccionar todos los párrafos cuyo id empiece por "para" $('p[id^=para]'); // seleccionar todos los párrafos cuyo id empiece por "para" y tenga un atributo llamado align que contenga "center" $('p[id^=para][align*=center]'); }); </script>

12345678910111213141516171819 <script type="text/javascript">    $("document")ready(function(){   // seleccionar todos los párrafos que tengan el atributo class  $('p[class]');   // seleccionar todos los párrafos que tengan el atributo id con el valor paragraph1  $('p[id=paragraph1]');   // seleccionar todos los párrafos cuyo id empiece por "para"  $('p[id^=para]');   // seleccionar todos los párrafos cuyo id empiece por "para" y tenga un atributo llamado align que contenga "center"  $('p[id^=para][align*=center]');   });  </script>

Filtros de Contenido

Éstos permiten examinar el contenido de elementos seleccionados para determinar si deben ser incluidos o no en los resultados.

  1. :contains(texto): Filtra la selección para incluir solo los que elementos que contengan el texto especificado;
  2. :empty Filtra la selección para incluir solo elementos vacios;
  3. :has(selector): Retorna elementos que contienen al menos un elemento con el selector especificado;
  4. :parent: Encuentra elementos que son padres, es decir, que confinen al menos otro elemento.

Utilizando el mismo HTML anterior veamos los siguientes filtros:

// seleccionar todos los párrafos que contengan la palabra "Luigi" $('p:contains(Luigi)');

12 // seleccionar todos los párrafos que contengan la palabra "Luigi"$('p:contains(Luigi)');

Ahora si probáramos con $(':contains(a)');, estaríamos seleccionando todos los elementos que contengas una letra “a” sin importar de que tipo sean. Entonces nos retornaría: p, p, body, ¿Por qué body?, porque como los padres contienen a los hijos entonces su contenido es considerado como propio. Tendriamos que hacer una búsqueda un poco mas especifica si quisiéramos solo los <p>.

Sigamos:

// Seleccionar todos los párrafos que contienen al menos un hijo (incluyendo texto) $('p:parent'); // Seleccionar todos los ul que contengan li con la clase "a" $('ul:has(li[class=a])');

12345 // Seleccionar todos los párrafos que contienen al menos un hijo (incluyendo texto)  $('p:parent');    // Seleccionar todos los ul que contengan li con la clase "a"  $('ul:has(li[class=a])');

Filtros de Visibilidad

Seleccionan los elementos que sean visibles o no.

  1. :visible: Incluye todos los elementos visibles;
  2. :hidden: Incluye solo los elementos que estén ocultos.

// Seleccionar todos los ul que estén visibles $('ul:visible');

Filtros hijo

Los filtros hijo refinan un selector examinando la relación que cada elemento tiene con su elemento padre:

  1. nth-child(indice): Toma el elementos en cierto indice;
  2. nth-child(even): Toma solo elementos pares;
  3. nth-child(odd): Toma solo elementos impares;
  4. nth-child(equation): Toma solo elementos que satisfagan la formula Xn+M;
  5. first-child: Toma el primer elemento hijo del padre
  6. last-child: Toma el último elemento hijo del padre
  7. only-child: Toma el único elemento hijo que contiene el padre

Vamos los ejemplos a continuación:

// Seleccionar el elemento li que este de segundo en un elemento ul $('ul li:nth-child(2)'); // Seleccionar el elemento li que este de último en un elemento ul $('ul li:last-child'); // Seleccionar el elemento li que esté en una posición 2n en un elemento ul $('ul li:nth-child(2n)'); // Seleccionar el elemento li que esté en una posición 2n en un elemento ul $('ul li:nth-child(2n)');

1234567891011 // Seleccionar el elemento li que este de segundo en un elemento ul  $('ul li:nth-child(2)');    // Seleccionar el elemento li que este de último en un elemento ul  $('ul li:last-child');    // Seleccionar el elemento li que esté en una posición 2n en un elemento ul  $('ul li:nth-child(2n)');    // Seleccionar el elemento li que esté en una posición 2n en un elemento ul  $('ul li:nth-child(2n)');

Filtros de Formulario

Este tipo de filtros funcionan más o menos igual que los demás solo que son específicos para ayudarnos a trabajar con formularios.

  1. :input: Encuentra todos los input: select, textarea, button;
  2. :text: Selecciona todos los elementos de texto;
  3. :password: Selecciona todos los elementos tipo password;
  4. :checkbox: Selecciona todos los elementos de tipo checkbox;
  5. :submit: Selecciona todos los elementos de tipo submit;
  6. :reset: Selecciona todos los elementos de de tipo reset;
  7. :image: Selecciona todos los elementos de tipo image;
  8. :button: Selecciona todos los elementos button;
  9. :file: Selecciona todos los elementos file;
  10. :enabled: Selecciona todos los elementos que están habilitados;
  11. :disabled: Selecciona todos los elementos que están inhabilitados;
  12. :checked: Selecciona todos los elementos que están en estado de "check" como radiobuttons o checkboxes
  13. :selected: Selecciona todos los elementos que están seleccionados.

Conclusión

Eso es todo por hoy.

Con éste capítulo cerramos el tema de los filtros y selectores.

Cualquier duda déjala en la sección de comentarios de más abajo.

Hasta la próxima.