jQuery - Introdução

Uma introdução sobre o jQuery.

Transcript

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; } } bogosort(size, array); } Adaptado de http://pt.wikipedia.org/wiki/Bogosort#C 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. w t f ?
5. DOM - Data Object Model Define um padrão para acessar documentos DOM Core Qualquer documento DOM XML XML DOM HTML HTML Fonte: http://www.w3schools.com/HTMLDOM/dom_intro.asp OBJETOS MÉTODOS PROPRIEDADES Padrão do quê?
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);" /> MANDA O ESTAGIÁRIO! E se o JavaScript não estiver habilitado? E se mudar o nome da função validDate ? E se for adicionado mais parâmetros?
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 Não suponha, VERIFIQUE! Graceful Degradation Progressive Enhancement
16. Javascript Não-Obstrusivo Valide em mais de um browser! Não suponha, VERIFIQUE! Graceful Degradation Progressive Enhancement
17. Javascript Não-Obstrusivo Mantenha os scripts o mais seguro POSSÍVEL Valide em mais de um browser! Não suponha, VERIFIQUE! Graceful Degradation Progressive Enhancement
18. DOM SUCKS + Javascript Não-Obstrusivo
19. DOM SUCKS + Javascript Não-Obstrusivo originaram jQuery
20. jQuery Core
21. jQuery Core Ajax
22. jQuery Core Attributes Ajax
23. jQuery Core Manipulation Attributes Ajax
24. jQuery Core Effects Manipulation Attributes Ajax
25. jQuery Core Traversing Effects Manipulation Attributes Ajax
26. jQuery Core Selectors Traversing Effects Manipulation Attributes Ajax
27. jQuery Core Events Selectors Traversing Effects Manipulation Attributes Ajax
28. jQuery Core CSS Events Selectors Traversing Effects Manipulation Attributes Ajax
29. jQuery Core Internals CSS Events Selectors Traversing Effects Manipulation Attributes Ajax
30. jQuery Core Utilities Internals CSS Events Selectors Traversing Effects Manipulation Attributes Ajax
31. jQuery Core jQuery UI Utilities Internals CSS Events Selectors Traversing Effects Manipulation Attributes Ajax
32. jQuery Core Plugins jQuery UI Utilities Internals CSS Events Selectors Traversing Effects Manipulation Attributes Ajax
33. Lets Begin
34. jQuery === $ ((typeof jQuery) == "function") ((typeof $) == "function")
35. jQuery === Jaspion Jaspion = $.noConflict() ((typeof $) == "undefined")
36. window.onload = function() { // ... }
37. $(document).ready(function() { // ... }); $(function() { // ... }); OU
38. $("div") $("#id") $(".class") $("div#id > div") $("ul li") $("ul li:first,ul li:last") $("ul li:not(li.active)") $("li:contains(Home)") $("li.active ~ li") div#id div.class ul li li.active li div#id div.class ul li li.active li body S E L E T O R E S
39. $("div") $("#id") $(".class") $("div#id > div") $("ul li") $("ul li:first,ul li:last") $("ul li:not(li.active)") $("li:contains(Home)") $("li.active ~ li") div#id div.class ul li li.active li div#id div.class ul li li.active li body S E L E T O R E S
40. $("div") $("#id") $(".class") $("div#id > div") $("ul li") $("ul li:first,ul li:last") $("ul li:not(li.active)") $("li:contains(Home)") $("li.active ~ li") div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li body S E L E T O R E S
41. $("div") $("#id") $(".class") $("div#id > div") $("ul li") $("ul li:first,ul li:last") $("ul li:not(li.active)") $("li:contains(Home)") $("li.active ~ li") div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li body S E L E T O R E S
42. $("div") $("#id") $(".class") $("div#id > div") $("ul li") $("ul li:first,ul li:last") $("ul li:not(li.active)") $("li:contains(Home)") $("li.active ~ li") div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li body S E L E T O R E S
43. div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li $("div") $("#id") $(".class") $("div#id > div") $("ul li") $("ul li:first,ul li:last") $("ul li:not(li.active)") $("li:contains(Home)") $("li.active ~ li") body S E L E T O R E S
44. div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li $("div") $("#id") $(".class") $("div#id > div") $("ul li") $("ul li:first,ul li:last") $("ul li:not(li.active)") $("li:contains(Home)") $("li.active ~ li") body S E L E T O R E S
45. div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li $("div") $("#id") $(".class") $("div#id > div") $("ul li") $("ul li:first,ul li:last") $("ul li:not(li.active)") $("li:contains(Home)") $("li.active ~ li") body S E L E T O R E S
46. div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li div#id div.class ul li li.active li $("div") $("#id") $(".class") $("div#id > div") $("ul li") $("ul li:first,ul li:last") $("ul li:not(li.active)") $("li:contains(Home)") $("li.active ~ li") body S E L E T O R E S
47. var el = getElementById("myId"); $("li", el); var el = $("#myId"); $("li", el); $("#myId li"); $("li", "#myId"); C O N T E X T O
48. A T R I B U T O S $(...)
49. A T R I B U T O S $(...) .addClass("css-class") .removeClass("css-class") .toggleClass("css-class")
50. A T R I B U T O S $(...) .html() .html("innerHTML") .addClass("css-class") .removeClass("css-class") .toggleClass("css-class")
51. A T R I B U T O S $(...) .text() .text("text") .html() .html("innerHTML") .addClass("css-class") .removeClass("css-class") .toggleClass("css-class")
52. A T R I B U T O S $(...) .attr("id") .attr("id", "new-id") .text() .text("text") .html() .html("innerHTML") .addClass("css-class") .removeClass("css-class") .toggleClass("css-class")
53. A T R I B U T O S $(...) .val() .val("input value"); .attr("id") .attr("id", "new-id") .text() .text("text") .html() .html("innerHTML") .addClass("css-class") .removeClass("css-class") .toggleClass("css-class")
54. $(...) .children() A T R A V E S S A R
55. $(...) .children() .eq(0) A T R A V E S S A R
56. $(...) .children() .eq(0) .next() A T R A V E S S A R
57. $(...) .children() .eq(0) .next() .prev() A T R A V E S S A R
58. $(...) .children() .eq(0) .next() .prev() .find(...) A T R A V E S S A R
59. $(...) .children() .eq(0) .next() .prev() .find(...) .end() A T R A V E S S A R
60. M A N I P U L A R .prepend() .append() $(...)
61. M A N I P U L A R .after() $(...) .before() $(...)
62. M A N I P U L A R $(...) .wrap(...) $(...) $(...) $(...) .clone(...) $(...) .clone() cria elementos soltos do documento
63. E V E N T O S .click(function(event) { // ... }); .dblclick(function(event) { // ... }); .blur(function(event) { // ... }); .keypress(function(event) { // ... });
64. E V E N T O S .hover(function(event) { // mouseenter },function(event) { // mouseleave });
65. E V E N T O S .bind('click', function(event) { // ... }); .trigger('click'); .triggerHandler('click');
66. E V E N T O S .bind('myEv', function(event) { // ... }); .trigger('myEv'); .bind('click', function(event) { // ... }); .trigger('click'); .triggerHandler('click');
67. E F E I T O S .show() .hide() .fadeIn() .fadeOut() .slideDown() .slideUp()
68. http://GustavoDutra.com mechamo@gustavodutra.com @gustavotkg La pregunta?