Jquery
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Jquery

on

  • 5,550 views

 

Statistics

Views

Total Views
5,550
Views on SlideShare
5,184
Embed Views
366

Actions

Likes
4
Downloads
108
Comments
1

6 Embeds 366

http://www.programania.net 213
http://www.slideshare.net 71
http://www.planetacodigo.com 60
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 15
http://static.slidesharecdn.com 5
http://jqueryframework.blogspot.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • so good your color, simply design
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jquery Presentation Transcript

  • 1. jQuery
  • 2. jQuery por Luis Artola
  • 3. jQuery por Luis Artola sicos!
  • 4. jQuery por Luis Artola sicos! programania.net
  • 5. jQuery por Luis Artola sicos! programania.net precriticas.com
  • 6. RECURSOS • Tutorials http://docs.jquery.com/Tutorials • Visual jquery http://visualjquery.com/ • Learning jquery http://www.learningjquery.com/ • jQuery Essentials http://www.slideshare.net/1Marc/jquery-essentials • Javascript Library Overview http://www.slideshare.net/jeresig/javascript-library-overview
  • 7. ¿QUÉ PUEDO HACER? Bombardeo de código
  • 8. 1/8 <script type="text/javascript" src="jquery.js"></script>
  • 9. 2/8
  • 10. 2/8 • $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo
  • 11. 2/8 • $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo • $(...).css(“border”, “1px solid black”); Ponle a “algo” el borde 1px negro.
  • 12. 2/8 • $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo • $(...).css(“border”, “1px solid black”); Ponle a “algo” el borde 1px negro. • $(...).val(“3”); Ponle el valor a “algo” = 3.!
  • 13. 2/8 • $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo • $(...).css(“border”, “1px solid black”); Ponle a “algo” el borde 1px negro. • $(...).val(“3”); Ponle el valor a “algo” = 3.! • $(...).val(); Dame el valor de “algo”. !
  • 14. 3/8
  • 15. 3/8 • $(...).attr(“href”, “http://google.com”); Que todos los links tengan el atributo href como google.com
  • 16. 3/8 • $(...).attr(“href”, “http://google.com”); Que todos los links tengan el atributo href como google.com • $(...).html(“<p>Iʼm new</p>”); Cambia el HTML de “algo” por ....
  • 17. 3/8 • $(...).attr(“href”, “http://google.com”); Que todos los links tengan el atributo href como google.com • $(...).html(“<p>Iʼm new</p>”); Cambia el HTML de “algo” por .... • $(...).attr(“checked”,”checked”); Pon el atributo checked a checked.
  • 18. 3/8 • $(...).attr(“href”, “http://google.com”); Que todos los links tengan el atributo href como google.com • $(...).html(“<p>Iʼm new</p>”); Cambia el HTML de “algo” por .... • $(...).attr(“checked”,”checked”); Pon el atributo checked a checked. • $(...).click(function(){ something();}); Cuando “algo” es clickado haz “someting()”.
  • 19. 4/8
  • 20. 4/8 • Con cada click haz un desplegar / replegar. $(...).click( function(){ $(“div:first”).slideToggle(); });
  • 21. 4/8 • Con cada click haz un desplegar / replegar. $(...).click( function(){ $(“div:first”).slideToggle(); }); • $(...).animate({ “width”: “300px” }, 500); Amplia un elemento a 300px en 5 segundos.
  • 22. 4/8 • Con cada click haz un desplegar / replegar. $(...).click( function(){ $(“div:first”).slideToggle(); }); • $(...).animate({ “width”: “300px” }, 500); Amplia un elemento a 300px en 5 segundos. • $(...).fadeTo(0.3); Reduce la opacidad de “algo” al 30%.
  • 23. 5/8
  • 24. 5/8 • $(...).get(“tag.php”, { “bar”: “baz” }); Envía datos por get a tag.php.
  • 25. 5/8 • $(...).get(“tag.php”, { “bar”: “baz” }); Envía datos por get a tag.php. • $.post(“send.php”, { foo: ”bar” }, function(response){ alert(response); }); Envía datos por post a send.php y luego avisa.
  • 26. 6/8 LOAD
  • 27. 6/8 LOAD • $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id.
  • 28. 6/8 LOAD • $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id. • $(...).load(ʻ/direccion/url/ #containerʼ) Cargar una url en un id, pero solo el id container.
  • 29. 6/8 LOAD • $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id. • $(...).load(ʻ/direccion/url/ #containerʼ) Cargar una url en un id, pero solo el id container. • $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serialize()) Cargar una url en un id, pasándo parámetros por GET.
  • 30. 6/8 LOAD • $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id. • $(...).load(ʻ/direccion/url/ #containerʼ) Cargar una url en un id, pero solo el id container. • $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serialize()) Cargar una url en un id, pasándo parámetros por GET. • $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serializeArray()) Cargar una url en un id, pasando parámetros por POST
  • 31. 6/8 LOAD • $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id. • $(...).load(ʻ/direccion/url/ #containerʼ) Cargar una url en un id, pero solo el id container. • $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serialize()) Cargar una url en un id, pasándo parámetros por GET. • $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serializeArray()) Cargar una url en un id, pasando parámetros por POST • También .post(), .get(), .getJSON(), .ajax() que permiten, entre otras cosas, callbacks.
  • 32. 7/8
  • 33. 7/8 • $.fn.myPlugin = function(){ return this.each (function(){ $(this).html(“you used myPlugin!”); }); }); $(...).myPlugin();
  • 34. 7/8 • $.fn.myPlugin = function(){ return this.each (function(){ $(this).html(“you used myPlugin!”); }); }); $(...).myPlugin();
  • 35. 7/8 • $.fn.myPlugin = function(){ return this.each (function(){ $(this).html(“you used myPlugin!”); }); }); $(...).myPlugin();
  • 36. 8/8 jQuery("<div/>", { id: "foo", css: { height: "50px", width: "50px", color: "blue", backgroundColor: "#ccc" }, click: function() { $(this).css("backgroundColor", "red"); } }).appendTo("body");
  • 37. Selectores El gran superpoder de jQuery
  • 38. 1/8
  • 39. 1/8 • $('div') Selecciona todas las capas.
  • 40. 1/8 • $('div') Selecciona todas las capas. • $('#myid') Selecciona el id myid.
  • 41. 1/8 • $('div') Selecciona todas las capas. • $('#myid') Selecciona el id myid. • $('div#myid') Selecciona el div con id myid.
  • 42. 2/8
  • 43. 2/8 • $('.myclass') Selecciona todos los elementos de la clase myclass.
  • 44. 2/8 • $('.myclass') Selecciona todos los elementos de la clase myclass. • $('.myclass .otherclass') Selecciona todos los elementos de la clase myclass y de otherclass.
  • 45. 2/8 • $('.myclass') Selecciona todos los elementos de la clase myclass. • $('.myclass .otherclass') Selecciona todos los elementos de la clase myclass y de otherclass. • $('#container p') Selecciona todos los párrafos hijos del id container.
  • 46. 3/8
  • 47. 3/8 $(':empty') Selecciona todos los elementos sin hijos.
  • 48. 3/8 $(':empty') Selecciona todos los elementos sin hijos.
  • 49. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos.
  • 50. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos.
  • 51. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos. • $('[rel]') Selecciona todos los elementos con un atributo rel.
  • 52. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos. • $('[rel]') Selecciona todos los elementos con un atributo rel.
  • 53. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos. • $('[rel]') Selecciona todos los elementos con un atributo rel. • $('[name=myname]') Selecciona todos los elementos con un atributo name que valga myname.
  • 54. 4/8
  • 55. 4/8
  • 56. 4/8 • $('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
  • 57. 4/8 • $('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
  • 58. 4/8 • $('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass. • $('#myid + .myclass') Selecciona a todos los elementos de la clase myclass que son hermanos de myid.
  • 59. 4/8 • $('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass. • $('#myid + .myclass') Selecciona a todos los elementos de la clase myclass que son hermanos de myid.
  • 60. 4/8 • $('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass. • $('#myid + .myclass') Selecciona a todos los elementos de la clase myclass que son hermanos de myid. • $('#myid ~ .myclass') Selecciona a todos los myclass que siguen a un hermano myid.
  • 61. 5/8
  • 62. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
  • 63. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
  • 64. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre. • $('li:first-child') Selecciona los <li> que son el primer hijo de su padre.
  • 65. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre. • $('li:first-child') Selecciona los <li> que son el primer hijo de su padre.
  • 66. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre. • $('li:first-child') Selecciona los <li> que son el primer hijo de su padre. • $(':only-child') Selecciona los hijos únicos.
  • 67. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre. • $('li:first-child') Selecciona los <li> que son el primer hijo de su padre. • $(':only-child') Selecciona los hijos únicos.
  • 68. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre. • $('li:first-child') Selecciona los <li> que son el primer hijo de su padre. • $(':only-child') Selecciona los hijos únicos. • $(':not(.myclass)') Selecciona los elementos que no son de la clase myclass.
  • 69. 6/8
  • 70. 6/8 $('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ).
  • 71. 6/8 $('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ). • $('[id^=hello]') selecciona los elementos cuyo id empieza por hello.
  • 72. 6/8 $('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ). • $('[id^=hello]') selecciona los elementos cuyo id empieza por hello.
  • 73. 6/8 $('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ). • $('[id^=hello]') selecciona los elementos cuyo id empieza por hello. • $('[id$=goodbye]') ... cuyo id termina por goodbye.
  • 74. 6/8 $('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ). • $('[id^=hello]') selecciona los elementos cuyo id empieza por hello. • $('[id$=goodbye]') ... cuyo id termina por goodbye.
  • 75. 6/8 $('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ). • $('[id^=hello]') selecciona los elementos cuyo id empieza por hello. • $('[id$=goodbye]') ... cuyo id termina por goodbye. • $('[style*=background]') selecciona los elementos que tiene un style con background definido.
  • 76. 7/8
  • 77. 7/8 $('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
  • 78. 7/8 $('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
  • 79. 7/8 $('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos. • $('[id|=hello]') Selecciona aquellos que tienen un id hello o que empieza por hello.
  • 80. 7/8 $('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos. • $('[id|=hello]') Selecciona aquellos que tienen un id hello o que empieza por hello.
  • 81. 7/8 $('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos. • $('[id|=hello]') Selecciona aquellos que tienen un id hello o que empieza por hello. • $('li:gt(2)') Selecciona aquellos <li> después del tercero.
  • 82. 8/8
  • 83. 8/8 • $('li:contains(second)') Selecciona los <li> que contienen la palabra “second”
  • 84. 8/8 • $('li:contains(second)') Selecciona los <li> que contienen la palabra “second” • $('.myclass:has(#myid)') Selecciona los myclass que tienen un hijo myid
  • 85. 8/8 • $('li:contains(second)') Selecciona los <li> que contienen la palabra “second” • $('.myclass:has(#myid)') Selecciona los myclass que tienen un hijo myid • $('.myclass:visible') Selecciona todos los myclass visibles.
  • 86. ¡(casi)Nunca haces un loop o un foreach!
  • 87. TEORÍA Se acabó el bombardeo de código.
  • 88. • Filosofía jQuery: Simplificar la relación entre HTML y JavaScript.
  • 89. • Filosofía jQuery: Simplificar la relación entre HTML y JavaScript. • #1. Encontrar “algo” de HTML #2. Hacer algo con él.
  • 90. • Herramienta poderosa a la hora de encontrar una serie de elementos en un documento. Desde CSS 1 hasta 3 y los suyos propios.
  • 91. • Herramienta poderosa a la hora de encontrar una serie de elementos en un documento. Desde CSS 1 hasta 3 y los suyos propios. • API sólida y usable que te esconde los probemas de compatibilidad entre navegadores.
  • 92. • Manipulation: before(), after(), appendTo(), append(), ...
  • 93. • Manipulation: before(), after(), appendTo(), append(), ... • Attributes: css(), attr(), html(), val(), addClass(), text(), ...
  • 94. • Manipulation: before(), after(), appendTo(), append(), ... • Attributes: css(), attr(), html(), val(), addClass(), text(), ... • Events: bind(), trigger(), unbind(), live(), click(), submit(), ...
  • 95. • Effects: show(), fadeOut(), toggle(), animate(), ...
  • 96. • Effects: show(), fadeOut(), toggle(), animate(), ... • Traversing find(), prevAll(), next(), hasClass(), children(), siblings(), ...
  • 97. • Effects: show(), fadeOut(), toggle(), animate(), ... • Traversing find(), prevAll(), next(), hasClass(), children(), siblings(), ... • Ajax get(), getJSON(), post(), ajax(), load()
  • 98. • Las acciones pueden ser encadenadas: $(...).addClass(ʻfooʼ).fadeIn().html(“foo”); $("li").not(":has(ul)").css("border", "1px solid black"); $(':input').parents(':not(:first)').show()
  • 99. • jQuery tiene una enorme comunidad. • test coverage! plugins! books support tutorials • open (free) license! speed • Código ligero.
  • 100. • Projectos que lo usan: Wordpress, Drupal, Textpattern
  • 101. • Projectos que lo usan: Wordpress, Drupal, Textpattern • Compañías que lo usan: Google, Amazon, Digg, Netflix, Dell, HP, Bank of America, Intel... NBC, CBS, BBC, Reuters, Newsweek...
  • 102. JQUERY UI
  • 103. • Interactions • Draggable • Widgets • Droppable • Accordion • Sortable • Datepicker • Selectable • Dialog • Resizable • Progressbar • Effects • Slider • Theming y CSS • Tabs framework
  • 104. ¿CUÁL ES MEJOR? • jQuery tiene selectores más potentes • Dojo tiene un framework UI más potente. • Prototype y MooTools, son mucho más extensibles (OO) y modulares.