Desde que uso jQuery, he aprovechado una de sus funciones que al mismo tiempo que facilitan la vida, nos la pueden complicar, pero algo es seguro: una vez que dominamos esta funcionalidad, ya estamos del otro lado con jQuery. La funcionalidad de la que hablo es (o son) los selectores de jQuery o jQuery Selectors en inglés.
Antes que nada, un selector es la forma en que jQuery nos permite elegir uno o varios elementos dentro del DOM de una página, para su posterior manipulación o simple consulta, y se identifica por ser el único texto precedido por el símbolo de jQuery, $, y encerrado en paréntesis.
//ejemplo de Selector
$("div.clase");
La manera en que se deciden los filtros para hacer la selección es muy similar a la que usa CSS para dar estilo a un grupo de elementos o a uno sólo, por ejemplo, si quisieramos en CSS hacer que todos los DIV cuya clase 'rojo' tengan un borde rojo, en CSS sería de la siguiente forma:
/** Ejemplo en CSS**/
div.rojo{
border: 1px solid #ff0000;
}
Mientras que con el mismo principio, podemos seleccionar todos los DIV de la clase rojo usando el mismo formato que en el CSS: div.rojo, donde se establece primero el elemento a buscar (div) y se delimita a que tenga la clase "rojo". Es importante recordar que al igual que en CSS, una clase se define con un punto . antecediendo el nombre de la clase y un ID se define antecediendo un símbolo de número # al nombre del elemento. Al igual que con CSS, podemos seleccionar unicamente elementos que estén dentro de otros elementos:
<!-- Ejemplo de selección de elementos internos (HTML)-->
<div class="principal">
<h1 class="Titulo">Titulo de mi sección</h1>
<div class="contenido">
<p>Texto texto</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
</div>
</div>//seleccionar todos los DIV
$("div");
//Todos los DIV dentro del div de clase "principal"
$("div.principal div");
//todos los LI
$("li")
//LI's del menu
$("div.menu li");
//LI's del menu, otra opcion
$(".menu li")
//seleccionar el título
$("h1")
//seleccionar el título otra opcion
$(".principal h1");
Aunque los ejemplos son muy básicos, sirven para demostrar que la base de los filtros o selectores de jQuery provienen de la sintaxis de CSS, donde se puede elegir todos los elementos de una misma etiqueta (div, li, h1) o todos los elementos de una misma clase (principal, menu, titulo). Al igual que en CSS, podemos seleccionar elementos dentro de otros elementos, por ejemplo en lugar de elegir unicamente los LI de toda la página, los limitamos a los LI del menú en el cuarto ejemplo.
Los selectores de jQuery son demasiado flexibles, y al mismo tiempo pueden ayudarnos a restringir nuestros resultados a un cierto grupo, ya sean sólo pares, o sólo los primeros 20 elementos, que sean de una sola zona de la página, etc. Pero esto lo continuaremos en la segunda parte de este Aprendiendo: Selectores de jQuery, donde veremos selecciones más complicadas y algunos selectores propios de jQuery, por que no todo es sintaxis de CSS, también por sí mismos han implementado una serie de selectores bastante útiles.