Building InteractivePrototypes with jQuery   @Media Ajax - November 2007      John Resig (ejohn.org)
What is jQuery?✦   An open source JavaScript library that    simplifies the interaction between HTML    and JavaScript.
Ideal for Prototyping✦   Completely unobtrusive✦   Uses CSS to layer functionality✦   Easy to separate behavior✦   Quick, ...
The Focus of jQueryFind Some Elements Do something with them    {                         {   $(“div”).addClass(“special”)...
The jQuery Object✦   Commonly named ‘$’✦   Also named ‘jQuery’✦   Completely valid:    ✦ jQuery(“div”).addClass(“special”);
Find Some Elements...✦   Full CSS Selector 1-3 Support✦   Basic XPath✦   Better CSS Selector support than most    browsers
$(“div”)<div id=”body”>  <h2>Some Header</h2>  <div class=”contents”>      <p>...</p>      <p>...</p>  </div></div>
$(“#body”)<div id=”body”>  <h2>Some Header</h2>  <div class=”contents”>      <p>...</p>      <p>...</p>  </div></div>
$(“div#body”)<div id=”body”>  <h2>Some Header</h2>  <div class=”contents”>      <p>...</p>      <p>...</p>  </div></div>
$(“div.contents p”)  <div id=”body”>    <h2>Some Header</h2>    <div class=”contents”>        <p>...</p>        <p>...</p>...
$(“div > div”)<div id=”body”>  <h2>Some Header</h2>  <div class=”contents”>      <p>...</p>      <p>...</p>  </div></div>
$(“div:has(div)”) <div id=”body”>   <h2>Some Header</h2>   <div class=”contents”>       <p>...</p>       <p>...</p>   </di...
Do something with them✦   DOM Manipulation (append, prepend, remove)✦   Events (click, hover, toggle)✦   Effects (hide, sho...
DOM Manipulation✦   $(“a[target]”)       .append(“ (Opens in New Window)”);✦   $(“#body”).css({        border: “1px solid ...
Events✦   $(“form”).submit(function(){        if ( $(“input#name”).val() == “” )           $(“span.help”).show();    });✦ ...
Animations✦   $(“#menu”).slideDown(“slow”);✦   Individual properties:    $(“div”).animate({        fontWeight: “2em”,     ...
Ajax✦   $(“#body”).load(“sample.html div > h1”);    ✦ Before:      <div id=”body”></div>    ✦ After:      <div id=”body”> ...
Chaining✦   You can have multiple actions against a single set    of elements✦   $(“div”).hide();✦   $(“div”).hide().css(“...
Chaining (cont.)✦   $(“ul.open”) // [ ul, ul, ul ]       .children(“li”) // [ li, li, li ]          .addClass(“open”) // [...
Why jQuery?✦   Fully documented✦   Great community✦   Tons of plugins✦   Small size (14kb)✦   Everything works in IE 6+, F...
jQuery Plugins✦   Extend the jQuery system✦   Add on extra methods:    $(“div”).hideRemove();✦   Trivial to implement:    ...
Plugins✦   Drag and Drop✦   Sortables✦   Modal Dialogs✦   Tabbed Navigation✦   Sortable Tables✦   And hundreds more...
Prototyping Demos
Accordion Menu     http://jquery.com/files/apple/http://jquery.com/files/apple/done.html
Social Networking      http://jquery.com/files/social/ http://jquery.com/files/social/done.php
Todo List     http://jquery.com/files/todo/http://jquery.com/files/todo/done.php
Who uses jQuery?✦   Google✦   IBM✦   NBC✦   Amazon✦   Wordpress✦   Digg✦   many others...
Community✦   Very active mailing list    ✦ 108+ Posts/Day    ✦ 4000+ Members✦   Technorati: Dozens of blog posts per day
Books✦   2 Books Released:    ✦ Learning jQuery (Packt)    ✦ jQuery Reference (Packt)✦   1 Book in Progress:    ✦ jQuery i...
jQuery UI✦   Full set of themed widgets and    components✦   Drag & Drop✦   Tabs✦   Table✦   Modal Dialog✦   etc.
jquery.comdocs.jquery.com - jquery.com/plugins               More:            ui.jquery.com          visualjquery.com     ...
Upcoming SlideShare
Loading in...5
×

Building Interactive Prototypes with jQuery

772

Published on

Talk I gave at @Media Ajax in 2007.

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
772
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building Interactive Prototypes with jQuery

  1. 1. Building InteractivePrototypes with jQuery @Media Ajax - November 2007 John Resig (ejohn.org)
  2. 2. What is jQuery?✦ An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
  3. 3. Ideal for Prototyping✦ Completely unobtrusive✦ Uses CSS to layer functionality✦ Easy to separate behavior✦ Quick, terse, syntax
  4. 4. The Focus of jQueryFind Some Elements Do something with them { { $(“div”).addClass(“special”); jQuery Object
  5. 5. The jQuery Object✦ Commonly named ‘$’✦ Also named ‘jQuery’✦ Completely valid: ✦ jQuery(“div”).addClass(“special”);
  6. 6. Find Some Elements...✦ Full CSS Selector 1-3 Support✦ Basic XPath✦ Better CSS Selector support than most browsers
  7. 7. $(“div”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  8. 8. $(“#body”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  9. 9. $(“div#body”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  10. 10. $(“div.contents p”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  11. 11. $(“div > div”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  12. 12. $(“div:has(div)”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  13. 13. Do something with them✦ DOM Manipulation (append, prepend, remove)✦ Events (click, hover, toggle)✦ Effects (hide, show, slideDown, fadeOut)✦ AJAX (load, get, post)
  14. 14. DOM Manipulation✦ $(“a[target]”) .append(“ (Opens in New Window)”);✦ $(“#body”).css({ border: “1px solid green”, height: “40px” });
  15. 15. Events✦ $(“form”).submit(function(){ if ( $(“input#name”).val() == “” ) $(“span.help”).show(); });✦ $(“a#open”).click(function(){ $(“#menu”).show(); return false; });
  16. 16. Animations✦ $(“#menu”).slideDown(“slow”);✦ Individual properties: $(“div”).animate({ fontWeight: “2em”, width: “+=20%”, color: “green” // via plugin });✦ Callbacks: $(“div”).hide(500, function(){ // $(this) is an individual <div> element $(this).show(500); });
  17. 17. Ajax✦ $(“#body”).load(“sample.html div > h1”); ✦ Before: <div id=”body”></div> ✦ After: <div id=”body”> <h1>Hello, world!</h1> </div>✦ $.getJSON(“test.json”, function(js){ for ( var name in js ) $(“ul”).append(“<li>” + name + “</li>”); });
  18. 18. Chaining✦ You can have multiple actions against a single set of elements✦ $(“div”).hide();✦ $(“div”).hide().css(“color”,”blue”);✦ $(“div”).hide().css(“color”,”blue”).slideDown();
  19. 19. Chaining (cont.)✦ $(“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 ]
  20. 20. Why jQuery?✦ Fully documented✦ Great community✦ Tons of plugins✦ Small size (14kb)✦ Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
  21. 21. jQuery Plugins✦ Extend the jQuery system✦ Add on extra methods: $(“div”).hideRemove();✦ Trivial to implement: jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); }); };
  22. 22. Plugins✦ Drag and Drop✦ Sortables✦ Modal Dialogs✦ Tabbed Navigation✦ Sortable Tables✦ And hundreds more...
  23. 23. Prototyping Demos
  24. 24. Accordion Menu http://jquery.com/files/apple/http://jquery.com/files/apple/done.html
  25. 25. Social Networking http://jquery.com/files/social/ http://jquery.com/files/social/done.php
  26. 26. Todo List http://jquery.com/files/todo/http://jquery.com/files/todo/done.php
  27. 27. Who uses jQuery?✦ Google✦ IBM✦ NBC✦ Amazon✦ Wordpress✦ Digg✦ many others...
  28. 28. Community✦ Very active mailing list ✦ 108+ Posts/Day ✦ 4000+ Members✦ Technorati: Dozens of blog posts per day
  29. 29. Books✦ 2 Books Released: ✦ Learning jQuery (Packt) ✦ jQuery Reference (Packt)✦ 1 Book in Progress: ✦ jQuery in Action (Manning)
  30. 30. jQuery UI✦ Full set of themed widgets and components✦ Drag & Drop✦ Tabs✦ Table✦ Modal Dialog✦ etc.
  31. 31. jquery.comdocs.jquery.com - jquery.com/plugins More: ui.jquery.com visualjquery.com learningjquery.com
  1. A particular slide catching your eye?

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

×