jQuery y el problema con otras librerias (prototype, scriptaculous, lightwindow, etc.)

Muchas veces es necesario utilizar en nuestra aplicación otras librerias que nos permitan dar versatilidad, diseño y presentación a nuestra aplicación Web, sin embargo, al combinar ciertas librerias junto con jQuery podremos encontrarnos con ciertos detalles y errores al momento de que nuestra aplicación cargue. Y es que aveces nos guiamos más por revisar si el código tiene errores de sintáxis que en otro detalle más peculiar: La compatibilidad entre jQuery y otras librerias.

Por ejemplo, a mí me pasó en las primeras veces que andaba "jugando" con jQuery; me surgió la idea de hacer una pequeña página web donde utilizara jQuery y la libreria de lightwindow , sin embargo cuál fue mi sorpresa al descubrir que los efectos de Lightwindow no estaban funcionando, así que me "quebré un rato el coco" analizando mis instrucciones y viendo el origen del error (con la Consola de Errores del Firefox). Hasta que por fin hallé el problema: Librerías como Prototype.js, usan el mismo modelo de $( ) como jQuery para seleccionar algún elemento del DOM.

¿Hay solución o me tendré que resignar a no combinar las librerías con jQuery?

Afortunadamente, jQuery cuenta con un reemplazo al método $( ) con el fin de solucionar estos problemas y evitar conflictos con otras librerias. Esto se logra mediante el método:

jQuery.noConflict( );

A partir de ahí ahora reemplazaremos nuestra función de $( ) por la palabra jQuery( ) y ¡listo! Nuestro código y métodos funcionarán de la misma manera que con la función factory.

Vamos a suponer que nosotros modificaremos un cambio de estilo a un div al hacerle click usando lo anterior. Nuestro script quedaría de la siguiente manera:

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

jQuery.noConflict( ); //Declaramos que vamos a usar la segunda forma de jQuery...
jQuery(document).ready( function( )
{

 jQuery("div").click( function ( ) { jQuery(this).addClass("estilo"); } );

}
);

< /script >

Así, de esta forma, evitamos tener problemas con otras librerias y podemos seguir trabajando de forma normal. Saludos.

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.

Empezando con jQuery (Creando el entorno )

Ahora que conocemos cómo cargar el código, lo siguiente es saber cómo poder trabajar con él.

Lo primero que debemos de hacer (Principalmente para evitar problemas con la carga del DOM) es declarar nuestra primera función, la cual se activará en cuanto todos los elementos del documento esten cargados completamente.

La función es la siguiente:

< script >
$(document).ready(

                                    function( )

                                   {

..Aquí se colocará nuestro código.

                                   }

                               );

 < / script >

Ahora bien, lo siguiente es escribir el código que vayamos a utilizar ¿complicado? La verdad no lo parece y de hecho tampoco lo será, esta es la principal ventaja de usar un Framework, nos ayudará a simplificar el código.

Empezando con jQuery (Agregando el código a nuestra página web)

Ya tenía tiempo que no escribía algo en este blog...un poco de pereza, un poco de obligaciones y otro poco de nuevas cosas por descubrir me alejaron de aquí. En fin, ahora adentrémonos al Framework jQuery.

¿Qué es un Framework y qué es jQuery?

Un Framework es un programa que ayuda a hacer programas, se deriva de un lenguaje de programación. Ahora bien, jQuery es un framework basado en el lenguaje Javascript, creado por John Resig. Punto final, no quiero adentrarme a la teoría, para eso tenemos a la Wikipedia.


Empezando con jQuery...

Hay una ventaja desde el comienzo en que cargamos el script y es que tanto Google como la misma página de jQuery nos proporcionan el enlace del código de jQuery, eso significa que no hay necesidad de cargar el código a nuestro servidor nos despreocupamos por el ancho de banda.

Para cargar el código podemos hacerlo de dos formas:

Cargar el script usando el enlace de Google:

< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"> < /script >

O cargarlo desde la página oficial de jQuery:

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


 No olviden que estas etiquetas de preferencia van en la parte del HEAD.