Introdução ao Framework jQuery !

1. Introdução
Gustavo Dutra

2. void bogosort(int size, int *array) {
int i, j;
for (i = 1; i <= size; i++)
if (i == size)
return;
else if (array[i-1] > array[i])
break;
for (i = 0; i < size; i++) {
j = rand() % size;
if (array[i] != array[j]) {
int aux = array[i];
}
array[i] = array[j];
array[j] = aux; C
}
bogosort(size, array);
} Adaptado de
http://pt.wikipedia.org/wiki/Bogosort#C

3. from random import shuffle
def bogosort(seq):
while not all(x<=y for x,y in zip(seq,seq[1:])):
shuffle(seq)
return seq
Adaptado de
http://pt.wikipedia.org/wiki/Bogosort#Python
Python

4. wtf?

5. DOM - Data Object Model
Define um padrão para acessar documentos
DOM Core Qualquer documento
DOM XML XML
DOM HTML HTML
Padrão do quê?
OBJETOS MÉTODOS PROPRIEDADES
Fonte: http://www.w3schools.com/HTMLDOM/dom_intro.asp

6. HTML DOM
var el = document.getElementById("myDiv");
el.parentNode.removeChild(el);

7. HTML DOM
var el = document.getElementById("myDiv");
el.parentNode.removeChild(el);
jQuery
$("#myDiv").remove();
HTML DOM SUCKS!

8. <input type="text" name="start_date"
onchange="validDate(this);" />
<input type="text" name="end_date"
onchange="validDate(this);" />

9. <input type="text" name="start_date"
onchange="validDate(this);" />
<input type="text" name="end_date"
onchange="validDate(this);" />
E se o JavaScript não estiver habilitado?
E se mudar o nome da função validDate ?
E se for adicionado mais parâmetros?

10. <input type="text" name="start_date"
onchange="validDate(this);" />
<input type="text" name="end_date"
onchange="validDate(this);" />
E se o JavaScript não estiver habilitado?
E se mudar o nome da função validDate ?
E se for adicionado mais parâmetros?
MANDA O ESTAGIÁRIO!

11. <input type="text" name="start_date" class="date" />
<input type="text" name="end_date" class="date" />

12. <input type="text" name="start_date" class="date" />
<input type="text" name="end_date" class="date" />
window.onload = function() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs.[i].className == 'date') {
inputs[i].onchange = function() {
validDate(this);
}
}
}
}
function validDate(element) {
//...
}

13. Javascript Não-Obstrusivo

14. Javascript Não-Obstrusivo
Graceful Degradation
Progressive Enhancement

15. Javascript Não-Obstrusivo
Graceful Degradation
Progressive Enhancement
Não suponha, VERIFIQUE!

16. Javascript Não-Obstrusivo
Graceful Degradation
Progressive Enhancement
Não suponha, VERIFIQUE!
Valide em mais de um browser!

17. Javascript Não-Obstrusivo
Graceful Degradation
Progressive Enhancement
Não suponha, VERIFIQUE!
Valide em mais de um browser!
Mantenha os scripts o mais seguro
POSSÍVEL

18. DOM SUCKS
+
Javascript Não-Obstrusivo

19. DOM SUCKS
+
Javascript Não-Obstrusivo
originaram
jQuery

20. jQuery
Core

21. jQuery
Core
Ajax

22. Attributes
jQuery
Core
Ajax

23. Manipulation
Attributes
jQuery
Core
Ajax

24. Manipulation
Attributes
jQuery
Core Effects
Ajax

25. Manipulation
Attributes
jQuery
Core Effects
Ajax
Traversing

26. Manipulation
Attributes
jQuery
Core Effects
Selectors
Ajax
Traversing

27. Manipulation
Attributes
jQuery
Core Effects
Selectors
Events
Ajax
Traversing

28. Manipulation
Attributes CSS
jQuery
Core Effects
Selectors
Events
Ajax
Traversing

29. Manipulation
Attributes CSS
jQuery
Core Effects
Selectors
Internals
Events
Ajax
Traversing

30. Manipulation
Attributes CSS
jQuery
Utilities
Core Effects
Selectors
Internals
Events
Ajax
Traversing

31. Manipulation
Attributes CSS
jQuery UI
jQuery
Utilities
Core Effects
Selectors
Internals
Events
Ajax
Traversing

32. Manipulation
Plugins
Attributes CSS
jQuery UI
jQuery
Utilities
Core Effects
Selectors
Internals
Events
Ajax
Traversing

33. Lets
Begin

34. ((typeof jQuery) == "function")
((typeof $) == "function")
jQuery === $

35. Jaspion = $.noConflict()
((typeof $) == "undefined")
jQuery === Jaspion

36. window.onload = function() {
// ...
}

37. $(document).ready(function() {
// ...
});
$(function() {
// ...
OU
});

38. S $("div")
body
E $("#id")
L $(".class") ul div#id
E $("ul li")
$("ul li:not(li.active)") li div.class
T $("li.active ~ li")
O $("li:contains(Home)") li.active
R $("ul li:first,ul li:last")
E $("div#id > div") li
S

