Empezando con jQuery (Selectores básicos)

Hasta el momento hemos estudiado sobre cómo integrar jQuery a nuestra página y cómo preparar el entorno para trabajar en jQuery .

Ahora bien, vamos a ver los selectores...

¿Qué es un selector?

El selector es una forma de identificar a uno o más objetos de la página, principalmente hay 3 tipos de selectores básicos, a partir de ellos se pueden combinar o hacerlos más detallados.

¿Cuáles son los selectores básicos?

Los selectores básicos son 3 y son los siguientes:

• Selector por nombre de etiqueta: (p, div. span, a, h1, etc...).
• Selector por id: estos se identifican porque se les precede un símbolo de "#" antes del nombre del id p/e #formulario .
• Selector por clase: las clases son más usadas en CSS, pero también puede ser usada por jQuery, para acceder a un selector por clase, se le precede por un punto al nombre de la clase "." p/e .estilo1 .

¿Cómo usar los selectores?


Para usar los selectores dentro de jQuery recurriremos a una función llamada factory "$ ( )"  la cuál se encarga de ubicar a los objetos según el tipo de selector usado; la forma en que combinamos el selector y la función es de la siguiente manera:

Por etiqueta (Tag):

$("a"); //  Selector para la etiqueta de vínculos, seleccionará todas los objetos que pertenezcan al Tag < a >

Por id:

$("#formulario");// El selector por id puede ser, de cierto modo, más específico porque afecta sólo a aquellos objetos que tengan el id llamado 'formulario'.

Por clase:

$(".estilo");//Selector por clase, afectará a aquellos elementos que tengan el atributo class='estilo'

¿Hay más selectores?

Sí, hay muchos más selectores e incluso podemos combinar los tres para hacer el selector más específico, por ejemplo el siguiente selector:

$("p .estilo");

Significa que seleccionará a todos las etiquetas de tipo párrafo que tengan la clase 'estilo'.

Existen otros selectores, por ejemplo el selector:

$(":text");

Indica que se hace una referencia a aquellos objetos que sean < input type='text' >

También hay para objetos de tipo boton < input type='button' >  :

$(':button');

Como podrán ver, hay otros selectores que pueden ser más específicos según nuestras necesidades de programación. Los selectores son la parte medular de este framework, sin duda nos pueden ayudar a reducir el trabajo, estos pueden ser tan específicos como nosotros queramos, afectando a uno o más objetos.

Saludos.