JQuery
El jQuery es una librería de JavaScript para acceder a los objetos del DOM de un modo simplificado.El autor de esta librería es John Resig
Las aplicaciones en internet son cada vez más complejas, ya que incorporan efectos visuales, drag and drop, auto-completar, animaciones etc. el desarrollar todos estos conceptos desde cero puede resultar complicado sobretodo si tenemos que presentar la solución con muy poco tiempo, en este tipo de situaciones el empleo de librerías como el jQuery nos facilitan el desarrollo de la aplicación. Otra ventaja paralela es despreocuparnos cuando codificamos en la compatibilidad de navegadores, ya que la librería resolverá esto.
Para utilizar la librería como dijimos debemos descargarla del sitio oficial y en cada página que lo requiera agregar:
<script type="text/javascript" src="jquery.js"></script>
La librería jQuery en resumen nos aporta las siguientes ventajas:
- Nos ahorra muchas líneas de código.
- Nos hace transparente el soporte de nuestra aplicación para los navegadores principales.
- Nos provee de un mecanismo para la captura de eventos.
- Provee un conjunto de funciones para animar el contenido de la página en forma muy sencilla.
- Integra funcionalidades para trabajar con AJAX.
- Existen un amplio abanico de extensiones.
EJERCICIO:
Dispongamos el problema trivial de capturar el evento de un control HTML de tipo button, lo desarrollaremos utilizando la metodología tradicional accediendo directamente a las funciones del DOM y luego empleando la librería jQuery:
PÁGINA 1:
<html>
<head>
<title>Problema</title>
</head>
<body>
<h2>Captura del evento click de un control HTML de tipo button.</h2>
<a href="pagina2.html">Método tradicional con las funciones
del DOM </a><br>
<a href="pagina3.html">Utilizando la librería jQuery</a><br>
</body>
</html>
PÁGINA 2:
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="funciones1.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>
FUNCIONES 1:
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
var boton1=document.getElementById('boton1');
addEvent(boton1,'click',presionBoton,false);
}
function presionBoton(e)
{
alert('se presionó el botón');
}
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
PÁGINA 3:
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones2.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>
FUNCIONES 2:
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#boton1");
x.click(presionBoton)
}
function presionBoton()
{
alert("Se presionó el botón");
}
EJERCICIO 2:
Capturar el evento mousemove a nivel del objeto document, este se dispara cada vez que desplazamos el mouse dentro de la página. Mostrar la coordenada donde se encuentra la flecha del mouse.
PÁGINA 1:
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<p id="corx">coordenada x=</p>
<p id="cory">coordenada y=</p>
</body>
</html>
FUNCIONES:
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$(document);
x.mousemove(moverMouse);
}
function moverMouse(event)
{
var x;
x=$("#corx");
x.text("coordenada x="+event.clientX);
x=$("#cory");
x.text("coordenada y="+event.clientY);
}
No hay comentarios:
Publicar un comentario