Jquery

4,747 views

Published on

Published in: Technology, Business
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
4,747
On SlideShare
0
From Embeds
0
Number of Embeds
369
Actions
Shares
0
Downloads
163
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Jquery

  1. 1. jQuery
  2. 2. jQuery por Luis Artola
  3. 3. jQuery por Luis Artola sicos!
  4. 4. jQuery por Luis Artola sicos! programania.net
  5. 5. jQuery por Luis Artola sicos! programania.net precriticas.com
  6. 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. 7. ¿QUÉ PUEDO HACER? Bombardeo de código
  8. 8. 1/8 <script type="text/javascript" src="jquery.js"></script>
  9. 9. 2/8
  10. 10. 2/8 • $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo
  11. 11. 2/8 • $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo • $(...).css(“border”, “1px solid black”); Ponle a “algo” el borde 1px negro.
  12. 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. 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. 14. 3/8
  15. 15. 3/8 • $(...).attr(“href”, “http://google.com”); Que todos los links tengan el atributo href como google.com
  16. 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. 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. 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. 19. 4/8
  20. 20. 4/8 • Con cada click haz un desplegar / replegar. $(...).click( function(){ $(“div:first”).slideToggle(); });
  21. 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. 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. 23. 5/8
  24. 24. 5/8 • $(...).get(“tag.php”, { “bar”: “baz” }); Envía datos por get a tag.php.
  25. 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. 26. 6/8 LOAD
  27. 27. 6/8 LOAD • $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id.
  28. 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. 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. 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. 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. 32. 7/8
  33. 33. 7/8 • $.fn.myPlugin = function(){ return this.each (function(){ $(this).html(“you used myPlugin!”); }); }); $(...).myPlugin();
  34. 34. 7/8 • $.fn.myPlugin = function(){ return this.each (function(){ $(this).html(“you used myPlugin!”); }); }); $(...).myPlugin();
  35. 35. 7/8 • $.fn.myPlugin = function(){ return this.each (function(){ $(this).html(“you used myPlugin!”); }); }); $(...).myPlugin();
  36. 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. 37. Selectores El gran superpoder de jQuery
  38. 38. 1/8
  39. 39. 1/8 • $('div') Selecciona todas las capas.
  40. 40. 1/8 • $('div') Selecciona todas las capas. • $('#myid') Selecciona el id myid.
  41. 41. 1/8 • $('div') Selecciona todas las capas. • $('#myid') Selecciona el id myid. • $('div#myid') Selecciona el div con id myid.
  42. 42. 2/8
  43. 43. 2/8 • $('.myclass') Selecciona todos los elementos de la clase myclass.
  44. 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. 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. 46. 3/8
  47. 47. 3/8 $(':empty') Selecciona todos los elementos sin hijos.
  48. 48. 3/8 $(':empty') Selecciona todos los elementos sin hijos.
  49. 49. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos.
  50. 50. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos.
  51. 51. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos. • $('[rel]') Selecciona todos los elementos con un atributo rel.
  52. 52. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos. • $('[rel]') Selecciona todos los elementos con un atributo rel.
  53. 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. 54. 4/8
  55. 55. 4/8
  56. 56. 4/8 • $('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
  57. 57. 4/8 • $('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
  58. 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. 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. 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. 61. 5/8
  62. 62. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
  63. 63. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
  64. 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. 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. 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. 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. 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. 69. 6/8
  70. 70. 6/8 $('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ).
  71. 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. 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. 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. 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. 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. 76. 7/8
  77. 77. 7/8 $('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
  78. 78. 7/8 $('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
  79. 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. 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. 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. 82. 8/8
  83. 83. 8/8 • $('li:contains(second)') Selecciona los <li> que contienen la palabra “second”
  84. 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. 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. 86. ¡(casi)Nunca haces un loop o un foreach!
  87. 87. TEORÍA Se acabó el bombardeo de código.
  88. 88. • Filosofía jQuery: Simplificar la relación entre HTML y JavaScript.
  89. 89. • Filosofía jQuery: Simplificar la relación entre HTML y JavaScript. • #1. Encontrar “algo” de HTML #2. Hacer algo con él.
  90. 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. 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. 92. • Manipulation: before(), after(), appendTo(), append(), ...
  93. 93. • Manipulation: before(), after(), appendTo(), append(), ... • Attributes: css(), attr(), html(), val(), addClass(), text(), ...
  94. 94. • Manipulation: before(), after(), appendTo(), append(), ... • Attributes: css(), attr(), html(), val(), addClass(), text(), ... • Events: bind(), trigger(), unbind(), live(), click(), submit(), ...
  95. 95. • Effects: show(), fadeOut(), toggle(), animate(), ...
  96. 96. • Effects: show(), fadeOut(), toggle(), animate(), ... • Traversing find(), prevAll(), next(), hasClass(), children(), siblings(), ...
  97. 97. • Effects: show(), fadeOut(), toggle(), animate(), ... • Traversing find(), prevAll(), next(), hasClass(), children(), siblings(), ... • Ajax get(), getJSON(), post(), ajax(), load()
  98. 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. 99. • jQuery tiene una enorme comunidad. • test coverage! plugins! books support tutorials • open (free) license! speed • Código ligero.
  100. 100. • Projectos que lo usan: Wordpress, Drupal, Textpattern
  101. 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. 102. JQUERY UI
  103. 103. • Interactions • Draggable • Widgets • Droppable • Accordion • Sortable • Datepicker • Selectable • Dialog • Resizable • Progressbar • Effects • Slider • Theming y CSS • Tabs framework
  104. 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.

×