Introducción a JQuery

Elaborado por: Victor Utreras J. Presentación jQuery

Agenda - Que es JavaScript -Que es jQuery -Características de jQuery -Usando jQuery -Programación no invasiva -Plugins jQuery -Ejemplos

Que es JavaScript? Lenguaje de programación interpretado por un explorador web, simple, liviano, sintaxis limpia, basada en Java, dinámico pero principalmente muy util y funcional. Permite manipular muchos de los elementos que componen la parte cliente de una aplicación web (DOM, BOM, CSS, entre otros). La forma de acceder a JavaScript es por medio de un tag HTML que define un bloque de código JavaScript <script languaje="javascript"/> JavaScript por si solo es un lenguaje muy potente y suficiente para desarrollar aplicaciones web, pero se nos presenta la incompatibilidad entre los diferentes exploradores web existentes, un gran PROBLEMA!!!.

jQuery $() jQuery es una potente libreria JavaScript, creada por John Resig, es un proyecto open-source el cual fue liberado en enero del año 2006. Provee muchas características nuevas a JavaScript, sintaxis simple de aprender, una robusta compatibilidad de plataforma cruzada y todo esto en un pequeño archivo jquery.js. Compatible con los navegadores: -Firefox 2.0+ -Safari 2.0.2+ -Opera 9+ -Internet Explorer 6+

Características de jQuery -Acceder al documento HTML (DOM = Document Object Model) -Modificar la apariencia de la pagina. -Modificar el contenido de la pagina. -Manejar eventos de los elementos de la pagina. -Crear efectos visuales. -Manipular estilos CSS (Cascading Style Sheets).

Características de jQuery -AJAX (Asynchronous JavaScript + XML) -Simplificar tareas comunes de JavaScript: manipulación de arrays, iteración de arrays, operar con objetos. -Manipulación en JSON (JavaScript Object Notation) -Programación bajo el paradigma no invasivo. -Un simple pero potente sistema de plugins que permite extender a jQuery.

Características de jQuery $() -Componentes GUI como cuadros de dialogo, tabs, paneles colapsables, calendarios, entre otros. Y además hace que la programación se vuelva más entretenida.

Usando jQuery jQuery() - $()

Como se accede a jQuery $() Donde se puede conseguir: http://jquery.com/ -jquery-1.3.2.min.js Producción (19KB) -jquery-1.3.2.js Desarrollo (120KB) El objeto jQuery y la función $() La forma básica de interactuar con la página es mediante la función $() (un alias de jQuery()) que recibe como parámetro una expresión CSS o el nombre de una etiqueta HTML. Ejemplo: $('#divDatosUsuario'); $('.boton');

Selectores jQuery jQuery nos permite acceder a cualquier elemento de un documento HTML mediante un lenguaje de selectores. Selectores simples: $('div') – Devuelve todos los elementos DIV de una página web. $('#divDatosUsu') – Devuelve el elemento que contenga el ID divDatosUsu. $('.boton') – Devuelve todos los elementos que contengan la CLASS boton. $('*') – Devuelve todos los elementos existentes en una página web. Selectores multiples: $('#miDiv, .boton') – Devuelve el elemento que contenga el ID miDiv y todos los elementos que contengan la CLASS boton. $('input[type=radio][name=empresa]') – Devuelve todos los elementos del tipo input(radio) y que tengan el nombre empresa.

Manipulación del DOM jQuery nos permite manipular cualquier elemento de un documento HTML. Algunas Funciones: -append() - Agrega un elemento al DOM -remove() - Elimina un elemento al DOM - empty() - Limpia el DOM Ejemplo: $('#divDatosUsu').empty().append('<p>Hola Chile!!</p>');

