Selectores en jQuery

La librería jQuery nos permite hacer uso de selectores bastantes flexibles con los cuales podemos seleccionar los elementos del documento HTML que queramos.

En este post veremos algunos de ellos.

Primero los coloco todos a modo de resumen, y más abajo los vemos en detalle con ejemplos:

Descripción del Selector	Símbolo	Ejemplo
Selecciona por ID	#	$(“#IdDelElemento”)
Selecciona por clase	.	$(“.clase”)
Selecciona por elemento	(no tiene)	$(“element”)
Selecciona por atributo	Ver siguiente tabla	Ver siguiente tabla
Selector universal	*	$(“*”)

Resulta que tenemos varios sabores a la hora de escoger la selección por atributo, estos los resumimos en la siguiente tabla:

Descripción del Selector	Símbolo	Ejemplo
Selecciona por valor	[atributo=valor]	$(“[name=botonEnviar]”)
Selecciona si el valor del atributo empieza por el valor dado	[atributo^=valor]	$(“[class^=alert]”)
Selecciona si el valor del atributo termina por el valor dado	[atributo$=valor]	$(“[class$=danger]”)
Selecciona si el valor del atributo contiene el valor dado	[atributo*=valor]	$(“[name*=fecha]”)
Selecciona si el atributo está presente en el elemento	[atributo]	$(“[att1]”)

Existen otros, pero entiendo estos son los principales. A continuación veremos cada uno por separado. Colocaré jsFiddle's para que se vea el ejemplo en ejecución.

Selector por ID

jQuery nos permite seleccionar un elemento por ID. Por ejemplo, si tenemos el siguiente div:

<div id="unDiv">contenido del div</ div>

En jQuery podemos seleccionarlo así:

$("#unDiv");

Para seleccionar por ID, utilizamos el símbolo de número #.

En este jsFiddler puede ver un ejemplo de esto: https://jsfiddle.net/gavilanch/t176zfmg/

Selector por Clase

jQuery también nos permite seleccionar elementos por su clase. Por ejemplo, si tenemos el siguiente elemento HTML:

<p class="miClase">
Este es un párrafo.
</p>

En jQuery podemos seleccionarlo por su clase, así:

$(".miClase");

En este jsFiddler puede ver un ejemplo de esto: https://jsfiddle.net/gavilanch/t176zfmg/

Nota: Los selectores pueden perfectamente seleccionar más de un elemento, como veremos a continuación.

Selector por Elemento

Para seleccionar por elemento, simplemente colocamos el elemento HTML. Por ejemplo:

<span>Este es un span</span>
<span>Y este es otro span</span>

Si queremos seleccionar ambos span, solo debemos hacer lo siguiente:

$("span");

Y listo.

Selector Universal

El selector universal sirve para seleccionarlo todo, tan simple como eso. Utilizamos el símbolo "*". Podemos utilizar un context para limitar nuestra búsqueda a un contexto determinado. Por ejemplo.

Si quisieramos todos los elementos del documento html, pues usamos: $("*");

Si quisieramos todos los elementos que están dentro de un elemento con clase "miClase", podemos utilizar: $("*", ".miClase").

En el siguiente jsFiddle vemos un ejemplo de esto: https://jsfiddle.net/gavilanch/fyh4efmg/1/

Selectores por atributo

Como vimos, tenemos varios sabores a la hora de seleccionar por atributo. Recordemos qué es un atributo:

<elemento atributo1="valor1" atributo2="valor2" />

Un atributo son esas parejas key-value que aparecen en nuestros elementos HTML. Un ejemplo más concreto:

<div class="miClase" att1="valor1"></div>

Aquí tenemos a class y att1 como atributos, y sus valores son miClase y valor1, respectivamente.

Si queremos seleccionar el div anterior por el valor del atributo att1, hacemos lo siguiente:

$("[att1=valor1]");

El siguiente jsFiddle contiene ejemplo de este y los demás métodos de selección por atributo: https://jsfiddle.net/gavilanch/aeq9h9ro/

Combinando Selectores

Como vimos en el último jsFiddle, podemos combinar los selectores anteriores de la manera que queramos. Por ejemplo: Si queremos seleccionar todos los elementos div que tengan la clase "miClase" utilizamos la siguiente combinación:

$("div.miClase");

Fíjate que simplemente contatenamos "div" y ".miclase" que son selectores para seleccionar por elemento y por clase, respectivamente. Lo mismo podemos hacer con los demás selectores.

Si quieres aprender más de jQuery, visita el curso Programando en jQuery: https://www.youtube.com/watch?v=pjrvStfKRXk&list=PL0kIvpOlieSPC8pxiVbQlNM-GIk9Ys_A_