La magia de jquery

3,002 views
2,945 views

Published on

Introducción a JQUErY, como agregar recursos a nuestros proyectos web, como animaciones, menús, validaciones, y demás efectos que nos proporciona JQUERY

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

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

No notes for slide

La magia de jquery

  1. 1. ¿Cual es el problema con JavaScript?
  2. 2. JavaScript Fue inicialmente introducido por Netscape 2.0B3 en Deciembre de 1995, a.k.a. Mocha, LiveScript, Jscript, Su nombre oficial fue ECMAScript
  3. 3. JavaScript se diseño con la sintaxtis de C, pero adopta nombres y convenciones de Java, sin enbargo no estan relacionados.
  4. 4. Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM).
  5. 5. CLIENTE SERVIDOR
  6. 6. EL DOM
  7. 7. EL DOM
  8. 8. Trabajar con el DOM es realmente tedioso, es donde jQuery viene al rescate.
  9. 9. Introduction a jQuery
  10. 10. $(‚#firstName‛).text(‚Joe Black‛); $(‚button‛).click(function() {alert ‚Clicked‛;}); $(‚.content‛).hide(); $(‚#main‛).load(‚content.htm‛); $(‚<div/>‛).html(‚Loading…‛).appendTo(‚#content‛); Una Calidad de vida gracias a jQuery: Muy compacto y fluido modelo de programación
  11. 11. ¿QUE ES JQUERY? • jQuery es un framework Javascript • un framework, es un producto que sirve como base para la programación avanzada de aplicaciones, que aporta una serie de funciones o códigos para realizar tareas habituales. Por decirlo de otra manera, framework son unas librerías de código que contienen procesos o rutinas ya listos para usar. Los programadores utilizan los frameworks para no tener que desarrollar ellos mismos las tareas más básicas, puesto que en el propio framework ya hay implementaciones que están probadas, funcionan y no se necesitan volver a programar.
  12. 12. • Steve Jobs ha publicado una carta abierta para Adobe, en la página web de Apple, explicando por qué Adobe Flash no será permitido, nunca, en ningún iPhone, iPod Touch o iPad que se fabrique en el futuro. • 1. Flash se pensó para ser utilizado en ordenadores, con un ratón, nunca en pantallas táctiles que se usan con un dedo. Esto es importante, porque muchas webs que usan Flash basan sus interfaces en el ‘rollover’, que es la función que hace aparecer un menú o cualquier otra cosa cuando detecta que el puntero del ratón pasa por una zona determinada; Esto, con el dedo, no es posible. No existe rollover en ningún dispositivo táctil, por razones lógicas. • 2. Muchos dicen que Flash es abierto. La propia Adobe lo dice. Pero Flash, no es abierto. Flash es un formato propietario de Adobe y sólo cambia o evoluciona cuando Adobe lo decide. También, tiene el precio que Adobe decide. • 3. Si se permite que con Flash se puedan crear aplicaciones multiplataforma, las nuevas funcionalidades que Apple quiera desarrollar en el futuro para sus “iDispositivos” sólo serán puestas en práctica cuando Adobe quiera y actualice su Flash.
  13. 13. • 4. Batería y rendimiento. Apple lleva varios años pidiéndole a Adobe que les enseñen un móvil, cualquier móvil, que no se quede sin batería en un suspiro cuando reproduzca algo en Flash. Adobe nunca se lo han enseñado, y siempre han pedido más tiempo. Apple cree que efectivamente algún día mostrarán un móvil con Flash pero el rendimiento nunca será bueno; ¿Por qué? Porque Flash no se ejecuta vía Hardware, sino vía Software, usando la CPU. • 5. Sobre Adobe diciendo que los usuarios de Apple se pierden mucho video, desde el primer momento todos los iPhone se han puesto a la venta llevan YouTube preinstalado de serie. • Conclusión: Flash está muerto, pero como en la película “Los Otros” de Alejandro Amenábar, aún no se han dado cuenta. Por lo tanto, pasemos página y usemos estándares realmente abiertos que se pueden utilizar gratuitamente como HTML5. Con esto, Apple da por zanjada la famosa disputa del Flash en el iPhone.
  14. 14. JQUERY • jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC.
  15. 15. Ventajas de jQuery con respecto a otras alternativas • Es importante comentar que jQuery no es el único framework que existe en el mercado. Existen varias soluciones similares que también funcionan muy bien, que básicamente nos sirven para hacer lo mismo. Como es normal, cada uno de los frameworks tiene sus ventajas e inconvenientes, pero jQuery es un producto con una aceptación por parte de los programadores muy buena y un grado de penetración en el mercado muy amplio, lo que hace suponer que es una de las mejores opciones.
  16. 16. Características • Selección de elementos DOM. • Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath. • Eventos. • Manipulación de la hoja de estilos CSS. • Efectos y animaciones. • Animaciones personalizadas. • AJAX. • Soporta extensiones. • Utilidades varias como obtener información del navegador, operar con objetos y vectores, funciones como trim() (elimina los espacios en blanco del principio y final de una cadena de caracteres), etc. • Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+
  17. 17. Uso • jQuery consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX. • La característica principal de la biblioteca es que permite cambiar el contenido de una página web sin necesidad de recargarla, mediante la manipulación del árbol DOM y peticiones AJAX. Para ello utiliza las funciones $() o jQuery(). Función $() • La forma 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 y devuelve todos los nodos (elementos) que concuerden con la expresión.
  18. 18. • $("#tablaAlumnos"); // Devolverá el elemento con id="tablaAlumnos" • $(".activo"); // Devolverá una matriz de elementos con class="activo“ • Una vez obtenidos los nodos, se les puede aplicar cualquiera de las funciones que facilita la biblioteca.
  19. 19. Inicio de jQuery • Comúnmente antes de realizar cualquier acción en el documento con jQuery(), debemos percatarnos de que el documento esté listo. Para ello usamos $(document).ready();, de esta forma: $(document).ready(function() { //Aquí van todas las acciones del documento. });
  20. 20. Versiones • 26 de agosto de 2006 1.0 Primera versión estable • 12 de septiembre de 2011 1.6.4 Ultima versión
  21. 21. Copy the jquery.js and the jquery-vsdoc.js into your application folder
  22. 22. No need to reference the –vsdoc.js <script src=‚jquery.js‛/> Reference it in your markup
  23. 23. … or just drag it into the file ///<reference path=‚jquery.js‛/> Reference it in your JS files:
  24. 24. <script src=‚http://ajax.googleapis.com/ ajax/libs/jquery/1.2.6/ jquery.min.js‛> </script> You can also reference it from Google
  25. 25. jQuery Core Concepts
  26. 26. Create HTML elements on the fly var el = $(‚<div/>‛) The Magic $() function
  27. 27. Manipulate existing DOM elements $(window).width() The Magic $() function
  28. 28. Selects document elements (more in a moment…) $(‚div‛).hide(); $(‚div‛, $(‚p‛)).hide(); The Magic $() function
  29. 29. $(document).ready(function(){…}); Fired when the document is ready for programming. Better use the full syntax: $(function(){…}); The Magic $() function
  30. 30. It may be used in case of conflict with other frameworks. jQuery(‚div‛); The full name of $() function is
  31. 31. jQuery uses closures for isolation (function(){ var jQuery=window.jQuery=window.$=function(){ // … }; })(); The library is designed to be isolated
  32. 32. var foo = jQuery.noConflict(); // now foo() is the jQuery main function foo(‚div‛).hide(); Avoid $() conflict with other frameworks // remove the conflicting $ and jQuery var foo = jQuery.noConflict(true);
  33. 33. $(‚div‛).hide() $(‚<span/>‛).appendTo(‚body‛) $(‚:button‛).click() jQuery’s programming philosophy is: GET >> ACT
  34. 34. $(‚div‛).show() .addClass(‚main‛) .html(‚Hello jQuery‛); Almost every function returns jQuery, which provides a fluent programming interface and chainability:
  35. 35. Get > Act Chainability The $() function Three Major Concepts of jQuery
  36. 36. jQuery Selectors
  37. 37. $(‚*‛) // find everything All Selector Selectors return a pseudo-array of jQuery elements
  38. 38. $(‚div‛) // <div>Hello jQuery</div> Basic Selectors Yes, jQuery implements CSS Selectors! $(‚#usr‛) // <span id=‚usr‛>John</span> $(‚.menu‛) // <ul class=‚menu‛>Home</ul> By Tag: By ID: By Class:
  39. 39. $(‚div.main‛) // tag and class $(‚table#data‛) // tag and id More Precise Selectors
  40. 40. // find by id + by class $(‚#content, .menu‛) // multiple combination $(‚h1, h2, h3, div.content‛) Combination of Selectors
  41. 41. $(‚table td‛) // descendants $(‚tr > td‛) // children $(‚label + input‛) // next $(‚#content ~ div‛) // siblings Hierarchy Selectors
  42. 42. $(‚tr:first‛)// first element $(‚tr:last‛) // last element $(‚tr:lt(2)‛) // index less than $(‚tr:gt(2)‛) // index gr. than $(‚tr:eq(2)‛) // index equals Selection Index Filters
  43. 43. $(‚div:visible‛) // if visible $(‚div:hidden‛) // if not Visibility Filters
  44. 44. $(‚div[id]‛) // has attribute $(‚div[dir=‘rtl’]‛) // equals to $(‚div[id^=‘main’]‛) // starts with $(‚div[id$=‘name’]‛) // ends with $(‚a[href*=‘msdn’]‛) // contains Attribute Filters
  45. 45. $(‚input:checkbox‛) // checkboxes $(‚input:radio‛) // radio buttons $(‚:button‛) // buttons $(‚:text‛) // text inputs Forms Selectors
  46. 46. $(‚input:checked‛) // checked $(‚input:selected‛) // selected $(‚input:enabled‛) // enabled $(‚input:disabled‛) // disabled Forms Filters
  47. 47. $(‚select[name=‘ddl’] option:selected‛).val() Find Dropdown Selected Item <select name=‚cities‛> <option value=‚1‛>Tel-Aviv</option> <option value=‚2‛ selected=‚selected‛>Yavne</option> <option value=‚3‛>Raanana</option> </select>
  48. 48. SELECTORS DEMO
  49. 49. Document Traversal
  50. 50. $(‚div‛).length Returns number of selected elements. It is the best way to check selector. A Selector returns a pseudo array of jQuery objects
  51. 51. $(‚div‛).get(2) or $(‚div‛)[2] Returns a 2nd DOM element of the selection Getting a specific DOM element
  52. 52. $(‚div‛).eq(2) Returns a 2nd jQuery element of the selection Getting a specific jQuery element
  53. 53. var sum = 0; $(‚div.number‛).each( function(){ sum += (+this.innerHTML); }); this – is a current DOM element each(fn) traverses every selected element calling fn()
  54. 54. $(‚table tr‛).each( function(i){ if (i % 2) $(this).addClass(‚odd‛); }); $(this) – convert DOM to jQuery i - index of the current element each(fn) also passes an indexer
  55. 55. .next(expr) // next sibling .prev(expr) // previous sibling .siblings(expr) // siblings .children(expr) // children .parent(expr) // parent Traversing HTML
  56. 56. $(‚table td‛).each(function() { if ($(this).is(‚:first-child‛)) { $(this).addClass(‚firstCol‛); } }); Check for expression
  57. 57. // select paragraph and then find // elements with class ‘header’ inside $(‚p‛).find(‚.header‛).show(); // equivalent to: $(‚.header‛, $(‚p‛)).show(); Find in selected
  58. 58. $(‚<li><span></span></li>‛) // li .find(‚span‛) // span .html(‚About Us‛) // span .andSelf() // span, li .addClass(‚menu‛) // span,li .end() // span .end() // li .appendTo(‚ul.main-menu‛); Advanced Chaining
  59. 59. $(‚div‛) .slice(2, 5) .not(‚.green‛) .addClass(‚middle‛); Get Part of Selected Result
  60. 60. HTML Manipulation
  61. 61. $(‚p‛).html(‚<div>Hello $!</div>‛); // escape the content of div.b $(‚div.a‛).text($(‚div.b‛).html()); Getting and Setting Inner Content
  62. 62. // get the value of the checked checkbox $(‚input:checkbox:checked‛).val(); Getting and Setting Values // set the value of the textbox $(‚:text[name=‘txt’]‛).val(‚Hello‛); // select or check lists or checkboxes $(‚#lst‛).val([‚NY‛,‛IL‛,‛NS‛]);
  63. 63. Handling CSS Classes // add and remove class $(‚p‛).removeClass(‚blue‛).addClass(‚red‛); // add if absent, remove otherwise $(‚div‛).toggleClass(‚main‛); // test for class existance if ($(‚div‛).hasClass(‚main‛)) { //… }
  64. 64. // select > append to the end $(‚h1‛).append(‚<li>Hello $!</li>‛); // select > append to the beginning $(‚ul‛).prepend(‚<li>Hello $!</li>‛); Inserting new Elements // create > append/prepend to selector $(‚<li/>‛).html(‚9‛).appendTo(‚ul‛); $(‚<li/>‛).html(‚1‛).prependTo(‚ul‛);
  65. 65. // select > replace $(‚h1‛).replaceWith(‚<div>Hello</div>‛); Replacing Elements // create > replace selection $(‚<div>Hello</div>‛).replaceAll(‚h1‛);
  66. 66. $(‚h3‛).each(function(){ $(this).replaceWith(‚<div>‛ + $(this).html() + ‛</div>‛); }); Replacing Elements while keeping the content
  67. 67. // remove all children $(‚#mainContent‛).empty(); Deleting Elements // remove selection $(‚span.names‛).remove(); // change position $(‚p‛).remove(‚:not(.red)‛) .appendTo(‚#main‛);
  68. 68. $(‚a‛).attr(‚href‛,‛home.htm‛); // <a href=‚home.htm‛>…</a> Handling attributes // set the same as the first one $(‚button:gt(0)‛).attr(‚disabled‛, $(‚button:eq(0)‛).attr(‚disabled)); // remove attribute - enable $(‚button‛).removeAttr(‚disabled‛)
  69. 69. $(‚img‛).attr({ ‚src‛ : ‚/images/smile.jpg‛, ‚alt‛ : ‚Smile‛, ‚width‛ : 10, ‚height‛ : 10 }); Setting multiple attributes
  70. 70. // get style $(‚div‛).css(‚background-color‛); CSS Manipulations // set style $(‚div‛).css(‚float‛, ‚left‛); // set multiple style properties $(‚div‛).css({‚color‛:‛blue‛, ‚padding‛: ‚1em‛ ‚margin-right‛: ‚0‛, marginLeft: ‚10px‛});
  71. 71. // get window height var winHeight = $(window).height(); // set element height $(‚#main‛).height(winHeight); //.width() – element //.innerWidth() – .width() + padding //.outerWidth() – .innerWidth() + border //.outerWidth(true) – including margin Dimensions The default unit is Pixel (px)
  72. 72. // from the document $(‚div‛).offset().top; // from the parent element $(‚div‛).position().left; // scrolling position $(window).scrollTop(); Positioning
  73. 73. Events
  74. 74. $(document).ready(function(){ //… }); When the DOM is ready…  Fires when the document is ready for programming.  Uses advanced listeners for detecting.  window.onload() is a fallback.
  75. 75. // execute always $(‚div‛).bind(‚click‛, fn); // execute only once $(‚div‛).one(‚click‛, fn); Attach Event Possible event values: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error (or any custom event)
  76. 76. jQuery.Event object
  77. 77. $(‚div‛).unbind(‚click‛, fn); Detaching Events (Unique ID added to every attached function)
  78. 78. $(‚div‛).trigger(‚click‛); Events Triggering Triggers browser’s event action as well. Can trigger custom events. Triggered events bubble up.
  79. 79. // attach / trigger elem.blur(fn) / elem.blur() elem.focus(fn) / elem.focus() elem.click(fn) / elem.click() elem.change(fn) / elem.change() Events Helpers And many others…
  80. 80. // use different triggering function $(‚div‛).triggerHandler(‚click‛); Preventing Browser Default Action // prevent default action in handler function clickHandler(e) { e.preventDefault(); } // or just return false function clickHandler(e) {return false;}
  81. 81. // stop bubbling, keep other handler function clickHandler(e) { e.stopPropagation(); } Preventing Bubbling // stop bubbling and other handlers function clickHandler(e) { e.stopImmediatePropagation(); } // or just return false function clickHandler(e) {return false;}
  82. 82. // attach live event (‚div‛).live(‚click‛, fn); // detach live event (‚div‛).die(‚click‛, fn); Live Events Currently supported events: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
  83. 83. EVENTS DEMO
  84. 84. Effects
  85. 85. // just show $(‚div‛).show(); // reveal slowly, slow=600ms $(‚div‛).show(‚slow‛); // hide fast, fast=200ms $(‚div‛).hide(‚fast‛); // hide or show in 100ms $(‚div‛).toggle(100); Showing or Hiding Element
  86. 86. $(‚div‛).slideUp(); $(‚div‛).slideDown(‚fast‛); $(‚div‛).slideToggle(1000); Sliding Elements
  87. 87. $(‚div‛).fadeIn(‚fast‛); $(‚div‛).fadeOut(‚normal‛); // fade to a custom opacity $(‚div‛).fadeTo (‚fast‛, 0.5); Fading Elements Fading === changing opacity
  88. 88. $(‚div‛).hide(‚slow‛, function() { alert(‚The DIV is hidden‛); }); $(‚div‛).show(‚fast‛, function() { $(this).html(‚Hello jQuery‛); }); // this is a current DOM element Detecting animation completion Every effect function has a (speed, callback) overload
  89. 89. // .animate(options, duration) $(‚div‛).animate({ width: ‚90%‛, opacity: 0.5, borderWidth: ‚5px‛ }, 1000); Custom Animation
  90. 90. $(‚div‛).animate({width: ‚90%‛},100) .animate({opacity: 0.5},200) .animate({borderWidth: ‚5px‛}); Chaining Animation By default animations are queued and than performed one by one
  91. 91. $(‚div‛) .animate({width: ‚90%‛}, {queue:false, duration:1000}) .animate({opacity : 0.5}); Controlling Animations Sync The first animation will be performed immediately without queuing
  92. 92. EFFECTS DEMO
  93. 93. AJAX with jQuery
  94. 94. $(‚div‛).load(‚content.htm‛); // passing parameters $(‚#content‛).load(‚getcontent.aspx‛, {‚id‛:‛33‛, ‚type‛:‛main‛}); Loading content
  95. 95. $.get(‚test.aspx‛, {id:1}, function(data){alert(data);}); $.post(‚test.aspx‛, {id:1}, function(data){alert(data);}); Sending GET/POST requests
  96. 96. $.getJSON(‚users.aspx‛, {id:1}, function(users) { alert(users[0].name); }); Retrieving JSON Data
  97. 97. $.getScript(‚script.js‛, function() { doSomeFunction(); }); Retrieving JS Files
  98. 98. AJAX DEMO
  99. 99. Extending the Library
  100. 100. // definition jQuery.fn.printLine = function(s) { return jQuery(this).each(function() { this.append(‚<div>‛+ s +‚</div>‛); }); }; // usage $(‚#log‛).printLine(‚Hello‛); Adding Methods Do not use $ in the method (at least not until next slide)
  101. 101. (function ($) { jQuery.fn.printLine = function(s) { return $(this).each(function() { this.append(‚<div>‛+ s +‚</div>‛); }); }; })(jQuery); Closure to solve the $ issue
  102. 102. $.expr[‘:’].test = function(o, i, m, s) { // o – current object in the selection // i – loop index in the stack // m – meta data about your selector // s – stack of all the elements // return true to include the element // return false to exclude the element }; Custom Selectors

×