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.

89. • Filosofía jQuery:
Simplificar la relación entre HTML y
JavaScript.

90. • Filosofía jQuery:
Simplificar la relación entre HTML y
JavaScript.
• #1. Encontrar “algo” de HTML
#2. Hacer algo con él.

92. • Herramienta poderosa a la hora de encontrar
una serie de elementos en un documento.
Desde CSS 1 hasta 3 y los suyos propios.

93. • 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.

95. • Manipulation:
before(), after(), appendTo(), append(), ...

96. • Manipulation:
before(), after(), appendTo(), append(), ...
• Attributes:
css(), attr(), html(), val(), addClass(), text(), ...

97. • Manipulation:
before(), after(), appendTo(), append(), ...
• Attributes:
css(), attr(), html(), val(), addClass(), text(), ...
• Events:
bind(), trigger(), unbind(), live(), click(), submit(), ...

99. • Effects:
show(), fadeOut(), toggle(), animate(), ...

100. • Effects:
show(), fadeOut(), toggle(), animate(), ...
• Traversing
find(), prevAll(), next(), hasClass(), children(), siblings(), ...

101. • Effects:
show(), fadeOut(), toggle(), animate(), ...
• Traversing
find(), prevAll(), next(), hasClass(), children(), siblings(), ...
• Ajax
get(), getJSON(), post(), ajax(), load()

103. • Las acciones pueden ser encadenadas:
$(...).addClass(ʻfooʼ).fadeIn().html(“foo”);
$("li").not(":has(ul)").css("border", "1px solid
black");
$(':input').parents(':not(:first)').show()

104. • jQuery tiene una enorme comunidad.
• test coverage! plugins! books support
tutorials
• open (free) license! speed
• Código ligero.

106. • Projectos que lo usan:
Wordpress, Drupal, Textpattern

107. • 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...

108. JQUERY UI

109. • Interactions
• Draggable • Widgets
• Droppable • Accordion
• Sortable • Datepicker
• Selectable • Dialog
• Resizable • Progressbar
• Effects • Slider
• Theming y CSS • Tabs
framework

110. ¿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.