J Query

jQuery, un nuevo tipo de librera Javascript
Si navegas mucho por la web te puedes dar cuenta que muchas pginas ofrecen interfaces web atractivas, con animaciones y muchas peticiones AJAX para no necesitar refrescar las pginas. Si te interesa implementar este tipo de funcionalidad en tus pginas, la mejor forma es utilizando una librera como por ejemplo jQuery. En este artculo te voy a ensear lo bsico de jQuery y te voy a mostrar unos cuantos ejemplos como este:
Qu es jQuery?
jQuery es una librera de JavaScript rpida y concisa que simplifica la manipulacin de HTML, manejo de eventos, animaciones e interacciones AJAX para que el desarrollo sea ms rpido. Existen muchas libreras parecidas a jQuery. estn Prototype, Script.aculo.us,MooTools, Dojo y YUI. Entre las ms conocidas
A pesar de que existen todas las libreras mencionadas, mi favorita es jQuery por las siguientes razones: Viene en una versin comprimida que pesa 24KB, mejorando as la velocidad de descarga de las pginas. Ofrece un modo "noConflict" que permite usar Javascript de forma que no interfiera con otras libreras. Gracias a esto, es posible utilizar jQuery y Prototype juntas. Funciona en mltiples navegadores. Con esto ya no necesito preocuparme del navegador en el que estoy para ejecutar cdigo JavaScript. Permite la creacin de Plugins. Ofrece una versin llamada jQueryUI que tiene componentes visuales como tablas, calendarios, acordeones, etc.
Cmo instalo jQuery?

Lo primero que debes hacer es descargar la librera desde http://jquery.com/. Existen dos versiones que puedes descargar. La de produccin que es la ideal para tus aplicaciones terminadas (pesa 24KB) y la de desarrollo si quieres ver el cdigo fuente de la librera. Una vez descargado el archivo jquery-x.x.x.js debes colocarlo en alguna ruta de tu servidor web y enlazarla en tus pginas web. Si no sabes como enlazar un archivo JavaScript en tus pginas web te recomiendo leer Todo lo que necesitas saber acerca de HTML.
Modo noConflict
Toda la funcionalidad de jQuery est dentro del namespace llamado jQuery para evitar conflictos con funciones con los mismos nombres en otras libreras. Sin embargo jQuery utiliza como abreviatura el smbolo $ por lo que invocar a jQuery() es equivalente a invocar a $(). El smbolo de $ es muy comn en otras libreras por lo que si incluyeramos las libreras jQuery y Prototype ambas tendran la funcin $ generando un conflicto. Te recomiendo utilizar jQuery en modo noConflict para que tus aplicaciones no interfieran con otras libreras. Para ejecutar jQuery en modo noConflict basta con agregar el comando jQuery.noConflict(); despus de incluida la librera. El cdigo de tu pgina se debera ver como el siguiente: 01 <html> 02 <head> 03 <meta http-equiv="Content-Type" content="text/html;charset=UTF8" /> <script type="text/javascript" src="http://localhost/jquery1.4.2.min.js"></script> <script> jQuery.noConflict(); </script>
04 05
06 </head> 07 <body> 08 09 </body> 10 </html> Listo!! jQuery ya est incluido dentro de tu pgina web y puedes comenzar a utilizarlo.
Utilizando jQuery
Como ya he mencionado, toda la funcionalidad de esta librera se encuentra bajo el namespace jQuerypor lo que siempre comenzaremos con esta palabra. Para que quede un poco ms claro voy a mostarte un ejemplo bsicos que lo nico que hace es cambiarle el color a un elemento de la pgina. 01 <html> 02 <head> 03 <meta http-equiv="Content-Type" content="text/html;charset=UTF8" />
04 05
<script type="text/javascript" src="http://localhost/jquery1.4.2.min.js"></script> <script> jQuery.noConflict(); </script>
06 </head> 07 <body> 08 09 10 11 12 13 14 15 16 </p> evento on click.  <p id="contenido" style="width:150px;padding:10px;"> Bienvenido al primer ejemplo de copstone con jQuery. En este ejemplo podrs darte cuenta de cmo utilizar jQuery en un  <input type="button" onclick="jQuery('#contenido').css('backgroundcolor', '#ff0000');" value="Cambiar color" />
17 </body> 18 </html> Cuando presionas el botn, el tag con id contenido cambia de color. Como puedes ver, esto se debe a que hemos ejecutado el comando jQuery('#contenido').css('background-color', '#ff0000');dentro del evento onclick. Como mencionamos antes todo comienza con jQuery. Luego entre parntesis sigue lo que llamamos unselector css, es decir, la indicacin del elemento(s) a el/los que queremos aplicar el efecto en este caso#contenido representa a todos los elementos que tengan id="contenido". Luego se llama al mtodo a aplicar, en este caso css y se le mandan los parmetros necesarios. En este caso estoy diciendo que se modifique el valor del atributo backgroundcolor con #ff0000 (rojo).
Ejecutar jQuery al inicio

