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.