1. Building Interactive
Prototypes with jQuery
MeshU - May 2008
John Resig (ejohn.org)

2. What is jQuery?
✦ An open source JavaScript library that
simplifies the interaction between HTML
and JavaScript.

3. Ideal for Prototyping
✦ Completely unobtrusive
✦ Uses CSS to layer functionality
✦ Easy to separate behavior
✦ Quick, terse, syntax

4. The Focus of jQuery
Find Some Elements Do something with them
{
{
$(“div”).addClass(“special”);
jQuery Object

5. The jQuery Object
✦ Commonly named ‘$’
✦ Also named ‘jQuery’
✦ Completely valid:
✦ jQuery(“div”).addClass(“special”);

6. Find Some Elements...
✦ Full CSS Selector 1-3 Support
✦ Better CSS Selector support than most
browsers

7. $(“div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

8. $(“#body”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

9. $(“div#body”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

10. $(“div.contents p”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

11. $(“div > div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

12. $(“div:has(div)”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

13. Do something with them
✦ DOM Manipulation (append, prepend, remove)
✦ Events (click, hover, toggle)
✦ Effects (hide, show, slideDown, fadeOut)
✦ AJAX (load, get, post)

14. DOM Manipulation
✦ $(“a[target=_blank]”)
.append(“ (Opens in New Window)”);
✦ $(“#body”).css({
border: “1px solid green”,
height: “40px”
});

15. Events
✦ $(“form”).submit(function(){
if ( $(“input#name”).val() == “” )
$(“span.help”).show();
});
✦ $(“a#open”).click(function(){
$(“#menu”).show();
return false;
});

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. Ajax
✦ $(“#asdf ”).load(“sample.html”);
✦ 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. Ajax (cont.)
✦ $(“#body”).load(“sample.html div > h1”);
✦ Before:
<div id=”body”></div>
✦ After:
<div id=”body”>
<h1>Hello, world!</h1>
</div>

19. 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();

20. Chaining (cont.)
✦ var ul = $(“ul.open”); // ul, ul, ul
ul.children(“li”) // li, li, li
.addClass(“open”)
ul.find(“a”) // a, a, a
.click(function(){
$(this).next().toggle();
return false;
})

21. Why jQuery?
✦ Fully documented
✦ Great community
✦ Tons of plugins
✦ Small size (15kb)
✦ Everything works in IE 6+, Firefox,
Safari 2+, and Opera 9+

22. Graduation
✦ Ideal for Prototyping
✦ Perfect for application development
✦ Designers and Developers agree!

23. Accordion Menu
http://jquery.com/files/apple/
http://jquery.com/files/apple/done.html

24. 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();
});
};

25. Plugins
✦ Drag and Drop
✦ Sortables
✦ Modal Dialogs
✦ Tabbed Navigation
✦ Sortable Tables
✦ And hundreds more...

26. Todo List
http://jquery.com/files/todo/
http://jquery.com/files/todo/done.php

27. Social Networking
http://jquery.com/files/social/
http://jquery.com/files/social/done.php

28. jQuery UI
✦ Full set of themed widgets and
components
✦ Drop in and have it “just work”
✦ Themed to match your layout
✦ Easy to prototype with, easy to use in the
final product

29. UI Components
✦ Drag & Drop
✦ Resize
✦ Tabs
✦ Slider
✦ Table Sorting
✦ Modal Dialog
✦ etc.

30. Who uses jQuery?
✦ Google
✦ IBM
✦ NBC
✦ Amazon
✦ Wordpress
✦ Digg
✦ many others...

31. Community
✦ Very active mailing list
✦ 100+ Posts/Day
✦ 6000+ Members
✦ Technorati: Dozens of blog posts per day

32. Books
✦ 3 Books Released:
✦ Learning jQuery (Packt)
✦ jQuery Reference (Packt)
✦ jQuery in Action (Manning)

33. Random
✦ New Logo
✦ and New Web Site
✦ Coming Soon!

34. Summary
✦ Perfect for rapid-prototyping and
deployable development.
✦ Provides plenty of drop in UI code.

35. jquery.com
docs.jquery.com - jquery.com/plugins
More:
ui.jquery.com
visualjquery.com
learningjquery.com