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>