0
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 {
  color: #999;
}

         UJS With jQuery
                 $(“h1”).click(function() {
                   $(this).fad...
get some elements.
     but how?
CSS 3 plus
• div          • div:first       • div:header
• div#foo      • div:last        • div:animated
• div.class    • ...
CSS 3 plus
• div[foo]            • :last-child   • :reset
• div[foo=bar]        • :only-child   • :button
• div[foo!=bar] ...
get some elements.
$(“table tr:nth-
child(even) > td:visible”)
do stuff.
$(“div”)
Returns jquery object
$(“div”).fadeIn()
   Returns jquery object
$(“div”).fadeIn()
.css(“color”, “green”)
      Returns jquery object
we call this chaining
Crazy chains
$(“ul.open”) // [ ul, ul, ul ]
    .children(“li”) // [ li, li, li ]
        .addClass(“open”) // [ li, li, l...
Lab 1: Selectors
•Select every other row of the table
• Select the Checked checkboxes
• Select the first column of the tabl...
5 parts of jquery
        dom
      events
      effects
       ajax
      plugins
dom traversal
$(“div”).parent();
$(“div”).siblings();
$(“div”).next();
$(“div”).nextAll(“p”);
$(“div”).nextAll(“p:first”);...
$(“div”)

                          <body>




            <div>         <div>         <pre>




<p>   <p>           <p>  ...
$(“div#foo”).siblings()

                                   <body>




            <div id='foo'>         <div>         <p...
$(“div”).next()

                          <body>




            <div>         <div>         <pre>




<p>   <p>         ...
$(“div”).nextall(“p”)

                       <body>




<div id='foo'>   <p>    <p>     <pre>   <p>




                 ...
$(“div”).nextall(“p: rst”)

                        <body>




 <div id='foo'>   <p>    <p>     <pre>   <p>




          ...
nd
$(“div pre”)
$(“div”).find(“pre”)




                       dom
$(“div pre”)

                              <body>




              <div>           <div>         <pre>




<p>   <pre>  ...
$(“div”). nd(“pre”)

                                <body>




                <div>           <div>         <pre>




<p...
lter
$(“div:contains(some text)”)
$(“div”).filter(“:contains(some text)”)

$(“div”).filter(function() {
   return $(this)....
andSelf()
$(“div”).siblings().andSelf()
$(“div”).parent().andSelf()




                                dom
$(“div”).siblings().andself()

                                      <body>




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

                                    <body>




             <div id='foo'>         <div>       ...
Lab 2: Traversal


• Select any text areas and their labels
• Any span’s parent
• All of the form elements from a form tha...
attributes
$(“div”).attr(“id”) // returns id
$(“div”).attr(“id”, “hello”) // sets id to hello
$(“div”).attr(“id”, function...
classes
$(“div”).addClass(“foo”)
$(“div”).removeClass(“foo”)
$(“div”).toggleClass(“foo”)
$(“div”).hasClass(“foo”)



     ...
other
$(“div”).html()
$(“div”).html(“<p>Hello</p>”)
$(“div”).text()
$(“div”).text(“Hello”)
$(“div”).val()
$(“div”).val(“He...
noticing a pattern?
manipulation
$(“div”).append(“<p>Hello</p>”)
$(“<p>Hello</p>”).appendTo(“div”)
$(“div”).after(“<p>Hello</p>”)
$(“<p>Hello<...
way more...
http://docs.jquery.com
 http://api.jquery.com




                         dom
Lab 3: Manipulation
                   Note: Use the Lab 2 File again



• Add CSS4 to the list after CSS3
• Remove any im...
5 parts of jquery
        dom
      events
      effects
       ajax
      plugins
document ready
$(document).ready(function() { ... })
  Alias: jQuery(function($) { ... })
bind
$(“div”).bind(“click”, function() { ... })
 Alias: $(“div”).click(function() { ... })
“this” bound
refers to the element
e
$(“div”).click(function(e) { ... })
corrected event object
Property                            Correction
   target     The element that triggered the event (...
trigger
$(“div”).trigger(“click”)
 Alias: $(“div”).click()
triggerHandler
doesn’t trigger the browser’s default actions
custom events
$(“div”).bind(“myEvent”, function() { ... })
         $(“div”).trigger(“myEvent”)
hover
$(“div”).hover(function() { ... }, function() { ... })
toggle
$(“div”).toggle(function() { ... }, function() { ... })
1.3



                live
$(“div”).live(“click”, function() { ... })
5 parts of jquery
        dom
      events
      effects
       ajax
      plugins
Fades
    $(“div”).fadeIn()
$(“div”).fadeOut(“slow”)
slides
   $(“div”).slideUp(200)
$(“div”).slideDown(“slow”)
animate
       $(“div”).animate({height: “toggle”, opacity: “toggle”})
$(“div”).animate({fontSize: “24px”, opacity: 0.5}, ...
Lab 4: Events and Effects
                       Note: Use the Lab 2 File again



• Fade out all of the divs
• Make each ...
5 parts of jquery
        dom
      events
      effects
       ajax
      plugins
make easy things easy
$(“div”).load(“some_url”);
$(“div”).load(“some_url”, {data: “foo”},
  function(text) { ... });
it’s easy to do it right
$.getJSON(“some_url”, function(json) { ... })
$.getJSON(“some_url”, {data: “foo”},
  function(jso...
it’s consistent
$.get(“some_url”, function(text) { ... })
$.post(“some_url”, {data: “foo”},
  function(text) { ... })
and powerful
              $.ajax Options

•   async             •   global
•   beforeSend        •   ifModi ed
•   cache ...
and powerful
                  global ajax settings
/* No Ajax requests exist, and one starts */
$(“div.progress”).ajaxSta...
5 parts of jquery
        dom
      events
      effects
       ajax
      plugins
there are hundreds
which are important?
jquery ui
• Draggables           • Accordion
• Droppables           • Date Picker
• Sortables            • Dialog
• Select...
jquery one easy step:
ajaxify a form in
                  forms
 $(“form.remote”).ajaxForm()




       http://www.malsup....
form validation
specify validation rules in your markup




               http://bassistance.de/jquery-
             plug...
BASE



 metadata plugin
specify metadata for elements in markup

         <div data=”{some: ‘data’}”>
$(“div”).metadata()...
Event Driven
 JavaScript
http://github.com/
wycats/blue-ridge
jQuery on Rails
jQuery and RJS
Rails 3
Ajax and Rails
  $.getJSON(“/rails/action”)
Ajax and Rails
 respond_to do |format|
     format.json {
       render :json => obj
     }
 end
link_to_remote
link_to_remote "Delete this post",
  :update => "posts",
  :url => { :action => "destroy",
            :id ...
link_to_remote
link_to "Delete this post",
   url(:action => "destroy",
       :id => post.id),
   :rel => "#posts"
link_to_remote
$(‘a.remote’).live(“click”, function() {
  $(this.rel).load(this.href)
});
form_remote_tag
<% form_remote_tag :url => ...,
   :update => “res” do -%>

<% form_tag :url => ...,
   :rel => “#res” do ...
form_remote_tag
$(‘form’).each(function() {
   $(this).ajaxForm({ target: this.rel })
})
observe_ eld
<%=                       var lastTime = new Date;
observe_field :suggest,   $('#suggest')
 :url => {        ...
periodically_call_remote
periodically_call_remote(   setInterval(function() {
  :url => {                   $('#avg')
    ...
jQuery%20on%20Rails%20Presentation
Upcoming SlideShare
Loading in...5
×

jQuery%20on%20Rails%20Presentation

1,172

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,172
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery%20on%20Rails%20Presentation"

  1. 1. write less. do more.
  2. 2. who are we?
  3. 3. Yehuda Katz Andy Delcambre
  4. 4. How is this going to work?
  5. 5. Introduction to jQuery
  6. 6. Event Driven JavaScript
  7. 7. Labs!
  8. 8. Labs! git clone git://github.com/adelcambre/jquery-tutorial.git
  9. 9. Introduction to jQuery
  10. 10. h1 { color: #999; } UJS With jQuery $(“h1”).click(function() { $(this).fadeIn(); });
  11. 11. get some elements. but how?
  12. 12. CSS 3 plus • div • div:first • div:header • div#foo • div:last • div:animated • div.class • div:not(#foo) • div:contains(txt) • div, p, a • div:even • div:empty • div p • 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
  13. 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. 14. get some elements.
  15. 15. $(“table tr:nth- child(even) > td:visible”)
  16. 16. do stuff.
  17. 17. $(“div”) Returns jquery object
  18. 18. $(“div”).fadeIn() Returns jquery object
  19. 19. $(“div”).fadeIn() .css(“color”, “green”) Returns jquery object
  20. 20. we call this chaining
  21. 21. Crazy chains $(“ul.open”) // [ ul, ul, ul ] .children(“li”) // [ li, li, li ] .addClass(“open”) // [ li, li, li] .end() // [ ul, ul, ul ] .find(“a”) // [ a, a, a ] .click(function(){ $(this).next().toggle(); return false; }) // [ a, a, a ] .end(); // [ ul, ul, ul ]
  22. 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. 23. 5 parts of jquery dom events effects ajax plugins
  24. 24. dom traversal $(“div”).parent(); $(“div”).siblings(); $(“div”).next(); $(“div”).nextAll(“p”); $(“div”).nextAll(“p:first”); dom
  25. 25. $(“div”) <body> <div> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  26. 26. $(“div#foo”).siblings() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  27. 27. $(“div”).next() <body> <div> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  28. 28. $(“div”).nextall(“p”) <body> <div id='foo'> <p> <p> <pre> <p> dom
  29. 29. $(“div”).nextall(“p: rst”) <body> <div id='foo'> <p> <p> <pre> <p> dom
  30. 30. nd $(“div pre”) $(“div”).find(“pre”) dom
  31. 31. $(“div pre”) <body> <div> <div> <pre> <p> <pre> <pre> <p> <pre> <p> dom
  32. 32. $(“div”). nd(“pre”) <body> <div> <div> <pre> <p> <pre> <pre> <p> <pre> <p> dom
  33. 33. lter $(“div:contains(some text)”) $(“div”).filter(“:contains(some text)”) $(“div”).filter(function() { return $(this).text().match(“some text”) }) dom
  34. 34. andSelf() $(“div”).siblings().andSelf() $(“div”).parent().andSelf() dom
  35. 35. $(“div”).siblings().andself() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  36. 36. $(“p”).parent().andself() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  37. 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. 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. 39. classes $(“div”).addClass(“foo”) $(“div”).removeClass(“foo”) $(“div”).toggleClass(“foo”) $(“div”).hasClass(“foo”) dom
  40. 40. other $(“div”).html() $(“div”).html(“<p>Hello</p>”) $(“div”).text() $(“div”).text(“Hello”) $(“div”).val() $(“div”).val(“Hello”) dom
  41. 41. noticing a pattern?
  42. 42. manipulation $(“div”).append(“<p>Hello</p>”) $(“<p>Hello</p>”).appendTo(“div”) $(“div”).after(“<p>Hello</p>”) $(“<p>Hello</p>”).insertAfter(“div”) dom
  43. 43. way more... http://docs.jquery.com http://api.jquery.com dom
  44. 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. 45. 5 parts of jquery dom events effects ajax plugins
  46. 46. document ready $(document).ready(function() { ... }) Alias: jQuery(function($) { ... })
  47. 47. bind $(“div”).bind(“click”, function() { ... }) Alias: $(“div”).click(function() { ... })
  48. 48. “this” bound refers to the element
  49. 49. e $(“div”).click(function(e) { ... })
  50. 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 which mouse: 1 (left) 2 (middle) 3 (right) keypress: The ASCII value of the text input metaKey Control on Windows and Apple on OSX
  51. 51. trigger $(“div”).trigger(“click”) Alias: $(“div”).click()
  52. 52. triggerHandler doesn’t trigger the browser’s default actions
  53. 53. custom events $(“div”).bind(“myEvent”, function() { ... }) $(“div”).trigger(“myEvent”)
  54. 54. hover $(“div”).hover(function() { ... }, function() { ... })
  55. 55. toggle $(“div”).toggle(function() { ... }, function() { ... })
  56. 56. 1.3 live $(“div”).live(“click”, function() { ... })
  57. 57. 5 parts of jquery dom events effects ajax plugins
  58. 58. Fades $(“div”).fadeIn() $(“div”).fadeOut(“slow”)
  59. 59. slides $(“div”).slideUp(200) $(“div”).slideDown(“slow”)
  60. 60. animate $(“div”).animate({height: “toggle”, opacity: “toggle”}) $(“div”).animate({fontSize: “24px”, opacity: 0.5}, {easing: “expo”})
  61. 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. 62. 5 parts of jquery dom events effects ajax plugins
  63. 63. make easy things easy $(“div”).load(“some_url”); $(“div”).load(“some_url”, {data: “foo”}, function(text) { ... });
  64. 64. it’s easy to do it right $.getJSON(“some_url”, function(json) { ... }) $.getJSON(“some_url”, {data: “foo”}, function(json) { ... })
  65. 65. it’s consistent $.get(“some_url”, function(text) { ... }) $.post(“some_url”, {data: “foo”}, function(text) { ... })
  66. 66. and powerful $.ajax Options • async • global • beforeSend • ifModi ed • cache • jsonp • complete • processData • contentType • success • data • timeout • dataType • type • error
  67. 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. 68. 5 parts of jquery dom events effects ajax plugins
  69. 69. there are hundreds
  70. 70. which are important?
  71. 71. jquery ui • Draggables • Accordion • Droppables • Date Picker • Sortables • Dialog • Selectables • Slider Widgets • Resizables • Tabs Primitives http://ui.jquery.com
  72. 72. jquery one easy step: ajaxify a form in forms $(“form.remote”).ajaxForm() http://www.malsup.com/jquery/form/
  73. 73. form validation specify validation rules in your markup http://bassistance.de/jquery- plugins/jquery-plugin-validation/
  74. 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. 75. Event Driven JavaScript
  76. 76. http://github.com/ wycats/blue-ridge
  77. 77. jQuery on Rails
  78. 78. jQuery and RJS
  79. 79. Rails 3
  80. 80. Ajax and Rails $.getJSON(“/rails/action”)
  81. 81. Ajax and Rails respond_to do |format| format.json { render :json => obj } end
  82. 82. link_to_remote link_to_remote "Delete this post", :update => "posts", :url => { :action => "destroy", :id => post.id }
  83. 83. link_to_remote link_to "Delete this post", url(:action => "destroy", :id => post.id), :rel => "#posts"
  84. 84. link_to_remote $(‘a.remote’).live(“click”, function() { $(this.rel).load(this.href) });
  85. 85. form_remote_tag <% form_remote_tag :url => ..., :update => “res” do -%> <% form_tag :url => ..., :rel => “#res” do -%>
  86. 86. form_remote_tag $(‘form’).each(function() { $(this).ajaxForm({ target: this.rel }) })
  87. 87. observe_ eld <%= var lastTime = new Date; observe_field :suggest, $('#suggest') :url => { .live(“keyup”, function() { :action => :find }, if(new Date - lastTime > 250) { :frequency => 0.25, var field = $('#suggest'); :update => :suggest, var url = field.attr('rel'); :with => 'q' field.load(url, %> {q: field.val()}); } lastTime = new Date; });
  88. 88. periodically_call_remote periodically_call_remote( setInterval(function() { :url => { $('#avg') :action => 'avgs' }, .load('/some/avgs'); :update => 'avg', }, 20000); :frequency => '20')
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×