Como la propia palabra indica, los selectores son un mecanismo disponible en jQuery para seleccionar determinados elementos de la página. El selector no es más que una cadena de caracteres, creada bajo unas normas que veremos a continuación, con la que podemos referirnos a cualquiera o cualesquiera de los elementos (etiquetas) que hay en una página.

En mi opinión, una de las cosas que más potentes de jQuery son los selectores, al menos comparando esta librería Javascript con otras que conozco. Veremos en este artículo cómo utilizarlos y aprovecharnos de su potencia.

Qué son los selectores

Los selectores son cadenas de texto que permiten seleccionar elementos en la página. Con un selector podemos acceder a un elemento único o a una colección de elementos determinados. Los selectores en realidad vienen del lenguaje CSS, por lo que para construirlos se usa la misma sintaxis de selectores de CSS.

Casi todo en jQuery pasa por utilizar los selectores para acceder a los elementos de la página que deseamos alterar dinámicamente con Javascript. Hasta en los ejemplos más básicos del Manual de jQuery se tienen que utilizar selectores para acceder a los elementos que deseamos alterar, así que inevitablemente, si has leído este manual hasta este artículo, los habrás utilizado ya.

Primer ejemplo de selectores en jQuery

Para empezar, veamos un selector, para aclarar las ideas y refrescar la memoria. Cuando utilizamos la función jQuery (o función dólar) lo que pasamos como parámetro es el selector. La función jQuery devuelve justamente los elementos de la página que concuerdan con el selector enviado por parámetro.

$("p");

En esa llamada a la función jQuery, estamos pasando por parámetro una cadena "p" y como decía, esa misma cadena es el selector. En este caso, "p" es un selector que sirve para seleccionar todas las etiquetas P de la página, es decir, los párrafos.

Selectores básicos en jQuery

Los selectores, al menos los más básicos, son parecidos, o iguales, a los que se utilizan en CSS para seleccionar los elementos a los que se desean aplicar ciertos estilos. Como entiendo que todas las personas que intenten profundizar en el framework jQuery deben haber conocido CSS anteriormente, no habrá ningún problema con ellos.

Selector de etiquetas:

Simplemente indicamos la etiqueta a la que deseamos referirnos, es decir, la etiqueta que queremos seleccionar. Obtendremos con él todas las etiquetas de la página indicada en el selector.

$("h1") //selecciona todos los encabezados de nivel 1

Selector por identificador:

Sirven para seleccionar los elementos que tengan un identificador dado, que se asigna a las etiquetas a través del atributo id del HTML. Para utilizar este selector se indica primero el carácter "#" y luego el identificador de cuyo elemento se desee seleccionar.

$("#idelemento") //selecciona una etiqueta que tiene el atributo id="idelemento"

Selector por clase:

Podemos indicar el nombre de una clase (class de CSS) y seleccionar todos los elementos a los que se ha aplicado esta clase. Para ello, como en CSS, comenzamos colocando el carácter "." y luego el nombre de la clase que deseamos seleccionar.

$(".miclase") //selecciona todos los elementos que tienen el atributo class="miclase"

Selector por varias clases:

Si lo deseamos, podemos indicar varias clases CSS, para obtener todos los elementos que tienen esas clases aplicadas: todas al mismo tiempo. Esto se consigue comenzando por un ".", igual que los selectores de clases, y luego otro "." para separar las distintas clases que queremos utilizar en el selector.

$(".clase1.clase2") //selecciona los elementos que tienen class="clase1 clase2"

Selector asterisco "*":

Nos sirve para seleccionar todos los elementos de la página.

$("*") //selecciona todos los elementos que tiene la página

Concatenar varios selectores distintos:

Por último, podemos utilizar varios selectores, para obtener todas las etiquetas que cumplen uno de ellos. No hace falta que cumplan todos los selectores a la vez, sino con que uno de ellos concuerde es suficiente. Para ello colocamos todos los selectores que deseamos, separados por una coma ",".

$("div,p") //selecciona todos los elementos división y párrafo
$(".clase1,.clase2") //selecciona los elementos que tienen la clase "clase1" o "clase2"
$("#miid,.miclase,ul) //selecciona el elemento con id="miid", los elementos con class="miclase" y todas las listas UL

Conclusión sobre los selectores

Hasta este punto hemos visto los selectores básicos de jQuery, que nos servirán para hacer la mayoría de nuestros ejemplos y resolver también la mayor parte de las necesidades de selección de elementos que nos podamos encontrar en ejemplos reales. Sin embargo, el framework Javascript incluye una buena gama de selectores adicionales que pueden venirnos bien en algunos casos más concretos y que dejamos para próximos artículos.

Ahora, os recomendamos seguir el aprendizaje con el siguiente artículo, en el que pondremos en práctica los selectores que hemos conocido hasta el momento: Ejemplo para practicar con selectores de jQuery.