En esta sección daremos inicio a nuestros
primeros pasos en el uso de la librería de JQuery, se brindará la página donde
se pueda descargar y así mismo se harán unos pequeños ejemplos para que el
lector pueda iniciarse de una manera fácil y rápida.
Obteniendo
la librería
Lo primero que debemos hacer es obtener la
librería de JQuery, esa la obtenemos en la página jquery.com, al ingresar a la
página nos aparece la opción para realizar la descarga , se
descargara un archivo con extensión .js, podemos asignarle el nombre que mas
nos guste, yo recomiendo guardarlo como “jquery.js”, pero lo dejo a criterio
del lector. Lo guardamos en nuestro escritorio o documentos ya que la vamos a utilizar
mas adelante.
Ahora como
paso siguiente creamos una carpeta (yo lo hice en el escritorio) que será donde
guardemos los ejemplos que vayamos haciendo, dentro de esta carpeta, creamos cuatro
carpetas más una para las librerías (.js), otra para los estilos (.css), la
tercera para las imágenes (.jpg, .gif, .png) y la última para nuestras páginas
(.html, .aspx, .php), de esta manera tendremos ordenado nuestro proyecto. Por último la el archivo jquery.js, lo
colocaremos en la carpeta que decidamos para almacenar las librerías (scripts
en mi caso).
Ahora
manos a la obra, para crear las páginas utilizaremos cualquiera los editores de
texto que existen, en mi caso utilizare Sublime Text 2, vamos a crear un nuevo
archivo, en este caso le llamaremos index.html, acá crearemos nuestro primer
ejercicio con JQuery.
Agregar la referencia a
la librería JQuery
Para
agregar nuestra librería JQuery, lo que tenemos que hacer es la referencia a la
librería indicando el Path o directorio donde se encuentra el archivo .js, para
ello dentro del tag <head></head>, vamos a escribir lo siguiente
(recordemos que la página index.html, debe ser creada dentro de la carpeta
paginas de nuestro curso)
[código]
<script type="text/javascript"
src="../scripts/jquery.js"></script>
Con
este código indicamos que vamos a utilizar la librería JQuery. En este primer
ejemplo vamos hacer la funcionalidad básica de aparecer y desaparecer una “<div>”
o capa, para ello vamos a agregar 2 botones y una capa quedando nuestro código
de la siguiente manera:
[código]
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
type="text/javascript"
src="../scripts/jquery.js"></script>
</head>
<body>
<input
type="button" value="mostrar" id="btnMuestra" onclick=”mostra();”
/>
<input
type="button" value="ocultar"
id="btnOcultar" onclick =”ocultar();”/>
<div id="dvMuestra"
style="background-color:yellow; font-size:14px; color:Blue; width:450px;
height:75px ;display:none ">
Capa
que se ocultará y mostrará al prescionar los botones de
arriba.....
</div>
</body>
</html>
Al
colocar el atributo “display:none” ocultamos la capa al principio, esto será
para que al principio este oculta y luego la hagamos aparecer al presionar el botón
“mostrar”. Ahora vamos a crear las funcionalidades. Primero vamos a mostrar
como se hace uso de la librería, como se mencionó en la entrada anterior JQuery
emplea el DOM para el control de los objetos de la página entonces esto quiere
decir que podemos seleccionar los objetos ya sea por nombre, por la clase que
tengan, o por el nombre del tag en específico, nosotros vamos hacer en este
momento por su nombre o “id” y por el nombre del tag en este caso al tag “div”,
para ello debemos inicializar la librería de la siguiente manera:
[código]
$(document).ready(function(){ });
Con
esto decimos que vamos a utilizar el documento completo para poder tener el
control del mismo, la manera abreviada de esta función es la siguiente:
[código]
$(function(){ });
Después
de inicializar la librería nos dedicamos a seleccionar el objeto sobre el cual
vamos a trabajar, vamos a trabajar primero seleccionándolo con el “id”, para
ello hacemos lo siguiente;
$(document).ready(function(){
$(“# dvMuestra”)
});
Acá
hemos seleccionado el id de nuestra <div> que es “dvMuestra” ahora para
hacer que se muestre la capa utilizamos la propiedad “.show();” esto hará que
se muestre la capa que hemos seleccionado, y para ocultarlo utilizamos la
propiedad “.hide()” para ocultar la capa seleccionada. Quedándonos el código de
la siguiente manera:
[código]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../scripts/jquery.js"
type="text/javascript"></script>
</head>
<body>
<input
type="button" value="mostrar" id="btnMuestra"
onclick="mostrar()" />
<input
type="button" value="ocultar" id="btnOcultar"
onclick="ocultar()"/>
<div
id="dvMuestra" style="background-color:yellow; font-size:14px;
color:Blue; width:450px; height:75px; display:none">
Capa
que se ocultará y mostrará al prescionar los botones de
arriba.....
</div>
<script
type="text/javascript">
function
mostrar(){
$(function(){
$('#dvMuestra').show();
});
}
function
ocultar(){
$(function(){
$('#dvMuestra').hide();
});
}
</script>
</body>
</html>
Al
ejecutar nuestra página nos aparecen sólo los dos botones pero al presionar el botón
mostrar aparece la capa que tenemos oculta, y al presionar el otro botón se
oculta la capa, si nos damos cuenta con pocas líneas hicimos el efecto de
ocultar y mostrar, pero aparece de una forma no muy agradable a los ojos,
podemos ponerle un efecto de “slow” a nuestro efecto de show() o hide(), para
ello dentro de los paréntesis colocamos la palabra “slow” quedando de la
siguiente manera: show(“slow”) y hide(“slow”), corremos nuestra página y listo,
tenemos un bonito efecto para nuestras capas. Para seleccionar el tag de “<div>”
en lugar de “#dvMuestra” colocamos “div”, de esa manera seleccionamos el
elemento “<div>” dentro de nuestra página. Esto es todo por el momento un
ejemplo sencillo de como trabajar con JQuery. Hasta la próxima.
No hay comentarios:
Publicar un comentario