Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Interactive Prototypes with jQuery

1,255 views

Published on

Talk I gave at @Media Ajax in 2007.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×