TUTORIAL JQUERY Jonny Alexander Montero Albert Antonio Muñoz

TUTORIAL JQUERY
Jonny Alexander Montero
Albert Antonio Muñoz
JQuery es uno de los complementos más esenciales para el desarrollo web, usado en millones de
sitios en toda la web, ya que nos facilita mucho el desarrollo de aplicaciones enriquecidas del lado
del cliente, en Javascript, compatibles con todos los navegadores.
Para los que se inician, conviene aclarar que jQuery no es un lenguaje, sino una serie de funciones
y métodos de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una librería que podemos
usar opcionalmente si queremos facilitar nuestra vida cuando programamos en Javascript. A veces
nos podemos referir a jQuery como framework o incluso como un API de funciones, útiles en la
mayoría de proyectos web.
En nuestro pequeño tutorial entramos en de la pagina oficial de JQuery (http://jquery.com/), y se
ha descargado la versión Download the uncompressed, development jQuery 2.1.3 la cual es la
versión descomprimida de JQuery y se la a guardado donde tendremos los archivos HTML que
queremos que tengan este framework.
Nota: si queremos lo guardamos en una carpeta dentro de el mismo directorio, y en ves de llamar
como se lo hace normalmente (<script language="javascript" type="text/javascript"
src="jqueryv2.js"></script>), lo haremos asi : (<script language="javascript" type="text/javascript"
src="nombrecarpeta/jqueryv2.js"></script>).
Para nuestro caso se ha hecho un pequeño plugin con jQuery que sirve para añadir campos en un
formulario HTML bajo solicitud del cliente (genera dinámicamente).
primero que todo en el código HTML incluimos el JQUERY con la siguiente sentencia : <script
language="javascript" type="text/javascript" src="jqueryv2.js"></script> la cual nos conecta con
todas las utilidades o plugins de JQuery.
Nota: Podemos llamar el script tanto en la cabeza como en el cuerpo en HTML.
Código del Formulario
Después de esto procedemos a construir un formulario el cual tendrá los datos que el cliente
desee, en nuestro caso los campos que vamos a insertar serán todos del mismo tipo, para facilitar
las cosas.
Como se puede observar tendremos un enlace en el formulario con el texto "Más campos" el cual
al pulsarlo, simplemente inyectará código HTML para mostrar un campo nuevo en el formulario.
Si nos fijamos bien tenemos un identificador en el enlace llamado "mascampos" el cual nos
permitirá luego acceder al enlace desde el JQuery.
Utilidad para añadir campos en formulario
Ahora observaremos el código de la utilidad de JQuery que nos permite crear o añadir elementos
dinámicamente.
Para funcionar este código debe recibir tres parámetros:



El primero de ellos, "etiqueta", sirve para etiquetar el nuevo campo que se va a crear, este
contendrá un texto que pondremos al lado de los campos que se van a crear
dinámicamente.
El segundo parámetro, "nombreCampo", sirve para darle un nombre interno para ese
campo, que colocaremos en el atributo name del elemento INPUT HTML.
El parámetro "indice" sirve para modificar el nombre del campo creado incluyendo un
índice, de modo que ningún campo creado tenga el mismo nombre este índice será
numérico y se incrementará en cada campo que se inserte, de modo que será distinto en
cada campo nuevo generado.
Luego debemos hacer algunas cosas para tener nuestro formulario dinámico:
Primero almacenar en el HTML del enlace todos los datos que necesitamos para crear los campos,
en pocas palabras todos los datos que se enviaron como parámetros al llamar a la utilidad de
JQuery.
Luego tendremos que implementar un evento clic sobre el enlace, que se encargará de realizar
todas las acciones para generar dinámicamente e insertar el campo en el formulario. El evento
"click" del enlace tendrá que recuperar todos los datos almacenados en el enlace y luego generar
el HTML del campo a insertar. Se generan los elementos por medio de la función jQuery y luego se
insertan mediante el método before() del elemento enlace, para que el nuevo campo creado se
coloque justo antes del enlace.
$(document).ready(function(){
$("#mascampos").generaNuevosCampos("Compra", "compra", 2);
});
La anterior línea de código en javascript se utiliza para llamar a la utilidad de JQuery (plugin).