Jquery
Enviado por mrdgenaro • 1 de Mayo de 2014 • Práctica o problema • 1.110 Palabras (5 Páginas) • 189 Visitas
1 - ¿Que es el jQuery?
El jQuery es una librería de JavaScript para acceder a los objetos del DOM de un modo simplificado.
Del sitio oficial de jQuery podemos descargar estas librerías que nos serviran para está parte del curso.
El autor de esta librería es John Resig que además trabaja para Mozilla Corporation.
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>
Del sitio oficial de jQuery descargaremos la versión descomprimida que ocupa alrededor de 60 Kb (es el archivo jquery.js) y cuando subamos nuestro sitio es recomendable descargar la versión comprimida que tiene un peso de 20 Kb.
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.
2 - Nueva manera de programar JavaScript con jQuery.
Cuando uno utiliza una librería debe adaptarse a sus mecanismos de uso, el tratar de llevar los conocimientos que tenemos sobre un tema y aplicarlos a la fuerza en dicha librería puede ser frustrante. Lo más adecuado es ir viendo cual es la mecánica de trabajar con dicha librería con problemas muy sencillos e ir complicándolo a medida que entendemos su funcionamiento.
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:
pagina1.html
<html>
<head>
<title>Problema</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</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>
pagina2.html
<html>
<head>
<title>Problema</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="funciones1.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>
funciones1.js
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;
}
pagina3.html
<html>
<head>
<title>Problema</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
Lo primero que tenemos en cuenta es que debemos importar la librería:
<script type="text/javascript" src="../jquery.js"></script>
Como se encuentra en la carpeta superior a donde se encuentra el archivo pagina3.html ponemos src="../jquery.js", si estuviera en la misma carpeta disponemos src="jquery.js", es decir directamente el nombre de la librería.
Siempre debemos disponer esta inclusión de la librería antes de incluir los otros archivos *.js que utilizan esta librería, es por eso el orden:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones2.js"></script>
funciones2.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#boton1");
x.click(presionBoton)
}
function presionBoton()
{
alert("Se
...