1
Download título: jquery
Document related concepts
no text concepts found
Transcript
FACULTAD: Ingeniería en sistemas y telecomunicaciones
ASIGNATURA: Internet II
TÍTULO: JQUERY
AUTOR: Francisco Rovayo Pineda
PROFESOR: ing.Pablo Hinojosa
FECHA:14/09/2012
JQuery
jQuery es considerado un Framework de Javascript, o ambiente de desarrollo. un
conjunto de utilidades las cuales no necesitan ser programadas, de hecho ya fueron
programadas, probadas y podemos utilizarlas de una manera muy simplificada ,
podremos lograr los mismos resultados, en menos tiempo sin necesidad de programar
una funcionalidad completamente
jQuery es un marco de desarrollo el cual contiene funcionalidades, librerías predesarrolladas , le añaden un conjunto de plug-ins, widgets y efectos visuales para la
creación de aplicaciones web .
Interacciones
Añade comportamientos complejos a los elementos:
Draggable: Hace al elemento arrastrable.
Droppable: Permite que el elemento responda a elementos arrastrables.
Resizable: Permite redimensionar el elemento.
Selectable: Permite seleccionar entre una lista de elementos.
Sortable: Ordena una lista de elementos.
Widgets
Es un conjunto completo de controles UI. Cada control tiene un conjunto de opciones
configurables y se les pueden aplicar estilos CSS.
Accordion: Menú con efecto acordeón.
Autocomplete: Caja con autocompletado.
Button: Botón.
Dialog: Ventanas con contenido.
Slider: Elemento para elegir en un rango de valores.
Tabs: Pestañas
Datepicker: Calendario gráfico.
Progressbar: Barra de progreso
Efectos
Una API para añadir transiciones animadas y facilidades para interacciones.
Core: Amplía los efectos de jQuery incluyendo morphing, requerido por el resto de
efectos.
Blind
Bounce
Clip
Drop
Explode
Fade
Fold
Highlight
Pulsate
Scale
Shake
Slide
Transfer
jQuery UI se utiliza igual que cualquier otra extensión para jQuery: Sólo hay que
añadir los ficheros .js
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
Código JavaScript para aplicar los efectos:
// Aplicar el efecto Draggable al elemento con id "draggable" al cargar la página
$(document).ready(function(){
$("#draggable").draggable();
});
Código en el body del documento:
<div id="draggable" class="ui-widget-content">
<p>¡Arrástrame!</p>
</div>
Ventajas:
1. La curva de aprendizaje es menor que al de sus similares.
2. Es ligero en comparación con otros marcos de javascript.
3. Tiene una amplia gama de plugins disponibles para las diversas necesidades
específicas.
4. Ahorra muchas líneas de código.
5. Hace transparente el soporte de nuestra aplicación para los navegadores
principales.
6. Provee de un mecanismo para la captura de eventos.
7. Provee un conjunto de funciones para animar el contenido de la página en forma
muy sencilla.
8. Por defecto integra funcionalidades para trabajar con AJAX.
9. Comunidad de desarrollo de grandes, muchos plugins y buen soporte
Desventajas:
1. algunos pueden ser lentos (para el motor js del cliente)
2. algunos novatos solo aprenden desde el framework y dependen de él, y no llegan
a dominar js puro
3. muchos frameworks son incompatibles entre sí, es decir, no puedo usar más de
uno a la vez, claro hay excepciones, por ejemplo con jQuery, pero éste implica
reemplazar el $ por jQuery en todo el códigO
4. Orientado a DOM en lugar de a JavaScript
5. Algunos desarrolladores tienen problemas en torno a "this" en las funciones de
callback
Ejemplos de jquery
ocultar un mensaje de un párrafo
<html>
<head>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript">
$(document).ready (function(){
$(this).click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h1> Título de algo </h1>
<p> voy a desaparecer para siempre si haces clic sobre el texto </p>
</body>
<!-- mensaje subliminal de danijazzero -->
</html>
ocultar un mensaje a través de otro objeto(un botón)
<html>
<head>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript">
$(document).ready (function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h1> Título de algo </h1>
<p> voy a desaparecer para siempre si apretas el botón </p>
<button> pulsame </button>
</body>
<!-- mensaje subliminal de danijazzero -->
</html>
