write less do more who are we yehuda katz andy delcambre
play

write less. do more. who are we? Yehuda Katz Andy Delcambre How - PowerPoint PPT Presentation

write less. do more. who are we? Yehuda Katz Andy Delcambre How is this going to work? Introduction to jQuery Event Driven JavaScript Labs! Labs! git clone git://github.com/adelcambre/jquery-tutorial.git Introduction to jQuery h1 {


  1. write less. do more.

  2. who are we?

  3. Yehuda Katz Andy Delcambre

  4. How is this going to work?

  5. Introduction to jQuery

  6. Event Driven JavaScript

  7. Labs!

  8. Labs! git clone git://github.com/adelcambre/jquery-tutorial.git

  9. Introduction to jQuery

  10. h1 { color: #999; } UJS With jQuery $(“h1”).click(function() { $(this).fadeIn(); });

  11. get some elements. but how?

  12. CSS 3 plus • div • div:first • div:header • div:last • div:animated • div#foo • div:not(#foo) • div:contains(txt) • div.class • div:even • div:empty • div, p, a • div:odd • div:has(p) • div p • div:eq(1) • div:parent • div > p • div:gt(1) • div:hidden • div + p • div:lt(1) • div:visible • div ~ p

  13. CSS 3 plus • div[foo] • :last-child • :reset • div[foo=bar] • :only-child • :button • div[foo!=bar] • :input • :file • div[foo^=bar] • :text • :hidden • div[foo$=bar] • :password • :enabled • div[foo*=bar] • :radio • :disabled • :nth-child(2) • :checkbox • :checked • :nth-child(even) • :submit • :selected • :first-child • :image

  14. get some elements.

  15. $(“table tr:nth- child(even) > td:visible”)

  16. do stuff.

  17. $(“div”) Returns jquery object

  18. $(“div”).fadeIn() Returns jquery object

  19. $(“div”).fadeIn() .css(“color”, “green”) Returns jquery object

  20. we call this chaining

  21. Crazy chains $(“ul.open”) // [ ul, ul, ul ] .children(“li”) // [ li, li, li ] .addClass(“open”) // [ li, li, li] .end() // [ ul, ul, ul ] . fi nd(“a”) // [ a, a, a ] .click(function(){ $(this).next().toggle(); return false; }) // [ a, a, a ] .end(); // [ ul, ul, ul ]

  22. Lab 1: Selectors • Select every other row of the table • Select the Checked checkboxes • Select the first column of the table • Select the top level of the outline • Select any links to jquery.com • Select any images that contain flowers

  23. 5 parts of jquery dom events effects ajax plugins

  24. dom traversal $(“div”).parent(); $(“div”).siblings(); $(“div”).next(); $(“div”).nextAll(“p”); $(“div”).nextAll(“p:first”); dom

  25. $(“div”) <body> <div> <div> <pre> <p> <p> <p> <p> <p> <p> dom

  26. $(“div # foo”).siblings() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom

  27. $(“div”).next() <body> <div> <div> <pre> <p> <p> <p> <p> <p> <p> dom

  28. $(“div”).nextall(“p”) <body> <div id='foo'> <p> <p> <pre> <p> dom

  29. $(“div”).nextall(“p: fi rst”) <body> <div id='foo'> <p> <p> <pre> <p> dom

  30. fi nd $(“div pre”) $(“div”).find(“pre”) dom

  31. $(“div pre”) <body> <div> <div> <pre> <p> <pre> <pre> <p> <pre> <p> dom

  32. $(“div”). fi nd(“pre”) <body> <div> <div> <pre> <p> <pre> <pre> <p> <pre> <p> dom

  33. fi lter $(“div:contains(some text)”) $(“div”).filter(“:contains(some text)”) $(“div”).filter(function() { return $(this).text().match(“some text”) }) dom

  34. andSelf() $(“div”).siblings().andSelf() $(“div”).parent().andSelf() dom

  35. $(“div”).siblings().andself() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom

  36. $(“p”).parent().andself() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom

  37. Lab 2: Traversal • Select any text areas and their labels • Any span’s parent • All of the form elements from a form that PUT’s

  38. attributes $(“div”).attr(“id”) // returns id $(“div”).attr(“id”, “hello”) // sets id to hello $(“div”).attr(“id”, function() { return this.name }) $(“div”).attr({id: “foo”, name: “bar”}) $(“div”).removeAttr(“id”); dom

  39. classes $(“div”).addClass(“foo”) $(“div”).removeClass(“foo”) $(“div”).toggleClass(“foo”) $(“div”).hasClass(“foo”) dom

  40. other $(“div”).html() $(“div”).html(“<p>Hello</p>”) $(“div”).text() $(“div”).text(“Hello”) $(“div”).val() $(“div”).val(“Hello”) dom

  41. noticing a pattern?

  42. manipulation $(“div”).append(“<p>Hello</p>”) $(“<p>Hello</p>”).appendTo(“div”) $(“div”).after(“<p>Hello</p>”) $(“<p>Hello</p>”).insertAfter(“div”) dom

  43. way more... http://docs.jquery.com http://api.jquery.com dom

  44. Lab 3: Manipulation Note: Use the Lab 2 File again • Add CSS4 to the list after CSS3 • Remove any images with Dogs • Turn the ruby row red • Add some default text to the input field

  45. 5 parts of jquery dom events effects ajax plugins

  46. document ready $(document).ready(function() { ... }) Alias: jQuery(function($) { ... })

  47. bind $(“div”).bind(“click”, function() { ... }) Alias: $(“div”).click(function() { ... })

  48. “this” refers to the element bound

  49. e $(“div”).click(function(e) { ... })

  50. corrected event object Property Correction target The element that triggered the event (event delegation) relatedTarget The element that the mouse is moving in (or out) of pageX/Y The mouse cursor relative to the document mouse: 1 (left) 2 (middle) 3 (right) which keypress: The ASCII value of the text input metaKey Control on Windows and Apple on OSX

  51. trigger $(“div”).trigger(“click”) Alias: $(“div”).click()

  52. triggerHandler doesn’t trigger the browser’s default actions

  53. custom events $(“div”).bind(“myEvent”, function() { ... }) $(“div”).trigger(“myEvent”)

  54. hover $(“div”).hover(function() { ... }, function() { ... })

  55. toggle $(“div”).toggle(function() { ... }, function() { ... })

  56. 1.3 live $(“div”).live(“click”, function() { ... })

  57. 5 parts of jquery dom events effects ajax plugins

  58. Fades $(“div”).fadeIn() $(“div”).fadeOut(“slow”)

  59. slides $(“div”).slideUp(200) $(“div”).slideDown(“slow”)

  60. animate $(“div”).animate({height: “toggle”, opacity: “toggle”}) $(“div”).animate({fontSize: “24px”, opacity: 0.5}, {easing: “expo”})

  61. Lab 4: Events and Effects Note: Use the Lab 2 File again • Fade out all of the divs • Make each img grow when you mouseover them (and shrink again after you leave) • Make clicking an li collapse the sub list

  62. 5 parts of jquery dom events effects ajax plugins

  63. make easy things easy $(“div”).load(“some_url”); $(“div”).load(“some_url”, {data: “foo”}, function(text) { ... });

  64. it’s easy to do it right $.getJSON(“some_url”, function(json) { ... }) $.getJSON(“some_url”, {data: “foo”}, function(json) { ... })

  65. it’s consistent $.get(“some_url”, function(text) { ... }) $.post(“some_url”, {data: “foo”}, function(text) { ... })

  66. and powerful $.ajax Options • async • global • beforeSend • ifModi fi ed • cache • jsonp • complete • processData • contentType • success • data • timeout • dataType • type • error

  67. and powerful global ajax settings /* No Ajax requests exist, and one starts */ $(“div.progress”).ajaxStart(function() { $(this).show() }); /* The last Ajax request stops */ $(“div.progress”).ajaxStop(function() { $(this).hide() }); /* Any Ajax request is sent */ $(“p”).ajaxSend(function() { ... }); /* Any Ajax request completes (success or failure) */ $(“div”).ajaxComplete(function() { ... }); /* Any Ajax request errors out */ $(“div”).ajaxError(function() { ... }); /* Any Ajax request succeeds */ $(“div”).ajaxSucccess(function() { ... });

  68. 5 parts of jquery dom events effects ajax plugins

  69. there are hundreds

  70. which are important?

  71. jquery ui • Draggables • Accordion • Droppables • Date Picker • Sortables • Dialog • Selectables • Slider Widgets • Resizables • Tabs Primitives http://ui.jquery.com

  72. jquery forms ajaxify a form in one easy step: $(“form.remote”).ajaxForm() http://www.malsup.com/jquery/form/

  73. form validation specify validation rules in your markup http://bassistance.de/jquery- plugins/jquery-plugin-validation/

  74. BASE metadata plugin specify metadata for elements in markup <div data=” { some: ‘data’ } ”> $(“div”).metadata().some // returns ‘data’ http://jqueryjs.googlecode.com/svn/ trunk/plugins/metadata/

  75. Event Driven JavaScript

  76. http://github.com/ wycats/blue-ridge

  77. jQuery on Rails

Recommend


More recommend