Scribd Logo
Upload

Welcome to Scribd!

  • El Framework Jquery para Principiantes

    Uploaded by

    Jorge Martin Muñoz Feliciano
    107 views6 pages

    Original Title

    El Framework jQuery Para Principiantes

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    107 views6 pages

    El Framework Jquery para Principiantes

    Uploaded by

    Jorge Martin Muñoz Feliciano

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    jQuery

    El framework jQuery es una biblioteca que nos simplificara la manipulacin del rbol DOM, manejar eventos sobre los elementos, mejorar nuestra web con efectos muy atractivos, mejorando significativamente el dinamismo y usabilidad de nuestros desarrollos. En esta gua veremos los conceptos bsicos para entender el uso del framework, para poder comprender esta gua debemos tener conocimiento sobre el lenguaje javascript. Esta gua est orientada aquellas personas que no tengan conocimiento sobre jQuery y deseen comenzar a desarrollar con esta biblioteca. Mucha gente pregunta cmo realizar operatorias que involucran reglas de negocios, controles o funciones dinmicas que requieren ser controlados desde el lado del cliente, para debemos hacer uso del javascript, framework como jQuery nos permiten realizar estos desarrollos de manera simple, otra ventaja que tiene el uso de estas libreras es que el cdigo desarrollado funcionar en los diferentes navegadores.

    Descarga
    Para descargar la librera podemos hacerlo del sitio oficial en la parte de descargas http://jqueryui.com/download, ah podremos elegir que necesitamos bajar de la librera.

    Instalacin
    Incluir el archivo jquery-x.x.x.js en nuestra pgina web, y dependiendo del comportamiento que deseamos lograr incluir los archivos .js que sean necesarios.

    Documentacin
    Existen mucha documentacin de esta biblioteca, algunos sitios que podemos obtener informacin son: http://www.jquery.com http://www.visualjquery.com http://charupload.wordpress.com/2007/12/07/jquery-documentation-chm/ http://todojquery.wordpress.com/category/documentacion

    Primero paso
    Normalmente necesitamos realizar algn control o registrar eventos sobre un elemento del rbol DOM, por ejemplo tenemos el siguiente cdigo HTML:

    <BODY>
    <DIV id=actions>

    <INPUT TYPE=BUTTON ID=btn VALUE="Saludo" NAME=btnSaludo CLASS=hi>


    </DIV> </BODY>

    Vamos a realizar el muy famoso y siempre querido ejemplo Hola Mundo, lo que vamos a querer realizar es mostrar un saludo cuando presionemos sobre nuestro botn. Si quisiramos registrar el evento del botn cuando se termina de carga nuestra pgina en javascript deberamos realizar lo siguiente:

    function init() { document.getElementById(btn).onClick = javascript: alert(Hola Mundo); return false ; } window.onload = init;

    Cmo haramos esto usando jQuery? Lo primero que debemos conocer es a seleccionar los elementos del documento con jQuery, la librera nos brinda una gran cantidad de formas de seleccin de los elementos, particularmente en esta gua veremos los casos ms simples, para seleccionar un elemento conociendo el atributo id usaremos el siguiente cdigo:

    $(#btn) o jQuery(#btn) // Seleccin por id

    Los dos ejemplos seleccionaran el elemento con id btn, ahora bien, le ponemos el carcter especial # para indicar que lo que vamos a seleccionar es a partir de un ID, vale recordar que solo un elemento del DOM debera tener este ID por lo que solo vamos a seleccionar un nico elemento, por otro lado qu diferencia hay entre $ y jQuery ? en este caso ninguna esta diferencia podemos hacer uso si utilizramos otra librera que nos pueda traer conflicto por ejemplo PROTOTYPE. Sin embargo, si quisiramos seleccionar un conjunto de elementos que tiene la misma clase lo haremos de la siguiente manera:

    $(.hi) o jQuery(.hi) // Seleccin por clase

    En el caso anterior observaremos que le indicamos que la seleccin ser a partir de una clase con el carcter especial ., recordemos que ms de un elemento del DOM podran llegar a tener la misma clase por lo tanto estamos recuperando un conjunto de elementos. En cambio si quisiramos seleccionar un conjunto de elementos a partir de algn atributo debemos hacerlo as:

    $(input[name=btnSaludo]) // Seleccin de todos los inputs que tengan como nombre btnSaludo

    Bien ya sabemos cmo seleccionar uno o ms elementos del DOM, para poder lograr el objetivo de registrar el evento que nos mostrara el saludo cuando presionemos le nuestro botn debemos conocer como registramos el evento al botn con jQuery, mediante jQuery podemos hacerlo de diferentes manera, bien si el elemento que necesitamos agregar el evento no existiera porque este se creara de manera dinmica usaremos el delegate() y este registrara el evento cuando el elemento sea creado, en nuestro caso en particular el elemento ya existe entonces registramos el evento del elemento:

    $(#btn).click(function(){ alert(Hola Mundo); });

    Por el momento ya sabemos cmo seleccionar el elemento y registrar un evento click sobre este, pero nosotros adems deseamos que esta operacin se haga cuando se haya cargado toda la pgina:
    $(window).load(function () { $(#btn).click(function(){ alert(Hola Mundo); }); });

    Segundo paso
    Fcil no? Bien, veamos un ejemplo un poco ms complicado, que el viejo querido Hola Mundo, el siguiente ejemplo veremos cmo manejar ms de un resultado en una seleccin y como usar algunos efectos que nos ayudaran a que nuestra pgina sea ms atractiva.

    <BODY> <DIV id=container style=display: none> <A HREF=# NOMBRE=Marcelo CLASS=hi>Me llamo </A> <BR/> <A HREF=# NOMBRE=Mauro CLASS=hi>Me llamo </A> <BR/> <A HREF=# NOMBRE=Miguel CLASS=hi>Me llamo.. </A> </DIV>
    <DIV id=actions>

    <INPUT TYPE=BUTTON ID=open VALUE="Abrir" >


    </DIV> </BODY>

    En el cdigo HTML anterior vemos 3 LINKS dentro de un DIV que est oculto, cada uno de estos LINKS tiene un atributo NOMBRE y por otro lado vemos que tenemos un botn Abrir que nos abrir el DIV que est oculto con los LINKS, cuando presionemos sobre cada uno de los links nos dir como se llama, el cdigo javascript es el siguiente:
    $(window).load(function () { // Registramos el evento click del boton $(# open).click(function(){ $(#container).slideDown(slow); //Abrimos el div que est oculto }); // Registramos los eventos de los links $(.hi).each(function(i){ $(this).click(function(){ alert($(this).attr(NOMBRE)); }); }); });

    Ok analicemos un poco el cdigo, vemos que en la registracin del botn hacemos uso de la funcin .slideDown que es uno de los efectos que nos brinda jQuery este nos desplegara hacia abajo el DIV mostrando el contenido, por otro lado como dijimos anteriormente una clase puede poseerla ms de un elemento del DOM por lo que la seleccin nos traer un arreglo de objetos, por eso hacemos uso de la funcin .each que por cada uno de los elementos del arreglo aplica la funcin, $(this)se refiere al objeto del arreglo que esta iterando y .attr()nos retorna el valor

    del atributo que indiquemos, se imagina todo lo que podemos hace!! .attr(atributo,valor) podemos setear otro atributo a un elemento.

    Tercer paso
    Muy bien sabemos cmo podemos sacar provecho y agregar atributos personalizados en los elementos del DOM, aplicar efectos sobre los mismos y hace referencia sobre cada uno de ellos seleccionndolos, pero en este caso veremos otra opcin que nos ofrece jquery que es realmente muy til y nos optimiza la seleccin de los elementos, jquery nos permite pasar un argumento ms a la funcin $ o jQuery, este parmetro hace referencia al contexto del elemento que deseamos seleccionar, veamo un ejemplo:

    <BODY> <DIV id=container1> <INPUT TYPE=TEXT CLASS=hour VALUE=17:30:00 /> <INPUT TYPE=BUTTON CLASS=validate VALUE="Validar" > </DIV> <DIV id=container2> <INPUT TYPE=TEXT CLASS= hour VALUE=18:30:00 /> <INPUT TYPE=BUTTON CLASS =validate VALUE="Validar" > </DIV>
    <DIV id=actions> </DIV> </BODY>

    Para el cdigo anterior podemos ver dos cajas de textos que tienen la misma clase hour y dos botones que tambin tiene la misma clase validate, supongamos que deseamos validar que el valor ingresado sea una hora valida, en este ejemplo veremos el uso del argumento de contexto que nos facilita jQuery, registraremos la funcionalidad de los botones para validar cada uno de los campos de textos que contendrn la hora.

    $(window).load(function () { // Registramos el evento click de los botones $(. validate).click(function(){ // Seleccionamos la hora dependiendo del contexto var hora = $(.hours, $(this).parent()).val(), exp = /(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$/; if(!hora.value.match(RegExPattern)){ $(.hours, $(this).parent()).addClass(error); alert(Ingrese una hora valida); } }); });

    Analicemos el script anterior, vemos que registramos el evento click para todos los elementos que contengan la clase valdate en nuestro caso anterior serian cada uno de los botones, creamos una variable hora en donde ponemos el valor de la caja de texto que est en el mismo contexto del botn en para eso pasamos el segundo argumento que hace referencia al elemento padre del botn $(this).parent() este selector hace referencia a los divs container1 y container2 y luego validamos la hora con una expresin regular, si la funcin match nos retorna false la validacin falla por lo tanto le agregamos una clase nueva mas al campo de texto, esta clase nos permitir cambiar el estilo del elemento errneo y emitimos una alerta con el mensaje de error. En la prxima gua veremos cmo insertar cdigo HTML de manera dinmica y acceder a los datos por medio de ajax.

    You might also like