39. S $("div")
body
E $("#id")
L $(".class") ul div#id
E $("ul li")
$("ul li:not(li.active)") li div.class
T $("li.active ~ li")
O $("li:contains(Home)") li.active
R $("ul li:first,ul li:last")
E $("div#id > div") li
S

40. S $("div")
body
E $("#id")
L $(".class") ul div#id
E $("ul li")
$("ul li:not(li.active)") li div.class
T $("li.active ~ li")
O $("li:contains(Home)") li.active
R $("ul li:first,ul li:last")
E $("div#id > div") li
S

41. S $("div")
body
E $("#id")
L $(".class") ul div#id
E $("ul li")
$("ul li:not(li.active)") li div.class
T $("li.active ~ li")
O $("li:contains(Home)") li.active
R $("ul li:first,ul li:last")
E $("div#id > div") li
S

42. S $("div")
body
E $("#id")
L $(".class") ul div#id
E $("ul li")
$("ul li:not(li.active)") li div.class
T $("li.active ~ li")
O $("li:contains(Home)") li.active
R $("ul li:first,ul li:last")
E $("div#id > div") li
S

43. S $("div")
body
E $("#id")
L $(".class") ul div#id
E $("ul li")
$("ul li:not(li.active)") li div.class
T $("li.active ~ li")
O $("li:contains(Home)") li.active
R $("ul li:first,ul li:last")
E $("div#id > div") li
S

44. S $("div")
body
E $("#id")
L $(".class") ul div#id
E $("ul li")
$("ul li:not(li.active)") li div.class
T $("li.active ~ li")
O $("li:contains(Home)") li.active
R $("ul li:first,ul li:last")
E $("div#id > div") li
S

45. S $("div")
body
E $("#id")
L $(".class") ul div#id
E $("ul li")
$("ul li:not(li.active)") li div.class
T $("li.active ~ li")
O $("li:contains(Home)") li.active
R $("ul li:first,ul li:last")
E $("div#id > div") li
S

46. S $("div")
body
E $("#id")
L $(".class") ul div#id
E $("ul li")
$("ul li:not(li.active)") li div.class
T $("li.active ~ li")
O $("li:contains(Home)") li.active
R $("ul li:first,ul li:last")
E $("div#id > div") li
S

47. C $("#myId li");
O
var el = $("#myId");
N
$("li", el);
T
E $("li", "#myId");
X
T var el = getElementById("myId");
$("li", el);
O

48. A
$(...)
T
R
I
B
U
T
O
S

49. A
$(...) .addClass("css-class")
T .removeClass("css-class")
R .toggleClass("css-class")
I
B
U
T
O
S

50. A
$(...) .addClass("css-class")
T .removeClass("css-class")
R .toggleClass("css-class")
.html()
I .html("innerHTML")
B
U
T
O
S

51. A
$(...) .addClass("css-class")
T .removeClass("css-class")
R .toggleClass("css-class")
.html()
I .html("innerHTML")
B .text()
U .text("text")
T
O
S

52. A
$(...) .addClass("css-class")
T .removeClass("css-class")
R .toggleClass("css-class")
.html()
I .html("innerHTML")
B .text()
U .text("text")
.attr("id")
T .attr("id", "new-id")
O
S

53. A
$(...) .addClass("css-class")
T .removeClass("css-class")
R .toggleClass("css-class")
.html()
I .html("innerHTML")
B .text()
U .text("text")
.attr("id")
T .attr("id", "new-id")
O .val()
S .val("input value");

54. A $(...)
T
R
A
V
E
S
S .children()
A
R

55. A $(...)
T
R
A
V
E
S .children()
S .eq(0)
A
R

56. A $(...)
T
R
A
V
E
S .children()
.eq(0)
S .next()
A
R

57. A $(...)
T
R
A
V
E
S .children()
.eq(0)
S .next() .prev()
A
R

58. A $(...)
T
R
A
V
E
S .children()
.eq(0)
S .next() .find(...)
A .prev()
R

59. A $(...)
T
R
A
V
E
S .children()
.eq(0)
S .next() .end()
A .prev()
.find(...)
R

60. M
A
$(...)
N
I .prepend()
P
U .append()
L
A
R

61. M
A
N .before()
I
$(...)
P
U .after()
L
A
R

62. M .wrap(...)
A
$(...)
N
I
P $(...) .clone(...) $(...)
U
L
A .clone() cria elementos
soltos do documento
R

63. .click(function(event) {
// ...
E });
V .dblclick(function(event) {
// ...
E });
N .blur(function(event) {
T // ...
});
O
.keypress(function(event) {
S // ...
});

64. E
V .hover(function(event) {
E // mouseenter
N },function(event) {
T // mouseleave
O });
S

65. .bind('click', function(event) {
// ...
E });
V .trigger('click');
E .triggerHandler('click');
N
T
O
S

66. .bind('click', function(event) {
// ...
E });
V .trigger('click');
E .triggerHandler('click');
N
T .bind('myEv', function(event) {
// ...
O });
S .trigger('myEv');

67. .show()
E
F .fadeOut()
E .hide()
I
T .slideDown()
O .fadeIn()
S .slideUp()

68. La pregunta?
http://GustavoDutra.com
mechamo@gustavodutra.com
@gustavotkg