Manejo de eventos jQuery nos permite manejar los eventos de cualquier elemento de un documento HTML. Algunas Funciones: -click() - Eventos click -change() - Eventos change (cambios en los estados de elementos HTML) - keypress() - Eventos de teclado - live() - Eventos para elementos no existentes (jQuery 1.3+) Ejemplo: $('#miBoton').click(function (event){ //evento capturado });

Efectos visuales jQuery nos permite agregar efectos visuales a la mayoria de los elementos de un documento HTML. Algunas Funciones: -show() - Muestra un elemento HTML -hide() - Oculta un elemento HTML - fadeIn() - Oculta un elemento HTML con difuminación - fadeOut() - Mustra un elemento HTML con difuminación Ejemplo: $('#miDiv').fadeOut('slow');

AJAX jQuery nos permite trabajar en modalidad AJAX y para esto nos provee algunas funciones para manipular HTML o JSON. Algunas Funciones: -load() - Carga HTML y permite inyectarlo dentro del DOM. -get() - Realiza una petición al servidor en modalidad GET. - post() - Realiza una petición al servidor en modalidad POST. - getJSON() - Carga datos JSON. Ejemplo: $.getJSON('ctr.htm?perform=usuario', {rut: 111111}, function (data,text) { var usu = data.usuario; alert('Hola ' + usu.nombre + ' ' + usu.apellidos); });

Utilidades jQuery nos entrega una serie de utilidades para programar de forma mas limpia y libre de errores. Algunas Funciones: -each() - Recorre una colección de objetos -trim() - Elimina espacios en blanco Ejemplo: var datos = ['val1', 'val2', 'val3']; $.each(datos, function (index, item) { alert(index + ' ' + item); });

Programación no invasiva Modelo tradicional usando JavaScript en aplicaciones web. <td> <script> function tipoPagoOnChangeEvent(value) { //hacer algo... } </script> <select name="tipoPago" id='tipoPago_id' class="input" onChange=" tipoPagoOnChangeEvent(this.value); "> <option value="-1" ></option> </select> </td> <input type="button" id="btn-siguiente" class="buttons" value="Siguiente ->" onclick=" javascript:enviarReq(); " /> <script> // cuando se recarga la pagina window.onload = function() { tipoPagoOnChangeEvent(1); } </script> Que es esto? codigo invasivo que llena nuestras paginas web con bloques de scripts.

Programación no invasiva Que seria lo ideal?, tener codigo limpio, facil de programar y leer, tener un mecanismo de codificación que nos permita separar eficientemente el codigo HTML del codigo JavaScripts, esto es llamado codigo no invasivo. jQuery nos permite codificar de forma simple, separada, limpia y en el paradigma de programación no invasiva. JQuery Código JavaScript Código HTML

Programación no invasiva Como se hace esto?, Se realiza la separación completa del codigo html del codigo JavaScript. <td> <select name="tipoPago" id='tipoPago_id' class="input"> <option value="-1" ></option> </select> </td> <input type="button" id="btn-siguiente" class="buttons" value="Siguiente ->"/> <script> // cuando se recarga la pagina $(document).ready(function(){ $('#tipoPago_id').change(function(event) { //hacer algo... }); $('#btn-siguiente').click(function (event){ //hacer algo... }); }); </script>

Plugins jQuery jQuery nos permite extender la librería de una manera muy simple, esto es conocido como plugins jQuery. jQuery.muestraMensaje = function () { alert('Hola Chile!!'); } Ejemplo: jQuery.muestraMensaje(); jQuery.fn.muestraMensaje = function () { $(this).append('Hola Chile!!'); } Ejemplo: $('#miDiv').muestraMensaje();

Ejemplos jQuery $(document).ready(function() { $('#ejemplos-jquery').show(); });

http://blog.continuum.cl (nuestro blog con más de 100 visitas diarias) http://continuum.cl ( nuestro sitio corporativo )

http://helektron.com	617
http://www.slideshare.net	89
http://charlas.continuum.cl	33
http://www.code09fim.uni.cc	23
http://www.code09fim.com	22
http://winagainpoker.blogspot.com	6
http://translate.googleusercontent.com	4
http://blog.complethost.es	1
http://complethost.in	1

Introducción a JQuery

by Continuum on Jun 25, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 796

Statistics

Introducción a JQuery — Presentation Transcript