Selectores CSS en JQuery

Después de la rápida introducción a JQuery publicada hace días, ahora quiero exponer el uso de los selectores CSS. JQuery utiliza los selectores para acceder a los elementos de la página, lo cual es muy sencillo en comparación con la API DOM aprobada por la W3C. Además de los selectores CSS aprobados JQuery añade algunos que mejoran la funcionalidad, aunque el navegador web utilizado no los implemente de forma nativa.

A continuación los tipos más básicos de selectores:

• Etiqueta: Basta con escribir el nombre de una etiqueta para que JQuery seleccione todos los elementos de ese tipo, por ejemplo:
• $("p") // todos los elementos de párrafo.
• $("div") // todas las capas o DIV de la página.
• $("h1") // todos los elementos de encabezado H1.
• $("div p") // todos los elementos de párrafo que estén dentro de un DIV.
• ID: Mediante el id de los elementos podemos acceder directamente a ellos, con ésto sólo se obtendrá un elemento ya que el id no debe repetirse en la página, para su uso se escribe # (gato), ejemplos:
• $("#elemento") // El primer nodo que tenga el id="elemento".
• $("#principal div") // Selecciona todos los DIVs que estén dentro del elemento con id="principal".
• Clases: Mediante el atributo class de los nodos, podemos seleccionar todos los elementos que contengan una clase determinada, para eso se utiliza . (punto), ejemplo:
• $(".grandes") // Obtendrá todos los elementos con class="grandes".
• $("#principal div.cabecera") // Se pueden combinar los tipos de selectores, así obtendrá todos los DIVs con class="cabecera" que estén dentro del elemento con id="principal".

Mientras más específicos seamos con los selectores obtendremos mejores resultados, además JQuery ofrece algunos modificadores que filtrarían los elementos, dependiente de algunas características por ejemplo, qué ocurriría si queremos seleccionar el campo de formulario que posee el enfoque el usuario o el cursor, entonces usaríamos: $("input:focus"), a continuación menciono algunos:

• :button - Selecciona sólo los elementos button o input type="submit", etc.
• :checkbox - Sólo los input type="checkbox".
• :checked - Elementos radio o checkbox seleccionados por el usuario.
• :contains(texto) - Elementos que contengan el texto dentro de ellos.
• :disabled - Los elementos des-habilitados mediante la propiedad disabled="disabled".
• :header - Sólo elementos de encabezado H1, H2, etc.
• :not(selector) - Descarta los elementos que coincidan con selector que puede tratarse de otro selector simple o complejo.
• :visible - Sólo elementos visibles.

Sólo por mencionar algunos, además se pueden combinar, por ejemplo:

$("input:visible:disabled:not(.yono)")

Además se pueden usar múltiples selectores en una llamada, por ejemplo:

$("#uno, #otro, .varios, div, select, input:visible:disabled")

Finalmente mencionaré aquellos donde se pueden verificar los atributos y sus valores, así seleccionar sólo aquellos que cumplan ciertas condiciones, por ejemplo si contiene data="algo" entonces

$("[data=algo]"), ejemplos:

• [atributo*=valor] - Selecciona sólo aquellos que posean la cadena valor dentro del atributo, por ejemplo: <a atributo="valor1" />
• [atributo^=valor] - Debe comenzar con la cadena valor.
• [atributo$=valor] - Debe terminar con la cadena valor.
• [atributo!=valor] - Debe ser diferente a la cadena valor.

Seguiremos la serie de entradas de JQuery donde expondré más de sus curiosidades, yendo de lo básico a lo complejo, hasta la próxima!

Fuente: JQuery Selectors