En el capítulo anterior mencionamos que jQuery se basa en la filosofía de primero seleccionar algo y luego hacer algo. Esa filosofía es muy similar al funcionamiento fundamental de las hojas de estilo escritas en CSS; en donde seleccionamos un elemento del DOM y luego aplicamos estilos gráficos.
De tal manera como en CSS existen diferente reglas para seleccionar un elemento, también lo hay en jQuery. De hecho, la gran mayoría de las reglas de selección implementados en jQuery, son -en su gran mayoría- basado en las reglas de selección de CSS1 a CSS3. Veamos algunas similitudes.
jQuery en comparación con CSS.
Si queremos que todos las etiquetas H1 sea de color rojo en un documento HTML en CSS escribimos los siguiente:
/* CSS */
h1 {
color: #FF0000;
}
Lo mismo podemos hacer usando jQuery con el siguiente código:
// JavaScript
$('h1').css({color: '#FF0000'});
En el código anterior podemos ver el sencillo uso de jQuery para seleccionar un elemento del DOM y aplicarle un estilo de CSS. La imagen siguiente nos muestra los dos pasos fundamentales de jQuery:
De esta manera, conocemos muy básicamente como utilizar un selector en jQuery, gracias al ejemplo anterior.
Cabe destacar que los selectores en jQuery no es solamente para aplicar estilos de CSS, esto es solamente un de las muchas cosas que pueden hacer y aún más con el uso de plugins. Todo esto lo trataremos en los siguientes capítulos. Por el momento, veamos los diferentes tipo de selectores.
Selectores en jQuery
Los selectores en jQuery se suelen ver en dos categorías: selectores y filtros. A continuación veremos todos los selectores y filtros que se pueden utilizar para seleccionar elementos del DOM. Para más información y ejemplos pueden visitar la documentación oficial de jQuery sobre los selectores.
Selectores básicos
// Selectores básico en jQuery. // Selecciona un elemento por ID. // e.j.: selecciona un elemento: <span id="footer"><span> $('#footer'); // Selecciona todos los elementos por nombre. // e.j.: selecciona elementos: <table> $('table'); // Selecciona todos los elementos por CLASS. // e.j: selecciona los elementos: <span class="box"></span>$('.box'); // Selecciona todos los elementos por las clases especificadas. // e.j: selecciona los elementos: <span class="box error"// Selecciona los elementos usando varios selectores. // Cada selector selector es separado por coma. $('#header, div, .footer');></span>$('.box.error'); // Selecciona todos los elementos. // e.j: selecciona todos los elementos. $('*');
Selectores jerárquicos.
// Selectores jerárquicos en jQuery
// Selecciona todos los elementos descendiente de otro elemento
// especificado.
// e.j.: Selecciona los IMG descendiente de un DIV.
$('div img');
// Selecciona los elementos descendientes directos de otros.
// Esto quiere decir que solo se seleccionarán los primeros
// dentro de otros.
// e.j.: Selecciona los IMG descendientes directos de un DIV.
$('div > img');
// Selecciona los elementos que le siguen a otro elemento
// especificado.
// e.j.: Selecciona todos los IMG después de un DIV.
$('div + img');
// Selecciona todos los elementos primos que le siguen a otro
// elemento especificado.
// e.j.: Selecciona todos los IMG primos después de un DIV.
$('div ~ img');Selectores de elementos formularios.
// Selectores de elementos de formularios
// Selecciona todos los elementos INPUT, TEXTAREA, SELECT
// y BUTTON.
$(':input');
// Selecciona todos los elementos INPUT de tipo "text".
$(':text');
// Selecciona todos los elementos INPUT de tipo "password".
$(':password');
// Selecciona todos los elementos INPUT de tipo "radio".
$(':radio');
// Selecciona todos los elementos INPUT de tipo "checkbox".
$(':checkbox');
// Selecciona todos los elementos INPUT de tipo "submit".
$(':password');
// Selecciona todos los elementos INPUT de tipo "image".
$(':image');
// Selecciona todos los elementos INPUT de tipo "reset".
$(':reset');
// Selecciona todos los elementos INPUT de tipo "button".
$(':button');
// Selecciona todos los elementos INPUT de tipo "file".
$(':file');
// Selecciona todos los elementos INPUT de tipo "hidden".
$(':hidden');
Filtros
Los filtros suelen acompañar los selectores previamente citados para realizar selecciones más específicas.
Filtros básicos
// Filtros básicos en jQuery.
$(':first'); // Selecciona el primer elemento.
$('div:first'); // Selecciona el primer DIV.
$(':last'); // Selecciona el último elemento.
$('div:last'); // Selecciona el último DIV.
$(':not(X)'); // Filtra los elementos usando un selector X.
$('div:not(#box)'); // Selecciona los DIV que no tenga un id="box".
$(':even'); // Selecciona los elementos pares.
$('div:even'); // Selecciona los DIV pares.
$(':odd'); // Selecciona los elementos impares.
$('div:odd'); // Selecciona los DIV impares.
$(':eq(X)'); // Selecciona un elemento de índice X.
$('div:eq(4)'); // Selecciona el quinto índice, contado de 0 a 4.
$(':gt(X)'); // Selecciona los elementos con índice mayor a X.
$('div:gt(2)'); // Selecciona todos los DIV después del tercero.
$(':lt(X)'); // Selecciona los elementos con índice menor a X.
$('div:lt(2)'); // Selecciona todos los DIV antes del tercero.
$(':header'); // Selecciona los elementos: h1, h2, h3 etc...
$(':animated'); // Selecciona todos los elementos animados
// Más detalles sobre animaciones en próximos capítulos.
Filtros de contenidos
// Filtros de contenidos en jQuery.
// Selecciona los elementos con el texto especificado
$(':contains(texto)');
$('div:contains(texto)');
// Selecciona los elementos que no tienen ni texto ni elementos.
$(':empty');
$('div:empty');
// Selecciona los elementos que tenga por lo menos un elemento
// especificado por un selector.
$(':has(selector)');
// e.j.: Selecciona todos los DIV que tenga un IMG de clase 'box'.
$('div:has(img.box)');
// Selecciona los elementos que tienen texto o elementos.
$(':parent');
Filtros de visibilidad
// Filtros de visibilidad en jQuery.
$(':hidden'); // Selecciona los elementos no visibles.
$('div:hidden'); // Selecciona los DIV no visibles.
$(':visible'); // Selecciona los elementos visibles.
$('div:visible'); // Selecciona los DIV visibles.
Filtros por atributos
// Filtros por atributos en jQuery.
// Selecciona los elementos que tenga el atributo especificado.
$('[atributo]');
// e.j.: Selecciona los elementos con el atributo HREF.
$('[href]');
// Selecciona los elementos que tenga el atributo especificado
// y el valor asociado.
$('[atributo=valor]');
// e.j.: Selecciona los elementos con el atributo HREF="blank.html".
$('[href=blank.html]');
// Selecciona los elementos que tenga el atributo especificado
// y no el valor asociado.
$('[atributo!=valor]');
// e.j.: Selecciona los elementos con el atributo HREF que no sea
// igual a "blank.html".
$('[href!=blank.html]');
// Selecciona los elementos que tenga el atributo especificado
// y que comienze con el valor asociado.
$('[atributo^=valor]');
// e.j.: Selecciona los elementos con el atributo HREF que
// comienze con"blan".
$('[href^=blan]');
// Selecciona los elementos que tenga el atributo especificado
// y termine con el valor asociado.
$('[atributo$=valor]');
// e.j.: Selecciona los elementos con el atributo HREF que
// termine en ".html".
$('[href$=.html]');
// Selecciona los elementos que tenga el atributo especificado
// y que contenga en cualquier parte el valor asociado.
$('[atributo*=valor]');
// e.j.: Selecciona los elementos con el atributo HREF que
// tenga en cualquier parte el valor "k.h".
$('[href*=k.h]');
// Selecciona los elementos que tenga los atributos especificados
// o filtros de atributos asociados.
$('[atributo1][atributo2][atributo3]');
// e.j.: Selecciona los elementos con el atributo HREF que
// comienze por "bla" y termine en ".html".
$('[href^=bla][href$=.html]');
Filtros descendientes
// Filtros descendientes en jQuery.
// Selecciona los descendientes de un elemento por índice, pares,
// impares o ecuación.
$(':nth-child(índice/par/impar/ecuación)');
// e.j.: Selecciona todos los IMG descendientes pares de un DIV.
$(':nth-child(even)');
// e.j.: Selecciona todos los IMG descendientes de tres en tres
// con un desfase de 1 de un DIV.
$(':nth-child(3n + 1)');
// Selecciona los primeros elementos descendientes de un
// elemento especificado.
$(':first-child');
// Selecciona los últimos elementos descendientes de un
// elemento especificado.
$(':last-child');
// Selecciona los elementos descendientes de un
// elemento especificado.
$(':only-child');
Filtros de formularios
// Filtros de formularios en jQuery.
// Selecciona los elementos de formularios que están activos.
$(':enabled');
// Selecciona los elementos de formularios que no están activos.
$(':disabled');
// Selecciona los CHECKBOXs que están chequeados.
$(':checked');
// Selecciona los OPTIONs seleccionado de un SELECT.
$(':selected');
Conclusión
Muchos de los selectores y filtros mostrados previamente son fáciles de entender (eso espero). Sin embargo, la mejor forma de dominar los selectores en jQuery es viendo ejemplos para comprender. Estoy trabajando en un capítulo intermedio para facilitar el aprendizaje de los selectores y filtros, mientras tanto es bueno conocerlos todos, por lo menos de manera teórica.