Supongamos que queremos que el color del contenido del ejemplo anterior se cambie de forma automtica con verde cuando se inicia la pgina. Una solucin posible es colocar el mismo cdigo del evento onclick al inicio de la pgina (en el head), sin embargo esto no es recomendable ya que probablemente el cdigo se ejecutara antes de que exista el contenido que vamos a cambiar.
Para evitar estos errores, jQuery propone colocar el cdigo dentro de una funcin llamada ready que se ejecutar una vez que se haya cargado toda la pgina y est lista para ser modificada por jQuery. La estructura bsica de esta funcin es: 1 jQuery(document).ready(function(){ 2 3 }); Al principio puede parecer algo confuso pero pinsalo de la siguiente manera: Primero selecciono a quien le voy a aplicar el evento jQuery(document), es decir, al documento completo (toda la pgina). Luego selecciono el mtodo ready (cuando el documento est listo) que recibe como parmetro el cdigo completo de una funcin function() { } y por ltimo cierras el parntesis del mtodo readyterminando con un ; de fin de instruccin. Ahora voy a agregar el cdigo necesario para que al cargar la pgina se le coloque el color verde al contenido. 01 <html> 02 <head> 03 04 05 06 07 08 09 10 }); </script> <meta http-equiv="Content-Type" content="text/html;charset=UTF8" /> <script type="text/javascript" src="http://localhost/jquery1.4.2.min.js"></script> <script> jQuery.noConflict(); </script> <script> jQuery(document).ready(function(){ jQuery('#contenido').css('background-color', '#00ff00'); // Contenido de la funcion
11 </head> 12 <body> 13 14 15 16 17  <p id="contenido" style="width:150px;padding:10px;">  <input type="button" onclick="jQuery('#contenido').css('backgroundcolor', '#ff0000');" value="Cambiar color" />
18 19 20 21 </p> evento
Bienvenido al primer ejemplo de copstone con jQuery. En este ejemplo podrs darte cuenta de cmo utilizar jQuery en un on click y cuando cargue la pgina.
22 </body> 23 </html>
Selector CSS
Todos los comandos de jQuery se aplican a uno o ms elementos. Para poder distinguir a que elemento se le debe aplicar es necesario utilizar selectores css, es decir, jQuery interpreta los selectores al igual como lo hace CSS. Aqu te doy un ejemplo de algunos selectores posibles: JQuery jQuery("*") Aplica a Aplica a todos los tags HTML de la pgina. Todos jQuery("#val") Por ejemplo aplicar a: <p id="val">Parrafo 1</p> Aplica a todos los elementos que tengan como atributo class el valor tipo. jQuery(".tipo") Por ejemplo aplicar a: <p class="tipo">Parrafo 1</p> Aplica jQuery("div") Por ejemplo aplicar a: <div id="uno">Parte uno</div> Aplica a todos los elementos de tipo p que se encuentren dentro de un elemento de tipo div. jQuery("div p") Por ejemplo aplicar al tag p de: <div>Esto es <p>un ejemplo</p></div> jQuery(document) jQuery(this) Aplica a todo el documento HTML. Aplica al elemento actual. Esto es muy til para jQuery anidado. a todos los elementos de tipo div. los tags que tengan como atributo id el valor val.
Existen muchos selectores ms. Si quieres buscar otros ejemplos te recomiendo visitar la documentacin de jQuery. Una vez que sabes como aplicar los selectores, es simplemente cuestin de llamar a los mtodos correctos los cuales puedes consultar en la documentacin de jQuery.
Ejemplos
Aqu te dejo unos pequeos ejemplos de lo que puedes hacer con jQuery. Todos los ejemplos invocan a funciones que las declarar dentro de script tags en la cabecera de la pgina web. En todos los ejemplos podrs ver un botn que dice DEMO, presinalo para ver el resultado de lo que se quiere lograr. Todos los botones DEMO llaman a la funcin que aparece abajo del botn por ejemplo: 1 <button onclick="funcionA();">DEMO</button>
Bloquear todos los links de la pgina

DEMO Este ejemplo los eventos click the todos los tags a para que ejecuten el cdigo de la funcin que muestro en el cdigo de ejemplo. Esta funcin evita que se ejecute el click por defecto, luego obtiene el texto del link y cambia el texto para que ahora diga Bloqueado al lado del texto original. Despus de aplicar el evento click a todos los links muestra una alerta indicando que se han bloqueado los links. 01 function deshabilitarLinks() 02 { 03 04 05 06 07 08 09 10 11 12 13 14 15 alert("Links bloqueados. Intenta hacer clic a cualquier link"); }); // Agregamos la palabra bloqueado al link jQuery(this).text(texto + ' - Bloqueado'); // Obtenemos el texto del tag a var texto = jQuery(this).text(); jQuery("a").click(function(event) { // Evitamos que se haga el clic event.preventDefault();
16 } Para volver a activar los links, simplemente refresca la pgina.
Aplicar transparencia a tags p

