jQuery - Introdução

jQuery - Introdução

Uma introdução sobre o jQuery.

4a849f1aa47e5c99f1aa156337f6c951?s=128

Gustavo Dutra

November 09, 2011
Tweet

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?