Ing. César Eduardo Suárez Trujillo
http://www.the5thwave.com/
¿QUE ES JQUERY?jQuery es un framework de JavaScript, creado inicialmentepor John Resig. Este framework permite una fácilma...
OTRAS ALTERNATIVASExisten muchos otros frameworks para javascript en el mundocomo son:• Mootools (usado en Joomla)• Protot...
¿POR QUE JQUERY?•   Es usado por el 55% de los sitios web dentro del listado de los    10.000 más visitados en el mundo.• ...
1      PRIMERO PASOSPrimero debemos saber que existen varias empresas quehospedan las librerias de jQuery para nuestro uso...
Teniendo la ruta del framework, simplemente lo vinculamos anuestra Pagina (ya recuerda usar el estándar de HTML5): <!DOCTY...
<!DOCTYPE html><html>      <head>      <meta charset="utf-8">      <title>{titulo}</title>      <script type=’text/javascr...
Como funciona:1. La etiqueta $ es equivalente a colocar jQuery, si abrimos la libreríaencontramos al final:window.jQuery =...
Selección y filtrosRealmente jquery puede entenderse como un conjunto de consultas aunqueva mas haya.Dentro de esto tenemo...
EjemploDentro de Body                      Script<div class="container">            <script><ul class="emphasis container"...
Selección por orden:first: Selecciona el primer elemento.:last: Selecciona el ultimo elemento:even: Selecciona los element...
2             EVENTOS EN JQUERY    jQuery busca soportar y ser eficiente en todos los browsers, y por ende    su API de no...
Con esto podríamos hacer lo mismo usando jQuery                 $(#tmpSearch).on("focus",function(){                   $(t...
Tipos de eventosEvento de clic .click /.dblclickEvento de selección de elemento .focusEventos del teclado .keydown .keyup ...
Eventos AsociadosMuchas veces es mejor utilizar funciones como .click() pero cuandose requiere varios evento, métodos como...
.live or .dieAgrega un evento a los elementos que cumplen el criterio tanto en elmomento como en el futuro(para elementos ...
TRIGGERTambién podemos trigiar (TRIGGER) un evento (verbo inventado), es decirllamarloA la fuerza desde cualquier parte de...
3      MANIPULANDO CONTENIDO Y       ATRIBUTOSjQuery Ofrece todo lo necesario para interactuar con elcontenido desde el DO...
AtributosPara modificar atributos usamos:                  $(this).attr(“id”, “tmpExample”); Si simplemente se quiere obte...
CLASESDe la misma forma que los atributos, jQuery provee funciones para agregarY eliminar clases a los resultado de una bú...
HTML y TextoEn la manipulación de contenido HTML y texto, tenemos las siguienteFunciones:               •   html()        ...
Ejemplo de contenido envuelto (.wrap)<p>Dogs are forever in the push up position.</p>                                     ...
clone()El método .clone() automáticamente asume que lo queSe quiere hacer es copiar el elemento y sus descendientes.Si a s...
4      ARREGLOS Y ITERACIONESPor defecto el trabajo con arreglos con javascript puede seralgo tedioso. jQuery ofrece una A...
.each() La funcion .each() es una un metodo muy util para recorrer arreglos o incluso hacer una iteracion sobre una selecc...
.grep( )  Encuentra los elementos de un arreglo que satisfacen el filtro de la funciónEjemplo:   <script>   var arr = [ 1,...
.map() Permite trasladar todos los items en un arreglo u objeto a uno nuevo arreglo<script>  var arr = [ "a", "b", "c", "d...
5      CSS¿Que seria de una pagina sin estilos?Los estilos son forma parte fundamental tanto visual comocomportamental de ...
.css( )El metodo .css() modficar o obtener cualquier propiedad de un elemento de laBusqueda.                 $(‘div’).css(...
outerWidth() y outerHeight() Estos dos métodos son realmente útiles por que con ellos podemos obtener el total entre el an...
6      AJAXAJAX acrónimo de Asynchronous JavaScript And XML, yes untecnologia que nos permite hacer llamados asincronicos ...
Así funciona esto
La información en AJAXPodemos usar indiferente POST ó GET como formas de hacer laspeticiones, y aunque el nombre sugiere q...
XMLLo primero que debemos hacer, es cargar un documento XML yprocesarlo en nuestra aplicación, si un documento XML esta ma...
Javascript                                                        function() {                         HTML               ...
XML<?xml version="1.0" encoding="UTF-8"?><response>  <hLocationCountryISO2>CA</hLocationCountryISO2>  <hLocationCountryISO...
JSONJSON(JavaScript Object Notation) fue creado por el año 2001, y esun formato de intercambio de archivos que utiliza la ...
Para trabajar con jSon Jquery ofrece varios metodos como:jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)]...
Con json, por ejemplo para este ejercicio lo que se buscaEs obtener una serie de datos, para luego desplegarlo enNuestro d...
Creamos un archivo que se llama asynctask.php que es el queinvocaremos asincronicamente y que generara unos datos tipojson...
7      EFECTOSEl hecho de generar transiciones o darle un toque animado anuestra pagina, es algo fundamental
show(), hide(), and toggle(). Los 3 métodos básico para desplegar contenido en este framework. Interactua directamente con...
slidingDesliza hacia abajo          .slideDown( [duration] [, callback] )          .slideDown( [duration] [, easing] [, ca...
fadeOut(), fadeIn() Se muestra cambiando la opacidad gradualmente        .fadeIn( [duration] [, callback] )        .fadeIn...
Animate()Permite crear una animación a su gusto, modificando ciertas propiedadesde la hoja de estilos        .animate( pro...
8     HANDLERBARSPuede ser muy engorroso, concatenar elementos HTML paraluego desde javascript agregarlos a nuestro docume...
<script id="plantilla" type="text/x-handlebars-template">         <li>                 <h2>{{fullName author}}</h2>       ...
9                      PROYECTO SLIDERCreemos nuestro propio slider de imágenes, ya es hora de crearNuestras propias imple...
Upcoming SlideShare
Loading in …5
×

Jquery parte 1

3,520 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,520
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
139
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jquery parte 1

  1. 1. Ing. César Eduardo Suárez Trujillo
  2. 2. http://www.the5thwave.com/
  3. 3. ¿QUE ES JQUERY?jQuery es un framework de JavaScript, creado inicialmentepor John Resig. Este framework permite una fácilmanipulacion de los documentos HTML y de la estructura DOM(Document object model).
  4. 4. OTRAS ALTERNATIVASExisten muchos otros frameworks para javascript en el mundocomo son:• Mootools (usado en Joomla)• Prototype (usado por magento)• Yui(Yahoo! UI Library)• Dojo• Rico
  5. 5. ¿POR QUE JQUERY?• Es usado por el 55% de los sitios web dentro del listado de los 10.000 más visitados en el mundo.• Es gratuito, de código abierto y bajo licencia MIT o GNU General Public License• Microsoft y Nokia lo integran en sus plataformas de desarrollo• Constantes actualizaciones• Tiene dos proyectos relacionados llamados jQueryui y jQuery Mobile.• Write Less, Do More (frase de batalla)• appendTo – empresa dedicada a jQuery• Mucho plugins en la web
  6. 6. 1 PRIMERO PASOSPrimero debemos saber que existen varias empresas quehospedan las librerias de jQuery para nuestro uso, tanto en laversión completa, como simplificada.Googlehttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jsMicrosofthttp://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.jsjQuery CDNhttp://code.jquery.com/jquery-1.7.2.min.js
  7. 7. Teniendo la ruta del framework, simplemente lo vinculamos anuestra Pagina (ya recuerda usar el estándar de HTML5): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{titulo}</title> <script type=’text/javascript’ src=‘{ruta}/jQuery.js¡’> </script> </head> <body> <p> jQuery se ha cargado. </p> </body> </html>
  8. 8. <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>{titulo}</title> <script type=’text/javascript’ src=‘{ruta}/jQuery.js¡’> <script> $(document).ready( function() { $(‘p’).text(‘mama estoy triunfando!’); });</script> </script> </head> <body> <p> jQuery se ha cargado. </p> </body></html>
  9. 9. Como funciona:1. La etiqueta $ es equivalente a colocar jQuery, si abrimos la libreríaencontramos al final:window.jQuery = window.$ = jQuery;2. $(document).ready : como al momento de cargar jquery y en la posicióndonde esta el código el documento aun no se ha cargado completamente,esta función simplemente nos dice que cuando termina de cargar eldocumento ejecuta el código que tiene dentro.3. $(‘p’) busca dentro del documento una referencia a esta etiqueta. Siqueremos buscar por id usamos $(“#id”) o por clase $(“.class”).4. $(‘p’).text(“mamá estoy triunfando”) , al resultado encontrado le colocaEl texto correspondiente. Si quisieramos hacer un cambio de estilopodriamos decir $(‘p’).addClass(‘nombreClase’)
  10. 10. Selección y filtrosRealmente jquery puede entenderse como un conjunto de consultas aunqueva mas haya.Dentro de esto tenemos la etiqueta básica $(“div”) que nos permitehacer la selección de uno o un conjunto de elementos , pero tambiénExiste la función find(“li”) que realiza un filtrado de es contenido. $(‘ul#tmpFavorites’).find(‘li’).addClass(‘tmpFound’); Para la mayoría de casos el primer elemento es el 0
  11. 11. EjemploDentro de Body Script<div class="container"> <script><ul class="emphasis container"> $(ul.emphasis) .children(li) <li>item</li> .eq(3) <li>item 2</li> <li>item 2</li> .prev().text(‘agregado con jQuery); <li>item 4</li> console.log($(ul).parents(.container));<li>item 5</li> console.log($(ul).closest(.container));<li> </script> <ul> <li>item anidado</li> </ul></li></ul></div>
  12. 12. Selección por orden:first: Selecciona el primer elemento.:last: Selecciona el ultimo elemento:even: Selecciona los elementos pares incluido el 0:odd: Selecciona los elementos impares:eq(index): Selecciona un elemento especifico en la posición que secoloca.:gt(index): Selecciona los elementos mayores a este numero deelemento:lt(index):Selecciona los elementos menores a este elemento.:input: Selecciona los elementos <input />, <select>,<textarea>, and <button>:text: Selecciona los elementos cuyo atributo es text:radio: Selecciona los elementos tipo radio:checkbox: Selecciona los elementos tipo checkbox:checked: Selecciona los elementos que han sido seleccionados
  13. 13. 2 EVENTOS EN JQUERY jQuery busca soportar y ser eficiente en todos los browsers, y por ende su API de no solo cumple con esta característica sino que es realmente intuitiva. Ejemplo con javascript puro:window.onload = function(){ document.getElementById(‘tmpSearch’).onfocus = function() { if (this.value == “Search”) { this.value = “”; } }; document.getElementById(‘tmpSearch’).onblur = function() { if (!this.value) { this.value = ‘Search’; } };};
  14. 14. Con esto podríamos hacer lo mismo usando jQuery $(#tmpSearch).on("focus",function(){ $(this).attr("value","") }) $(#tmpSearch).on("blur",function(){ $(this).attr("value","texto") })En versiones anteriores a la 1.7 se usaba bind() para registrar un listenerY unbind() para quitar el evento, aunque igual se pueden seguir usando sinproblema.
  15. 15. Tipos de eventosEvento de clic .click /.dblclickEvento de selección de elemento .focusEventos del teclado .keydown .keyup .keypressEventos del mouse .mousedown .mouseenter.mouseleave .mousemove .mouseover .mouseup
  16. 16. Eventos AsociadosMuchas veces es mejor utilizar funciones como .click() pero cuandose requiere varios evento, métodos como .hover() o toggle() son lasolución. $(‘#toggleme’).toggle( function() { $(‘#outputdiv’).text(‘Hizo clic una vez.’); }, function(){ $(‘#outputdiv’).text(‘Hizo clic dos veces.’); }, function(){ $(‘#outputdiv’).text(‘Hizo clic tres veces’); });
  17. 17. .live or .dieAgrega un evento a los elementos que cumplen el criterio tanto en elmomento como en el futuro(para elementos creados dinámicamente).Con die siemplemente los eliminamos. .live( events, handler(eventObject) ) .live( events, data, handler(eventObject) ) .die( eventType [, handler] ) .die( eventTypes )
  18. 18. TRIGGERTambién podemos trigiar (TRIGGER) un evento (verbo inventado), es decirllamarloA la fuerza desde cualquier parte del código, por ejemplo: $(document).ready( function() { $(‘input’).focus( function() { $(this).addClass(“tmpFocused”); } ); $(‘input’).trigger(‘focus’); } );
  19. 19. 3 MANIPULANDO CONTENIDO Y ATRIBUTOSjQuery Ofrece todo lo necesario para interactuar con elcontenido desde el DOM, con la ventaja de no tener quepreocuparte por el browser
  20. 20. AtributosPara modificar atributos usamos: $(this).attr(“id”, “tmpExample”); Si simplemente se quiere obtener ela tributo: $(this).text(“This element’s ID is:"+$(this).attr(“id”); ); Para modificar múltiples atributos $(“a”).attr({ id: “tmpExample”, title: “Some Tooltip Text”, href: “http://www.example.com” }); Para eliminar un atributo simplemente se usa removeAttr()
  21. 21. CLASESDe la misma forma que los atributos, jQuery provee funciones para agregarY eliminar clases a los resultado de una búsqueda. $(document).ready( function() { $(‘table’).hover( function() { $(‘td’).addClass(‘tmpHover’); }, function() { $(‘td’).removeClass(‘tmpHover’); } ) .click( function() { $(‘td’).toggleClass(‘tmpSelected’); } ); } );
  22. 22. HTML y TextoEn la manipulación de contenido HTML y texto, tenemos las siguienteFunciones: • html() • text() • append(),prepend() • after(), before() • insertAfter(), insertBefore() • wrap(), wrapAll(), wrapInner()
  23. 23. Ejemplo de contenido envuelto (.wrap)<p>Dogs are forever in the push up position.</p> $(document).ready(<p> function() {I haven’t slept for ten days, because that $(“p”).wrap(“<div></div>”);would be too long. }</p> );<p>I once saw a forklift lift a crate of forks.And it was waytoo literal for me.</p>
  24. 24. clone()El método .clone() automáticamente asume que lo queSe quiere hacer es copiar el elemento y sus descendientes.Si a su vez se requiere clonar los eventos asociados a este,Se debe pasar como parámetro true.$(‘tr#tmp’).clone(true).removeAttr(‘id’).appendTo(‘tbody’);
  25. 25. 4 ARREGLOS Y ITERACIONESPor defecto el trabajo con arreglos con javascript puede seralgo tedioso. jQuery ofrece una API con varias metodosasociados a la manipulación de estos elementos.
  26. 26. .each() La funcion .each() es una un metodo muy util para recorrer arreglos o incluso hacer una iteracion sobre una selección .<ul> $(document).ready( <li>Drive My Car</li> function() { <li>You Won’t See Me</li> $(“li”).each( <li>Nowhere Man</li> function() { <li>I’m Looking Through You</li> $(this).addClass(‘tmpSong’); <li>If I Needed Someone</li> } <li>Run for Your Life</li> );</ul> } );
  27. 27. .grep( ) Encuentra los elementos de un arreglo que satisfacen el filtro de la funciónEjemplo: <script> var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ]; $("div").text(arr.join(", ")); arr = jQuery.grep(arr, function(n, i){ return (n != 5 && i > 4); }); $("p").text(arr.join(", ")); </script>
  28. 28. .map() Permite trasladar todos los items en un arreglo u objeto a uno nuevo arreglo<script> var arr = [ "a", "b", "c", "d", "e" ]; $("div").text(arr.join(", ")); arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); }); $("p").text(arr.join(", ")); arr = jQuery.map(arr, function (a) { return a + a; }); $("span").text(arr.join(", "));</script>
  29. 29. 5 CSS¿Que seria de una pagina sin estilos?Los estilos son forma parte fundamental tanto visual comocomportamental de una pagina. Por eso jQuery ofrece laposibilidade de manipular las hojas de estilos desdejavascript de una manera sencilla.
  30. 30. .css( )El metodo .css() modficar o obtener cualquier propiedad de un elemento de laBusqueda. $(‘div’).css({ backgroundColor: ‘lightblue’, border: ‘1px solid lightgrey’, padding: ‘5px’ });
  31. 31. outerWidth() y outerHeight() Estos dos métodos son realmente útiles por que con ellos podemos obtener el total entre el ancho, el padding y el border de un elemento de la búsqueda. $(document).ready( function() { alert( ‘outerWidth: ‘ + $(‘div’).outerWidth() + “n” + ‘outerHeight: ‘ + $(‘div’).outerHeight() ); } );
  32. 32. 6 AJAXAJAX acrónimo de Asynchronous JavaScript And XML, yes untecnologia que nos permite hacer llamados asincronicos decontenido para nuestra pagina web sin tener que recargar lapagina, para crear RIA.
  33. 33. Así funciona esto
  34. 34. La información en AJAXPodemos usar indiferente POST ó GET como formas de hacer laspeticiones, y aunque el nombre sugiere que la información resultantees un XML, esto realmente es opcional, pues podemos trabajarfacilmente con JSON (JavaScript Object Notation) y HTML
  35. 35. XMLLo primero que debemos hacer, es cargar un documento XML yprocesarlo en nuestra aplicación, si un documento XML esta malformado, este obviamente no podrá ser procesado.El siguiente ejemplo ilustra la carga de un archivo con losdepartamentos del país seleccionado. $.get(“datos.xml”, function($xml) {}, “xml”); $.ajax({ url: datos.xml, success: function($xml) {}, dataType: xml });
  36. 36. Javascript function() { HTML $("#hLocationCountryID").change( function() { $.get(<div id="hLocationCountryIDWrapper"> "datos"+this.value+".xml", <label for="hLocationCountryID"> function($xml) { $xml = $($xml); </label> var $iso2 = <select id="hLocationCountryID" size="1" $xml.find("hLocationCountryISO2").text(); name="hLocationCountryID"class="hFormSelectInput"> $("select#hLocationStateID").empty(); <option value="0">Seleccione un pais</option> // Set the states… <option value="1">colombia</option> $xml.find("hLocationState").each( </select> function() { </div> $("select#hLocationStateID").append( "<option value=" + $ <div> (this).attr("hLocationStateID") + ">" + <label for="hLocationStateID">Departamento:</label> $(this).text() + <select name="hLocationStateID" "</option>"id="hLocationStateID"> ); </select> } </div> ); }, "xml" ); } ); }
  37. 37. XML<?xml version="1.0" encoding="UTF-8"?><response> <hLocationCountryISO2>CA</hLocationCountryISO2> <hLocationCountryISO3>CAN</hLocationCountryISO3> <hLocationStateLabel>Departamento</hLocationStateLabel> <hLocationState hLocationStateID="0"> </hLocationState> <hLocationState hLocationStateID="66">SANTADER</hLocationState> <hLocationState hLocationStateID="67">ANTIOQUIA</hLocationState> <hLocationState hLocationStateID="68">CUNDINAMARCA</hLocationState> <hLocationState hLocationStateID="69">ATLANTICO</hLocationState> <hLocationState hLocationStateID="70">BOLIVAR</hLocationState> <hLocationState hLocationStateID="71">VALLE</hLocationState></response>
  38. 38. JSONJSON(JavaScript Object Notation) fue creado por el año 2001, y esun formato de intercambio de archivos que utiliza la notación dejavascript. Para mayor información sobre el estándar json.org {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}
  39. 39. Para trabajar con jSon Jquery ofrece varios metodos como:jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )Esto es equivalente a:$.ajax({ url: url, dataType: json’, data: data, success: callback});
  40. 40. Con json, por ejemplo para este ejercicio lo que se buscaEs obtener una serie de datos, para luego desplegarlo enNuestro documento HTML. $.ajax({ type: "POST", dataType: json, data: "opt=2, url: "asynctask.php", context: document.body, success: function(data){ //Por json $.each(data, function(i, item) { Console.log(item.nombre) ...
  41. 41. Creamos un archivo que se llama asynctask.php que es el queinvocaremos asincronicamente y que generara unos datos tipojson$imagenes=$conectar->getImagenes($_POST[pag],$_POST[can],2); $i=0; $jsondata=""; foreach($imagenes as $img){$jsondata[$i][str]=$img[strFoto]; $jsondata[$i][nombre]=$img[strNombre]; $j=0; } echo json_encode($jsondata);
  42. 42. 7 EFECTOSEl hecho de generar transiciones o darle un toque animado anuestra pagina, es algo fundamental
  43. 43. show(), hide(), and toggle(). Los 3 métodos básico para desplegar contenido en este framework. Interactua directamente con la propieda display del CSS (visible- invisible). .show( duration [, callback] ) .show( [duration] [, easing] [, callback] )
  44. 44. slidingDesliza hacia abajo .slideDown( [duration] [, callback] ) .slideDown( [duration] [, easing] [, callback] )Desliza hacia arriba .slideUp( [duration] [, easing] [, callback] ) .slideUp( [duration] [, callback] )Desliza según este o no visible el contenido .slideToggle( [duration] [, callback] ) .slideToggle( [duration] [, easing] [, callback] )
  45. 45. fadeOut(), fadeIn() Se muestra cambiando la opacidad gradualmente .fadeIn( [duration] [, callback] ) .fadeIn( [duration] [, easing] [, callback] ) .fadeOut( [duration] [, callback] ) .fadeOut( [duration] [, easing] [, callback] )Podriamos esocger la opacidad objetivo con este metodo .fadeTo( duration, opacity [, callback] ) .fadeTo( duration, opacity [, easing] [, callback] )
  46. 46. Animate()Permite crear una animación a su gusto, modificando ciertas propiedadesde la hoja de estilos .animate( properties [, duration] [, easing] [, complete] ) .animate( properties, options )
  47. 47. 8 HANDLERBARSPuede ser muy engorroso, concatenar elementos HTML paraluego desde javascript agregarlos a nuestro documento, poreso existen proyectos como handlerbars que nos permitencrear micro plantillas. http://handlebarsjs.com/
  48. 48. <script id="plantilla" type="text/x-handlebars-template"> <li> <h2>{{fullName author}}</h2> <p>{{{tweet}}}</p> {{#if quote}} <h5>{{quote}}</h5> {{else}} <h5>Author does not havea quote.</h5> {{/if}} </li>
  49. 49. 9 PROYECTO SLIDERCreemos nuestro propio slider de imágenes, ya es hora de crearNuestras propias implementaciones.

×