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.

El documento HTML

En la publicación anterior hablamos de que cuando hacemos un pedido a un servidor web este nos envía un documento HTML. Hablaremos un poco de dicho documento, enfocándonos en tres partes: la parte de HTML, la parte de CSS y la parte de javascript, las cuales representan contenido, estilo y lógica, respectivamente.

Cuando hablamos del "documento HTML" nos referimos al archivo que un servidor web envía a nuestro navegador con el fin de poder visualizar la página web solicitada. A pesar de su nombre, el documento HTML contiene más que código HTML.