Curso de jQuery (2): Selectores, Primera Parte

Por un selector entendemos en jQuery lo mismo que en CSS: una forma de permitirnos elegir un elemento (o varios) entre todos los que tenemos en nuestro documento HTML. ¿Para qué? Para luego poder aplicar sobre los elementos seleccionados diversas funciones.

Es decir, jQuery utiliza el poder de los selectores para acceder de una manera rápida y sencilla a un elemento o grupo de elementos del DOM (Document Object Model) y luego poder aplicar sobre los mismos cualquier tipo de instrucción, evento, animación, etc…. Por ejemplo, para aplicar la clase “enlace” a todos los elementos “a” que se encuentren dentro de un elemento “p”. Haríamos:

1	$('p a').addClass('enlace');

Pero vamos a empezar desde el principio. En este artículo vamos a ver cómo crear los selectores más importantes de jQuery.

Antes de nada es importante saber que el DOM (Document Object Model, el esqueleto de nuestra página web) utiliza una estructura de árbol para definir las relaciones entre sus elementos, en la que tenemos padres, hijos, etc… Por ejemplo:

dom

$(’selector’)

No importa qué tipo de selector usemos en jQuery: siempre comenzaremos con $(). Prácticamente todo lo que se pueda usar en CSS se puede también incluir entre esos paréntesis de esta forma $(’selectores’). De tal manera que por ejemplo podríamos hacer:

selectores

Selectores CSS

jQuery soporta prácticamente todos los selectores de CSS, con la ventaja de que podemos utilizar selectores de CSS3 que funcionen con Internet Explorer 6 gracias a jQuery. Lo vemos mejor con estos ejemplos:

selectores_css

Selectores propios de jQuery

A la amplia variedad de selectores propios de CSS jQuery añade sus propios selectores. Como característica que les distingue decir que siempre comienzan por dos puntos (:)

Vamos a distinguir entre ellos:

Selectores Posicionales
Estos selectores están basados en las relaciones posicionales entre elementos (como veíamos antes en ejemplo de la estructura del DOM). Como antes, los vamos a ver a través de ejemplos:

selectores_positional

Selectores de Formularios
Cuando trabajemos con formularios jQuery nos ofrece una serie de selectores propios que nos permiten seleccionar de manera sencilla el elemento preciso. Vamos a verlos con ejemplos:

selectores_formulario