DEMO Este ejemplo coloca todos los tags p semi transparentes, es decir, a un 25% de su color normal. 1 function transparenciaTagsP() 2 { 3 4 } jQuery("p").fadeTo("slow", 0.25);
Quitar transparencia a tags p

DEMO Este ejemplo coloca todos los tags p de color solido, es decir, elimina la transparencia al colocarle 100% de su color normal. 1 function transparenciaTagsP() 2 { 3 4 } jQuery("p").fadeTo("slow", 1.00);
Ocultar y/o mostrar tags h1, h2, h3, h4, h5, h6

DEMO Este ejemplo cambia la visibilidad de todos los tags de tipo cabecera h1, h2, h3, h4, h5, h6. Si estn ocultos los muestra y si estn visibles los oculta. 1 function toggleHeaders() 2 { 3 jQuery("h1,h2,h3,h4,h5,h6").slideToggle("slow");
4 }
Mostrar una alerta

DEMO Este ejemplo hace visible un span oculto (<span id="demoalert"
style="display:none;">Esta es la alerta</span>) y programa para que se oculte despues de 1 segundo (1000 milisegundos). 1 function displayAlert() 2 { 3 4 } jQuery("#demoalert").css("display", "inline").fadeOut(1000);
Peticin AJAX
DEMO Antes de proceder con este ejemplo, te recomiendo que leas Introduccin a AJAX. Usando el ejemplo de dicho artculo voy a pedir los datos de una tabla utilizando una peticin AJAX de tipo GET que devuelve datos en formato JSON (pgina C del artculo Introduccin a Ajax). En la invocacin AJAX de jQuery he incluido 3 mtodos: beforeSend, success y complete. El mtodo beforeSend se ejecuta antes de realizar la peticin y lo nico que har es mostrar un mensaje que diga "Pidiendo datos". El mtodo success se ejecuta cuando la peticin se realiz satisfactoriamente, en este caso voy a armar una tabla HTML con los datos obtenidos y asignarla como contenido al div con id ajaxresult. Para que esto funcione necesitas tener dentro de tu pgina un tag como el siguiente: <div id="ajaxresult"></div> El mtodo complete se ejecuta cuando la peticin termin ya sea con un error o no y muestra un mensaje diciendo que la peticin ha terminado. 01 function invocarAjax() 02 { 03 04 05 06 jQuery.ajax({ type: "GET", dataType: "json", url: '/wp-content/uploads/js/jquery_ajax.html',
07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 } });
beforeSend: function (request) { jQuery('#ajaxresult').html("Pidiendo datos"); jQuery('#ajaxresult').show("fast"); }, success: function(data) { var tabla = "<table border='3'>"; for (i = 0; i < data.length; i++) { tabla += "<tr>"; for (k = 0; k < data[i].length; k++) { if (i == 0) // primera fila tabla += "<th>" + data[i][k] + "</th>"; else tabla += "<td>" + data[i][k] + "</td>"; } tabla += "</tr>"; } tabla += "</table>"; jQuery('#ajaxresult').html(tabla); }, complete: function (request, errCode) { if (errCode != "success") alert("Ocurrio un error"); else alert("Termino satisfactoriamente"); }
Ms adelante ir publicando otros artculos que muestran como realizar efectos especficos con jQuery. Por el momento te recomiendo que vayas investigando acerca de jQuery ya que toda la informacin est en sudocumentacin.

J Query

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

J Query

Caricato da

Copyright:

Formati disponibili

jQuery, un nuevo tipo de librera Javascript

Cmo instalo jQuery?

<script type="text/javascript" src="http://localhost/jquery1.4.2.min.js"></script> <script> jQuery.noConflict(); </script>

Ejecutar jQuery al inicio

Bloquear todos los links de la pgina

16 } Para volver a activar los links, simplemente refresca la pgina.

Aplicar transparencia a tags p

Quitar transparencia a tags p

Ocultar y/o mostrar tags h1, h2, h3, h4, h5, h6

Mostrar una alerta

Potrebbero piacerti anche