Empezando con jQuery (Un pequeño ejemplo)

Hasta ahora hemos visto cómo cargar el código , cómo preparar el entorno  y qué son los selectores, ahora lo siguiente es saber cómo podemos utilizarlo.

¿Qué haremos?

El objetivo principal de jQuery (Y de muchos otros Frameworks) es de simplificar instrucciones, por ejemplo, en javascript para seleccionar a un objeto según su 'id' haríamos algo como esto:



var x=document.getElementById('elemento');
En cambio, con jQuery podemos simplificarlo en algo como:

var x = $("#elemento");

Podemos apreciar a simple vista la reducción de código, tal vez no a grandes rasgos, pero poco a poco se demostrará esto.


Para empezar a programar en jQuery, hagamos una pequeña prueba donde le asignemos un estilo (clase) CSS a un párrafo, el nombre de la clase que le asignaremos es "Estilo" y la agregaremos usando el método "addClass('nombre_de_la_clase')".

< HTML >
< HEAD >
< style >

 .Estilo /* Nuestro estilo que modificará a nuestro párrafo */
 {
 color:yellow;
 background-color:gray;
 }

< /style >
 < TITLE >New Document< /TITLE >
 < script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript">< /script  >
 < script >

    $(document).ready( function() { $("#Parrafo").addClass('Estilo'); });

 < /script >
< /HEAD >
< BODY >


< p id="Parrafo" >

 Este párrafo debe tener un fondo gris y una letra amarilla...

< /p >
< /BODY >
< /HTML >

El resultado sería este:

Poco a poco les mostraré trucos y más funciones que pueden realizar con jQuery.

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.